switch reviews to leverage comparison apis for performance (#2948)

finos · Feb 15, 2024 · 68ccdb4 · 68ccdb4
1 parent 31d516c
commit 68ccdb4
Show file tree

Hide file tree

Showing 18 changed files with 800 additions and 187 deletions.
diff --git a/.changeset/rich-books-walk.md b/.changeset/rich-books-walk.md
@@ -0,0 +1,4 @@
+---
+'@finos/legend-application-studio': patch
+'@finos/legend-server-sdlc': patch
+---
diff --git a/...plication-studio/src/components/editor/editor-group/diff-editor/ProjectConfigDiffView.tsx b/...plication-studio/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>
+    );
+  },
+);
diff --git a/packages/legend-application-studio/src/components/project-reviewer/ProjectReviewSideBar.tsx b/packages/legend-application-studio/src/components/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 { 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 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 ProjectReviewerSideBar = observer(() => {
   }
   // Actions
   const isDispatchingAction =
-    reviewStore.isFetchingComparison ||
-    reviewStore.isApprovingReview ||
-    reviewStore.isClosingReview ||
-    reviewStore.isCommittingReview ||
-    reviewStore.isReopeningReview;
+    reviewStore.fetchComparisonState.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 ProjectReviewerSideBar = 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 ProjectReviewerSideBar = 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 ProjectReviewerSideBar = 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 ProjectReviewerSideBar = 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 ProjectReviewerSideBar = 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 ProjectReviewerSideBar = 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>

diff --git a/packages/legend-application-studio/src/components/project-reviewer/ProjectReviewer.tsx b/packages/legend-application-studio/src/components/project-reviewer/ProjectReviewer.tsx
@@ -21,7 +21,7 @@ import {
   withProjectReviewerStore,
 } from './ProjectReviewStoreProvider.js';
 import { ProjectReviewerSideBar } from './ProjectReviewSideBar.js';
-import { ProjectReviewerPanel } from './ProjectReviewPanel.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 ProjectReviewerPathParams,
   generateSetupRoute,
 } from '../../__lib__/LegendStudioNavigation.js';
-import { flowResult } from 'mobx';
 import {
   useEditorStore,
   withEditorStore,
@@ -59,15 +57,15 @@ const ProjectReviewerStatusBar = 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.fetchComparisonState.isInProgress
     ? 'loading changes...'
     : undefined;
   const toggleAssistant = (): void =>
@@ -150,9 +148,7 @@ const ProjectReviewerStatusBar = observer(() => {
 });
 
 const ProjectReviewerExplorer = observer(() => {
-  const reviewStore = useProjectReviewerStore();
   const editorStore = useEditorStore();
-  const applicationStore = useApplicationStore();
 
   // layout
   const resizeSideBar = (handleProps: ResizablePanelHandlerProps): void =>
@@ -166,13 +162,6 @@ const ProjectReviewerExplorer = observer(() => {
       size: editorStore.sideBarDisplayState.size,
     },
   );
-
-  useEffect(() => {
-    flowResult(reviewStore.fetchReviewComparison()).catch(
-      applicationStore.alertUnhandledError,
-    );
-  }, [applicationStore, reviewStore]);
-
   return (
     <ResizablePanelGroup orientation="vertical">
       <ResizablePanel
@@ -200,30 +189,20 @@ export const ProjectReviewer = withEditorStore(
       const reviewId = params.reviewId;
       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,15 +219,6 @@ export const ProjectReviewer = 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">