@finos/legend-application-studio 24.2.0 → 25.0.0

package/src/components/editor/editor-group/mapping-editor/MappingExecutionBuilder.tsx

@@ -393,7 +393,7 @@ const MappingExecutionQueryEditor = observer(
                 inputValue={queryState.lambdaString}
                 isReadOnly={true}
                 language={CODE_EDITOR_LANGUAGE.PURE}
-                showMiniMap={false}
+                hideMinimap={true}
               />
             </div>
           </PanelContent>

package/src/components/editor/editor-group/project-configuration-editor/ProjectConfigurationEditor.tsx

@@ -517,12 +517,12 @@ export const ProjectConfigurationEditor = observer(() => {
       selectedTab === CONFIGURATION_EDITOR_TAB.PROJECT_DEPENDENCIES &&
       !configState.associatedProjectsAndVersionsFetched
     ) {
-      flowResult(configState.fectchAssociatedProjectsAndVersions()).catch(
-        applicationStore.alertUnhandledError,
-      );
-      flowResult(
-        configState.projectDependencyEditorState.fetchDependencyReport(),
-      ).catch(applicationStore.alertUnhandledError);
+      Promise.all([
+        flowResult(configState.fectchAssociatedProjectsAndVersions()),
+        flowResult(
+          configState.projectDependencyEditorState.fetchDependencyReport(),
+        ),
+      ]).catch(applicationStore.alertUnhandledError);
     }
   }, [applicationStore, configState, selectedTab]);
 

package/src/components/editor/editor-group/service-editor/ServiceEditor.tsx

@@ -370,7 +370,7 @@ const ServiceGeneralEditor = observer(() => {
                 <div className="panel__content__form__section__list__new-item">
                   <CustomSelectorInput
                     className="service-editor__owner__selector"
-                    placeholder={'Enter an owner...'}
+                    placeholder="Enter an owner..."
                     spellCheck={false}
                     inputValue={searchText}
                     options={userOptions}

package/src/components/editor/editor-group/service-editor/ServiceExecutionQueryEditor.tsx

@@ -84,7 +84,6 @@ const ServiceExecutionResultViewer = observer(
               inputValue={executionResultText ?? ''}
               isReadOnly={true}
               language={CODE_EDITOR_LANGUAGE.JSON}
-              showMiniMap={true}
             />
           </ModalBody>
           <ModalFooter>
@@ -456,7 +455,6 @@ export const ServiceExecutionQueryEditor = observer(
               inputValue={queryState.lambdaString}
               isReadOnly={true}
               language={CODE_EDITOR_LANGUAGE.PURE}
-              showMiniMap={true}
             />
           </div>
           <ExecutionPlanViewer

package/src/components/editor/editor-group/service-editor/testable/ServiceTestsEditor.tsx

@@ -284,7 +284,7 @@ const ServiceTestSetupEditor = observer(
                         darkMode={true}
                         isMulti={true}
                         disable={isReadOnly}
-                        placeholder={'Choose keys...'}
+                        placeholder="Choose keys..."
                       />
                     </div>
                   )}

package/src/components/editor/editor-group/uml-editor/ClassQueryBuilder.tsx

@@ -19,15 +19,24 @@ import {
   PackageableElementExplicitReference,
   PureSingleExecution,
   Service,
+  ConcreteFunctionDefinition,
+  Multiplicity,
+  resolvePackagePathAndElementName,
+  ELEMENT_PATH_DELIMITER,
+  RawVariableExpression,
 } from '@finos/legend-graph';
 import {
   type QueryBuilderState,
   ClassQueryBuilderState,
 } from '@finos/legend-query-builder';
-import { assertErrorThrown, guaranteeNonNullable } from '@finos/legend-shared';
+import {
+  assertErrorThrown,
+  guaranteeNonNullable,
+  prettyCONSTName,
+} from '@finos/legend-shared';
 import { flowResult } from 'mobx';
 import { observer } from 'mobx-react-lite';
-import { useState } from 'react';
+import { useRef, useState } from 'react';
 import type { EditorStore } from '../../../../stores/editor/EditorStore.js';
 import type { EmbeddedQueryBuilderState } from '../../../../stores/editor/EmbeddedQueryBuilderState.js';
 import {
@@ -36,6 +45,18 @@ import {
 } from '../../../../stores/graph-modifier/DSL_Service_GraphModifierHelper.js';
 import { useEditorStore } from '../../EditorStoreProvider.js';
 import { NewServiceModal } from '../service-editor/NewServiceModal.js';
+import {
+  CaretDownIcon,
+  Dialog,
+  DropdownMenu,
+  MenuContent,
+  MenuContentItem,
+  MenuContentItemLabel,
+  ModalTitle,
+  PanelDivider,
+  PanelFormSection,
+  PanelFormValidatedTextField,
+} from '@finos/legend-art';
 
 const promoteQueryToService = async (
   packagePath: string,
@@ -82,48 +103,263 @@ const promoteQueryToService = async (
   }
 };
 
+export const promoteQueryToFunction = async (
+  packagePath: string,
+  functionName: string,
+  embeddedQueryBuilderState: EmbeddedQueryBuilderState,
+  queryBuilderState: QueryBuilderState,
+): Promise<void> => {
+  const editorStore = embeddedQueryBuilderState.editorStore;
+  const applicationStore = editorStore.applicationStore;
+  try {
+    const query = queryBuilderState.buildFromQuery();
+    const returnType = queryBuilderState.getQueryReturnType();
+    const _function = new ConcreteFunctionDefinition(
+      functionName,
+      PackageableElementExplicitReference.create(returnType),
+      Multiplicity.ONE,
+    );
+    // we will copy the body of the query to the body of the function and extract the parameters out
+    // to the function parameters
+    _function.expressionSequence = query.body as object[];
+    _function.parameters =
+      queryBuilderState.parametersState.parameterStates.map(
+        (e) =>
+          new RawVariableExpression(
+            e.parameter.name,
+            e.parameter.multiplicity,
+            PackageableElementExplicitReference.create(
+              guaranteeNonNullable(e.parameter.genericType?.value.rawType),
+            ),
+          ),
+      );
+    await flowResult(
+      editorStore.graphEditorMode.addElement(_function, packagePath, true),
+    );
+    await flowResult(
+      embeddedQueryBuilderState.setEmbeddedQueryBuilderConfiguration(undefined),
+    ).catch(applicationStore.alertUnhandledError);
+    applicationStore.notificationService.notifySuccess(
+      `Function '${_function.name}' created`,
+    );
+  } catch (error) {
+    assertErrorThrown(error);
+    applicationStore.notificationService.notifyError(error);
+  }
+};
+
+enum PROMOTE_QUERY_TYPE {
+  FUNCTION = 'FUNCTION',
+  SERVICE = 'SERVICE',
+}
+
+export const NewFunctionModal = observer(
+  (props: {
+    _class: Class | undefined;
+    close: () => void;
+    showModal: boolean;
+    promoteToFunction: (
+      packagePath: string,
+      functionName: string,
+    ) => Promise<void>;
+    isReadOnly?: boolean;
+  }) => {
+    const { isReadOnly, close, _class, showModal, promoteToFunction } = props;
+    const editorStore = useEditorStore();
+    const applicationStore = editorStore.applicationStore;
+    const nameRef = useRef<HTMLInputElement>(null);
+    const defaultFunctionname = _class
+      ? `${_class.name}_QueryFunction`
+      : `QueryFunction`;
+    const [functionPath, setFunctionPath] =
+      useState<string>(defaultFunctionname);
+    const [packagePath, funcName] = resolvePackagePathAndElementName(
+      functionPath,
+      _class?.package?.path ?? 'model::functions',
+    );
+    const [isValid, setIsValid] = useState(true);
+
+    const handleEnter = (): void => nameRef.current?.focus();
+    const create = (): void => {
+      if (functionPath && !isReadOnly && isValid) {
+        promoteToFunction(packagePath, funcName)
+          .then(() => close())
+          .catch(applicationStore.alertUnhandledError);
+      }
+    };
+
+    const validateElementDoesNotAlreadyExist = (
+      myFunctionName: string,
+    ): string | undefined => {
+      const elementAlreadyExists =
+        editorStore.graphManagerState.graph.allOwnElements
+          .map((s) => s.path)
+          .includes(packagePath + ELEMENT_PATH_DELIMITER + myFunctionName);
+
+      if (!elementAlreadyExists) {
+        return undefined;
+      } else {
+        return 'Element with same path already exists';
+      }
+    };
+
+    const changeValue = (value: string): void => {
+      setFunctionPath(value);
+    };
+
+    return (
+      <Dialog
+        open={showModal}
+        onClose={close}
+        TransitionProps={{
+          onEnter: handleEnter,
+        }}
+        PaperProps={{
+          classes: {
+            root: 'search-modal__inner-container',
+          },
+        }}
+      >
+        <form
+          onSubmit={(event) => {
+            event.preventDefault();
+            create();
+          }}
+          className="modal search-modal modal--dark"
+        >
+          <ModalTitle title="Promote to Function" />
+          <PanelFormValidatedTextField
+            ref={nameRef}
+            isReadOnly={isReadOnly ?? false}
+            update={(value: string | undefined): void => {
+              changeValue(value ?? '');
+            }}
+            validate={validateElementDoesNotAlreadyExist}
+            onValidate={(issue: string | undefined) => setIsValid(!issue)}
+            value={functionPath}
+            placeholder={`Enter a name, use ${ELEMENT_PATH_DELIMITER} to create new package(s) for the function`}
+          />
+          <PanelDivider />
+          <PanelFormSection>
+            <div className="search-modal__actions">
+              <button
+                className="btn btn--dark"
+                disabled={Boolean(isReadOnly) || !isValid}
+                onClick={create}
+              >
+                Create
+              </button>
+            </div>
+          </PanelFormSection>
+        </form>
+      </Dialog>
+    );
+  },
+);
+
 const PromoteToServiceQueryBuilderAction = observer(
   (props: { queryBuilderState: QueryBuilderState }) => {
     const { queryBuilderState } = props;
     const editorStore = useEditorStore();
     const queryBuilderExtension = editorStore.embeddedQueryBuilderState;
-    const [openNewServiceModal, setOpenNewServiceModal] = useState(false);
-    const showNewServiceModal = (): void => setOpenNewServiceModal(true);
-    const closeNewServiceModal = (): void => setOpenNewServiceModal(false);
-    const allowPromoteToService = Boolean(
-      queryBuilderState.mapping && queryBuilderState.runtimeValue,
+    const [promoteQueryModal, setPromoteQueryType] = useState<
+      PROMOTE_QUERY_TYPE | undefined
+    >(undefined);
+    const showPromoteQueryModal = (type: PROMOTE_QUERY_TYPE): void =>
+      setPromoteQueryType(type);
+    const closeNewServiceModal = (): void => setPromoteQueryType(undefined);
+    const allowPromotion = Boolean(
+      queryBuilderState.mapping &&
+        queryBuilderState.runtimeValue &&
+        !queryBuilderState.allValidationIssues.length,
     );
-    const promoteToService = async (
-      packagePath: string,
-      serviceName: string,
-    ): Promise<void> => {
-      if (allowPromoteToService) {
-        await promoteQueryToService(
-          packagePath,
-          serviceName,
-          queryBuilderExtension,
-          queryBuilderState,
+
+    const renderPromoteModal = (): React.ReactNode => {
+      if (
+        promoteQueryModal === PROMOTE_QUERY_TYPE.SERVICE &&
+        queryBuilderState.mapping
+      ) {
+        const promoteToService = async (
+          packagePath: string,
+          serviceName: string,
+        ): Promise<void> => {
+          if (allowPromotion) {
+            await promoteQueryToService(
+              packagePath,
+              serviceName,
+              queryBuilderExtension,
+              queryBuilderState,
+            );
+          }
+        };
+
+        return (
+          <NewServiceModal
+            mapping={queryBuilderState.mapping}
+            close={closeNewServiceModal}
+            showModal={true}
+            promoteToService={promoteToService}
+          />
+        );
+      } else if (promoteQueryModal === PROMOTE_QUERY_TYPE.FUNCTION) {
+        const promoteToFunction = async (
+          packagePath: string,
+          serviceName: string,
+        ): Promise<void> => {
+          if (allowPromotion) {
+            await promoteQueryToFunction(
+              packagePath,
+              serviceName,
+              queryBuilderExtension,
+              queryBuilderState,
+            );
+          }
+        };
+
+        return (
+          <NewFunctionModal
+            _class={queryBuilderState.class}
+            close={closeNewServiceModal}
+            showModal={true}
+            promoteToFunction={promoteToFunction}
+          />
         );
       }
+      return null;
     };
+
     return (
       <>
-        <button
+        <DropdownMenu
           className="query-builder__dialog__header__custom-action"
-          tabIndex={-1}
-          onClick={showNewServiceModal}
-          disabled={!allowPromoteToService}
+          title="Promote Query..."
+          content={
+            <MenuContent>
+              {Object.values(PROMOTE_QUERY_TYPE).map((type) => (
+                <MenuContentItem
+                  key={type}
+                  disabled={!allowPromotion}
+                  onClick={(): void => showPromoteQueryModal(type)}
+                >
+                  <MenuContentItemLabel className="query-builder__sub-header__menu-content">
+                    {prettyCONSTName(type)}
+                  </MenuContentItemLabel>
+                </MenuContentItem>
+              ))}
+            </MenuContent>
+          }
+          menuProps={{
+            anchorOrigin: { vertical: 'bottom', horizontal: 'right' },
+            transformOrigin: { vertical: 'top', horizontal: 'right' },
+            elevation: 7,
+          }}
         >
-          Promote to Service
-        </button>
-        {queryBuilderState.mapping && (
-          <NewServiceModal
-            mapping={queryBuilderState.mapping}
-            close={closeNewServiceModal}
-            showModal={openNewServiceModal}
-            promoteToService={promoteToService}
-          />
-        )}
+          <div className="query-builder__sub-header__custom-action__label">
+            Promote To...
+          </div>
+          <CaretDownIcon className="query-builder__sub-header__custom-action__icon" />
+        </DropdownMenu>
+        {renderPromoteModal()}
       </>
     );
   },

package/src/components/editor/side-bar/WorkflowManager.tsx

@@ -242,7 +242,6 @@ const WorkflowJobLogsViewer = observer(
               inputValue={logs}
               isReadOnly={true}
               language={CODE_EDITOR_LANGUAGE.TEXT}
-              showMiniMap={true}
             />
           </ModalBody>
           <ModalFooter>

package/src/components/editor/side-bar/testable/GlobalTestRunner.tsx

@@ -72,7 +72,6 @@ import {
   getAtomicTest_TestResult,
   getAssertionStatus,
 } from '../../../../stores/editor/sidebar-state/testable/GlobalTestRunnerState.js';
-import type { STO_ProjectOverview_LegendStudioApplicationPlugin_Extension } from '../../../../stores/extensions/STO_ProjectOverview_LegendStudioApplicationPlugin_Extension.js';
 import { LEGEND_STUDIO_TEST_ID } from '../../../../__lib__/LegendStudioTesting.js';
 import { getElementTypeIcon } from '../../../ElementIconUtils.js';
 import { UnsupportedEditorPanel } from '../../editor-group/UnsupportedElementEditor.js';
@@ -206,7 +205,6 @@ const TestFailViewer = observer(
                 inputValue={failure.error}
                 isReadOnly={true}
                 language={CODE_EDITOR_LANGUAGE.TEXT}
-                showMiniMap={true}
               />
             )}
             {failure instanceof EqualToJsonAssertFail && (
@@ -431,17 +429,13 @@ export const GlobalTestRunner = observer(
     const editorStore = useEditorStore();
     const globalTestRunnerState = props.globalTestRunnerState;
     const isDispatchingAction = globalTestRunnerState.isDispatchingAction;
-    const sdlcState = editorStore.sdlcState;
-    const currentWorkspace = sdlcState.currentWorkspace;
-    const plugins = editorStore.pluginManager.getApplicationPlugins();
     const testRunnerTabs = (Object.values(GLOBAL_TEST_RUNNER_TABS) as string[])
       .concat(
-        plugins.flatMap(
-          (plugin) =>
-            (
-              plugin as STO_ProjectOverview_LegendStudioApplicationPlugin_Extension
-            ).getExtraTestRunnerTabsClassifiers?.() ?? [],
-        ),
+        editorStore.pluginManager
+          .getApplicationPlugins()
+          .flatMap(
+            (plugin) => plugin.getExtraTestRunnerTabClassifiers?.() ?? [],
+          ),
       )
       .map((e) => ({
         value: e,
@@ -573,18 +567,13 @@ export const GlobalTestRunner = observer(
           </div>
         );
       } else {
-        const extraTestRunnerTabEditorRenderers = plugins.flatMap(
-          (plugin) =>
-            (
-              plugin as STO_ProjectOverview_LegendStudioApplicationPlugin_Extension
-            ).getExtraTestRunnerTabsEditorRenderers?.() ?? [],
-        );
-        for (const editorRenderer of extraTestRunnerTabEditorRenderers) {
-          const editor = editorRenderer(
-            selectedTab,
-            editorStore,
-            currentWorkspace,
+        const extraTestRunnerTabEditorRenderers = editorStore.pluginManager
+          .getApplicationPlugins()
+          .flatMap(
+            (plugin) => plugin.getExtraTestRunnerTabEditorRenderers?.() ?? [],
           );
+        for (const editorRenderer of extraTestRunnerTabEditorRenderers) {
+          const editor = editorRenderer(selectedTab, editorStore);
           if (editor) {
             return editor;
           }

package/src/components/project-view/ProjectViewer.tsx

@@ -55,10 +55,6 @@ import {
 } from '../editor/EditorStoreProvider.js';
 import { useApplicationStore, useCommands } from '@finos/legend-application';
 import { useParams } from '@finos/legend-application/browser';
-import {
-  ActivityBarMenu,
-  type ActivityDisplay,
-} from '../editor/ActivityBar.js';
 import { Explorer } from '../editor/side-bar/Explorer.js';
 import { ProjectOverview } from '../editor/side-bar/ProjectOverview.js';
 import { WorkflowManager } from '../editor/side-bar/WorkflowManager.js';
@@ -67,6 +63,8 @@ import {
   useLegendStudioBaseStore,
 } from '../LegendStudioFrameworkProvider.js';
 import { EmbeddedQueryBuilder } from '../EmbeddedQueryBuilder.js';
+import type { ActivityBarItemConfig } from '@finos/legend-lego/application';
+import { ActivityBarMenu } from '../editor/ActivityBar.js';
 
 const ProjectViewerStatusBar = observer(() => {
   const params = useParams<ProjectViewerPathParams>();
@@ -204,31 +202,33 @@ const ProjectViewerActivityBar = observer(() => {
   const editorStore = useEditorStore();
 
   const changeActivity =
-    (activity: ACTIVITY_MODE): (() => void) =>
+    (activity: string): (() => void) =>
     (): void =>
       editorStore.setActiveActivity(activity);
   // tabs
-  const activities: ActivityDisplay[] = [
-    {
-      mode: ACTIVITY_MODE.EXPLORER,
-      title: 'Explorer (Ctrl + Shift + X)',
-      icon: <FileTrayIcon />,
-    },
-    baseStore.isSDLCAuthorized !== undefined && {
-      mode: ACTIVITY_MODE.PROJECT_OVERVIEW,
-      title: 'Project',
-      icon: (
-        <div className="activity-bar__project-overview-icon">
-          <RepoIcon />
-        </div>
-      ),
-    },
-    viewerStore.workflowManagerState && {
-      mode: ACTIVITY_MODE.WORKFLOW_MANAGER,
-      title: 'WORKFLOW MANAGER',
-      icon: <WrenchIcon />,
-    },
-  ].filter((activity): activity is ActivityDisplay => Boolean(activity));
+  const activities: ActivityBarItemConfig[] = (
+    [
+      {
+        mode: ACTIVITY_MODE.EXPLORER,
+        title: 'Explorer (Ctrl + Shift + X)',
+        icon: <FileTrayIcon />,
+      },
+      baseStore.isSDLCAuthorized !== undefined && {
+        mode: ACTIVITY_MODE.PROJECT_OVERVIEW,
+        title: 'Project',
+        icon: (
+          <div className="activity-bar__project-overview-icon">
+            <RepoIcon />
+          </div>
+        ),
+      },
+      viewerStore.workflowManagerState && {
+        mode: ACTIVITY_MODE.WORKFLOW_MANAGER,
+        title: 'WORKFLOW MANAGER',
+        icon: <WrenchIcon />,
+      },
+    ] as (ActivityBarItemConfig | boolean)[]
+  ).filter((activity): activity is ActivityBarItemConfig => Boolean(activity));
 
   return (
     <div className="activity-bar">
@@ -244,9 +244,7 @@ const ProjectViewerActivityBar = observer(() => {
             })}
             onClick={changeActivity(activity.mode)}
             tabIndex={-1}
-            title={`${activity.title}${
-              activity.info ? ` - ${activity.info}` : ''
-            }`}
+            title={activity.title}
           >
             {activity.icon}
           </button>

package/src/index.ts

@@ -91,7 +91,6 @@ export { getElementIcon } from './components/ElementIconUtils.js';
  */
 
 export * from './stores/extensions/DSL_Generation_LegendStudioApplicationPlugin_Extension.js';
-export * from './stores/extensions/STO_ProjectOverview_LegendStudioApplicationPlugin_Extension.js';
 export * from './stores/extensions/STO_Relational_LegendStudioApplicationPlugin_Extension.js';
 
 export { MINIMUM_SERVICE_OWNERS } from './stores/editor/editor-state/element-editor-state/service/ServiceEditorState.js';

package/src/stores/LegendStudioApplicationPlugin.ts

@@ -77,6 +77,11 @@ export type TestableMetadataGetter = (
   editorStore: EditorStore,
 ) => TestableMetadata | undefined;
 
+export type TestRunnerTabRenderer = (
+  selectedTab: string,
+  editorStore: EditorStore,
+) => React.ReactNode | undefined;
+
 export abstract class LegendStudioApplicationPlugin extends LegendApplicationPlugin {
   /**
    * This helps to better type-check for this empty abtract type
@@ -119,6 +124,16 @@ export abstract class LegendStudioApplicationPlugin extends LegendApplicationPlu
    * Get the list of extension for testables
    */
   getExtraTestableMetadata?(): TestableMetadataGetter[];
+
+  /**
+   * Get the list of the supported classifers for test runner tabs.
+   */
+  getExtraTestRunnerTabClassifiers?(): string[];
+
+  /**
+   * Get the list of renderers for the editor for a test runner tab.
+   */
+  getExtraTestRunnerTabEditorRenderers?(): TestRunnerTabRenderer[];
 }
 
 export type PureGrammarElementLabeler = (

package/src/stores/editor/EditorStore.ts

@@ -159,7 +159,7 @@ export class EditorStore implements CommandRegistrar {
     default: 300,
     snap: 100,
   });
-  activeActivity?: ACTIVITY_MODE = ACTIVITY_MODE.EXPLORER;
+  activeActivity?: string = ACTIVITY_MODE.EXPLORER;
   readonly sideBarDisplayState = new PanelDisplayState({
     initial: 300,
     default: 300,
@@ -839,7 +839,7 @@ export class EditorStore implements CommandRegistrar {
   }
 
   setActiveActivity(
-    activity: ACTIVITY_MODE,
+    activity: string,
     options?: { keepShowingIfMatchedCurrent?: boolean },
   ): void {
     if (!this.sideBarDisplayState.isOpen) {