@finos/legend-application-studio 19.1.0 → 20.0.1

package/src/components/EditorComponentTestUtils.tsx

@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 
-import { jest, expect } from '@jest/globals';
+import { expect } from '@jest/globals';
 import {
   type RenderResult,
   render,
@@ -29,7 +29,7 @@ import {
   generateEditorRoute,
   LEGEND_STUDIO_ROUTE_PATTERN,
 } from '../stores/LegendStudioRouter.js';
-import type { PlainObject, TEMPORARY__JestMock } from '@finos/legend-shared';
+import { createMock, createSpy, type PlainObject } from '@finos/legend-shared';
 import { LegendStudioPluginManager } from '../application/LegendStudioPluginManager.js';
 import type { Entity } from '@finos/legend-storage';
 import {
@@ -165,7 +165,7 @@ export const TEST__provideMockedEditorStore = (customization?: {
         TEST__getTestGraphManagerState(customization?.pluginManager),
     );
   const MockedEditorStoreProvider = require('./editor/EditorStoreProvider.js'); // eslint-disable-line @typescript-eslint/no-unsafe-assignment
-  MockedEditorStoreProvider.useEditorStore = jest.fn();
+  MockedEditorStoreProvider.useEditorStore = createMock();
   MockedEditorStoreProvider.useEditorStore.mockReturnValue(value);
   return value;
 };
@@ -247,39 +247,41 @@ export const TEST__setUpEditor = async (
   } = data;
 
   // SDLC
-  jest
-    .spyOn(MOCK__editorStore.sdlcServerClient, 'getProject')
-    .mockReturnValue(Promise.resolve(project));
-  jest
-    .spyOn(MOCK__editorStore.sdlcServerClient, 'getWorkspace')
-    .mockReturnValue(Promise.resolve(workspace));
-  jest
-    .spyOn(MOCK__editorStore.sdlcServerClient, 'getVersions')
-    .mockReturnValue(Promise.resolve(projectVersions));
-  jest
-    .spyOn(MOCK__editorStore.sdlcServerClient, 'getRevision')
-    .mockReturnValue(Promise.resolve(curentRevision));
-  jest
-    .spyOn(
-      MOCK__editorStore.sdlcServerClient,
-      'checkIfWorkspaceIsInConflictResolutionMode',
-    )
-    .mockReturnValue(Promise.resolve(false));
-  jest
-    .spyOn(MOCK__editorStore.sdlcServerClient, 'isWorkspaceOutdated')
-    .mockReturnValue(Promise.resolve(false));
-  jest
-    .spyOn(MOCK__editorStore.sdlcServerClient, 'getEntities')
-    .mockReturnValue(Promise.resolve(entities));
-  jest
-    .spyOn(MOCK__editorStore.sdlcServerClient, 'getConfiguration')
-    .mockReturnValue(Promise.resolve(projectConfiguration));
-  jest
-    .spyOn(
-      MOCK__editorStore.sdlcServerClient,
-      'getLatestProjectStructureVersion',
-    )
-    .mockReturnValue(Promise.resolve(latestProjectStructureVersion));
+  createSpy(MOCK__editorStore.sdlcServerClient, 'getProject').mockResolvedValue(
+    project,
+  );
+  createSpy(
+    MOCK__editorStore.sdlcServerClient,
+    'getWorkspace',
+  ).mockResolvedValue(workspace);
+  createSpy(
+    MOCK__editorStore.sdlcServerClient,
+    'getVersions',
+  ).mockResolvedValue(projectVersions);
+  createSpy(
+    MOCK__editorStore.sdlcServerClient,
+    'getRevision',
+  ).mockResolvedValue(curentRevision);
+  createSpy(
+    MOCK__editorStore.sdlcServerClient,
+    'checkIfWorkspaceIsInConflictResolutionMode',
+  ).mockResolvedValue(false);
+  createSpy(
+    MOCK__editorStore.sdlcServerClient,
+    'isWorkspaceOutdated',
+  ).mockResolvedValue(false);
+  createSpy(
+    MOCK__editorStore.sdlcServerClient,
+    'getEntities',
+  ).mockResolvedValue(entities);
+  createSpy(
+    MOCK__editorStore.sdlcServerClient,
+    'getConfiguration',
+  ).mockResolvedValue(projectConfiguration);
+  createSpy(
+    MOCK__editorStore.sdlcServerClient,
+    'getLatestProjectStructureVersion',
+  ).mockResolvedValue(latestProjectStructureVersion);
   MOCK__editorStore.sdlcServerClient._setFeatures(
     SDLCServerFeaturesConfiguration.serialization.fromJson({
       canCreateProject: true,
@@ -288,40 +290,42 @@ export const TEST__setUpEditor = async (
   );
 
   // depot
-  jest
-    .spyOn(MOCK__editorStore.depotServerClient, 'getProjects')
-    .mockReturnValue(Promise.resolve(projects));
-  jest
-    .spyOn(MOCK__editorStore.depotServerClient, 'getProjectById')
-    .mockReturnValue(Promise.resolve(projectData));
-  jest
-    .spyOn(MOCK__editorStore.depotServerClient, 'collectDependencyEntities')
-    .mockReturnValue(Promise.resolve(projectDependency));
-  jest
-    .spyOn(MOCK__editorStore.depotServerClient, 'analyzeDependencyTree')
-    .mockReturnValue(Promise.resolve(projectDependencyInfo));
+  createSpy(
+    MOCK__editorStore.depotServerClient,
+    'getProjects',
+  ).mockResolvedValue(projects);
+  createSpy(
+    MOCK__editorStore.depotServerClient,
+    'getProjectById',
+  ).mockResolvedValue(projectData);
+  createSpy(
+    MOCK__editorStore.depotServerClient,
+    'collectDependencyEntities',
+  ).mockResolvedValue(projectDependency);
+  createSpy(
+    MOCK__editorStore.depotServerClient,
+    'analyzeDependencyTree',
+  ).mockResolvedValue(projectDependencyInfo);
 
   // TODO: we need to think of how we will mock these calls when we modularize
   const graphManagerState = MOCK__editorStore.graphManagerState;
-  graphManagerState.graphManager.initialize = jest.fn<TEMPORARY__JestMock>();
-  jest
-    .spyOn(
-      graphManagerState.graphManager,
-      'getAvailableGenerationConfigurationDescriptions',
-    )
-    .mockReturnValue(Promise.resolve(availableGenerationDescriptions));
+  graphManagerState.graphManager.initialize = createMock();
+  createSpy(
+    graphManagerState.graphManager,
+    'getAvailableGenerationConfigurationDescriptions',
+  ).mockResolvedValue(availableGenerationDescriptions);
 
   // mock change detections (since we do not test them now)
   MOCK__editorStore.changeDetectionState.workspaceLocalLatestRevisionState.buildEntityHashesIndex =
-    jest.fn<TEMPORARY__JestMock>();
+    createMock();
   MOCK__editorStore.sdlcState.buildWorkspaceBaseRevisionEntityHashesIndex =
-    jest.fn<TEMPORARY__JestMock>();
+    createMock();
   MOCK__editorStore.sdlcState.buildProjectLatestRevisionEntityHashesIndex =
-    jest.fn<TEMPORARY__JestMock>();
+    createMock();
   MOCK__editorStore.workspaceReviewState.fetchCurrentWorkspaceReview =
-    jest.fn<TEMPORARY__JestMock>();
+    createMock();
   MOCK__editorStore.workspaceUpdaterState.fetchLatestCommittedReviews =
-    jest.fn<TEMPORARY__JestMock>();
+    createMock();
 
   const history = createMemoryHistory({
     initialEntries: [

package/src/components/editor/StatusBar.tsx

@@ -26,9 +26,11 @@ import {
   BrushIcon,
   CloudUploadIcon,
   AssistantIcon,
+  ErrorIcon,
+  WarningIcon,
 } from '@finos/legend-art';
 import { LEGEND_STUDIO_TEST_ID } from '../LegendStudioTestID.js';
-import { ACTIVITY_MODE } from '../../stores/EditorConfig.js';
+import { ACTIVITY_MODE, AUX_PANEL_MODE } from '../../stores/EditorConfig.js';
 import {
   generateSetupRoute,
   type WorkspaceEditorPathParams,
@@ -62,12 +64,14 @@ export const StatusBar = observer((props: { actionsDisabled: boolean }) => {
         ? ACTIVITY_MODE.CONFLICT_RESOLUTION
         : ACTIVITY_MODE.WORKSPACE_UPDATER,
     );
+
   const goToLocalChanges = (): void =>
     editorStore.setActiveActivity(ACTIVITY_MODE.LOCAL_CHANGES);
   // Change Detection
   const changes =
     editorStore.changeDetectionState.workspaceLocalLatestRevisionState.changes
       .length;
+
   const configurationState = editorStore.projectConfigurationEditorState;
   const pushLocalChanges = applicationStore.guardUnhandledError(() =>
     flowResult(editorStore.localChangesState.pushLocalChanges()),
@@ -92,6 +96,11 @@ export const StatusBar = observer((props: { actionsDisabled: boolean }) => {
       : 'no changes detected';
   const workspaceOutOfSync =
     !actionsDisabled && editorStore.sdlcState.isWorkspaceOutOfSync;
+
+  // Problems
+  const error = editorStore.graphState.error;
+  const warnings = editorStore.graphState.warnings;
+
   // Conflict resolution
   const conflicts = editorStore.conflictResolutionState.conflicts.length;
   const acceptConflictResolution = applicationStore.guardUnhandledError(() =>
@@ -118,6 +127,12 @@ export const StatusBar = observer((props: { actionsDisabled: boolean }) => {
 
   // Other actions
   const toggleAuxPanel = (): void => editorStore.auxPanelDisplayState.toggle();
+
+  const showCompilationWarnings = (): void => {
+    editorStore.auxPanelDisplayState.open();
+    editorStore.setActiveAuxPanelMode(AUX_PANEL_MODE.PROBLEMS);
+  };
+
   const handleTextModeClick = applicationStore.guardUnhandledError(() =>
     flowResult(editorStore.toggleTextMode()),
   );
@@ -177,10 +192,11 @@ export const StatusBar = observer((props: { actionsDisabled: boolean }) => {
             }
           >
             {workspaceId}
+            {editorStore.localChangesState.hasUnpushedChanges ? '*' : ''}
           </button>
           {workspaceOutOfSync && (
             <button
-              className="editor__status-bar__workspace__status"
+              className="editor__status-bar__workspace__status__btn"
               tabIndex={-1}
               onClick={goToLocalChanges}
               title={
@@ -192,7 +208,7 @@ export const StatusBar = observer((props: { actionsDisabled: boolean }) => {
           )}
           {editorStore.sdlcState.isWorkspaceOutdated && !workspaceOutOfSync && (
             <button
-              className="editor__status-bar__workspace__status"
+              className="editor__status-bar__workspace__status__btn"
               tabIndex={-1}
               onClick={goToWorkspaceUpdater}
               title={
@@ -202,6 +218,25 @@ export const StatusBar = observer((props: { actionsDisabled: boolean }) => {
               OUTDATED
             </button>
           )}
+          <button
+            className="editor__status-bar__problems"
+            tabIndex={-1}
+            onClick={showCompilationWarnings}
+            title={`${error ? 'Error: 1, ' : ''}Warnings: ${warnings.length}`}
+          >
+            <div className="editor__status-bar__problems__icon">
+              <ErrorIcon />
+            </div>
+            <div className="editor__status-bar__problems__counter">
+              {error ? 1 : 0}
+            </div>
+            <div className="editor__status-bar__problems__icon">
+              <WarningIcon />
+            </div>
+            <div className="editor__status-bar__problems__counter">
+              {warnings.length}
+            </div>
+          </button>
         </div>
       </div>
       <div

package/src/components/editor/aux-panel/AuxiliaryPanel.tsx

@@ -22,12 +22,17 @@ import {
   ChevronDownIcon,
   XIcon,
   PanelContent,
+  Badge,
+  PanelHeader,
+  PanelHeaderActions,
+  PanelHeaderActionItem,
 } from '@finos/legend-art';
 import { Console } from './Console.js';
 import { AUX_PANEL_MODE } from '../../../stores/EditorConfig.js';
 import { isNonNullable } from '@finos/legend-shared';
 import { DevTool } from './DevTool.js';
 import { useEditorStore } from '../EditorStoreProvider.js';
+import { Problems } from './Problems.js';
 
 export const AuxiliaryPanel = observer(() => {
   const editorStore = useEditorStore();
@@ -45,6 +50,7 @@ export const AuxiliaryPanel = observer(() => {
       name: string;
       icon?: React.ReactNode;
       isVisible: boolean;
+      counter?: number;
     };
   } = {
     [AUX_PANEL_MODE.CONSOLE]: {
@@ -59,6 +65,13 @@ export const AuxiliaryPanel = observer(() => {
       icon: undefined,
       isVisible: true,
     },
+    [AUX_PANEL_MODE.PROBLEMS]: {
+      mode: AUX_PANEL_MODE.PROBLEMS,
+      name: 'PROBLEMS',
+      icon: undefined,
+      isVisible: true,
+      counter: editorStore.graphState.problems.length,
+    },
   };
 
   const tabsToShow = Object.values(AUX_PANEL_MODE).filter(
@@ -75,7 +88,7 @@ export const AuxiliaryPanel = observer(() => {
 
   return (
     <div className="panel auxiliary-panel">
-      <div className="panel__header">
+      <PanelHeader>
         <div className="auxiliary-panel__header__tabs">
           {tabsToShow
             .map((tab) => auxTabMap[tab])
@@ -97,15 +110,20 @@ export const AuxiliaryPanel = observer(() => {
                 )}
                 <div className="auxiliary-panel__header__tab__title">
                   {tab.name}
+                  {tab.counter !== undefined && (
+                    <Badge
+                      title={tab.counter.toString()}
+                      className="auxiliary-panel__header__tab__title__problem__count"
+                    />
+                  )}
                 </div>
               </button>
             ))}
         </div>
-        <div className="auxiliary-panel__header__actions">
-          <button
+        <PanelHeaderActions>
+          <PanelHeaderActionItem
             className="auxiliary-panel__header__action"
             onClick={toggleExpandAuxPanel}
-            tabIndex={-1}
             title="Toggle expand/collapse"
           >
             {editorStore.auxPanelDisplayState.isMaximized ? (
@@ -113,18 +131,22 @@ export const AuxiliaryPanel = observer(() => {
             ) : (
               <ChevronUpIcon />
             )}
-          </button>
-          <button
+          </PanelHeaderActionItem>
+          <PanelHeaderActionItem
             className="auxiliary-panel__header__action"
             onClick={closePanel}
-            tabIndex={-1}
             title="Close"
           >
             <XIcon />
-          </button>
-        </div>
-      </div>
+          </PanelHeaderActionItem>
+        </PanelHeaderActions>
+      </PanelHeader>
       <PanelContent>
+        {isTabVisible(AUX_PANEL_MODE.PROBLEMS) && (
+          <div className="auxiliary-panel__content__tab">
+            <Problems />
+          </div>
+        )}
         {isTabVisible(AUX_PANEL_MODE.CONSOLE) && (
           <div className="auxiliary-panel__content__tab">
             <Console />

package/src/components/editor/aux-panel/Console.tsx

@@ -14,12 +14,13 @@
  * limitations under the License.
  */
 
+import { Panel, PanelContent } from '@finos/legend-art';
 import { observer } from 'mobx-react-lite';
 
 // TODO: add `xterm` so we have a stream/log
 // See https://github.com/finos/legend-studio/issues/273
 export const Console = observer(() => (
-  <div className="console-panel">
-    <div className="console-panel__content"></div>
-  </div>
+  <Panel className="console-panel">
+    <PanelContent className="console-panel__content"></PanelContent>
+  </Panel>
 ));

package/src/components/editor/aux-panel/DevTool.tsx

@@ -15,7 +15,12 @@
  */
 
 import { observer } from 'mobx-react-lite';
-import { clsx, CheckSquareIcon, SquareIcon } from '@finos/legend-art';
+import {
+  PanelFormBooleanField,
+  Panel,
+  PanelFormTextField,
+  PanelForm,
+} from '@finos/legend-art';
 import { isValidUrl } from '@finos/legend-shared';
 import { useEditorStore } from '../EditorStoreProvider.js';
 import { observe_TEMPORARY__AbstractEngineConfig } from '@finos/legend-graph';
@@ -26,12 +31,6 @@ export const DevTool = observer(() => {
   const engineConfig = observe_TEMPORARY__AbstractEngineConfig(
     editorStore.graphManagerState.graphManager.TEMPORARY__getEngineConfig(),
   );
-  const changeEngineClientBaseUrl: React.ChangeEventHandler<
-    HTMLInputElement
-  > = (event) =>
-    engineConfig.setBaseUrl(
-      event.target.value === '' ? undefined : event.target.value,
-    );
   const toggleEngineClientRequestPayloadCompression = (): void =>
     engineConfig.setUseClientRequestPayloadCompression(
       !engineConfig.useClientRequestPayloadCompression,
@@ -40,79 +39,48 @@ export const DevTool = observer(() => {
     engineConfig.setUseBase64ForAdhocConnectionDataUrls(
       !engineConfig.useBase64ForAdhocConnectionDataUrls,
     );
+  // Graph Manager
+  const toggleStrictMode = (): void =>
+    editorStore.graphState.setEnableStrictMode(
+      !editorStore.graphState.enableStrictMode,
+    );
 
   return (
-    <div className="console-panel">
-      <div className="console-panel__content">
-        <div className="panel__content__form">
-          <div className="panel__content__form__section">
-            <div className="panel__content__form__section__header__label">
-              Engine client request payload compression
-            </div>
-            <div
-              className={clsx('panel__content__form__section__toggler')}
-              onClick={toggleEngineClientRequestPayloadCompression}
-            >
-              <button
-                className={clsx('panel__content__form__section__toggler__btn', {
-                  'panel__content__form__section__toggler__btn--toggled':
-                    engineConfig.useClientRequestPayloadCompression,
-                })}
-              >
-                {engineConfig.useClientRequestPayloadCompression ? (
-                  <CheckSquareIcon />
-                ) : (
-                  <SquareIcon />
-                )}
-              </button>
-              <div className="panel__content__form__section__toggler__prompt">
-                Specifies if request payload should be compressed
-              </div>
-            </div>
-          </div>
-          <div className="panel__content__form__section">
-            <div className="panel__content__form__section__header__label">
-              Engine client base URL
-            </div>
-            <div className="input-group">
-              <input
-                className="panel__content__form__section__input input-group__input input--dark"
-                spellCheck={false}
-                value={engineConfig.baseUrl ?? ''}
-                onChange={changeEngineClientBaseUrl}
-              />
-              {!isValidUrl(engineConfig.baseUrl ?? '') && (
-                <div className="input-group__error-message">Invalid URL</div>
-              )}
-            </div>
-          </div>
-          <div className="panel__content__form__section">
-            <div className="panel__content__form__section__header__label">
-              Engine execution runner
-            </div>
-            <div
-              className={clsx('panel__content__form__section__toggler')}
-              onClick={toggleDataUrlEncoding}
-            >
-              <button
-                className={clsx('panel__content__form__section__toggler__btn', {
-                  'panel__content__form__section__toggler__btn--toggled':
-                    engineConfig.useBase64ForAdhocConnectionDataUrls,
-                })}
-              >
-                {engineConfig.useBase64ForAdhocConnectionDataUrls ? (
-                  <CheckSquareIcon />
-                ) : (
-                  <SquareIcon />
-                )}
-              </button>
-              <div className="panel__content__form__section__toggler__prompt">
-                Use Base64 encoding for adhoc connection data URLs
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
+    <Panel>
+      <PanelForm>
+        <PanelFormBooleanField
+          name="Engine client request payload compression"
+          prompt="Specifies if request payload should be compressed"
+          value={engineConfig.useClientRequestPayloadCompression}
+          isReadOnly={false}
+          update={toggleEngineClientRequestPayloadCompression}
+        />
+        <PanelFormTextField
+          name="Engine client base URL"
+          value={engineConfig.baseUrl ?? ''}
+          isReadOnly={false}
+          update={(value: string | undefined): void =>
+            engineConfig.setBaseUrl(value === '' ? undefined : value)
+          }
+          errorMessage={
+            !isValidUrl(engineConfig.baseUrl ?? '') ? 'Invalid URL' : ''
+          }
+        />
+        <PanelFormBooleanField
+          name="Engine execution runner"
+          prompt="Use Base64 encoding for adhoc connection data URLs"
+          value={engineConfig.useBase64ForAdhocConnectionDataUrls}
+          isReadOnly={false}
+          update={toggleDataUrlEncoding}
+        />
+        <PanelFormBooleanField
+          name="Graph builder strict mode"
+          prompt="Use strict-mode when building the graph (some warnings will be treated as errors)"
+          value={editorStore.graphState.enableStrictMode}
+          isReadOnly={false}
+          update={toggleStrictMode}
+        />
+      </PanelForm>
+    </Panel>
   );
 });

package/src/components/editor/aux-panel/Problems.tsx

@@ -0,0 +1,103 @@
+/**
+ * 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 {
+  PanelList,
+  PanelListItem,
+  clsx,
+  Panel,
+  ErrorIcon,
+  WarningIcon,
+} from '@finos/legend-art';
+import { useEditorStore } from '../EditorStoreProvider.js';
+import type { Problem } from '../../../stores/EditorGraphState.js';
+import { CompilationWarning, EngineError } from '@finos/legend-graph';
+
+const ProblemItem = observer((props: { problem: Problem }) => {
+  const { problem } = props;
+  const editorStore = useEditorStore();
+  const isStale = editorStore.graphState.areProblemsStale;
+  const goToSource = (): void => {
+    // NOTE: in text mode, we allow click to go to position even when the problems might already be stale
+    if (editorStore.isInGrammarTextMode && problem.sourceInformation) {
+      editorStore.grammarTextEditorState.setForcedCursorPosition({
+        lineNumber: problem.sourceInformation.startLine,
+        column: problem.sourceInformation.startColumn,
+      });
+    }
+  };
+
+  return (
+    <PanelListItem>
+      <button
+        className={clsx([
+          'auxiliary-panel__problem',
+          {
+            'auxiliary-panel__problem--stale': isStale,
+          },
+        ])}
+        title={problem.message}
+        onClick={goToSource}
+      >
+        {problem instanceof EngineError && (
+          <ErrorIcon className="auxiliary-panel__problem__icon auxiliary-panel__problem__icon--error" />
+        )}
+        {problem instanceof CompilationWarning && (
+          <WarningIcon className="auxiliary-panel__problem__icon auxiliary-panel__problem__icon--warning" />
+        )}
+        <div className="auxiliary-panel__problem__message">
+          {problem.message}
+        </div>
+        {problem.sourceInformation && (
+          <div className="auxiliary-panel__problem__source">
+            {editorStore.isInGrammarTextMode &&
+              `[Ln ${problem.sourceInformation.startLine}, Col ${problem.sourceInformation.startColumn}]`}
+          </div>
+        )}
+      </button>
+    </PanelListItem>
+  );
+});
+
+export const Problems = observer(() => {
+  const editorStore = useEditorStore();
+  const problems = editorStore.graphState.problems;
+  const isStale = editorStore.graphState.areProblemsStale;
+
+  return (
+    <Panel>
+      {isStale && (
+        <div className="auxiliary-panel__problems__stale-warning">
+          The following result might be stale - please run compilation (F9) to
+          check for the latest problems
+        </div>
+      )}
+      {problems.length === 0 && (
+        <div className="auxiliary-panel__problems__placeholder">
+          No problems have been detected in the workspace.
+        </div>
+      )}
+      {problems.length !== 0 && (
+        <PanelList>
+          {problems.map((problem) => (
+            <ProblemItem key={problem.uuid} problem={problem} />
+          ))}
+        </PanelList>
+      )}
+    </Panel>
+  );
+});