@finos/legend-application-studio 27.1.10 → 28.0.0

package/src/components/ShowcaseManager.tsx

@@ -0,0 +1,298 @@
+/**
+ * Copyright (c) 2020-present, Goldman Sachs
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { useApplicationStore } from '@finos/legend-application';
+import { observer } from 'mobx-react-lite';
+import {
+  BlankPanelContent,
+  Panel,
+  PanelLoadingIndicator,
+  TreeView,
+  type TreeNodeContainerProps,
+  ChevronDownIcon,
+  ChevronRightIcon,
+  GenericTextFileIcon,
+  FolderIcon,
+  FolderOpenIcon,
+  HomeIcon,
+} from '@finos/legend-art';
+import {
+  SHOWCASE_MANAGER_VIEW,
+  ShowcaseManagerState,
+  type ShowcasesExplorerTreeNodeData,
+} from '../stores/ShowcaseManagerState.js';
+import { isNonNullable } from '@finos/legend-shared';
+import { flowResult } from 'mobx';
+import type { Showcase } from '@finos/legend-server-showcase';
+import {
+  CODE_EDITOR_LANGUAGE,
+  CodeEditor,
+} from '@finos/legend-lego/code-editor';
+
+const ShowcasesExplorerTreeNodeContainer = observer(
+  (
+    props: TreeNodeContainerProps<
+      ShowcasesExplorerTreeNodeData,
+      {
+        showcaseManagerState: ShowcaseManagerState;
+        toggleExpandNode: (node: ShowcasesExplorerTreeNodeData) => void;
+      }
+    >,
+  ) => {
+    const { node, level, innerProps } = props;
+    const { toggleExpandNode, showcaseManagerState } = innerProps;
+    const applicationStore = useApplicationStore();
+
+    const expandIcon = !node.metadata ? (
+      node.isOpen ? (
+        <ChevronDownIcon />
+      ) : (
+        <ChevronRightIcon />
+      )
+    ) : (
+      <div />
+    );
+    const nodeIcon = !node.metadata ? (
+      node.isOpen ? (
+        <FolderOpenIcon />
+      ) : (
+        <FolderIcon />
+      )
+    ) : (
+      <GenericTextFileIcon />
+    );
+    const onNodeClick = (): void => {
+      if (!node.metadata) {
+        toggleExpandNode(node);
+      } else {
+        flowResult(showcaseManagerState.openShowcase(node.metadata)).catch(
+          applicationStore.alertUnhandledError,
+        );
+      }
+    };
+
+    return (
+      <div
+        className="tree-view__node__container showcase-manager__explorer__node__container"
+        style={{
+          paddingLeft: `${(level - 1) * 1.4}rem`,
+          display: 'flex',
+        }}
+        onClick={onNodeClick}
+      >
+        <div className="showcase-manager__explorer__node__expand-icon">
+          {expandIcon}
+        </div>
+        <div className="showcase-manager__explorer__node__type-icon">
+          {nodeIcon}
+        </div>
+        <div
+          className="tree-view__node__label showcase-manager__explorer__node__label"
+          title={
+            node.metadata
+              ? `${
+                  node.metadata.description
+                    ? `${node.metadata.description}\n\n`
+                    : ''
+                }Click to open showcase`
+              : undefined
+          }
+        >
+          {node.label}
+        </div>
+      </div>
+    );
+  },
+);
+
+const ShowcaseManagerExplorer = observer(
+  (props: { showcaseManagerState: ShowcaseManagerState }) => {
+    const { showcaseManagerState } = props;
+    const treeData = showcaseManagerState.explorerTreeData;
+    const getChildNodes = (
+      node: ShowcasesExplorerTreeNodeData,
+    ): ShowcasesExplorerTreeNodeData[] => {
+      if (treeData) {
+        return node.childrenIds
+          .map((id) => treeData.nodes.get(id))
+          .filter(isNonNullable)
+          .sort((a, b) => a.label.localeCompare(b.label));
+      }
+      return [];
+    };
+    const toggleExpandNode = (node: ShowcasesExplorerTreeNodeData): void => {
+      if (treeData) {
+        node.isOpen = !node.isOpen;
+        showcaseManagerState.setExplorerTreeData({ ...treeData });
+      }
+    };
+
+    return (
+      <div className="showcase-manager__view">
+        <div className="showcase-manager__view__header">
+          <div className="showcase-manager__view__breadcrumbs">
+            <div className="showcase-manager__view__breadcrumb">
+              <div className="showcase-manager__view__breadcrumb__icon">
+                <HomeIcon />
+              </div>
+              <div className="showcase-manager__view__breadcrumb__text">
+                Showcaces
+              </div>
+            </div>
+            <div className="showcase-manager__view__breadcrumb__arrow">
+              <ChevronRightIcon />
+            </div>
+            <div className="showcase-manager__view__breadcrumb">
+              <div className="showcase-manager__view__breadcrumb__text">
+                Explorer
+              </div>
+            </div>
+          </div>
+        </div>
+        <div className="showcase-manager__view__content">
+          {showcaseManagerState.explorerTreeData && (
+            <TreeView
+              components={{
+                TreeNodeContainer: ShowcasesExplorerTreeNodeContainer,
+              }}
+              treeData={showcaseManagerState.explorerTreeData}
+              getChildNodes={getChildNodes}
+              innerProps={{
+                toggleExpandNode,
+                showcaseManagerState,
+              }}
+            />
+          )}
+        </div>
+      </div>
+    );
+  },
+);
+
+const ShowcaseViewer = observer(
+  (props: {
+    showcaseManagerState: ShowcaseManagerState;
+    showcase: Showcase;
+  }) => {
+    const { showcaseManagerState, showcase } = props;
+    const prettyPath = showcase.path.replaceAll(/\s*\/\s*/g, ' / ');
+
+    return (
+      <div className="showcase-manager__view">
+        <div className="showcase-manager__view__header">
+          <div className="showcase-manager__view__breadcrumbs">
+            <div
+              className="showcase-manager__view__breadcrumb"
+              onClick={() => {
+                showcaseManagerState.closeShowcase();
+                showcaseManagerState.setCurrentView(
+                  SHOWCASE_MANAGER_VIEW.EXPLORER,
+                );
+              }}
+            >
+              <div className="showcase-manager__view__breadcrumb__icon">
+                <HomeIcon />
+              </div>
+              <div className="showcase-manager__view__breadcrumb__text">
+                Showcaces
+              </div>
+            </div>
+            <div className="showcase-manager__view__breadcrumb__arrow">
+              <ChevronRightIcon />
+            </div>
+            <div className="showcase-manager__view__breadcrumb">
+              <div className="showcase-manager__view__breadcrumb__icon">
+                <GenericTextFileIcon />
+              </div>
+              <div className="showcase-manager__view__breadcrumb__text">
+                {showcase.title}
+              </div>
+            </div>
+          </div>
+        </div>
+        <div className="showcase-manager__view__content showcase-manager__viewer__content">
+          <div className="showcase-manager__viewer__title">
+            {showcase.title}
+          </div>
+          <div className="showcase-manager__viewer__path">{prettyPath}</div>
+          <div className="showcase-manager__viewer__code">
+            <CodeEditor
+              language={CODE_EDITOR_LANGUAGE.PURE}
+              inputValue={showcase.code}
+              isReadOnly={true}
+            />
+          </div>
+        </div>
+      </div>
+    );
+  },
+);
+
+const ShowcaseManagerContent = observer(
+  (props: { showcaseManagerState: ShowcaseManagerState }) => {
+    const { showcaseManagerState } = props;
+    const currentShowcase = showcaseManagerState.currentShowcase;
+    const currentView = showcaseManagerState.currentView;
+
+    return (
+      <div className="showcase-manager">
+        {currentShowcase && (
+          <ShowcaseViewer
+            showcaseManagerState={showcaseManagerState}
+            showcase={currentShowcase}
+          />
+        )}
+        {!currentShowcase && (
+          <>
+            {currentView === SHOWCASE_MANAGER_VIEW.EXPLORER && (
+              <ShowcaseManagerExplorer
+                showcaseManagerState={showcaseManagerState}
+              />
+            )}
+            {currentView === SHOWCASE_MANAGER_VIEW.SEARCH && <>TODO: Search</>}
+          </>
+        )}
+      </div>
+    );
+  },
+);
+
+export const ShowcaseManager = observer(() => {
+  const applicationStore = useApplicationStore();
+  const showcaseManagerState =
+    ShowcaseManagerState.retrieveNullableState(applicationStore);
+
+  if (!showcaseManagerState) {
+    return null;
+  }
+
+  return (
+    <Panel>
+      <PanelLoadingIndicator
+        isLoading={showcaseManagerState.initState.isInProgress}
+      />
+      {showcaseManagerState.initState.isInProgress && (
+        <BlankPanelContent>Initializing...</BlankPanelContent>
+      )}
+      {showcaseManagerState.initState.hasFailed && (
+        <BlankPanelContent>Failed to initialize</BlankPanelContent>
+      )}
+      {showcaseManagerState.initState.hasSucceeded && (
+        <ShowcaseManagerContent showcaseManagerState={showcaseManagerState} />
+      )}
+    </Panel>
+  );
+});

package/src/components/editor/ActivityBar.tsx

@@ -47,6 +47,8 @@ import {
   ActivityBarItemExperimentalBadge,
   type ActivityBarItemConfig,
 } from '@finos/legend-lego/application';
+import { ShowcaseManagerState } from '../../stores/ShowcaseManagerState.js';
+import { SHOWCASE_MANAGER_VIRTUAL_ASSISTANT_TAB_KEY } from '../extensions/Core_LegendStudioApplicationPlugin.js';
 
 const SettingsMenu = observer(
   forwardRef<HTMLDivElement, unknown>(function SettingsMenu(props, ref) {
@@ -98,6 +100,19 @@ export const ActivityBarMenu: React.FC = () => {
       VIRTUAL_ASSISTANT_TAB.SEARCH,
     );
   };
+  // showcases
+  const showcaseManagerState =
+    ShowcaseManagerState.retrieveNullableState(applicationStore);
+  const openShowcaseManager = (): void => {
+    if (showcaseManagerState?.isEnabled) {
+      applicationStore.assistantService.setIsHidden(false);
+      applicationStore.assistantService.setIsOpen(true);
+      applicationStore.assistantService.setIsPanelMaximized(true);
+      applicationStore.assistantService.setSelectedTab(
+        SHOWCASE_MANAGER_VIRTUAL_ASSISTANT_TAB_KEY,
+      );
+    }
+  };
 
   return (
     <>
@@ -112,7 +127,11 @@ export const ActivityBarMenu: React.FC = () => {
           content={
             <MenuContent>
               <MenuContentItem onClick={showAppInfo}>About</MenuContentItem>
-              <MenuContentItem onClick={openHelp}>Help...</MenuContentItem>
+              {showcaseManagerState?.isEnabled && (
+                <MenuContentItem onClick={openShowcaseManager}>
+                  See Showcases
+                </MenuContentItem>
+              )}
               <MenuContentItem
                 disabled={!appDocUrl}
                 onClick={goToDocumentation}
@@ -127,6 +146,7 @@ export const ActivityBarMenu: React.FC = () => {
                   {entry.label}
                 </MenuContentItem>
               ))}
+              <MenuContentItem onClick={openHelp}>Help...</MenuContentItem>
               <MenuContentDivider />
               <MenuContentItem onClick={goToWorkspaceSetup}>
                 Back to workspace setup

package/src/components/editor/Editor.tsx

@@ -50,7 +50,7 @@ import { useParams } from '@finos/legend-application/browser';
 import { WorkspaceType } from '@finos/legend-server-sdlc';
 import { WorkspaceSyncConflictResolver } from './side-bar/WorkspaceSyncConflictResolver.js';
 import { LEGEND_STUDIO_APPLICATION_NAVIGATION_CONTEXT_KEY } from '../../__lib__/LegendStudioApplicationNavigationContext.js';
-import { EmbeddedQueryBuilder } from '../EmbeddedQueryBuilder.js';
+import { EmbeddedQueryBuilder } from './EmbeddedQueryBuilder.js';
 import { GRAPH_EDITOR_MODE } from '../../stores/editor/EditorConfig.js';
 import { QuickInput } from './QuickInput.js';
 

package/src/components/{EmbeddedQueryBuilder.tsx → editor/EmbeddedQueryBuilder.tsx}

@@ -34,9 +34,9 @@ import {
   QueryBuilder,
   type QueryBuilderState,
 } from '@finos/legend-query-builder';
-import { LEGEND_STUDIO_APPLICATION_NAVIGATION_CONTEXT_KEY } from '../__lib__/LegendStudioApplicationNavigationContext.js';
-import { useEditorStore } from './editor/EditorStoreProvider.js';
-import type { EmbeddedQueryBuilderState } from '../stores/editor/EmbeddedQueryBuilderState.js';
+import { LEGEND_STUDIO_APPLICATION_NAVIGATION_CONTEXT_KEY } from '../../__lib__/LegendStudioApplicationNavigationContext.js';
+import { useEditorStore } from './EditorStoreProvider.js';
+import type { EmbeddedQueryBuilderState } from '../../stores/editor/EmbeddedQueryBuilderState.js';
 
 /**
  * NOTE: Query builder is by right a mini-app so we have it hosted in a full-screen modal dialog
@@ -94,6 +94,7 @@ const QueryBuilderDialog = observer(
                 className="query-builder__dialog__header__action"
                 tabIndex={-1}
                 onClick={toggleMaximize}
+                title={isMaximized ? 'Minimize' : 'Maximize'}
               >
                 {isMaximized ? (
                   <EmptyWindowRestoreIcon />
@@ -105,6 +106,7 @@ const QueryBuilderDialog = observer(
                 className="query-builder__dialog__header__action"
                 tabIndex={-1}
                 onClick={confirmCloseQueryBuilder}
+                title="Close"
               >
                 <TimesIcon />
               </button>

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

@@ -65,7 +65,7 @@ import {
   createMemoryHistory,
   TEST__BrowserEnvironmentProvider,
 } from '@finos/legend-application/test';
-import type { LegendStudioApplicationStore } from '../../../stores/LegendStudioBaseStore.js';
+import { type LegendStudioApplicationStore } from '../../../stores/LegendStudioBaseStore.js';
 import { TEST__getLegendStudioApplicationConfig } from '../../../stores/__test-utils__/LegendStudioApplicationTestUtils.js';
 import { Route } from '@finos/legend-application/browser';
 
@@ -153,7 +153,7 @@ export const TEST__provideMockedEditorStore = (customization?: {
       new SDLCServerClient({
         env: applicationStore.config.env,
         serverUrl: applicationStore.config.sdlcServerUrl,
-        baseHeaders: applicationStore.config.SDLCServerBaseHeaders,
+        baseHeaders: applicationStore.config.sdlcServerBaseHeaders,
       }),
       new DepotServerClient({
         serverUrl: applicationStore.config.depotServerUrl,

package/src/components/editor/editor-group/element-generation-editor/ElementXTGenerationEditor.tsx

@@ -79,7 +79,7 @@ export const ExternalFormatGeneratioConfigEditor = observer(
       debouncedRegenerate()?.catch(applicationStore.alertUnhandledError);
     };
 
-    const getConfigValue = (name: string): unknown | undefined =>
+    const getConfigValue = (name: string): unknown =>
       xtState.xtGenerationState.configSpecification.configurationProperties.find(
         (e) => e.name === name,
       )?.value;

package/src/components/editor/editor-group/element-generation-editor/FileGenerationEditor.tsx

@@ -319,7 +319,7 @@ const GenerationStringPropertyEditor = observer(
     property: GenerationProperty;
     isReadOnly: boolean;
     update: (property: GenerationProperty, newValue: PlainObject) => void;
-    getConfigValue: (name: string) => unknown | undefined;
+    getConfigValue: (name: string) => unknown;
   }) => {
     const { property, getConfigValue, isReadOnly, update } = props;
     // If there is no default value the string will be 'null'. We will treat it as an empty string
@@ -354,7 +354,7 @@ const GenerationIntegerPropertyEditor = observer(
     property: GenerationProperty;
     isReadOnly: boolean;
     update: (property: GenerationProperty, newValue: PlainObject) => void;
-    getConfigValue: (name: string) => unknown | undefined;
+    getConfigValue: (name: string) => unknown;
   }) => {
     const { property, getConfigValue, isReadOnly, update } = props;
     const defaultValue = JSON.parse(property.defaultValue) as
@@ -390,7 +390,7 @@ const GenerationBooleanPropertyEditor = observer(
     property: GenerationProperty;
     isReadOnly: boolean;
     update: (property: GenerationProperty, newValue: PlainObject) => void;
-    getConfigValue: (name: string) => unknown | undefined;
+    getConfigValue: (name: string) => unknown;
   }) => {
     const { property, getConfigValue, isReadOnly, update } = props;
     const defaultValue = JSON.parse(property.defaultValue) as
@@ -417,7 +417,7 @@ const GenerationEnumPropertyEditor = observer(
     property: GenerationProperty;
     isReadOnly: boolean;
     update: (property: GenerationProperty, newValue: PlainObject) => void;
-    getConfigValue: (name: string) => unknown | undefined;
+    getConfigValue: (name: string) => unknown;
   }) => {
     const { property, getConfigValue, isReadOnly, update } = props;
     const getEnumLabel = (_enum: string): string =>
@@ -464,7 +464,7 @@ const GenerationArrayPropertyEditor = observer(
     property: GenerationProperty;
     isReadOnly: boolean;
     update: (property: GenerationProperty, newValue: object) => void;
-    getConfigValue: (name: string) => unknown | undefined;
+    getConfigValue: (name: string) => unknown;
   }) => {
     const { property, getConfigValue, isReadOnly, update } = props;
     let defaultValue: string[] = [];
@@ -654,7 +654,7 @@ const GenerationMapPropertyEditor = observer(
     property: GenerationProperty;
     isReadOnly: boolean;
     update: (property: GenerationProperty, newValue: object) => void;
-    getConfigValue: (name: string) => unknown | undefined;
+    getConfigValue: (name: string) => unknown;
   }) => {
     const { property, getConfigValue, isReadOnly, update } = props;
     // Right now, always assume this is a map between STRING and STRING (might need to support STRING - INTEGER and STRING - BOOLEAN)
@@ -884,7 +884,7 @@ const GenerationMapPropertyEditor = observer(
 export const GenerationPropertyEditor = observer(
   (props: {
     property: GenerationProperty;
-    getConfigValue: (name: string) => unknown | undefined;
+    getConfigValue: (name: string) => unknown;
     isReadOnly: boolean;
     update: (property: GenerationProperty, newValue: object) => void;
   }) => {
@@ -1039,7 +1039,7 @@ export const FileGenerationConfigurationEditor = observer(
       [handleDrop],
     );
 
-    const getConfigValue = (name: string): unknown | undefined =>
+    const getConfigValue = (name: string): unknown =>
       getNullableFileGenerationConfig(fileGeneration, name)?.value;
 
     return (

package/src/components/editor/editor-group/external-format-editor/DSL_ExternalFormat_SchemaSetModelGenerationEditor.tsx

@@ -77,7 +77,7 @@ export const SchemaSetModelGenerationEditor = observer(
     const resetProperties = (): void => {
       modelGenerationState.setConfigurationProperty([]);
     };
-    const getConfigValue = (name: string): unknown | undefined =>
+    const getConfigValue = (name: string): unknown =>
       modelGenerationState.getConfigValue(name);
     const targetBindingPathValidationMessage =
       Boolean(modelGenerationState.targetBinding) &&

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

@@ -118,7 +118,7 @@ export const InstanceSetImplementationSourceExplorer = observer(
     const [
       sourceElementForSourceSelectorModal,
       setSourceElementForSourceSelectorModal,
-    ] = useState<MappingElementSource | undefined | null>();
+    ] = useState<MappingElementSource>();
     const CHANGING_SOURCE_ON_EMBEDDED =
       'Changing source on mapping with embedded children will delete all its children';
     const showSourceSelectorModal = (): void => {

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

@@ -70,9 +70,7 @@ export interface MappingElementSourceSelectOption {
   value: unknown;
 }
 
-export const getSourceElementLabel = (
-  srcElement: unknown | undefined,
-): string => {
+export const getSourceElementLabel = (srcElement: unknown): string => {
   let sourceLabel = '(none)';
   if (srcElement instanceof Class) {
     sourceLabel = srcElement.name;
@@ -90,7 +88,7 @@ export const getSourceElementLabel = (
 
 // TODO: add more visual cue to the type of source (class vs. flat-data vs. db)
 export const buildMappingElementSourceOption = (
-  source: MappingElementSource | undefined,
+  source: MappingElementSource,
 ): MappingElementSourceSelectOption | null => {
   if (source instanceof Class) {
     return buildElementOption(source) as MappingElementSourceSelectOption;
@@ -120,7 +118,7 @@ export const InstanceSetImplementationSourceSelectorModal = observer(
      * Pass in `null` when we want to open the modal using the existing source.
      * Pass any other to open the source modal using that value as the initial state of the modal.
      */
-    sourceElementToSelect: MappingElementSource | null;
+    sourceElementToSelect: MappingElementSource;
     closeModal: () => void;
   }) => {
     const {

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

@@ -662,13 +662,11 @@ export const ProjectConfigurationEditor = observer(() => {
             const dependencyToAdd = new ProjectDependency(
               projectToAdd.coordinates,
             );
-            const versions = (await flowResult(
-              editorStore.depotServerClient.getVersions(
-                projectToAdd.groupId,
-                projectToAdd.artifactId,
-                true,
-              ),
-            )) as string[];
+            const versions = await editorStore.depotServerClient.getVersions(
+              projectToAdd.groupId,
+              projectToAdd.artifactId,
+              true,
+            );
             configState.versions.set(dependencyToAdd.projectId, versions);
             dependencyToAdd.setVersionId(versions[0] ?? '');
             currentProjectConfiguration.addProjectDependency(dependencyToAdd);

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

@@ -785,17 +785,15 @@ const ProjectVersionDependencyEditor = observer(
         if (val) {
           try {
             fetchSelectedProjectVersionsStatus.inProgress();
-            const v = (await flowResult(
-              editorStore.depotServerClient.getVersions(
-                guaranteeNonNullable(projectDependency.groupId),
-                guaranteeNonNullable(projectDependency.artifactId),
-                true,
-              ),
-            )) as string[];
-            configState.versions.set(val.value.coordinates, v);
-            if (v.length) {
+            const _versions = await editorStore.depotServerClient.getVersions(
+              guaranteeNonNullable(projectDependency.groupId),
+              guaranteeNonNullable(projectDependency.artifactId),
+              true,
+            );
+            configState.versions.set(val.value.coordinates, _versions);
+            if (_versions.length) {
               projectDependency.setVersionId(
-                guaranteeNonNullable(v[v.length - 1]),
+                guaranteeNonNullable(_versions[_versions.length - 1]),
               );
               flowResult(dependencyEditorState.fetchDependencyReport()).catch(
                 applicationStore.alertUnhandledError,

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

@@ -435,7 +435,9 @@ export const GlobalTestRunner = observer(
 
     const extractTestRunnerTabConfigurations = editorStore.pluginManager
       .getApplicationPlugins()
-      .flatMap((plugin) => plugin.getExtraTestRunnerTabConfigurations?.() ?? [])
+      .flatMap(
+        (plugin) => plugin.getExtraTestRunnerViewConfigurations?.() ?? [],
+      )
       .filter((configuration) => configuration.renderer(editorStore));
 
     const testRunnerTabs = (Object.values(TEST_RUNNER_TABS) as string[])

package/src/components/extensions/Core_LegendStudioApplicationPlugin.tsx

@@ -22,6 +22,8 @@ import {
   type SettingConfigurationEntry,
   collectSettingConfigurationEntriesFromConfig,
   type LegendApplicationSetup,
+  type VirtualAssistantViewConfiguration,
+  type ApplicationExtensionStateBuilder,
 } from '@finos/legend-application';
 import packageJson from '../../../package.json' assert { type: 'json' };
 import { LEGEND_STUDIO_APPLICATION_NAVIGATION_CONTEXT_KEY } from '../../__lib__/LegendStudioApplicationNavigationContext.js';
@@ -40,6 +42,12 @@ import {
   setupPureLanguageService,
 } from '@finos/legend-lego/code-editor';
 import { STO_RELATIONAL_LEGEND_STUDIO_COMMAND_CONFIG } from '../../__lib__/STO_Relational_LegendStudioCommand.js';
+import { ShowcaseManager } from '../ShowcaseManager.js';
+import { CabinetIcon } from '@finos/legend-art';
+import { ShowcaseManagerState } from '../../stores/ShowcaseManagerState.js';
+import type { LegendStudioApplicationStore } from '../../stores/LegendStudioBaseStore.js';
+
+export const SHOWCASE_MANAGER_VIRTUAL_ASSISTANT_TAB_KEY = 'showcase-manager';
 
 export class Core_LegendStudioApplicationPlugin extends LegendStudioApplicationPlugin {
   static NAME = packageJson.extensions.applicationStudioPlugin;
@@ -48,6 +56,15 @@ export class Core_LegendStudioApplicationPlugin extends LegendStudioApplicationP
     super(Core_LegendStudioApplicationPlugin.NAME, packageJson.version);
   }
 
+  override getExtraApplicationExtensionStateBuilders(): ApplicationExtensionStateBuilder[] {
+    return [
+      (applicationStore) =>
+        new ShowcaseManagerState(
+          applicationStore as LegendStudioApplicationStore,
+        ),
+    ];
+  }
+
   override getExtraApplicationSetups(): LegendApplicationSetup[] {
     return [
       async (applicationStore) => {
@@ -151,4 +168,16 @@ export class Core_LegendStudioApplicationPlugin extends LegendStudioApplicationP
       LEGEND_STUDIO_SETTING_CONFIG,
     );
   }
+
+  override getExtraVirtualAssistantViewConfigurations(): VirtualAssistantViewConfiguration[] {
+    return [
+      {
+        key: SHOWCASE_MANAGER_VIRTUAL_ASSISTANT_TAB_KEY,
+        title: 'Showcases',
+        icon: <CabinetIcon />,
+        autoExpandOnOpen: true,
+        renderer: () => <ShowcaseManager />,
+      },
+    ];
+  }
 }

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

@@ -62,7 +62,7 @@ import {
   useLegendStudioApplicationStore,
   useLegendStudioBaseStore,
 } from '../LegendStudioFrameworkProvider.js';
-import { EmbeddedQueryBuilder } from '../EmbeddedQueryBuilder.js';
+import { EmbeddedQueryBuilder } from '../editor/EmbeddedQueryBuilder.js';
 import type { ActivityBarItemConfig } from '@finos/legend-lego/application';
 import { ActivityBarMenu } from '../editor/ActivityBar.js';
 

package/src/index.ts

@@ -29,7 +29,7 @@ export {
   useLegendStudioApplicationStore,
   useLegendStudioBaseStore,
 } from './components/LegendStudioFrameworkProvider.js';
-export type { LegendStudioApplicationStore } from './stores/LegendStudioBaseStore.js';
+export { type LegendStudioApplicationStore } from './stores/LegendStudioBaseStore.js';
 
 // stores
 export * from './stores/LegendStudioApplicationPlugin.js';