fix bug- cant copy value field

Author: TalMalka123

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

@@ -118,19 +118,22 @@ function CustomTextField({
     <Box
       sx={{ width: '100%', height: '100%' }}
       onMouseEnter={() => {
+        //have the pencil logic only if a value already exists
         if (currentValue) {
           setHovered(true);
         }
-      }} //have the pencil logic only if a value already exists
+      }}
       onMouseLeave={() => {
+        //have the pencil logic only if a value already exists
         if (currentValue) {
           setHovered(false);
         }
-      }} //have the pencil logic only if a value already exists
+      }}
       onMouseDown={(e) => {
-        if (currentValue) {
+        //When there is value, make text field not focused on a regular click, but only when clicking on the edit button, unless you are editing the value
+        if (!isEditing && currentValue) {
           e.preventDefault();
-        } //When there is value, make text field not focused on a regular click, but only when clicking on the edit button
+        }
       }}
       ref={textFieldWrapperContainerRef}
     >

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

@@ -7,6 +7,7 @@ import AddIcon from '@mui/icons-material/Add';
 
 export type MetadataType = 'BOOLEAN' | 'INTEGER' | 'FLOAT' | 'STRING' | 'BLOB';
 
+//The format used for managing the metadata list in the component
 export interface NewMetadataField {
   key?: string;
   value?: any;
@@ -16,6 +17,7 @@ export interface NewMetadataField {
   isNewlyCreated?: boolean;
 }
 
+//The format the component expects to receive the metadata list
 export interface MetadataField {
   key: string;
   value: any;
@@ -24,13 +26,23 @@ export interface MetadataField {
   isAutoGenerated?: boolean;
 }
 
+//The format the component returns the metadata list
+export interface DatapointMetadataInput {
+  datapointId?: number;
+  url?: string;
+  key: string;
+  value: string;
+  valueType: MetadataType;
+  allowMultiple?: boolean;
+}
+
 export interface MetadataKeyValueListProps {
   maxHeight?: string;
   metadataList: MetadataField[];
   editingEnabled: boolean;
   deletionEnabled: boolean;
   onDeleteHandler?: (keyName: string) => void;
-  onSaveHandler?: (metadataList: NewMetadataField[]) => void;
+  onChangeHandler?: (metadataList: DatapointMetadataInput[]) => void;
   validateValueByType?: (valueType: MetadataType, value: string) => boolean;
 }
 
@@ -40,7 +52,7 @@ export function MetadataKeyValueList({
   editingEnabled,
   deletionEnabled,
   onDeleteHandler,
-  onSaveHandler,
+  onChangeHandler,
   validateValueByType,
 }: MetadataKeyValueListProps) {
   //Todo:
@@ -68,10 +80,16 @@ export function MetadataKeyValueList({
     }
   }, [metadataList]);
 
-  //Todo: create a function to save changes
-  // if (onSaveHandler) {
-  //   onSaveHandler({ ...temporaryMetadataList });
-  // }
+  const convertNewMetadataFieldToDatapointMetadataInput = (metadataList:  NewMetadataField[]): DatapointMetadataInput[] => {
+    return metadataList.map((metadataField) => {
+      return {
+        key: metadataField.key as string,
+        value: metadataField.value as string,
+        valueType: metadataField.valueType as MetadataType,
+        allowMultiple: !!metadataField.multiple,
+      };
+    });
+  }
 
   useEffect(() => {
     if (shouldScrollToBottom && metadataFieldsSection.current) {
@@ -82,6 +100,9 @@ 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(() => {

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

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