@finos/legend-application-studio 26.1.1 → 26.1.3

package/src/components/ElementIconUtils.tsx

@@ -45,10 +45,19 @@ import {
 } from '@finos/legend-art';
 import { PACKAGEABLE_ELEMENT_TYPE } from '../stores/editor/utils/ModelClassifierUtils.js';
 
+/**
+ * NOTE: eventually we would like to remove this function and just a generic mechanism to
+ * get element icon given the metamodel, we can also simplify the plugins a lot.
+ * Technically, the only time we need to check icon for a type classifier is when we create
+ * a new element
+ */
 export const getElementTypeIcon = (
-  editorStore: EditorStore,
   type: string | undefined,
-  element?: PackageableElement | undefined,
+  editorStore: EditorStore,
+  options?: {
+    element?: PackageableElement | undefined;
+    returnEmptyForUnknown?: boolean | undefined;
+  },
 ): React.ReactNode => {
   switch (type) {
     case PACKAGEABLE_ELEMENT_TYPE.PRIMITIVE:
@@ -98,7 +107,7 @@ export const getElementTypeIcon = (
               ).getExtraElementIconGetters?.() ?? [],
           );
         for (const iconGetter of extraElementIconGetters) {
-          const elementIcon = iconGetter(type, element);
+          const elementIcon = iconGetter(type, options?.element);
           if (elementIcon) {
             return elementIcon;
           }
@@ -107,24 +116,30 @@ export const getElementTypeIcon = (
       // NOTE: this is temporary until we properly refactor this function to check element instead of
       // the type classifier value, but to be fair, this is not a bad way to do it since this acts
       // as a catch all block, we can check for `abstract` element here
-      if (element instanceof FunctionActivator) {
+      if (options?.element instanceof FunctionActivator) {
         return <LaunchIcon />;
       }
-      return <PURE_UnknownElementTypeIcon />;
+      return options?.returnEmptyForUnknown ? null : (
+        <PURE_UnknownElementTypeIcon />
+      );
     }
   }
 };
 
 export const getElementIcon = (
-  editorStore: EditorStore,
   element: PackageableElement | undefined,
+  editorStore: EditorStore,
+  options?: { returnEmptyForUnknown?: boolean | undefined },
 ): React.ReactNode =>
   getElementTypeIcon(
-    editorStore,
     element
       ? returnUndefOnError(() =>
           editorStore.graphState.getPackageableElementType(element),
         )
       : undefined,
-    element,
+    editorStore,
+    {
+      element,
+      returnEmptyForUnknown: options?.returnEmptyForUnknown,
+    },
   );

package/src/components/editor/Editor.tsx

@@ -52,6 +52,7 @@ import { WorkspaceSyncConflictResolver } from './side-bar/WorkspaceSyncConflictR
 import { LEGEND_STUDIO_APPLICATION_NAVIGATION_CONTEXT_KEY } from '../../__lib__/LegendStudioApplicationNavigationContext.js';
 import { EmbeddedQueryBuilder } from '../EmbeddedQueryBuilder.js';
 import { GRAPH_EDITOR_MODE } from '../../stores/editor/EditorConfig.js';
+import { QuickInput } from './QuickInput.js';
 
 export const Editor = withEditorStore(
   observer(() => {
@@ -240,6 +241,7 @@ export const Editor = withEditorStore(
               </div>
             </div>
           </div>
+          <QuickInput />
           <StatusBar actionsDisabled={!editable} />
           {editable && <ProjectSearchCommand />}
           {editorStore.localChangesState.workspaceSyncState

package/src/components/editor/QuickInput.tsx

@@ -0,0 +1,91 @@
+/**
+ * Copyright (c) 2020-present, Goldman Sachs
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import React, { useRef } from 'react';
+import { observer } from 'mobx-react-lite';
+import {
+  type SelectComponent,
+  NonBlockingDialog,
+  createFilter,
+  CustomSelectorInput,
+  Modal,
+} from '@finos/legend-art';
+import type {
+  QuickInputOption,
+  QuickInputState,
+} from '../../stores/editor/QuickInputState.js';
+import { useEditorStore } from './EditorStoreProvider.js';
+
+function QuickInputDialog<T>(props: {
+  quickInputState: QuickInputState<T>;
+}): React.ReactElement {
+  const { quickInputState } = props;
+  const editorStore = useEditorStore();
+  const { placeholder, options, getSearchValue, onSelect } = quickInputState;
+  const inputRef = useRef<SelectComponent>(null);
+  const close = (): void => editorStore.setQuickInputState(undefined);
+
+  const filterOption = createFilter({
+    ignoreCase: true,
+    ignoreAccents: false,
+    stringify: (option) => getSearchValue(option),
+  });
+  const onChange = (value: QuickInputOption<T>): void => {
+    onSelect(value);
+    close();
+  };
+  const handleEnter = (): void => {
+    inputRef.current?.focus();
+  };
+
+  // TODO: include title and properly style it like vscode quick input
+  return (
+    <NonBlockingDialog
+      open={true}
+      onClose={close}
+      TransitionProps={{
+        onEnter: handleEnter,
+      }}
+      onClickAway={close}
+      classes={{ container: 'search-modal__container' }}
+      PaperProps={{ classes: { root: 'search-modal__inner-container' } }}
+    >
+      <Modal darkMode={true} className="search-modal">
+        <div className="quick-input">
+          <CustomSelectorInput
+            ref={inputRef}
+            className="quick-input__input"
+            options={options}
+            onChange={onChange}
+            filterOption={filterOption}
+            placeholder={placeholder}
+            escapeClearsValue={true}
+            darkMode={true}
+            menuIsOpen={true}
+          />
+        </div>
+      </Modal>
+    </NonBlockingDialog>
+  );
+}
+
+export const QuickInput = observer(() => {
+  const editorStore = useEditorStore();
+  if (!editorStore.quickInputState) {
+    return null;
+  }
+  return <QuickInputDialog quickInputState={editorStore.quickInputState} />;
+});

package/src/components/editor/__test-utils__/EditorComponentTestUtils.tsx

@@ -312,7 +312,11 @@ export const TEST__setUpEditor = async (
   // we don't need to but we probably should mock the call to get other configurations,
   // e.g. external format, function activator, etc.
   const graphManagerState = MOCK__editorStore.graphManagerState;
-  graphManagerState.graphManager.initialize = createMock();
+  await graphManagerState.graphManager.initialize({
+    env: 'test',
+    tabSize: 2,
+    clientConfig: {},
+  });
   createSpy(
     graphManagerState.graphManager,
     'getAvailableGenerationConfigurationDescriptions',

package/src/components/editor/command-center/ProjectSearchCommand.tsx

@@ -41,7 +41,7 @@ import {
 export const ProjectSearchCommand = observer(() => {
   const editorStore = useEditorStore();
   const selectorRef = useRef<SelectComponent>(null);
-  const closeModal = (): void => editorStore.searchElementCommandState.close();
+  const closeModal = (): void => editorStore.setShowSearchElementCommand(false);
   const types = editorStore.getSupportedElementTypes();
   const [elementType, setElementType] = useState<string | undefined>();
   const changeType =
@@ -89,7 +89,7 @@ export const ProjectSearchCommand = observer(() => {
 
   return (
     <NonBlockingDialog
-      nonModalDialogState={editorStore.searchElementCommandState}
+      open={editorStore.showSearchElementCommand}
       onClose={closeModal}
       TransitionProps={{
         onEnter: handleEnter,
@@ -117,7 +117,7 @@ export const ProjectSearchCommand = observer(() => {
                     className="project-search-command__option"
                     onClick={changeType(type)}
                   >
-                    {getElementTypeIcon(editorStore, type)}
+                    {getElementTypeIcon(type, editorStore)}
                   </MenuContentItem>
                 ))}
               </MenuContent>
@@ -125,7 +125,7 @@ export const ProjectSearchCommand = observer(() => {
           >
             <div className="project-search-command__type__label">
               {elementType ? (
-                getElementTypeIcon(editorStore, elementType)
+                getElementTypeIcon(elementType, editorStore)
               ) : (
                 <MoreHorizontalIcon />
               )}

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

@@ -24,6 +24,7 @@ import {
   PlusIcon,
   ArrowsAltHIcon,
   useResizeDetector,
+  GenericTextFileIcon,
 } from '@finos/legend-art';
 import { MappingEditor } from './mapping-editor/MappingEditor.js';
 import { UMLEditor } from './uml-editor/UMLEditor.js';
@@ -75,6 +76,7 @@ import { ElementXTGenerationEditor } from './element-generation-editor/ElementXT
 import { TabManager, type TabState } from '@finos/legend-lego/application';
 import { INTERNAL__UnknownFunctionActivatorEdtiorState } from '../../../stores/editor/editor-state/element-editor-state/INTERNAL__UnknownFunctionActivatorEditorState.js';
 import { INTERNAL__UnknownFunctionActivatorEdtior } from './INTERNAL__UnknownFunctionActivatorEdtior.js';
+import { getElementIcon } from '../../ElementIconUtils.js';
 
 export const ViewerEditorGroupSplashScreen: React.FC = () => {
   const commandListWidth = 300;
@@ -322,6 +324,15 @@ export const EditorGroup = observer(() => {
     if (editorState instanceof EntityDiffViewState) {
       return (
         <div className="diff-tab">
+          <div className="diff-tab__element-icon">
+            {editorState.element ? (
+              getElementIcon(editorState.element, editorStore, {
+                returnEmptyForUnknown: true,
+              }) ?? <GenericTextFileIcon />
+            ) : (
+              <GenericTextFileIcon />
+            )}
+          </div>
           <div className="diff-tab__element-name">{editorState.label}</div>
           <div className="diff-tab__text">
             ({getPrettyLabelForRevision(editorState.fromRevision)}
@@ -337,6 +348,9 @@ export const EditorGroup = observer(() => {
     } else if (editorState instanceof EntityChangeConflictEditorState) {
       return (
         <div className="diff-tab">
+          <div className="diff-tab__element-icon">
+            <GenericTextFileIcon />
+          </div>
           <div className="diff-tab__element-name">{editorState.label}</div>
           <div className="diff-tab__text">
             {editorState.isReadOnly ? '(Merge Preview)' : '(Merged)'}
@@ -344,7 +358,33 @@ export const EditorGroup = observer(() => {
         </div>
       );
     }
-    return editorState.label;
+
+    return (
+      <div className="editor-group__header__tab">
+        <div className="editor-group__header__tab__icon">
+          {editorState instanceof ElementEditorState ? (
+            getElementIcon(editorState.element, editorStore, {
+              returnEmptyForUnknown: true,
+            }) ?? <GenericTextFileIcon />
+          ) : (
+            <GenericTextFileIcon />
+          )}
+        </div>
+        <div className="editor-group__header__tab__label">
+          {editorState.label}
+        </div>
+        {editorState instanceof ElementEditorState &&
+          editorStore.tabManagerState.tabs.filter(
+            (tab) =>
+              tab instanceof ElementEditorState &&
+              tab.label === editorState.label,
+          ).length > 1 && (
+            <div className="editor-group__header__tab__path">
+              {editorState.element.path}
+            </div>
+          )}
+      </div>
+    );
   };
 
   if (!currentTabState) {

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

@@ -58,6 +58,8 @@ import {
   MenuContent,
   MenuContentItem,
   Modal,
+  PauseCircleIcon,
+  PlayIcon,
 } from '@finos/legend-art';
 import { LEGEND_STUDIO_TEST_ID } from '../../../__lib__/LegendStudioTesting.js';
 import {
@@ -124,11 +126,19 @@ import {
   rawVariableExpression_setType,
 } from '../../../stores/graph-modifier/RawValueSpecificationGraphModifierHelper.js';
 import { LEGEND_STUDIO_APPLICATION_NAVIGATION_CONTEXT_KEY } from '../../../__lib__/LegendStudioApplicationNavigationContext.js';
-import { LambdaEditor } from '@finos/legend-query-builder';
+import {
+  ExecutionPlanViewer,
+  LambdaEditor,
+  LambdaParameterValuesEditor,
+} from '@finos/legend-query-builder';
 import type { EditorStore } from '../../../stores/editor/EditorStore.js';
 import { graph_renameElement } from '../../../stores/graph-modifier/GraphModifierHelper.js';
 import { ProtocolValueBuilder } from './ProtocolValueBuilder.js';
 import type { ProtocolValueBuilderState } from '../../../stores/editor/editor-state/element-editor-state/ProtocolValueBuilderState.js';
+import {
+  CODE_EDITOR_LANGUAGE,
+  CodeEditor,
+} from '@finos/legend-lego/code-editor';
 
 enum FUNCTION_PARAMETER_TYPE {
   CLASS = 'CLASS',
@@ -360,7 +370,7 @@ const ParameterBasicEditor = observer(
             >
               {typeName !== FUNCTION_PARAMETER_TYPE.PRIMITIVE && (
                 <div className="property-basic-editor__type__abbr">
-                  {getElementIcon(editorStore, paramType)}
+                  {getElementIcon(paramType, editorStore)}
                 </div>
               )}
               <div className="property-basic-editor__type__label">
@@ -398,7 +408,7 @@ const ParameterBasicEditor = observer(
             >
               {typeName !== FUNCTION_PARAMETER_TYPE.PRIMITIVE && (
                 <div className="property-basic-editor__type__abbr">
-                  {getElementIcon(editorStore, paramType)}
+                  {getElementIcon(paramType, editorStore)}
                 </div>
               )}
               <div className="property-basic-editor__type__label">
@@ -555,7 +565,7 @@ const ReturnTypeEditor = observer(
           >
             {typeName !== FUNCTION_PARAMETER_TYPE.PRIMITIVE && (
               <div className="property-basic-editor__type__abbr">
-                {getElementIcon(editorStore, returnType.value)}
+                {getElementIcon(returnType.value, editorStore)}
               </div>
             )}
             <div className="property-basic-editor__type__label">
@@ -593,7 +603,7 @@ const ReturnTypeEditor = observer(
           >
             {typeName !== FUNCTION_PARAMETER_TYPE.PRIMITIVE && (
               <div className="property-basic-editor__type__abbr">
-                {getElementIcon(editorStore, returnType.value)}
+                {getElementIcon(returnType.value, editorStore)}
               </div>
             )}
             <div className="property-basic-editor__type__label">
@@ -862,6 +872,47 @@ const FunctionActivatorContentBuilder = observer(
   },
 );
 
+const ExecutionResultViewer = observer(
+  (props: { functionEditorState: FunctionEditorState }) => {
+    const { functionEditorState } = props;
+    // execution
+    const executionResultText = functionEditorState.executionResultText;
+    const closeExecutionResultViewer = (): void =>
+      functionEditorState.setExecutionResultText(undefined);
+
+    return (
+      <Dialog
+        open={Boolean(executionResultText)}
+        onClose={closeExecutionResultViewer}
+        classes={{
+          root: 'editor-modal__root-container',
+          container: 'editor-modal__container',
+          paper: 'editor-modal__content',
+        }}
+      >
+        <Modal darkMode={true} className="editor-modal">
+          <ModalHeader title="Execution Result" />
+          <ModalBody>
+            <CodeEditor
+              inputValue={executionResultText ?? ''}
+              isReadOnly={true}
+              language={CODE_EDITOR_LANGUAGE.JSON}
+            />
+          </ModalBody>
+          <ModalFooter>
+            <button
+              className="btn modal__footer__close-btn btn--dark"
+              onClick={closeExecutionResultViewer}
+            >
+              Close
+            </button>
+          </ModalFooter>
+        </Modal>
+      </Dialog>
+    );
+  },
+);
+
 export const FunctionEditor = observer(() => {
   const editorStore = useEditorStore();
   const applicationStore = useApplicationStore();
@@ -968,6 +1019,25 @@ export const FunctionEditor = observer(() => {
     );
   };
 
+  const runQuery = applicationStore.guardUnhandledError(() =>
+    flowResult(functionEditorState.handleRunQuery()),
+  );
+
+  const executionIsRunning =
+    functionEditorState.isRunningQuery || functionEditorState.isGeneratingPlan;
+
+  const cancelQuery = applicationStore.guardUnhandledError(() =>
+    flowResult(functionEditorState.cancelQuery()),
+  );
+
+  const generatePlan = applicationStore.guardUnhandledError(() =>
+    flowResult(functionEditorState.generatePlan(false)),
+  );
+
+  const debugPlanGeneration = applicationStore.guardUnhandledError(() =>
+    flowResult(functionEditorState.generatePlan(true)),
+  );
+
   useEffect(() => {
     flowResult(
       functionEditorState.functionDefinitionEditorState.convertLambdaObjectToGrammarString(
@@ -1012,6 +1082,61 @@ export const FunctionEditor = observer(() => {
             ))}
           </div>
           <div className="panel__header__actions">
+            {functionEditorState.isRunningQuery ? (
+              <button
+                className="function-editor__execution__stop-btn"
+                onClick={cancelQuery}
+                tabIndex={-1}
+              >
+                <div className="btn--dark btn--caution function-editor__execution__stop-btn__label">
+                  <PauseCircleIcon className="function-editor__execution__stop-btn__label__icon" />
+                  <div className="function-editor__execution__stop-btn__label__title">
+                    Stop
+                  </div>
+                </div>
+              </button>
+            ) : (
+              <div className="function-editor__execution__action-btn">
+                <button
+                  className="function-editor__execution__action-btn__label"
+                  onClick={runQuery}
+                  title="Run Query"
+                  disabled={executionIsRunning}
+                  tabIndex={-1}
+                >
+                  <PlayIcon className="function-editor__execution__action-btn__label__icon" />
+                  <div className="function-editor__execution__action-btn__label__title">
+                    Run Query
+                  </div>
+                </button>
+                <DropdownMenu
+                  className="function-editor__execution__action-btn__dropdown-btn"
+                  disabled={executionIsRunning}
+                  content={
+                    <MenuContent>
+                      <MenuContentItem
+                        className="function-editor__execution__action-btn__option"
+                        onClick={generatePlan}
+                      >
+                        Generate Plan
+                      </MenuContentItem>
+                      <MenuContentItem
+                        className="function-editor__execution__action-btn__option"
+                        onClick={debugPlanGeneration}
+                      >
+                        Debug
+                      </MenuContentItem>
+                    </MenuContent>
+                  }
+                  menuProps={{
+                    anchorOrigin: { vertical: 'bottom', horizontal: 'right' },
+                    transformOrigin: { vertical: 'top', horizontal: 'right' },
+                  }}
+                >
+                  <CaretDownIcon />
+                </DropdownMenu>
+              </div>
+            )}
             {editorStore.applicationStore.config.options
               .TEMPORARY__enableFunctionActivatorSupport && (
               <>
@@ -1203,6 +1328,21 @@ export const FunctionEditor = observer(() => {
               ))}
             </div>
           )}
+          <ExecutionPlanViewer
+            executionPlanState={functionEditorState.executionPlanState}
+          />
+          <ExecutionResultViewer functionEditorState={functionEditorState} />
+          {functionEditorState.parametersState.parameterValuesEditorState
+            .showModal && (
+            <LambdaParameterValuesEditor
+              graph={functionEditorState.editorStore.graphManagerState.graph}
+              observerContext={
+                functionEditorState.editorStore.changeDetectionState
+                  .observerContext
+              }
+              lambdaParametersState={functionEditorState.parametersState}
+            />
+          )}
         </PanelContent>
       </Panel>
     </div>

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

@@ -187,7 +187,7 @@ const ModelGenerationItem = observer(
         showPlaceholder={isBeingDragged}
       >
         <div className="btn--sm generation-spec-model-generation-editor__item__label">
-          {getElementIcon(editorStore, modelGeneration)}
+          {getElementIcon(modelGeneration, editorStore)}
         </div>
         <input
           className={clsx('generation-spec-model-generation-editor__item__id', {