Skip to content

Commit 6a78a10

Browse files
arunjaindevarunjaindev
committed
feat: add cluster actions in env list
1 parent 67d4a22 commit 6a78a10

File tree

3 files changed

+97
-88
lines changed

3 files changed

+97
-88
lines changed

‎src/Pages/GlobalConfigurations/ClustersAndEnvironments/ClusterList.components.tsx

Lines changed: 91 additions & 85 deletions
Original file line numberDiff line numberDiff line change
@@ -61,15 +61,7 @@ export const ClusterIconWithStatus = ({
6161
)
6262
}
6363

64-
export const ClusterListCellComponent: FunctionComponent<
65-
TableCellComponentProps<ClusterRowData, FiltersTypeEnum.STATE, {}>
66-
> = ({
67-
field,
68-
row: {
69-
data: { clusterId, clusterName, clusterType, envCount, serverUrl, clusterCategory, isVirtualCluster, status },
70-
},
71-
isRowActive,
72-
}: TableCellComponentProps<ClusterRowData, FiltersTypeEnum.STATE, {}>) => {
64+
export const ClusterActions = ({ clusterId, isVirtualCluster }: { clusterId: number; isVirtualCluster: boolean }) => {
7365
const { push } = useHistory()
7466
const { search } = useLocation()
7567

@@ -120,6 +112,94 @@ export const ClusterListCellComponent: FunctionComponent<
120112
}
121113
}
122114

115+
return (
116+
<div className="flex dc__gap-8">
117+
<Button
118+
dataTestId={`add-env-${clusterId}`}
119+
ariaLabel={`add-env-${clusterId}`}
120+
icon={<Icon name="ic-add" color={null} />}
121+
showAriaLabelInTippy={false}
122+
variant={ButtonVariantType.borderLess}
123+
size={ComponentSizeType.xs}
124+
onClick={handleAddEnv}
125+
showTooltip
126+
tooltipProps={{
127+
content: 'Add Environment',
128+
}}
129+
/>
130+
<Button
131+
dataTestId={`edit-cluster-${clusterId}`}
132+
ariaLabel={`edit-cluster-${clusterId}`}
133+
icon={<Icon name="ic-pencil" color={null} />}
134+
variant={ButtonVariantType.borderLess}
135+
showAriaLabelInTippy={false}
136+
style={ButtonStyleType.neutral}
137+
size={ComponentSizeType.xs}
138+
onClick={handleEditCluster}
139+
showTooltip
140+
tooltipProps={{
141+
content: 'Edit Cluster',
142+
}}
143+
/>
144+
<ActionMenu
145+
id="cluster-actions-action-menu"
146+
onClick={handleActionMenuClick}
147+
options={[
148+
...(!isVirtualCluster && HibernationRulesModal
149+
? [
150+
{
151+
items: [
152+
{
153+
id: 'edit-pod-spread',
154+
label: 'Edit Pod Spread',
155+
startIcon: { name: 'ic-two-cubes' as IconName },
156+
},
157+
{
158+
id: 'hibernation-rules',
159+
label: 'Hibernation Rules',
160+
startIcon: {
161+
name: 'ic-hibernate-circle' as IconName,
162+
},
163+
},
164+
],
165+
},
166+
]
167+
: []),
168+
{
169+
items: [
170+
{
171+
id: 'delete-cluster',
172+
label: 'Delete cluster',
173+
startIcon: { name: 'ic-delete' },
174+
isDisabled: clusterId === DEFAULT_CLUSTER_ID,
175+
type: 'negative',
176+
},
177+
],
178+
},
179+
]}
180+
buttonProps={{
181+
ariaLabel: 'cluster-actions',
182+
dataTestId: `cluster-actions-${clusterId}`,
183+
icon: <Icon name="ic-more-vertical" color={null} />,
184+
size: ComponentSizeType.xs,
185+
variant: ButtonVariantType.borderLess,
186+
style: ButtonStyleType.neutral,
187+
showAriaLabelInTippy: false,
188+
}}
189+
/>
190+
</div>
191+
)
192+
}
193+
194+
export const ClusterListCellComponent: FunctionComponent<
195+
TableCellComponentProps<ClusterRowData, FiltersTypeEnum.STATE, {}>
196+
> = ({
197+
field,
198+
row: {
199+
data: { clusterId, clusterName, clusterType, envCount, serverUrl, clusterCategory, isVirtualCluster, status },
200+
},
201+
isRowActive,
202+
}: TableCellComponentProps<ClusterRowData, FiltersTypeEnum.STATE, {}>) => {
123203
switch (field) {
124204
case ClusterListFields.ICON:
125205
return (
@@ -163,82 +243,8 @@ export const ClusterListCellComponent: FunctionComponent<
163243
)
164244
case ClusterListFields.ACTIONS:
165245
return (
166-
<div className={isRowActive ? '' : 'dc__opacity-hover--child'}>
167-
<div className="flex dc__gap-8 py-10">
168-
<Button
169-
dataTestId={`add-env-${clusterId}`}
170-
ariaLabel={`add-env-${clusterId}`}
171-
icon={<Icon name="ic-add" color={null} />}
172-
showAriaLabelInTippy={false}
173-
variant={ButtonVariantType.borderLess}
174-
size={ComponentSizeType.xs}
175-
onClick={handleAddEnv}
176-
showTooltip
177-
tooltipProps={{
178-
content: 'Add Environment',
179-
}}
180-
/>
181-
<Button
182-
dataTestId={`edit-cluster-${clusterId}`}
183-
ariaLabel={`edit-cluster-${clusterId}`}
184-
icon={<Icon name="ic-pencil" color={null} />}
185-
variant={ButtonVariantType.borderLess}
186-
showAriaLabelInTippy={false}
187-
style={ButtonStyleType.neutral}
188-
size={ComponentSizeType.xs}
189-
onClick={handleEditCluster}
190-
showTooltip
191-
tooltipProps={{
192-
content: 'Edit Cluster',
193-
}}
194-
/>
195-
<ActionMenu
196-
id="cluster-actions-action-menu"
197-
onClick={handleActionMenuClick}
198-
options={[
199-
...(!isVirtualCluster && HibernationRulesModal
200-
? [
201-
{
202-
items: [
203-
{
204-
id: 'edit-pod-spread',
205-
label: 'Edit Pod Spread',
206-
startIcon: { name: 'ic-two-cubes' as IconName },
207-
},
208-
{
209-
id: 'hibernation-rules',
210-
label: 'Hibernation Rules',
211-
startIcon: {
212-
name: 'ic-hibernate-circle' as IconName,
213-
},
214-
},
215-
],
216-
},
217-
]
218-
: []),
219-
{
220-
items: [
221-
{
222-
id: 'delete-cluster',
223-
label: 'Delete cluster',
224-
startIcon: { name: 'ic-delete' },
225-
isDisabled: clusterId === DEFAULT_CLUSTER_ID,
226-
type: 'negative',
227-
},
228-
],
229-
},
230-
]}
231-
buttonProps={{
232-
ariaLabel: 'cluster-actions',
233-
dataTestId: 'cluster-actions',
234-
icon: <Icon name="ic-more-vertical" color={null} />,
235-
size: ComponentSizeType.xs,
236-
variant: ButtonVariantType.borderLess,
237-
style: ButtonStyleType.neutral,
238-
showAriaLabelInTippy: false,
239-
}}
240-
/>
241-
</div>
246+
<div className={`${isRowActive ? '' : 'dc__opacity-hover--child'} py-10`}>
247+
<ClusterActions clusterId={clusterId} isVirtualCluster={isVirtualCluster} />
242248
</div>
243249
)
244250
default:

‎src/Pages/GlobalConfigurations/ClustersAndEnvironments/EnvironmentList.tsx

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -36,7 +36,7 @@ import {
3636
} from './cluster.type'
3737
import { environmentNameComparator, getSelectParsedCategory } from './cluster.util'
3838
import { ClusterEnvironmentDrawer } from './ClusterEnvironmentDrawer'
39-
import { ClusterEnvLoader, ClusterIconWithStatus } from './ClusterList.components'
39+
import { ClusterActions, ClusterEnvLoader, ClusterIconWithStatus } from './ClusterList.components'
4040
import { ADD_ENVIRONMENT_FORM_LOCAL_STORAGE_KEY } from './constants'
4141

4242
import './cluster.scss'
@@ -292,7 +292,10 @@ const ClustersEnvironmentsList = ({
292292
</Tooltip>
293293
{showUnmappedEnvs ? <span>{(namespaceListResult?.result ?? []).length} Namespaces</span> : <span />}
294294
<span>{isProd ? 'Production' : 'Non Production'}</span>
295-
{category?.label && <span>{category.label}</span>}
295+
{category?.label ? <span>{category.label}</span> : <span />}
296+
<div className="flex right">
297+
<ClusterActions clusterId={clusterId} isVirtualCluster={isVirtualCluster} />
298+
</div>
296299
</div>
297300
{/* Env and Namespace List */}
298301
{renderNamespaceEnvList()}

‎src/Pages/GlobalConfigurations/ClustersAndEnvironments/cluster.scss

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -94,6 +94,6 @@
9494
}
9595

9696
.cluster-metadata-header {
97-
grid-template-columns: 24px 200px 200px 100px 100px;
97+
grid-template-columns: 24px 200px 200px 100px 100px 1fr;
9898
grid-column-gap: 16px;
9999
}

0 commit comments

Comments
 (0)