Skip to content

Commit 60c8a84

Browse files
arunjaindevarunjaindev
authored
Merge pull request #2855 from devtron-labs/feat/env-list-header
2 parents c42eb58 + f5413ad commit 60c8a84

File tree

11 files changed

+169
-174
lines changed

11 files changed

+169
-174
lines changed

‎package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44
"private": true,
55
"homepage": "/dashboard",
66
"dependencies": {
7-
"@devtron-labs/devtron-fe-common-lib": "1.18.0-alpha-7",
7+
"@devtron-labs/devtron-fe-common-lib": "1.18.1-pre-2",
88
"@esbuild-plugins/node-globals-polyfill": "0.2.3",
99
"@rjsf/core": "^5.13.3",
1010
"@rjsf/utils": "^5.13.3",

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

Lines changed: 7 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -105,9 +105,6 @@ export const ClusterEnvironmentDrawer = ({
105105
error: ServerErrors
106106
}>(INITIAL_NAMESPACES)
107107

108-
// Need different state since validations change on basis of this state
109-
const [isSelectedClusterVirtual, setIsSelectedClusterVirtual] = useState(isVirtualCluster ?? false)
110-
111108
const [clusterListLoading, clusterListResult, clusterListError, reloadClusterList] = useAsync(
112109
() => getClusterListing(true),
113110
[],
@@ -123,8 +120,9 @@ export const ClusterEnvironmentDrawer = ({
123120
isProduction: !!isProduction,
124121
category: category ?? null,
125122
description: description ?? '',
123+
isVirtualCluster,
126124
},
127-
validations: clusterEnvironmentDrawerFormValidationSchema({ isNamespaceMandatory: !isSelectedClusterVirtual }),
125+
validations: clusterEnvironmentDrawerFormValidationSchema(),
128126
})
129127

130128
const [, clusterDetails] = useAsync(
@@ -135,10 +133,10 @@ export const ClusterEnvironmentDrawer = ({
135133

136134
useEffect(() => {
137135
if (clusterDetails) {
138-
setIsSelectedClusterVirtual(clusterDetails[0].isVirtualCluster)
139136
setClusterNamespaces(INITIAL_NAMESPACES)
140137
setNamespaceLabels(INITIAL_NAMESPACE_LABELS)
141-
reset(data, { keepErrors: false })
138+
const updatedData = { ...data, isVirtualCluster: clusterDetails[0]?.isVirtualCluster ?? false }
139+
reset(updatedData, { keepErrors: false })
142140
}
143141
}, [clusterDetails])
144142

@@ -209,11 +207,10 @@ export const ClusterEnvironmentDrawer = ({
209207
envId,
210208
namespaceLabels: namespaceLabels.labels,
211209
resourceVersion: namespaceLabels.resourceVersion,
212-
isVirtualCluster: isSelectedClusterVirtual,
213210
})
214211

215212
let api
216-
if (isSelectedClusterVirtual) {
213+
if (data.isVirtualCluster) {
217214
api = getVirtualClusterSaveUpdate(envId)
218215
} else {
219216
api = envId ? updateEnvironment : saveEnvironment
@@ -284,7 +281,6 @@ export const ClusterEnvironmentDrawer = ({
284281
const onDelete = async () => {
285282
const payload = getClusterEnvironmentUpdatePayload({
286283
data,
287-
isVirtualCluster: isSelectedClusterVirtual,
288284
envId,
289285
})
290286
await deleteEnvironment(payload)
@@ -369,7 +365,7 @@ export const ClusterEnvironmentDrawer = ({
369365
{...register('namespace')}
370366
label="Namespace"
371367
shouldTrim={false}
372-
required={!isSelectedClusterVirtual}
368+
required
373369
/>
374370

375371
<CustomInput
@@ -423,7 +419,7 @@ export const ClusterEnvironmentDrawer = ({
423419
</div>
424420
)}
425421

426-
{EnvironmentLabels && !isSelectedClusterVirtual && (
422+
{EnvironmentLabels && !data.isVirtualCluster && (
427423
<div className="dc__border-top-n1 pt-16">
428424
<EnvironmentLabels
429425
tags={namespaceLabels.labels}

‎src/Pages/GlobalConfigurations/ClustersAndEnvironments/ClusterEnvironmentDrawer/schema.ts

Lines changed: 10 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -18,11 +18,7 @@ import { UseFormValidations } from '@devtron-labs/devtron-fe-common-lib'
1818

1919
import { EnvironmentFormType } from './types'
2020

21-
export const clusterEnvironmentDrawerFormValidationSchema = ({
22-
isNamespaceMandatory,
23-
}: {
24-
isNamespaceMandatory: boolean
25-
}): UseFormValidations<EnvironmentFormType> => ({
21+
export const clusterEnvironmentDrawerFormValidationSchema = (): UseFormValidations<EnvironmentFormType> => ({
2622
clusterId: {
2723
required: true,
2824
pattern: [{ message: 'Please select a cluster', value: /^(?!0$)\d+$/ }],
@@ -36,19 +32,15 @@ export const clusterEnvironmentDrawerFormValidationSchema = ({
3632
{ message: 'Minimum 1 and Maximum 16 characters required', value: /^.{1,16}$/ },
3733
],
3834
},
39-
...(isNamespaceMandatory
40-
? {
41-
namespace: {
42-
required: true,
43-
pattern: [
44-
{ message: 'Namespace is required', value: /^.*$/ },
45-
{ message: "Use only lowercase alphanumeric characters or '-'", value: /^[a-z0-9-]+$/ },
46-
{ message: "Cannot start/end with '-'", value: /^(?![-]).*[^-]$/ },
47-
{ message: 'Maximum 63 characters required', value: /^.{1,63}$/ },
48-
],
49-
},
50-
}
51-
: {}),
35+
namespace: {
36+
required: true,
37+
pattern: [
38+
{ message: 'Namespace is required', value: /^.*$/ },
39+
{ message: "Use only lowercase alphanumeric characters or '-'", value: /^[a-z0-9-]+$/ },
40+
{ message: "Cannot start/end with '-'", value: /^(?![-]).*[^-]$/ },
41+
{ message: 'Maximum 63 characters required', value: /^.{1,63}$/ },
42+
],
43+
},
5244
isProduction: {
5345
required: true,
5446
pattern: { message: 'token is required', value: /[^]+/ },

‎src/Pages/GlobalConfigurations/ClustersAndEnvironments/ClusterEnvironmentDrawer/types.ts

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -36,15 +36,14 @@ export type EnvDrawerProps = { reload: () => void; hideClusterDrawer: () => void
3636
| ({ drawerType: 'editEnv'; clusterId: number; clusterName: string } & EnvDetails)
3737
)
3838

39-
export type EnvironmentFormType = Omit<EnvDetails, 'isVirtualCluster' | 'envId'> & {
39+
export type EnvironmentFormType = Omit<EnvDetails, 'envId'> & {
4040
clusterId: number
4141
}
4242

4343
export type GetClusterEnvironmentUpdatePayloadType = Partial<Pick<ClusterNamespacesDTO, 'resourceVersion'>> & {
4444
data: EnvironmentFormType
4545
envId: number
4646
namespaceLabels?: TagType[]
47-
isVirtualCluster: boolean
4847
}
4948

5049
interface ClusterNamespacesLabel {

‎src/Pages/GlobalConfigurations/ClustersAndEnvironments/ClusterEnvironmentDrawer/utils.ts

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -25,9 +25,8 @@ export const getClusterEnvironmentUpdatePayload = ({
2525
envId,
2626
namespaceLabels,
2727
resourceVersion,
28-
isVirtualCluster,
2928
}: GetClusterEnvironmentUpdatePayloadType) =>
30-
isVirtualCluster
29+
data.isVirtualCluster
3130
? {
3231
id: envId,
3332
environment_name: data.envName,

‎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:

0 commit comments

Comments
 (0)