@finos/legend-application-studio 26.1.10 → 26.1.11

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

@@ -31,7 +31,6 @@ import {
   ModalBody,
   ModalFooter,
   ModalHeader,
-  MoreVerticalIcon,
 } from '@finos/legend-art';
 import { assertErrorThrown } from '@finos/legend-shared';
 import { flowResult } from 'mobx';
@@ -287,24 +286,24 @@ export const ServiceExecutionQueryEditor = observer(
             </div>
           </div>
           <div className="panel__header__actions">
-            <div className="service-editor__execution__action-btn">
+            <div className="btn__dropdown-combo btn__dropdown-combo--primary">
               <button
-                className="service-editor__execution__action-btn__label service-editor__execution__action-btn__label--primary"
+                className="btn__dropdown-combo__label"
                 onClick={editWithQueryBuilder()}
                 title="Edit Query"
                 tabIndex={-1}
               >
-                <PencilIcon className="service-editor__execution__action-btn__label__icon" />
-                <div className="service-editor__execution__action-btn__label__title">
+                <PencilIcon className="btn__dropdown-combo__label__icon" />
+                <div className="btn__dropdown-combo__label__title">
                   Edit Query
                 </div>
               </button>
               <DropdownMenu
-                className="service-editor__execution__action-btn__dropdown-btn service-editor__execution__action-btn__dropdown-btn--primary"
+                className="btn__dropdown-combo__dropdown-btn"
                 content={
                   <MenuContent>
                     <MenuContentItem
-                      className="service-editor__execution__action-btn__option"
+                      className="btn__dropdown-combo__option"
                       onClick={editWithQueryBuilder(true)}
                     >
                       Text Mode
@@ -319,96 +318,97 @@ export const ServiceExecutionQueryEditor = observer(
                 <CaretDownIcon />
               </DropdownMenu>
             </div>
-            {executionState.isRunningQuery ? (
-              <button
-                className="service-editor__execution__stop-btn"
-                onClick={cancelQuery}
-                tabIndex={-1}
-              >
-                <div className="btn--dark btn--caution service-editor__execution__stop-btn__label">
-                  <PauseCircleIcon className="service-editor__execution__stop-btn__label__icon" />
-                  <div className="service-editor__execution__stop-btn__label__title">
-                    Stop
-                  </div>
-                </div>
-              </button>
-            ) : (
-              <div className="service-editor__execution__action-btn">
+            <div className="btn__dropdown-combo btn__dropdown-combo--primary">
+              {executionState.isRunningQuery ? (
                 <button
-                  className="service-editor__execution__action-btn__label"
-                  onClick={runQuery}
-                  title="Run Query"
-                  disabled={executionIsRunning}
+                  className="btn__dropdown-combo__canceler"
+                  onClick={cancelQuery}
                   tabIndex={-1}
                 >
-                  <PlayIcon className="service-editor__execution__action-btn__label__icon" />
-                  <div className="service-editor__execution__action-btn__label__title">
-                    Run Query
+                  <div className="btn--dark btn--caution btn__dropdown-combo__canceler__label">
+                    <PauseCircleIcon className="btn__dropdown-combo__canceler__label__icon" />
+                    <div className="btn__dropdown-combo__canceler__label__title">
+                      Stop
+                    </div>
                   </div>
                 </button>
-                <DropdownMenu
-                  className="service-editor__execution__action-btn__dropdown-btn"
-                  disabled={executionIsRunning}
-                  content={
-                    <MenuContent>
-                      <MenuContentItem
-                        className="service-editor__execution__action-btn__option"
-                        onClick={generatePlan}
-                      >
-                        Generate Plan
-                      </MenuContentItem>
-                      <MenuContentItem
-                        className="service-editor__execution__action-btn__option"
-                        onClick={debugPlanGeneration}
-                      >
-                        Debug
-                      </MenuContentItem>
-                    </MenuContent>
-                  }
-                  menuProps={{
-                    anchorOrigin: { vertical: 'bottom', horizontal: 'right' },
-                    transformOrigin: { vertical: 'top', horizontal: 'right' },
-                  }}
-                >
-                  <CaretDownIcon />
-                </DropdownMenu>
-              </div>
-            )}
-            <div>
-              <DropdownMenu
-                className="service-editor__execution__advanced-btn"
-                disabled={executionIsRunning}
-                content={
-                  <MenuContent>
-                    <MenuContentItem
-                      className="service-editor__execution__advanced-btn__option"
-                      onClick={importQuery}
-                    >
-                      Import Query
-                    </MenuContentItem>
-                    <MenuContentItem
-                      className="service-editor__execution__advanced-btn__option"
-                      onClick={openQueryInLegendQuery}
-                      disabled={!applicationStore.config.queryApplicationUrl}
-                    >
-                      Create an Ad-hoc Query
-                    </MenuContentItem>
-                  </MenuContent>
-                }
-                menuProps={{
-                  anchorOrigin: { vertical: 'bottom', horizontal: 'right' },
-                  transformOrigin: { vertical: 'top', horizontal: 'right' },
-                }}
-              >
-                <div className="service-editor__execution__advanced-btn__label">
-                  <MoreVerticalIcon className="service-editor__execution__advanced-btn__label__icon" />
+              ) : (
+                <>
+                  <button
+                    className="btn__dropdown-combo__label"
+                    onClick={runQuery}
+                    title="Run Query"
+                    disabled={executionIsRunning}
+                    tabIndex={-1}
+                  >
+                    <PlayIcon className="btn__dropdown-combo__label__icon" />
+                    <div className="btn__dropdown-combo__label__title">
+                      Run Query
+                    </div>
+                  </button>
+                  <DropdownMenu
+                    className="btn__dropdown-combo__dropdown-btn"
+                    disabled={executionIsRunning}
+                    content={
+                      <MenuContent>
+                        <MenuContentItem
+                          className="btn__dropdown-combo__option"
+                          onClick={generatePlan}
+                        >
+                          Generate Plan
+                        </MenuContentItem>
+                        <MenuContentItem
+                          className="btn__dropdown-combo__option"
+                          onClick={debugPlanGeneration}
+                        >
+                          Debug
+                        </MenuContentItem>
+                      </MenuContent>
+                    }
+                    menuProps={{
+                      anchorOrigin: { vertical: 'bottom', horizontal: 'right' },
+                      transformOrigin: { vertical: 'top', horizontal: 'right' },
+                    }}
+                  >
+                    <CaretDownIcon />
+                  </DropdownMenu>
+                </>
+              )}
+            </div>
+            <DropdownMenu
+              className="btn__dropdown-combo"
+              disabled={executionIsRunning}
+              content={
+                <MenuContent>
+                  <MenuContentItem
+                    className="btn__dropdown-combo__option"
+                    onClick={importQuery}
+                  >
+                    Import Query
+                  </MenuContentItem>
+                  <MenuContentItem
+                    className="btn__dropdown-combo__option"
+                    onClick={openQueryInLegendQuery}
+                    disabled={!applicationStore.config.queryApplicationUrl}
+                  >
+                    Create an Ad-hoc Query
+                  </MenuContentItem>
+                </MenuContent>
+              }
+              menuProps={{
+                anchorOrigin: { vertical: 'bottom', horizontal: 'right' },
+                transformOrigin: { vertical: 'top', horizontal: 'right' },
+              }}
+            >
+              <div className="btn__dropdown-combo__label">
+                <div className="btn__dropdown-combo__label__title">
                   Advanced
                 </div>
-                <div className="service-editor__execution__advanced-btn__icon">
-                  <CaretDownIcon />
-                </div>
-              </DropdownMenu>
-            </div>
+              </div>
+              <div className="btn__dropdown-combo__dropdown-btn">
+                <CaretDownIcon />
+              </div>
+            </DropdownMenu>
           </div>
         </div>
         <div className="panel__content property-mapping-editor__entry__container">
@@ -417,15 +417,7 @@ export const ServiceExecutionQueryEditor = observer(
               executionState.isOpeningQueryEditor || executionIsRunning
             }
           />
-          <div
-            className="service-execution-query-editor__content"
-            title="Double click to edit in query builder"
-            onDoubleClick={(event) => {
-              event.preventDefault();
-              event.stopPropagation();
-              editWithQueryBuilder()();
-            }}
-          >
+          <div className="service-execution-query-editor__content">
             <CodeEditor
               inputValue={queryState.lambdaString}
               isReadOnly={true}

package/src/components/editor/panel-group/SQLPlaygroundPanel.tsx

@@ -248,6 +248,9 @@ const buildRelationalDatabaseConnectionOption = (
         <div className="sql-playground__config__connection-selector__option__type">
           {connectionValue.type}
         </div>
+        <div className="sql-playground__config__connection-selector__option__path">
+          {connection.path}
+        </div>
       </div>
     ),
   };

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

@@ -14,7 +14,13 @@
  * limitations under the License.
  */
 
-import { Fragment, useRef, useEffect, useState, forwardRef } from 'react';
+import React, {
+  Fragment,
+  useRef,
+  useEffect,
+  useState,
+  forwardRef,
+} from 'react';
 import { observer } from 'mobx-react-lite';
 import {
   type TreeNodeContainerProps,
@@ -61,6 +67,7 @@ import { LEGEND_STUDIO_TEST_ID } from '../../../__lib__/LegendStudioTesting.js';
 import {
   ACTIVITY_MODE,
   GRAPH_EDITOR_MODE,
+  PANEL_MODE,
 } from '../../../stores/editor/EditorConfig.js';
 import { getTreeChildNodes } from '../../../stores/editor/utils/PackageTreeUtils.js';
 import type { PackageTreeNodeData } from '../../../stores/editor/utils/TreeUtils.js';
@@ -76,6 +83,7 @@ import {
 import {
   guaranteeNonEmptyString,
   guaranteeNonNullable,
+  guaranteeType,
   isNonNullable,
   toTitleCase,
 } from '@finos/legend-shared';
@@ -102,6 +110,7 @@ import {
   RelationalDatabaseConnection,
   guaranteeRelationalDatabaseConnection,
   extractDependencyGACoordinateFromRootPackageName,
+  type FunctionActivatorConfiguration,
 } from '@finos/legend-graph';
 import { useApplicationStore } from '@finos/legend-application';
 import {
@@ -125,6 +134,7 @@ import {
   CodeEditor,
 } from '@finos/legend-lego/code-editor';
 import { DatabaseBuilder } from '../editor-group/connection-editor/DatabaseBuilder.js';
+import { FunctionEditorState } from '../../../stores/editor/editor-state/element-editor-state/FunctionEditorState.js';
 
 const ElementRenamer = observer(() => {
   const editorStore = useEditorStore();
@@ -513,6 +523,15 @@ const ExplorerContextMenu = observer(
         }
       },
     );
+    const openSQLPlayground = (): void => {
+      if (isRelationalDatabaseConnection(node?.packageableElement)) {
+        editorStore.panelGroupDisplayState.open();
+        editorStore.setActivePanelMode(PANEL_MODE.SQL_PLAYGROUND);
+        editorStore.sqlPlaygroundState.setConnection(
+          guaranteeType(node?.packageableElement, PackageableConnection),
+        );
+      }
+    };
     const removeElement = (): void => {
       if (node) {
         flowResult(
@@ -663,6 +682,50 @@ const ExplorerContextMenu = observer(
         ).catch(applicationStore.alertUnhandledError);
       }
     };
+    const activateFunction = (): void => {
+      if (node?.packageableElement instanceof ConcreteFunctionDefinition) {
+        editorStore.setQuickInputState({
+          title: 'Activate function',
+          placeholder: 'Select an activation...',
+          options: editorStore.graphState.functionActivatorConfigurations.map(
+            (config) => ({
+              value: config,
+              label: (
+                <div
+                  className="function-editor__activator__selector__option"
+                  title={config.description}
+                >
+                  <div className="function-editor__activator__selector__option__name">
+                    {config.name}
+                  </div>
+                  <div className="function-editor__activator__selector__option__description">
+                    {config.description}
+                  </div>
+                </div>
+              ),
+            }),
+          ),
+          getSearchValue: (option: {
+            value: FunctionActivatorConfiguration;
+            label: React.ReactNode;
+          }): string => option.value.name,
+          onSelect: (option: {
+            value: FunctionActivatorConfiguration;
+            label: React.ReactNode;
+          }) => {
+            editorStore.graphEditorMode.openElement(node.packageableElement);
+            editorStore.tabManagerState
+              .getCurrentEditorState(FunctionEditorState)
+              .activatorBuilderState.setCurrentActivatorConfiguration(
+                option.value,
+              );
+          },
+          customization: {
+            rowHeight: 70,
+          },
+        });
+      }
+    };
 
     if (isDependencyProjectRoot()) {
       return (
@@ -722,8 +785,27 @@ const ExplorerContextMenu = observer(
             <MenuContentDivider />
           </>
         )}
+        {node.packageableElement instanceof ConcreteFunctionDefinition && (
+          <>
+            {editorStore.applicationStore.config.options
+              .TEMPORARY__enableFunctionActivatorSupport && (
+              <>
+                <MenuContentItem onClick={activateFunction}>
+                  Activate...
+                </MenuContentItem>
+                <MenuContentDivider />
+              </>
+            )}
+          </>
+        )}
         {isRelationalDatabaseConnection(node.packageableElement) && (
           <>
+            {editorStore.applicationStore.config.options
+              .TEMPORARY__enableRawSQLExecutor && (
+              <MenuContentItem onClick={openSQLPlayground}>
+                Execute SQL...
+              </MenuContentItem>
+            )}
             <MenuContentItem onClick={buildDatabase}>
               Build Database...
             </MenuContentItem>

package/src/stores/editor/EditorStore.ts

@@ -671,6 +671,9 @@ export class EditorStore implements CommandRegistrar {
         },
         {
           tracerService: this.applicationStore.tracerService,
+          TEMPORARY__enableNewServiceRegistrationInputCollectorMechanism:
+            this.applicationStore.config.options
+              .TEMPORARY__enableNewServiceRegistrationInputCollectorMechanism,
         },
       ),
     ]);

package/src/stores/editor/QuickInputState.ts

@@ -21,4 +21,7 @@ export type QuickInputState<T> = {
   options: QuickInputOption<T>[];
   getSearchValue: (option: QuickInputOption<T>) => string;
   onSelect: (option: QuickInputOption<T>) => void;
+  customization?: {
+    rowHeight?: number | undefined;
+  };
 };

package/src/stores/editor/editor-state/element-editor-state/FunctionEditorState.ts

@@ -21,6 +21,7 @@ import {
   makeObservable,
   flow,
   flowResult,
+  override,
 } from 'mobx';
 import type { EditorStore } from '../../EditorStore.js';
 import {
@@ -50,6 +51,7 @@ import {
   buildLambdaVariableExpressions,
   VariableExpression,
   observe_ValueSpecification,
+  generateFunctionPrettyName,
 } from '@finos/legend-graph';
 import {
   ExecutionPlanState,
@@ -254,13 +256,14 @@ export class FunctionEditorState extends ElementEditorState {
 
     makeObservable(this, {
       selectedTab: observable,
-      functionElement: computed,
-      setSelectedTab: action,
-      reprocess: action,
       isRunningQuery: observable,
       isGeneratingPlan: observable,
       executionResultText: observable,
       executionPlanState: observable,
+      label: override,
+      functionElement: computed,
+      setSelectedTab: action,
+      reprocess: action,
       setExecutionResultText: action,
       setIsRunningQuery: action,
       runQuery: flow,
@@ -287,6 +290,13 @@ export class FunctionEditorState extends ElementEditorState {
     this.parametersState = new FunctionParametersState(this);
   }
 
+  override get label(): string {
+    return generateFunctionPrettyName(this.functionElement, {
+      fullPath: true,
+      spacing: false,
+    });
+  }
+
   get functionElement(): ConcreteFunctionDefinition {
     return guaranteeType(
       this.element,
@@ -512,15 +522,15 @@ export class FunctionEditorState extends ElementEditorState {
         );
       }
     } catch (error) {
-      // When user cancels the query by calling the cancelQuery api, it will throw an exeuction failure error.
+      // When user cancels the query by calling the cancelQuery api, it will throw an execution failure error.
       // For now, we don't want to notify users about this failure. Therefore we check to ensure the promise is still the same one.
       // When cancelled the query, we set the queryRunPromise as undefined.
-      this.editorStore.applicationStore.logService.error(
-        LogEvent.create(GRAPH_MANAGER_EVENT.EXECUTION_FAILURE),
-        error,
-      );
       if (this.queryRunPromise === promise) {
         assertErrorThrown(error);
+        this.editorStore.applicationStore.logService.error(
+          LogEvent.create(GRAPH_MANAGER_EVENT.EXECUTION_FAILURE),
+          error,
+        );
         this.editorStore.applicationStore.notificationService.notifyError(
           error,
         );

package/src/stores/editor/editor-state/element-editor-state/mapping/DEPRECATED__MappingTestState.ts

@@ -476,6 +476,7 @@ export class DEPRECATED__MappingTestState extends MappingEditorTabState {
   get label(): string {
     return this.test.name;
   }
+
   setIsRunningTest(val: boolean): void {
     this.isRunningTest = val;
   }
@@ -703,75 +704,6 @@ export class DEPRECATED__MappingTestState extends MappingEditorTabState {
     }
   }
 
-  *runTest(): GeneratorFn<void> {
-    if (DEPRECATED__validate_MappingTest(this.test)) {
-      this.editorStore.applicationStore.notificationService.notifyError(
-        `Can't run test '${this.test.name}'. Please make sure that the test is valid`,
-      );
-      return;
-    } else if (this.isExecutingTest) {
-      this.editorStore.applicationStore.notificationService.notifyWarning(
-        `Test '${this.test.name}' is already running`,
-      );
-      return;
-    }
-    const startTime = Date.now();
-    let promise;
-    try {
-      const runtime = this.inputDataState.runtime;
-      this.isRunningTest = true;
-      promise = this.editorStore.graphManagerState.graphManager.runQuery(
-        this.test.query,
-        this.mappingEditorState.mapping,
-        runtime,
-        this.editorStore.graphManagerState.graph,
-        {
-          useLosslessParse: true,
-        },
-      );
-      this.setTestRunPromise(promise);
-      const result = (yield promise) as ExecutionResult;
-      if (this.testRunPromise === promise) {
-        this.handleResult(result);
-      }
-    } catch (error) {
-      // When user cancels the query by calling the cancelQuery api, it will throw an exeuction failure error.
-      // For now, we don't want to notify users about this failure. Therefore we check to ensure the promise is still the same one.
-      // When cancelled the query, we set the queryRunPromise as undefined.
-      if (this.testRunPromise === promise) {
-        assertErrorThrown(error);
-        this.handleError(error, promise);
-      }
-    } finally {
-      this.isRunningTest = false;
-      this.runTime = Date.now() - startTime;
-      // if the test is currently opened and ran but did not pass, switch to the result tab
-      if (
-        [TEST_RESULT.FAILED, TEST_RESULT.ERROR].includes(this.result) &&
-        this.testRunPromise === promise &&
-        this.mappingEditorState.currentTabState === this
-      ) {
-        this.setSelectedTab(MAPPING_TEST_EDITOR_TAB_TYPE.RESULT);
-      }
-    }
-  }
-
-  *cancelTest(): GeneratorFn<void> {
-    this.setIsRunningTest(false);
-    this.setTestRunPromise(undefined);
-    try {
-      yield this.editorStore.graphManagerState.graphManager.cancelUserExecutions(
-        true,
-      );
-    } catch (error) {
-      // don't notify users about success or failure
-      this.editorStore.applicationStore.logService.error(
-        LogEvent.create(GRAPH_MANAGER_EVENT.EXECUTION_FAILURE),
-        error,
-      );
-    }
-  }
-
   handleResult(result: ExecutionResult): void {
     this.testExecutionResultText = stringifyLosslessJSON(
       extractExecutionResultValues(result),
@@ -843,6 +775,75 @@ export class DEPRECATED__MappingTestState extends MappingEditorTabState {
     );
   }
 
+  *runTest(): GeneratorFn<void> {
+    if (DEPRECATED__validate_MappingTest(this.test)) {
+      this.editorStore.applicationStore.notificationService.notifyError(
+        `Can't run test '${this.test.name}'. Please make sure that the test is valid`,
+      );
+      return;
+    } else if (this.isExecutingTest) {
+      this.editorStore.applicationStore.notificationService.notifyWarning(
+        `Test '${this.test.name}' is already running`,
+      );
+      return;
+    }
+    const startTime = Date.now();
+    let promise;
+    try {
+      const runtime = this.inputDataState.runtime;
+      this.isRunningTest = true;
+      promise = this.editorStore.graphManagerState.graphManager.runQuery(
+        this.test.query,
+        this.mappingEditorState.mapping,
+        runtime,
+        this.editorStore.graphManagerState.graph,
+        {
+          useLosslessParse: true,
+        },
+      );
+      this.setTestRunPromise(promise);
+      const result = (yield promise) as ExecutionResult;
+      if (this.testRunPromise === promise) {
+        this.handleResult(result);
+      }
+    } catch (error) {
+      // When user cancels the query by calling the cancelQuery api, it will throw an execution failure error.
+      // For now, we don't want to notify users about this failure. Therefore we check to ensure the promise is still the same one.
+      // When cancelled the query, we set the queryRunPromise as undefined.
+      if (this.testRunPromise === promise) {
+        assertErrorThrown(error);
+        this.handleError(error, promise);
+      }
+    } finally {
+      this.isRunningTest = false;
+      this.runTime = Date.now() - startTime;
+      // if the test is currently opened and ran but did not pass, switch to the result tab
+      if (
+        [TEST_RESULT.FAILED, TEST_RESULT.ERROR].includes(this.result) &&
+        this.testRunPromise === promise &&
+        this.mappingEditorState.currentTabState === this
+      ) {
+        this.setSelectedTab(MAPPING_TEST_EDITOR_TAB_TYPE.RESULT);
+      }
+    }
+  }
+
+  *cancelTest(): GeneratorFn<void> {
+    this.setIsRunningTest(false);
+    this.setTestRunPromise(undefined);
+    try {
+      yield this.editorStore.graphManagerState.graphManager.cancelUserExecutions(
+        true,
+      );
+    } catch (error) {
+      // don't notify users about success or failure
+      this.editorStore.applicationStore.logService.error(
+        LogEvent.create(GRAPH_MANAGER_EVENT.EXECUTION_FAILURE),
+        error,
+      );
+    }
+  }
+
   *generatePlan(debug: boolean): GeneratorFn<void> {
     try {
       this.isGeneratingPlan = true;