show ProjectOverview in viewer mode and enable opening/running query …

…builder in read only mode (#753)

* enable opening query builder via read only service editor

* add project overview to viewer mode

.changeset/polite-walls-wonder.md

@@ -0,0 +1,5 @@
+---
+'@finos/legend-studio': patch
+---
+
+Show `ProjectOverview` in viewer mode.

.changeset/tester-coffee-maker.md

@@ -0,0 +1,5 @@
+---
+'@finos/legend-studio-extension-query-builder': patch
+---
+
+Enable opening query builder in read-only mode for mapping test and service.

packages/legend-studio-extension-query-builder/src/components/MappingTestQueryBuilder.tsx

@@ -79,6 +79,7 @@ export const MappingTestQueryBuilder = observer(
                   <button
                     className="query-builder__dialog__header__custom-action"
                     tabIndex={-1}
+                    disabled={isReadOnly}
                     onClick={save}
                   >
                     Save Query
@@ -96,7 +97,6 @@ export const MappingTestQueryBuilder = observer(
       <button
         className="panel__header__action"
         tabIndex={-1}
-        disabled={isReadOnly}
         onClick={editWithQueryBuilder}
         title="Edit query..."
       >

packages/legend-studio-extension-query-builder/src/components/ServiceQueryBuilder.tsx

@@ -90,6 +90,7 @@ export const ServiceQueryBuilder = observer(
                       <button
                         className="query-builder__dialog__header__custom-action"
                         tabIndex={-1}
+                        disabled={isReadOnly}
                         onClick={save}
                       >
                         Save Query
@@ -116,7 +117,6 @@ export const ServiceQueryBuilder = observer(
       <button
         className="panel__header__action"
         tabIndex={-1}
-        disabled={isReadOnly}
         onClick={editWithQueryBuilder}
         title="Edit query..."
       >

packages/legend-studio/src/components/editor/ActivityBar.tsx

@@ -22,18 +22,14 @@ import {
   FaRegClock,
   FaWrench,
 } from 'react-icons/fa';
-import {
-  GoGitPullRequest,
-  GoGitMerge,
-  GoEye,
-  GoCloudDownload,
-} from 'react-icons/go';
+import { GoGitPullRequest, GoGitMerge, GoCloudDownload } from 'react-icons/go';
 import { ACTIVITY_MODE } from '../../stores/EditorConfig';
 import { LEGEND_STUDIO_TEST_ID } from '../LegendStudioTestID';
 import {
   CheckIcon,
   clsx,
   DropdownMenu,
+  EyeIcon,
   MenuContent,
   MenuContentItem,
   MenuContentItemIcon,
@@ -62,7 +58,7 @@ const SettingsMenu = observer(
   { forwardRef: true },
 );
 
-interface ActivityDisplay {
+export interface ActivityDisplay {
   mode: ACTIVITY_MODE;
   title: string;
   info?: string;
@@ -240,7 +236,7 @@ export const ActivityBar = observer(() => {
       title: 'Project',
       icon: (
         <div className="activity-bar__project-overview-icon">
-          <GoEye />
+          <EyeIcon />
         </div>
       ),
     },

packages/legend-studio/src/components/editor/edit-panel/service-editor/ServiceExecutionQueryEditor.tsx

@@ -281,7 +281,6 @@ export const ServiceExecutionQueryEditor = observer(
             <button
               className="panel__header__action"
               onClick={execute}
-              disabled={isReadOnly}
               tabIndex={-1}
               title="Run service execution"
             >
@@ -290,7 +289,6 @@ export const ServiceExecutionQueryEditor = observer(
             <button
               className="panel__header__action"
               onClick={generatePlan}
-              disabled={isReadOnly}
               tabIndex={-1}
               title="Generate execution plan"
             >

packages/legend-studio/src/components/editor/side-bar/ProjectOverview.tsx

@@ -163,7 +163,7 @@ const WorkspacesViewer = observer(() => {
         >
           {workspaces.map((workspace) => (
             <WorkspaceViewer
-              key={workspace.workspaceId}
+              key={`${workspace.workspaceType}.${workspace.workspaceId}`}
               workspace={workspace}
             />
           ))}
@@ -177,7 +177,6 @@ const ReleaseEditor = observer(() => {
   const editorStore = useEditorStore();
   const applicationStore = useApplicationStore<LegendStudioConfig>();
   const projectOverviewState = editorStore.projectOverviewState;
-  const sdlcState = editorStore.sdlcState;
   const commitedReviews =
     projectOverviewState.committedReviewsBetweenMostRecentVersionAndProjectLatest;
   const isDispatchingAction =
@@ -210,13 +209,6 @@ const ReleaseEditor = observer(() => {
     );
   }, [applicationStore, projectOverviewState]);
 
-  if (!sdlcState.isCurrentProjectInProduction) {
-    return (
-      <div className="panel__content project-overview__release--empty">
-        Release is only supported for PROD projects
-      </div>
-    );
-  }
   return (
     <div className="panel side-bar__panel project-overview__panel project-overview__release">
       <div className="panel__header">
@@ -696,7 +688,7 @@ export const ProjectOverviewActivityBar = observer(() => {
       projectOverviewState.setActivityMode(activity);
   const activities: ProjectOverviewActivityDisplay[] = [
     { mode: PROJECT_OVERVIEW_ACTIVITY_MODE.OVERVIEW, title: 'Overview' },
-    editorStore.sdlcState.isCurrentProjectInProduction && {
+    {
       mode: PROJECT_OVERVIEW_ACTIVITY_MODE.RELEASE,
       title: 'Release',
     },
@@ -751,23 +743,6 @@ export const ProjectOverview = observer(() => {
     }
   };
 
-  // we do not support release for non-prod projects
-  useEffect(() => {
-    if (
-      projectOverviewState.activityMode ===
-        PROJECT_OVERVIEW_ACTIVITY_MODE.RELEASE &&
-      !editorStore.sdlcState.isCurrentProjectInProduction
-    ) {
-      projectOverviewState.setActivityMode(
-        PROJECT_OVERVIEW_ACTIVITY_MODE.OVERVIEW,
-      );
-    }
-  }, [
-    projectOverviewState.activityMode,
-    editorStore.sdlcState.isCurrentProjectInProduction,
-    projectOverviewState,
-  ]);
-
   return (
     <div className="panel project-overview">
       <div className="panel__header side-bar__header">

packages/legend-studio/src/components/viewer/Viewer.tsx

@@ -42,6 +42,7 @@ import {
   ResizablePanelGroup,
   ResizablePanelSplitter,
   getControlledResizablePanelProps,
+  EyeIcon,
 } from '@finos/legend-art';
 import { isNonNullable } from '@finos/legend-shared';
 import { GlobalHotKeys } from 'react-hotkeys';
@@ -63,6 +64,7 @@ import {
   useApplicationStore,
 } from '@finos/legend-application';
 import type { LegendStudioConfig } from '../../application/LegendStudioConfig';
+import type { ActivityDisplay } from '../editor/ActivityBar';
 
 const ViewerStatusBar = observer(() => {
   const params = useParams<ViewerPathParams>();
@@ -167,18 +169,44 @@ const ViewerActivityBar = observer(() => {
     (activity: ACTIVITY_MODE): (() => void) =>
     (): void =>
       editorStore.setActiveActivity(activity);
+  // tabs
+  const activities: ActivityDisplay[] = [
+    {
+      mode: ACTIVITY_MODE.EXPLORER,
+      title: 'Explorer (Ctrl + Shift + X)',
+      icon: <FaList />,
+    },
+    !editorStore.isInConflictResolutionMode && {
+      mode: ACTIVITY_MODE.PROJECT_OVERVIEW,
+      title: 'Project',
+      icon: (
+        <div className="activity-bar__project-overview-icon">
+          <EyeIcon />
+        </div>
+      ),
+    },
+  ].filter((activity): activity is ActivityDisplay => Boolean(activity));
 
   return (
     <div className="activity-bar">
       <div className="activity-bar__items">
-        <button
-          className={clsx('activity-bar__item', 'activity-bar__item--active')}
-          tabIndex={-1}
-          title="Explorer"
-          onClick={changeActivity(ACTIVITY_MODE.EXPLORER)}
-        >
-          <FaList />
-        </button>
+        {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.info ? ` - ${activity.info}` : ''
+            }`}
+          >
+            {activity.icon}
+          </button>
+        ))}
       </div>
     </div>
   );