Skip to content

Commit ea0020c

Browse files
shivani170shivani170
committed
chore: saved variable pop up replacement
1 parent 549c5cb commit ea0020c

File tree

16 files changed

+317
-474
lines changed

16 files changed

+317
-474
lines changed

‎src/assets/icons/ic-file-download.svg‎

Lines changed: 0 additions & 22 deletions
This file was deleted.

‎src/components/CIPipelineN/Constants.tsx‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -29,3 +29,8 @@ export const CONTAINER_CONDITION_TYPE_TO_CONDITION_TYPE_MAP = {
2929
[ConditionContainerType.TRIGGER_SKIP]: [ConditionType.TRIGGER, ConditionType.SKIP],
3030
[ConditionContainerType.PASS_FAILURE]: [ConditionType.PASS, ConditionType.FAIL],
3131
}
32+
33+
export enum TaskActionMenuOptionIdEnum {
34+
DELETE = 'delete',
35+
MOVE = 'move',
36+
}

‎src/components/CIPipelineN/TaskList.tsx‎

Lines changed: 58 additions & 46 deletions
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,6 @@
1616

1717
import { useState, useContext, Fragment, SyntheticEvent } from 'react'
1818
import {
19-
PopupMenu,
2019
BuildStageVariable,
2120
PluginType,
2221
RefVariableStageType,
@@ -27,17 +26,21 @@ import {
2726
PipelineStageTaskActionModalType,
2827
PipelineStageTaskActionModalStateType,
2928
ResourceKindType,
29+
ActionMenu,
30+
ButtonStyleType,
31+
ButtonVariantType,
32+
ComponentSizeType,
33+
ActionMenuProps,
34+
Icon,
3035
} from '@devtron-labs/devtron-fe-common-lib'
3136
import { importComponentFromFELibrary } from '@Components/common'
3237
import TaskTitle from './TaskTitle'
3338
import { ReactComponent as Add } from '../../assets/icons/ic-add.svg'
3439
import { ReactComponent as Drag } from '../../assets/icons/drag.svg'
35-
import { ReactComponent as Dots } from '@Icons/ic-more-vertical.svg'
36-
import { ReactComponent as Trash } from '../../assets/icons/ic-delete-interactive.svg'
3740
import { ReactComponent as AlertTriangle } from '../../assets/icons/ic-alert-triangle.svg'
38-
import { ReactComponent as MoveToPre } from '../../assets/icons/ic-arrow-backward.svg'
3941
import { TaskListType } from '../ciConfig/types'
4042
import { pipelineContext } from '../workflowEditor/workflowEditor'
43+
import { TaskActionMenuOptionIdEnum } from './Constants'
4144

4245
const getTaskActionPluginValidationStatus: (params) => ValidationResponseType = importComponentFromFELibrary(
4346
'getTaskActionPluginValidationStatus',
@@ -337,6 +340,23 @@ export const TaskList = ({ withWarning, setInputVariablesListFromPrevStep, isJob
337340

338341
const currentStageText = isCdPipeline ? 'deploy' : 'build'
339342

343+
const handleDragging = () => {
344+
setDragAllowed(true)
345+
}
346+
347+
const handleActionMenuClick: ActionMenuProps<TaskActionMenuOptionIdEnum>['onClick'] = (item) => {
348+
switch (item.id) {
349+
case TaskActionMenuOptionIdEnum.DELETE:
350+
handleTaskAction(selectedTaskIndex, PipelineStageTaskActionModalType.DELETE)
351+
break
352+
case TaskActionMenuOptionIdEnum.MOVE:
353+
handleTaskAction(selectedTaskIndex, PipelineStageTaskActionModalType.MOVE_PLUGIN)
354+
break
355+
default:
356+
break
357+
}
358+
}
359+
340360
return (
341361
<>
342362
<div className={withWarning ? 'with-warning' : ''}>
@@ -355,7 +375,7 @@ export const TaskList = ({ withWarning, setInputVariablesListFromPrevStep, isJob
355375
>
356376
<Drag
357377
className="dc__grabbable icon-dim-20 p-2 dc__no-shrink"
358-
onMouseDown={() => setDragAllowed(true)}
378+
onMouseDown={handleDragging}
359379
/>
360380
<div className={`flex left dc__gap-6 dc__content-space w-100`}>
361381
<TaskTitle taskDetail={taskDetail} />
@@ -364,47 +384,39 @@ export const TaskList = ({ withWarning, setInputVariablesListFromPrevStep, isJob
364384
!formDataErrorObj[activeStageName].steps[index].isValid && (
365385
<AlertTriangle className="icon-dim-16 mr-5 ml-5 mt-2 mw-16" />
366386
)}
367-
<PopupMenu autoClose>
368-
<PopupMenu.Button isKebab>
369-
<Dots
370-
className="icon-dim-16 mt-2 rotate fcn-7"
371-
style={{ ['--rotateBy' as any]: '90deg' }}
372-
/>
373-
</PopupMenu.Button>
374-
<PopupMenu.Body>
375-
<button
376-
className="dc__transparent cr-5 flex left p-8 pointer dc__hover-n50 w-100 dc__gap-10"
377-
data-index={index}
378-
onClick={handleTriggerDelete}
379-
type="button"
380-
>
381-
<Trash className="icon-dim-16 scr-5 dc__no-shrink" />
382-
Remove
383-
</button>
384-
{!isJobView && taskDetail.stepType && (
385-
<button
386-
className="dc__transparent flex left p-8 pointer dc__hover-n50 w-100 dc__gap-10"
387-
data-index={index}
388-
onClick={handleTriggerMoveToOtherStage}
389-
>
390-
{activeStageName === BuildStageVariable.PreBuild ? (
391-
<>
392-
<MoveToPre
393-
className="rotate icon-dim-16 dc__no-shrink"
394-
style={{ ['--rotateBy' as any]: '180deg' }}
395-
/>
396-
Move to post-{currentStageText} stage
397-
</>
398-
) : (
399-
<>
400-
<MoveToPre className="icon-dim-16 dc__no-shrink" />
401-
Move to pre-{currentStageText} stage
402-
</>
403-
)}
404-
</button>
405-
)}
406-
</PopupMenu.Body>
407-
</PopupMenu>
387+
388+
<ActionMenu<TaskActionMenuOptionIdEnum>
389+
id="task-item-action-menu"
390+
onClick={handleActionMenuClick}
391+
options={[
392+
{
393+
items: [
394+
{
395+
id: TaskActionMenuOptionIdEnum.DELETE,
396+
label: 'Remove',
397+
startIcon: { name: 'ic-delete' },
398+
type: 'negative',
399+
},
400+
!isJobView &&
401+
taskDetail.stepType && {
402+
id: TaskActionMenuOptionIdEnum.MOVE,
403+
label: `Move to ${
404+
activeStageName === BuildStageVariable.PreBuild ? 'post' : 'pre'
405+
}-${currentStageText} stage`,
406+
startIcon: { name: 'ic-arrow-right' },
407+
},
408+
],
409+
},
410+
]}
411+
buttonProps={{
412+
dataTestId: 'task-item-action-menu-button',
413+
icon: <Icon name="ic-more-vertical" color={null} rotateBy={90} />,
414+
variant: ButtonVariantType.borderLess,
415+
ariaLabel: 'Open action menu',
416+
style: ButtonStyleType.neutral,
417+
size: ComponentSizeType.xs,
418+
}}
419+
/>
408420
</div>
409421
<div className="vertical-line-connector" />
410422
</Fragment>

‎src/components/ResourceBrowser/ResourceList/ClusterSelector.tsx‎

Lines changed: 44 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -18,12 +18,16 @@ import React, { useState } from 'react'
1818
import { useHistory } from 'react-router-dom'
1919

2020
import {
21+
ActionMenu,
22+
ActionMenuItemType,
23+
ActionMenuProps,
2124
Badge,
25+
ButtonStyleType,
26+
ButtonVariantType,
2227
ComponentSizeType,
2328
ContextSwitcher,
2429
handleAnalyticsEvent,
2530
Icon,
26-
PopupMenu,
2731
RecentlyVisitedOptions,
2832
ResourceKindType,
2933
SelectPickerProps,
@@ -33,13 +37,13 @@ import {
3337
useUserPreferences,
3438
} from '@devtron-labs/devtron-fe-common-lib'
3539

36-
import { ReactComponent as MenuDots } from '@Icons/ic-more-vertical.svg'
3740
import { importComponentFromFELibrary } from '@Components/common'
3841
import { DEFAULT_CLUSTER_ID } from '@Pages/GlobalConfigurations/ClustersAndEnvironments'
3942
import DeleteClusterConfirmationModal from '@Pages/GlobalConfigurations/ClustersAndEnvironments/DeleteClusterConfirmationModal'
4043

4144
import { ResourceBrowserGAEvent } from '../Constants'
4245
import { ClusterSelectorType } from '../Types'
46+
import { ClusterActionMenuOptionIdEnum } from './constants'
4347
import { getClusterSelectOptions } from './utils'
4448

4549
const RBPageHeaderPopup = importComponentFromFELibrary('RBPageHeaderPopup', null, 'function')
@@ -137,6 +141,18 @@ const ClusterSelector: React.FC<ClusterSelectorType> = ({
137141
replace(URLS.INFRASTRUCTURE_MANAGEMENT_RESOURCE_BROWSER)
138142
}
139143

144+
const handleActionMenuClick: ActionMenuProps['onClick'] = (
145+
item: ActionMenuItemType<ClusterActionMenuOptionIdEnum>,
146+
) => {
147+
switch (item.id) {
148+
case ClusterActionMenuOptionIdEnum.DELETE:
149+
handleOpenDeleteModal()
150+
break
151+
default:
152+
break
153+
}
154+
}
155+
140156
return (
141157
<div className="flexbox dc__align-items-center dc__gap-12">
142158
<ContextSwitcher
@@ -156,32 +172,38 @@ const ClusterSelector: React.FC<ClusterSelectorType> = ({
156172

157173
{defaultOption?.isProd && <Badge label="Production" size={ComponentSizeType.xxs} />}
158174

159-
{RBPageHeaderPopup && !isInstallationStatusView ? (
175+
{RBPageHeaderPopup && isInstallationStatusView ? (
160176
<RBPageHeaderPopup
161177
handleDelete={handleOpenDeleteModal}
162178
handleHibernationRules={handleOpenHibernationRulesModal}
163179
handlePodSpread={handleOpenPodSpreadModal}
164180
/>
165181
) : (
166-
<PopupMenu autoClose>
167-
<PopupMenu.Button rootClassName="flex ml-auto p-4 border__secondary" isKebab>
168-
<MenuDots className="icon-dim-16 fcn-7" data-testid="popup-menu-button" />
169-
</PopupMenu.Button>
170-
171-
<PopupMenu.Body rootClassName="dc__border p-4">
172-
<div className="w-150 flexbox-col">
173-
<button
174-
type="button"
175-
className="dc__outline-none flexbox dc__gap-8 dc__transparent dc__hover-n50 px-12 py-6 dc__align-items-center"
176-
onClick={handleOpenDeleteModal}
177-
data-testid="delete_cluster_button"
178-
>
179-
<Icon name="ic-delete" color="R500" />
180-
<span className="fs-14 lh-1-5 cr-5">Delete</span>
181-
</button>
182-
</div>
183-
</PopupMenu.Body>
184-
</PopupMenu>
182+
<ActionMenu<ClusterActionMenuOptionIdEnum>
183+
id={`cluster-actions-action-menu-${clusterId}`}
184+
onClick={handleActionMenuClick}
185+
options={[
186+
{
187+
items: [
188+
{
189+
id: ClusterActionMenuOptionIdEnum.DELETE,
190+
label: 'Delete cluster',
191+
startIcon: { name: 'ic-delete' },
192+
type: 'negative',
193+
},
194+
],
195+
},
196+
]}
197+
buttonProps={{
198+
icon: <Icon name="ic-more-vertical" color={null} />,
199+
ariaLabel: 'additional-options',
200+
dataTestId: 'delete_cluster_button',
201+
showAriaLabelInTippy: false,
202+
style: ButtonStyleType.neutral,
203+
variant: ButtonVariantType.borderLess,
204+
size: ComponentSizeType.medium,
205+
}}
206+
/>
185207
)}
186208

187209
{PodSpreadModal && showEditPodSpreadModal && (

‎src/components/ResourceBrowser/ResourceList/constants.ts‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -85,3 +85,7 @@ export const NODE_SEARCH_KEY_PLACEHOLDER: Record<NODE_SEARCH_KEYS | typeof NODE_
8585
[NODE_SEARCH_KEYS.NODE_GROUP]: 'Search by node group name Eg. mainnode',
8686
[NODE_K8S_VERSION_FILTER_KEY]: 'Select K8s version',
8787
}
88+
89+
export enum ClusterActionMenuOptionIdEnum {
90+
DELETE = 'DELETE',
91+
}

0 commit comments

Comments
 (0)