[GEN-1775]: fix initial values for input lists (#1817)

odigos-io · Nov 21, 2024 · 191e834 · 191e834
1 parent 195e50a
commit 191e834
Show file tree

Hide file tree

Showing 3 changed files with 48 additions and 28 deletions.
diff --git a/frontend/webapp/reuseable-components/input-list/index.tsx b/frontend/webapp/reuseable-components/input-list/index.tsx
@@ -6,13 +6,15 @@ import styled from 'styled-components';
 import { FieldLabel } from '../field-label';
 import React, { useEffect, useMemo, useRef, useState } from 'react';
 
+type Row = string;
+
 interface InputListProps {
-  initialValues?: string[];
+  initialValues?: Row[];
+  value?: Row[];
+  onChange: (values: Row[]) => void;
   title?: string;
   tooltip?: string;
   required?: boolean;
-  value?: string[];
-  onChange: (values: string[]) => void;
 }
 
 const Container = styled.div`
@@ -54,13 +56,13 @@ const ButtonText = styled(Text)`
   text-decoration-line: underline;
 `;
 
-const INITIAL = [''];
+const INITIAL_ROW: Row = '';
 
-const InputList: React.FC<InputListProps> = ({ initialValues = INITIAL, value = INITIAL, onChange, title, tooltip, required }) => {
-  const [rows, setRows] = useState<string[]>(value || initialValues);
+const InputList: React.FC<InputListProps> = ({ initialValues = [], value, onChange, title, tooltip, required }) => {
+  const [rows, setRows] = useState<Row[]>(value || initialValues);
 
   useEffect(() => {
-    if (!rows.length) setRows(INITIAL);
+    if (!rows.length) setRows([INITIAL_ROW]);
   }, []);
 
   // Filter out rows where either key or value is empty
@@ -79,7 +81,11 @@ const InputList: React.FC<InputListProps> = ({ initialValues = INITIAL, value =
   }, [validRows, onChange]);
 
   const handleAddInput = () => {
-    setRows((prev) => [...prev, '']);
+    setRows((prev) => {
+      const payload = [...prev];
+      payload.push(INITIAL_ROW);
+      return payload;
+    });
   };
 
   const handleDeleteInput = (idx: number) => {

diff --git a/frontend/webapp/reuseable-components/input-table/index.tsx b/frontend/webapp/reuseable-components/input-table/index.tsx
@@ -6,6 +6,10 @@ import styled from 'styled-components';
 import { FieldLabel } from '../field-label';
 import React, { useState, useEffect, useRef, useMemo } from 'react';
 
+type Row = {
+  [key: string]: any;
+};
+
 interface Props {
   columns: {
     title: string;
@@ -15,9 +19,9 @@ interface Props {
     tooltip?: string;
     required?: boolean;
   }[];
-  initialValues?: Record<string, any>[];
-  value?: Record<string, any>[];
-  onChange?: (values: Record<string, any>[]) => void;
+  initialValues?: Row[];
+  value?: Row[];
+  onChange?: (values: Row[]) => void;
 }
 
 const Container = styled.div`
@@ -53,16 +57,18 @@ const ButtonText = styled(Text)`
   text-decoration-line: underline;
 `;
 
-export const InputTable: React.FC<Props> = ({ columns, initialValues = [], value = [], onChange }) => {
-  const [initialObject, setInitialObject] = useState({});
-  const [rows, setRows] = useState(value || initialValues);
+export const InputTable: React.FC<Props> = ({ columns, initialValues = [], value, onChange }) => {
+  // INITIAL_ROW as state, because it's dynamic to the "columns" prop
+  const [initialRow, setInitialRow] = useState<Row>({});
+  const [rows, setRows] = useState<Row[]>(value || initialValues);
 
   useEffect(() => {
-    const init = {};
-    columns.forEach(({ keyName }) => (init[keyName] = ''));
-    setInitialObject(init);
-
-    if (!rows.length) setRows([{ ...init }]);
+    if (!rows.length) {
+      const init = {};
+      columns.forEach(({ keyName }) => (init[keyName] = ''));
+      setInitialRow(init);
+      setRows([{ ...init }]);
+    }
   }, []);
 
   // Filter out rows where either key or value is empty
@@ -83,7 +89,7 @@ export const InputTable: React.FC<Props> = ({ columns, initialValues = [], value
   const handleAddRow = () => {
     setRows((prev) => {
       const payload = [...prev];
-      payload.push({ ...initialObject });
+      payload.push({ ...initialRow });
       return payload;
     });
   };

diff --git a/frontend/webapp/reuseable-components/key-value-input-list/index.tsx b/frontend/webapp/reuseable-components/key-value-input-list/index.tsx
@@ -6,13 +6,18 @@ import styled from 'styled-components';
 import { FieldLabel } from '../field-label';
 import React, { useState, useEffect, useRef, useMemo } from 'react';
 
+type Row = {
+  key: string;
+  value: string;
+};
+
 interface KeyValueInputsListProps {
-  initialKeyValuePairs?: { key: string; value: string }[];
-  value?: { key: string; value: string }[];
+  initialKeyValuePairs?: Row[];
+  value?: Row[];
+  onChange?: (validKeyValuePairs: Row[]) => void;
   title?: string;
   tooltip?: string;
   required?: boolean;
-  onChange?: (validKeyValuePairs: { key: string; value: string }[]) => void;
 }
 
 const Container = styled.div`
@@ -55,13 +60,16 @@ const ButtonText = styled(Text)`
   text-decoration-line: underline;
 `;
 
-const INITIAL = [{ key: '', value: '' }];
+const INITIAL_ROW: Row = {
+  key: '',
+  value: '',
+};
 
-export const KeyValueInputsList: React.FC<KeyValueInputsListProps> = ({ initialKeyValuePairs = INITIAL, value = INITIAL, onChange, title, tooltip, required }) => {
-  const [rows, setRows] = useState<{ key: string; value: string }[]>(value || initialKeyValuePairs);
+export const KeyValueInputsList: React.FC<KeyValueInputsListProps> = ({ initialKeyValuePairs = [], value, onChange, title, tooltip, required }) => {
+  const [rows, setRows] = useState<Row[]>(value || initialKeyValuePairs);
 
   useEffect(() => {
-    if (!rows.length) setRows(INITIAL);
+    if (!rows.length) setRows([{ ...INITIAL_ROW }]);
   }, []);
 
   // Filter out rows where either key or value is empty
@@ -82,7 +90,7 @@ export const KeyValueInputsList: React.FC<KeyValueInputsListProps> = ({ initialK
   const handleAddRow = () => {
     setRows((prev) => {
       const payload = [...prev];
-      payload.push({ key: '', value: '' });
+      payload.push({ ...INITIAL_ROW });
       return payload;
     });
   };