refactor: update EditTaintsModal for improved UI and messaging; clean up constants

Author: RohitRaj011

.eslintignore

@@ -57,7 +57,6 @@ src/components/ClusterNodes/NodeActions/NodeActionsMenu.tsx
 src/components/ClusterNodes/NodeDetails.tsx
 src/components/ClusterNodes/__tests__/ClusterManifest.test.tsx
 src/components/ClusterNodes/__tests__/NodeList.test.tsx
-src/components/ClusterNodes/constants.ts
 src/components/Hotjar/Hotjar.tsx
 src/components/Jobs/ExpandedRow/ExpandedRow.tsx
 src/components/Jobs/JobDetails/JobDetails.tsx

src/components/ClusterNodes/NodeActions/EditTaintsModal.tsx

@@ -24,17 +24,14 @@ import {
     ComponentSizeType,
     Drawer,
     DynamicDataTable,
+    GenericEmptyState,
     Icon,
-    InfoBlock,
+    InfoIconTippy,
     showError,
-    stopPropagation,
-    TippyCustomized,
-    TippyTheme,
     ToastManager,
     ToastVariantType,
 } from '@devtron-labs/devtron-fe-common-lib'
 
-import { ReactComponent as HelpIcon } from '../../../assets/icons/ic-help.svg'
 import { updateTaints } from '../clusterNodes.service'
 import { EDIT_TAINTS_MODAL_MESSAGING, TAINTS_TABLE_HEADERS } from '../constants'
 import { EditTaintsModalType, EditTaintsRequest, TaintsTableHeaderKeys, TaintsTableType } from '../types'
@@ -49,35 +46,20 @@ import {
     validateUniqueTaintKey,
 } from './utils'
 
-const TaintInfoMessage = () => (
-    <div className="fs-13 fw-4 lh-20">
-        <span>{EDIT_TAINTS_MODAL_MESSAGING.infoText}</span> &nbsp;
-        <TippyCustomized
-            theme={TippyTheme.white}
-            className="w-400"
-            placement="top"
-            Icon={HelpIcon}
-            iconClass="fcv-5"
-            heading={EDIT_TAINTS_MODAL_MESSAGING.tippyTitle}
-            infoText=""
-            showCloseButton
-            trigger="click"
-            interactive
-            additionalContent={
-                <div className="p-12 fs-13">
-                    <div>{EDIT_TAINTS_MODAL_MESSAGING.tippyDescription.message}</div>
-                    <ul className="p-0" style={{ listStyleType: 'none' }}>
-                        {EDIT_TAINTS_MODAL_MESSAGING.tippyDescription.messageList.map((message) => (
-                            <li key={`msg-${message}`}>{message}</li>
-                        ))}
-                    </ul>
-                </div>
-            }
-        >
-            <span className="cb-5 cursor" onClick={stopPropagation}>
-                {EDIT_TAINTS_MODAL_MESSAGING.infoLinkText}
-            </span>
-        </TippyCustomized>
+const AdditionalContent = () => (
+    <div className="p-12 h-200 dc__overflow-auto fs-13 lh-20">
+        {EDIT_TAINTS_MODAL_MESSAGING.infoText}
+        <br />
+        <br />
+        <div>
+            {EDIT_TAINTS_MODAL_MESSAGING.description.title}
+            <br />
+            <ol className="pl-24">
+                {EDIT_TAINTS_MODAL_MESSAGING.description.messageList.map((text) => (
+                    <li key={text}>{text}</li>
+                ))}
+            </ol>
+        </div>
     </div>
 )
 
@@ -92,6 +74,9 @@ 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) {
@@ -177,48 +162,73 @@ const EditTaintsModal = ({ name, version, kind, taints, closePopup }: EditTaints
                         showAriaLabelInTippy={false}
                     />
                 </div>
-                <div className="flexbox-col px-20 py-16 dc__overflow-auto flex-grow-1 dc__gap-16">
-                    <InfoBlock description={<TaintInfoMessage />} />
-                    {taintList.length ? (
-                        <DynamicDataTable<TaintsTableHeaderKeys>
-                            headers={TAINTS_TABLE_HEADERS}
-                            rows={taintList}
-                            onRowAdd={handleAddTaint}
-                            onRowDelete={handleDeleteTaint}
-                            onRowEdit={handleEditTaint}
-                            cellError={taintCellError}
-                            addBtnTooltip="Add taint"
+                <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}
+                            isButtonAvailable
+                            renderButton={() => (
+                                <Button
+                                    dataTestId="add-taint"
+                                    text={EDIT_TAINTS_MODAL_MESSAGING.addTaint}
+                                    startIcon={<Icon name="ic-add" color={null} />}
+                                    onClick={handleAddTaint}
+                                />
+                            )}
                         />
                     ) : (
-                        <div className="p-8 bg__secondary dc__border-dashed--n3 br-4 flex dc__content-space">
-                            {/* TODO: update this text */}
-                            <p className="m-0 fs-12 lh-18 cn-7">Add Taint</p>
-                            <Button
-                                dataTestId="add-taint"
-                                variant={ButtonVariantType.text}
-                                text="Add Taint"
-                                startIcon={<Icon name="ic-add" color={null} />}
-                                onClick={handleAddTaint}
+                        <>
+                            <div className="flex dc__content-space">
+                                <div className="flex">
+                                    <Icon name="ic-error" color="N900" />
+                                    <h3 className="fs-14 lh-20 fw-6 cn-9 mt-0 mb-0 ml-8 mr-4">Taints</h3>
+                                    <InfoIconTippy
+                                        heading="Taints"
+                                        documentationLinkText="View documentation"
+                                        documentationLink="https://docs.devtron.ai/usage/resource-browser#taint-a-node"
+                                        additionalContent={<AdditionalContent />}
+                                    />
+                                </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
                             />
-                        </div>
+                        </>
                     )}
                 </div>
-                <div className="dc__border-top flex right p-16 dc__gap-8">
-                    <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>
+                {!isTaintListEmpty && (
+                    <div className="dc__border-top flex right p-16 dc__gap-8">
+                        <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/constants.ts

@@ -30,27 +30,27 @@ export const clusterSelectStyle = {
         backgroundColor: 'var(--bg-menu-primary)',
         border: '1px solid var(--N200)',
     }),
-    control: (base, state) => ({
+    control: (base) => ({
         ...base,
         borderColor: 'transparent',
         backgroundColor: 'transparent',
         cursor: 'pointer',
         height: '28px',
         minHeight: '28px',
     }),
-    singleValue: (base, state) => ({
+    singleValue: (base) => ({
         ...base,
         fontWeight: 600,
         color: 'var(--N900)',
         direction: 'rtl',
         textAlign: 'left',
         marginLeft: '2px',
     }),
-    indicatorsContainer: (base, state) => ({
+    indicatorsContainer: (base) => ({
         ...base,
         height: '28px',
     }),
-    valueContainer: (base, state) => ({
+    valueContainer: (base) => ({
         ...base,
         height: '28px',
         padding: '0 6px',
@@ -105,18 +105,20 @@ export const CLUSTER_NODE_ACTIONS_LABELS = {
 export const EDIT_TAINTS_MODAL_MESSAGING = {
     titlePrefix: 'Edit taints for node ',
     infoText:
-        'Add taints to nodes so that pods are not scheduled to the nodes or not scheduled to the nodes if possible. After you add taints to nodes, you can set tolerations on a pod to allow the pod to be scheduled to nodes with certain taints.',
-    infoLinkText: 'Check taint validations.',
-    tippyTitle: 'Taint validations',
-    tippyDescription: {
-        message: 'A taint consists of a key, value, and effect.',
+        '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.',
+    description: {
+        title: 'A taint consists of a key, value, and effect.',
         messageList: [
-            `1. Key: The key must begin with a letter or number, and may contain letters, numbers, hyphens, dots, and underscores, up to 253 characters.`,
-            `Optionally, the key can begin with a DNS subdomain prefix and a single '/', like example.com/my-app.`,
-            `2. Value(Optional) :If given, it must begin with a letter or number, and may contain letters, numbers, hyphens, dots, and underscores, up to 63 characters.`,
-            `3. Combination of <key, effect> must be unique.`,
+            'Key: The key must begin with a letter or number, and may contain letters, numbers, hyphens, dots,and underscores, up to 253 characters. Optionally, the key can begin with a DNS subdomain prefix and a single &apos;/&apos;, like example.com/my-app.',
+            'Value(Optional): If given, it must begin with a letter or number, and may contain letters, numbers, hyphens, dots, and underscores, up to 63 characters.',
+            'Combination of &lt;key, effect&gt; 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',
@@ -156,7 +158,7 @@ export const AUTO_SELECT = { label: 'Auto select', value: 'autoSelectNode' }
 
 export const clusterImageSelect = {
     ...clusterSelectStyle,
-    menu: (base, state) => ({
+    menu: (base) => ({
         ...base,
         zIndex: 9999,
         textAlign: 'left',
@@ -165,8 +167,8 @@ export const clusterImageSelect = {
         backgroundColor: 'var(--bg-menu-primary)',
         border: '1px solid var(--N200)',
     }),
-    control: (base, state) => ({
-        ...clusterSelectStyle.control(base, state),
+    control: (base) => ({
+        ...clusterSelectStyle.control(base),
         maxWidth: '300px',
     }),
 }
@@ -330,9 +332,8 @@ export enum ClusterMapListSortableTitle {
 }
 
 export enum CLUSTER_PROD_TYPE {
-    PRODUCTION= 'Production',
-    NON_PRODUCTION= 'Non Production',
-
+    PRODUCTION = 'Production',
+    NON_PRODUCTION = 'Non Production',
 }
 
 export const TAINTS_TABLE_HEADERS: TaintsTableType['headers'] = [