@finos/legend-application-studio 28.15.3 → 28.15.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@finos/legend-application-studio",
-  "version": "28.15.3",
+  "version": "28.15.5",
   "description": "Legend Studio application core",
   "keywords": [
     "legend",
@@ -47,11 +47,11 @@
   "dependencies": {
     "@finos/legend-application": "15.0.67",
     "@finos/legend-art": "7.1.19",
-    "@finos/legend-graph": "31.7.3",
-    "@finos/legend-lego": "1.2.3",
-    "@finos/legend-query-builder": "4.14.3",
+    "@finos/legend-graph": "31.8.1",
+    "@finos/legend-lego": "1.2.5",
+    "@finos/legend-query-builder": "4.14.5",
     "@finos/legend-server-depot": "6.0.36",
-    "@finos/legend-server-sdlc": "5.3.6",
+    "@finos/legend-server-sdlc": "5.3.8",
     "@finos/legend-server-showcase": "0.2.5",
     "@finos/legend-shared": "10.0.32",
     "@finos/legend-storage": "3.0.82",

package/src/__lib__/LegendStudioNavigation.ts

@@ -64,7 +64,7 @@ export const LEGEND_STUDIO_SDLC_BYPASSED_ROUTE_PATTERN = Object.freeze({
   SHOWCASE_PROJECT: `/showcase/*`,
 });
 
-export type WorkspaceReviewPathParams = {
+export type ProjectReviewerPathParams = {
   [LEGEND_STUDIO_ROUTE_PATTERN_TOKEN.PROJECT_ID]: string;
   [LEGEND_STUDIO_ROUTE_PATTERN_TOKEN.REVIEW_ID]: string;
 };

package/src/components/LegendStudioWebApplication.tsx

@@ -17,7 +17,7 @@
 import { useEffect } from 'react';
 import { WorkspaceSetup } from './workspace-setup/WorkspaceSetup.js';
 import { Editor } from './editor/Editor.js';
-import { WorkspaceReview } from './workspace-review/WorkspaceReview.js';
+import { ProjectReviewer } from './project-reviewer/ProjectReviewer.js';
 import { ProjectViewer } from './project-view/ProjectViewer.js';
 import { observer } from 'mobx-react-lite';
 import { clsx, GhostIcon, MarkdownTextViewer } from '@finos/legend-art';
@@ -172,7 +172,7 @@ export const LegendStudioWebApplicationRouter = observer(() => {
                   path={LEGEND_STUDIO_ROUTE_PATTERN.REVIEW}
                   component={
                     // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
-                    WorkspaceReview as TEMPORARY__ReactRouterComponentType
+                    ProjectReviewer as TEMPORARY__ReactRouterComponentType
                   }
                 />
                 <Route

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

@@ -27,27 +27,55 @@ import { UnsupportedElementEditorState } from '../../../stores/editor/editor-sta
 import { flowResult } from 'mobx';
 import { useEditorStore } from '../EditorStoreProvider.js';
 import { useApplicationStore } from '@finos/legend-application';
+import { ELEMENT_NATIVE_VIEW_MODE } from '../../../stores/editor/EditorConfig.js';
+import { INTERNAL__UnknownPackageableElement } from '@finos/legend-graph';
+import { isType } from '@finos/legend-shared';
 
 export const UnsupportedEditorPanel = observer(
-  (props: { text: string; isReadOnly: boolean }) => {
-    const { text, isReadOnly } = props;
+  (props: {
+    text: string;
+    isReadOnly: boolean;
+    unsupportedElementEditorState?: UnsupportedElementEditorState;
+  }) => {
+    const { text, isReadOnly, unsupportedElementEditorState } = props;
     const editorStore = useEditorStore();
     const applicationStore = useApplicationStore();
+
+    const isUnknownEntity = unsupportedElementEditorState
+      ? isType(
+          unsupportedElementEditorState.element,
+          INTERNAL__UnknownPackageableElement,
+        )
+      : false;
+
     const handleTextModeClick = applicationStore.guardUnhandledError(() =>
       flowResult(editorStore.toggleTextMode()),
     );
 
+    const handleJsonModeClick = (): void => {
+      unsupportedElementEditorState?.setEditMode(ELEMENT_NATIVE_VIEW_MODE.JSON);
+    };
+
     return (
       <BlankPanelContent>
         <div className="unsupported-element-editor__main">
           <div className="unsupported-element-editor__summary">{text}</div>
-          {!isReadOnly && (
-            <Button
-              className="unsupported-element-editor__to-text-mode__btn"
-              onClick={handleTextModeClick}
-              text="Edit in text mode"
-            />
-          )}
+          <div className="unsupported-element-editor__actions">
+            {!isReadOnly && (
+              <Button
+                className="unsupported-element-editor__to-text-mode__btn"
+                onClick={handleTextModeClick}
+                text="Edit in text mode"
+              />
+            )}
+            {isUnknownEntity && (
+              <Button
+                className="unsupported-element-editor__to-text-mode__btn unsupported-element-editor__btn--dark"
+                onClick={handleJsonModeClick}
+                text="View content"
+              />
+            )}
+          </div>
         </div>
       </BlankPanelContent>
     );
@@ -82,6 +110,7 @@ export const UnsupportedElementEditor = observer(() => {
           <UnsupportedEditorPanel
             text="Can't display this element in form-mode"
             isReadOnly={isReadOnly}
+            unsupportedElementEditorState={unsupportedElementEditorState}
           />
         </PanelContent>
       </Panel>

package/src/components/editor/editor-group/diff-editor/ProjectConfigDiffView.tsx

@@ -0,0 +1,60 @@
+/**
+ * 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 type { ProjectConfigurationDiffEditorState } from '../../../../stores/editor/editor-state/diff-viewer-state/ProjectConfigurationDiffEditorState.js';
+import { CompareIcon } from '@finos/legend-art';
+import { JSONDiffView } from '@finos/legend-lego/code-editor';
+import { sortObjectKeys } from '@finos/legend-shared';
+import { getPrettyLabelForRevision } from '../../../../stores/editor/editor-state/entity-diff-editor-state/EntityDiffEditorState.js';
+
+export const ProjectConfigDiffView = observer(
+  (props: { configDiffState: ProjectConfigurationDiffEditorState }) => {
+    const { configDiffState } = props;
+
+    return (
+      <div className="entity-diff-view">
+        <div className="entity-diff-view__header">
+          <div className="entity-diff-view__header__info">
+            <div className="entity-diff-view__header__info__revision-summary">
+              <div className="entity-diff-view__header__info__revision-summary__revision">
+                {getPrettyLabelForRevision(configDiffState.fromRevision)}
+              </div>
+              <div className="entity-diff-view__header__info__revision-summary__icon">
+                <CompareIcon />
+              </div>
+              <div className="entity-diff-view__header__info__revision-summary__revision">
+                {getPrettyLabelForRevision(configDiffState.toRevision)}
+              </div>
+            </div>
+            <div className="entity-diff-view__header__info__revision-summary__icon">
+              <CompareIcon />
+            </div>
+            <div className="entity-diff-view__header__info__revision-summary__revision">
+              {getPrettyLabelForRevision(configDiffState.toRevision)}
+            </div>
+          </div>
+        </div>
+        <div className="entity-diff-view__content">
+          <JSONDiffView
+            from={sortObjectKeys(configDiffState.fromConfig)}
+            to={sortObjectKeys(configDiffState.toConfig)}
+          />
+        </div>
+      </div>
+    );
+  },
+);

package/src/components/{workspace-review/WorkspaceReviewSideBar.tsx → project-reviewer/ProjectReviewSideBar.tsx}

@@ -20,6 +20,7 @@ import {
   clsx,
   PanelLoadingIndicator,
   TruncatedGitMergeIcon,
+  RefreshIcon,
   TimesIcon,
   ArrowUpIcon,
   CheckIcon,
@@ -29,19 +30,27 @@ import {
 import { EntityDiffViewState } from '../../stores/editor/editor-state/entity-diff-editor-state/EntityDiffViewState.js';
 import { LEGEND_STUDIO_TEST_ID } from '../../__lib__/LegendStudioTesting.js';
 import { flowResult } from 'mobx';
-import { type EntityDiff, ReviewState } from '@finos/legend-server-sdlc';
+import {
+  type EntityDiff,
+  ReviewState,
+  EntityChangeType,
+  getChangeTypeIconFromChange,
+} from '@finos/legend-server-sdlc';
 import { entityDiffSorter } from '../../stores/editor/EditorSDLCState.js';
-import { useWorkspaceReviewStore } from './WorkspaceReviewStoreProvider.js';
+import { useProjectReviewerStore } from './ProjectReviewStoreProvider.js';
 import { useEditorStore } from '../editor/EditorStoreProvider.js';
 import { useApplicationStore } from '@finos/legend-application';
 import { formatDistanceToNow } from '@finos/legend-shared';
+import { SPECIAL_REVISION_ALIAS } from '../../stores/editor/editor-state/entity-diff-editor-state/EntityDiffEditorState.js';
+import { ProjectConfigurationDiffEditorState } from '../../stores/editor/editor-state/diff-viewer-state/ProjectConfigurationDiffEditorState.js';
 
-export const WorkspaceReviewSideBar = observer(() => {
-  const reviewStore = useWorkspaceReviewStore();
+export const ProjectReviewerSideBar = observer(() => {
+  const reviewStore = useProjectReviewerStore();
   const editorStore = useEditorStore();
   const applicationStore = useApplicationStore();
   const workspaceContainsSnapshotDependencies =
     editorStore.projectConfigurationEditorState.containsSnapshotDependencies;
+  const approvalString = reviewStore.approvalString;
   // Review infos
   const review = reviewStore.review;
   const currentUser = editorStore.sdlcServerClient.currentUser;
@@ -81,11 +90,11 @@ export const WorkspaceReviewSideBar = observer(() => {
   }
   // Actions
   const isDispatchingAction =
-    reviewStore.isFetchingComparison ||
-    reviewStore.isApprovingReview ||
-    reviewStore.isClosingReview ||
-    reviewStore.isCommittingReview ||
-    reviewStore.isReopeningReview;
+    reviewStore.buildReviewReportState.isInProgress ||
+    reviewStore.approveState.isInProgress ||
+    reviewStore.closeState.isInProgress ||
+    reviewStore.commitState.isInProgress ||
+    reviewStore.reOpenState.isInProgress;
   const closeReview = applicationStore.guardUnhandledError(() =>
     flowResult(reviewStore.closeReview()),
   );
@@ -98,8 +107,12 @@ export const WorkspaceReviewSideBar = observer(() => {
   const approveReview = applicationStore.guardUnhandledError(() =>
     flowResult(reviewStore.approveReview()),
   );
+
+  const refresh = (): void => {
+    reviewStore.refresh();
+  };
   // Changes
-  const changes = editorStore.changeDetectionState.aggregatedWorkspaceChanges;
+  const changes = reviewStore.reviewReport?.diffs ?? [];
   const currentTabState = editorStore.tabManagerState.currentTab;
   const isSelectedDiff = (diff: EntityDiff): boolean =>
     currentTabState instanceof EntityDiffViewState &&
@@ -108,7 +121,25 @@ export const WorkspaceReviewSideBar = observer(() => {
   const openChange =
     (diff: EntityDiff): (() => void) =>
     (): void =>
-      editorStore.workspaceReviewState.openReviewChange(diff);
+      reviewStore.openReviewChange(diff);
+
+  const openConfiguration = (): void => {
+    const diffs = reviewStore.reviewReport?.fromToProjectConfig;
+    if (diffs) {
+      const newTab = new ProjectConfigurationDiffEditorState(
+        diffs[0],
+        diffs[1],
+        reviewStore.editorStore,
+        SPECIAL_REVISION_ALIAS.WORKSPACE_BASE,
+        SPECIAL_REVISION_ALIAS.WORKSPACE_HEAD,
+      );
+      reviewStore.editorStore.tabManagerState.openTab(
+        reviewStore.editorStore.tabManagerState.tabs.find((t) =>
+          t.match(newTab),
+        ) ?? newTab,
+      );
+    }
+  };
 
   return (
     <div className="panel workspace-review__side-bar">
@@ -119,6 +150,14 @@ export const WorkspaceReviewSideBar = observer(() => {
           </div>
         </div>
         <div className="panel__header__actions side-bar__header__actions">
+          <button
+            className="panel__header__action side-bar__header__action workspace-review__close-btn"
+            tabIndex={-1}
+            title="Retrieves latest changes from review"
+            onClick={refresh}
+          >
+            <RefreshIcon />
+          </button>
           {review.state !== ReviewState.COMMITTED && (
             <button
               className="panel__header__action side-bar__header__action workspace-review__close-btn"
@@ -157,6 +196,7 @@ export const WorkspaceReviewSideBar = observer(() => {
                 </span>
               </div>
             </div>
+
             {review.state === ReviewState.CLOSED && (
               <button
                 className="workspace-review__side-bar__review__info__action btn--dark btn--sm"
@@ -207,6 +247,11 @@ export const WorkspaceReviewSideBar = observer(() => {
               </>
             )}
           </div>
+          {approvalString && (
+            <div className="workspace-review__side-bar__review__info__content__status">
+              {approvalString}
+            </div>
+          )}
           <div className="workspace-review__side-bar__review__info__content__status">
             {reviewStatus}
           </div>
@@ -242,6 +287,41 @@ export const WorkspaceReviewSideBar = observer(() => {
                     openDiff={openChange(diff)}
                   />
                 ))}
+
+              {Boolean(reviewStore.reviewReport?.fromToProjectConfig) && (
+                <button
+                  className={clsx('side-bar__panel__item', {
+                    'side-bar__panel__item--selected':
+                      editorStore.tabManagerState.currentTab instanceof
+                      ProjectConfigurationDiffEditorState,
+                  })}
+                  tabIndex={-1}
+                  title={`Project Configuration Modified`}
+                  onClick={openConfiguration}
+                >
+                  <div className="diff-panel__item__info">
+                    <span
+                      className={clsx(
+                        'diff-panel__item__info-name',
+                        `diff-panel__item__info-name--${EntityChangeType.MODIFY.toLowerCase()}`,
+                      )}
+                    >
+                      config
+                    </span>
+                    <span className="diff-panel__item__info-path">
+                      project configuration
+                    </span>
+                  </div>
+                  <div
+                    className={clsx(
+                      'diff-panel__item__type',
+                      `diff-panel__item__type--${EntityChangeType.MODIFY.toLowerCase()}`,
+                    )}
+                  >
+                    {getChangeTypeIconFromChange(EntityChangeType.MODIFY)}
+                  </div>
+                </button>
+              )}
             </PanelContent>
           </div>
         </div>

package/src/components/{workspace-review/WorkspaceReviewStoreProvider.tsx → project-reviewer/ProjectReviewStoreProvider.tsx}

@@ -16,43 +16,43 @@
 
 import { createContext, useContext } from 'react';
 import { useLocalObservable } from 'mobx-react-lite';
-import { WorkspaceReviewStore } from '../../stores/workspace-review/WorkspaceReviewStore.js';
+import { ProjectReviewerStore } from '../../stores/project-reviewer/ProjectReviewerStore.js';
 import { EDITOR_MODE } from '../../stores/editor/EditorConfig.js';
 import { guaranteeNonNullable } from '@finos/legend-shared';
 import { useEditorStore } from '../editor/EditorStoreProvider.js';
 
-const WorkspaceReviewStoreContext = createContext<
-  WorkspaceReviewStore | undefined
+const ProjectReviewerStoreContext = createContext<
+  ProjectReviewerStore | undefined
 >(undefined);
 
-export const WorkspaceReviewStoreProvider = ({
+export const ProjectReviewerStoreProvider = ({
   children,
 }: {
   children: React.ReactNode;
 }): React.ReactElement => {
   const editorStore = useEditorStore();
   editorStore.setMode(EDITOR_MODE.REVIEW);
-  const store = useLocalObservable(() => new WorkspaceReviewStore(editorStore));
+  const store = useLocalObservable(() => new ProjectReviewerStore(editorStore));
   return (
-    <WorkspaceReviewStoreContext.Provider value={store}>
+    <ProjectReviewerStoreContext.Provider value={store}>
       {children}
-    </WorkspaceReviewStoreContext.Provider>
+    </ProjectReviewerStoreContext.Provider>
   );
 };
 
-export const useWorkspaceReviewStore = (): WorkspaceReviewStore =>
+export const useProjectReviewerStore = (): ProjectReviewerStore =>
   guaranteeNonNullable(
-    useContext(WorkspaceReviewStoreContext),
+    useContext(ProjectReviewerStoreContext),
     `Can't find workspace review store in context`,
   );
 
-export const withWorkspaceReviewStore = (
+export const withProjectReviewerStore = (
   WrappedComponent: React.FC,
 ): React.FC =>
-  function WithWorkspaceReviewStore() {
+  function WithProjecteReviewerStore() {
     return (
-      <WorkspaceReviewStoreProvider>
+      <ProjectReviewerStoreProvider>
         <WrappedComponent />
-      </WorkspaceReviewStoreProvider>
+      </ProjectReviewerStoreProvider>
     );
   };

package/src/components/{workspace-review/WorkspaceReview.tsx → project-reviewer/ProjectReviewer.tsx}

@@ -17,11 +17,11 @@
 import { useEffect } from 'react';
 import { observer } from 'mobx-react-lite';
 import {
-  useWorkspaceReviewStore,
-  withWorkspaceReviewStore,
-} from './WorkspaceReviewStoreProvider.js';
-import { WorkspaceReviewSideBar } from './WorkspaceReviewSideBar.js';
-import { WorkspaceReviewPanel } from './WorkspaceReviewPanel.js';
+  useProjectReviewerStore,
+  withProjectReviewerStore,
+} from './ProjectReviewStoreProvider.js';
+import { ProjectReviewerSideBar } from './ProjectReviewSideBar.js';
+import { ProjectReviewerPanel } from './ProjectReviewerPanel.js';
 import { ACTIVITY_MODE } from '../../stores/editor/EditorConfig.js';
 import {
   type ResizablePanelHandlerProps,
@@ -33,15 +33,13 @@ import {
   ResizablePanelSplitter,
   CheckListIcon,
   CodeBranchIcon,
-  CogIcon,
   UserIcon,
   AssistantIcon,
 } from '@finos/legend-art';
 import {
-  type WorkspaceReviewPathParams,
+  type ProjectReviewerPathParams,
   generateSetupRoute,
 } from '../../__lib__/LegendStudioNavigation.js';
-import { flowResult } from 'mobx';
 import {
   useEditorStore,
   withEditorStore,
@@ -49,8 +47,8 @@ import {
 import { useApplicationStore } from '@finos/legend-application';
 import { useParams } from '@finos/legend-application/browser';
 
-const WorkspaceReviewStatusBar = observer(() => {
-  const reviewStore = useWorkspaceReviewStore();
+const ProjectReviewerStatusBar = observer(() => {
+  const reviewStore = useProjectReviewerStore();
   const editorStore = useEditorStore();
   const applicationStore = useApplicationStore();
   const currentUserId =
@@ -59,15 +57,15 @@ const WorkspaceReviewStatusBar = observer(() => {
     ? reviewStore.currentProject.name
     : reviewStore.projectId;
   const review = reviewStore.review;
-  const reviewStatus = reviewStore.isApprovingReview
+  const reviewStatus = reviewStore.approveState.isInProgress
     ? 'approving review...'
-    : reviewStore.isCommittingReview
+    : reviewStore.commitState.isInProgress
     ? 'committing review...'
-    : reviewStore.isClosingReview
+    : reviewStore.closeState.isInProgress
     ? 'closing review...'
-    : reviewStore.isReopeningReview
+    : reviewStore.reOpenState.isInProgress
     ? 'reopening review...'
-    : reviewStore.isFetchingComparison
+    : reviewStore.buildReviewReportState.isInProgress
     ? 'loading changes...'
     : undefined;
   const toggleAssistant = (): void =>
@@ -149,10 +147,8 @@ const WorkspaceReviewStatusBar = observer(() => {
   );
 });
 
-const WorkspaceReviewExplorer = observer(() => {
-  const reviewStore = useWorkspaceReviewStore();
+const ProjectReviewerExplorer = observer(() => {
   const editorStore = useEditorStore();
-  const applicationStore = useApplicationStore();
 
   // layout
   const resizeSideBar = (handleProps: ResizablePanelHandlerProps): void =>
@@ -166,64 +162,47 @@ const WorkspaceReviewExplorer = observer(() => {
       size: editorStore.sideBarDisplayState.size,
     },
   );
-
-  useEffect(() => {
-    flowResult(reviewStore.fetchReviewComparison()).catch(
-      applicationStore.alertUnhandledError,
-    );
-  }, [applicationStore, reviewStore]);
-
   return (
     <ResizablePanelGroup orientation="vertical">
       <ResizablePanel
         {...sideBarCollapsiblePanelGroupProps.collapsiblePanel}
         direction={1}
       >
-        <WorkspaceReviewSideBar />
+        <ProjectReviewerSideBar />
       </ResizablePanel>
       <ResizablePanelSplitter />
       <ResizablePanel
         {...sideBarCollapsiblePanelGroupProps.remainingPanel}
         minSize={300}
       >
-        <WorkspaceReviewPanel />
+        <ProjectReviewerPanel />
       </ResizablePanel>
     </ResizablePanelGroup>
   );
 });
 
-export const WorkspaceReview = withEditorStore(
-  withWorkspaceReviewStore(
+export const ProjectReviewer = withEditorStore(
+  withProjectReviewerStore(
     observer(() => {
-      const params = useParams<WorkspaceReviewPathParams>();
+      const params = useParams<ProjectReviewerPathParams>();
       const projectId = params.projectId;
       const reviewId = params.reviewId;
-      const reviewStore = useWorkspaceReviewStore();
+      const reviewStore = useProjectReviewerStore();
       const editorStore = useEditorStore();
-      const applicationStore = useApplicationStore();
       const changeActivity =
         (activity: ACTIVITY_MODE): (() => void) =>
         (): void =>
           editorStore.setActiveActivity(activity);
-
       useEffect(() => {
         reviewStore.setProjectIdAndReviewId(projectId, reviewId);
-        flowResult(reviewStore.initialize()).catch(
-          applicationStore.alertUnhandledError,
-        );
-        flowResult(reviewStore.getReview()).catch(
-          applicationStore.alertUnhandledError,
-        );
-        flowResult(reviewStore.fetchProject()).catch(
-          applicationStore.alertUnhandledError,
-        );
-      }, [applicationStore, reviewStore, projectId, reviewId]);
+        reviewStore.initialize();
+      }, [reviewStore, projectId, reviewId]);
 
       return (
         <div className="app__page">
           <div className="workspace-review">
             <PanelLoadingIndicator
-              isLoading={reviewStore.isFetchingCurrentReview}
+              isLoading={reviewStore.fetchCurrentReviewState.isInProgress}
             />
             {reviewStore.currentReview && (
               <>
@@ -240,23 +219,14 @@ export const WorkspaceReview = withEditorStore(
                         <CheckListIcon />
                       </button>
                     </div>
-                    <div className="activity-bar__setting">
-                      <button
-                        className="activity-bar__item"
-                        tabIndex={-1}
-                        title="Settings..."
-                      >
-                        <CogIcon />
-                      </button>
-                    </div>
                   </div>
                   <div className="workspace-review__content-container">
                     <div className="workspace-review__content">
-                      <WorkspaceReviewExplorer />
+                      <ProjectReviewerExplorer />
                     </div>
                   </div>
                 </div>
-                <WorkspaceReviewStatusBar />
+                <ProjectReviewerStatusBar />
               </>
             )}
           </div>