Merge pull request #2775 from devtron-labs/fix/edit-taints-modal

fix: EditTaintsModal - remove empty state, fix not able to save empty taints

Author: RohitRaj011

src/components/ClusterNodes/NodeActions/EditTaintsModal.tsx

@@ -24,16 +24,13 @@ import {
     ComponentSizeType,
     Drawer,
     DynamicDataTable,
-    GenericEmptyState,
     Icon,
     InfoIconTippy,
     showError,
     ToastManager,
     ToastVariantType,
 } from '@devtron-labs/devtron-fe-common-lib'
 
-import ImgEmptyChartGroup from '@Images/[email protected]'
-
 import { updateTaints } from '../clusterNodes.service'
 import { EDIT_TAINTS_MODAL_MESSAGING, TAINTS_TABLE_HEADERS } from '../constants'
 import { EditTaintsModalType, EditTaintsRequest, TaintsTableHeaderKeys, TaintsTableType } from '../types'
@@ -76,9 +73,6 @@ const EditTaintsModal = ({ name, version, kind, taints, closePopup }: EditTaints
     // HOOKS
     const { clusterId } = useParams<{ clusterId: string }>()
 
-    // CONSTANTS
-    const isTaintListEmpty = taintList.length === 0
-
     // HANDLERS
     const onClose = () => {
         if (!apiCallInProgress) {
@@ -100,23 +94,29 @@ const EditTaintsModal = ({ name, version, kind, taints, closePopup }: EditTaints
         const updatedTaintCellError = structuredClone(taintCellError)
         delete updatedTaintCellError[row.id]
 
+        if (filteredTaintList.length === 0) {
+            const newTaintsRow = getTaintsTableRow()
+            filteredTaintList.push(newTaintsRow)
+            updatedTaintCellError[newTaintsRow.id] = getTaintsRowCellError()
+        }
+
         setTaintList(filteredTaintList)
         setTaintCellError(updatedTaintCellError)
     }
 
     const handleEditTaint: TaintsTableType['onRowEdit'] = (row, headerKey, value) => {
-        const updatedTaintList = taintList.map((taint) =>
-            taint.id === row.id
-                ? { ...taint, data: { ...taint.data, [headerKey]: { ...taint.data[headerKey], value } } }
-                : taint,
-        )
-        const updatedTaintCellError = {
-            ...taintCellError,
-            [row.id]: {
-                ...taintCellError[row.id],
-                [headerKey]: getTaintsTableCellValidateState(headerKey, value),
-            },
+        const indexToUpdateInTaintList = taintList.findIndex((taint) => taint.id === row.id)
+        if (indexToUpdateInTaintList === -1) {
+            return
         }
+
+        const updatedTaintList = taintList
+        const updatedTaintRow = taintList[indexToUpdateInTaintList]
+        updatedTaintRow.data[headerKey].value = value
+        updatedTaintList[indexToUpdateInTaintList] = updatedTaintRow
+
+        const updatedTaintCellError = structuredClone(taintCellError)
+        updatedTaintCellError[row.id][headerKey] = getTaintsTableCellValidateState(headerKey, updatedTaintRow)
         validateUniqueTaintKey({ taintCellError: updatedTaintCellError, taintList: updatedTaintList })
 
         setTaintList(updatedTaintList)
@@ -173,77 +173,56 @@ const EditTaintsModal = ({ name, version, kind, taints, closePopup }: EditTaints
                     />
                 </div>
                 <div className="flex-grow-1 dc__overflow-auto flexbox-col dc__gap-16 p-20">
-                    {isTaintListEmpty ? (
-                        <GenericEmptyState
-                            title={EDIT_TAINTS_MODAL_MESSAGING.emptyState.title}
-                            subTitle={EDIT_TAINTS_MODAL_MESSAGING.emptyState.subTitle}
-                            image={ImgEmptyChartGroup}
-                            isButtonAvailable
-                            renderButton={() => (
-                                <Button
-                                    dataTestId="add-taint"
-                                    text={EDIT_TAINTS_MODAL_MESSAGING.addTaint}
-                                    startIcon={<Icon name="ic-add" color={null} />}
-                                    onClick={handleAddTaint}
-                                />
-                            )}
-                        />
-                    ) : (
-                        <>
-                            <div className="flex dc__content-space">
-                                <div className="flex">
-                                    <Icon name="ic-spray-can" color="N900" />
-                                    <h3 className="fs-14 lh-20 fw-6 cn-9 mt-0 mb-0 ml-8 mr-4">
-                                        {EDIT_TAINTS_MODAL_MESSAGING.infoTitle}
-                                    </h3>
-                                    <InfoIconTippy
-                                        heading="Taints"
-                                        documentationLinkText="View documentation"
-                                        documentationLink="TAINT"
-                                        additionalContent={<AdditionalContent />}
-                                        openInNewTab
-                                    />
-                                </div>
-                                <Button
-                                    dataTestId="add-taint"
-                                    variant={ButtonVariantType.secondary}
-                                    startIcon={<Icon name="ic-add" color={null} />}
-                                    size={ComponentSizeType.small}
-                                    text={EDIT_TAINTS_MODAL_MESSAGING.addTaint}
-                                    onClick={handleAddTaint}
-                                />
-                            </div>
-                            <DynamicDataTable<TaintsTableHeaderKeys>
-                                headers={TAINTS_TABLE_HEADERS}
-                                rows={taintList}
-                                onRowAdd={handleAddTaint}
-                                onRowDelete={handleDeleteTaint}
-                                onRowEdit={handleEditTaint}
-                                cellError={taintCellError}
-                                isAdditionNotAllowed
-                                shouldAutoFocusOnMount
+                    <div className="flex dc__content-space">
+                        <div className="flex">
+                            <Icon name="ic-spray-can" color="N900" />
+                            <h3 className="fs-14 lh-20 fw-6 cn-9 mt-0 mb-0 ml-8 mr-4">
+                                {EDIT_TAINTS_MODAL_MESSAGING.infoTitle}
+                            </h3>
+                            <InfoIconTippy
+                                heading="Taints"
+                                documentationLinkText="View documentation"
+                                documentationLink="TAINT"
+                                additionalContent={<AdditionalContent />}
+                                openInNewTab
                             />
-                        </>
-                    )}
-                </div>
-                {!isTaintListEmpty && (
-                    <div className="dc__border-top flex right p-16 dc__gap-12">
+                        </div>
                         <Button
-                            dataTestId="edit-taints-modal-cancel"
+                            dataTestId="add-taint"
                             variant={ButtonVariantType.secondary}
-                            style={ButtonStyleType.neutral}
-                            disabled={apiCallInProgress}
-                            text={EDIT_TAINTS_MODAL_MESSAGING.Actions.cancel}
-                            onClick={onClose}
-                        />
-                        <Button
-                            dataTestId="edit-taints-modal-save"
-                            isLoading={apiCallInProgress}
-                            text={EDIT_TAINTS_MODAL_MESSAGING.Actions.save}
-                            onClick={onSave}
+                            startIcon={<Icon name="ic-add" color={null} />}
+                            size={ComponentSizeType.small}
+                            text={EDIT_TAINTS_MODAL_MESSAGING.addTaint}
+                            onClick={handleAddTaint}
                         />
                     </div>
-                )}
+                    <DynamicDataTable<TaintsTableHeaderKeys>
+                        headers={TAINTS_TABLE_HEADERS}
+                        rows={taintList}
+                        onRowAdd={handleAddTaint}
+                        onRowDelete={handleDeleteTaint}
+                        onRowEdit={handleEditTaint}
+                        cellError={taintCellError}
+                        isAdditionNotAllowed
+                        shouldAutoFocusOnMount
+                    />
+                </div>
+                <div className="dc__border-top flex right p-16 dc__gap-12">
+                    <Button
+                        dataTestId="edit-taints-modal-cancel"
+                        variant={ButtonVariantType.secondary}
+                        style={ButtonStyleType.neutral}
+                        disabled={apiCallInProgress}
+                        text={EDIT_TAINTS_MODAL_MESSAGING.Actions.cancel}
+                        onClick={onClose}
+                    />
+                    <Button
+                        dataTestId="edit-taints-modal-save"
+                        isLoading={apiCallInProgress}
+                        text={EDIT_TAINTS_MODAL_MESSAGING.Actions.save}
+                        onClick={onSave}
+                    />
+                </div>
             </div>
         </Drawer>
     )

src/components/ClusterNodes/NodeActions/utils.ts

@@ -53,7 +53,7 @@ export const getTaintsTableRow = (taint?: TaintType, id?: number): TaintsTableTy
 })
 
 export const getTaintsTableRows = (taints: TaintType[]): TaintsTableType['rows'] =>
-    taints?.length ? taints.map(getTaintsTableRow) : []
+    taints?.length ? taints.map(getTaintsTableRow) : [getTaintsTableRow()]
 
 export const getTaintsRowCellError = () =>
     TAINTS_TABLE_HEADERS.reduce(
@@ -72,22 +72,25 @@ export const getTaintsTableCellError = (taintList: TaintsTableType['rows']): Tai
 
 export const getTaintsTableCellValidateState = (
     headerKey: TaintsTableHeaderKeys,
-    value: string,
+    row: TaintsTableType['rows'][number],
 ): DynamicDataTableCellValidationState => {
-    if (headerKey === TaintsTableHeaderKeys.KEY) {
+    const keyColumnValue = row.data[TaintsTableHeaderKeys.KEY].value
+    const valueColumnValue = row.data[TaintsTableHeaderKeys.VALUE].value
+
+    if (headerKey === TaintsTableHeaderKeys.KEY && valueColumnValue) {
         const keyPrefixRegex = new RegExp(PATTERNS.KUBERNETES_KEY_PREFIX)
         const keyNameRegex = new RegExp(PATTERNS.KUBERNETES_KEY_NAME)
 
-        if (!value) {
+        if (!keyColumnValue) {
             return { errorMessages: ['Key is required'], isValid: false }
         }
 
-        if (value.length > 253) {
+        if (keyColumnValue.length > 253) {
             return { errorMessages: ['Maximum 253 chars are allowed'], isValid: false }
         }
 
-        if (value.indexOf('/') !== -1) {
-            const keyArr = value.split('/')
+        if (keyColumnValue.indexOf('/') !== -1) {
+            const keyArr = keyColumnValue.split('/')
 
             if (keyArr.length > 2 || !keyPrefixRegex.test(keyArr[0])) {
                 return {
@@ -104,7 +107,7 @@ export const getTaintsTableCellValidateState = (
                     isValid: false,
                 }
             }
-        } else if (!keyNameRegex.test(value)) {
+        } else if (!keyNameRegex.test(keyColumnValue)) {
             return {
                 errorMessages: [
                     'The key must begin with a letter or number, and may contain letters, numbers, hyphens, dots, and underscores',
@@ -114,13 +117,13 @@ export const getTaintsTableCellValidateState = (
         }
     }
 
-    if (headerKey === TaintsTableHeaderKeys.VALUE && value) {
+    if (headerKey === TaintsTableHeaderKeys.VALUE && valueColumnValue) {
         const valueRegex = new RegExp(PATTERNS.KUBERNETES_VALUE)
 
-        if (value.length > 63) {
+        if (valueColumnValue.length > 63) {
             return { errorMessages: ['Maximum 63 chars are allowed'], isValid: false }
         }
-        if (!valueRegex.test(value)) {
+        if (!valueRegex.test(valueColumnValue)) {
             return {
                 errorMessages: [
                     'The value must begin with a letter or number, and may contain letters, numbers, hyphens, dots, and underscores',
@@ -195,7 +198,7 @@ export const getTaintTableValidateState = ({ taintList }: { taintList: TaintsTab
         acc[curr.id] = TAINTS_TABLE_HEADERS.reduce(
             (headerAcc, { key }) => ({
                 ...headerAcc,
-                [key]: getTaintsTableCellValidateState(key, curr.data[key].value),
+                [key]: getTaintsTableCellValidateState(key, curr),
             }),
             {},
         )
@@ -212,8 +215,14 @@ export const getTaintTableValidateState = ({ taintList }: { taintList: TaintsTab
 }
 
 export const getTaintsPayload = (taintList: TaintsTableType['rows']) =>
-    taintList.map(({ data }) => ({
-        key: data.key.value,
-        value: data.value.value,
-        effect: data.effect.value as EFFECT_TYPE,
-    }))
+    taintList
+        .map(({ data }) =>
+            data.key.value
+                ? {
+                      key: data.key.value,
+                      value: data.value.value,
+                      effect: data.effect.value as EFFECT_TYPE,
+                  }
+                : null,
+        )
+        .filter(Boolean)

src/components/ClusterNodes/constants.ts

@@ -115,11 +115,6 @@ export const EDIT_TAINTS_MODAL_MESSAGING = {
             'Combination of <key, effect> must be unique',
         ],
     },
-    emptyState: {
-        title: 'Manage node taints',
-        subTitle:
-            'Add taints to nodes to prevent or discourage pods from being scheduled on them. Use tolerations on pods to let them run on nodes with matching taints.',
-    },
     addTaint: 'Add taint',
     Actions: {
         cancel: 'Cancel',