chore: KeyValueTable - Add support for readOnly mode, CustomInput - add margin-top for helper text

Author: RohitRaj011

src/Common/CustomInput/CustomInput.tsx

@@ -135,7 +135,7 @@ export const CustomInput = ({
 
             {getInputError()}
             {helperText && (
-                 <div className="flex left top dc__gap-4 fs-11 lh-16 cn-7">
+                 <div className="flex left top dc__gap-4 fs-11 lh-16 cn-7 mt-4">
                  <Info className="icon-dim-16" />
                  <div>{helperText}</div>
                 </div>

src/Shared/Components/KeyValueTable/KeyValueTable.component.tsx

@@ -35,6 +35,7 @@ export const KeyValueTable = <K extends string>({
     onDelete,
     placeholder,
     isAdditionNotAllowed,
+    readOnly,
 }: KeyValueTableProps<K>) => {
     // CONSTANTS
     const { headers, rows } = config
@@ -168,7 +169,7 @@ export const KeyValueTable = <K extends string>({
     return (
         <div className="dc__border br-4 w-100 bcn-0 key-value">
             <div
-                className={`key-value__row flexbox dc__align-items-center bcn-50 ${!isAdditionNotAllowed || updatedRows.length ? 'dc__border-bottom-n1' : ''}`}
+                className={`key-value__row flexbox dc__align-items-center bcn-50 ${(!readOnly && !isAdditionNotAllowed) || updatedRows.length ? 'dc__border-bottom-n1' : ''}`}
             >
                 {headers.map(({ key, label, className }) =>
                     isSortable && key === firstHeaderKey ? (
@@ -197,18 +198,18 @@ export const KeyValueTable = <K extends string>({
                 )}
                 {!!headerComponent && <div className="px-12">{headerComponent}</div>}
             </div>
-            {!isAdditionNotAllowed && (
+            {!readOnly && !isAdditionNotAllowed && (
                 <div
                     className={`key-value__row flexbox dc__align-items-center ${updatedRows.length ? 'dc__border-bottom-n1' : ''}`}
                 >
                     {headers.map(({ key }) => (
                         <div
                             key={key}
-                            className={`cn-9 fs-13 lh-20 py-8 px-12 flex dc__overflow-auto ${key === firstHeaderKey ? 'dc__align-self-stretch dc__border-right--n1 key-value__header__col-1' : 'flex-grow-1'}`}
+                            className={`cn-9 fs-13 lh-20 flex dc__overflow-auto ${key === firstHeaderKey ? 'dc__align-self-stretch dc__border-right--n1 key-value__header__col-1' : 'flex-grow-1'}`}
                         >
                             <textarea
                                 ref={key === firstHeaderKey ? inputRowRef : undefined}
-                                className="key-value__row-input key-value__row-input--add placeholder-cn5 p-0 lh-20 fs-13 fw-4 dc__no-border-imp dc__no-border-radius"
+                                className="key-value__row-input key-value__row-input--add placeholder-cn5 py-8 px-12 lh-20 fs-13 fw-4 dc__no-border-imp dc__no-border-radius"
                                 value=""
                                 rows={1}
                                 placeholder={placeholder[key]}
@@ -226,15 +227,15 @@ export const KeyValueTable = <K extends string>({
                     {headers.map(({ key }) => (
                         <div
                             key={key}
-                            className={`cn-9 fs-13 lh-20 px-12 dc__overflow-auto flexbox dc__align-items-center dc__gap-4 ${key === firstHeaderKey ? 'dc__align-self-stretch dc__border-right--n1 key-value__header__col-1' : 'flex-grow-1'}`}
+                            className={`cn-9 fs-13 lh-20 dc__overflow-auto flexbox dc__align-items-center dc__gap-4 ${key === firstHeaderKey ? 'dc__align-self-stretch dc__border-right--n1 key-value__header__col-1' : 'flex-grow-1'}`}
                         >
                             {maskValue?.[key] && row.data[key].value ? (
                                 DEFAULT_SECRET_PLACEHOLDER
                             ) : (
                                 <>
                                     <ResizableTagTextArea
                                         {...row.data[key]}
-                                        className="key-value__row-input placeholder-cn5 py-8 px-0 dc__no-border-imp dc__no-border-radius"
+                                        className="key-value__row-input placeholder-cn5 py-8 px-12 dc__no-border-imp dc__no-border-radius"
                                         minHeight={20}
                                         maxHeight={160}
                                         value={row.data[key].value}
@@ -251,6 +252,7 @@ export const KeyValueTable = <K extends string>({
                                                 ? valueTextAreaRef.current?.[row.id]
                                                 : keyTextAreaRef.current?.[row.id]
                                         }
+                                        disabled={readOnly || row.data[key].disabled}
                                         disableOnBlurResizeToMinHeight
                                     />
                                     {row.data[key].required && (
@@ -260,13 +262,18 @@ export const KeyValueTable = <K extends string>({
                             )}
                         </div>
                     ))}
-                    <button
-                        type="button"
-                        className="dc__unset-button-styles dc__align-self-stretch dc__no-shrink flex py-10 px-8 dc__border-left-n1--important dc__hover-n50"
-                        onClick={onRowDelete(row)}
-                    >
-                        <ICCross aria-label="delete-row" className="icon-dim-16 fcn-4 dc__align-self-start cursor" />
-                    </button>
+                    {!readOnly && (
+                        <button
+                            type="button"
+                            className="dc__unset-button-styles dc__align-self-stretch dc__no-shrink flex py-10 px-8 dc__border-left-n1--important dc__hover-n50"
+                            onClick={onRowDelete(row)}
+                        >
+                            <ICCross
+                                aria-label="delete-row"
+                                className="icon-dim-16 fcn-4 dc__align-self-start cursor"
+                            />
+                        </button>
+                    )}
                 </div>
             ))}
         </div>

src/Shared/Components/KeyValueTable/KeyValueTable.types.ts

@@ -82,8 +82,10 @@ export interface KeyValueTableProps<K extends string> {
     isSortable?: boolean
     /** An optional React node for a custom header component. */
     headerComponent?: ReactNode
-    /** When true, data addition field will not be shown */
+    /** When true, data addition field will not be shown. */
     isAdditionNotAllowed?: boolean
+    /** When true, data add or update is disabled. */
+    readOnly?: boolean
     /**
      * An optional function to handle changes in the table rows.
      * @param rowId - The id of the row that changed.