@finos/legend-application-studio 13.0.0

package/src/components/workspace-review/WorkspaceReview.tsx

@@ -0,0 +1,247 @@
+/**
+ * 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 { useEffect } from 'react';
+import { observer } from 'mobx-react-lite';
+import {
+  useWorkspaceReviewStore,
+  withWorkspaceReviewStore,
+} from './WorkspaceReviewStoreProvider.js';
+import { useParams } from 'react-router';
+import { WorkspaceReviewSideBar } from './WorkspaceReviewSideBar.js';
+import { WorkspaceReviewPanel } from './WorkspaceReviewPanel.js';
+import { ACTIVITY_MODE } from '../../stores/EditorConfig.js';
+import { Link } from 'react-router-dom';
+import {
+  type ResizablePanelHandlerProps,
+  getControlledResizablePanelProps,
+  clsx,
+  PanelLoadingIndicator,
+  ResizablePanel,
+  ResizablePanelGroup,
+  ResizablePanelSplitter,
+  CheckListIcon,
+  CodeBranchIcon,
+  CogIcon,
+  UserIcon,
+  AssistantIcon,
+} from '@finos/legend-art';
+import {
+  type ReviewPathParams,
+  generateViewProjectRoute,
+  generateEditorRoute,
+} from '../../stores/LegendStudioRouter.js';
+import { flowResult } from 'mobx';
+import {
+  useEditorStore,
+  withEditorStore,
+} from '../editor/EditorStoreProvider.js';
+import { useApplicationStore } from '@finos/legend-application';
+
+const WorkspaceReviewStatusBar = observer(() => {
+  const reviewStore = useWorkspaceReviewStore();
+  const editorStore = useEditorStore();
+  const applicationStore = useApplicationStore();
+  const currentUserId =
+    editorStore.sdlcServerClient.currentUser?.userId ?? '(unknown)';
+  const currentProject = reviewStore.currentProject
+    ? reviewStore.currentProject.name
+    : reviewStore.projectId;
+  const review = reviewStore.review;
+  const reviewStatus = reviewStore.isApprovingReview
+    ? 'approving review...'
+    : reviewStore.isCommittingReview
+    ? 'committing review...'
+    : reviewStore.isClosingReview
+    ? 'closing review...'
+    : reviewStore.isReopeningReview
+    ? 'reopening review...'
+    : reviewStore.isFetchingComparison
+    ? 'loading changes...'
+    : undefined;
+  const toggleAssistant = (): void =>
+    applicationStore.assistantService.toggleAssistant();
+
+  return (
+    <div className="workspace-review__status-bar workspace-review__status-bar">
+      <div className="workspace-review__status-bar__left">
+        <div className="workspace-review__status-bar__workspace">
+          <div className="workspace-review__status-bar__workspace__icon">
+            <CodeBranchIcon />
+          </div>
+          <div className="workspace-review__status-bar__workspace__project">
+            <Link to={generateViewProjectRoute(reviewStore.projectId)}>
+              {currentProject}
+            </Link>
+          </div>
+          /
+          <div className="workspace-review__status-bar__workspace__workspace">
+            <Link
+              to={generateEditorRoute(
+                reviewStore.projectId,
+                review.workspaceId,
+                review.workspaceType,
+              )}
+            >
+              {review.workspaceId}
+            </Link>
+          </div>
+          <div className="workspace-review__status-bar__review">
+            <a target="_blank" rel="noopener noreferrer" href={review.webURL}>
+              {review.title}
+            </a>
+          </div>
+        </div>
+      </div>
+      <div className="workspace-review__status-bar__right">
+        <div className="workspace-review__status-bar__status">
+          {reviewStatus}
+        </div>
+        <div className="workspace-review__status-bar__user">
+          <div className="workspace-review__status-bar__user__icon">
+            <UserIcon />
+          </div>
+          <div className="review__status-bar__user__name">{currentUserId}</div>
+        </div>
+        <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 WorkspaceReviewExplorer = observer(() => {
+  const reviewStore = useWorkspaceReviewStore();
+  const editorStore = useEditorStore();
+  const applicationStore = useApplicationStore();
+  const resizeSideBar = (handleProps: ResizablePanelHandlerProps): void =>
+    editorStore.sideBarDisplayState.setSize(
+      (handleProps.domElement as HTMLDivElement).getBoundingClientRect().width,
+    );
+
+  useEffect(() => {
+    flowResult(reviewStore.fetchReviewComparison()).catch(
+      applicationStore.alertUnhandledError,
+    );
+  }, [applicationStore, reviewStore]);
+
+  return (
+    <ResizablePanelGroup orientation="vertical">
+      <ResizablePanel
+        {...getControlledResizablePanelProps(
+          editorStore.sideBarDisplayState.size === 0,
+          {
+            onStopResize: resizeSideBar,
+            size: editorStore.sideBarDisplayState.size,
+          },
+        )}
+        direction={1}
+      >
+        <WorkspaceReviewSideBar />
+      </ResizablePanel>
+      <ResizablePanelSplitter />
+      <ResizablePanel minSize={300}>
+        <WorkspaceReviewPanel />
+      </ResizablePanel>
+    </ResizablePanelGroup>
+  );
+});
+
+export const WorkspaceReview = withEditorStore(
+  withWorkspaceReviewStore(
+    observer(() => {
+      const params = useParams<ReviewPathParams>();
+      const projectId = params.projectId;
+      const reviewId = params.reviewId;
+      const reviewStore = useWorkspaceReviewStore();
+      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]);
+
+      return (
+        <div className="app__page">
+          <div className="workspace-review">
+            <PanelLoadingIndicator
+              isLoading={reviewStore.isFetchingCurrentReview}
+            />
+            {reviewStore.currentReview && (
+              <>
+                <div className="workspace-review__body">
+                  <div className="activity-bar">
+                    <div className="activity-bar__items">
+                      <button
+                        key={ACTIVITY_MODE.REVIEW}
+                        className="activity-bar__item activity-bar__item--active workspace-review__activity-bar__review-icon"
+                        tabIndex={-1}
+                        title={'Review'}
+                        onClick={changeActivity(ACTIVITY_MODE.REVIEW)}
+                      >
+                        <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 />
+                    </div>
+                  </div>
+                </div>
+                <WorkspaceReviewStatusBar />
+              </>
+            )}
+          </div>
+        </div>
+      );
+    }),
+  ),
+);

package/src/components/workspace-review/WorkspaceReviewPanel.tsx

@@ -0,0 +1,190 @@
+/**
+ * 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 { clsx, DropdownMenu, ContextMenu, TimesIcon } from '@finos/legend-art';
+import { filterByType } from '@finos/legend-shared';
+import {
+  EntityDiffViewState,
+  DIFF_VIEW_MODE,
+} from '../../stores/editor-state/entity-diff-editor-state/EntityDiffViewState.js';
+import { EntityDiffView } from '../editor/edit-panel/diff-editor/EntityDiffView.js';
+import type { EditorState } from '../../stores/editor-state/EditorState.js';
+import { useEditorStore } from '../editor/EditorStoreProvider.js';
+import { forwardRef } from 'react';
+
+const WorkspaceReviewPanelSplashScreen: React.FC = () => (
+  <div className="workspace-review-panel__splash-screen"></div>
+);
+
+const WorkspaceReviewPanelHeaderTabContextMenu = observer(
+  forwardRef<
+    HTMLDivElement,
+    {
+      editorState: EditorState;
+    }
+  >(function ReviewPanelHeaderTabContextMenu(props, ref) {
+    const { editorState } = props;
+    const editorStore = useEditorStore();
+    const close = (): void => editorStore.closeState(editorState);
+    const closeOthers = (): void =>
+      editorStore.closeAllOtherStates(editorState);
+    const closeAll = (): void => editorStore.closeAllStates();
+
+    return (
+      <div
+        ref={ref}
+        className="workspace-review-panel__header__tab__context-menu"
+      >
+        <button
+          className="workspace-review-panel__header__tab__context-menu__item"
+          onClick={close}
+        >
+          Close
+        </button>
+        <button
+          className="workspace-review-panel__header__tab__context-menu__item"
+          disabled={editorStore.openedEditorStates.length < 2}
+          onClick={closeOthers}
+        >
+          Close Others
+        </button>
+        <button
+          className="workspace-review-panel__header__tab__context-menu__item"
+          onClick={closeAll}
+        >
+          Close All
+        </button>
+      </div>
+    );
+  }),
+);
+
+export const WorkspaceReviewPanel = observer(() => {
+  const editorStore = useEditorStore();
+  const currentEditorState =
+    editorStore.currentEditorState instanceof EntityDiffViewState
+      ? editorStore.currentEditorState
+      : undefined;
+  const openedEditorStates = editorStore.openedEditorStates.filter(
+    filterByType(EntityDiffViewState),
+  );
+  const closeTab =
+    (diffState: EditorState): React.MouseEventHandler =>
+    (event): void =>
+      editorStore.closeState(diffState);
+  const closeTabOnMiddleClick =
+    (editorState: EditorState): React.MouseEventHandler =>
+    (event): void => {
+      if (event.nativeEvent.button === 1) {
+        editorStore.closeState(editorState);
+      }
+    };
+  const switchTab =
+    (editorState: EditorState): (() => void) =>
+    (): void =>
+      editorStore.openState(editorState);
+  const switchViewMode =
+    (mode: DIFF_VIEW_MODE): (() => void) =>
+    (): void =>
+      currentEditorState?.setDiffMode(mode);
+
+  if (!currentEditorState) {
+    return <WorkspaceReviewPanelSplashScreen />;
+  }
+  return (
+    <div className="panel workspace-review-panel">
+      <ContextMenu
+        className="panel__header workspace-review-panel__header"
+        disabled={true}
+      >
+        <div className="workspace-review-panel__header__tabs">
+          {openedEditorStates.map((editorState) => (
+            <div
+              className={clsx('workspace-review-panel__header__tab', {
+                'workspace-review-panel__header__tab--active':
+                  editorState === currentEditorState,
+              })}
+              key={editorState.uuid}
+              onMouseUp={closeTabOnMiddleClick(editorState)}
+            >
+              <ContextMenu
+                className="workspace-review-panel__header__tab__content"
+                content={
+                  <WorkspaceReviewPanelHeaderTabContextMenu
+                    editorState={editorState}
+                  />
+                }
+              >
+                <button
+                  className="workspace-review-panel__header__tab__element__name"
+                  tabIndex={-1}
+                  onClick={switchTab(editorState)}
+                >
+                  {editorState.headerName}
+                </button>
+                <button
+                  className="workspace-review-panel__header__tab__close-btn"
+                  onClick={closeTab(editorState)}
+                  tabIndex={-1}
+                >
+                  <TimesIcon />
+                </button>
+              </ContextMenu>
+            </div>
+          ))}
+        </div>
+        <div className="workspace-review-panel__header__actions">
+          <DropdownMenu
+            className="workspace-review-panel__element-view"
+            content={
+              <div className="workspace-review-panel__element-view__options">
+                <div
+                  className="workspace-review-panel__element-view__option"
+                  onClick={switchViewMode(DIFF_VIEW_MODE.GRAMMAR)}
+                >
+                  {DIFF_VIEW_MODE.GRAMMAR}
+                </div>
+                <div
+                  className="workspace-review-panel__element-view__option"
+                  onClick={switchViewMode(DIFF_VIEW_MODE.JSON)}
+                >
+                  {DIFF_VIEW_MODE.JSON}
+                </div>
+              </div>
+            }
+            menuProps={{
+              anchorOrigin: { vertical: 'bottom', horizontal: 'right' },
+              transformOrigin: { vertical: 'top', horizontal: 'right' },
+            }}
+          >
+            <button
+              className="workspace-review-panel__element-view__type"
+              title="View as..."
+            >
+              <div className="workspace-review-panel__element-view__type__label">
+                {currentEditorState.diffMode}
+              </div>
+            </button>
+          </DropdownMenu>
+        </div>
+      </ContextMenu>
+      <div className="panel__content workspace-review-panel__content">
+        <EntityDiffView entityDiffViewState={currentEditorState} />
+      </div>
+    </div>
+  );
+});

package/src/components/workspace-review/WorkspaceReviewSideBar.tsx

@@ -0,0 +1,250 @@
+/**
+ * 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 { EntityDiffSideBarItem } from '../editor/edit-panel/diff-editor/EntityDiffView.js';
+import {
+  clsx,
+  PanelLoadingIndicator,
+  TruncatedGitMergeIcon,
+  TimesIcon,
+  ArrowUpIcon,
+  CheckIcon,
+  InfoCircleIcon,
+} from '@finos/legend-art';
+import { formatDistanceToNow } from 'date-fns';
+import { EntityDiffViewState } from '../../stores/editor-state/entity-diff-editor-state/EntityDiffViewState.js';
+import { LEGEND_STUDIO_TEST_ID } from '../LegendStudioTestID.js';
+import { flowResult } from 'mobx';
+import { type EntityDiff, ReviewState } from '@finos/legend-server-sdlc';
+import { entityDiffSorter } from '../../stores/EditorSDLCState.js';
+import { useWorkspaceReviewStore } from './WorkspaceReviewStoreProvider.js';
+import { useEditorStore } from '../editor/EditorStoreProvider.js';
+import { useApplicationStore } from '@finos/legend-application';
+
+export const WorkspaceReviewSideBar = observer(() => {
+  const reviewStore = useWorkspaceReviewStore();
+  const editorStore = useEditorStore();
+  const applicationStore = useApplicationStore();
+  const workspaceContainsSnapshotDependencies =
+    editorStore.projectConfigurationEditorState.containsSnapshotDependencies;
+  // Review infos
+  const review = reviewStore.review;
+  const currentUser = editorStore.sdlcServerClient.currentUser;
+  let reviewStatus = '';
+  switch (review.state) {
+    case ReviewState.OPEN:
+      reviewStatus = `created ${formatDistanceToNow(review.createdAt, {
+        includeSeconds: true,
+        addSuffix: true,
+      })} by ${review.author.name}`;
+      break;
+    case ReviewState.CLOSED:
+      reviewStatus = review.closedAt
+        ? `closed ${formatDistanceToNow(review.closedAt, {
+            includeSeconds: true,
+            addSuffix: true,
+          })}`
+        : 'review is closed';
+      break;
+    case ReviewState.COMMITTED:
+      reviewStatus = review.committedAt
+        ? `committed ${formatDistanceToNow(review.committedAt, {
+            includeSeconds: true,
+            addSuffix: true,
+          })}`
+        : 'review is closed';
+      break;
+    case ReviewState.UNKNOWN:
+      reviewStatus = review.lastUpdatedAt
+        ? `last updated ${formatDistanceToNow(review.lastUpdatedAt, {
+            includeSeconds: true,
+            addSuffix: true,
+          })}`
+        : 'review status is unknown';
+      break;
+    default:
+  }
+  // Actions
+  const isDispatchingAction =
+    reviewStore.isFetchingComparison ||
+    reviewStore.isApprovingReview ||
+    reviewStore.isClosingReview ||
+    reviewStore.isCommittingReview ||
+    reviewStore.isReopeningReview;
+  const closeReview = applicationStore.guardUnhandledError(() =>
+    flowResult(reviewStore.closeReview()),
+  );
+  const reOpenReview = applicationStore.guardUnhandledError(() =>
+    flowResult(reviewStore.reOpenReview()),
+  );
+  const commitReview = applicationStore.guardUnhandledError(() =>
+    flowResult(reviewStore.commitReview()),
+  );
+  const approveReview = applicationStore.guardUnhandledError(() =>
+    flowResult(reviewStore.approveReview()),
+  );
+  // Changes
+  const changes = editorStore.changeDetectionState.aggregatedWorkspaceChanges;
+  const currentEditorState = editorStore.currentEditorState;
+  const isSelectedDiff = (diff: EntityDiff): boolean =>
+    currentEditorState instanceof EntityDiffViewState &&
+    diff.oldPath === currentEditorState.fromEntityPath &&
+    diff.newPath === currentEditorState.toEntityPath;
+  const openChange =
+    (diff: EntityDiff): (() => void) =>
+    (): void =>
+      editorStore.workspaceReviewState.openReviewChange(diff);
+
+  return (
+    <div className="panel workspace-review__side-bar">
+      <div className="panel__header side-bar__header">
+        <div className="panel__header__title workspace-review__side-bar__header__title">
+          <div className="panel__header__title__content side-bar__header__title__content">
+            REVIEW
+          </div>
+        </div>
+        <div className="panel__header__actions side-bar__header__actions">
+          {review.state !== ReviewState.COMMITTED && (
+            <button
+              className="panel__header__action side-bar__header__action workspace-review__close-btn"
+              disabled={
+                isDispatchingAction || review.state === ReviewState.CLOSED
+              }
+              onClick={closeReview}
+              tabIndex={-1}
+              title="Close review"
+            >
+              <TimesIcon />
+            </button>
+          )}
+        </div>
+      </div>
+      <div className="panel__content side-bar__content">
+        <PanelLoadingIndicator isLoading={isDispatchingAction} />
+        <div className="panel workspace-review">
+          <div className="workspace-review__side-bar__review__info">
+            <div
+              className={clsx(
+                'workspace-review__side-bar__review__info__content',
+                {
+                  'workspace-review__side-bar__review__info__content--closed':
+                    review.state === ReviewState.CLOSED,
+                },
+                {
+                  'workspace-review__side-bar__review__info__content--committed':
+                    review.state === ReviewState.COMMITTED,
+                },
+              )}
+            >
+              <div className="workspace-review__side-bar__review__info__content__title">
+                <span className="workspace-review__side-bar__review__info__content__title__review-name">
+                  {review.title}
+                </span>
+              </div>
+            </div>
+            {review.state === ReviewState.CLOSED && (
+              <button
+                className="workspace-review__side-bar__review__info__action btn--dark btn--sm"
+                onClick={reOpenReview}
+                disabled={isDispatchingAction}
+                tabIndex={-1}
+                title={'Re-open review'}
+              >
+                <ArrowUpIcon />
+              </button>
+            )}
+            {review.state === ReviewState.OPEN && (
+              <>
+                <button
+                  className="btn--dark btn--sm"
+                  onClick={approveReview}
+                  // TODO: when we improve approval APIs we can know when to hide/disable this button altogether, right now the check is just to ensure nobody can self-approve
+                  disabled={
+                    isDispatchingAction ||
+                    currentUser?.userId === review.author.name
+                  }
+                  tabIndex={-1}
+                  title={'Approve review'}
+                >
+                  <CheckIcon />
+                </button>
+                <button
+                  className={clsx(
+                    'btn--dark btn--sm workspace-review__side-bar__merge-btn',
+                    {
+                      'btn--error': workspaceContainsSnapshotDependencies,
+                    },
+                  )}
+                  onClick={commitReview}
+                  // TODO: when we improve approval APIs we can know when to hide/disable this button altogether
+                  disabled={
+                    isDispatchingAction || workspaceContainsSnapshotDependencies
+                  }
+                  tabIndex={-1}
+                  title={
+                    !workspaceContainsSnapshotDependencies
+                      ? 'Commit review'
+                      : `Can't commit review: workspace has snapshot dependencies`
+                  }
+                >
+                  <TruncatedGitMergeIcon />
+                </button>
+              </>
+            )}
+          </div>
+          <div className="workspace-review__side-bar__review__info__content__status">
+            {reviewStatus}
+          </div>
+          <div className="panel side-bar__panel">
+            <div className="panel__header">
+              <div className="panel__header__title">
+                <div className="panel__header__title__content">CHANGES</div>
+                <div
+                  className="side-bar__panel__title__info"
+                  title="All changes made in the workspace since the revision the workspace is created"
+                >
+                  <InfoCircleIcon />
+                </div>
+              </div>
+              <div
+                className="side-bar__panel__header__changes-count"
+                data-testid={
+                  LEGEND_STUDIO_TEST_ID.SIDEBAR_PANEL_HEADER__CHANGES_COUNT
+                }
+              >
+                {changes.length}
+              </div>
+            </div>
+            <div className="panel__content">
+              {changes
+                .slice()
+                .sort(entityDiffSorter)
+                .map((diff) => (
+                  <EntityDiffSideBarItem
+                    key={diff.key}
+                    diff={diff}
+                    isSelected={isSelectedDiff(diff)}
+                    openDiff={openChange(diff)}
+                  />
+                ))}
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+});