@finos/legend-application-studio 28.17.16 → 28.17.18

package/lib/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@finos/legend-application-studio",
-    "version": "28.17.16",
+    "version": "28.17.18",
     "description": "Legend Studio application core",
     "keywords": [
         "legend",
@@ -55,12 +55,12 @@
         "@finos/legend-server-showcase": "workspace:*",
         "@finos/legend-shared": "workspace:*",
         "@finos/legend-storage": "workspace:*",
-        "@testing-library/dom": "10.2.0",
+        "@testing-library/dom": "10.3.1",
         "@testing-library/react": "16.0.0",
         "@types/react": "18.3.3",
         "@types/react-dom": "18.3.0",
         "fast-xml-parser": "4.4.0",
-        "mobx": "6.12.4",
+        "mobx": "6.13.0",
         "mobx-react-lite": "4.0.7",
         "mobx-utils": "6.0.8",
         "monaco-editor": "0.50.0",
@@ -78,9 +78,9 @@
         "eslint": "8.57.0",
         "jest": "29.7.0",
         "npm-run-all": "4.1.5",
-        "rimraf": "5.0.7",
+        "rimraf": "5.0.8",
         "sass": "1.77.6",
-        "typescript": "5.5.2"
+        "typescript": "5.5.3"
     },
     "peerDependencies": {
         "react": "^18.0.0"

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@finos/legend-application-studio",
-  "version": "28.17.16",
+  "version": "28.17.18",
   "description": "Legend Studio application core",
   "keywords": [
     "legend",
@@ -45,22 +45,22 @@
     "test:watch": "jest --watch"
   },
   "dependencies": {
-    "@finos/legend-application": "15.1.12",
-    "@finos/legend-art": "7.1.40",
-    "@finos/legend-graph": "31.10.7",
-    "@finos/legend-lego": "1.2.43",
-    "@finos/legend-query-builder": "4.14.55",
-    "@finos/legend-server-depot": "6.0.47",
-    "@finos/legend-server-sdlc": "5.3.18",
-    "@finos/legend-server-showcase": "0.2.15",
-    "@finos/legend-shared": "10.0.42",
-    "@finos/legend-storage": "3.0.92",
-    "@testing-library/dom": "10.2.0",
+    "@finos/legend-application": "15.1.14",
+    "@finos/legend-art": "7.1.42",
+    "@finos/legend-graph": "31.10.9",
+    "@finos/legend-lego": "1.2.45",
+    "@finos/legend-query-builder": "4.14.57",
+    "@finos/legend-server-depot": "6.0.49",
+    "@finos/legend-server-sdlc": "5.3.20",
+    "@finos/legend-server-showcase": "0.2.17",
+    "@finos/legend-shared": "10.0.44",
+    "@finos/legend-storage": "3.0.94",
+    "@testing-library/dom": "10.3.1",
     "@testing-library/react": "16.0.0",
     "@types/react": "18.3.3",
     "@types/react-dom": "18.3.0",
     "fast-xml-parser": "4.4.0",
-    "mobx": "6.12.4",
+    "mobx": "6.13.0",
     "mobx-react-lite": "4.0.7",
     "mobx-utils": "6.0.8",
     "monaco-editor": "0.50.0",
@@ -72,15 +72,15 @@
     "yaml": "2.4.5"
   },
   "devDependencies": {
-    "@finos/legend-dev-utils": "2.1.10",
+    "@finos/legend-dev-utils": "2.1.12",
     "@jest/globals": "29.7.0",
     "cross-env": "7.0.3",
     "eslint": "8.57.0",
     "jest": "29.7.0",
     "npm-run-all": "4.1.5",
-    "rimraf": "5.0.7",
+    "rimraf": "5.0.8",
     "sass": "1.77.6",
-    "typescript": "5.5.2"
+    "typescript": "5.5.3"
   },
   "peerDependencies": {
     "react": "^18.0.0"

package/src/components/editor/ActivityBar.tsx

@@ -24,7 +24,7 @@ import {
 import { LEGEND_STUDIO_TEST_ID } from '../../__lib__/LegendStudioTesting.js';
 import {
   clsx,
-  DropdownMenu,
+  ControlledDropdownMenu,
   RepoIcon,
   MenuContent,
   MenuContentItem,
@@ -115,7 +115,7 @@ export const ActivityBarMenu: React.FC = () => {
   return (
     <>
       <div className="activity-bar__menu">
-        <DropdownMenu
+        <ControlledDropdownMenu
           className="activity-bar__menu-item"
           menuProps={{
             anchorOrigin: { vertical: 'top', horizontal: 'right' },
@@ -155,7 +155,7 @@ export const ActivityBarMenu: React.FC = () => {
           }
         >
           <MenuIcon />
-        </DropdownMenu>
+        </ControlledDropdownMenu>
       </div>
       <LegendStudioAppInfo open={openAppInfo} closeModal={hideAppInfo} />
     </>
@@ -431,7 +431,7 @@ export const ActivityBar = observer(() => {
       >
         <ReadMeIcon />
       </button>
-      <DropdownMenu
+      <ControlledDropdownMenu
         className="activity-bar__item"
         title="Settings"
         content={<SettingsMenu />}
@@ -442,7 +442,7 @@ export const ActivityBar = observer(() => {
         }}
       >
         <CogIcon />
-      </DropdownMenu>
+      </ControlledDropdownMenu>
     </div>
   );
 });

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

@@ -19,7 +19,7 @@ import { observer } from 'mobx-react-lite';
 import {
   type SelectComponent,
   compareLabelFn,
-  DropdownMenu,
+  ControlledDropdownMenu,
   NonBlockingDialog,
   createFilter,
   CustomSelectorInput,
@@ -106,7 +106,7 @@ export const ProjectSearchCommand = observer(() => {
         className="search-modal"
       >
         <div className="project-search-command">
-          <DropdownMenu
+          <ControlledDropdownMenu
             className="project-search-command__type"
             title="Choose Element Type..."
             content={
@@ -139,7 +139,7 @@ export const ProjectSearchCommand = observer(() => {
             <div className="project-search-command__type__selector">
               <CaretDownIcon />
             </div>
-          </DropdownMenu>
+          </ControlledDropdownMenu>
           <CustomSelectorInput
             ref={selectorRef}
             className="project-search-command__input"

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

@@ -18,7 +18,7 @@ import { useEffect, useState } from 'react';
 import { observer } from 'mobx-react-lite';
 import {
   clsx,
-  DropdownMenu,
+  ControlledDropdownMenu,
   MenuContent,
   MenuContentItem,
   PlusIcon,
@@ -469,7 +469,7 @@ export const EditorGroup = observer(() => {
         </div>
         <div className="editor-group__header__actions">
           {currentTabState instanceof ElementEditorState && (
-            <DropdownMenu
+            <ControlledDropdownMenu
               className="editor-group__view-mode__type"
               title="View as..."
               content={
@@ -565,10 +565,10 @@ export const EditorGroup = observer(() => {
                 {currentTabState.generationModeState?.label ??
                   currentTabState.editMode}
               </div>
-            </DropdownMenu>
+            </ControlledDropdownMenu>
           )}
           {currentTabState instanceof EntityDiffViewState && (
-            <DropdownMenu
+            <ControlledDropdownMenu
               className="editor-group__view-mode__type"
               title="View as..."
               content={
@@ -604,7 +604,7 @@ export const EditorGroup = observer(() => {
               <div className="editor-group__view-mode__type__label">
                 {currentTabState.diffMode}
               </div>
-            </DropdownMenu>
+            </ControlledDropdownMenu>
           )}
         </div>
       </div>

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

@@ -30,7 +30,7 @@ import {
   MenuContentItem,
   PanelLoadingIndicator,
   CaretDownIcon,
-  DropdownMenu,
+  ControlledDropdownMenu,
   MenuContentItemIcon,
   CheckIcon,
   MenuContentItemLabel,
@@ -1251,7 +1251,7 @@ export const GrammarTextEditor = observer(() => {
             </button>
           </div>
           <div className="query-builder__header__actions">
-            <DropdownMenu
+            <ControlledDropdownMenu
               className="query-builder__header__advanced-dropdown"
               title="Show Advanced Menu..."
               content={
@@ -1284,7 +1284,7 @@ export const GrammarTextEditor = observer(() => {
                 Advanced
               </div>
               <CaretDownIcon className="query-builder__header__advanced-dropdown__icon" />
-            </DropdownMenu>
+            </ControlledDropdownMenu>
           </div>
         </div>
       </div>

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

@@ -25,7 +25,7 @@ import {
 } from '../../../stores/editor/editor-state/ModelImporterState.js';
 import { prettyCONSTName } from '@finos/legend-shared';
 import {
-  DropdownMenu,
+  ControlledDropdownMenu,
   MenuContent,
   MenuContentItem,
   CaretDownIcon,
@@ -230,7 +230,7 @@ export const ModelImporter = observer(() => {
     <Panel className="model-loader">
       <PanelHeader className="model-loader__header">
         <div className="model-loader__header__configs">
-          <DropdownMenu
+          <ControlledDropdownMenu
             className="model-loader__header__configs__type"
             content={
               <MenuContent className="model-loader__header__configs__type__menu">
@@ -317,7 +317,7 @@ export const ModelImporter = observer(() => {
             <div className="model-loader__header__configs__type__icon">
               <CaretDownIcon />
             </div>
-          </DropdownMenu>
+          </ControlledDropdownMenu>
           {modelImportEditorState.allowHardReplace && (
             <div
               className="model-loader__header__configs__edit-mode"

package/src/components/editor/editor-group/connection-editor/RelationalDatabaseConnectionEditor.tsx

@@ -35,7 +35,7 @@ import {
   MenuContent,
   MenuContentItem,
   PanelListSelectorItem,
-  DropdownMenu,
+  ControlledDropdownMenu,
   PanelTabs,
   BlankPanelContent,
   ResizablePanelSplitterLine,
@@ -1345,7 +1345,7 @@ const PostProcessorRelationalConnectionEditor = observer(
                   <Panel>
                     <PanelHeader title="post-processor">
                       <PanelHeaderActions>
-                        <DropdownMenu
+                        <ControlledDropdownMenu
                           title="Create post-processor"
                           className="panel__header__action"
                           disabled={isReadOnly}
@@ -1374,7 +1374,7 @@ const PostProcessorRelationalConnectionEditor = observer(
                           }}
                         >
                           <PlusIcon />
-                        </DropdownMenu>
+                        </ControlledDropdownMenu>
                       </PanelHeaderActions>
                     </PanelHeader>
                     <PanelContent>

package/src/components/editor/editor-group/connection-editor/post-processor-editor/MapperPostProcessorEditor.tsx

@@ -24,7 +24,7 @@ import {
   ContextMenu,
   MenuContent,
   MenuContentItem,
-  DropdownMenu,
+  ControlledDropdownMenu,
   PanelListSelectorItem,
   BlankPanelContent,
   ResizablePanelSplitterLine,
@@ -137,7 +137,7 @@ export const MapperPostProcessorEditor = observer(
               <Panel>
                 <PanelHeader title="mapper">
                   <PanelHeaderActions>
-                    <DropdownMenu
+                    <ControlledDropdownMenu
                       title="Create mapper"
                       className="panel__header__action"
                       disabled={isReadOnly}
@@ -164,7 +164,7 @@ export const MapperPostProcessorEditor = observer(
                       }}
                     >
                       <PlusIcon />
-                    </DropdownMenu>
+                    </ControlledDropdownMenu>
                   </PanelHeaderActions>
                 </PanelHeader>
                 <PanelContent>

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

@@ -24,7 +24,7 @@ import {
 import {
   CaretDownIcon,
   clsx,
-  DropdownMenu,
+  ControlledDropdownMenu,
   InfoCircleIcon,
   LockIcon,
   MenuContent,
@@ -123,7 +123,7 @@ export const ExternalFormatDataEditor = observer(
             </div>
           </div>
           <div className="external-format-data-editor__header__actions">
-            <DropdownMenu
+            <ControlledDropdownMenu
               className="external-format-data-editor__type"
               disabled={isReadOnly}
               content={
@@ -150,7 +150,7 @@ export const ExternalFormatDataEditor = observer(
               <div className="external-format-data-editor__type__icon">
                 <CaretDownIcon />
               </div>
-            </DropdownMenu>
+            </ControlledDropdownMenu>
           </div>
         </div>
         <div className={clsx('external-format-data-editor__content')}>

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

@@ -21,7 +21,7 @@ import {
   CaretDownIcon,
   clsx,
   CustomSelectorInput,
-  DropdownMenu,
+  ControlledDropdownMenu,
   LockIcon,
   LongArrowRightIcon,
   MenuContent,
@@ -122,7 +122,7 @@ export const ExternalFormatDataEditor = observer(
             >
               <WrenchIcon />
             </button>
-            <DropdownMenu
+            <ControlledDropdownMenu
               className="external-format-data-editor__type"
               disabled={isReadOnly}
               content={
@@ -149,7 +149,7 @@ export const ExternalFormatDataEditor = observer(
               <div className="external-format-data-editor__type__icon">
                 <CaretDownIcon />
               </div>
-            </DropdownMenu>
+            </ControlledDropdownMenu>
           </div>
         </div>
         <PanelContent className="model-loader__editor">

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

@@ -51,7 +51,7 @@ import {
   ModalBody,
   ModalFooter,
   CaretDownIcon,
-  DropdownMenu,
+  ControlledDropdownMenu,
   BlankPanelContent,
   MenuContent,
   MenuContentItem,
@@ -1377,7 +1377,7 @@ export const FunctionEditor = observer(() => {
                           Run
                         </div>
                       </button>
-                      <DropdownMenu
+                      <ControlledDropdownMenu
                         className="btn__dropdown-combo__dropdown-btn"
                         disabled={executionIsRunning}
                         content={
@@ -1408,7 +1408,7 @@ export const FunctionEditor = observer(() => {
                         }}
                       >
                         <CaretDownIcon />
-                      </DropdownMenu>
+                      </ControlledDropdownMenu>
                     </>
                   )}
                 </div>

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

@@ -31,7 +31,7 @@ import {
   FlaskIcon,
   ResizablePanelSplitterLine,
   compareLabelFn,
-  DropdownMenu,
+  ControlledDropdownMenu,
   MenuContent,
   MenuContentItem,
   CaretDownIcon,
@@ -560,7 +560,7 @@ const RelationalMappingExecutionInputDataTypeSelector = observer(
       };
 
     return (
-      <DropdownMenu
+      <ControlledDropdownMenu
         className="mapping-execution-builder__input-data-panel__type-selector"
         title="Choose input data type..."
         content={
@@ -583,7 +583,7 @@ const RelationalMappingExecutionInputDataTypeSelector = observer(
           </div>
           <CaretDownIcon />
         </div>
-      </DropdownMenu>
+      </ControlledDropdownMenu>
     );
   },
 );
@@ -819,7 +819,7 @@ export const MappingExecutionBuilder = observer(
                       Run Query
                     </div>
                   </button>
-                  <DropdownMenu
+                  <ControlledDropdownMenu
                     className="btn__dropdown-combo__dropdown-btn"
                     disabled={
                       isStubbed_RawLambda(queryState.query) ||
@@ -849,7 +849,7 @@ export const MappingExecutionBuilder = observer(
                     }}
                   >
                     <CaretDownIcon />
-                  </DropdownMenu>
+                  </ControlledDropdownMenu>
                 </>
               )}
             </div>

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

@@ -42,7 +42,7 @@ import {
   compareLabelFn,
   CustomSelectorInput,
   Dialog,
-  DropdownMenu,
+  ControlledDropdownMenu,
   MenuContent,
   MenuContentItem,
   Modal,
@@ -704,7 +704,7 @@ const MappingTestSuiteQueryEditor = observer(
                   Edit Query
                 </div>
               </button>
-              <DropdownMenu
+              <ControlledDropdownMenu
                 className="btn__dropdown-combo__dropdown-btn"
                 content={
                   <MenuContent>
@@ -728,7 +728,7 @@ const MappingTestSuiteQueryEditor = observer(
                 }}
               >
                 <CaretDownIcon />
-              </DropdownMenu>
+              </ControlledDropdownMenu>
             </div>
           </div>
         </div>

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

@@ -34,7 +34,7 @@ import {
   ResizablePanel,
   ResizablePanelSplitter,
   ResizablePanelSplitterLine,
-  DropdownMenu,
+  ControlledDropdownMenu,
   MenuContent,
   MenuContentItem,
   CaretDownIcon,
@@ -274,7 +274,7 @@ const MappingTestQueryEditor = observer(
                   Edit Query
                 </div>
               </button>
-              <DropdownMenu
+              <ControlledDropdownMenu
                 className="btn__dropdown-combo__dropdown-btn"
                 content={
                   <MenuContent>
@@ -298,7 +298,7 @@ const MappingTestQueryEditor = observer(
                 }}
               >
                 <CaretDownIcon />
-              </DropdownMenu>
+              </ControlledDropdownMenu>
             </div>
           </div>
         </div>
@@ -434,7 +434,7 @@ const RelationalMappingTestInputDataTypeSelector = observer(
         relationalInputData_setInputType(inputDataState.inputData, val);
       };
     return (
-      <DropdownMenu
+      <ControlledDropdownMenu
         className="mapping-test-editor__input-data-panel__type-selector"
         title="Choose input data type..."
         disabled={isReadOnly}
@@ -458,7 +458,7 @@ const RelationalMappingTestInputDataTypeSelector = observer(
           </div>
           <CaretDownIcon />
         </div>
-      </DropdownMenu>
+      </ControlledDropdownMenu>
     );
   },
 );
@@ -814,7 +814,7 @@ export const DEPRECATED__MappingTestEditor = observer(
                       Run Test
                     </div>
                   </button>
-                  <DropdownMenu
+                  <ControlledDropdownMenu
                     className="btn__dropdown-combo__dropdown-btn"
                     disabled={
                       testState.isExecutingTest || testState.isGeneratingPlan
@@ -841,7 +841,7 @@ export const DEPRECATED__MappingTestEditor = observer(
                     }}
                   >
                     <CaretDownIcon />
-                  </DropdownMenu>
+                  </ControlledDropdownMenu>
                 </>
               )}
             </div>

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

@@ -27,7 +27,7 @@ import {
   CustomSelectorInput,
   TimesIcon,
   Dialog,
-  DropdownMenu,
+  ControlledDropdownMenu,
   CaretDownIcon,
   MenuContentItem,
   MenuContent,
@@ -932,7 +932,7 @@ const ProjectVersionDependencyEditor = observer(
             !applicationStore.layoutService.TEMPORARY__isLightColorThemeEnabled
           }
         />
-        <DropdownMenu
+        <ControlledDropdownMenu
           className="project-dependency-editor__visit-project-btn__dropdown-trigger btn--medium"
           content={
             <MenuContent>
@@ -958,7 +958,7 @@ const ProjectVersionDependencyEditor = observer(
           }
         >
           Go to... <CaretDownIcon title="Show more options..." />
-        </DropdownMenu>
+        </ControlledDropdownMenu>
 
         <button
           className="project-dependency-editor__remove-btn btn--dark btn--caution"

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

@@ -21,7 +21,7 @@ import {
   Dialog,
   PanelLoadingIndicator,
   PlayIcon,
-  DropdownMenu,
+  ControlledDropdownMenu,
   MenuContent,
   CaretDownIcon,
   MenuContentItem,
@@ -318,7 +318,7 @@ export const ServiceExecutionQueryEditor = observer(
                   Edit Query
                 </div>
               </button>
-              <DropdownMenu
+              <ControlledDropdownMenu
                 className="btn__dropdown-combo__dropdown-btn"
                 content={
                   <MenuContent>
@@ -336,7 +336,7 @@ export const ServiceExecutionQueryEditor = observer(
                 }}
               >
                 <CaretDownIcon />
-              </DropdownMenu>
+              </ControlledDropdownMenu>
             </div>
             <div className="btn__dropdown-combo btn__dropdown-combo--primary">
               {executionState.isRunningQuery ? (
@@ -366,7 +366,7 @@ export const ServiceExecutionQueryEditor = observer(
                       Run Query
                     </div>
                   </button>
-                  <DropdownMenu
+                  <ControlledDropdownMenu
                     className="btn__dropdown-combo__dropdown-btn"
                     disabled={executionIsRunning}
                     content={
@@ -391,11 +391,11 @@ export const ServiceExecutionQueryEditor = observer(
                     }}
                   >
                     <CaretDownIcon />
-                  </DropdownMenu>
+                  </ControlledDropdownMenu>
                 </>
               )}
             </div>
-            <DropdownMenu
+            <ControlledDropdownMenu
               className="btn__dropdown-combo"
               disabled={executionIsRunning}
               content={
@@ -428,7 +428,7 @@ export const ServiceExecutionQueryEditor = observer(
               <div className="btn__dropdown-combo__dropdown-btn">
                 <CaretDownIcon />
               </div>
-            </DropdownMenu>
+            </ControlledDropdownMenu>
           </div>
         </div>
         <div className="panel__content property-mapping-editor__entry__container">

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

@@ -21,7 +21,7 @@ import {
   ContextMenu,
   CustomSelectorInput,
   Dialog,
-  DropdownMenu,
+  ControlledDropdownMenu,
   InfoCircleIcon,
   MaskIcon,
   MenuContent,
@@ -549,7 +549,7 @@ export const ConnectionTestDataEditor = observer(
                   Generate
                 </div>
               </button>
-              <DropdownMenu
+              <ControlledDropdownMenu
                 className="btn__dropdown-combo__dropdown-btn"
                 content={
                   <MenuContent>
@@ -581,7 +581,7 @@ export const ConnectionTestDataEditor = observer(
                 }}
               >
                 <CaretDownIcon />
-              </DropdownMenu>
+              </ControlledDropdownMenu>
             </div>
             <button
               className="panel__header__action service-execution-editor__test-data__generate-btn"