@finos/legend-application-studio 26.1.10 → 26.1.11

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@finos/legend-application-studio",
-  "version": "26.1.10",
+  "version": "26.1.11",
   "description": "Legend Studio application core",
   "keywords": [
     "legend",
@@ -45,15 +45,15 @@
     "test:watch": "jest --watch"
   },
   "dependencies": {
-    "@finos/legend-application": "15.0.22",
-    "@finos/legend-art": "7.0.22",
-    "@finos/legend-graph": "30.0.7",
-    "@finos/legend-lego": "1.0.20",
-    "@finos/legend-query-builder": "4.0.11",
-    "@finos/legend-server-depot": "6.0.14",
-    "@finos/legend-server-sdlc": "5.0.15",
-    "@finos/legend-shared": "10.0.13",
-    "@finos/legend-storage": "3.0.63",
+    "@finos/legend-application": "15.0.23",
+    "@finos/legend-art": "7.0.23",
+    "@finos/legend-graph": "30.0.8",
+    "@finos/legend-lego": "1.0.21",
+    "@finos/legend-query-builder": "4.0.12",
+    "@finos/legend-server-depot": "6.0.15",
+    "@finos/legend-server-sdlc": "5.0.16",
+    "@finos/legend-shared": "10.0.14",
+    "@finos/legend-storage": "3.0.64",
     "@testing-library/react": "14.0.0",
     "@types/react": "18.2.12",
     "@types/react-dom": "18.2.5",
@@ -70,14 +70,14 @@
     "yaml": "2.3.1"
   },
   "devDependencies": {
-    "@finos/legend-dev-utils": "2.0.67",
+    "@finos/legend-dev-utils": "2.0.68",
     "@jest/globals": "29.5.0",
     "cross-env": "7.0.3",
     "eslint": "8.42.0",
     "jest": "29.5.0",
     "npm-run-all": "4.1.5",
     "rimraf": "5.0.1",
-    "sass": "1.63.3",
+    "sass": "1.63.4",
     "typescript": "5.1.3"
   },
   "peerDependencies": {

package/src/application/LegendStudioApplicationConfig.ts

@@ -80,6 +80,11 @@ class LegendStudioApplicationCoreOptions {
    */
   TEMPORARY__enableRawSQLExecutor = false;
 
+  /**
+   * This flag can be removed when the support the new service registration input collector mechanism is official
+   */
+  TEMPORARY__enableNewServiceRegistrationInputCollectorMechanism = false;
+
   /**
    * Indicates whether we should render the new mapping testable editor or the deprecated legacy editor.
    * This flag will be removed once the editor for testable editor is agreed on.

package/src/components/editor/QuickInput.tsx

@@ -34,7 +34,8 @@ function QuickInputDialog<T>(props: {
 }): React.ReactElement {
   const { quickInputState } = props;
   const editorStore = useEditorStore();
-  const { placeholder, options, getSearchValue, onSelect } = quickInputState;
+  const { placeholder, options, getSearchValue, onSelect, customization } =
+    quickInputState;
   const inputRef = useRef<SelectComponent>(null);
   const close = (): void => editorStore.setQuickInputState(undefined);
 
@@ -75,6 +76,9 @@ function QuickInputDialog<T>(props: {
             escapeClearsValue={true}
             darkMode={true}
             menuIsOpen={true}
+            optionCustomization={{
+              rowHeight: customization?.rowHeight,
+            }}
           />
         </div>
       </Modal>

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

@@ -1082,66 +1082,78 @@ 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">
+            <div className="btn__dropdown-combo btn__dropdown-combo--primary">
+              {functionEditorState.isRunningQuery ? (
                 <button
-                  className="function-editor__execution__action-btn__label"
-                  onClick={runQuery}
-                  title="Run Query"
-                  disabled={executionIsRunning}
+                  className="btn__dropdown-combo__canceler"
+                  onClick={cancelQuery}
                   tabIndex={-1}
                 >
-                  <PlayIcon className="function-editor__execution__action-btn__label__icon" />
-                  <div className="function-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="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>
-            )}
+              ) : (
+                <>
+                  <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>
             {editorStore.applicationStore.config.options
               .TEMPORARY__enableFunctionActivatorSupport && (
               <>
                 <DropdownMenu
-                  className="function-editor__activate-btn"
+                  className="btn__dropdown-combo"
+                  disabled={
+                    !editorStore.graphState.functionActivatorConfigurations
+                      .length
+                  }
                   content={
                     <MenuContent>
                       {editorStore.graphState.functionActivatorConfigurations.map(
@@ -1172,15 +1184,15 @@ export const FunctionEditor = observer(() => {
                     transformOrigin: { vertical: 'top', horizontal: 'right' },
                   }}
                 >
-                  <div className="function-editor__activate-btn__label">
-                    <div className="function-editor__activate-btn__label__icon">
+                  <div className="btn__dropdown-combo__label">
+                    <div className="btn__dropdown-combo__label__icon">
                       <LaunchIcon />
                     </div>
-                    <div className="function-editor__activate-btn__label__title">
+                    <div className="btn__dropdown-combo__label__title">
                       Activate
                     </div>
                   </div>
-                  <div className="function-editor__activate-btn__dropdown-btn">
+                  <div className="btn__dropdown-combo__dropdown-btn">
                     <CaretDownIcon />
                   </div>
                 </DropdownMenu>

package/src/components/editor/editor-group/data-editor/RelationalCSVDataEditor.tsx

@@ -160,6 +160,7 @@ const ImportModal = observer(
             <textarea
               className="relational-data-editor__import__textarea"
               spellCheck={false}
+              placeholder="CSV Text"
               value={csv}
               onChange={changeCSV}
               disabled={isReadOnly}

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

@@ -260,30 +260,30 @@ const MappingTestQueryEditor = observer(
             <div className="panel__header__title__label">query</div>
           </div>
           <div className="panel__header__actions">
-            <div className="mapping-test-editor__action-btn">
+            <div className="btn__dropdown-combo">
               <button
-                className="mapping-test-editor__action-btn__label"
+                className="btn__dropdown-combo__label"
                 onClick={editWithQueryBuilder()}
                 title="Edit Query"
                 tabIndex={-1}
               >
-                <PencilIcon className="mapping-test-editor__action-btn__label__icon" />
-                <div className="mapping-test-editor__action-btn__label__title">
+                <PencilIcon className="btn__dropdown-combo__label__icon" />
+                <div className="btn__dropdown-combo__label__title">
                   Edit Query
                 </div>
               </button>
               <DropdownMenu
-                className="mapping-test-editor__action-btn__dropdown-btn"
+                className="btn__dropdown-combo__dropdown-btn"
                 content={
                   <MenuContent>
                     <MenuContentItem
-                      className="mapping-test-editor__action-btn__option"
+                      className="btn__dropdown-combo__option"
                       onClick={editWithQueryBuilder(true)}
                     >
                       Text Mode
                     </MenuContentItem>
                     <MenuContentItem
-                      className="mapping-test-editor__action-btn__option"
+                      className="btn__dropdown-combo__option"
                       onClick={clearQuery}
                     >
                       Clear Query
@@ -302,15 +302,7 @@ const MappingTestQueryEditor = observer(
         </div>
         {!isStubbed_RawLambda(queryState.query) && (
           <PanelContent>
-            <div
-              className="mapping-test-editor__query-panel__query"
-              title="Double click to edit in query builder"
-              onDoubleClick={(event) => {
-                event.preventDefault();
-                event.stopPropagation();
-                editWithQueryBuilder()();
-              }}
-            >
+            <div className="mapping-test-editor__query-panel__query">
               <CodeEditor
                 inputValue={queryState.lambdaString}
                 isReadOnly={true}
@@ -791,64 +783,66 @@ export const DEPRECATED__MappingTestEditor = observer(
             ))}
           </div>
           <div className="panel__header__actions mapping-test-editor__header__actions">
-            {testState.isRunningTest ? (
-              <button
-                className="mapping-test-editor__stop-btn"
-                onClick={cancelTest}
-                tabIndex={-1}
-              >
-                <div className="btn--dark btn--caution mapping-test-editor__stop-btn__label">
-                  <PauseCircleIcon className="mapping-test-editor__stop-btn__label__icon" />
-                  <div className="mapping-test-editor__stop-btn__label__title">
-                    Stop
-                  </div>
-                </div>
-              </button>
-            ) : (
-              <div className="mapping-test-editor__action-btn">
+            <div className="mapping-test-editor__action-btn btn__dropdown-combo btn__dropdown-combo--primary">
+              {testState.isRunningTest ? (
                 <button
-                  className="mapping-test-editor__action-btn__label"
-                  onClick={runTest}
-                  disabled={
-                    testState.isExecutingTest || testState.isGeneratingPlan
-                  }
+                  className="btn__dropdown-combo__canceler"
+                  onClick={cancelTest}
                   tabIndex={-1}
                 >
-                  <PlayIcon className="mapping-test-editor__action-btn__label__icon" />
-                  <div className="mapping-test-editor__action-btn__label__title">
-                    Run Test
+                  <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="mapping-test-editor__action-btn__dropdown-btn"
-                  disabled={
-                    testState.isExecutingTest || testState.isGeneratingPlan
-                  }
-                  content={
-                    <MenuContent>
-                      <MenuContentItem
-                        className="mapping-test-editor__action-btn__option"
-                        onClick={generatePlan}
-                      >
-                        Generate Plan
-                      </MenuContentItem>
-                      <MenuContentItem
-                        className="mapping-test-editor__action-btn__option"
-                        onClick={debugPlanGeneration}
-                      >
-                        Debug
-                      </MenuContentItem>
-                    </MenuContent>
-                  }
-                  menuProps={{
-                    anchorOrigin: { vertical: 'bottom', horizontal: 'right' },
-                    transformOrigin: { vertical: 'top', horizontal: 'right' },
-                  }}
-                >
-                  <CaretDownIcon />
-                </DropdownMenu>
-              </div>
-            )}
+              ) : (
+                <>
+                  <button
+                    className="btn__dropdown-combo__label"
+                    onClick={runTest}
+                    disabled={
+                      testState.isExecutingTest || testState.isGeneratingPlan
+                    }
+                    tabIndex={-1}
+                  >
+                    <PlayIcon className="btn__dropdown-combo__label__icon" />
+                    <div className="btn__dropdown-combo__label__title">
+                      Run Test
+                    </div>
+                  </button>
+                  <DropdownMenu
+                    className="btn__dropdown-combo__dropdown-btn"
+                    disabled={
+                      testState.isExecutingTest || testState.isGeneratingPlan
+                    }
+                    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>
           </div>
         </div>
         <div className="mapping-test-editor__content">

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

@@ -419,7 +419,7 @@ const MappingFilterEditor = observer(
               isReadOnly ||
               instanceSetImplementationState.isConvertingTransformLambdaObjects
             }
-            forceBackdrop={!!filterState.parserError}
+            forceBackdrop={Boolean(filterState.parserError)}
             lambdaEditorState={filterState}
             expectedType={PrimitiveType.BOOLEAN}
           />

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

@@ -47,6 +47,7 @@ import {
   PanelHeader,
   PanelHeaderActions,
   Panel,
+  PauseCircleIcon,
 } from '@finos/legend-art';
 import { observer } from 'mobx-react-lite';
 import {
@@ -721,6 +722,9 @@ export const MappingExecutionBuilder = observer(
     const applicationStore = useApplicationStore();
     const { queryState, inputDataState } = executionState;
     // execute
+    const cancelExecution = applicationStore.guardUnhandledError(() =>
+      flowResult(executionState.cancelExecution()),
+    );
     const generatePlan = applicationStore.guardUnhandledError(() =>
       flowResult(executionState.generatePlan(false)),
     );
@@ -780,54 +784,71 @@ export const MappingExecutionBuilder = observer(
                 <FlaskIcon />
               </button>
             )}
-            <div className="mapping-execution-builder__action-btn">
-              <button
-                className="mapping-execution-builder__action-btn__label"
-                onClick={execute}
-                disabled={
-                  isStubbed_RawLambda(queryState.query) ||
-                  !inputDataState.isValid ||
-                  executionState.isGeneratingPlan ||
-                  executionState.isExecuting
-                }
-                tabIndex={-1}
-              >
-                <PlayIcon className="mapping-execution-builder__action-btn__label__icon" />
-                <div className="mapping-execution-builder__action-btn__label__title">
-                  Run Query
-                </div>
-              </button>
-              <DropdownMenu
-                className="mapping-execution-builder__action-btn__dropdown-btn"
-                disabled={
-                  isStubbed_RawLambda(queryState.query) ||
-                  !inputDataState.isValid ||
-                  executionState.isGeneratingPlan ||
-                  executionState.isExecuting
-                }
-                content={
-                  <MenuContent>
-                    <MenuContentItem
-                      className="mapping-execution-builder__action-btn__option"
-                      onClick={generatePlan}
-                    >
-                      Generate Plan
-                    </MenuContentItem>
-                    <MenuContentItem
-                      className="mapping-execution-builder__action-btn__option"
-                      onClick={debugPlanGeneration}
-                    >
-                      Debug
-                    </MenuContentItem>
-                  </MenuContent>
-                }
-                menuProps={{
-                  anchorOrigin: { vertical: 'bottom', horizontal: 'right' },
-                  transformOrigin: { vertical: 'top', horizontal: 'right' },
-                }}
-              >
-                <CaretDownIcon />
-              </DropdownMenu>
+            <div className="mapping-execution-builder__action-btn btn__dropdown-combo btn__dropdown-combo--primary">
+              {executionState.isExecuting ? (
+                <button
+                  className="btn__dropdown-combo__canceler"
+                  onClick={cancelExecution}
+                  tabIndex={-1}
+                >
+                  <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>
+              ) : (
+                <>
+                  <button
+                    className="btn__dropdown-combo__label"
+                    onClick={execute}
+                    disabled={
+                      isStubbed_RawLambda(queryState.query) ||
+                      !inputDataState.isValid ||
+                      executionState.isGeneratingPlan ||
+                      executionState.isExecuting
+                    }
+                    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={
+                      isStubbed_RawLambda(queryState.query) ||
+                      !inputDataState.isValid ||
+                      executionState.isGeneratingPlan ||
+                      executionState.isExecuting
+                    }
+                    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>
           </div>
         </div>

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

@@ -168,7 +168,7 @@ export const MappingExplorerContextMenu = observer(
 
     const allowRemoveFilter =
       mappingElement instanceof PureInstanceSetImplementation &&
-      !!mappingElement.filter;
+      Boolean(mappingElement.filter);
 
     return (
       <MenuContent ref={ref}>
@@ -390,7 +390,7 @@ const MappingElementTreeNodeContainer = observer(
               {getMappingElementLabel(mappingElement, editorStore).value}
             </div>
             {mappingElement instanceof PureInstanceSetImplementation &&
-              !!mappingElement.filter && (
+              Boolean(mappingElement.filter) && (
                 <div className="mapping-explorer__item__label__filter-icon">
                   <FilterIcon />
                 </div>

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

@@ -62,6 +62,7 @@ import {
   PanelLoadingIndicator,
   ContextMenu,
   ModalHeader,
+  PanelFormSection,
 } from '@finos/legend-art';
 import {
   assertErrorThrown,
@@ -225,12 +226,15 @@ const CreateTestSuiteModal = observer(
           </ModalHeader>
           <ModalBody>
             <PanelLoadingIndicator
+              className="panel-loading-indicator--in__modal"
               isLoading={creatorState.isCreatingSuiteState.isInProgress}
             />
             {creatorState.isCreatingSuiteState.message && (
-              <div className="service-registration-editor__progress-msg">
-                {`${creatorState.isCreatingSuiteState.message}...`}
-              </div>
+              <PanelFormSection>
+                <div className="service-registration-editor__progress-msg">
+                  {`${creatorState.isCreatingSuiteState.message}...`}
+                </div>
+              </PanelFormSection>
             )}
             <PanelFormTextField
               ref={inputRef}
@@ -746,15 +750,7 @@ const MappingTestableQueryEditor = observer(
         </div>
         {!isStubbed_RawLambda(queryState.query) && (
           <PanelContent>
-            <div
-              className="mapping-test-editor__query-panel__query"
-              title="Double click to edit in query builder"
-              onDoubleClick={(event) => {
-                event.preventDefault();
-                event.stopPropagation();
-                editWithQueryBuilder()();
-              }}
-            >
+            <div className="mapping-test-editor__query-panel__query">
               <CodeEditor
                 inputValue={queryState.lambdaString}
                 isReadOnly={true}