adjust edit mode to new design

DagsHub · Feb 1, 2024 · 190e9b4 · 190e9b4
1 parent 389e4ab
commit 190e9b4
Show file tree

Hide file tree

Showing 9 changed files with 146 additions and 33 deletions.
diff --git a/src/components/dagshub/data-engine/metadataKeyValue/CustomTextField.tsx b/src/components/dagshub/data-engine/metadataKeyValue/CustomTextField.tsx
@@ -1,28 +1,32 @@
-import React, { useState, useRef, useEffect } from 'react';
+import React, {useEffect, useRef, useState} from 'react';
 import IconButton from '@mui/material/IconButton';
 import EditIcon from '@mui/icons-material/Edit';
 import Box from '@mui/material/Box';
 import CancelIcon from '@mui/icons-material/Cancel';
 import StyledTextField from './StyledTextField';
 import './style.scss';
-import { Tooltip } from '@mui/material';
+import {ErroredTooltip, TooltipVariant} from "../../../elements/tooltipV2/ErroredTooltip";
 
 function CustomTextField({
   readOnly,
   value,
-  onSaveHandler,
   placeholder,
   helperText,
   shouldHighlightIfEmpty,
   autoFocus,
+  isErrored,
+  onInputChange,
+  onInputSave,
 }: {
   readOnly: boolean;
   value?: string;
-  onSaveHandler: (newVal?: string) => void;
   placeholder?: string;
   helperText?: string;
   shouldHighlightIfEmpty?: boolean;
   autoFocus?: boolean;
+  isErrored?: boolean;
+  onInputChange?: (newVal?: string) => void;
+  onInputSave?: (newVal?: string) => void;
 }) {
   const [currentValue, setCurrentValue] = useState(value);
   const [isEditing, setEditing] = useState(false);
@@ -67,17 +71,22 @@ function CustomTextField({
 
   const saveChangesHandler = () => {
     setCurrentValue(editedValue);
-    onSaveHandler(editedValue);
+    !!onInputSave && onInputSave(editedValue);
     setHovered(false);
     setEditing(false);
     textFieldRef.current?.blur();
   };
 
   const handleKeyDown = (event: any) => {
+    if(event.key === 'ArrowRight' || event.key === 'ArrowLeft'){
+      event.stopPropagation();
+    }
     if (isEditing && event.key === 'Enter') {
+      event.stopPropagation();
       saveChangesHandler();
     }
     if (isEditing && event.key === 'Escape') {
+      event.stopPropagation();
       handleCancelClick();
     }
   };
@@ -107,7 +116,7 @@ function CustomTextField({
   }, [currentValue, shouldHighlightIfEmpty]);
 
   return (
-    <Tooltip title={getValue()} placement={'top'} disableInteractive={true} arrow>
+    <ErroredTooltip title={isErrored?"Value is not valid":''} placement={'top'} disableInteractive={true} open={isErrored || isHovered} tooltipVariant={TooltipVariant.Error}>
       <Box
         sx={{ width: '100%', height: '100%' }}
         onMouseEnter={() => {
@@ -153,13 +162,16 @@ function CustomTextField({
           onChange={(e: any) => {
             setEditing(true);
             setEditedValue(e.target.value);
+            !!onInputChange && onInputChange(e.target.value);
           }}
           onKeyDown={handleKeyDown}
           value={getValue()}
           placeholder={placeholder}
+          isErrored={isErrored}
+          errorColor={"rgba(252, 165, 165, 1)"}
         />
       </Box>
-    </Tooltip>
+    </ErroredTooltip>
   );
 }
 

diff --git a/src/components/dagshub/data-engine/metadataKeyValue/MetadataKeyValueList.tsx b/src/components/dagshub/data-engine/metadataKeyValue/MetadataKeyValueList.tsx
@@ -30,7 +30,8 @@ export interface MetadataKeyValueListProps {
   editingEnabled: boolean;
   deletionEnabled: boolean;
   onDeleteHandler?: (keyName: string) => void;
-  onChangeHandler?: (metadataList: NewMetadataField[]) => void;
+  onSaveHandler?: (metadataList: NewMetadataField[]) => void;
+  validateValueByType?: (valueType: MetadataType, value: string) => boolean;
 }
 
 export function MetadataKeyValueList({
@@ -39,7 +40,8 @@ export function MetadataKeyValueList({
   editingEnabled,
   deletionEnabled,
   onDeleteHandler,
-  onChangeHandler,
+  onSaveHandler,
+  validateValueByType,
 }: MetadataKeyValueListProps) {
   //Todo:
   // - Not sure what to do with the multiple field. (If I need to use it as part of the validations in the future, and also what value should I set for newly created fields).
@@ -66,10 +68,12 @@ export function MetadataKeyValueList({
     }
   }, [metadataList]);
 
+  //Todo: create a function to save changes
+  // if (onSaveHandler) {
+  //   onSaveHandler({ ...temporaryMetadataList });
+  // }
+
   useEffect(() => {
-    if (onChangeHandler) {
-      onChangeHandler({ ...temporaryMetadataList });
-    }
     if (shouldScrollToBottom && metadataFieldsSection.current) {
       // scroll to button only if + button was clicked
       (metadataFieldsSection.current as HTMLDivElement).scrollTop = (
@@ -172,7 +176,7 @@ export function MetadataKeyValueList({
   const checkIfPairIsRemovable = (metadataField: {
     key?: string;
     value?: string;
-    valueType?: string;
+    valueType?: MetadataType;
     multiple?: boolean;
     isAutoGenerated?: boolean;
     isNewlyCreated?: boolean;
@@ -228,6 +232,7 @@ export function MetadataKeyValueList({
                 : permanentlyDeleteMetadataFieldByIndex
             }
             autoFocusKey={metadataField.isNewlyCreated && autoFocusNewlyCreatedFieldKey}
+            validateValueByType={validateValueByType}
           />
         ))}
       </Box>

diff --git a/src/components/dagshub/data-engine/metadataKeyValue/MetadataKeyValuePair.tsx b/src/components/dagshub/data-engine/metadataKeyValue/MetadataKeyValuePair.tsx
@@ -12,7 +12,7 @@ export interface MetadataKeyValuePairProps {
   index: number;
   keyName?: string;
   value?: string;
-  valueType?: string;
+  valueType?: MetadataType;
   isEditable: boolean;
   description?: string;
   isNewlyCreated?: boolean;
@@ -23,6 +23,7 @@ export interface MetadataKeyValuePairProps {
   deleteFieldPermanently?: (index: number) => void;
   shouldHighlightEmptyFields?: boolean;
   autoFocusKey?: boolean;
+  validateValueByType?: (valueType: MetadataType, value: string) => boolean;
 }
 
 export function MetadataKeyValuePair({
@@ -40,7 +41,17 @@ export function MetadataKeyValuePair({
   deleteFieldPermanently,
   shouldHighlightEmptyFields,
   autoFocusKey,
+  validateValueByType,
 }: MetadataKeyValuePairProps) {
+
+  const [isErrored, setIsErrored] = React.useState(false);
+
+  useEffect(()=>{
+    if(!!validateValueByType && !!valueType){
+      setIsErrored(!validateValueByType(valueType, value as string))
+    }
+  },[valueType])
+
   const valueTypes: { id: MetadataType; label: string }[] = [
     {
       id: 'INTEGER',
@@ -90,7 +101,7 @@ export function MetadataKeyValuePair({
         <CustomTextField
           readOnly={!isNewlyCreated}
           value={keyName}
-          onSaveHandler={(newVal) => {
+          onInputSave={(newVal) => {
             if (saveKeyNameLocally) {
               saveKeyNameLocally(index, newVal);
             }
@@ -109,10 +120,11 @@ export function MetadataKeyValuePair({
           gap: '8px',
           flexShrink: 1,
           minWidth: '65%',
+          height:"100%",
         }}
       >
         {isNewlyCreated && (
-          <Box flexShrink={0}>
+          <div style={{width:"100%", maxWidth:"130px"}}>
             <DropdownV2
               onChange={(event, value) => {
                 if (saveValueTypeLocally) {
@@ -131,18 +143,26 @@ export function MetadataKeyValuePair({
               disableClearable
               shouldHighlightIfEmpty={shouldHighlightEmptyFields}
             />
-          </Box>
+          </div>
         )}
         <CustomTextField
           readOnly={!isEditable}
           value={value}
-          onSaveHandler={(newVal) => {
+          onInputSave={(newVal) => {
+            if (!!validateValueByType && !!valueType){
+              setIsErrored(!validateValueByType(valueType, newVal as string))
+            }
             if (saveValueLocally) {
               saveValueLocally(index, newVal);
             }
           }}
+          onInputChange={(newVal) => {
+            if (!!validateValueByType && !!valueType){
+              setIsErrored(!validateValueByType(valueType, newVal as string))
+            }}}
           placeholder={isNewlyCreated || !value ? 'Add value' : 'Typing...'}
           shouldHighlightIfEmpty={shouldHighlightEmptyFields}
+          isErrored={isErrored}//TODO: add validation
         />
         {isEditable && isRemovable && (
           <IconButton

diff --git a/src/components/dagshub/data-engine/metadataKeyValue/StyledTextField.tsx b/src/components/dagshub/data-engine/metadataKeyValue/StyledTextField.tsx
@@ -14,6 +14,7 @@ function StyledTextField({
   backgroundColorFocus = 'rgba(255, 255, 255, 1)',
   helperTextPaddingLeft = '8px',
   helperTextPaddingBottom = '8px',
+  errorColor = 'rgba(239, 68, 68, 1)',
   ...restProps
 }: {
   changeColorOnHover?: boolean;
@@ -28,6 +29,7 @@ function StyledTextField({
   backgroundColorFocus?: string;
   helperTextPaddingLeft?: string;
   helperTextPaddingBottom?: string;
+  errorColor?: string;
 } & TextFieldProps) {
   return (
     <TextField
@@ -36,11 +38,11 @@ function StyledTextField({
         width: width ?? '100%',
         '.Mui-focused': {
           background: !focusModeDisabled ? `${backgroundColorFocus}!important` : undefined,
-          boxShadow: !focusModeDisabled
+          boxShadow: !focusModeDisabled && !isErrored
             ? 'inset 0px 0px 0px 3px rgba(196, 181, 253, 0.5)!important'
             : undefined,
           '.MuiOutlinedInput-notchedOutline': {
-            border: '0px!important',
+            border: isErrored? `2px solid ${errorColor}!important`: '0px!important',
           },
         },
         '.MuiInputBase-root': {
@@ -64,14 +66,14 @@ function StyledTextField({
         },
         '.MuiOutlinedInput-notchedOutline': {
           borderColor: isErrored
-            ? 'rgba(239, 68, 68, 1)!important'
+            ? `${errorColor}!important`
             : 'rgba(226, 232, 240, 1)!important',
           '&:hover': {
             borderColor: isErrored
-              ? 'rgba(239, 68, 68, 1)!important'
+              ? `${errorColor}!important`
               : 'rgba(203, 213, 225, 1)!important',
           },
-          border: setBorder ? (isErrored ? '2px solid' : '1px solid') : '0px',
+          border: isErrored? '2px solid' : setBorder ? '1px solid' : '0px',
         },
         '.MuiSvgIcon-root ': {
           fill: 'rgba(148, 163, 184, 1)',
@@ -88,7 +90,7 @@ function StyledTextField({
           lineHeight: '16.8px',
           overflow: 'hidden',
           textOverflow: 'ellipsis',
-          color: isErrored ? 'rgba(239, 68, 68, 1)' : 'rgba(71, 85, 105, 1)',
+          color: isErrored ? errorColor : 'rgba(71, 85, 105, 1)',
           margin: '0px',
           paddingLeft: helperTextPaddingLeft,
           paddingBottom: helperTextPaddingBottom,

diff --git a/src/components/dagshub/data-engine/singleFileViewModal/SingleFileViewDataSection.tsx b/src/components/dagshub/data-engine/singleFileViewModal/SingleFileViewDataSection.tsx
@@ -1,6 +1,6 @@
 import React, { useRef, useState } from 'react';
 import { Box } from '@mui/system';
-import { MetadataKeyValueList, NewMetadataField } from '../metadataKeyValue/MetadataKeyValueList';
+import {MetadataKeyValueList, MetadataType, NewMetadataField} from '../metadataKeyValue/MetadataKeyValueList';
 import { Button, ButtonVariant, CustomAccordion } from '../../../elements';
 import { Icon } from '../../../icons';
 import { ItemData, SidebarProps, VisualizerProps } from './SingleFileViewModal';
@@ -18,6 +18,7 @@ export function SingleFileViewDataSection({
   enableMetadataDeletion,
   visualizerRenderer,
   sidebarRenderers,
+  validateValueByType,
 }: {
   isSmallScreen: boolean;
   itemData: ItemData;
@@ -29,7 +30,9 @@ export function SingleFileViewDataSection({
   enableMetadataDeletion?: boolean;
   visualizerRenderer: (props: VisualizerProps) => React.ReactNode;
   sidebarRenderers?: React.ReactNode;
+  validateValueByType?: (valueType: MetadataType, value: string) => boolean;
 }) {
+
   const SIDEBAR_WIDTH = 350; //I decided on this number
   const ARROWS_SECTION_HEIGHT = 52;
 
@@ -70,7 +73,8 @@ export function SingleFileViewDataSection({
                   metadataList={itemData.metadataList}
                   editingEnabled={!!enableMetadataEditing}
                   deletionEnabled={!!enableMetadataDeletion}
-                  onChangeHandler={metadataOnChangeHandler}
+                  onSaveHandler={metadataOnChangeHandler}
+                  validateValueByType={validateValueByType}
                 />
               </CustomAccordion>
             </Box>
@@ -225,7 +229,8 @@ export function SingleFileViewDataSection({
                     metadataList={itemData.metadataList}
                     editingEnabled={!!enableMetadataEditing}
                     deletionEnabled={!!enableMetadataDeletion}
-                    onChangeHandler={metadataOnChangeHandler}
+                    onSaveHandler={metadataOnChangeHandler}
+                    validateValueByType={validateValueByType}
                   />
                 </CustomAccordion>
                 {sidebarRenderers}

diff --git a/src/components/dagshub/data-engine/singleFileViewModal/SingleFileViewModal.tsx b/src/components/dagshub/data-engine/singleFileViewModal/SingleFileViewModal.tsx
@@ -1,7 +1,7 @@
 import { Box } from '@mui/system';
 import React, { useEffect, useRef, useState } from 'react';
 import { useMediaQuery } from '@mui/material';
-import { GenericModal, MetadataField, NewMetadataField, RGB } from '../../index';
+import {GenericModal, MetadataField, MetadataType, NewMetadataField, RGB} from '../../index';
 import './style.scss';
 import TopButtonsSection from './TopButtonsSection';
 import { SingleFileViewDataSection } from './SingleFileViewDataSection';
@@ -48,6 +48,7 @@ export interface singleFileViewModalProps {
   enableFileDownloading?: boolean;
   visualizerRenderer: (props: VisualizerProps) => React.ReactNode;
   sidebarRenderers?: React.ReactNode;
+  validateValueByType?: (valueType: MetadataType, value: string) => boolean;
 }
 
 export function SingleFileViewModal({
@@ -65,6 +66,7 @@ export function SingleFileViewModal({
   enableFileDownloading,
   visualizerRenderer,
   sidebarRenderers,
+  validateValueByType,
 }: singleFileViewModalProps) {
   const [showMetadataOverlay, setShowMetadataOverlay] = useState<boolean>(false);
   const breakpoint = useMediaQuery('(max-width: 800px)');
@@ -145,6 +147,7 @@ export function SingleFileViewModal({
                 enableMetadataDeletion={enableMetadataDeletion}
                 visualizerRenderer={visualizerRenderer}
                 sidebarRenderers={sidebarRenderers}
+                validateValueByType={validateValueByType}
               />
             </Box>
           </Box>,