@finos/legend-application-studio 28.18.26 → 28.18.27

package/src/components/editor/Editor.tsx

@@ -34,6 +34,7 @@ import {
 import { GrammarTextEditor } from './editor-group/GrammarTextEditor.js';
 import { StatusBar } from './StatusBar.js';
 import { ActivityBar } from './ActivityBar.js';
+import { ShowcaseSideBar } from './ShowcaseSideBar.js';
 import type { WorkspaceEditorPathParams } from '../../__lib__/LegendStudioNavigation.js';
 import { ProjectSearchCommand } from '../editor/command-center/ProjectSearchCommand.js';
 import { guaranteeNonNullable, isNonNullable } from '@finos/legend-shared';
@@ -53,6 +54,7 @@ import { LEGEND_STUDIO_APPLICATION_NAVIGATION_CONTEXT_KEY } from '../../__lib__/
 import { EmbeddedQueryBuilder } from './EmbeddedQueryBuilder.js';
 import { GRAPH_EDITOR_MODE } from '../../stores/editor/EditorConfig.js';
 import { QuickInput } from './QuickInput.js';
+import { ShowcaseManager } from '../ShowcaseManager.js';
 
 export const Editor = withEditorStore(
   observer(() => {
@@ -118,6 +120,22 @@ export const Editor = withEditorStore(
     const maximizedCollapsiblePanelGroupProps = getCollapsiblePanelGroupProps(
       editorStore.panelGroupDisplayState.isMaximized,
     );
+    // handle resizing showcase sidebar
+    const showcaseResizeSideBar = (
+      handleProps: ResizablePanelHandlerProps,
+    ): void =>
+      editorStore.showcasePanelDisplayState.setSize(
+        (handleProps.domElement as HTMLDivElement).getBoundingClientRect()
+          .width,
+      );
+
+    const showcaseCollapsibleSideBarGroupProps = getCollapsiblePanelGroupProps(
+      editorStore.showcasePanelDisplayState.size === 0,
+      {
+        onStopResize: showcaseResizeSideBar,
+        size: editorStore.showcasePanelDisplayState.size,
+      },
+    );
 
     useEffect(() => {
       if (ref.current) {
@@ -193,7 +211,6 @@ export const Editor = withEditorStore(
 
     // Cleanup the editor
     useEffect(() => (): void => editorStore.cleanUp(), [editorStore]);
-
     return (
       <div className="app__page">
         <div className="editor">
@@ -210,7 +227,10 @@ export const Editor = withEditorStore(
                   </ResizablePanel>
                   <ResizablePanelSplitter />
                   <ResizablePanel
-                    {...collapsibleSideBarGroupProps.remainingPanel}
+                    {...(!editorStore.sideBarDisplayState.isOpen &&
+                    !editorStore.showcasePanelDisplayState.isOpen
+                      ? { flex: 1 }
+                      : {})}
                     minSize={300}
                   >
                     <ResizablePanelGroup orientation="horizontal">
@@ -250,9 +270,19 @@ export const Editor = withEditorStore(
                       </ResizablePanel>
                     </ResizablePanelGroup>
                   </ResizablePanel>
+                  <ResizablePanelSplitter />
+                  <ResizablePanel
+                    {...showcaseCollapsibleSideBarGroupProps.collapsiblePanel}
+                    direction={-1}
+                  >
+                    <div className="panel__content explorer__content__container">
+                      <ShowcaseManager />
+                    </div>
+                  </ResizablePanel>
                 </ResizablePanelGroup>
               </div>
             </div>
+            <ShowcaseSideBar />
           </div>
           <QuickInput />
           <StatusBar actionsDisabled={!editable} />

package/src/components/editor/ShowcaseSideBar.tsx

@@ -0,0 +1,66 @@
+/**
+ * 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 { observer } from 'mobx-react-lite';
+import {
+  MenuContentDivider,
+  DoubleArrowLeft,
+  DoubleArrowRight,
+} from '@finos/legend-art';
+import { useEditorStore } from './EditorStoreProvider.js';
+import type { EditorStore } from '../../stores/editor/EditorStore.js';
+
+export enum SHOWCASE_PANEL_LOCAL_STORAGE {
+  PANEL_STATE_KEY = 'ShowShowcasePanel',
+}
+
+export const toggleShowcasePanel = (editorStore: EditorStore) => {
+  editorStore.showcasePanelDisplayState.toggle();
+  editorStore.applicationStore.userDataService.persistValue(
+    SHOWCASE_PANEL_LOCAL_STORAGE.PANEL_STATE_KEY,
+    editorStore.showcasePanelDisplayState.isOpen,
+  );
+};
+
+export const ShowcaseSideBar = observer(() => {
+  const editorStore = useEditorStore();
+
+  return (
+    <div className="activity-bar">
+      <div className="activity-bar__items">
+        <button
+          className="activity-bar__item"
+          onClick={() => {
+            toggleShowcasePanel(editorStore);
+          }}
+          tabIndex={-1}
+          title={
+            editorStore.showcasePanelDisplayState.isOpen
+              ? 'Close Showcases'
+              : 'Open Showcases'
+          }
+        >
+          {editorStore.showcasePanelDisplayState.isOpen ? (
+            <DoubleArrowRight />
+          ) : (
+            <DoubleArrowLeft />
+          )}
+        </button>
+        <MenuContentDivider />
+      </div>
+    </div>
+  );
+});

package/src/stores/editor/EditorStore.ts

@@ -109,7 +109,10 @@ import { GlobalBulkServiceRegistrationState } from './sidebar-state/BulkServiceR
 import { SQLPlaygroundPanelState } from './panel-group/SQLPlaygroundPanelState.js';
 import type { QuickInputState } from './QuickInputState.js';
 import { GlobalEndToEndWorkflowState } from './sidebar-state/end-to-end-workflow/GlobalEndToEndFlowState.js';
-import { openShowcaseManager } from '../ShowcaseManagerState.js';
+import {
+  SHOWCASE_PANEL_LOCAL_STORAGE,
+  toggleShowcasePanel,
+} from '../../components/editor/ShowcaseSideBar.js';
 import {
   GraphEditLazyGrammarModeState,
   LazyTextEditorStore,
@@ -196,6 +199,8 @@ export class EditorStore implements CommandRegistrar {
     default: 300,
     snap: 150,
   });
+  readonly showcasePanelDisplayState: PanelDisplayState;
+  readonly showcaseDefaultSize = 500;
   readonly tabManagerState = new EditorTabManagerState(this);
   supportedElementTypesWithCategory: Map<string, string[]>;
 
@@ -303,6 +308,24 @@ export class EditorStore implements CommandRegistrar {
       .filter(isNonNullable);
     this.supportedElementTypesWithCategory =
       this.getSupportedElementTypesWithCategory();
+
+    this.showcasePanelDisplayState = new PanelDisplayState({
+      initial: this.showcaseInitialSize,
+      default: this.showcaseDefaultSize,
+      snap: 150,
+    });
+  }
+
+  get showcaseInitialSize(): number {
+    const showcasesSavedAsOpen =
+      this.applicationStore.userDataService.getBooleanValue(
+        SHOWCASE_PANEL_LOCAL_STORAGE.PANEL_STATE_KEY,
+      );
+    if (showcasesSavedAsOpen || showcasesSavedAsOpen === undefined) {
+      return this.showcaseDefaultSize;
+    } else {
+      return 0;
+    }
   }
 
   get isInitialized(): boolean {
@@ -439,7 +462,7 @@ export class EditorStore implements CommandRegistrar {
             this.conflictResolutionState.hasResolvedAllConflicts),
       ),
       action: () => {
-        openShowcaseManager(this.applicationStore);
+        toggleShowcasePanel(this);
       },
     });
     this.applicationStore.commandService.registerCommand({

package/tsconfig.json

@@ -215,6 +215,7 @@
     "./src/components/editor/EditorStoreProvider.tsx",
     "./src/components/editor/EmbeddedQueryBuilder.tsx",
     "./src/components/editor/QuickInput.tsx",
+    "./src/components/editor/ShowcaseSideBar.tsx",
     "./src/components/editor/StatusBar.tsx",
     "./src/components/editor/__test-utils__/EditorComponentTestUtils.tsx",
     "./src/components/editor/command-center/ProjectSearchCommand.tsx",