@finos/legend-application-studio 27.1.1 → 27.1.2

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>
+    );
+  },
+);

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

@@ -0,0 +1,227 @@
+/**
+ * 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 {
+  type TreeNodeContainerProps,
+  TreeView,
+  PURE_DatabaseSchemaIcon,
+  PURE_DatabaseTableIcon,
+  CircleIcon,
+  ChevronDownIcon,
+  ChevronRightIcon,
+  CheckCircleIcon,
+  EmptyCircleIcon,
+  KeyIcon,
+} from '@finos/legend-art';
+import {
+  type DatabaseExplorerTreeData,
+  type DatabaseSchemaExplorerTreeNodeData,
+  DatabaseSchemaExplorerTreeColumnNodeData,
+  DatabaseSchemaExplorerTreeSchemaNodeData,
+  DatabaseSchemaExplorerTreeTableNodeData,
+  type DatabaseSchemaExplorerState,
+} from '../../../../stores/editor/editor-state/element-editor-state/connection/DatabaseBuilderState.js';
+import { useApplicationStore } from '@finos/legend-application';
+import { renderColumnTypeIcon } from './DatabaseEditorHelper.js';
+import { flowResult } from 'mobx';
+import { stringifyDataType } from '@finos/legend-graph';
+import { forwardRef } from 'react';
+
+const getDatabaseSchemaNodeIcon = (
+  node: DatabaseSchemaExplorerTreeNodeData,
+): React.ReactNode => {
+  if (node instanceof DatabaseSchemaExplorerTreeSchemaNodeData) {
+    return (
+      <div className="database-schema-explorer__icon--schema">
+        <PURE_DatabaseSchemaIcon />
+      </div>
+    );
+  } else if (node instanceof DatabaseSchemaExplorerTreeTableNodeData) {
+    return (
+      <div className="database-schema-explorer__icon--table">
+        <PURE_DatabaseTableIcon />
+      </div>
+    );
+  } else if (node instanceof DatabaseSchemaExplorerTreeColumnNodeData) {
+    return renderColumnTypeIcon(node.column.type);
+  }
+  return null;
+};
+
+export type DatabaseSchemaExplorerTreeNodeContainerProps =
+  TreeNodeContainerProps<
+    DatabaseSchemaExplorerTreeNodeData,
+    {
+      toggleCheckedNode: (node: DatabaseSchemaExplorerTreeNodeData) => void;
+      isPartiallySelected: (
+        node: DatabaseSchemaExplorerTreeNodeData,
+      ) => boolean;
+    }
+  >;
+
+export const DatabaseSchemaExplorerTreeNodeContainer = observer(
+  forwardRef<HTMLDivElement, DatabaseSchemaExplorerTreeNodeContainerProps>(
+    function DatabaseSchemaExplorerTreeNodeContainer(props, ref) {
+      const { node, level, stepPaddingInRem, onNodeSelect, innerProps } = props;
+      const { toggleCheckedNode, isPartiallySelected } = innerProps;
+      const isExpandable =
+        Boolean(!node.childrenIds || node.childrenIds.length) &&
+        !(node instanceof DatabaseSchemaExplorerTreeColumnNodeData);
+      const nodeExpandIcon = isExpandable ? (
+        node.isOpen ? (
+          <ChevronDownIcon />
+        ) : (
+          <ChevronRightIcon />
+        )
+      ) : (
+        <div />
+      );
+      const nodeTypeIcon = getDatabaseSchemaNodeIcon(node);
+      const toggleExpandNode = (): void => {
+        onNodeSelect?.(node);
+        if (!isExpandable) {
+          toggleCheckedNode(node);
+        }
+      };
+      const isPrimaryKeyColumn =
+        node instanceof DatabaseSchemaExplorerTreeColumnNodeData &&
+        node.owner.primaryKey.includes(node.column);
+
+      const renderCheckedIcon = (
+        _node: DatabaseSchemaExplorerTreeNodeData,
+      ): React.ReactNode => {
+        if (_node instanceof DatabaseSchemaExplorerTreeColumnNodeData) {
+          return null;
+        } else if (isPartiallySelected(_node)) {
+          return <CircleIcon />;
+        } else if (_node.isChecked) {
+          return <CheckCircleIcon />;
+        }
+        return <EmptyCircleIcon />;
+      };
+
+      return (
+        <div
+          className="tree-view__node__container"
+          ref={ref}
+          style={{
+            paddingLeft: `${level * (stepPaddingInRem ?? 1)}rem`,
+            display: 'flex',
+          }}
+          onClick={toggleExpandNode}
+        >
+          <div className="tree-view__node__icon database-schema-explorer__node__icon__group">
+            <div className="database-schema-explorer__expand-icon">
+              {nodeExpandIcon}
+            </div>
+            <div
+              className="database-schema-explorer__checker-icon"
+              onClick={(event) => {
+                event.stopPropagation();
+                toggleCheckedNode(node);
+              }}
+            >
+              {renderCheckedIcon(node)}
+            </div>
+            <div className="database-schema-explorer__type-icon">
+              {nodeTypeIcon}
+            </div>
+          </div>
+          <div className="tree-view__node__label database-schema-explorer__node__label">
+            {node.label}
+            {node instanceof DatabaseSchemaExplorerTreeColumnNodeData && (
+              <div className="database-schema-explorer__node__type">
+                <div className="database-schema-explorer__node__type__label">
+                  {stringifyDataType(node.column.type)}
+                </div>
+              </div>
+            )}
+            {isPrimaryKeyColumn && (
+              <div
+                className="database-schema-explorer__node__pk"
+                title="Primary Key"
+              >
+                <KeyIcon />
+              </div>
+            )}
+          </div>
+        </div>
+      );
+    },
+  ),
+);
+
+export const DatabaseSchemaExplorer = observer(
+  (props: {
+    schemaExplorerState: DatabaseSchemaExplorerState;
+    treeData: DatabaseExplorerTreeData;
+    isReadOnly?: boolean | undefined;
+    treeNodeContainerComponent?:
+      | React.FC<DatabaseSchemaExplorerTreeNodeContainerProps>
+      | undefined;
+  }) => {
+    const { treeData, schemaExplorerState, treeNodeContainerComponent } = props;
+    const applicationStore = useApplicationStore();
+    const onNodeSelect = (node: DatabaseSchemaExplorerTreeNodeData): void => {
+      flowResult(schemaExplorerState.onNodeSelect(node, treeData)).catch(
+        applicationStore.alertUnhandledError,
+      );
+    };
+    const getChildNodes = (
+      node: DatabaseSchemaExplorerTreeNodeData,
+    ): DatabaseSchemaExplorerTreeNodeData[] =>
+      schemaExplorerState
+        .getChildNodes(node, treeData)
+        ?.sort((a, b) => a.label.localeCompare(b.label)) ?? [];
+    const isPartiallySelected = (
+      node: DatabaseSchemaExplorerTreeNodeData,
+    ): boolean => {
+      if (
+        node instanceof DatabaseSchemaExplorerTreeSchemaNodeData &&
+        !node.isChecked
+      ) {
+        return Boolean(
+          schemaExplorerState
+            .getChildNodes(node, treeData)
+            ?.find((childNode) => childNode.isChecked === true),
+        );
+      }
+      return false;
+    };
+    const toggleCheckedNode = (
+      node: DatabaseSchemaExplorerTreeNodeData,
+    ): void => schemaExplorerState.toggleCheckedNode(node, treeData);
+
+    return (
+      <TreeView
+        className="database-schema-explorer"
+        components={{
+          TreeNodeContainer:
+            treeNodeContainerComponent ??
+            DatabaseSchemaExplorerTreeNodeContainer,
+        }}
+        innerProps={{
+          toggleCheckedNode,
+          isPartiallySelected,
+        }}
+        treeData={treeData}
+        onNodeSelect={onNodeSelect}
+        getChildNodes={getChildNodes}
+      />
+    );
+  },
+);

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

@@ -1109,7 +1109,7 @@ const RelationalConnectionStoreEditor = observer(
       }
     };
     const openDatabaseBuilder = (): void =>
-      connectionValueState.editorStore.explorerTreeState.buildDbBuilderState(
+      connectionValueState.editorStore.explorerTreeState.buildDatabase(
         connection,
         isReadOnly,
       );