@finos/legend-application-studio 26.1.1 → 26.1.2

package/src/components/editor/editor-group/GrammarTextEditor.tsx

@@ -826,150 +826,153 @@ export const GrammarTextEditor = observer(() => {
     }
     // Disable editing if user is in viewer mode
     editor.updateOptions({ readOnly: editorStore.isInViewerMode });
-  }
 
-  // hover
-  hoverProviderDisposer.current?.dispose();
-  hoverProviderDisposer.current = monacoLanguagesAPI.registerHoverProvider(
-    CODE_EDITOR_LANGUAGE.PURE,
-    {
-      provideHover: (model, position) => {
-        const currentWord = model.getWordAtPosition(position);
-        if (!currentWord) {
-          return { contents: [] };
-        }
+    // hover
+    hoverProviderDisposer.current?.dispose();
+    hoverProviderDisposer.current = monacoLanguagesAPI.registerHoverProvider(
+      CODE_EDITOR_LANGUAGE.PURE,
+      {
+        provideHover: (model, position) => {
+          const currentWord = model.getWordAtPosition(position);
+          if (!currentWord) {
+            return { contents: [] };
+          }
 
-        // show documention for parser section
-        const lineTextIncludingWordRange = {
-          startLineNumber: position.lineNumber,
-          startColumn: 1,
-          endLineNumber: position.lineNumber,
-          endColumn: currentWord.endColumn,
-        };
-        const lineTextIncludingWord = model.getValueInRange(
-          lineTextIncludingWordRange,
-        );
-        // NOTE: we don't need to trim here since the leading whitespace in front of
-        // the section header is considered invalid syntax in the grammar
-        if (
-          !hasWhiteSpace(lineTextIncludingWord) &&
-          lineTextIncludingWord.startsWith(PARSER_SECTION_MARKER)
-        ) {
-          const parserKeyword = lineTextIncludingWord.substring(
-            PARSER_SECTION_MARKER.length,
+          // show documention for parser section
+          const lineTextIncludingWordRange = {
+            startLineNumber: position.lineNumber,
+            startColumn: 1,
+            endLineNumber: position.lineNumber,
+            endColumn: currentWord.endColumn,
+          };
+          const lineTextIncludingWord = model.getValueInRange(
+            lineTextIncludingWordRange,
           );
-          const doc = getParserDocumetation(editorStore, parserKeyword);
-          if (doc) {
-            return {
-              range: lineTextIncludingWordRange,
-              contents: [
-                doc.markdownText
-                  ? {
-                      value: doc.markdownText.value,
-                    }
-                  : undefined,
-                doc.url
-                  ? {
-                      value: `[See documentation](${doc.url})`,
-                    }
-                  : undefined,
-              ].filter(isNonNullable),
-            };
+          // NOTE: we don't need to trim here since the leading whitespace in front of
+          // the section header is considered invalid syntax in the grammar
+          if (
+            !hasWhiteSpace(lineTextIncludingWord) &&
+            lineTextIncludingWord.startsWith(PARSER_SECTION_MARKER)
+          ) {
+            const parserKeyword = lineTextIncludingWord.substring(
+              PARSER_SECTION_MARKER.length,
+            );
+            const doc = getParserDocumetation(editorStore, parserKeyword);
+            if (doc) {
+              return {
+                range: lineTextIncludingWordRange,
+                contents: [
+                  doc.markdownText
+                    ? {
+                        value: doc.markdownText.value,
+                      }
+                    : undefined,
+                  doc.url
+                    ? {
+                        value: `[See documentation](${doc.url})`,
+                      }
+                    : undefined,
+                ].filter(isNonNullable),
+              };
+            }
           }
-        }
 
-        // show documentation for parser element
-        const textUntilPosition = model.getValueInRange({
-          startLineNumber: 1,
-          startColumn: 1,
-          endLineNumber: position.lineNumber,
-          endColumn: position.column,
-        });
-        const allParserSectionHeaders =
-          // NOTE: since `###Pure` is implicitly considered as the first section, we prepend it to the text
-          `${PARSER_SECTION_MARKER}${PURE_PARSER.PURE}\n${textUntilPosition}`
-            .split('\n')
-            .filter((line) => line.startsWith(PARSER_SECTION_MARKER));
-        const currentSectionParserKeyword = getSectionParserNameFromLineText(
-          allParserSectionHeaders[allParserSectionHeaders.length - 1] ?? '',
-        );
-        if (currentSectionParserKeyword) {
-          const doc = getParserElementDocumentation(
-            editorStore,
-            currentSectionParserKeyword,
-            currentWord.word,
+          // show documentation for parser element
+          const textUntilPosition = model.getValueInRange({
+            startLineNumber: 1,
+            startColumn: 1,
+            endLineNumber: position.lineNumber,
+            endColumn: position.column,
+          });
+          const allParserSectionHeaders =
+            // NOTE: since `###Pure` is implicitly considered as the first section, we prepend it to the text
+            `${PARSER_SECTION_MARKER}${PURE_PARSER.PURE}\n${textUntilPosition}`
+              .split('\n')
+              .filter((line) => line.startsWith(PARSER_SECTION_MARKER));
+          const currentSectionParserKeyword = getSectionParserNameFromLineText(
+            allParserSectionHeaders[allParserSectionHeaders.length - 1] ?? '',
           );
-          if (doc) {
-            return {
-              range: {
-                startLineNumber: position.lineNumber,
-                startColumn: currentWord.startColumn,
-                endLineNumber: position.lineNumber,
-                endColumn: currentWord.endColumn,
-              },
-              contents: [
-                doc.markdownText
-                  ? {
-                      value: doc.markdownText.value,
-                    }
-                  : undefined,
-                doc.url
-                  ? {
-                      value: `[See documentation](${doc.url})`,
-                    }
-                  : undefined,
-              ].filter(isNonNullable),
-            };
+          if (currentSectionParserKeyword) {
+            const doc = getParserElementDocumentation(
+              editorStore,
+              currentSectionParserKeyword,
+              currentWord.word,
+            );
+            if (doc) {
+              return {
+                range: {
+                  startLineNumber: position.lineNumber,
+                  startColumn: currentWord.startColumn,
+                  endLineNumber: position.lineNumber,
+                  endColumn: currentWord.endColumn,
+                },
+                contents: [
+                  doc.markdownText
+                    ? {
+                        value: doc.markdownText.value,
+                      }
+                    : undefined,
+                  doc.url
+                    ? {
+                        value: `[See documentation](${doc.url})`,
+                      }
+                    : undefined,
+                ].filter(isNonNullable),
+              };
+            }
           }
-        }
 
-        return { contents: [] };
+          return { contents: [] };
+        },
       },
-    },
-  );
+    );
 
-  // suggestion
-  suggestionProviderDisposer.current?.dispose();
-  suggestionProviderDisposer.current =
-    monacoLanguagesAPI.registerCompletionItemProvider(
-      CODE_EDITOR_LANGUAGE.PURE,
-      {
-        // NOTE: we need to specify this to show suggestions for section
-        // because by default, only alphanumeric characters trigger completion item provider
-        // See https://microsoft.github.io/monaco-editor/api/interfaces/monaco.languages.CompletionContext.html#triggerCharacter
-        // See https://github.com/microsoft/monaco-editor/issues/2530#issuecomment-861757198
-        triggerCharacters: ['#'],
-        provideCompletionItems: (model, position) => {
-          let suggestions: monacoLanguagesAPI.CompletionItem[] = [];
+    // suggestion
+    suggestionProviderDisposer.current?.dispose();
+    suggestionProviderDisposer.current =
+      monacoLanguagesAPI.registerCompletionItemProvider(
+        CODE_EDITOR_LANGUAGE.PURE,
+        {
+          // NOTE: we need to specify this to show suggestions for section
+          // because by default, only alphanumeric characters trigger completion item provider
+          // See https://microsoft.github.io/monaco-editor/api/interfaces/monaco.languages.CompletionContext.html#triggerCharacter
+          // See https://github.com/microsoft/monaco-editor/issues/2530#issuecomment-861757198
+          triggerCharacters: ['#'],
+          provideCompletionItems: (model, position) => {
+            let suggestions: monacoLanguagesAPI.CompletionItem[] = [];
 
-          // suggestions for parser keyword
-          suggestions = suggestions.concat(
-            getParserKeywordSuggestions(
-              position,
-              model,
-              collectParserKeywordSuggestions(editorStore),
-            ),
-          );
+            // suggestions for parser keyword
+            suggestions = suggestions.concat(
+              getParserKeywordSuggestions(
+                position,
+                model,
+                collectParserKeywordSuggestions(editorStore),
+              ),
+            );
 
-          // suggestions for parser element snippets
-          suggestions = suggestions.concat(
-            getParserElementSnippetSuggestions(
-              position,
-              model,
-              (parserName: string) =>
-                collectParserElementSnippetSuggestions(editorStore, parserName),
-            ),
-          );
+            // suggestions for parser element snippets
+            suggestions = suggestions.concat(
+              getParserElementSnippetSuggestions(
+                position,
+                model,
+                (parserName: string) =>
+                  collectParserElementSnippetSuggestions(
+                    editorStore,
+                    parserName,
+                  ),
+              ),
+            );
 
-          // inline code snippet suggestions
-          suggestions = suggestions.concat(
-            getInlineSnippetSuggestions(position, model),
-          );
+            // inline code snippet suggestions
+            suggestions = suggestions.concat(
+              getInlineSnippetSuggestions(position, model),
+            );
 
-          return { suggestions };
+            return { suggestions };
+          },
         },
-      },
-    );
+      );
+  }
 
   useEffect(() => {
     if (editor && forcedCursorPosition) {
@@ -983,8 +986,8 @@ export const GrammarTextEditor = observer(() => {
       if (editor) {
         disposeCodeEditor(editor);
       }
-      // NOTE: make sure the call the disposer again after leaving this editor
-      // else we would end up with duplicated suggestions and hover infos
+
+      // Dispose the providers properly to avoid ending up with duplicated suggestions
       hoverProviderDisposer.current?.dispose();
       suggestionProviderDisposer.current?.dispose();
     },

package/src/components/editor/editor-group/INTERNAL__UnknownFunctionActivatorEdtior.tsx

@@ -17,7 +17,7 @@
 import { observer } from 'mobx-react-lite';
 import { useEditorStore } from '../EditorStoreProvider.js';
 import { INTERNAL__UnknownFunctionActivatorEdtiorState } from '../../../stores/editor/editor-state/element-editor-state/INTERNAL__UnknownFunctionActivatorEditorState.js';
-import { BlankPanelContent, Panel } from '@finos/legend-art';
+import { ArrowRightIcon, BlankPanelContent, Panel } from '@finos/legend-art';
 import { useApplicationStore } from '@finos/legend-application';
 import { flowResult } from 'mobx';
 import { ProtocolValueBuilder } from './ProtocolValueBuilder.js';
@@ -80,18 +80,31 @@ export const INTERNAL__UnknownFunctionActivatorEdtior = observer(() => {
                         {functionFieldDocumentation}
                       </div>
                     )}
-                    <input
-                      className="panel__content__form__section__input"
-                      spellCheck={false}
-                      disabled={true}
-                      value={generateFunctionPrettyName(
-                        editorState.activator.function.value,
-                        {
-                          fullPath: true,
-                          spacing: false,
-                        },
-                      )}
-                    />
+                    <div className="function-activator-editor__function-pointer">
+                      <input
+                        className="panel__content__form__section__input"
+                        spellCheck={false}
+                        disabled={true}
+                        value={generateFunctionPrettyName(
+                          editorState.activator.function.value,
+                          {
+                            fullPath: true,
+                            spacing: false,
+                          },
+                        )}
+                      />
+                      <button
+                        className="function-activator-editor__function-pointer__visit-btn btn--dark"
+                        title="Go to Function"
+                        onClick={() =>
+                          editorStore.graphEditorMode.openElement(
+                            editorState.activator.function.value,
+                          )
+                        }
+                      >
+                        <ArrowRightIcon />
+                      </button>
+                    </div>
                   </div>
                   <div className="panel__content__form__section">
                     <div className="panel__content__form__section__divider"></div>

package/src/components/editor/editor-group/RuntimeEditor.tsx

@@ -261,7 +261,7 @@ const getRuntimeExplorerTreeNodeIcon = (
   } else if (node.data instanceof Connection) {
     return <PURE_ConnectionIcon />;
   }
-  return getElementIcon(editorStore, node.data);
+  return getElementIcon(node.data, editorStore);
 };
 
 const getRuntimeExplorerTreeNodeTooltipText = (