feat: Align multi json design with search attr updates (#1054)

* Search attribute component

Signed-off-by: Assem Hafez <assem.hafez@uber.com>

* Fix type check

Signed-off-by: Assem Hafez <assem.hafez@uber.com>

* revert errors to have key and value

Signed-off-by: Assem Hafez <assem.hafez@uber.com>

* Address the nits

* change button label

* Create hook for fetching search attributes

Signed-off-by: Assem Hafez <assem.hafez@uber.com>

* Refactor error message helpers

* align multi json add button design with search attributes

* remove extra test file

---------

Signed-off-by: Assem Hafez <assem.hafez@uber.com>

Author: Assem-Uber

src/components/multi-json-input/multi-json-input.styles.ts

@@ -24,45 +24,30 @@ const cssStylesObj = {
   container: (theme) => ({
     display: 'flex',
     flexDirection: 'column',
-    gap: '16px',
+    gap: theme.sizing.scale600,
     borderLeft: `2px solid ${theme.colors.borderOpaque}`,
-    paddingLeft: '16px',
+    paddingLeft: theme.sizing.scale600,
   }),
-  inputRow: {
+  inputRow: (theme) => ({
     display: 'flex',
-    gap: '8px',
+    gap: theme.sizing.scale300,
     alignItems: 'flex-start',
-  },
+  }),
   inputContainer: {
     flex: 1,
   },
-  buttonContainer: {
+  buttonContainer: (theme) => ({
     display: 'flex',
     alignItems: 'flex-start',
     justifyContent: 'center',
     minWidth: '40px',
-    paddingTop: '4px',
-  },
-  deleteButton: {
-    padding: '8px',
-    borderRadius: '8px',
-  },
+    paddingTop: theme.sizing.scale100,
+  }),
   addButtonContainer: {
     display: 'flex',
     justifyContent: 'flex-start',
     alignItems: 'flex-start',
   },
-  addButton: {
-    padding: '6px 12px',
-    fontSize: '12px',
-    fontWeight: '500',
-    lineHeight: '16px',
-  },
-  plusIcon: {
-    fontSize: '16px',
-    fontWeight: '500',
-    lineHeight: '1',
-  },
 } satisfies StyletronCSSObject;
 
 export const cssStyles: StyletronCSSObjectOf<typeof cssStylesObj> =

src/components/multi-json-input/multi-json-input.tsx

@@ -1,10 +1,10 @@
 'use client';
 import React, { useCallback, useMemo } from 'react';
 
-import { Button, SHAPE, SIZE } from 'baseui/button';
+import { Button } from 'baseui/button';
 import { FormControl } from 'baseui/form-control';
 import { Textarea } from 'baseui/textarea';
-import { MdDeleteOutline } from 'react-icons/md';
+import { MdAdd, MdDeleteOutline } from 'react-icons/md';
 
 import useStyletronClasses from '@/hooks/use-styletron-classes';
 
@@ -91,20 +91,19 @@ export default function MultiJsonInput({
                 value={inputValue}
                 onChange={(e) => handleInputChange(index, e.target.value)}
                 placeholder={placeholder}
-                size={SIZE.compact}
+                size="compact"
                 error={getInputError(index)}
               />
             </div>
             <div className={cls.buttonContainer}>
               <Button
-                size={SIZE.mini}
+                size="mini"
                 kind="tertiary"
                 shape="circle"
                 onClick={() => {
                   handleDeleteInput(index);
                 }}
                 disabled={isDeleteDisabled}
-                className={cls.deleteButton}
                 aria-label={
                   displayValue.length === 1 ? 'Clear input' : 'Delete input'
                 }
@@ -116,13 +115,12 @@ export default function MultiJsonInput({
         ))}
         <div className={cls.addButtonContainer}>
           <Button
-            size={SIZE.mini}
+            size="mini"
             kind="secondary"
-            shape={SHAPE.pill}
+            shape="pill"
             onClick={handleAddInput}
             disabled={!canAddMore}
-            className={cls.addButton}
-            startEnhancer={<span className={cls.plusIcon}>+</span>}
+            startEnhancer={<MdAdd size={16} />}
           >
             {addButtonText}
           </Button>