@finos/legend-application-studio 13.0.0

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

@@ -0,0 +1,206 @@
+/**
+ * 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 { EntityDiffViewState } from '../../../stores/editor-state/entity-diff-editor-state/EntityDiffViewState.js';
+import { EntityDiffSideBarItem } from '../edit-panel/diff-editor/EntityDiffView.js';
+import {
+  PanelLoadingIndicator,
+  CloudDownloadIcon,
+  CheckIcon,
+  TimesIcon,
+  InfoCircleIcon,
+  BanIcon,
+} from '@finos/legend-art';
+import { EntityChangeConflictSideBarItem } from '../edit-panel/diff-editor/EntityChangeConflictEditor.js';
+import { EntityChangeConflictEditorState } from '../../../stores/editor-state/entity-diff-editor-state/EntityChangeConflictEditorState.js';
+import { LEGEND_STUDIO_TEST_ID } from '../../LegendStudioTestID.js';
+import { flowResult } from 'mobx';
+import type {
+  EntityChangeConflict,
+  EntityDiff,
+} from '@finos/legend-server-sdlc';
+import { entityDiffSorter } from '../../../stores/EditorSDLCState.js';
+import { useEditorStore } from '../EditorStoreProvider.js';
+import { useApplicationStore } from '@finos/legend-application';
+
+export const WorkspaceUpdateConflictResolver = observer(() => {
+  const editorStore = useEditorStore();
+  const applicationStore = useApplicationStore();
+  const sdlcState = editorStore.sdlcState;
+  const currentEditorState = editorStore.currentEditorState;
+  const conflictResolutionState = editorStore.conflictResolutionState;
+  // Actions
+  const isRunningTask =
+    editorStore.workspaceUpdaterState.isUpdatingWorkspace ||
+    conflictResolutionState.isInitializingConflictResolution ||
+    conflictResolutionState.isAcceptingConflictResolution ||
+    conflictResolutionState.isDiscardingConflictResolutionChanges ||
+    conflictResolutionState.isAbortingConflictResolution;
+  const updateWorkspace = applicationStore.guardUnhandledError(() =>
+    flowResult(editorStore.workspaceUpdaterState.updateWorkspace()),
+  );
+  const accept = applicationStore.guardUnhandledError(() =>
+    flowResult(conflictResolutionState.acceptConflictResolution()),
+  );
+  const discardChanges = applicationStore.guardUnhandledError(() =>
+    flowResult(conflictResolutionState.discardConflictResolutionChanges()),
+  );
+  const abort = applicationStore.guardUnhandledError(() =>
+    flowResult(conflictResolutionState.abortConflictResolution()),
+  );
+  // Conflicts
+  const conflicts = conflictResolutionState.conflicts;
+  const isSelectedConflict = (conflict: EntityChangeConflict): boolean =>
+    currentEditorState instanceof EntityChangeConflictEditorState &&
+    conflict.entityPath === currentEditorState.entityPath;
+  const openConflict =
+    (conflict: EntityChangeConflict): (() => void) =>
+    (): void =>
+      conflictResolutionState.openConflict(conflict);
+  // Changes
+  const changes = conflictResolutionState.changes;
+  const openChange =
+    (diff: EntityDiff): (() => void) =>
+    (): void =>
+      conflictResolutionState.openConflictResolutionChange(diff);
+  const isSelectedDiff = (diff: EntityDiff): boolean =>
+    currentEditorState instanceof EntityDiffViewState &&
+    diff.oldPath === currentEditorState.fromEntityPath &&
+    diff.newPath === currentEditorState.toEntityPath;
+
+  return (
+    <div className="panel conflict-resolution">
+      <div className="panel__header side-bar__header">
+        <div className="panel__header__title conflict-resolution__header__title">
+          <div className="panel__header__title__content side-bar__header__title__content">
+            CONFLICT RESOLUTION
+          </div>
+        </div>
+        <div className="panel__header__actions side-bar__header__actions">
+          <button
+            className="panel__header__action side-bar__header__action conflict-resolution__update-btn"
+            onClick={updateWorkspace}
+            disabled={!sdlcState.isWorkspaceOutdated || isRunningTask}
+            tabIndex={-1}
+            title="Update workspace"
+          >
+            <CloudDownloadIcon />
+          </button>
+          <button
+            className="panel__header__action side-bar__header__action"
+            onClick={accept}
+            disabled={
+              !conflictResolutionState.hasResolvedAllConflicts || isRunningTask
+            }
+            tabIndex={-1}
+            title="Accept resolution"
+          >
+            <CheckIcon />
+          </button>
+          <button
+            className="panel__header__action side-bar__header__action"
+            onClick={discardChanges}
+            disabled={isRunningTask}
+            tabIndex={-1}
+            title="Discard all changes made in the workspace"
+          >
+            <TimesIcon />
+          </button>
+          <button
+            className="panel__header__action side-bar__header__action"
+            onClick={abort}
+            disabled={isRunningTask}
+            tabIndex={-1}
+            title="Abort conflict resolution"
+          >
+            <BanIcon />
+          </button>
+        </div>
+      </div>
+      <div className="panel__content side-bar__content">
+        <PanelLoadingIndicator isLoading={isRunningTask} />
+        <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 applied on top of the project revision the workspace is updated to"
+              >
+                <InfoCircleIcon />
+              </div>
+            </div>
+            <div
+              className="side-bar__panel__header__changes-count"
+              data-testid={
+                LEGEND_STUDIO_TEST_ID.SIDEBAR_PANEL_HEADER__CHANGES_COUNT
+              }
+            >
+              {changes.length +
+                (conflictResolutionState.hasResolvedAllConflicts
+                  ? 0
+                  : conflicts.length)}
+            </div>
+          </div>
+          <div className="panel__content">
+            {!conflictResolutionState.hasResolvedAllConflicts && (
+              <>
+                {conflicts
+                  .slice()
+                  .sort((a, b) => a.entityName.localeCompare(b.entityName))
+                  .map((conflict) => (
+                    <EntityChangeConflictSideBarItem
+                      key={`conflict-${conflict.entityPath}`}
+                      conflict={conflict}
+                      isSelected={isSelectedConflict(conflict)}
+                      openConflict={openConflict(conflict)}
+                    />
+                  ))}
+                {Boolean(conflicts.length) && Boolean(changes.length) && (
+                  <div className="diff-panel__item-section-separator" />
+                )}
+                {changes
+                  .slice()
+                  .sort(entityDiffSorter)
+                  .map((diff) => (
+                    <EntityDiffSideBarItem
+                      key={diff.key}
+                      diff={diff}
+                      isSelected={isSelectedDiff(diff)}
+                      openDiff={openChange(diff)}
+                    />
+                  ))}
+              </>
+            )}
+            {conflictResolutionState.hasResolvedAllConflicts &&
+              changes
+                .slice()
+                .sort(entityDiffSorter)
+                .map((diff) => (
+                  <EntityDiffSideBarItem
+                    key={diff.key}
+                    diff={diff}
+                    isSelected={isSelectedDiff(diff)}
+                    openDiff={openChange(diff)}
+                  />
+                ))}
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+});

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

@@ -0,0 +1,279 @@
+/**
+ * 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 { EntityDiffViewState } from '../../../stores/editor-state/entity-diff-editor-state/EntityDiffViewState.js';
+import { EntityDiffSideBarItem } from '../../editor/edit-panel/diff-editor/EntityDiffView.js';
+import {
+  clsx,
+  PanelLoadingIndicator,
+  ResizablePanel,
+  ResizablePanelGroup,
+  ResizablePanelSplitter,
+  ResizablePanelSplitterLine,
+  CloudDownloadIcon,
+  RefreshIcon,
+  InfoCircleIcon,
+} from '@finos/legend-art';
+import { Link } from 'react-router-dom';
+import { EntityChangeConflictSideBarItem } from '../../editor/edit-panel/diff-editor/EntityChangeConflictEditor.js';
+import { EntityChangeConflictEditorState } from '../../../stores/editor-state/entity-diff-editor-state/EntityChangeConflictEditorState.js';
+import { generateReviewRoute } from '../../../stores/LegendStudioRouter.js';
+import { LEGEND_STUDIO_TEST_ID } from '../../LegendStudioTestID.js';
+import { flowResult } from 'mobx';
+import type {
+  EntityChangeConflict,
+  EntityDiff,
+} from '@finos/legend-server-sdlc';
+import { entityDiffSorter } from '../../../stores/EditorSDLCState.js';
+import { useEditorStore } from '../EditorStoreProvider.js';
+import {
+  ActionAlertType,
+  ActionAlertActionType,
+} from '@finos/legend-application';
+import { useLegendStudioApplicationStore } from '../../LegendStudioBaseStoreProvider.js';
+
+export const WorkspaceUpdater = observer(() => {
+  const editorStore = useEditorStore();
+  const applicationStore = useLegendStudioApplicationStore();
+  const sdlcState = editorStore.sdlcState;
+  const currentEditorState = editorStore.currentEditorState;
+  const workspaceUpdaterState = editorStore.workspaceUpdaterState;
+  // Actions
+  const updateWorkspace = (): void => {
+    if (editorStore.hasUnpushedChanges) {
+      editorStore.setActionAlertInfo({
+        message: 'You have unpushed changes',
+        prompt:
+          'This action will discard these changes and refresh the application',
+        type: ActionAlertType.CAUTION,
+        onEnter: (): void => editorStore.setBlockGlobalHotkeys(true),
+        onClose: (): void => editorStore.setBlockGlobalHotkeys(false),
+        actions: [
+          {
+            label: 'Proceed to update workspace',
+            type: ActionAlertActionType.PROCEED_WITH_CAUTION,
+            handler: (): void => {
+              editorStore.setIgnoreNavigationBlocking(true);
+              flowResult(workspaceUpdaterState.updateWorkspace()).catch(
+                applicationStore.alertUnhandledError,
+              );
+            },
+          },
+          {
+            label: 'Abort',
+            type: ActionAlertActionType.PROCEED,
+            default: true,
+          },
+        ],
+      });
+    } else {
+      flowResult(workspaceUpdaterState.updateWorkspace()).catch(
+        applicationStore.alertUnhandledError,
+      );
+    }
+  };
+  const refreshWorkspaceUpdater = applicationStore.guardUnhandledError(() =>
+    flowResult(workspaceUpdaterState.refreshWorkspaceUpdater()),
+  );
+  const isDispatchingAction =
+    workspaceUpdaterState.isUpdatingWorkspace ||
+    sdlcState.isCheckingIfWorkspaceIsOutdated ||
+    workspaceUpdaterState.isRefreshingWorkspaceUpdater;
+  // Conflicts
+  const conflicts =
+    editorStore.changeDetectionState.potentialWorkspaceUpdateConflicts;
+  const isSelectedConflict = (conflict: EntityChangeConflict): boolean =>
+    currentEditorState instanceof EntityChangeConflictEditorState &&
+    conflict.entityPath === currentEditorState.entityPath;
+  const openPotentialConflict =
+    (conflict: EntityChangeConflict): (() => void) =>
+    (): void =>
+      workspaceUpdaterState.openPotentialWorkspaceUpdateConflict(conflict);
+  // Changes
+  const changes =
+    editorStore.changeDetectionState.aggregatedProjectLatestChanges;
+  const changesWithoutConflicts = changes.filter(
+    (change) =>
+      !conflicts
+        .map((conflict) => conflict.entityPath)
+        .includes(change.entityPath),
+  );
+  const isSelectedDiff = (diff: EntityDiff): boolean =>
+    currentEditorState instanceof EntityDiffViewState &&
+    diff.oldPath === currentEditorState.fromEntityPath &&
+    diff.newPath === currentEditorState.toEntityPath;
+  const openChange =
+    (diff: EntityDiff): (() => void) =>
+    (): void =>
+      workspaceUpdaterState.openProjectLatestChange(diff);
+  // Committed Reviews
+  const commitedReviews =
+    workspaceUpdaterState.committedReviewsBetweenWorkspaceBaseAndProjectLatest;
+
+  // since the project latest changes can be affected by other users, we refresh it more proactively
+  useEffect(() => {
+    flowResult(workspaceUpdaterState.refreshWorkspaceUpdater()).catch(
+      applicationStore.alertUnhandledError,
+    );
+  }, [applicationStore, workspaceUpdaterState]);
+
+  return (
+    <div className="panel workspace-updater">
+      <div className="panel__header side-bar__header">
+        <div className="panel__header__title workspace-updater__header__title">
+          <div className="panel__header__title__content side-bar__header__title__content">
+            WORKSPACE UPDATER
+          </div>
+        </div>
+        <div className="panel__header__actions side-bar__header__actions">
+          <button
+            className={clsx(
+              'panel__header__action side-bar__header__action workspace-updater__refresh-btn',
+              {
+                'workspace-updater__refresh-btn--loading':
+                  workspaceUpdaterState.isRefreshingWorkspaceUpdater,
+              },
+            )}
+            onClick={refreshWorkspaceUpdater}
+            disabled={isDispatchingAction}
+            tabIndex={-1}
+            title="Refresh"
+          >
+            <RefreshIcon />
+          </button>
+          <button
+            className="panel__header__action side-bar__header__action workspace-updater__update-btn"
+            onClick={updateWorkspace}
+            disabled={!sdlcState.isWorkspaceOutdated || isDispatchingAction}
+            tabIndex={-1}
+            title="Update workspace"
+          >
+            <CloudDownloadIcon />
+          </button>
+        </div>
+      </div>
+      <div className="panel__content side-bar__content">
+        <PanelLoadingIndicator isLoading={isDispatchingAction} />
+        <ResizablePanelGroup orientation="horizontal">
+          <ResizablePanel size={400} minSize={28}>
+            <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 to project since the revision the workspace is created.\nPotential workspace update conflicts are also shown if they exist'
+                    }
+                  >
+                    <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">
+                {conflicts
+                  .slice()
+                  .sort((a, b) => a.entityName.localeCompare(b.entityName))
+                  .map((conflict) => (
+                    <EntityChangeConflictSideBarItem
+                      key={`conflict-${conflict.entityPath}`}
+                      conflict={conflict}
+                      isSelected={isSelectedConflict(conflict)}
+                      openConflict={openPotentialConflict(conflict)}
+                    />
+                  ))}
+                {Boolean(conflicts.length) &&
+                  Boolean(changesWithoutConflicts.length) && (
+                    <div className="diff-panel__item-section-separator" />
+                  )}
+                {changesWithoutConflicts
+                  .slice()
+                  .sort(entityDiffSorter)
+                  .map((diff) => (
+                    <EntityDiffSideBarItem
+                      key={diff.key}
+                      diff={diff}
+                      isSelected={isSelectedDiff(diff)}
+                      openDiff={openChange(diff)}
+                    />
+                  ))}
+              </div>
+            </div>
+          </ResizablePanel>
+          <ResizablePanelSplitter>
+            <ResizablePanelSplitterLine color="var(--color-dark-grey-100)" />
+          </ResizablePanelSplitter>
+          <ResizablePanel minSize={28}>
+            <div className="panel side-bar__panel">
+              <div className="panel__header">
+                <div className="panel__header__title">
+                  <div className="panel__header__title__content">
+                    COMMITTED REVIEWS
+                  </div>
+                  <div
+                    className="side-bar__panel__title__info"
+                    title="All committed reviews in the project 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
+                  }
+                >
+                  {commitedReviews.length}
+                </div>
+              </div>
+              <div className="panel__content">
+                {commitedReviews.map((review) => (
+                  <Link
+                    key={review.id}
+                    className="side-bar__panel__item workspace-updater__review__link"
+                    rel="noopener noreferrer"
+                    target="_blank"
+                    to={generateReviewRoute(review.projectId, review.id)}
+                    title={'See review detail'}
+                  >
+                    <div className="workspace-updater__review">
+                      <span className="workspace-updater__review__name">
+                        {review.title}
+                      </span>
+                      <span className="workspace-updater__review__info">
+                        {review.author.name}
+                      </span>
+                    </div>
+                  </Link>
+                ))}
+              </div>
+            </div>
+          </ResizablePanel>
+        </ResizablePanelGroup>
+      </div>
+    </div>
+  );
+});