[GEN-2209]: fix delete button logic in input lists (#2186)

This pull request includes several changes to improve the behavior of input components in the `frontend/webapp/reuseable-components` directory. The main focus is on ensuring that the delete button functionality is consistent and that input validation is properly handled. Improvements to input validation and delete button functionality: * [`frontend/webapp/reuseable-components/input-list/index.tsx`](diffhunk://#diff-a00687e99957ec5d2b28432fc1959a9819b6f87371692a0bef21cf567bea7bfdL1-R2): Added the `isEmpty` utility function and modified the logic to disable the delete button when there is only one row and all inputs are empty. The `autoFocus` attribute was also updated to use `isEmpty`. [[1]](diffhunk://#diff-a00687e99957ec5d2b28432fc1959a9819b6f87371692a0bef21cf567bea7bfdL1-R2) [[2]](diffhunk://#diff-a00687e99957ec5d2b28432fc1959a9819b6f87371692a0bef21cf567bea7bfdR108-R110) [[3]](diffhunk://#diff-a00687e99957ec5d2b28432fc1959a9819b6f87371692a0bef21cf567bea7bfdL117-R129) * [`frontend/webapp/reuseable-components/input-table/index.tsx`](diffhunk://#diff-511aed49818334957716043c1273ee4e2a4c6bdc789f95e3cc2958f4cf603a1eL1-L5): Included the `isEmpty` utility function and updated the logic to disable the delete button under similar conditions as the input list. The `autoFocus` attribute was adjusted accordingly. [[1]](diffhunk://#diff-511aed49818334957716043c1273ee4e2a4c6bdc789f95e3cc2958f4cf603a1eL1-L5) [[2]](diffhunk://#diff-511aed49818334957716043c1273ee4e2a4c6bdc789f95e3cc2958f4cf603a1eL109-R111) [[3]](diffhunk://#diff-511aed49818334957716043c1273ee4e2a4c6bdc789f95e3cc2958f4cf603a1eL144-R145) [[4]](diffhunk://#diff-511aed49818334957716043c1273ee4e2a4c6bdc789f95e3cc2958f4cf603a1eL153-R163) * [`frontend/webapp/reuseable-components/key-value-input-list/index.tsx`](diffhunk://#diff-be0b643b1628d8036777fd4a042b1d241af86dd5035bfe9548a3b58b0dd0d327L1-R2): Integrated the `isEmpty` utility function and modified the delete button logic to ensure it is disabled when appropriate. The `autoFocus` and `hasError` attributes were also updated to use `isEmpty`. [[1]](diffhunk://#diff-be0b643b1628d8036777fd4a042b1d241af86dd5035bfe9548a3b58b0dd0d327L1-R2) [[2]](diffhunk://#diff-be0b643b1628d8036777fd4a042b1d241af86dd5035bfe9548a3b58b0dd0d327L80-R81) [[3]](diffhunk://#diff-be0b643b1628d8036777fd4a042b1d241af86dd5035bfe9548a3b58b0dd0d327R116-R118) [[4]](diffhunk://#diff-be0b643b1628d8036777fd4a042b1d241af86dd5035bfe9548a3b58b0dd0d327L130-R132) [[5]](diffhunk://#diff-be0b643b1628d8036777fd4a042b1d241af86dd5035bfe9548a3b58b0dd0d327L139-R154)
odigos-io · Jan 12, 2025 · 916f6de · 916f6de
1 parent 09a513a
commit 916f6de
Show file tree

Hide file tree

Showing 3 changed files with 49 additions and 16 deletions.
diff --git a/frontend/webapp/reuseable-components/input-list/index.tsx b/frontend/webapp/reuseable-components/input-list/index.tsx
@@ -1,4 +1,5 @@
-import React, { type KeyboardEventHandler, useEffect, useMemo, useRef, useState } from 'react';
+import React, { useEffect, useMemo, useRef, useState } from 'react';
+import { isEmpty } from '@/utils';
 import styled from 'styled-components';
 import { PlusIcon, TrashIcon } from '@/assets';
 import { Button, FieldError, FieldLabel, Input, Text } from '@/reuseable-components';
@@ -104,8 +105,9 @@ const InputList: React.FC<InputListProps> = ({ initialValues = [], value, onChan
   };
 
   // Check if any input field is empty
+  const isMinRows = rows.length <= 1;
   const isAddButtonDisabled = rows.some((input) => input.trim() === '');
-  const isDelButtonDisabled = rows.length <= 1;
+  const isDelButtonDisabled = isMinRows && isAddButtonDisabled;
 
   return (
     <Container>
@@ -114,8 +116,17 @@ const InputList: React.FC<InputListProps> = ({ initialValues = [], value, onChan
       <ListContainer>
         {rows.map((val, idx) => (
           <RowWrapper key={`input-list-${idx}`}>
-            <Input value={val} onChange={(e) => handleInputChange(e.target.value, idx)} hasError={!!errorMessage} autoFocus={!val && rows.length > 1 && idx === rows.length - 1} />
-            <DeleteButton disabled={isDelButtonDisabled} onClick={() => handleDeleteInput(idx)}>
+            <Input value={val} onChange={(e) => handleInputChange(e.target.value, idx)} hasError={!!errorMessage} autoFocus={isEmpty(val) && !isMinRows && idx === rows.length - 1} />
+            <DeleteButton
+              disabled={isDelButtonDisabled}
+              onClick={() => {
+                if (isMinRows) {
+                  handleInputChange('', idx);
+                } else {
+                  handleDeleteInput(idx);
+                }
+              }}
+            >
               <TrashIcon />
             </DeleteButton>
           </RowWrapper>

diff --git a/frontend/webapp/reuseable-components/input-table/index.tsx b/frontend/webapp/reuseable-components/input-table/index.tsx
@@ -1,8 +1,8 @@
-import React, { useState, useEffect, useRef, useMemo, type KeyboardEventHandler } from 'react';
+import React, { useState, useEffect, useRef, useMemo } from 'react';
+import { isEmpty } from '@/utils';
 import styled from 'styled-components';
 import { PlusIcon, TrashIcon } from '@/assets';
 import { Button, FieldError, FieldLabel, Input, Text } from '@/reuseable-components';
-import { isEmpty } from '@/utils';
 
 type Row = {
   [key: string]: any;
@@ -106,8 +106,9 @@ export const InputTable: React.FC<Props> = ({ columns, initialValues = [], value
   };
 
   // Check if any key or value field is empty
-  const isAddButtonDisabled = rows.some((row) => !!Object.values(row).filter((val) => !val).length);
-  const isDelButtonDisabled = rows.length <= 1;
+  const isMinRows = rows.length <= 1;
+  const isAddButtonDisabled = rows.some((row) => !!Object.values(row).filter((val) => isEmpty(val)).length);
+  const isDelButtonDisabled = isMinRows && isAddButtonDisabled;
 
   // adjust cell-width based on the amount of inputs on-screen,
   // the "0.4" is to consider the delete button
@@ -141,7 +142,7 @@ export const InputTable: React.FC<Props> = ({ columns, initialValues = [], value
                       placeholder={placeholder}
                       value={value}
                       onChange={({ target: { value: val } }) => handleChange(keyName, type === 'number' ? Number(val) : val, idx)}
-                      autoFocus={isEmpty(value) && rows.length > 1 && idx === rows.length - 1 && innerIdx === 0}
+                      autoFocus={isEmpty(value) && !isMinRows && idx === rows.length - 1 && innerIdx === 0}
                       style={{ maxWidth, paddingLeft: 10 }}
                       hasError={!!errorMessage && (!required || (required && isEmpty(value)))}
                     />
@@ -150,7 +151,16 @@ export const InputTable: React.FC<Props> = ({ columns, initialValues = [], value
               })}
 
               <td>
-                <DeleteButton disabled={isDelButtonDisabled} onClick={() => handleDeleteRow(idx)}>
+                <DeleteButton
+                  disabled={isDelButtonDisabled}
+                  onClick={() => {
+                    if (isMinRows) {
+                      columns.forEach(({ keyName }) => handleChange(keyName, '', idx));
+                    } else {
+                      handleDeleteRow(idx);
+                    }
+                  }}
+                >
                   <TrashIcon />
                 </DeleteButton>
               </td>

diff --git a/frontend/webapp/reuseable-components/key-value-input-list/index.tsx b/frontend/webapp/reuseable-components/key-value-input-list/index.tsx
@@ -1,4 +1,5 @@
-import React, { useState, useEffect, useRef, useMemo, type KeyboardEventHandler } from 'react';
+import React, { useState, useEffect, useRef, useMemo } from 'react';
+import { isEmpty } from '@/utils';
 import theme from '@/styles/theme';
 import styled from 'styled-components';
 import { ArrowIcon, PlusIcon, TrashIcon } from '@/assets';
@@ -77,7 +78,7 @@ export const KeyValueInputsList: React.FC<KeyValueInputsListProps> = ({ initialK
   }, []);
 
   // Filter out rows where either key or value is empty
-  const validRows = useMemo(() => rows.filter(({ key, value }) => !!key.trim() && !!value.trim()), [rows]);
+  const validRows = useMemo(() => rows.filter(({ key, value }) => !isEmpty(key.trim()) && !isEmpty(value.trim())), [rows]);
   const recordedRows = useRef(JSON.stringify(validRows));
 
   useEffect(() => {
@@ -112,8 +113,9 @@ export const KeyValueInputsList: React.FC<KeyValueInputsListProps> = ({ initialK
   };
 
   // Check if any key or value field is empty
+  const isMinRows = rows.length <= 1;
   const isAddButtonDisabled = rows.some(({ key, value }) => key.trim() === '' || value.trim() === '');
-  const isDelButtonDisabled = rows.length <= 1;
+  const isDelButtonDisabled = isMinRows && isAddButtonDisabled;
 
   return (
     <Container>
@@ -127,7 +129,7 @@ export const KeyValueInputsList: React.FC<KeyValueInputsListProps> = ({ initialK
               value={key}
               onChange={(e) => handleChange('key', e.target.value, idx)}
               hasError={!!errorMessage && (!required || (required && !key))}
-              autoFocus={!value && rows.length > 1 && idx === rows.length - 1}
+              autoFocus={isEmpty(value) && !isMinRows && idx === rows.length - 1}
             />
             <div>
               <ArrowIcon rotate={180} fill={theme.text.darker_grey} />
@@ -136,10 +138,20 @@ export const KeyValueInputsList: React.FC<KeyValueInputsListProps> = ({ initialK
               placeholder='Attribute value'
               value={value}
               onChange={(e) => handleChange('value', e.target.value, idx)}
-              hasError={!!errorMessage && (!required || (required && !value))}
+              hasError={!!errorMessage && (!required || (required && isEmpty(value)))}
               autoFocus={false}
             />
-            <DeleteButton disabled={isDelButtonDisabled} onClick={() => handleDeleteRow(idx)}>
+            <DeleteButton
+              disabled={isDelButtonDisabled}
+              onClick={() => {
+                if (isMinRows) {
+                  handleChange('key', '', idx);
+                  handleChange('value', '', idx);
+                } else {
+                  handleDeleteRow(idx);
+                }
+              }}
+            >
               <TrashIcon />
             </DeleteButton>
           </RowWrapper>