Merge remote-tracking branch 'origin/dev' into FP-2932-save-doesnt-wo…

…rk-well-in-split-screen
MOV-AI · Oct 14, 2024 · 70dbb8c · 70dbb8c
2 parents de50aff + 3461a1c
commit 70dbb8c
Show file tree

Hide file tree

Showing 27 changed files with 603 additions and 798 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,9 +1,13 @@
-# TBD
+# TBD - This version contains breaking changes in the lib-ide <-> IDE DataTypes and useDataTypes interface
 
 - [FP-2932](https://movai.atlassian.net/browse/FP-2932) Save doesn't work well in split screen
+- [FP-2716](https://movai.atlassian.net/browse/FP-2716): Annotations imported cannot be edited
+- [FP-2711](https://movai.atlassian.net/browse/FP-2711): Corrupted data in Annotation
+- [FP-2927](https://movai.atlassian.net/browse/FP-2927): IDE - Validate user input data string/array/object and only try to transform when needed
+- [FP-2972](https://movai.atlassian.net/browse/FP-2972): Opening flow when nodes don't exist results in stacktrace
+
+# 1.2.9
 
-# v1.2.9
-- [FP-2972](https://movai.atlassian.net/browse/FP-2972):Opening flow when nodes don't exist results in stacktrace
 - [FP-2926](https://movai.atlassian.net/browse/FP-2926): Clear console and app errors
 - [FP-2937](https://movai.atlassian.net/browse/FP-2937): Initial storybook fixes
 - [FP-2930](https://movai.atlassian.net/browse/FP-2930): Update node and pnpm versions

diff --git a/src/__mocks__/@mov-ai/mov-fe-lib-code-editor.js b/src/__mocks__/@mov-ai/mov-fe-lib-code-editor.js
@@ -1,6 +1,20 @@
 import React from "react";
+import PropTypes from "prop-types";
 
 // create mock for Code Editor
 export const MonacoEditor = props => {
   return <textarea {...props} />;
 };
+
+export const MonacoCodeEditor = props => {
+  const { onChange, ...rest } = props;
+  return (<textarea
+    data-testid="code-editor-area"
+    onChange={evt => onChange(evt.target.value)}
+    {...rest}
+  />);
+};
+
+MonacoCodeEditor.propTypes = {
+  onChange: PropTypes.func,
+};
diff --git a/src/editors/Node/view/components/ParametersTable/ParametersTable.jsx b/src/editors/Node/view/components/ParametersTable/ParametersTable.jsx
@@ -11,7 +11,7 @@ const ParametersTable = props => {
   // Props
   const { editable, data, openEditDialog, onRowDelete, defaultColumns } = props;
   // Hooks
-  const { getLabel } = useDataTypes();
+  const { getType } = useDataTypes({ stringOutput: true });
   // Override default columns
   const typeColumn = {
     title: i18n.t("Type"),
@@ -26,7 +26,7 @@ const ParametersTable = props => {
       overflow: "hidden"
     },
     render: rowData => (
-      <span data-testid="output_type">{getLabel(rowData.type)}</span>
+      <span data-testid="output_type">{getType(rowData.type).getLabel()}</span>
     )
   };
   const columns = [...defaultColumns];

diff --git a/src/editors/_shared/ConfigurationSelector/ConfigurationSelector.jsx b/src/editors/_shared/ConfigurationSelector/ConfigurationSelector.jsx
@@ -1,56 +1,36 @@
 import React, { useState, useRef } from "react";
+import PropTypes from "prop-types";
 import { IconButton, InputAdornment, TextField } from "@material-ui/core";
-import { i18n } from "@mov-ai/mov-fe-lib-react";
-import { SCOPES, ALERT_SEVERITIES } from "../../../utils/Constants";
+import { SCOPES } from "../../../utils/Constants";
 import { SelectScopeModal } from "@mov-ai/mov-fe-lib-react";
-import { Document } from "@mov-ai/mov-fe-lib-core";
 import CodeIcon from "@material-ui/icons/Code";
 
+function formatValue(value) {
+  return value.split('/').pop();
+}
+
 const ConfigurationSelector = props => {
   // Props
   const {
-    rowProps,
-    alert = window.alert,
-    formatValue = value => value
+    rowProps = {},
   } = props;
   // State Hooks
   const [openModal, setOpenModal] = useState(false);
-  const [selected, setSelected] = useState(null);
+  const [selected, setSelected] = useState(rowProps.rowData?.value);
   // Refs
   const inputTextRef = useRef();
 
-  const rowData = rowProps?.rowData;
-
-  /**
-   * Format Configuration Value on input value
-   * @param {string} configuration : Configuration Path (workspace/scope/name/version)
-   * @returns {string} Formatted value
-   */
-  const formatConfigurationValue = configuration => {
-    const document = Document.parsePath(configuration, SCOPES.CONFIGURATION);
-    // Temporary validation if document is from archive
-    // TO BE REMOVED AFTER STANDARDIZATION OF PARSING PROCESS
-    if (document.workspace !== "global") {
-      alert({
-        message: i18n.t("OnlyGlobalConfiguration"),
-        severity: ALERT_SEVERITIES.WARNING
-      });
-    }
-    // Return formatted config name
-    return formatValue(document.name);
-  };
-
   /**
    * On Configuration selected
    * @param {string} selectedConfiguration
    */
   const onSubmit = selectedConfiguration => {
-    const formatted = formatConfigurationValue(selectedConfiguration);
+    const formatted =  formatValue(selectedConfiguration);
     rowProps.onChange(formatted);
-    setSelected(selectedConfiguration);
+    setSelected(formatted);
     setOpenModal(false);
     // Set cursor position
-    setImmediate(() => {
+    globalThis.setImmediate(() => {
       if (!inputTextRef.current) return;
       const inputText = inputTextRef.current.querySelector("input");
       inputText.focus();
@@ -68,9 +48,12 @@ const ConfigurationSelector = props => {
   return (
     <TextField
       style={{ width: "100%" }}
-      value={rowData?.value || ""}
+      value={selected || ""}
       data-testid="selector-text-input"
-      onChange={evt => rowProps?.onChange(evt.target.value)}
+      onChange={evt => {
+        setSelected(evt.target.value);
+        rowProps.onChange(evt.target.value);
+      }}
       InputProps={{
         ref: inputTextRef,
         endAdornment: (
@@ -99,4 +82,14 @@ const ConfigurationSelector = props => {
   );
 };
 
+ConfigurationSelector.propTypes = {
+  rowProps: {
+    disabled: PropTypes.bool,
+    onChange: PropTypes.func,
+    rowData: PropTypes.shape({
+      value: PropTypes.string,
+    }),
+  },
+}
+
 export default ConfigurationSelector;
diff --git a/src/editors/_shared/KeyValueTable/KeyValueEditorDialog.jsx b/src/editors/_shared/KeyValueTable/KeyValueEditorDialog.jsx
@@ -36,6 +36,8 @@ const KeyValueEditorDialog = props => {
     valueValidation,
     title,
     isNew,
+    data,
+    setData,
     disabled,
     renderCustomContent,
     renderValueEditor,
@@ -46,7 +48,6 @@ const KeyValueEditorDialog = props => {
     showDefault = false
   } = props;
   // State hook
-  const [data, setData] = useState({});
   const [validation, setValidation] = useState({
     component: null,
     error: false,
@@ -73,16 +74,6 @@ const KeyValueEditorDialog = props => {
     [validation.component]
   );
 
-  //========================================================================================
-  /*                                                                                      *
-   *                                    React lifecycle                                   *
-   *                                                                                      */
-  //========================================================================================
-
-  useEffect(() => {
-    setData(props.data);
-  }, [props.data]);
-
   //========================================================================================
   /*                                                                                      *
    *                                    Event Handlers                                    *
@@ -130,29 +121,6 @@ const KeyValueEditorDialog = props => {
     });
   }, []);
 
-  /**
-   * On change Value
-   * @param {string} value : Code editor value
-   */
-  const onChangeValue = useCallback(
-    value => {
-      if (valueValidation && validate) {
-        validate({ value }).then(res => {
-          setValidation({
-            component: COMPONENTS.VALUE,
-            error: !res.result,
-            message: i18n.t(res.error)
-          });
-        });
-      }
-
-      setData(prevState => {
-        return { ...prevState, value };
-      });
-    },
-    [validate, valueValidation]
-  );
-
   /**
    * Submit form and close dialog
    */
@@ -222,14 +190,12 @@ const KeyValueEditorDialog = props => {
             <FormControl className={classes.marginTop}>
               {renderValueEditor(data.value, {
                 isNew,
-                onChange: onChangeValue,
                 error:
                   getValidationComponent(COMPONENTS.VALUE) && validation.error,
                 helperText:
                   getValidationComponent(COMPONENTS.VALUE) &&
                   validation.message,
                 disabled: disabled,
-                defaultValue: data.defaultValue
               })}
             </FormControl>
             {showDefault && (
@@ -243,9 +209,8 @@ const KeyValueEditorDialog = props => {
                   </Typography>
                 </AccordionSummary>
                 <AccordionDetails className={classes.noHorizontalPadding}>
-                  {renderValueEditor(data.defaultValue, {
+                  {renderValueEditor(undefined, {
                     isNew,
-                    onChange: onChangeValue,
                     isDefault: true,
                     disabled: true
                   })}
@@ -284,14 +249,19 @@ KeyValueEditorDialog.propTypes = {
   disableDescription: PropTypes.bool,
   showDefault: PropTypes.bool,
   showDescription: PropTypes.bool,
-  defaultValue: PropTypes.string,
   onClose: PropTypes.func,
   validate: PropTypes.func,
   onSubmit: PropTypes.func,
   renderValueEditor: PropTypes.func,
   renderCustomContent: PropTypes.func,
   nameValidation: PropTypes.func,
-  valueValidation: PropTypes.func
+  valueValidation: PropTypes.func,
+  setData: PropTypes.func,
+  data: PropTypes.shape({
+    name: PropTypes.string,
+    description: PropTypes.string,
+    value: PropTypes.string,
+  }),
 };
 
 //The function returns true when the compared props equal, preventing the component from re-rendering