@finos/legend-application-studio 27.1.0 → 27.1.2

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

package/src/components/editor/editor-group/data-editor/EmbeddedDataEditor.tsx

@@ -152,16 +152,14 @@ export const ExternalFormatDataEditor = observer(
             </DropdownMenu>
           </div>
         </div>
-        <div className={clsx('external-format-data-editor__content')}>
-          <div className="external-format-data-editor__content__input">
-            <CodeEditor
-              language={language}
-              inputValue={externalFormatDataState.embeddedData.data}
-              updateInput={changeData}
-              hideGutter={true}
-            />
-          </div>
-        </div>
+        <PanelContent className="model-loader__editor">
+          <CodeEditor
+            language={language}
+            inputValue={externalFormatDataState.embeddedData.data}
+            updateInput={changeData}
+            hideGutter={true}
+          />
+        </PanelContent>
       </div>
     );
   },
@@ -248,6 +246,7 @@ export const ModelEmbeddedDataEditor = observer(
   }) => {
     const { isReadOnly, modelStoreDataState, modelDataState } = props;
     const modelData = modelDataState.modelData;
+    const hideClass = modelStoreDataState.hideClass;
     const classSelectorRef = useRef<SelectComponent>(null);
     const elementFilterOption = createFilter({
       ignoreCase: true,
@@ -279,34 +278,32 @@ export const ModelEmbeddedDataEditor = observer(
     };
 
     return (
-      <div>
-        <div className="sample-data-generator__controller">
-          <div
-            className="sample-data-generator__controller__icon"
-            title="class"
-          >
-            <PURE_ClassIcon />
+      <>
+        {!hideClass && (
+          <div className="sample-data-generator__controller">
+            <div
+              className="sample-data-generator__controller__icon"
+              title="class"
+            >
+              <PURE_ClassIcon />
+            </div>
+            <CustomSelectorInput
+              ref={classSelectorRef}
+              className="sample-data-generator__controller__class-selector"
+              options={classOptions}
+              onChange={changeClass}
+              value={selectedClassOption}
+              darkMode={true}
+              filterOption={elementFilterOption}
+              formatOptionLabel={getPackageableElementOptionFormatter({
+                darkMode: true,
+              })}
+            />
           </div>
-          <CustomSelectorInput
-            ref={classSelectorRef}
-            className="sample-data-generator__controller__class-selector"
-            options={classOptions}
-            onChange={changeClass}
-            value={selectedClassOption}
-            darkMode={true}
-            filterOption={elementFilterOption}
-            formatOptionLabel={getPackageableElementOptionFormatter({
-              darkMode: true,
-            })}
-          />
-        </div>
-        <div>
-          {renderEmbeddedDataEditor(
-            modelDataState.embeddedDataState,
-            isReadOnly,
-          )}
-        </div>
-      </div>
+        )}
+
+        {renderEmbeddedDataEditor(modelDataState.embeddedDataState, isReadOnly)}
+      </>
     );
   },
 );

package/src/components/editor/editor-group/data-editor/RelationalCSVDataEditor.tsx

@@ -18,6 +18,7 @@ import {
   BlankPanelPlaceholder,
   clsx,
   ContextMenu,
+  CustomSelectorInput,
   Dialog,
   MenuContent,
   MenuContentItem,
@@ -26,6 +27,7 @@ import {
   ModalFooter,
   ModalFooterButton,
   ModalHeader,
+  PanelFormBooleanField,
   PlusIcon,
   ResizablePanel,
   ResizablePanelGroup,
@@ -33,7 +35,11 @@ import {
   ResizablePanelSplitterLine,
   UploadIcon,
 } from '@finos/legend-art';
-import type { RelationalCSVDataTable } from '@finos/legend-graph';
+import {
+  type Table,
+  getAllTablesFromDatabase,
+  RelationalCSVDataTable,
+} from '@finos/legend-graph';
 import { observer } from 'mobx-react-lite';
 import { forwardRef, useState } from 'react';
 import type { RelationalCSVDataState } from '../../../../stores/editor/editor-state/element-editor-state/data/EmbeddedDataState.js';
@@ -43,22 +49,90 @@ import {
 } from '@finos/legend-lego/code-editor';
 import { LEGEND_STUDIO_APPLICATION_NAVIGATION_CONTEXT_KEY } from '../../../../__lib__/LegendStudioApplicationNavigationContext.js';
 import { useApplicationNavigationContext } from '@finos/legend-application';
+import {
+  relationalData_addTable,
+  relationalData_setTableName,
+  relationalData_setTableSchemaName,
+} from '../../../../stores/graph-modifier/DSL_Data_GraphModifierHelper.js';
+import { createMockDataForMappingElementSource } from '../../../../stores/editor/utils/MockDataUtils.js';
 
-const RelationalTableIdentifierModal = observer(
+interface TableOption {
+  value: Table;
+  label: string;
+}
+
+const RelationalTableIdentifierEditor = observer(
   (props: { dataState: RelationalCSVDataState; isReadOnly: boolean }) => {
     const { isReadOnly, dataState } = props;
-    const tableIdentifierState = dataState.tableIdentifierState;
-    const editableTable = tableIdentifierState.table;
+    const resolvedDb = dataState.database;
+    const existingDataTable = dataState.tableToEdit;
+
+    // table
+    const [schemaName, setSchemaName] = useState<string | undefined>(
+      existingDataTable?.schema,
+    );
+    const [tableName, setTableName] = useState<string | undefined>(
+      existingDataTable?.table,
+    );
+    // selectors if db provided
+    const tables = resolvedDb
+      ? getAllTablesFromDatabase(resolvedDb)
+      : undefined;
+    const [dbTable, setDbTable] = useState<Table | undefined>(tables?.[0]);
+    const [includeBare, setIncludeBare] = useState(true);
+    const showFullPath = resolvedDb && resolvedDb.schemas.length > 2;
+    const tableOptions =
+      tables?.map((_t) => ({
+        label: showFullPath ? `${_t.schema.name}.${_t.name}` : `${_t.name}`,
+        value: _t,
+      })) ?? [];
+    const onTableChange = (val: TableOption | null): void => {
+      setDbTable(val?.value);
+    };
+    const selectedTable = dbTable
+      ? {
+          label: showFullPath
+            ? `${dbTable.schema.name}.${dbTable.name}`
+            : `${dbTable.name}`,
+          value: dbTable,
+        }
+      : undefined;
     const closeModal = (): void => dataState.closeModal();
-    const changeTableValue: React.ChangeEventHandler<HTMLInputElement> = (
+    const changeSchemaValue: React.ChangeEventHandler<HTMLInputElement> = (
       event,
     ) => {
-      tableIdentifierState.setTableName(event.target.value);
+      setSchemaName(event.target.value);
     };
-    const changeSchemaValue: React.ChangeEventHandler<HTMLInputElement> = (
+    const changeTableValue: React.ChangeEventHandler<HTMLInputElement> = (
       event,
     ) => {
-      tableIdentifierState.setSchemaName(event.target.value);
+      setTableName(event.target.value);
+    };
+    const toggleIncludeBare = (): void => {
+      setIncludeBare(!includeBare);
+    };
+    const useSelector = resolvedDb && !existingDataTable;
+    const isDisabled = useSelector ? !dbTable : !(schemaName && tableName);
+
+    const handleSubmit = (): void => {
+      const newTable = new RelationalCSVDataTable();
+      newTable.values = '';
+      const editTable = existingDataTable ?? newTable;
+      const _schemaName = useSelector ? dbTable?.schema.name : schemaName;
+      const _name = useSelector ? dbTable?.name : tableName;
+      relationalData_setTableSchemaName(editTable, _schemaName ?? '');
+      relationalData_setTableName(editTable, _name ?? '');
+      if (!existingDataTable && dbTable && includeBare) {
+        editTable.values = createMockDataForMappingElementSource(
+          dbTable,
+          dataState.editorStore,
+        );
+      }
+      if (!existingDataTable) {
+        relationalData_addTable(dataState.embeddedData, editTable);
+        dataState.changeSelectedTable(editTable);
+      }
+      closeModal();
     };
     return (
       <Dialog
@@ -70,42 +144,71 @@ const RelationalTableIdentifierModal = observer(
         <form
           onSubmit={(event) => {
             event.preventDefault();
-            tableIdentifierState.handleSubmit();
+            handleSubmit();
             closeModal();
           }}
           className="modal modal--dark search-modal"
         >
           <div className="modal__title">
-            {editableTable
+            {existingDataTable
               ? 'Rename Relational Data Table'
               : 'Add Relational Data Table'}
           </div>
           <div className="relational-data-editor__identifier">
-            <div className="relational-data-editor__identifier__values">
-              <input
-                className="panel__content__form__section__input"
-                disabled={isReadOnly}
-                placeholder="schemaName"
-                value={tableIdentifierState.schemaName}
-                onChange={changeSchemaValue}
-              />
-            </div>
-            <div className="relational-data-editor__identifier__values">
-              <input
-                className="relational-data-editor__identifier__values panel__content__form__section__input"
-                disabled={isReadOnly}
-                placeholder="tableName"
-                value={tableIdentifierState.tableName}
-                onChange={changeTableValue}
-              />
-            </div>
+            {resolvedDb && !existingDataTable ? (
+              <>
+                <div className="panel__content__form__section">
+                  <div className="panel__content__form__section__header__label">
+                    Table
+                  </div>
+                  <div className="explorer__new-element-modal__driver">
+                    <CustomSelectorInput
+                      className="explorer__new-element-modal__driver__dropdown"
+                      options={tableOptions}
+                      onChange={onTableChange}
+                      value={selectedTable}
+                      isClearable={false}
+                      darkMode={true}
+                    />
+                  </div>
+                </div>
+                <PanelFormBooleanField
+                  isReadOnly={isReadOnly}
+                  value={includeBare}
+                  name="Include Columns and First Row"
+                  prompt="Will include table columns and first row using table definition"
+                  update={toggleIncludeBare}
+                />
+              </>
+            ) : (
+              <>
+                <div className="relational-data-editor__identifier__values">
+                  <input
+                    className="panel__content__form__section__input"
+                    disabled={isReadOnly}
+                    placeholder="schemaName"
+                    value={schemaName}
+                    onChange={changeSchemaValue}
+                  />
+                </div>
+                <div className="relational-data-editor__identifier__values">
+                  <input
+                    className="relational-data-editor__identifier__values panel__content__form__section__input"
+                    disabled={isReadOnly}
+                    placeholder="tableName"
+                    value={tableName}
+                    onChange={changeTableValue}
+                  />
+                </div>
+              </>
+            )}
           </div>
           <div className="search-modal__actions">
             <button
               className="btn btn--dark"
-              disabled={tableIdentifierState.isEditingDisabled || isReadOnly}
+              disabled={isDisabled || isReadOnly}
             >
-              {editableTable ? 'Rename' : 'Add'}
+              {existingDataTable ? 'Rename' : 'Add'}
             </button>
           </div>
         </form>
@@ -314,7 +417,7 @@ export const RelationalCSVDataEditor = observer(
                 />
               )}
               {dataState.showTableIdentifierModal && (
-                <RelationalTableIdentifierModal
+                <RelationalTableIdentifierEditor
                   dataState={dataState}
                   isReadOnly={isReadOnly}
                 />