@finos/legend-application-studio 28.9.0 → 28.10.1

package/src/components/editor/editor-group/connection-editor/RelationalDatabaseConnectionEditor.tsx

@@ -1567,12 +1567,13 @@ const renderAuthenticationStrategyEditor = (
   }
 };
 
-const RelationalConnectionGeneralEditor = observer(
+export const RelationalConnectionGeneralEditor = observer(
   (props: {
     connectionValueState: RelationalDatabaseConnectionValueState;
     isReadOnly: boolean;
+    hideHeader?: boolean;
   }) => {
-    const { connectionValueState, isReadOnly } = props;
+    const { connectionValueState, isReadOnly, hideHeader } = props;
     const connection = connectionValueState.connection;
     const editorStore = useEditorStore();
     const plugins = editorStore.pluginManager.getApplicationPlugins();
@@ -1692,7 +1693,7 @@ const RelationalConnectionGeneralEditor = observer(
         <ResizablePanelGroup orientation="horizontal">
           <ResizablePanel size={200} minSize={15}>
             <Panel>
-              <PanelHeader title="general"></PanelHeader>
+              {!hideHeader && <PanelHeader title="general"></PanelHeader>}
               <PanelContent className="relational-connection-editor__general">
                 <PanelFormSection>
                   <div className="panel__content__form__section__header__label">

package/src/components/editor/editor-group/end-to-end-flow-editor/ConnectionToQueryWorkflowEditor.tsx

@@ -0,0 +1,518 @@
+/**
+ * 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 {
+  ResizablePanelGroup,
+  ResizablePanel,
+  Panel,
+  BaseStepper,
+  PanelContent,
+  Modal,
+  ModalBody,
+  InputWithInlineValidation,
+  PanelHeader,
+  PanelLoadingIndicator,
+  ResizablePanelSplitter,
+  EyeIcon,
+  BlankPanelContent,
+} from '@finos/legend-art';
+import { observer } from 'mobx-react-lite';
+import { useEffect, useMemo } from 'react';
+import { RelationalConnectionGeneralEditor } from '../connection-editor/RelationalDatabaseConnectionEditor.js';
+import { flowResult } from 'mobx';
+import { useApplicationStore } from '@finos/legend-application';
+import { DatabaseBuilderModalContent } from '../connection-editor/DatabaseBuilderWizard.js';
+import { debounce, guaranteeNonNullable } from '@finos/legend-shared';
+import {
+  CODE_EDITOR_LANGUAGE,
+  CodeEditor,
+} from '@finos/legend-lego/code-editor';
+import type { DatabaseBuilderWizardState } from '../../../../stores/editor/editor-state/element-editor-state/connection/DatabaseBuilderWizardState.js';
+import {
+  DatabaseModelPackageInput,
+  DatabaseModelPreviewEditor,
+} from '../connection-editor/DatabaseModelBuilder.js';
+import {
+  ConnectionValueStepperState,
+  DatabaseBuilderStepperState,
+  DatabaseGrammarEditorStepperState,
+  DatabaseModelBuilderStepperState,
+  QUERY_CONNECTION_WORKFLOW_STEPS,
+  QueryConnectionConfirmationAndGrammarEditorStepperState,
+  type QueryConnectionEndToEndWorkflowEditorState,
+} from '../../../../stores/editor/editor-state/end-to-end-workflow-state/QueryConnectionEndToEndWorkflowEditorState.js';
+
+export const QueryConnectionRelationalConnectionEditor = observer(
+  (props: {
+    queryConnectionEndToEndWorkflowState: QueryConnectionEndToEndWorkflowEditorState;
+    connectionValueStepperState: ConnectionValueStepperState;
+  }) => {
+    const {
+      queryConnectionEndToEndWorkflowState,
+      connectionValueStepperState,
+    } = props;
+    const elementAlreadyExistsMessage =
+      queryConnectionEndToEndWorkflowState.editorStore.graphManagerState.graph.allElements
+        .map((s) => s.path)
+        .includes(connectionValueStepperState.targetConnectionPath)
+        ? 'Element with same path already exists'
+        : undefined;
+    const onTargetPathChange: React.ChangeEventHandler<HTMLInputElement> = (
+      event,
+    ) => {
+      connectionValueStepperState.setTargetConnectionPath(event.target.value);
+    };
+
+    return (
+      <Panel className="query-connection-workflow-panel query-connection-relational-connection-editor">
+        <PanelHeader title="build a connection" />
+        <PanelContent>
+          <div className="query-connection-relational-connection-editor__connection-builder">
+            <div className="panel__content__form__section query-connection-relational-connection-editor__connection-builder__path">
+              <div className="panel__content__form__section__header__label">
+                Target Connection Path
+              </div>
+              <InputWithInlineValidation
+                className="panel__content__form__section__input"
+                spellCheck={false}
+                onChange={onTargetPathChange}
+                value={connectionValueStepperState.targetConnectionPath}
+                error={elementAlreadyExistsMessage}
+                showEditableIcon={true}
+              />
+            </div>
+            <div className="query-connection-relational-connection-editor__editor">
+              <RelationalConnectionGeneralEditor
+                connectionValueState={
+                  connectionValueStepperState.connectionValueState
+                }
+                isReadOnly={false}
+                hideHeader={true}
+              />
+            </div>
+          </div>
+        </PanelContent>
+      </Panel>
+    );
+  },
+);
+
+export const QueryConnectionDatabaseBuilderEditor = observer(
+  (props: { databaseBuilderState: DatabaseBuilderWizardState }) => {
+    const { databaseBuilderState } = props;
+    const applicationStore = useApplicationStore();
+    const preview = applicationStore.guardUnhandledError(() =>
+      flowResult(databaseBuilderState.previewDatabaseModel()),
+    );
+
+    return (
+      <Panel className="query-connection-workflow-panel query-connection-database-builder-editor">
+        <div className="query-connection-workflow-panel query-connection-database-builder-editor__header">
+          <PanelHeader title="Database Builder" />
+          <button
+            className="query-connection-workflow-panel query-connection-database-builder-editor__header__action"
+            onClick={preview}
+            title="Preview database..."
+          >
+            <EyeIcon className="query-connection-database-builder-editor__header__action__icon" />
+            <div className="query-connection-database-builder-editor__header__action__label">
+              Preview
+            </div>
+          </button>
+        </div>
+        <Modal
+          darkMode={true}
+          className="query-connection-database-builder-editor__modal"
+        >
+          <div className="query-connection-database-builder-editor__modal__content">
+            <DatabaseBuilderModalContent
+              databaseBuilderState={databaseBuilderState}
+            />
+          </div>
+        </Modal>
+      </Panel>
+    );
+  },
+);
+
+export const QueryConnectionDatabaseGrammarEditor = observer(
+  (props: {
+    queryConnectionEndToEndWorkflowState: QueryConnectionEndToEndWorkflowEditorState;
+    databaseGrammarEditorStepperState: DatabaseGrammarEditorStepperState;
+  }) => {
+    const {
+      queryConnectionEndToEndWorkflowState,
+      databaseGrammarEditorStepperState,
+    } = props;
+    const applicationStore = useApplicationStore();
+
+    const compile = (): void => {
+      flowResult(
+        databaseGrammarEditorStepperState.compileDatabaseGrammarCode(),
+      ).catch(applicationStore.alertUnhandledError);
+    };
+
+    const updateDatabaseGrammar = (val: string): void => {
+      queryConnectionEndToEndWorkflowState.setDatabaseGrammarCode(val);
+    };
+
+    return (
+      <Panel className="query-connection-workflow-panel query-connection-database-builder-editor">
+        <div className="query-connection-workflow-panel query-connection-database-builder-editor__header">
+          <PanelHeader title="Database Editor" />
+          <button
+            className="query-connection-workflow-panel query-connection-database-builder-editor__header__action"
+            onClick={compile}
+            title="Compile database model..."
+          >
+            Compile
+          </button>
+        </div>
+        <PanelLoadingIndicator
+          isLoading={
+            databaseGrammarEditorStepperState.isCompilingGrammarCode
+              .isInProgress
+          }
+        />
+        <div className="panel__content__form__section__header__prompt  query-connection-database-builder-editor__prompt">
+          Joins could be added manually and please be aware that only one
+          database is supported in this flow
+        </div>
+        <div className="query-connection-database-builder-editor__editor">
+          <CodeEditor
+            inputValue={
+              queryConnectionEndToEndWorkflowState.databaseGrammarCode
+            }
+            updateInput={updateDatabaseGrammar}
+            language={CODE_EDITOR_LANGUAGE.PURE}
+            error={queryConnectionEndToEndWorkflowState.compileError}
+          />
+        </div>
+      </Panel>
+    );
+  },
+);
+
+export const QueryConnectionModelsEditor = observer(
+  (props: {
+    databaseModelBuilderStepperState: DatabaseModelBuilderStepperState;
+    queryConnectionEndToEndWorkflowState: QueryConnectionEndToEndWorkflowEditorState;
+  }) => {
+    const {
+      databaseModelBuilderStepperState,
+      queryConnectionEndToEndWorkflowState,
+    } = props;
+    const applicationStore = useApplicationStore();
+
+    const runtimeElementAlreadyExistsMessage =
+      queryConnectionEndToEndWorkflowState.editorStore.graphManagerState.graph.allElements
+        .map((s) => s.path)
+        .includes(queryConnectionEndToEndWorkflowState.targetRuntimePath)
+        ? 'Element with same path already exists or must contain ::'
+        : undefined;
+
+    const debouncedRegenerateRuntime = useMemo(
+      () =>
+        debounce(
+          (val: string) => {
+            if (val !== '') {
+              queryConnectionEndToEndWorkflowState.updateRuntime(val);
+            }
+          },
+
+          500,
+        ),
+      [queryConnectionEndToEndWorkflowState],
+    );
+
+    const changeTargetRuntimePackage: React.ChangeEventHandler<
+      HTMLInputElement
+    > = (event) => {
+      queryConnectionEndToEndWorkflowState.setTargetRuntimePath(
+        event.target.value,
+      );
+      debouncedRegenerateRuntime(event.target.value);
+    };
+
+    useEffect(() => {
+      flowResult(
+        databaseModelBuilderStepperState.databaseModelBuilderState.previewDatabaseModels(),
+      )
+        .then(() =>
+          databaseModelBuilderStepperState.updateGraphWithModels(
+            guaranteeNonNullable(
+              databaseModelBuilderStepperState.databaseModelBuilderState
+                .entities,
+            ),
+          ),
+        )
+        .catch(applicationStore.alertUnhandledError);
+    }, [
+      applicationStore,
+      databaseModelBuilderStepperState,
+      databaseModelBuilderStepperState.databaseModelBuilderState,
+      databaseModelBuilderStepperState.databaseModelBuilderState.targetPackage,
+      queryConnectionEndToEndWorkflowState,
+    ]);
+
+    return (
+      <Panel className="query-connection-workflow-panel query-connection-database-builder-editor">
+        <div className="query-connection-workflow-panel query-connection-database-builder-editor__header">
+          <PanelHeader title="Model Builder" />
+        </div>
+        <Modal
+          darkMode={true}
+          className="query-connection-connection-model-editor__modal"
+        >
+          <div className="query-connection-connection-model-editor__modal">
+            <ModalBody className="database-builder__content">
+              <ResizablePanelGroup orientation="vertical">
+                <ResizablePanel size={450}>
+                  <div className="database-builder__config">
+                    <PanelHeader title="schema explorer" />
+                    <PanelContent className="database-builder__config__content">
+                      <DatabaseModelPackageInput
+                        databaseModelBuilderState={
+                          databaseModelBuilderStepperState.databaseModelBuilderState
+                        }
+                      />
+                      <div className="panel__content__form__section">
+                        <div className="panel__content__form__section__header__label">
+                          Target Runtime Path
+                        </div>
+                        <div className="panel__content__form__section__header__prompt">
+                          Target path for runtime
+                        </div>
+                        <InputWithInlineValidation
+                          className="query-builder__variables__variable__name__input input-group__input"
+                          spellCheck={false}
+                          value={
+                            queryConnectionEndToEndWorkflowState.targetRuntimePath
+                          }
+                          onChange={changeTargetRuntimePackage}
+                          placeholder="Target Runtime path"
+                          error={runtimeElementAlreadyExistsMessage}
+                          showEditableIcon={true}
+                        />
+                      </div>
+                    </PanelContent>
+                  </div>
+                </ResizablePanel>
+                <ResizablePanelSplitter />
+                <ResizablePanel>
+                  <DatabaseModelPreviewEditor
+                    databaseModelBuilderState={
+                      databaseModelBuilderStepperState.databaseModelBuilderState
+                    }
+                    grammarCode={databaseModelBuilderStepperState.databaseModelBuilderState.generatedGrammarCode.concat(
+                      queryConnectionEndToEndWorkflowState.runtimeGrammarCode,
+                    )}
+                  />
+                </ResizablePanel>
+              </ResizablePanelGroup>
+            </ModalBody>
+          </div>
+        </Modal>
+      </Panel>
+    );
+  },
+);
+
+export const QueryConnectionConfirmationAndGrammarEditor = observer(
+  (props: {
+    queryConnectionEndToEndWorkflowState: QueryConnectionEndToEndWorkflowEditorState;
+    queryConnectionConfirmationAndGrammarEditorStepperState: QueryConnectionConfirmationAndGrammarEditorStepperState;
+  }) => {
+    const {
+      queryConnectionEndToEndWorkflowState,
+      queryConnectionConfirmationAndGrammarEditorStepperState,
+    } = props;
+    const applicationStore = useApplicationStore();
+
+    const compile = (): void => {
+      flowResult(
+        queryConnectionConfirmationAndGrammarEditorStepperState.compile(),
+      ).catch(applicationStore.alertUnhandledError);
+    };
+
+    const updateInput = (val: string): void => {
+      queryConnectionEndToEndWorkflowState.setFinalGrammarCode(val);
+    };
+
+    return (
+      <Panel className="query-connection-workflow-panel query-connection-database-builder-editor">
+        <div className="query-connection-workflow-panel query-connection-database-builder-editor__header">
+          <PanelHeader title="Database Editor" />
+          <button
+            className="query-connection-workflow-panel query-connection-database-builder-editor__header__action"
+            onClick={compile}
+            title="Compile model..."
+          >
+            Compile
+          </button>
+        </div>
+        <PanelLoadingIndicator
+          isLoading={
+            queryConnectionConfirmationAndGrammarEditorStepperState
+              .isCompilingCode.isInProgress
+          }
+        />
+        <div className="panel__content__form__section__header__prompt  query-connection-database-builder-editor__prompt">
+          Please confirm models below will be added to the project and click
+          query to open query builder
+        </div>
+        <div className="query-connection-database-builder-editor__editor">
+          <CodeEditor
+            inputValue={queryConnectionEndToEndWorkflowState.finalGrammarCode}
+            updateInput={updateInput}
+            language={CODE_EDITOR_LANGUAGE.PURE}
+            error={queryConnectionEndToEndWorkflowState.compileError}
+          />
+        </div>
+      </Panel>
+    );
+  },
+);
+
+export const QueryConnectionWorflowEditor = observer(
+  (props: {
+    connectionToQueryWorkflowState: QueryConnectionEndToEndWorkflowEditorState;
+  }) => {
+    const { connectionToQueryWorkflowState } = props;
+    const applicationStore = useApplicationStore();
+    const stepLabel = connectionToQueryWorkflowState.activeStepToStepLabel.get(
+      connectionToQueryWorkflowState.activeStep,
+    );
+    const increaseActiveStep = (): void => {
+      if (connectionToQueryWorkflowState.isValid) {
+        connectionToQueryWorkflowState.setActiveStep(
+          connectionToQueryWorkflowState.activeStep + 1,
+        );
+      }
+    };
+    const handleNext = (): void => {
+      if (stepLabel) {
+        flowResult(
+          connectionToQueryWorkflowState.activeStepToBaseStepperState
+            .get(stepLabel)
+            ?.handleNext(),
+        )
+          .then(() => increaseActiveStep())
+          .catch(applicationStore.alertUnhandledError);
+      }
+    };
+    const handleBack = (): void => {
+      connectionToQueryWorkflowState.setCompileError(undefined);
+      connectionToQueryWorkflowState.setActiveStep(
+        connectionToQueryWorkflowState.activeStep - 1,
+      );
+    };
+
+    const renderStepContent = (): React.ReactNode => {
+      if (stepLabel) {
+        const currentState =
+          connectionToQueryWorkflowState.activeStepToBaseStepperState.get(
+            stepLabel,
+          );
+        if (currentState instanceof ConnectionValueStepperState) {
+          return (
+            <QueryConnectionRelationalConnectionEditor
+              queryConnectionEndToEndWorkflowState={
+                currentState.workflowEditorState
+              }
+              connectionValueStepperState={currentState}
+            />
+          );
+        } else if (currentState instanceof DatabaseBuilderStepperState) {
+          return (
+            <QueryConnectionDatabaseBuilderEditor
+              databaseBuilderState={currentState.databaseBuilderWizardState}
+            />
+          );
+        } else if (currentState instanceof DatabaseGrammarEditorStepperState) {
+          return (
+            <QueryConnectionDatabaseGrammarEditor
+              queryConnectionEndToEndWorkflowState={
+                currentState.workflowEditorState
+              }
+              databaseGrammarEditorStepperState={currentState}
+            />
+          );
+        } else if (currentState instanceof DatabaseModelBuilderStepperState) {
+          return (
+            <QueryConnectionModelsEditor
+              databaseModelBuilderStepperState={currentState}
+              queryConnectionEndToEndWorkflowState={
+                currentState.workflowEditorState
+              }
+            />
+          );
+        } else if (
+          currentState instanceof
+          QueryConnectionConfirmationAndGrammarEditorStepperState
+        ) {
+          return (
+            <QueryConnectionConfirmationAndGrammarEditor
+              queryConnectionEndToEndWorkflowState={
+                currentState.workflowEditorState
+              }
+              queryConnectionConfirmationAndGrammarEditorStepperState={
+                currentState
+              }
+            />
+          );
+        }
+      }
+      return <BlankPanelContent> </BlankPanelContent>;
+    };
+    return (
+      <div>
+        <Panel>
+          <PanelContent className="test-runner-panel__result">
+            <BaseStepper
+              steps={Object.values(QUERY_CONNECTION_WORKFLOW_STEPS)}
+              activeStep={connectionToQueryWorkflowState.activeStep}
+            ></BaseStepper>
+            <PanelContent>
+              <div className="query-connection-workflow__content">
+                {renderStepContent()}
+              </div>
+            </PanelContent>
+          </PanelContent>
+          <div className="query-connection-workflow__actions">
+            <button
+              className="query-connection-workflow__actions__action-btn"
+              disabled={connectionToQueryWorkflowState.activeStep === 0}
+              onClick={handleBack}
+              title="Go to previous step..."
+            >
+              Back
+            </button>
+            <button
+              className="query-connection-workflow__actions__action-btn query-connection-workflow__actions__action-btn--primary"
+              onClick={handleNext}
+            >
+              {connectionToQueryWorkflowState.activeStep ===
+              Object.values(QUERY_CONNECTION_WORKFLOW_STEPS).length - 1
+                ? 'Import And Query'
+                : 'Next'}
+            </button>
+          </div>
+        </Panel>
+      </div>
+    );
+  },
+);

package/src/components/editor/editor-group/service-editor/ServiceExecutionQueryEditor.tsx

@@ -523,7 +523,7 @@ export const queryService = async (
               <button
                 className="query-builder__dialog__header__custom-action"
                 tabIndex={-1}
-                disabled={editorStore.isInViewerMode}
+                disabled={editorStore.disableGraphEditing}
                 onClick={save}
               >
                 Save Query

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

@@ -496,7 +496,8 @@ const ExplorerContextMenu = observer(
       })
       .filter(isNonNullable);
     const projectId = editorStore.sdlcState.currentProject?.projectId;
-    const isReadOnly = editorStore.isInViewerMode || Boolean(nodeIsImmutable);
+    const isReadOnly =
+      editorStore.disableGraphEditing || Boolean(nodeIsImmutable);
     const isDependencyProjectElement =
       node && isDependencyElement(node.packageableElement);
     const _package = node
@@ -578,7 +579,7 @@ const ExplorerContextMenu = observer(
                   handler: () => {
                     editorStore.explorerTreeState.buildDatabaseModels(
                       database,
-                      editorStore.isInViewerMode,
+                      editorStore.disableGraphEditing,
                     );
                   },
                 },
@@ -592,7 +593,7 @@ const ExplorerContextMenu = observer(
           } else {
             editorStore.explorerTreeState.buildDatabaseModels(
               database,
-              editorStore.isInViewerMode,
+              editorStore.disableGraphEditing,
             );
           }
         }
@@ -1142,7 +1143,7 @@ const ExplorerDropdownMenu = observer(() => {
 
 const ExplorerTrees = observer(() => {
   const editorStore = useEditorStore();
-  const { isInViewerMode } = editorStore;
+  const { disableGraphEditing } = editorStore;
   const isInGrammarTextMode =
     editorStore.graphEditorMode.mode === GRAPH_EDITOR_MODE.GRAMMAR_TEXT;
   const openModelImport = (): void =>
@@ -1224,7 +1225,7 @@ const ExplorerTrees = observer(() => {
   return (
     <ContextMenu
       className="explorer__content"
-      disabled={isInGrammarTextMode || isInViewerMode}
+      disabled={isInGrammarTextMode || disableGraphEditing}
       content={<ExplorerContextMenu />}
       menuProps={{ elevation: 7 }}
     >
@@ -1396,7 +1397,7 @@ const ProjectExplorerActionPanel = observer((props: { disabled: boolean }) => {
           <SettingsEthernetIcon />
         </button>
       )}
-      {!editorStore.isInViewerMode && (
+      {!editorStore.disableGraphEditing && (
         <DropdownMenu
           className="panel__header__action"
           title="New Element... (Ctrl + Shift + N)"

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

@@ -15,7 +15,10 @@
  */
 
 import { observer } from 'mobx-react-lite';
-import { ACTIVITY_MODE } from '../../../stores/editor/EditorConfig.js';
+import {
+  ACTIVITY_MODE,
+  USER_JOURNEYS,
+} from '../../../stores/editor/EditorConfig.js';
 import { Explorer } from './Explorer.js';
 import { LocalChanges } from './LocalChanges.js';
 import { WorkspaceReview } from './WorkspaceReview.js';
@@ -26,6 +29,7 @@ import { WorkflowManager } from './WorkflowManager.js';
 import { useEditorStore } from '../EditorStoreProvider.js';
 import { GlobalTestRunner } from './testable/GlobalTestRunner.js';
 import { RegisterService } from './RegisterService.js';
+import { EndToEndWorkflow } from './end-to-end-workflow/EndToEndWorkflows.js';
 
 /**
  * Wrapper component around different implementations of sidebar, such as to view domain, to manage SDLC, etc.
@@ -67,6 +71,14 @@ export const SideBar = observer(() => {
             }
           />
         );
+      case USER_JOURNEYS.END_TO_END_WORKFLOWS:
+        return (
+          <EndToEndWorkflow
+            globalEndToEndWorkflowState={
+              editorStore.globalEndToEndWorkflowState
+            }
+          />
+        );
       default:
         return null;
     }