@finos/legend-application-studio 28.11.3 → 28.12.0

package/src/__lib__/LegendStudioUserDataHelper.ts

@@ -0,0 +1,43 @@
+import type { UserDataService } from '@finos/legend-application';
+import { returnUndefOnError } from '@finos/legend-shared';
+
+/**
+ * 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.
+ */
+export enum LEGEND_STUDIO_USER_DATA_KEY {
+  GLOBAL_TEST_RUNNER_SHOW_DEPENDENCIES = 'studio-editor.global-test-runner-showDependencyPanel',
+}
+
+export class LegendStudioUserDataHelper {
+  static globalTestRunner_getShowDependencyPanel(
+    service: UserDataService,
+  ): boolean | undefined {
+    return returnUndefOnError(() =>
+      service.getBooleanValue(
+        LEGEND_STUDIO_USER_DATA_KEY.GLOBAL_TEST_RUNNER_SHOW_DEPENDENCIES,
+      ),
+    );
+  }
+
+  static globalTestRunner_setShowDependencyPanel(
+    service: UserDataService,
+    val: boolean,
+  ): void {
+    service.persistValue(
+      LEGEND_STUDIO_USER_DATA_KEY.GLOBAL_TEST_RUNNER_SHOW_DEPENDENCIES,
+      val,
+    );
+  }
+}

package/src/application/LegendStudioApplicationConfig.ts

@@ -95,7 +95,6 @@ class LegendStudioApplicationCoreOptions {
   TEMPORARY__serviceRegistrationConfig: ServiceRegistrationEnvironmentConfig[] =
     [];
 
-  // TODO- change it to false
   /**
    * This flag can be removed when the support for end-to-end workflow is official
    */

package/src/components/editor/side-bar/testable/GlobalTestRunner.tsx

@@ -42,6 +42,14 @@ import {
   Panel,
   PanelHeader,
   OffIcon,
+  DropdownMenu,
+  MenuContentItemIcon,
+  CheckIcon,
+  MenuContentItemLabel,
+  MoreVerticalIcon,
+  ResizablePanelGroup,
+  ResizablePanel,
+  ResizablePanelSplitter,
 } from '@finos/legend-art';
 import {
   AssertFail,
@@ -56,7 +64,7 @@ import {
   prettyCONSTName,
 } from '@finos/legend-shared';
 import { observer } from 'mobx-react-lite';
-import { forwardRef, useEffect, useState } from 'react';
+import React, { forwardRef, useEffect, useState } from 'react';
 import { TEST_RUNNER_TABS } from '../../../../stores/editor/EditorConfig.js';
 import {
   type TestableExplorerTreeNodeData,
@@ -195,7 +203,7 @@ const TestFailViewer = observer(
       >
         <Modal darkMode={true} className="editor-modal">
           <PanelLoadingIndicator
-            isLoading={globalTestRunnerState.isDispatchingAction}
+            isLoading={globalTestRunnerState.isDispatchingOwnProjectAction}
           />
           <ModalHeader title={id} />
           <ModalBody>
@@ -256,17 +264,12 @@ const TestableExplorerContextMenu = observer(
     return (
       <MenuContent data-testid={LEGEND_STUDIO_TEST_ID.EXPLORER_CONTEXT_MENU}>
         <MenuContentItem
-          disabled={globalTestRunnerState.isDispatchingAction}
+          disabled={globalTestRunnerState.isDispatchingOwnProjectAction}
           onClick={runTest}
         >
           Run
         </MenuContentItem>
-        <MenuContentItem
-          disabled={globalTestRunnerState.isDispatchingAction}
-          onClick={visitTestable}
-        >
-          Open Testable
-        </MenuContentItem>
+        <MenuContentItem onClick={visitTestable}>Open Testable</MenuContentItem>
         {error &&
           (error instanceof TestError || error instanceof AssertFail) && (
             <MenuContentItem onClick={(): void => viewError(error)}>
@@ -297,11 +300,13 @@ const TestableTreeNodeContainer: React.FC<
       globalTestRunnerState: GlobalTestRunnerState;
       testableState: TestableState;
       treeData: TreeData<TestableExplorerTreeNodeData>;
+      isDependency?: boolean | undefined;
     }
   >
 > = (props) => {
   const { node, level, stepPaddingInRem, onNodeSelect } = props;
-  const { treeData, testableState, globalTestRunnerState } = props.innerProps;
+  const { treeData, testableState, globalTestRunnerState, isDependency } =
+    props.innerProps;
   const editorStore = useEditorStore();
   const results = testableState.results;
   const expandIcon =
@@ -326,7 +331,10 @@ const TestableTreeNodeContainer: React.FC<
   const resultIcon = getTestableResultIcon(
     getNodeTestableResult(
       node,
-      testableState.globalTestRunnerState.isRunningTests.isInProgress,
+      isDependency
+        ? testableState.globalTestRunnerState.isRunningDependencyTests
+            .isInProgress
+        : testableState.globalTestRunnerState.isRunningTests.isInProgress,
       results,
     ),
   );
@@ -420,44 +428,96 @@ const TestableTreeNodeContainer: React.FC<
   );
 };
 
-// TODO:
-// - Handle Multi Execution Test Results
-// - Add `Visit Test` to open test editors when Testable Editors are complete
-export const GlobalTestRunner = observer(
+export const TestablePanelRunner = observer(
   (props: { globalTestRunnerState: GlobalTestRunnerState }) => {
-    const editorStore = useEditorStore();
-    const globalTestRunnerState = props.globalTestRunnerState;
-    const isDispatchingAction = globalTestRunnerState.isDispatchingAction;
-
-    const [selectedTab, setSelectedTab] = useState(
-      TEST_RUNNER_TABS.TEST_RUNNER.valueOf(),
-    );
-
-    const extractTestRunnerTabConfigurations = editorStore.pluginManager
-      .getApplicationPlugins()
-      .flatMap(
-        (plugin) => plugin.getExtraTestRunnerViewConfigurations?.() ?? [],
-      )
-      .filter((configuration) => configuration.renderer(editorStore));
-
-    const testRunnerTabs = (Object.values(TEST_RUNNER_TABS) as string[])
-      .map((e) => ({
-        value: e,
-        label: prettyCONSTName(e),
-      }))
-      .concat(
-        extractTestRunnerTabConfigurations.map((config) => ({
-          value: config.key,
-          label: config.title,
-        })),
-      );
-
-    const changeTab = (tab: string): void => {
-      setSelectedTab(tab);
+    const { globalTestRunnerState } = props;
+    const isDispatchingAction =
+      globalTestRunnerState.isDispatchingOwnProjectAction;
+    const showDependencyPanel = globalTestRunnerState.showDependencyPanel;
+    const toggleShowDependencyTests = (): void => {
+      globalTestRunnerState.setShowDependencyPanel(!showDependencyPanel);
     };
+    const runAllTests = (): GeneratorFn<void> =>
+      globalTestRunnerState.runAllTests();
+    const reset = (): void => globalTestRunnerState.initOwnTestables(true);
+
+    //
+    const runDependencyTests = (): GeneratorFn<void> =>
+      globalTestRunnerState.runDependenciesTests();
+    const isDispatchingDependencyAction =
+      globalTestRunnerState.isDispatchingDependencyAction;
 
     const renderTestables = (): React.ReactNode => (
       <>
+        <PanelHeader>
+          <div className="panel__header__title">
+            <div className="panel__header__title__content">TESTABLES</div>
+          </div>
+          <div className="panel__header__actions side-bar__header__actions">
+            <button
+              className={clsx(
+                'panel__header__action side-bar__header__action global-test-runner__refresh-btn',
+                {
+                  'global-test-runner__refresh-btn--loading':
+                    isDispatchingAction,
+                },
+              )}
+              disabled={isDispatchingAction}
+              onClick={reset}
+              tabIndex={-1}
+              title="Reset"
+            >
+              <RefreshIcon />
+            </button>
+            <button
+              className="panel__header__action side-bar__header__action global-test-runner__refresh-btn"
+              disabled={isDispatchingAction}
+              onClick={runAllTests}
+              tabIndex={-1}
+              title="Run All Tests"
+            >
+              <PlayIcon />
+            </button>
+            <div
+              className="global-test-runner__count"
+              data-testid={
+                LEGEND_STUDIO_TEST_ID.SIDEBAR_PANEL_HEADER__CHANGES_COUNT
+              }
+            >
+              {globalTestRunnerState.testableStates?.length ?? '0'}
+            </div>
+
+            <DropdownMenu
+              className="panel__header__action"
+              title="Show Options Menu..."
+              content={
+                <MenuContent>
+                  <MenuContentItem onClick={toggleShowDependencyTests}>
+                    <MenuContentItemIcon>
+                      {showDependencyPanel ? <CheckIcon /> : null}
+                    </MenuContentItemIcon>
+                    <MenuContentItemLabel>
+                      Show from dependency tests
+                    </MenuContentItemLabel>
+                  </MenuContentItem>
+                </MenuContent>
+              }
+              menuProps={{
+                anchorOrigin: {
+                  vertical: 'bottom',
+                  horizontal: 'left',
+                },
+                transformOrigin: {
+                  vertical: 'top',
+                  horizontal: 'left',
+                },
+                elevation: 7,
+              }}
+            >
+              <MoreVerticalIcon className="query-builder__icon__more-options" />
+            </DropdownMenu>
+          </div>
+        </PanelHeader>
         {(globalTestRunnerState.testableStates ?? []).map((testableState) => {
           const onNodeSelect = (node: TestableExplorerTreeNodeData): void => {
             testableState.onTreeNodeSelect(node, testableState.treeData);
@@ -492,116 +552,191 @@ export const GlobalTestRunner = observer(
       </>
     );
 
-    useEffect(() => {
-      editorStore.globalTestRunnerState.init();
-    }, [editorStore.globalTestRunnerState]);
+    const renderDependenciesTestables = (): React.ReactNode => (
+      <>
+        <PanelHeader>
+          <div className="panel__header__title">
+            <div className="panel__header__title__content">
+              DEPENDENCY TESTABLES
+            </div>
+          </div>
+          <div className="panel__header__actions side-bar__header__actions">
+            <button
+              className="panel__header__action side-bar__header__action global-test-runner__refresh-btn"
+              disabled={isDispatchingDependencyAction}
+              onClick={runDependencyTests}
+              tabIndex={-1}
+              title="Run Dependency Tests"
+            >
+              <PlayIcon />
+            </button>
+            <div
+              className="global-test-runner__count"
+              data-testid={
+                LEGEND_STUDIO_TEST_ID.SIDEBAR_PANEL_HEADER__CHANGES_COUNT
+              }
+            >
+              {globalTestRunnerState.dependencyTestableStates?.length ?? '0'}
+            </div>
+          </div>
+        </PanelHeader>
+        {(globalTestRunnerState.dependencyTestableStates ?? []).map(
+          (testableState) => {
+            const onNodeSelect = (node: TestableExplorerTreeNodeData): void => {
+              testableState.onTreeNodeSelect(node, testableState.treeData);
+            };
+            const getChildNodes = (
+              node: TestableExplorerTreeNodeData,
+            ): TestableExplorerTreeNodeData[] => {
+              if (node.childrenIds) {
+                return node.childrenIds
+                  .map((id) => testableState.treeData.nodes.get(id))
+                  .filter(isNonNullable);
+              }
+              return [];
+            };
+            return (
+              <TreeView
+                components={{
+                  TreeNodeContainer: TestableTreeNodeContainer,
+                }}
+                key={testableState.uuid}
+                treeData={testableState.treeData}
+                onNodeSelect={onNodeSelect}
+                getChildNodes={getChildNodes}
+                innerProps={{
+                  globalTestRunnerState,
+                  testableState,
+                  treeData: testableState.treeData,
+                  isDependency: true,
+                }}
+              />
+            );
+          },
+        )}
+      </>
+    );
 
-    const runAllTests = (): GeneratorFn<void> =>
-      globalTestRunnerState.runAllTests(undefined);
+    return (
+      <Panel className="side-bar__panel">
+        {!showDependencyPanel && (
+          <PanelContent>{renderTestables()}</PanelContent>
+        )}
+        {showDependencyPanel && (
+          <ResizablePanelGroup>
+            <ResizablePanel>
+              <PanelContent>{renderTestables()}</PanelContent>
+            </ResizablePanel>
+            <ResizablePanelSplitter />
+            <ResizablePanel>
+              <PanelContent>{renderDependenciesTestables()}</PanelContent>
+            </ResizablePanel>
+          </ResizablePanelGroup>
+        )}
+        {globalTestRunnerState.failureViewing && (
+          <TestFailViewer
+            globalTestRunnerState={globalTestRunnerState}
+            failure={globalTestRunnerState.failureViewing}
+          />
+        )}
+      </Panel>
+    );
+  },
+);
+
+// TODO:
+// - Handle Multi Execution Test Results
+export const GlobalTestRunner = observer(
+  (props: { globalTestRunnerState: GlobalTestRunnerState }) => {
+    const editorStore = useEditorStore();
+    const globalTestRunnerState = props.globalTestRunnerState;
+    const isDispatchingAction =
+      globalTestRunnerState.isDispatchingOwnProjectAction;
+
+    const [selectedTab, setSelectedTab] = useState(
+      TEST_RUNNER_TABS.TEST_RUNNER.valueOf(),
+    );
 
-    const reset = (): void => globalTestRunnerState.init(true);
+    const extractTestRunnerTabConfigurations = editorStore.pluginManager
+      .getApplicationPlugins()
+      .flatMap(
+        (plugin) => plugin.getExtraTestRunnerViewConfigurations?.() ?? [],
+      )
+      .filter((configuration) => configuration.renderer(editorStore));
 
-    const renderTestRunnerTab = (): React.ReactNode => {
+    const testRunnerTabs = (Object.values(TEST_RUNNER_TABS) as string[])
+      .map((e) => ({
+        value: e,
+        label: prettyCONSTName(e),
+      }))
+      .concat(
+        extractTestRunnerTabConfigurations.map((config) => ({
+          value: config.key,
+          label: config.title,
+        })),
+      );
+
+    const changeTab = (tab: string): void => {
+      setSelectedTab(tab);
+    };
+
+    useEffect(() => {
+      editorStore.globalTestRunnerState.initOwnTestables();
+    }, [editorStore.globalTestRunnerState]);
+
+    const renderSelectedTab = (): React.ReactNode => {
       if (selectedTab === TEST_RUNNER_TABS.TEST_RUNNER) {
         return (
-          <div
-            data-testid={LEGEND_STUDIO_TEST_ID.TEST_RUNNER}
-            className="panel global-test-runner"
-          >
-            <PanelHeader className="panel__header side-bar__header">
-              <div className="panel__header__title global-test-runner__header__title">
-                <div className="panel__header__title__content side-bar__header__title__content">
-                  GLOBAL TEST RUNNER
-                </div>
-              </div>
-              <div className="panel__header__actions side-bar__header__actions">
-                <button
-                  className={clsx(
-                    'panel__header__action side-bar__header__action global-test-runner__refresh-btn',
-                    {
-                      'global-test-runner__refresh-btn--loading':
-                        isDispatchingAction,
-                    },
-                  )}
-                  disabled={isDispatchingAction}
-                  onClick={reset}
-                  tabIndex={-1}
-                  title="Reset"
-                >
-                  <RefreshIcon />
-                </button>
-                <button
-                  className="panel__header__action side-bar__header__action global-test-runner__refresh-btn"
-                  disabled={isDispatchingAction}
-                  onClick={runAllTests}
-                  tabIndex={-1}
-                  title="Run All Tests"
-                >
-                  <PlayIcon />
-                </button>
-              </div>
-            </PanelHeader>
-            <div className="panel__header__tabs panel__header__test__runner__tabs">
-              {testRunnerTabs.map((tab) => (
-                <div
-                  key={tab.value}
-                  onClick={() => changeTab(tab.value)}
-                  className={clsx('panel__header__tab', {
-                    ['panel__header__tab--active']: tab.value === selectedTab,
-                  })}
-                >
-                  {tab.label}
-                </div>
-              ))}
-            </div>
-            <PanelContent className="side-bar__content">
-              <PanelLoadingIndicator isLoading={isDispatchingAction} />
-              <Panel className="side-bar__panel">
-                <PanelHeader>
-                  <div className="panel__header__title">
-                    <div className="panel__header__title__content">
-                      TESTABLES
-                    </div>
-                  </div>
-                  <div
-                    className="side-bar__panel__header__changes-count"
-                    data-testid={
-                      LEGEND_STUDIO_TEST_ID.SIDEBAR_PANEL_HEADER__CHANGES_COUNT
-                    }
-                  >
-                    {globalTestRunnerState.testableStates?.length ?? '0'}
-                  </div>
-                </PanelHeader>
-                <PanelContent>{renderTestables()}</PanelContent>
-                {globalTestRunnerState.failureViewing && (
-                  <TestFailViewer
-                    globalTestRunnerState={globalTestRunnerState}
-                    failure={globalTestRunnerState.failureViewing}
-                  />
-                )}
-              </Panel>
-            </PanelContent>
-          </div>
+          <>
+            <PanelLoadingIndicator isLoading={isDispatchingAction} />
+            <TestablePanelRunner
+              globalTestRunnerState={globalTestRunnerState}
+            />
+          </>
         );
-      } else {
-        for (const testRunnerTabConfiguration of extractTestRunnerTabConfigurations) {
-          if (testRunnerTabConfiguration.key === selectedTab) {
-            return testRunnerTabConfiguration.renderer(editorStore);
-          }
+      }
+      for (const testRunnerTabConfiguration of extractTestRunnerTabConfigurations) {
+        if (testRunnerTabConfiguration.key === selectedTab) {
+          return testRunnerTabConfiguration.renderer(editorStore);
         }
-        return (
-          <UnsupportedEditorPanel
-            text="Can't display this tab"
-            isReadOnly={true}
-          />
-        );
       }
+      return (
+        <UnsupportedEditorPanel
+          text="Can't display this tab"
+          isReadOnly={true}
+        />
+      );
     };
 
     return (
-      <Panel>
-        <PanelContent>{renderTestRunnerTab()}</PanelContent>
-      </Panel>
+      <div
+        data-testid={LEGEND_STUDIO_TEST_ID.TEST_RUNNER}
+        className="panel global-test-runner"
+      >
+        <PanelHeader className="panel__header side-bar__header">
+          <div className="panel__header__title global-test-runner__header__title">
+            <div className="panel__header__title__content side-bar__header__title__content">
+              GLOBAL TEST RUNNER
+            </div>
+          </div>
+        </PanelHeader>
+        <div className="panel__header__tabs panel__header__test__runner__tabs">
+          {testRunnerTabs.map((tab) => (
+            <div
+              key={tab.value}
+              onClick={() => changeTab(tab.value)}
+              className={clsx('panel__header__tab', {
+                ['panel__header__tab--active']: tab.value === selectedTab,
+              })}
+            >
+              {tab.label}
+            </div>
+          ))}
+        </div>
+        <PanelContent className="side-bar__content">
+          {renderSelectedTab()}
+        </PanelContent>
+      </div>
     );
   },
 );