Skip to content

Commit 0a2935a

Browse files
arunjaindevarunjaindev
committed
fix: uat changes
1 parent a9c1c72 commit 0a2935a

File tree

7 files changed

+150
-77
lines changed

7 files changed

+150
-77
lines changed

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

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -115,7 +115,7 @@ export const ClusterEnvironmentDrawer = ({
115115
)
116116

117117
// FORM METHODS
118-
const { data, errors, register, handleSubmit, trigger } = useForm<EnvironmentFormType>({
118+
const { data, errors, register, handleSubmit, trigger, reset } = useForm<EnvironmentFormType>({
119119
initialValues: {
120120
clusterId: clusterId ?? null,
121121
envName: envName ?? '',
@@ -138,6 +138,7 @@ export const ClusterEnvironmentDrawer = ({
138138
setIsSelectedClusterVirtual(clusterDetails[0].isVirtualCluster)
139139
setClusterNamespaces(INITIAL_NAMESPACES)
140140
setNamespaceLabels(INITIAL_NAMESPACE_LABELS)
141+
reset(data, { keepErrors: false })
141142
}
142143
}, [clusterDetails])
143144

@@ -321,7 +322,7 @@ export const ClusterEnvironmentDrawer = ({
321322
<div className="flexbox p-20 bg__secondary flex-grow-1 dc__overflow-auto">
322323
<div className="flexbox-col dc__gap-16 bg__primary br-12 p-20 flex-grow-1 dc__h-fit-content">
323324
<div className="flexbox dc__gap-8">
324-
<div className="w-200">
325+
<div className="w-250 dc__no-shrink">
325326
<SelectPicker
326327
inputId="create-env-select-cluster"
327328
label="Cluster"
@@ -342,6 +343,7 @@ export const ClusterEnvironmentDrawer = ({
342343
}
343344
error={errors.clusterId}
344345
size={ComponentSizeType.large}
346+
fullWidth
345347
/>
346348
</div>
347349
<span className="lh-36 fs-20 fw-4 cn-7 pt-26">/</span>
@@ -480,7 +482,7 @@ export const ClusterEnvironmentDrawer = ({
480482
noValidate
481483
>
482484
<div className="flexbox dc__align-items-center dc__content-space dc__border-bottom bg__primary py-12 px-20">
483-
<h3 className="m-0 fs-16 fw-6 lh-1-43 dc__truncate">{envId ? 'Edit' : 'Create'} Environment</h3>
485+
<h3 className="m-0 fs-16 fw-6 lh-1-43 cn-9 dc__truncate">{envId ? 'Edit' : 'Add'} Environment</h3>
484486
<Button
485487
dataTestId="close-env-modal"
486488
ariaLabel="close-btn"

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

Lines changed: 60 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,7 @@ import {
1919
TableCellComponentProps,
2020
Tooltip,
2121
URLS as COMMON_URLS,
22+
ClusterStatusType,
2223
} from '@devtron-labs/devtron-fe-common-lib'
2324

2425
import { importComponentFromFELibrary } from '@Components/common'
@@ -39,6 +40,27 @@ import EditClusterDrawerContent from './EditClusterDrawerContent'
3940
const HibernationRulesModal = importComponentFromFELibrary('HibernationRulesModal', null, 'function')
4041
const VirtualClusterForm = importComponentFromFELibrary('VirtualClusterForm', null, 'function')
4142

43+
export const ClusterIconWithStatus = ({
44+
clusterStatus,
45+
isVirtualCluster,
46+
}: {
47+
clusterStatus: ClusterStatusType
48+
isVirtualCluster: boolean
49+
}) => {
50+
const statusColor = getBulletColorAccToStatus(clusterStatus)
51+
return (
52+
<span className="dc__position-rel dc__overflow-hidden icon-dim-24">
53+
<Icon name="ic-bg-cluster" color={null} size={24} />
54+
{!isVirtualCluster && (
55+
<span
56+
className={`dc__position-abs dc__top-16 icon-dim-10 dc__border-radius-50-per dc__right-2--neg ${statusColor}`}
57+
style={{ border: '2px solid var(--N0)' }}
58+
/>
59+
)}
60+
</span>
61+
)
62+
}
63+
4264
export const ClusterListCellComponent: FunctionComponent<
4365
TableCellComponentProps<ClusterRowData, FiltersTypeEnum.STATE, {}>
4466
> = ({
@@ -83,6 +105,9 @@ export const ClusterListCellComponent: FunctionComponent<
83105
})
84106
break
85107
case 'delete-cluster':
108+
if (clusterId === DEFAULT_CLUSTER_ID) {
109+
break
110+
}
86111
push({
87112
pathname: generatePath(`${URLS.GLOBAL_CONFIG_CLUSTER}/${URLS.DELETE_CLUSTER}/:clusterId`, {
88113
clusterId,
@@ -95,18 +120,12 @@ export const ClusterListCellComponent: FunctionComponent<
95120
}
96121
}
97122

98-
const statusColor = getBulletColorAccToStatus(status)
99-
100123
switch (field) {
101124
case ClusterListFields.ICON:
102125
return (
103-
<span className="flex py-8 dc__position-rel dc__overflow-hidden">
104-
<Icon name="ic-bg-cluster" color={null} size={24} />
105-
<span
106-
className={`dc__position-abs icon-dim-10 dc__border-radius-50-per dc__right-2--neg dc__bottom-7 ${statusColor}`}
107-
style={{ border: '2px solid var(--N0)' }}
108-
/>
109-
</span>
126+
<div className="flex left py-10">
127+
<ClusterIconWithStatus clusterStatus={status} isVirtualCluster={isVirtualCluster} />
128+
</div>
110129
)
111130
case ClusterListFields.CLUSTER_NAME:
112131
return (
@@ -115,27 +134,38 @@ export const ClusterListCellComponent: FunctionComponent<
115134
selectedTab: ClusterEnvTabs.ENVIRONMENTS,
116135
clusterId,
117136
})}
118-
className="flex left py-8 dc__truncate"
137+
className="flex left py-10"
119138
>
120-
{clusterName}
139+
<Tooltip content={clusterName}>
140+
<span className="dc__truncate">{clusterName}</span>
141+
</Tooltip>
121142
</Link>
122143
)
123144
case ClusterListFields.CLUSTER_TYPE:
124-
return <span className="flex left py-8">{clusterType}</span>
145+
return <span className="flex left py-10">{clusterType}</span>
125146
case ClusterListFields.ENV_COUNT:
126-
return <span className="flex left py-8">{envCount ? `${envCount}` : 'No'} Environments</span>
147+
return <span className="flex left py-10">{envCount ? `${envCount}` : 'No'} Environments</span>
127148
case ClusterListFields.CLUSTER_CATEGORY:
128-
return <span className="flex left py-8 dc__truncate">{clusterCategory}</span>
149+
return (
150+
<div className="flex left py-10">
151+
{' '}
152+
<Tooltip content={clusterCategory}>
153+
<span className="dc__truncate">{clusterCategory}</span>
154+
</Tooltip>
155+
</div>
156+
)
129157
case ClusterListFields.SERVER_URL:
130158
return (
131-
<Tooltip content={serverUrl}>
132-
<span className="flex left py-8 dc__truncate">{serverUrl}</span>
133-
</Tooltip>
159+
<div className="flex left py-10">
160+
<Tooltip content={serverUrl}>
161+
<span className="dc__truncate">{serverUrl}</span>
162+
</Tooltip>
163+
</div>
134164
)
135165
case ClusterListFields.ACTIONS:
136166
return (
137167
<div className={isRowActive ? '' : 'dc__opacity-hover--child'}>
138-
<div className="flex dc__gap-8 py-8">
168+
<div className="flex dc__gap-8 py-10">
139169
<Button
140170
dataTestId={`add-env-${clusterId}`}
141171
ariaLabel={`add-env-${clusterId}`}
@@ -144,6 +174,10 @@ export const ClusterListCellComponent: FunctionComponent<
144174
variant={ButtonVariantType.borderLess}
145175
size={ComponentSizeType.xs}
146176
onClick={handleAddEnv}
177+
showTooltip
178+
tooltipProps={{
179+
content: 'Add Environment'
180+
}}
147181
/>
148182
<Button
149183
dataTestId={`edit-cluster-${clusterId}`}
@@ -154,6 +188,10 @@ export const ClusterListCellComponent: FunctionComponent<
154188
style={ButtonStyleType.neutral}
155189
size={ComponentSizeType.xs}
156190
onClick={handleEditCluster}
191+
showTooltip
192+
tooltipProps={{
193+
content: 'Edit Cluster'
194+
}}
157195
/>
158196
<ActionMenu
159197
id="cluster-actions-action-menu"
@@ -297,7 +335,10 @@ export const ClusterEnvLoader = () => (
297335
<>
298336
{Array.from({ length: 3 }).map((_, idx) => (
299337
// eslint-disable-next-line react/no-array-index-key
300-
<div key={idx} className="px-20 py-8 dc__grid environment-row dc__align-items-center">
338+
<div
339+
key={idx}
340+
className={`px-20 py-8 dc__grid environment-row ${!!VirtualClusterForm ? 'with-category' : ''} dc__align-items-center`}
341+
>
301342
{Array.from({ length: 5 }).map((_, index) => (
302343
// eslint-disable-next-line react/no-array-index-key
303344
<span key={index} className="shimmer" />

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

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -100,6 +100,7 @@ const ClusterList = () => {
100100
handleSorting,
101101
} = useUrlFilters<EnvListSortableKeys, ClusterEnvFilterType>({
102102
parseSearchParams: parseClusterEnvSearchParams,
103+
initialSortKey: EnvListSortableKeys.ENV_NAME
103104
})
104105

105106
const [clusterListLoading, clusterListResult, clusterListError, reloadClusterList] = useAsync(
@@ -194,7 +195,7 @@ const ClusterList = () => {
194195
{
195196
field: ClusterListFields.CLUSTER_CATEGORY,
196197
label: 'CATEGORY',
197-
size: { fixed: 100 },
198+
size: { fixed: 150 },
198199
isSortable: true,
199200
comparator: stringComparatorBySortOrder,
200201
CellComponent: ClusterListCellComponent,

0 commit comments

Comments
 (0)