@finos/legend-application-studio 28.8.0 → 28.9.0

package/src/__lib__/LegendStudioNavigation.ts

@@ -20,6 +20,7 @@ import { guaranteeNonNullable } from '@finos/legend-shared';
 import { generatePath } from '@finos/legend-application/browser';
 
 export enum LEGEND_STUDIO_ROUTE_PATTERN_TOKEN {
+  SHOWCASE_PATH = 'showcasePath',
   PROJECT_ID = 'projectId',
   PATCH_RELEASE_VERSION_ID = 'patchReleaseVersionId',
   WORKSPACE_ID = 'workspaceId',
@@ -58,6 +59,7 @@ export const LEGEND_STUDIO_SDLC_BYPASSED_ROUTE_PATTERN = Object.freeze({
   VIEW_BY_GAV: `/view/archive/:${LEGEND_STUDIO_ROUTE_PATTERN_TOKEN.GAV}`,
   VIEW_BY_GAV_ENTITY: `/view/archive/:${LEGEND_STUDIO_ROUTE_PATTERN_TOKEN.GAV}/entity/:${LEGEND_STUDIO_ROUTE_PATTERN_TOKEN.ENTITY_PATH}`,
   PREVIEW_BY_GAV_ENTITY: `/view/archive/:${LEGEND_STUDIO_ROUTE_PATTERN_TOKEN.GAV}/entity/:${LEGEND_STUDIO_ROUTE_PATTERN_TOKEN.ENTITY_PATH}/preview`,
+  SHOWCASE_PROJECT: `/showcase/*`,
 });
 
 export type WorkspaceReviewPathParams = {
@@ -73,6 +75,10 @@ export type ProjectViewerPathParams = {
   [LEGEND_STUDIO_ROUTE_PATTERN_TOKEN.ENTITY_PATH]?: string;
 };
 
+export type ShowcaseViewerPathParams = {
+  [0]?: string;
+};
+
 export type WorkspaceEditorPathParams = {
   [LEGEND_STUDIO_ROUTE_PATTERN_TOKEN.PROJECT_ID]: string;
   [LEGEND_STUDIO_ROUTE_PATTERN_TOKEN.PATCH_RELEASE_VERSION_ID]?: string;
@@ -347,3 +353,8 @@ export const EXTERNAL_APPLICATION_NAVIGATION__generateServiceQueryCreatorUrl = (
     artifactId,
     versionId,
   )}/${servicePath}`;
+
+export const generateShowcasePath = (projectPath: string): string =>
+  generatePath(LEGEND_STUDIO_SDLC_BYPASSED_ROUTE_PATTERN.SHOWCASE_PROJECT, {
+    0: projectPath,
+  });

package/src/components/LegendStudioWebApplication.tsx

@@ -40,6 +40,7 @@ import {
   type TEMPORARY__ReactRouterComponentType,
 } from '@finos/legend-application/browser';
 import { LEGEND_STUDIO_DOCUMENTATION_KEY } from '../__lib__/LegendStudioDocumentation.js';
+import { ShowcaseViewer } from './showcase/ShowcaseViewer.js';
 
 const NotFoundPage = observer(() => {
   const applicationStore = useApplicationStore();
@@ -114,7 +115,6 @@ export const LegendStudioWebApplicationRouter = observer(() => {
       applicationStore.alertUnhandledError,
     );
   }, [applicationStore, baseStore]);
-
   return (
     <div className="app">
       {baseStore.initState.hasCompleted && (
@@ -133,6 +133,16 @@ export const LegendStudioWebApplicationRouter = observer(() => {
                     ProjectViewer as TEMPORARY__ReactRouterComponentType
                   }
                 />
+                <Route
+                  exact={true}
+                  path={
+                    LEGEND_STUDIO_SDLC_BYPASSED_ROUTE_PATTERN.SHOWCASE_PROJECT
+                  }
+                  component={
+                    // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
+                    ShowcaseViewer as TEMPORARY__ReactRouterComponentType
+                  }
+                />
                 <Route>
                   <NotFoundPage />
                 </Route>

package/src/components/ShowcaseManager.tsx

@@ -48,6 +48,7 @@ import {
   CodeEditor,
 } from '@finos/legend-lego/code-editor';
 import React, { useEffect, useMemo, useRef } from 'react';
+import { generateShowcasePath } from '../__lib__/LegendStudioNavigation.js';
 
 const ShowcasesExplorerTreeNodeContainer = observer(
   (
@@ -536,7 +537,14 @@ const ShowcaseViewer = observer(
   }) => {
     const { showcaseManagerState, showcase } = props;
     const prettyPath = showcase.path.replaceAll(/\s*\/\s*/g, ' / ');
-
+    const launchShowcase = (): void => {
+      const applicationStore = showcaseManagerState.applicationStore;
+      applicationStore.navigationService.navigator.visitAddress(
+        applicationStore.navigationService.navigator.generateAddress(
+          generateShowcasePath(showcase.path),
+        ),
+      );
+    };
     return (
       <div className="showcase-manager__view">
         <div className="showcase-manager__view__header">
@@ -583,7 +591,23 @@ const ShowcaseViewer = observer(
         </div>
         <div className="showcase-manager__view__content showcase-manager__viewer__content">
           <div className="showcase-manager__viewer__title">
-            {showcase.title}
+            <div className="showcase-manager__viewer__title__label">
+              {showcase.title}
+            </div>
+            <div className="showcase-manager__viewer__title__action">
+              <div className="btn__dropdown-combo btn__dropdown-combo--primary showcase-manager__viewer__title__action-btn">
+                <button
+                  className="btn__dropdown-combo__label"
+                  onClick={launchShowcase}
+                  title="Open Showcase Project"
+                  tabIndex={-1}
+                >
+                  <div className="btn__dropdown-combo__label__title">
+                    Launch
+                  </div>
+                </button>
+              </div>
+            </div>
           </div>
           <div className="showcase-manager__viewer__path">{prettyPath}</div>
           <div className="showcase-manager__viewer__code">

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

@@ -828,7 +828,7 @@ export const GrammarTextEditor = observer(() => {
       }
     }
     // Disable editing if user is in viewer mode
-    editor.updateOptions({ readOnly: editorStore.isInViewerMode });
+    editor.updateOptions({ readOnly: editorStore.editorMode.disableEditing });
 
     // hover
     hoverProviderDisposer.current?.dispose();

package/src/components/editor/side-bar/Explorer.tsx

@@ -1376,7 +1376,7 @@ const ProjectExplorerActionPanel = observer((props: { disabled: boolean }) => {
 
   return (
     <div className="panel__header__actions">
-      {!editorStore.isInViewerMode && (
+      {
         <button
           className="panel__header__action"
           disabled={disabled}
@@ -1385,15 +1385,17 @@ const ProjectExplorerActionPanel = observer((props: { disabled: boolean }) => {
         >
           <FileImportIcon />
         </button>
+      }
+      {editorStore.editorMode.supportSdlcOperations && (
+        <button
+          className="panel__header__action panel__header__action--config"
+          disabled={disabled}
+          title="Project Configuration Panel"
+          onClick={openConfigurationEditor}
+        >
+          <SettingsEthernetIcon />
+        </button>
       )}
-      <button
-        className="panel__header__action panel__header__action--config"
-        disabled={disabled}
-        title="Project Configuration Panel"
-        onClick={openConfigurationEditor}
-      >
-        <SettingsEthernetIcon />
-      </button>
       {!editorStore.isInViewerMode && (
         <DropdownMenu
           className="panel__header__action"
@@ -1477,10 +1479,16 @@ export const Explorer = observer(() => {
             EXPLORER
           </div>
         </div>
-        {editorStore.isInViewerMode && (
+        {editorStore.editorMode.disableEditing &&
+          !editorStore.editorMode.label && (
+            <div className="panel__header__title side-bar__header__title__viewer-mode-badge">
+              <LockIcon />
+              READ-ONLY
+            </div>
+          )}
+        {editorStore.editorMode.label && (
           <div className="panel__header__title side-bar__header__title__viewer-mode-badge">
-            <LockIcon />
-            READ-ONLY
+            {editorStore.editorMode.label}
           </div>
         )}
       </div>

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

@@ -37,6 +37,11 @@ import {
   FileTrayIcon,
   AssistantIcon,
   useResizeDetector,
+  FireIcon,
+  TrashIcon,
+  HammerIcon,
+  TerminalIcon,
+  ResizablePanelSplitterLine,
 } from '@finos/legend-art';
 import { isNonNullable } from '@finos/legend-shared';
 import {
@@ -65,6 +70,7 @@ import {
 import { EmbeddedQueryBuilder } from '../editor/EmbeddedQueryBuilder.js';
 import type { ActivityBarItemConfig } from '@finos/legend-lego/application';
 import { ActivityBarMenu } from '../editor/ActivityBar.js';
+import { PanelGroup } from '../editor/panel-group/PanelGroup.js';
 
 const ProjectViewerStatusBar = observer(() => {
   const params = useParams<ProjectViewerPathParams>();
@@ -90,11 +96,26 @@ const ProjectViewerStatusBar = observer(() => {
       ? 'current'
       : ''
   }`;
+
+  const editable =
+    editorStore.graphManagerState.graphBuildState.hasCompleted &&
+    editorStore.isInitialized;
   const handleTextModeClick = applicationStore.guardUnhandledError(() =>
     flowResult(editorStore.toggleTextMode()),
   );
+  const compile = applicationStore.guardUnhandledError(() =>
+    flowResult(editorStore.graphEditorMode.globalCompile()),
+  );
+  const generate = applicationStore.guardUnhandledError(() =>
+    flowResult(editorStore.graphState.graphGenerationState.globalGenerate()),
+  );
+  const emptyGenerationEntities = applicationStore.guardUnhandledError(() =>
+    flowResult(editorStore.graphState.graphGenerationState.clearGenerations()),
+  );
+
   const toggleAssistant = (): void =>
     applicationStore.assistantService.toggleAssistant();
+  const togglePanel = (): void => editorStore.panelGroupDisplayState.toggle();
 
   return (
     <div
@@ -136,6 +157,76 @@ const ProjectViewerStatusBar = observer(() => {
         )}
       </div>
       <div className="editor__status-bar__right">
+        <button
+          className={clsx(
+            'editor__status-bar__action editor__status-bar__generate-btn',
+            {
+              'editor__status-bar__generate-btn--wiggling':
+                editorStore.graphState.graphGenerationState
+                  .isRunningGlobalGenerate,
+            },
+          )}
+          disabled={
+            editorStore.graphState.isApplicationUpdateOperationIsRunning
+          }
+          onClick={generate}
+          tabIndex={-1}
+          title="Generate (F10)"
+        >
+          <FireIcon />
+        </button>
+        <button
+          className={clsx(
+            'editor__status-bar__action editor__status-bar__clear__generation-btn ',
+
+            {
+              'editor__status-bar__action editor__status-bar__clear__generation-btn--wiggling':
+                editorStore.graphState.graphGenerationState
+                  .clearingGenerationEntitiesState.isInProgress,
+            },
+          )}
+          disabled={
+            editorStore.graphState.isApplicationUpdateOperationIsRunning ||
+            !editable
+          }
+          onClick={emptyGenerationEntities}
+          tabIndex={-1}
+          title="Clear generation entities"
+        >
+          <TrashIcon />
+        </button>
+        <button
+          className={clsx(
+            'editor__status-bar__action editor__status-bar__compile-btn',
+            {
+              'editor__status-bar__compile-btn--wiggling':
+                editorStore.graphState.isRunningGlobalCompile,
+            },
+          )}
+          disabled={
+            editorStore.graphState.isApplicationUpdateOperationIsRunning ||
+            !editable
+          }
+          onClick={compile}
+          tabIndex={-1}
+          title="Compile (F9)"
+        >
+          <HammerIcon />
+        </button>
+        <button
+          className={clsx(
+            'editor__status-bar__action editor__status-bar__action__toggler',
+            {
+              'editor__status-bar__action__toggler--active':
+                editorStore.panelGroupDisplayState.isOpen,
+            },
+          )}
+          onClick={togglePanel}
+          tabIndex={-1}
+          title="Toggle panel (Ctrl + `)"
+        >
+          <TerminalIcon />
+        </button>
         <button
           className={clsx(
             'editor__status-bar__action editor__status-bar__action__toggler',
@@ -288,6 +379,21 @@ export const ProjectViewer = withEditorStore(
           size: editorStore.sideBarDisplayState.size,
         },
       );
+      const resizePanel = (handleProps: ResizablePanelHandlerProps): void =>
+        editorStore.panelGroupDisplayState.setSize(
+          (handleProps.domElement as HTMLDivElement).getBoundingClientRect()
+            .height,
+        );
+      const maximizedCollapsiblePanelGroupProps = getCollapsiblePanelGroupProps(
+        editorStore.panelGroupDisplayState.isMaximized,
+      );
+      const collapsiblePanelGroupProps = getCollapsiblePanelGroupProps(
+        editorStore.panelGroupDisplayState.size === 0,
+        {
+          onStopResize: resizePanel,
+          size: editorStore.panelGroupDisplayState.size,
+        },
+      );
       const { ref, width, height } = useResizeDetector<HTMLDivElement>();
       useEffect(() => {
         if (ref.current) {
@@ -330,10 +436,39 @@ export const ProjectViewer = withEditorStore(
                       {...sideBarCollapsiblePanelGroupProps.remainingPanel}
                       minSize={300}
                     >
-                      {editorStore.graphEditorMode.mode ===
-                        GRAPH_EDITOR_MODE.FORM && <EditorGroup />}
-                      {editorStore.graphEditorMode.mode ===
-                        GRAPH_EDITOR_MODE.GRAMMAR_TEXT && <GrammarTextEditor />}
+                      <ResizablePanelGroup orientation="horizontal">
+                        <ResizablePanel
+                          {...maximizedCollapsiblePanelGroupProps.collapsiblePanel}
+                          {...(editorStore.panelGroupDisplayState.size === 0
+                            ? collapsiblePanelGroupProps.remainingPanel
+                            : {})}
+                        >
+                          {editorStore.graphEditorMode.mode ===
+                            GRAPH_EDITOR_MODE.FORM && <EditorGroup />}
+                          {editorStore.graphEditorMode.mode ===
+                            GRAPH_EDITOR_MODE.GRAMMAR_TEXT && (
+                            <GrammarTextEditor />
+                          )}
+                        </ResizablePanel>
+                        <ResizablePanelSplitter>
+                          <ResizablePanelSplitterLine
+                            color={
+                              editorStore.panelGroupDisplayState.isMaximized
+                                ? 'transparent'
+                                : 'var(--color-dark-grey-250)'
+                            }
+                          />
+                        </ResizablePanelSplitter>
+                        <ResizablePanel
+                          {...collapsiblePanelGroupProps.collapsiblePanel}
+                          {...(editorStore.panelGroupDisplayState.isMaximized
+                            ? maximizedCollapsiblePanelGroupProps.remainingPanel
+                            : {})}
+                          direction={-1}
+                        >
+                          <PanelGroup />
+                        </ResizablePanel>
+                      </ResizablePanelGroup>
                     </ResizablePanel>
                   </ResizablePanelGroup>
                 </div>