@finos/legend-application-studio 19.0.0 → 20.0.0

package/src/components/editor/edit-panel/FunctionEditor.tsx

@@ -26,6 +26,7 @@ import {
   type ElementDragSource,
 } from '../../../stores/shared/DnDUtils.js';
 import {
+  assertErrorThrown,
   prettyCONSTName,
   UnsupportedOperationError,
 } from '@finos/legend-shared';
@@ -75,9 +76,15 @@ import {
   stub_TaggedValue,
   stub_Stereotype,
   stub_RawVariableExpression,
+  getFunctionNameWithPath,
+  getFunctionSignature,
 } from '@finos/legend-graph';
 import {
   type PackageableElementOption,
+  type ApplicationStore,
+  type LegendApplicationPlugin,
+  type LegendApplicationConfig,
+  type LegendApplicationPluginManager,
   useApplicationNavigationContext,
   useApplicationStore,
   buildElementOption,
@@ -101,6 +108,8 @@ import {
 } from '../../../stores/shared/modifier/RawValueSpecificationGraphModifierHelper.js';
 import { LEGEND_STUDIO_APPLICATION_NAVIGATION_CONTEXT_KEY } from '../../../stores/LegendStudioApplicationNavigationContext.js';
 import { LambdaEditor } from '@finos/legend-query-builder';
+import type { EditorStore } from '../../../stores/EditorStore.js';
+import { graph_renameElement } from '../../../stores/shared/modifier/GraphModifierHelper.js';
 
 enum FUNCTION_PARAMETER_TYPE {
   CLASS = 'CLASS',
@@ -130,6 +139,31 @@ type FunctionParameterDragSource = {
 
 const FUNCTION_PARAMETER_DND_TYPE = 'FUNCTION_PARAMETER';
 
+/**
+ * NOTE: every time we update the function signature (parameters, return value), we need to adjust the function path,
+ * therefore, we need to update the graph's function index.
+ */
+const updateFunctionName = (
+  editorStore: EditorStore,
+  applicationStore: ApplicationStore<
+    LegendApplicationConfig,
+    LegendApplicationPluginManager<LegendApplicationPlugin>
+  >,
+  func: ConcreteFunctionDefinition,
+): void => {
+  try {
+    graph_renameElement(
+      editorStore.graphManagerState.graph,
+      func,
+      `${getFunctionNameWithPath(func)}${getFunctionSignature(func)}`,
+      editorStore.changeDetectionState.observerContext,
+    );
+  } catch (error) {
+    assertErrorThrown(error);
+    applicationStore.notifyError(error);
+  }
+};
+
 const ParameterBasicEditor = observer(
   (props: {
     parameter: RawVariableExpression;
@@ -140,6 +174,7 @@ const ParameterBasicEditor = observer(
     const ref = useRef<HTMLDivElement>(null);
     const { parameter, _func, deleteParameter, isReadOnly } = props;
     const editorStore = useEditorStore();
+    const applicationStore = useApplicationStore();
     // Name
     const changeValue: React.ChangeEventHandler<HTMLInputElement> = (event) =>
       rawVariableExpression_setName(parameter, event.target.value);
@@ -159,7 +194,10 @@ const ParameterBasicEditor = observer(
     });
     const selectedType = { value: paramType, label: paramType.name };
     const changeType = (val: PackageableElementOption<Type>): void => {
-      rawVariableExpression_setType(parameter, val.value);
+      if (val.value !== parameter.type.value) {
+        rawVariableExpression_setType(parameter, val.value);
+        updateFunctionName(editorStore, applicationStore, _func);
+      }
       setIsEditingType(false);
     };
     const openElement = (): void => {
@@ -192,6 +230,7 @@ const ParameterBasicEditor = observer(
           parameter,
           editorStore.graphManagerState.graph.getMultiplicity(lBound, uBound),
         );
+        updateFunctionName(editorStore, applicationStore, _func);
       }
     };
     const changeLowerBound: React.ChangeEventHandler<HTMLInputElement> = (
@@ -395,6 +434,7 @@ const ReturnTypeEditor = observer(
     const { functionElement, isReadOnly } = props;
     const { returnType, returnMultiplicity } = functionElement;
     const editorStore = useEditorStore();
+    const applicationStore = useApplicationStore();
     // Type
     const [isEditingType, setIsEditingType] = useState(false);
     const typeOptions =
@@ -412,6 +452,7 @@ const ReturnTypeEditor = observer(
     const changeType = (val: PackageableElementOption<Type>): void => {
       function_setReturnType(functionElement, val.value);
       setIsEditingType(false);
+      updateFunctionName(editorStore, applicationStore, functionElement);
     };
 
     const openElement = (): void => {
@@ -446,6 +487,7 @@ const ReturnTypeEditor = observer(
           functionElement,
           editorStore.graphManagerState.graph.getMultiplicity(lBound, uBound),
         );
+        updateFunctionName(editorStore, applicationStore, functionElement);
       }
     };
     const changeLowerBound: React.ChangeEventHandler<HTMLInputElement> = (
@@ -580,6 +622,7 @@ export const FunctionMainEditor = observer(
     functionEditorState: FunctionEditorState;
   }) => {
     const editorStore = useEditorStore();
+    const applicationStore = useApplicationStore();
     const defaultType = editorStore.graphManagerState.graph.getPrimitiveType(
       PRIMITIVE_TYPE.STRING,
     );
@@ -591,11 +634,13 @@ export const FunctionMainEditor = observer(
         functionElement,
         stub_RawVariableExpression(defaultType),
       );
+      updateFunctionName(editorStore, applicationStore, functionElement);
     };
     const deleteParameter =
       (val: RawVariableExpression): (() => void) =>
       (): void => {
         function_deleteParameter(functionElement, val);
+        updateFunctionName(editorStore, applicationStore, functionElement);
       };
     const handleDropParameter = useCallback(
       (item: UMLEditorElementDropTarget): void => {
@@ -604,9 +649,10 @@ export const FunctionMainEditor = observer(
             functionElement,
             stub_RawVariableExpression(item.data.packageableElement),
           );
+          updateFunctionName(editorStore, applicationStore, functionElement);
         }
       },
-      [functionElement, isReadOnly],
+      [applicationStore, editorStore, functionElement, isReadOnly],
     );
     const [{ isParameterDragOver }, dropParameterRef] = useDrop<
       ElementDragSource,
@@ -827,7 +873,7 @@ export const FunctionEditor = observer(() => {
             )}
             <div className="panel__header__title__label">function</div>
             <div className="panel__header__title__content">
-              {functionElement.name}
+              {functionElement.functionName}
             </div>
           </div>
         </div>

package/src/components/editor/edit-panel/GrammarTextEditor.tsx

@@ -23,10 +23,8 @@ import {
 } from 'monaco-editor';
 import {
   ContextMenu,
-  revealError,
-  setErrorMarkers,
   disposeEditor,
-  baseTextEditorSettings,
+  getBaseTextEditorOptions,
   resetLineNumberGutterWidth,
   clsx,
   WordWrapIcon,
@@ -36,6 +34,10 @@ import {
   HackerIcon,
   PanelContent,
   useResizeDetector,
+  setWarningMarkers,
+  clearMarkers,
+  setErrorMarkers,
+  moveCursorToPosition,
 } from '@finos/legend-art';
 import {
   TAB_SIZE,
@@ -779,7 +781,9 @@ export const GrammarTextEditor = observer(() => {
   const grammarTextEditorState = editorStore.grammarTextEditorState;
   const currentElementLabelRegexString =
     grammarTextEditorState.currentElementLabelRegexString;
-  const error = grammarTextEditorState.error;
+  const error = editorStore.graphState.error;
+
+  const forcedCursorPosition = grammarTextEditorState.forcedCursorPosition;
   const value = normalizeLineEnding(grammarTextEditorState.graphGrammarText);
   const textEditorRef = useRef<HTMLDivElement>(null);
   const hoverProviderDisposer = useRef<IDisposable | undefined>(undefined);
@@ -804,15 +808,15 @@ export const GrammarTextEditor = observer(() => {
     if (!editor && textEditorRef.current) {
       const element = textEditorRef.current;
       const _editor = monacoEditorAPI.create(element, {
-        ...baseTextEditorSettings,
+        ...getBaseTextEditorOptions(),
         language: EDITOR_LANGUAGE.PURE,
         theme: EDITOR_THEME.LEGEND,
         renderValidationDecorations: 'on',
       });
       _editor.onDidChangeModelContent(() => {
         grammarTextEditorState.setGraphGrammarText(getEditorValue(_editor));
-        editorStore.graphState.clearCompilationError();
-        // we can technically can reset the current element label regex string here
+        clearMarkers();
+        // NOTE: we can technically can reset the current element label regex string here
         // but if we do that on first load, the cursor will not jump to the current element
         // also, it's better to place that logic in an effect that watches for the regex string
       });
@@ -882,17 +886,42 @@ export const GrammarTextEditor = observer(() => {
     const editorModel = editor.getModel();
     if (editorModel) {
       editorModel.updateOptions({ tabSize: TAB_SIZE });
-      if (error?.sourceInformation) {
-        setErrorMarkers(
+      if (
+        !editorStore.graphState.areProblemsStale &&
+        error?.sourceInformation
+      ) {
+        setErrorMarkers(editorModel, [
+          {
+            message: error.message,
+            startLineNumber: error.sourceInformation.startLine,
+            startColumn: error.sourceInformation.startColumn,
+            endLineNumber: error.sourceInformation.endLine,
+            endColumn: error.sourceInformation.endColumn,
+          },
+        ]);
+      }
+
+      if (
+        !editorStore.graphState.areProblemsStale &&
+        editorStore.graphState.warnings.length
+      ) {
+        setWarningMarkers(
           editorModel,
-          error.message,
-          error.sourceInformation.startLine,
-          error.sourceInformation.startColumn,
-          error.sourceInformation.endLine,
-          error.sourceInformation.endColumn,
+          editorStore.graphState.warnings
+            .map((warning) => {
+              if (!warning.sourceInformation) {
+                return undefined;
+              }
+              return {
+                message: warning.message,
+                startLineNumber: warning.sourceInformation.startLine,
+                startColumn: warning.sourceInformation.startColumn,
+                endLineNumber: warning.sourceInformation.endLine,
+                endColumn: warning.sourceInformation.endColumn,
+              };
+            })
+            .filter(isNonNullable),
         );
-      } else {
-        monacoEditorAPI.setModelMarkers(editorModel, 'Error', []);
       }
     }
     // Disable editing if user is in viewer mode
@@ -1124,28 +1153,11 @@ export const GrammarTextEditor = observer(() => {
       },
     });
 
-  /**
-   * Reveal error has to be in an effect like this because, we want to reveal the error.
-   * For this to happen, the editor needs to gain focus. However, if the user clicks on the
-   * exit hackermode button, the editor loses focus, and the blocking modal pops up. This modal
-   * in turn traps the focus and preventing the editor from gaining the focus to reveal the error.
-   * As such we want to dismiss the modal before revealing the error, however, as of the current flow
-   * dismissing the modal is called when we set the parser/compiler error. So if this logic belongs to
-   * the normal rendering logic, and not an effect, it might happen just when the modal is still present
-   * to make sure the modal is dismissed, we should place this logic in an effect to make sure it happens
-   * slightly later, also it's better to have this as part of an effect in response to change in the errors
-   */
   useEffect(() => {
-    if (editor) {
-      if (error?.sourceInformation) {
-        revealError(
-          editor,
-          error.sourceInformation.startLine,
-          error.sourceInformation.startColumn,
-        );
-      }
+    if (editor && forcedCursorPosition) {
+      moveCursorToPosition(editor, forcedCursorPosition);
     }
-  }, [editor, error, error?.sourceInformation]);
+  }, [editor, forcedCursorPosition]);
 
   /**
    * This effect helps to navigate to the currently selected element in the explorer tree