@finos/legend-application-studio 28.18.26 → 28.18.28

package/src/components/LegendStudioWebApplication.tsx

@@ -40,8 +40,9 @@ import {
   type TEMPORARY__ReactRouterComponentType,
 } from '@finos/legend-application/browser';
 import { LEGEND_STUDIO_DOCUMENTATION_KEY } from '../__lib__/LegendStudioDocumentation.js';
-import { ShowcaseViewer } from './showcase/ShowcaseViewer.js';
 import { LazyTextEditor } from './lazy-text-editor/LazyTextEditor.js';
+import { PureCompatibilityTestManager } from './pct/PureCompatibilityTest.js';
+import { ShowcaseViewer } from './showcase/ShowcaseViewer.js';
 
 const NotFoundPage = observer(() => {
   const applicationStore = useApplicationStore();
@@ -143,6 +144,14 @@ export const LegendStudioWebApplicationRouter = observer(() => {
                     ShowcaseViewer as TEMPORARY__ReactRouterComponentType
                   }
                 />
+                <Route
+                  exact={true}
+                  path={LEGEND_STUDIO_SDLC_BYPASSED_ROUTE_PATTERN.PCT_REPORT}
+                  component={
+                    // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
+                    PureCompatibilityTestManager as TEMPORARY__ReactRouterComponentType
+                  }
+                />
                 <Route>
                   <NotFoundPage />
                 </Route>
@@ -220,6 +229,14 @@ export const LegendStudioWebApplicationRouter = observer(() => {
                     WorkspaceSetup as TEMPORARY__ReactRouterComponentType
                   }
                 />
+                <Route
+                  exact={true}
+                  path={LEGEND_STUDIO_SDLC_BYPASSED_ROUTE_PATTERN.PCT_REPORT}
+                  component={
+                    // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
+                    PureCompatibilityTestManager as TEMPORARY__ReactRouterComponentType
+                  }
+                />
                 {extraApplicationPageEntries.map((entry) => (
                   <Route
                     key={entry.key}

package/src/components/editor/ActivityBar.tsx

@@ -62,6 +62,7 @@ import {
   ShowcaseManagerState,
   openShowcaseManager,
 } from '../../stores/ShowcaseManagerState.js';
+import { toggleShowcasePanel } from './ShowcaseSideBar.js';
 
 const SettingsMenu = observer(
   forwardRef<HTMLDivElement, unknown>(function SettingsMenu(props, ref) {
@@ -81,7 +82,9 @@ const SettingsMenu = observer(
   }),
 );
 
-export const ActivityBarMenu: React.FC = () => {
+export const ActivityBarMenu: React.FC<{
+  openShowcasePanel?: () => void;
+}> = ({ openShowcasePanel }) => {
   const applicationStore = useLegendStudioApplicationStore();
   const appDocUrl = applicationStore.documentationService.url;
   const docLinks = applicationStore.documentationService.links;
@@ -136,7 +139,11 @@ export const ActivityBarMenu: React.FC = () => {
               <MenuContentItem onClick={showAppInfo}>About</MenuContentItem>
               {showcaseManagerState?.isEnabled && (
                 <MenuContentItem
-                  onClick={() => openShowcaseManager(applicationStore)}
+                  onClick={() =>
+                    openShowcasePanel
+                      ? openShowcasePanel()
+                      : openShowcaseManager(applicationStore)
+                  }
                 >
                   See Showcases
                 </MenuContentItem>
@@ -398,9 +405,13 @@ export const ActivityBar = observer(() => {
     },
   ].filter((activity) => !activity.disabled);
 
+  const openShowcasePanel = () => {
+    toggleShowcasePanel(editorStore);
+  };
+
   return (
     <div className="activity-bar">
-      <ActivityBarMenu />
+      <ActivityBarMenu openShowcasePanel={openShowcasePanel} />
       <div className="activity-bar__items">
         {activities.map((activity) => (
           <button
@@ -436,7 +447,7 @@ export const ActivityBar = observer(() => {
       </div>
       <button
         className={clsx('activity-bar__item')}
-        onClick={() => openShowcaseManager(editorStore.applicationStore)}
+        onClick={() => openShowcasePanel()}
         tabIndex={-1}
         title={'Open Showcases'}
       >

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/components/pct/PureCompatibilityTest.tsx

@@ -0,0 +1,35 @@
+/**
+ * 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 { useLegendStudioApplicationStore } from '../LegendStudioFrameworkProvider.js';
+
+export const PureCompatibilityTestManager = observer(() => {
+  const studioApplicationStore = useLegendStudioApplicationStore();
+  const config = studioApplicationStore.config;
+  if (!config.pctReportUrl) {
+    return null;
+  }
+  return (
+    <div className="app__page">
+      <iframe
+        src={config.pctReportUrl}
+        style={{ width: '100%', height: '100%', border: 'none' }}
+        title="Legend Pure Compatibility Test"
+      />
+    </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",
@@ -321,6 +322,7 @@
     "./src/components/extensions/Core_LegendStudioApplicationPlugin.tsx",
     "./src/components/extensions/DSL_ExternalFormat_LegendStudioApplicationPlugin.tsx",
     "./src/components/lazy-text-editor/LazyTextEditor.tsx",
+    "./src/components/pct/PureCompatibilityTest.tsx",
     "./src/components/project-reviewer/ProjectReviewSideBar.tsx",
     "./src/components/project-reviewer/ProjectReviewStoreProvider.tsx",
     "./src/components/project-reviewer/ProjectReviewer.tsx",