@finos/legend-application-studio 28.7.1 → 28.9.0

package/src/components/showcase/ShowcaseViewer.tsx

@@ -0,0 +1,418 @@
+/**
+ * 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 {
+  useEditorStore,
+  withEditorStore,
+} from '../editor/EditorStoreProvider.js';
+import {
+  useShowcaseViewerStore,
+  withShowcaseViewerStore,
+} from './ShowcaseViewerStoreProvider.js';
+import { useParams } from '@finos/legend-application/browser';
+import type { ShowcaseViewerPathParams } from '../../__lib__/LegendStudioNavigation.js';
+import { isNonNullable } from '@finos/legend-shared';
+import { Fragment, useEffect } from 'react';
+import {
+  getCollapsiblePanelGroupProps,
+  useResizeDetector,
+  type ResizablePanelHandlerProps,
+  ResizablePanel,
+  ResizablePanelSplitter,
+  ResizablePanelGroup,
+  FileTrayIcon,
+  clsx,
+  HackerIcon,
+  AssistantIcon,
+  ReadMeIcon,
+  FireIcon,
+  HammerIcon,
+  TerminalIcon,
+  TrashIcon,
+  ResizablePanelSplitterLine,
+} from '@finos/legend-art';
+import { useApplicationStore, useCommands } from '@finos/legend-application';
+import { flowResult } from 'mobx';
+import { EditorGroup } from '../editor/editor-group/EditorGroup.js';
+import { GrammarTextEditor } from '../editor/editor-group/GrammarTextEditor.js';
+import { ProjectSearchCommand } from '../editor/command-center/ProjectSearchCommand.js';
+import { EmbeddedQueryBuilder } from '../editor/EmbeddedQueryBuilder.js';
+import {
+  ACTIVITY_MODE,
+  GRAPH_EDITOR_MODE,
+} from '../../stores/editor/EditorConfig.js';
+import { ActivityBarMenu } from '../editor/ActivityBar.js';
+import type { ActivityBarItemConfig } from '@finos/legend-lego/application';
+import { useLegendStudioApplicationStore } from '../LegendStudioFrameworkProvider.js';
+import { LEGEND_STUDIO_TEST_ID } from '../../__lib__/LegendStudioTesting.js';
+import { Explorer } from '../editor/side-bar/Explorer.js';
+import { PanelGroup } from '../editor/panel-group/PanelGroup.js';
+
+const ShowcaseViewerStatusBar = observer(() => {
+  const editorStore = useEditorStore();
+  const showcaseStore = useShowcaseViewerStore();
+  const showcase = showcaseStore._showcase;
+  const applicationStore = useLegendStudioApplicationStore();
+  const handleTextModeClick = applicationStore.guardUnhandledError(() =>
+    flowResult(editorStore.toggleTextMode()),
+  );
+  const editable =
+    editorStore.graphManagerState.graphBuildState.hasCompleted &&
+    editorStore.isInitialized;
+  const togglePanel = (): void => editorStore.panelGroupDisplayState.toggle();
+
+  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();
+
+  return (
+    <div
+      data-testid={LEGEND_STUDIO_TEST_ID.STATUS_BAR}
+      className="editor__status-bar project-view__status-bar"
+    >
+      <div className="editor__status-bar__left">
+        {showcase && (
+          <div className="editor__status-bar__workspace">
+            <div className="editor__status-bar__workspace__icon">
+              <ReadMeIcon />
+            </div>
+            <div className="editor__status-bar__workspace__project">
+              <button
+                className="editor__status-bar__workspace__project"
+                tabIndex={-1}
+              >
+                {`Showcase : ${showcase.title}`}
+              </button>
+            </div>
+          </div>
+        )}
+      </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',
+            {
+              'editor__status-bar__action__toggler--active':
+                editorStore.graphEditorMode.mode ===
+                GRAPH_EDITOR_MODE.GRAMMAR_TEXT,
+            },
+          )}
+          onClick={handleTextModeClick}
+          tabIndex={-1}
+          title="Toggle text mode (F8)"
+        >
+          <HackerIcon />
+        </button>
+        <button
+          className={clsx(
+            'editor__status-bar__action editor__status-bar__action__toggler',
+            {
+              'editor__status-bar__action__toggler--active':
+                !applicationStore.assistantService.isHidden,
+            },
+          )}
+          onClick={toggleAssistant}
+          tabIndex={-1}
+          title="Toggle assistant"
+        >
+          <AssistantIcon />
+        </button>
+      </div>
+    </div>
+  );
+});
+
+const ShowcaseViewerActivityBar = observer(() => {
+  const editorStore = useEditorStore();
+
+  const changeActivity =
+    (activity: string): (() => void) =>
+    (): void =>
+      editorStore.setActiveActivity(activity);
+  // tabs
+  const activities: ActivityBarItemConfig[] = (
+    [
+      {
+        mode: ACTIVITY_MODE.EXPLORER,
+        title: 'Explorer (Ctrl + Shift + X)',
+        icon: <FileTrayIcon />,
+      },
+    ] as (ActivityBarItemConfig | boolean)[]
+  ).filter((activity): activity is ActivityBarItemConfig => Boolean(activity));
+
+  return (
+    <div className="activity-bar">
+      <ActivityBarMenu />
+      <div className="activity-bar__items">
+        {activities.map((activity) => (
+          <button
+            key={activity.mode}
+            className={clsx('activity-bar__item', {
+              'activity-bar__item--active':
+                editorStore.sideBarDisplayState.isOpen &&
+                editorStore.activeActivity === activity.mode,
+            })}
+            onClick={changeActivity(activity.mode)}
+            tabIndex={-1}
+            title={activity.title}
+          >
+            {activity.icon}
+          </button>
+        ))}
+      </div>
+    </div>
+  );
+});
+
+const ShowcaseViewerSideBar = observer(() => {
+  const editorStore = useEditorStore();
+  const renderSideBar = (): React.ReactNode => {
+    switch (editorStore.activeActivity) {
+      case ACTIVITY_MODE.EXPLORER:
+        return <Explorer />;
+      default:
+        return null;
+    }
+  };
+  return (
+    <div className="side-bar">
+      <div className="side-bar__view">{renderSideBar()}</div>
+    </div>
+  );
+});
+
+export const ShowcaseViewer = withEditorStore(
+  withShowcaseViewerStore(
+    observer(() => {
+      const params = useParams<ShowcaseViewerPathParams>();
+      const showcaseStore = useShowcaseViewerStore();
+      const applicationStore = useApplicationStore();
+      const editorStore = useEditorStore();
+
+      // Extensions
+      const extraEditorExtensionComponents = editorStore.pluginManager
+        .getApplicationPlugins()
+        .flatMap(
+          (plugin) =>
+            plugin.getExtraEditorExtensionComponentRendererConfigurations?.() ??
+            [],
+        )
+        .filter(isNonNullable)
+        .map((config) => (
+          <Fragment key={config.key}>{config.renderer(editorStore)}</Fragment>
+        ));
+
+      // layout
+      const resizeSideBar = (handleProps: ResizablePanelHandlerProps): void =>
+        editorStore.sideBarDisplayState.setSize(
+          (handleProps.domElement as HTMLDivElement).getBoundingClientRect()
+            .width,
+        );
+      const sideBarCollapsiblePanelGroupProps = getCollapsiblePanelGroupProps(
+        editorStore.sideBarDisplayState.size === 0,
+        {
+          onStopResize: resizeSideBar,
+          size: editorStore.sideBarDisplayState.size,
+        },
+      );
+      const resizePanel = (handleProps: ResizablePanelHandlerProps): void =>
+        editorStore.panelGroupDisplayState.setSize(
+          (handleProps.domElement as HTMLDivElement).getBoundingClientRect()
+            .height,
+        );
+      const collapsiblePanelGroupProps = getCollapsiblePanelGroupProps(
+        editorStore.panelGroupDisplayState.size === 0,
+        {
+          onStopResize: resizePanel,
+          size: editorStore.panelGroupDisplayState.size,
+        },
+      );
+      const collapsibleSideBarGroupProps = getCollapsiblePanelGroupProps(
+        editorStore.sideBarDisplayState.size === 0,
+        {
+          onStopResize: resizeSideBar,
+          size: editorStore.sideBarDisplayState.size,
+        },
+      );
+      const maximizedCollapsiblePanelGroupProps = getCollapsiblePanelGroupProps(
+        editorStore.panelGroupDisplayState.isMaximized,
+      );
+      const { ref, width, height } = useResizeDetector<HTMLDivElement>();
+      useEffect(() => {
+        if (ref.current) {
+          editorStore.panelGroupDisplayState.setMaxSize(
+            ref.current.offsetHeight,
+          );
+        }
+      }, [ref, editorStore, width, height]);
+
+      // initialize
+      useEffect(() => {
+        flowResult(showcaseStore.initialize(params)).catch(
+          applicationStore.alertUnhandledError,
+        );
+      }, [applicationStore, showcaseStore, params]);
+
+      useCommands(editorStore);
+
+      return (
+        <div className="app__page">
+          <div className="editor viewer">
+            <div className="editor__body">
+              <ShowcaseViewerActivityBar />
+              <div ref={ref} className="editor__content-container">
+                <div className="editor__content">
+                  <ResizablePanelGroup orientation="vertical">
+                    <ResizablePanel
+                      {...sideBarCollapsiblePanelGroupProps.collapsiblePanel}
+                      direction={1}
+                    >
+                      <ShowcaseViewerSideBar />
+                    </ResizablePanel>
+                    <ResizablePanelSplitter />
+                    <ResizablePanel
+                      {...collapsibleSideBarGroupProps.remainingPanel}
+                      minSize={300}
+                    >
+                      <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>
+              </div>
+            </div>
+            {editorStore.graphManagerState.graphBuildState.hasSucceeded && (
+              <ProjectSearchCommand />
+            )}
+            <ShowcaseViewerStatusBar />
+            <EmbeddedQueryBuilder />
+            {extraEditorExtensionComponents}
+          </div>
+        </div>
+      );
+    }),
+  ),
+);

package/src/components/showcase/ShowcaseViewerStoreProvider.tsx

@@ -0,0 +1,56 @@
+/**
+ * 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 { createContext, useContext } from 'react';
+import { ShowcaseViewerStore } from '../../stores/showcase/ShowcaseViewerStore.js';
+import { useEditorStore } from '../editor/EditorStoreProvider.js';
+import { useLocalObservable } from 'mobx-react-lite';
+import { guaranteeNonNullable } from '@finos/legend-shared';
+import { EDITOR_MODE } from '../../stores/editor/EditorConfig.js';
+import { ShowcaseViewerEditorMode } from '../../stores/showcase/ShowcaseViewerEditorMode.js';
+
+const ShowcaseViewerStoreContext = createContext<
+  ShowcaseViewerStore | undefined
+>(undefined);
+
+export const ShowcaseViewerStoreProvider: React.FC<{
+  children: React.ReactNode;
+}> = ({ children }) => {
+  const editorStore = useEditorStore();
+  editorStore.setMode(EDITOR_MODE.VIEWER);
+  const store = useLocalObservable(() => new ShowcaseViewerStore(editorStore));
+  editorStore.setEditorMode(new ShowcaseViewerEditorMode(store));
+  return (
+    <ShowcaseViewerStoreContext.Provider value={store}>
+      {children}
+    </ShowcaseViewerStoreContext.Provider>
+  );
+};
+
+export const useShowcaseViewerStore = (): ShowcaseViewerStore =>
+  guaranteeNonNullable(
+    useContext(ShowcaseViewerStoreContext),
+    `Can't find showcase viewer store in context`,
+  );
+
+export const withShowcaseViewerStore = (WrapperComponent: React.FC): React.FC =>
+  function WithShowcaseViewerStore() {
+    return (
+      <ShowcaseViewerStoreProvider>
+        <WrapperComponent />
+      </ShowcaseViewerStoreProvider>
+    );
+  };

package/src/stores/LegendStudioBaseStore.ts

@@ -124,6 +124,7 @@ export class LegendStudioBaseStore {
           LEGEND_STUDIO_SDLC_BYPASSED_ROUTE_PATTERN.VIEW_BY_GAV,
           LEGEND_STUDIO_SDLC_BYPASSED_ROUTE_PATTERN.VIEW_BY_GAV_ENTITY,
           LEGEND_STUDIO_SDLC_BYPASSED_ROUTE_PATTERN.PREVIEW_BY_GAV_ENTITY,
+          LEGEND_STUDIO_SDLC_BYPASSED_ROUTE_PATTERN.SHOWCASE_PROJECT,
         ],
       )
     ) {

package/src/stores/editor/EditorMode.ts

@@ -29,4 +29,18 @@ export abstract class EditorMode {
     elementPath: string,
     dependencyProject: ProjectDependency,
   ): string;
+
+  abstract get isInitialized(): boolean;
+
+  get supportSdlcOperations(): boolean {
+    return true;
+  }
+
+  get disableEditing(): boolean {
+    return false;
+  }
+
+  get label(): string | undefined {
+    return undefined;
+  }
 }

package/src/stores/editor/EditorSDLCState.ts

@@ -48,7 +48,6 @@ import {
   Workspace,
   WorkspaceAccessType,
   Patch,
-  ProjectAccessRole,
   AuthorizableProjectAction,
 } from '@finos/legend-server-sdlc';
 import { LEGEND_STUDIO_APP_EVENT } from '../../__lib__/LegendStudioEvent.js';
@@ -77,7 +76,6 @@ export class EditorSDLCState {
   projectVersions: Version[] = [];
   projectPublishedVersions: string[] = [];
   authorizedActions: AuthorizableProjectAction[] | undefined;
-  accessRole: ProjectAccessRole | undefined;
 
   constructor(editorStore: EditorStore) {
     makeObservable(this, {
@@ -94,7 +92,6 @@ export class EditorSDLCState {
       isFetchingProject: observable,
       projectPublishedVersions: observable,
       authorizedActions: observable,
-      accessRole: observable,
       activeProject: computed,
       activeWorkspace: computed,
       activeRevision: computed,
@@ -174,12 +171,9 @@ export class EditorSDLCState {
   }
 
   unAuthorizedActionMessage(_action: AuthorizableProjectAction): string {
-    if (this.accessRole) {
-      return `Your role ${
-        this.accessRole.accessRole
-      } does not allow you to perform the action '${prettyCONSTName(_action)}'`;
-    }
-    return `Your are not entitled to perform the action: ${_action}`;
+    return `Your are not entitled to perform the action: ${prettyCONSTName(
+      _action,
+    )}`;
   }
 
   userCanPerformAction(authorizedAction: AuthorizableProjectAction): boolean {
@@ -568,26 +562,19 @@ export class EditorSDLCState {
 
   *fetchAuthorizedActions(): GeneratorFn<void> {
     try {
-      const [authorizedActions, accessRoleRaw] = (yield Promise.all([
-        this.editorStore.sdlcServerClient.getAutorizedActions(
-          this.activeProject.projectId,
-        ),
-        this.editorStore.sdlcServerClient.getAccessRole(
+      const authorizedActions =
+        (yield this.editorStore.sdlcServerClient.getAutorizedActions(
           this.activeProject.projectId,
-        ),
-      ])) as [AuthorizableProjectAction[], PlainObject<ProjectAccessRole>];
+        )) as AuthorizableProjectAction[];
       this.authorizedActions = authorizedActions;
-      this.accessRole = ProjectAccessRole.serialization.fromJson(accessRoleRaw);
     } catch (error) {
       assertErrorThrown(error);
       // if there is an error fetching authorized actions we should set undefined
       this.authorizedActions = undefined;
-      this.accessRole = undefined;
       this.editorStore.applicationStore.logService.error(
         LogEvent.create(LEGEND_STUDIO_APP_EVENT.SDLC_MANAGER_FAILURE),
         error,
       );
-      this.editorStore.applicationStore.notificationService.notifyError(error);
     }
   }
 

package/src/stores/editor/EditorStore.ts

@@ -102,7 +102,6 @@ import type { LegendStudioApplicationStore } from '../LegendStudioBaseStore.js';
 import { EmbeddedQueryBuilderState } from './EmbeddedQueryBuilderState.js';
 import { LEGEND_STUDIO_COMMAND_KEY } from '../../__lib__/LegendStudioCommand.js';
 import { EditorTabManagerState } from './EditorTabManagerState.js';
-import type { ProjectViewerEditorMode } from '../project-view/ProjectViewerEditorMode.js';
 import { GraphEditFormModeState } from './GraphEditFormModeState.js';
 import type { GraphEditorMode } from './GraphEditorMode.js';
 import { GraphEditGrammarModeState } from './GraphEditGrammarModeState.js';
@@ -296,13 +295,7 @@ export class EditorStore implements CommandRegistrar {
   get isInitialized(): boolean {
     if (this.isInViewerMode) {
       return (
-        (Boolean(
-          this.sdlcState.currentProject && this.sdlcState.currentWorkspace,
-        ) ||
-          Boolean(
-            (this.sdlcState.editorStore.editorMode as ProjectViewerEditorMode)
-              .viewerStore.projectGAVCoordinates,
-          )) &&
+        this.editorMode.isInitialized &&
         this.graphManagerState.systemBuildState.hasSucceeded
       );
     } else {

package/src/stores/editor/StandardEditorMode.ts

@@ -58,4 +58,11 @@ export class StandardEditorMode extends EditorMode {
       elementPath,
     );
   }
+
+  override get isInitialized(): boolean {
+    return Boolean(
+      this.editorStore.sdlcState.currentProject &&
+        this.editorStore.sdlcState.currentWorkspace,
+    );
+  }
 }