remove redundent props for enabling editing/ deletion, and also remove depemdency between deletion and editing

Author: TalMalka123

src/components/dagshub/data-engine/metadataKeyValue/MetadataKeyValueList.tsx

@@ -4,6 +4,7 @@ import { MetadataKeyValuePair } from './MetadataKeyValuePair';
 import StyledTextField from './StyledTextField';
 import IconButton from '@mui/material/IconButton';
 import AddIcon from '@mui/icons-material/Add';
+import {Button, ButtonStretch, ButtonVariant} from "../../../elements";
 
 export type MetadataType = 'BOOLEAN' | 'INTEGER' | 'FLOAT' | 'STRING' | 'BLOB';
 
@@ -39,20 +40,16 @@ export interface DatapointMetadataInput {
 export interface MetadataKeyValueListProps {
   maxHeight?: string;
   metadataList: MetadataField[];
-  editingEnabled: boolean;
-  deletionEnabled: boolean;
   onDeleteHandler?: (keyName: string) => void;
-  onChangeHandler?: (metadataList: DatapointMetadataInput[]) => void;
+  onSaveHandler?: (metadataList: DatapointMetadataInput[]) => void;
   validateValueByType?: (valueType: MetadataType, value: string) => boolean;
 }
 
 export function MetadataKeyValueList({
   maxHeight,
   metadataList,
-  editingEnabled,
-  deletionEnabled,
   onDeleteHandler,
-  onChangeHandler,
+  onSaveHandler,
   validateValueByType,
 }: MetadataKeyValueListProps) {
   //Todo:
@@ -100,9 +97,6 @@ export function MetadataKeyValueList({
       setShouldScrollToBottom(false); //turn it off after scrolling
     }
     setAutoFocusNewlyCreatedFieldKey(true); //highlight again when the user adds new field
-
-    !!onChangeHandler && onChangeHandler(convertNewMetadataFieldToDatapointMetadataInput(temporaryMetadataList));
-
   }, [temporaryMetadataList]);
 
   useEffect(() => {
@@ -202,14 +196,14 @@ export function MetadataKeyValueList({
     isAutoGenerated?: boolean;
     isNewlyCreated?: boolean;
   }) => {
-    if (editingEnabled && metadataField.isNewlyCreated) {
-      //it should always be possible to delete newly created fields
-      return true;
-    }
-    if (editingEnabled && deletionEnabled && !!onDeleteHandler && !metadataField.isAutoGenerated) {
-      //logic for pre-existing fields
-      return true;
-    }
+      if (!!onSaveHandler && metadataField.isNewlyCreated) {
+        //it should always be possible to delete newly created fields, even if deletion is not enabled
+        return true;
+      }
+      if (!!onDeleteHandler && !metadataField.isAutoGenerated) {
+        //logic for pre-existing fields
+        return true;
+      }
     return false;
   };
 
@@ -240,7 +234,7 @@ export function MetadataKeyValueList({
             index={index}
             keyName={metadataField.key}
             value={String(metadataField.value)}
-            isEditable={editingEnabled && !metadataField.isAutoGenerated}
+            isEditable={!!onSaveHandler && !metadataField.isAutoGenerated}
             description={metadataField.isAutoGenerated ? 'Auto-generated' : undefined}
             isRemovable={checkIfPairIsRemovable(metadataField)}
             saveKeyNameLocally={locallyEditKeyAtIndex}
@@ -257,8 +251,8 @@ export function MetadataKeyValueList({
           />
         ))}
       </Box>
-      {editingEnabled && (
-        <StyledTextField
+      {!!onSaveHandler && (
+        <><StyledTextField
           onClick={handleAddNew}
           sx={{
             borderBottom: '1px solid #E2E8F0',
@@ -276,8 +270,33 @@ export function MetadataKeyValueList({
             ),
           }}
           value={'Add new'}
+        /><Box
+        sx={{
+          padding: '16px',
+          display: 'flex',
+          width: '100%',
+          gap: '8px',
+          justifyContent: 'flex-end',
+        }}
+      >
+        <Button
+          variant={ButtonVariant.Secondary}
+          style={{ borderRadius: '8px' }}
+          label={'Cancel'}
+          stretch={ButtonStretch.Slim}
+          onClick={() => {
+            // onResetChanges();
+            //Todo: implement
+          }}
+        />
+        <Button
+          style={{ borderRadius: '8px' }}
+          label={'Save'}
+          stretch={ButtonStretch.Slim}
+          disabled={false} //Todo
+          onClick={()=>{onSaveHandler(convertNewMetadataFieldToDatapointMetadataInput(temporaryMetadataList))}}
         />
-      )}
+      </Box></>)}
     </Box>
   );
 }

src/components/dagshub/data-engine/metadataKeyValue/MetadataKeyValuePair.tsx

@@ -180,7 +180,7 @@ export function MetadataKeyValuePair({
               />
             </div>
           </ErroredTooltip>
-          {isEditable && isRemovable && (
+          {!!isRemovable && (
             <IconButton
               style={{ marginRight: '8px', height: '100%', padding: '6px' }}
               onClick={() => {

src/stories/dagshub/data-engine/MetadataKeyValueList/MeatadataKeyValueList.stories.tsx

@@ -14,14 +14,39 @@ export default meta;
 
 const Template: StoryFn<typeof MetadataKeyValueList> = (args) => <MetadataKeyValueList {...args} />;
 
-export const metadataKeyValueList: StoryFn<typeof MetadataKeyValueList> = Template.bind({});
-metadataKeyValueList.args = {
+export const metadataKeyValueListReadOnly: StoryFn<typeof MetadataKeyValueList> = Template.bind({});
+metadataKeyValueListReadOnly.args = {
   metadataList: [
     { key: 'key1', value: 'mockValue1', valueType: 'STRING', multiple: false },
     { key: 'key2', value: 0, valueType: 'INTEGER', isAutoGenerated: true, multiple: false },
     { key: 'key3', value: false, valueType: 'BOOLEAN', multiple: false },
     { key: 'key4', value: true, valueType: 'BOOLEAN', multiple: false },
   ],
+  onSaveHandler:undefined,
+  onDeleteHandler: undefined,
+};
+
+export const metadataKeyValueListEditingEnabled: StoryFn<typeof MetadataKeyValueList> = Template.bind({});
+metadataKeyValueListEditingEnabled.args = {
+  metadataList: [
+    { key: 'key1', value: 'mockValue1', valueType: 'STRING', multiple: false },
+    { key: 'key2', value: 0, valueType: 'INTEGER', isAutoGenerated: true, multiple: false },
+    { key: 'key3', value: false, valueType: 'BOOLEAN', multiple: false },
+    { key: 'key4', value: true, valueType: 'BOOLEAN', multiple: false },
+  ],
+  onSaveHandler: (metadataList)=>{console.log("onSaveHandler")},
+  onDeleteHandler: undefined,
+};
+
+export const metadataKeyValueListDeletionEnabled: StoryFn<typeof MetadataKeyValueList> = Template.bind({});
+metadataKeyValueListDeletionEnabled.args = {
+  metadataList: [
+    { key: 'key1', value: 'mockValue1', valueType: 'STRING', multiple: false },
+    { key: 'key2', value: 0, valueType: 'INTEGER', isAutoGenerated: true, multiple: false },
+    { key: 'key3', value: false, valueType: 'BOOLEAN', multiple: false },
+    { key: 'key4', value: true, valueType: 'BOOLEAN', multiple: false },
+  ],
+  onSaveHandler:undefined,
   onDeleteHandler: (keyName: string) => {
     console.log(`Metadata field with key name ${keyName} was deleted`);
   },

src/stories/elements/customAccordion/customAccordion.stories.tsx

@@ -27,7 +27,7 @@ customAccordion.args = {
       ]}
       editingEnabled={true}
       deletionEnabled={false}
-      onChangeHandler={() => {}}
+      onSaveHandler={() => {}}
     />
   ),
 };