@finos/legend-application-studio 27.1.0 → 27.1.2

package/src/__lib__/LegendStudioEvent.ts

@@ -35,7 +35,7 @@ export enum LEGEND_STUDIO_APP_EVENT {
   SERVICE_TEST_SETUP_FAILURE = 'editor.service-editor.test-setup.failure',
   GENERATION_FAILURE = 'editor.generation.failure',
   EXTERNAL_FORMAT_FAILURE = 'editor.external-format.failure',
-
+  MAPPING_TEST_FAILURE = 'editor.mapping-editor.test-runner.failure',
   // SDLC
   // TODO: consider to split this generic errors into more specific events
   SDLC_MANAGER_FAILURE = 'sdlc.manager.failure',

package/src/components/editor/editor-group/FunctionEditor.tsx

@@ -60,6 +60,7 @@ import {
   Modal,
   PauseCircleIcon,
   PlayIcon,
+  PanelLoadingIndicator,
 } from '@finos/legend-art';
 import { LEGEND_STUDIO_TEST_ID } from '../../../__lib__/LegendStudioTesting.js';
 import {
@@ -95,6 +96,8 @@ import {
   generateFunctionPrettyName,
   extractAnnotatedElementDocumentation,
   getClassProperty,
+  RawExecutionResult,
+  extractExecutionResultValues,
 } from '@finos/legend-graph';
 import {
   type ApplicationStore,
@@ -103,6 +106,7 @@ import {
   type LegendApplicationPluginManager,
   useApplicationNavigationContext,
   useApplicationStore,
+  DEFAULT_TAB_SIZE,
 } from '@finos/legend-application';
 import {
   type PackageableElementOption,
@@ -139,6 +143,7 @@ import {
   CODE_EDITOR_LANGUAGE,
   CodeEditor,
 } from '@finos/legend-lego/code-editor';
+import { PanelGroupItemExperimentalBadge } from '../panel-group/PanelGroup.js';
 
 enum FUNCTION_PARAMETER_TYPE {
   CLASS = 'CLASS',
@@ -661,6 +666,7 @@ const FunctionDefinitionEditor = observer(
     const applicationStore = useApplicationStore();
     const lambdaEditorState = functionEditorState.functionDefinitionEditorState;
     const functionElement = functionEditorState.functionElement;
+    const execResult = functionEditorState.executionResult;
 
     // Parameters
     const addParameter = (): void => {
@@ -706,83 +712,136 @@ const FunctionDefinitionEditor = observer(
       [handleDropParameter],
     );
 
+    const renderFuncResult = (): React.ReactNode => {
+      if (execResult instanceof RawExecutionResult) {
+        const val =
+          execResult.value === null ? 'null' : execResult.value.toString();
+        return (
+          <CodeEditor
+            language={CODE_EDITOR_LANGUAGE.TEXT}
+            inputValue={val}
+            isReadOnly={true}
+          />
+        );
+      } else if (execResult !== undefined) {
+        const json =
+          returnUndefOnError(() =>
+            JSON.stringify(
+              extractExecutionResultValues(execResult),
+              null,
+              DEFAULT_TAB_SIZE,
+            ),
+          ) ?? JSON.stringify(execResult);
+        return (
+          <CodeEditor
+            language={CODE_EDITOR_LANGUAGE.JSON}
+            inputValue={json}
+            isReadOnly={true}
+          />
+        );
+      }
+      return <BlankPanelContent>Function Did Not Run</BlankPanelContent>;
+    };
+
     return (
-      <div className="function-editor__definition">
-        <div className="function-editor__definition__item">
-          <div className="function-editor__definition__item__header">
-            <div className="function-editor__definition__item__header__title">
-              PARAMETERS
+      <>
+        <PanelLoadingIndicator
+          isLoading={
+            functionEditorState.isGeneratingPlan ||
+            functionEditorState.isRunningFunc
+          }
+        />
+        <div className="function-editor__definition">
+          <div className="function-editor__definition__item">
+            <div className="function-editor__definition__item__header">
+              <div className="function-editor__definition__item__header__title">
+                PARAMETERS
+              </div>
+              <button
+                className="function-editor__definition__item__header__add-btn btn--dark"
+                disabled={isReadOnly}
+                onClick={addParameter}
+                tabIndex={-1}
+                title="Add Parameter"
+              >
+                <PlusIcon />
+              </button>
             </div>
-            <button
-              className="function-editor__definition__item__header__add-btn btn--dark"
-              disabled={isReadOnly}
-              onClick={addParameter}
-              tabIndex={-1}
-              title="Add Parameter"
+            <DragPreviewLayer
+              labelGetter={(item: FunctionParameterDragSource): string =>
+                item.parameter.name === '' ? '(unknown)' : item.parameter.name
+              }
+              types={[FUNCTION_PARAMETER_DND_TYPE]}
+            />
+            <div
+              ref={dropParameterRef}
+              className={clsx('function-editor__definition__item__content', {
+                'panel__content__lists--dnd-over':
+                  isParameterDragOver && !isReadOnly,
+              })}
             >
-              <PlusIcon />
-            </button>
+              {functionElement.parameters.map((param) => (
+                <ParameterBasicEditor
+                  key={param._UUID}
+                  parameter={param}
+                  _func={functionElement}
+                  deleteParameter={deleteParameter(param)}
+                  isReadOnly={isReadOnly}
+                />
+              ))}
+              {functionElement.parameters.length === 0 && (
+                <div className="function-editor__definition__item__content--empty">
+                  No parameters
+                </div>
+              )}
+            </div>
           </div>
-          <DragPreviewLayer
-            labelGetter={(item: FunctionParameterDragSource): string =>
-              item.parameter.name === '' ? '(unknown)' : item.parameter.name
-            }
-            types={[FUNCTION_PARAMETER_DND_TYPE]}
-          />
-          <div
-            ref={dropParameterRef}
-            className={clsx('function-editor__definition__item__content', {
-              'panel__content__lists--dnd-over':
-                isParameterDragOver && !isReadOnly,
-            })}
-          >
-            {functionElement.parameters.map((param) => (
-              <ParameterBasicEditor
-                key={param._UUID}
-                parameter={param}
-                _func={functionElement}
-                deleteParameter={deleteParameter(param)}
-                isReadOnly={isReadOnly}
-              />
-            ))}
-            {functionElement.parameters.length === 0 && (
-              <div className="function-editor__definition__item__content--empty">
-                No parameters
+          <div className="function-editor__definition__item">
+            <div className="function-editor__definition__item__header">
+              <div className="function-editor__definition__item__header__title">
+                LAMBDA
+              </div>
+              <div className="">
+                <ReturnTypeEditor
+                  functionElement={functionElement}
+                  isReadOnly={isReadOnly}
+                />
               </div>
-            )}
-          </div>
-        </div>
-        <div className="function-editor__definition__item">
-          <div className="function-editor__definition__item__header">
-            <div className="function-editor__definition__item__header__title">
-              LAMBDA
             </div>
-            <div className="">
-              <ReturnTypeEditor
-                functionElement={functionElement}
-                isReadOnly={isReadOnly}
+            <div
+              className={clsx('function-editor__definition__item__content', {
+                backdrop__element: Boolean(
+                  functionEditorState.functionDefinitionEditorState.parserError,
+                ),
+              })}
+            >
+              <LambdaEditor
+                className="function-editor__definition__lambda-editor lambda-editor--dark"
+                disabled={
+                  lambdaEditorState.isConvertingFunctionBodyToString ||
+                  isReadOnly
+                }
+                lambdaEditorState={lambdaEditorState}
+                forceBackdrop={false}
+                autoFocus={true}
               />
             </div>
           </div>
-          <div
-            className={clsx('function-editor__definition__item__content', {
-              backdrop__element: Boolean(
-                functionEditorState.functionDefinitionEditorState.parserError,
-              ),
-            })}
-          >
-            <LambdaEditor
-              className="function-editor__definition__lambda-editor lambda-editor--dark"
-              disabled={
-                lambdaEditorState.isConvertingFunctionBodyToString || isReadOnly
-              }
-              lambdaEditorState={lambdaEditorState}
-              forceBackdrop={false}
-              autoFocus={true}
-            />
+          <div className="function-editor__definition__item">
+            <div className="function-editor__definition__item__header">
+              <div className="function-editor__definition__item__header__title">
+                RESULT
+                <PanelGroupItemExperimentalBadge />
+              </div>
+            </div>
+            <div className="function-editor__definition__item__content">
+              <div className="function-editor__definition__result-viewer">
+                {renderFuncResult()}
+              </div>
+            </div>
           </div>
         </div>
-      </div>
+      </>
     );
   },
 );
@@ -872,47 +931,6 @@ const FunctionActivatorContentBuilder = observer(
   },
 );
 
-const ExecutionResultViewer = observer(
-  (props: { functionEditorState: FunctionEditorState }) => {
-    const { functionEditorState } = props;
-    // execution
-    const executionResultText = functionEditorState.executionResultText;
-    const closeExecutionResultViewer = (): void =>
-      functionEditorState.setExecutionResultText(undefined);
-
-    return (
-      <Dialog
-        open={Boolean(executionResultText)}
-        onClose={closeExecutionResultViewer}
-        classes={{
-          root: 'editor-modal__root-container',
-          container: 'editor-modal__container',
-          paper: 'editor-modal__content',
-        }}
-      >
-        <Modal darkMode={true} className="editor-modal">
-          <ModalHeader title="Execution Result" />
-          <ModalBody>
-            <CodeEditor
-              inputValue={executionResultText ?? ''}
-              isReadOnly={true}
-              language={CODE_EDITOR_LANGUAGE.JSON}
-            />
-          </ModalBody>
-          <ModalFooter>
-            <button
-              className="btn modal__footer__close-btn btn--dark"
-              onClick={closeExecutionResultViewer}
-            >
-              Close
-            </button>
-          </ModalFooter>
-        </Modal>
-      </Dialog>
-    );
-  },
-);
-
 export const FunctionEditor = observer(() => {
   const editorStore = useEditorStore();
   const applicationStore = useApplicationStore();
@@ -1019,15 +1037,15 @@ export const FunctionEditor = observer(() => {
     );
   };
 
-  const runQuery = applicationStore.guardUnhandledError(() =>
-    flowResult(functionEditorState.handleRunQuery()),
+  const runFunc = applicationStore.guardUnhandledError(() =>
+    flowResult(functionEditorState.handleRunFunc()),
   );
 
   const executionIsRunning =
-    functionEditorState.isRunningQuery || functionEditorState.isGeneratingPlan;
+    functionEditorState.isRunningFunc || functionEditorState.isGeneratingPlan;
 
   const cancelQuery = applicationStore.guardUnhandledError(() =>
-    flowResult(functionEditorState.cancelQuery()),
+    flowResult(functionEditorState.cancelFuncRun()),
   );
 
   const generatePlan = applicationStore.guardUnhandledError(() =>
@@ -1083,7 +1101,7 @@ export const FunctionEditor = observer(() => {
           </div>
           <div className="panel__header__actions">
             <div className="btn__dropdown-combo btn__dropdown-combo--primary">
-              {functionEditorState.isRunningQuery ? (
+              {functionEditorState.isRunningFunc ? (
                 <button
                   className="btn__dropdown-combo__canceler"
                   onClick={cancelQuery}
@@ -1100,15 +1118,13 @@ export const FunctionEditor = observer(() => {
                 <>
                   <button
                     className="btn__dropdown-combo__label"
-                    onClick={runQuery}
-                    title="Run Query"
+                    onClick={runFunc}
+                    title="Run Function"
                     disabled={executionIsRunning}
                     tabIndex={-1}
                   >
                     <PlayIcon className="btn__dropdown-combo__label__icon" />
-                    <div className="btn__dropdown-combo__label__title">
-                      Run Query
-                    </div>
+                    <div className="btn__dropdown-combo__label__title">Run</div>
                   </button>
                   <DropdownMenu
                     className="btn__dropdown-combo__dropdown-btn"
@@ -1343,7 +1359,6 @@ export const FunctionEditor = observer(() => {
           <ExecutionPlanViewer
             executionPlanState={functionEditorState.executionPlanState}
           />
-          <ExecutionResultViewer functionEditorState={functionEditorState} />
           {functionEditorState.parametersState.parameterValuesEditorState
             .showModal && (
             <LambdaParameterValuesEditor

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

@@ -0,0 +1,191 @@
+/**
+ * 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 {
+  Dialog,
+  ResizablePanelGroup,
+  ResizablePanel,
+  ResizablePanelSplitter,
+  PanelLoadingIndicator,
+  PanelContent,
+  Modal,
+  ModalHeader,
+  ModalBody,
+  ModalFooter,
+  ModalTitle,
+  ModalHeaderActions,
+  TimesIcon,
+  ModalFooterButton,
+  BlankPanelContent,
+  PanelHeader,
+  Panel,
+} from '@finos/legend-art';
+import { useEffect } from 'react';
+import { noop } from '@finos/legend-shared';
+import {
+  useApplicationStore,
+  useConditionedApplicationNavigationContext,
+} from '@finos/legend-application';
+import { flowResult } from 'mobx';
+import { LEGEND_STUDIO_APPLICATION_NAVIGATION_CONTEXT_KEY } from '../../../../__lib__/LegendStudioApplicationNavigationContext.js';
+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 { DatabaseSchemaExplorer } from './DatabaseSchemaExplorer.js';
+
+export const DatabaseBuilderWizard = observer(
+  (props: {
+    databaseBuilderState: DatabaseBuilderWizardState;
+    isReadOnly: boolean;
+  }) => {
+    const { databaseBuilderState, isReadOnly } = props;
+    const schemaExplorerState = databaseBuilderState.schemaExplorerState;
+    const applicationStore = useApplicationStore();
+    const preview = applicationStore.guardUnhandledError(() =>
+      flowResult(databaseBuilderState.previewDatabaseModel()),
+    );
+    const updateDatabase = applicationStore.guardUnhandledError(() =>
+      flowResult(databaseBuilderState.updateDatabase()),
+    );
+    const closeModal = (): void => {
+      databaseBuilderState.setShowModal(false);
+      databaseBuilderState.editorStore.explorerTreeState.setDatabaseBuilderState(
+        undefined,
+      );
+    };
+    const isExecutingAction =
+      schemaExplorerState.isGeneratingDatabase ||
+      schemaExplorerState.isUpdatingDatabase;
+
+    useEffect(() => {
+      flowResult(schemaExplorerState.fetchDatabaseMetadata()).catch(
+        applicationStore.alertUnhandledError,
+      );
+    }, [applicationStore, schemaExplorerState]);
+
+    useConditionedApplicationNavigationContext(
+      LEGEND_STUDIO_APPLICATION_NAVIGATION_CONTEXT_KEY.DATABASE_BUILDER,
+      databaseBuilderState.showModal,
+    );
+
+    return (
+      <Dialog
+        open={databaseBuilderState.showModal}
+        onClose={noop} // disallow closing dialog by using Esc key or clicking on the backdrop
+        classes={{ container: 'search-modal__container' }}
+        PaperProps={{
+          classes: {
+            root: 'search-modal__inner-container database-builder__container',
+          },
+        }}
+      >
+        <Modal darkMode={true} className="database-builder">
+          <ModalHeader>
+            <ModalTitle title="Database Builder" />
+            <ModalHeaderActions>
+              <button
+                className="modal__header__action"
+                tabIndex={-1}
+                onClick={closeModal}
+              >
+                <TimesIcon />
+              </button>
+            </ModalHeaderActions>
+          </ModalHeader>
+          <ModalBody className="database-builder__content">
+            <PanelLoadingIndicator isLoading={isExecutingAction} />
+            <ResizablePanelGroup orientation="vertical">
+              <ResizablePanel size={450}>
+                <div className="database-builder__config">
+                  <PanelHeader title="schema explorer" />
+                  <PanelContent className="database-builder__config__content">
+                    {schemaExplorerState.treeData && (
+                      <DatabaseSchemaExplorer
+                        treeData={schemaExplorerState.treeData}
+                        isReadOnly={false}
+                        schemaExplorerState={
+                          databaseBuilderState.schemaExplorerState
+                        }
+                      />
+                    )}
+                  </PanelContent>
+                </div>
+              </ResizablePanel>
+              <ResizablePanelSplitter />
+              <ResizablePanel>
+                <Panel className="database-builder__model">
+                  <PanelHeader title="database model" />
+
+                  <PanelContent>
+                    <div className="database-builder__modeller">
+                      <div className="panel__content__form__section database-builder__modeller__path">
+                        <div className="panel__content__form__section__header__label">
+                          Target Database Path
+                        </div>
+                        <input
+                          className="panel__content__form__section__input"
+                          spellCheck={false}
+                          disabled={true}
+                          value={schemaExplorerState.database.path}
+                        />
+                      </div>
+                      <div className="database-builder__modeller__preview">
+                        {databaseBuilderState.databaseGrammarCode && (
+                          <CodeEditor
+                            language={CODE_EDITOR_LANGUAGE.PURE}
+                            inputValue={
+                              databaseBuilderState.databaseGrammarCode
+                            }
+                            isReadOnly={true}
+                          />
+                        )}
+                        {!databaseBuilderState.databaseGrammarCode && (
+                          <BlankPanelContent>
+                            No database preview
+                          </BlankPanelContent>
+                        )}
+                      </div>
+                    </div>
+                  </PanelContent>
+                </Panel>
+              </ResizablePanel>
+            </ResizablePanelGroup>
+          </ModalBody>
+          <ModalFooter>
+            <ModalFooterButton
+              className="database-builder__action--btn"
+              disabled={isReadOnly || isExecutingAction}
+              onClick={preview}
+              title="Preview database model..."
+            >
+              Preview
+            </ModalFooterButton>
+            <ModalFooterButton
+              className="database-builder__action--btn"
+              disabled={isReadOnly || isExecutingAction}
+              onClick={updateDatabase}
+            >
+              Update Database
+            </ModalFooterButton>
+          </ModalFooter>
+        </Modal>
+      </Dialog>
+    );
+  },
+);