@finos/legend-application-studio 13.0.0

package/src/components/editor/edit-panel/UnsupportedElementEditor.tsx

@@ -0,0 +1,83 @@
+/**
+ * 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 { BlankPanelContent, LockIcon } from '@finos/legend-art';
+import { UnsupportedElementEditorState } from '../../../stores/editor-state/UnsupportedElementEditorState.js';
+import { flowResult } from 'mobx';
+import { useEditorStore } from '../EditorStoreProvider.js';
+import { useApplicationStore } from '@finos/legend-application';
+
+export const UnsupportedEditorPanel = observer(
+  (props: { text: string; isReadOnly: boolean }) => {
+    const { text, isReadOnly } = props;
+    const editorStore = useEditorStore();
+    const applicationStore = useApplicationStore();
+    const handleTextModeClick = applicationStore.guardUnhandledError(() =>
+      flowResult(editorStore.toggleTextMode()),
+    );
+
+    return (
+      <BlankPanelContent>
+        <div className="unsupported-element-editor__main">
+          <div className="unsupported-element-editor__summary">{text}</div>
+          {!isReadOnly && (
+            <button
+              className="btn--dark unsupported-element-editor__to-text-mode__btn"
+              onClick={handleTextModeClick}
+            >
+              Edit in text mode
+            </button>
+          )}
+        </div>
+      </BlankPanelContent>
+    );
+  },
+);
+
+// NOTE: this editor can be used for any element supported via text mode but no editor has been built
+export const UnsupportedElementEditor = observer(() => {
+  const editorStore = useEditorStore();
+  const unsupportedElementEditorState = editorStore.getCurrentEditorState(
+    UnsupportedElementEditorState,
+  );
+  const element = unsupportedElementEditorState.element;
+  const isReadOnly = unsupportedElementEditorState.isReadOnly;
+
+  return (
+    <div className="unsupported-element-editor">
+      <div className="panel">
+        <div className="panel__header">
+          <div className="panel__header__title">
+            {isReadOnly && (
+              <div className="uml-element-editor__header__lock">
+                <LockIcon />
+              </div>
+            )}
+            <div className="panel__header__title__label">element</div>
+            <div className="panel__header__title__content">{element.name}</div>
+          </div>
+        </div>
+        <div className="panel__content unsupported-element-editor__content">
+          <UnsupportedEditorPanel
+            text={`Can't display this element in form-mode`}
+            isReadOnly={isReadOnly}
+          />
+        </div>
+      </div>
+    </div>
+  );
+});

package/src/components/editor/edit-panel/connection-editor/ConnectionEditor.tsx

@@ -0,0 +1,193 @@
+/**
+ * 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 { FlatDataConnectionEditor } from './FlatDataConnectionEditor.js';
+import { RelationalDatabaseConnectionEditor } from './RelationalDatabaseConnectionEditor.js';
+import {
+  type ConnectionEditorState,
+  RelationalDatabaseConnectionValueState,
+  JsonModelConnectionValueState,
+  FlatDataConnectionValueState,
+  PackageableConnectionEditorState,
+} from '../../../../stores/editor-state/element-editor-state/connection/ConnectionEditorState.js';
+import { UnsupportedEditorPanel } from '../../../editor/edit-panel/UnsupportedElementEditor.js';
+import type { Class } from '@finos/legend-graph';
+import { CustomSelectorInput, LockIcon } from '@finos/legend-art';
+import { useEditorStore } from '../../EditorStoreProvider.js';
+import type { DSLMapping_LegendStudioApplicationPlugin_Extension } from '../../../../stores/DSLMapping_LegendStudioApplicationPlugin_Extension.js';
+import {
+  modelConnection_setClass,
+  modelConnection_setUrl,
+} from '../../../../stores/graphModifier/DSLMapping_GraphModifierHelper.js';
+import { useApplicationNavigationContext } from '@finos/legend-application';
+import { LEGEND_STUDIO_APPLICATION_NAVIGATION_CONTEXT_KEY } from '../../../../stores/LegendStudioApplicationNavigationContext.js';
+
+const ModelConnectionEditor = observer(
+  (props: {
+    connectionValueState: JsonModelConnectionValueState; // should support XMLModelConnection as well
+    isReadOnly: boolean;
+    disableChangingClass?: boolean | undefined;
+  }) => {
+    const { connectionValueState, isReadOnly, disableChangingClass } = props;
+    const connection = connectionValueState.connection;
+    const editorStore = useEditorStore();
+    // classOptions
+    const classOptions = editorStore.classOptions;
+    const sourceClass = connection.class.value;
+    const onSourceClassChange = (val: { label: string; value: Class }): void =>
+      modelConnection_setClass(connection, val.value);
+    // TODO: handle content type (XML/JSON)
+    // url
+    const changeUrl: React.ChangeEventHandler<HTMLTextAreaElement> = (event) =>
+      modelConnection_setUrl(connection, event.target.value);
+
+    return (
+      <div className="panel__content__form">
+        <div className="panel__content__form__section">
+          <div className="panel__content__form__section__header__label">
+            <div className="panel__content__form__section__header__label__text">
+              Source Class
+            </div>
+            {disableChangingClass && (
+              <div className="panel__content__form__section__header__label__lock">
+                <LockIcon />
+              </div>
+            )}
+          </div>
+          <div className="panel__content__form__section__header__prompt">
+            Specifies the class being used for the model store
+          </div>
+          <CustomSelectorInput
+            disabled={isReadOnly || disableChangingClass}
+            className="panel__content__form__section__dropdown"
+            options={classOptions}
+            onChange={onSourceClassChange}
+            value={{ label: sourceClass.name, value: sourceClass }}
+            darkMode={true}
+          />
+        </div>
+        <div className="panel__content__form__section">
+          <div className="panel__content__form__section__header__label">
+            URL
+          </div>
+          <div className="panel__content__form__section__header__prompt">
+            Specifies the connection URL
+          </div>
+          <textarea
+            className="panel__content__form__section__textarea connection-editor__model-connection-url__textarea"
+            spellCheck={false}
+            value={connection.url}
+            onChange={changeUrl}
+            disabled={isReadOnly}
+          />
+        </div>
+      </div>
+    );
+  },
+);
+
+export const ConnectionEditor = observer(
+  (props: {
+    connectionEditorState: ConnectionEditorState;
+    isReadOnly: boolean;
+    disableChangingStore?: boolean;
+  }) => {
+    const { connectionEditorState, isReadOnly, disableChangingStore } = props;
+    const connectionValueState = connectionEditorState.connectionValueState;
+    const editorStore = useEditorStore();
+    const plugins = editorStore.pluginManager.getApplicationPlugins();
+
+    const renderConnectionValueEditor = (): React.ReactNode => {
+      if (connectionValueState instanceof JsonModelConnectionValueState) {
+        return (
+          <ModelConnectionEditor
+            connectionValueState={connectionValueState}
+            isReadOnly={isReadOnly}
+            disableChangingClass={disableChangingStore}
+          />
+        );
+      } else if (connectionValueState instanceof FlatDataConnectionValueState) {
+        return (
+          <FlatDataConnectionEditor
+            connectionValueState={connectionValueState}
+            isReadOnly={isReadOnly}
+          />
+        );
+      } else if (
+        connectionValueState instanceof RelationalDatabaseConnectionValueState
+      ) {
+        return (
+          <RelationalDatabaseConnectionEditor
+            connectionValueState={connectionValueState}
+            isReadOnly={isReadOnly}
+          />
+        );
+      } else {
+        const extraConnectionEditorRenderers = plugins.flatMap(
+          (plugin) =>
+            (
+              plugin as DSLMapping_LegendStudioApplicationPlugin_Extension
+            ).getExtraConnectionEditorRenderers?.() ?? [],
+        );
+        for (const editorRenderer of extraConnectionEditorRenderers) {
+          const editor = editorRenderer(connectionValueState, isReadOnly);
+          if (editor) {
+            return editor;
+          }
+        }
+
+        return (
+          <UnsupportedEditorPanel
+            text="Can't display this connection in form-mode"
+            isReadOnly={isReadOnly}
+          />
+        );
+      }
+    };
+    return (
+      <div className="panel connection-editor">
+        <div className="panel__header">
+          <div className="panel__header__title">
+            <div className="panel__header__title__label">
+              {connectionValueState.label()}
+            </div>
+          </div>
+        </div>
+        <div className="panel__content">{renderConnectionValueEditor()}</div>
+      </div>
+    );
+  },
+);
+
+export const PackageableConnectionEditor = observer(() => {
+  const editorStore = useEditorStore();
+  const editorState = editorStore.getCurrentEditorState(
+    PackageableConnectionEditorState,
+  );
+  const isReadOnly = editorState.isReadOnly;
+
+  useApplicationNavigationContext(
+    LEGEND_STUDIO_APPLICATION_NAVIGATION_CONTEXT_KEY.CONNECTION_EDITOR,
+  );
+
+  return (
+    <ConnectionEditor
+      connectionEditorState={editorState.connectionState}
+      isReadOnly={isReadOnly}
+    />
+  );
+});

package/src/components/editor/edit-panel/connection-editor/DatabaseBuilder.tsx

@@ -0,0 +1,354 @@
+/**
+ * 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,
+  type TreeNodeContainerProps,
+  ResizablePanelGroup,
+  ResizablePanel,
+  ResizablePanelSplitter,
+  PanelLoadingIndicator,
+  SaveIcon,
+  FireIcon,
+  clsx,
+  TreeView,
+  PURE_DatabaseSchemaIcon,
+  PURE_DatabaseTableIcon,
+  CircleIcon,
+  ChevronDownIcon,
+  ChevronRightIcon,
+  CheckCircleIcon,
+  EmptyCircleIcon,
+} from '@finos/legend-art';
+import { useEffect } from 'react';
+import {
+  type DatabaseBuilderState,
+  type DatabaseBuilderTreeData,
+  type DatabaseBuilderTreeNodeData,
+  ColumnDatabaseBuilderTreeNodeData,
+  SchemaDatabaseBuilderTreeNodeData,
+  TableDatabaseBuilderTreeNodeData,
+} from '../../../../stores/editor-state/element-editor-state/connection/DatabaseBuilderState.js';
+import { capitalize } from '@finos/legend-shared';
+import {
+  EDITOR_LANGUAGE,
+  useApplicationStore,
+} from '@finos/legend-application';
+import {
+  generateColumnTypeLabel,
+  renderColumnTypeIcon,
+} from '../../../../stores/editor-state/element-editor-state/mapping/relational/DatabaseEditorHelper.js';
+import { flowResult } from 'mobx';
+import { StudioTextInputEditor } from '../../../shared/StudioTextInputEditor.js';
+
+const getNodeIcon = (node: DatabaseBuilderTreeNodeData): React.ReactNode => {
+  if (node instanceof SchemaDatabaseBuilderTreeNodeData) {
+    return <PURE_DatabaseSchemaIcon />;
+  } else if (node instanceof TableDatabaseBuilderTreeNodeData) {
+    return <PURE_DatabaseTableIcon />;
+  } else if (node instanceof ColumnDatabaseBuilderTreeNodeData) {
+    return renderColumnTypeIcon(node.column.type);
+  }
+  return null;
+};
+
+const DatabaseBuilderTreeNodeContainer: React.FC<
+  TreeNodeContainerProps<
+    DatabaseBuilderTreeNodeData,
+    {
+      toggleCheckedNode: (node: DatabaseBuilderTreeNodeData) => void;
+      isPartiallySelected: (node: DatabaseBuilderTreeNodeData) => boolean;
+    }
+  >
+> = (props) => {
+  const { node, level, stepPaddingInRem, onNodeSelect, innerProps } = props;
+  const { toggleCheckedNode, isPartiallySelected } = innerProps;
+  const isExpandable =
+    Boolean(!node.childrenIds || node.childrenIds.length) &&
+    !(node instanceof ColumnDatabaseBuilderTreeNodeData);
+  const nodeExpandIcon = isExpandable ? (
+    node.isOpen ? (
+      <ChevronDownIcon />
+    ) : (
+      <ChevronRightIcon />
+    )
+  ) : (
+    <div />
+  );
+  const nodeTypeIcon = getNodeIcon(node);
+  const toggleCheck = (): void => toggleCheckedNode(node);
+  const toggleExpandNode = (): void => {
+    onNodeSelect?.(node);
+    if (!isExpandable) {
+      toggleCheck();
+    }
+  };
+
+  const renderCheckedIcon = (
+    _node: DatabaseBuilderTreeNodeData,
+  ): React.ReactNode => {
+    if (_node instanceof ColumnDatabaseBuilderTreeNodeData) {
+      return null;
+    } else if (isPartiallySelected(_node)) {
+      return <CircleIcon />;
+    } else if (_node.isChecked) {
+      return <CheckCircleIcon />;
+    }
+    return <EmptyCircleIcon />;
+  };
+
+  return (
+    <div
+      className={clsx('tree-view__node__container')}
+      style={{
+        paddingLeft: `${level * (stepPaddingInRem ?? 1)}rem`,
+        display: 'flex',
+      }}
+    >
+      <div className="tree-view__node__icon database-builder-tree__node__icon">
+        <div
+          className="database-builder-tree__expand-icon"
+          onClick={toggleExpandNode}
+        >
+          {nodeExpandIcon}
+        </div>
+        <div
+          className={clsx('database-builder-tree__checker-icon')}
+          onClick={toggleCheck}
+        >
+          {renderCheckedIcon(node)}
+        </div>
+        <div
+          className="database-builder-tree__type-icon"
+          onClick={toggleExpandNode}
+        >
+          {nodeTypeIcon}
+        </div>
+      </div>
+      <div
+        className="tree-view__node__label database-builder-tree__node__label"
+        onClick={toggleExpandNode}
+      >
+        {node.label}
+        {node instanceof ColumnDatabaseBuilderTreeNodeData && (
+          <div className="database-builder-tree__node__type">
+            <div className="database-builder-tree__node__type__label">
+              {generateColumnTypeLabel(node.column.type)}
+            </div>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+};
+
+export const DatabaseBuilderExplorer = observer(
+  (props: {
+    treeData: DatabaseBuilderTreeData;
+    isReadOnly: boolean;
+    databaseBuilderState: DatabaseBuilderState;
+  }) => {
+    const { treeData, databaseBuilderState } = props;
+    const applicationStore = useApplicationStore();
+    const onNodeSelect = (node: DatabaseBuilderTreeNodeData): void => {
+      flowResult(databaseBuilderState.onNodeSelect(node, treeData)).catch(
+        applicationStore.alertUnhandledError,
+      );
+    };
+
+    const isPartiallySelected = (
+      node: DatabaseBuilderTreeNodeData,
+    ): boolean => {
+      if (
+        node instanceof SchemaDatabaseBuilderTreeNodeData &&
+        !node.isChecked
+      ) {
+        return Boolean(
+          databaseBuilderState
+            .getChildNodes(node, treeData)
+            ?.find((s) => s.isChecked === true),
+        );
+      }
+      return false;
+    };
+
+    const getChildNodes = (
+      node: DatabaseBuilderTreeNodeData,
+    ): DatabaseBuilderTreeNodeData[] =>
+      databaseBuilderState
+        .getChildNodes(node, treeData)
+        ?.sort((a, b) => a.label.localeCompare(b.label)) ?? [];
+
+    const toggleCheckedNode = (node: DatabaseBuilderTreeNodeData): void => {
+      databaseBuilderState.toggleCheckedNode(node, treeData);
+    };
+    return (
+      <TreeView
+        components={{
+          TreeNodeContainer: DatabaseBuilderTreeNodeContainer,
+        }}
+        innerProps={{
+          toggleCheckedNode,
+          isPartiallySelected,
+        }}
+        treeData={treeData}
+        onNodeSelect={onNodeSelect}
+        getChildNodes={getChildNodes}
+      />
+    );
+  },
+);
+
+export const DatabaseBuilder = observer(
+  (props: {
+    databaseBuilderState: DatabaseBuilderState;
+    isReadOnly: boolean;
+  }) => {
+    const { databaseBuilderState, isReadOnly } = props;
+    const applicationStore = useApplicationStore();
+    const buildDb = applicationStore.guardUnhandledError(() =>
+      flowResult(databaseBuilderState.buildDatabaseWithTreeData()),
+    );
+    const saveOrUpdateDatabase = applicationStore.guardUnhandledError(() =>
+      flowResult(databaseBuilderState.createOrUpdateDatabase()),
+    );
+    const closeModal = (): void => {
+      databaseBuilderState.setShowModal(false);
+    };
+    const isExecutingAction =
+      databaseBuilderState.isBuildingDatabase ||
+      databaseBuilderState.isSavingDatabase;
+
+    useEffect(() => {
+      flowResult(databaseBuilderState.fetchSchemaDefinitions()).catch(
+        applicationStore.alertUnhandledError,
+      );
+    }, [databaseBuilderState, applicationStore]);
+
+    const changeValue: React.ChangeEventHandler<HTMLInputElement> = (event) => {
+      if (!databaseBuilderState.currentDatabase) {
+        const stringValue = event.target.value;
+        const updatedValue = stringValue ? stringValue : undefined;
+        databaseBuilderState.setTargetDatabasePath(updatedValue ?? '');
+      }
+    };
+
+    return (
+      <Dialog
+        open={databaseBuilderState.showModal}
+        onClose={closeModal}
+        classes={{ container: 'search-modal__container' }}
+        PaperProps={{ classes: { root: 'search-modal__inner-container' } }}
+      >
+        <div className="modal modal--dark database-builder">
+          <div className="database-builder__heading">
+            <div className="database-builder__heading__label">
+              Build Database
+            </div>
+          </div>
+          <div className="database-builder__content">
+            <PanelLoadingIndicator isLoading={isExecutingAction} />
+            <ResizablePanelGroup orientation="vertical">
+              <ResizablePanel size={450}>
+                <div className="database-builder__config">
+                  <div className="panel__header">
+                    <div className="panel__header__title">
+                      <div className="panel__header__title__label">
+                        database explorer
+                      </div>
+                    </div>
+                  </div>
+                  <div className="panel__content database-builder__config__content">
+                    <div className="panel__content__form__section">
+                      <div className="panel__content__form__section__header__label">
+                        {capitalize('target database path')}
+                      </div>
+                      <div className="panel__content__form__section__header__prompt">
+                        {'path of target database'}
+                      </div>
+                      <input
+                        className="panel__content__form__section__input"
+                        spellCheck={false}
+                        disabled={
+                          isReadOnly ||
+                          Boolean(databaseBuilderState.currentDatabase)
+                        }
+                        value={
+                          databaseBuilderState.currentDatabase?.path ??
+                          databaseBuilderState.targetDatabasePath
+                        }
+                        onChange={changeValue}
+                      />
+                    </div>
+                    {databaseBuilderState.treeData && (
+                      <DatabaseBuilderExplorer
+                        treeData={databaseBuilderState.treeData}
+                        isReadOnly={false}
+                        databaseBuilderState={databaseBuilderState}
+                      />
+                    )}
+                  </div>
+                </div>
+              </ResizablePanel>
+              <ResizablePanelSplitter />
+              <ResizablePanel>
+                <div className="panel database-builder__generated">
+                  <div className="panel__header">
+                    <div className="panel__header__title">
+                      <div className="panel__header__title__label">builder</div>
+                    </div>
+                    <div className="panel__header__actions">
+                      <button
+                        className="panel__header__action"
+                        disabled={isReadOnly || isExecutingAction}
+                        tabIndex={-1}
+                        onClick={buildDb}
+                        title={'Build Database...'}
+                      >
+                        <FireIcon />
+                      </button>
+                      <button
+                        className="panel__header__action"
+                        disabled={isReadOnly || isExecutingAction}
+                        tabIndex={-1}
+                        onClick={saveOrUpdateDatabase}
+                        title={
+                          databaseBuilderState.currentDatabase
+                            ? 'Update database...'
+                            : 'Import database...'
+                        }
+                      >
+                        <SaveIcon />
+                      </button>
+                    </div>
+                  </div>
+                  <div className="panel__content">
+                    <StudioTextInputEditor
+                      language={EDITOR_LANGUAGE.PURE}
+                      inputValue={databaseBuilderState.databaseGrammarCode}
+                      isReadOnly={true}
+                    />
+                  </div>
+                </div>
+              </ResizablePanel>
+            </ResizablePanelGroup>
+          </div>
+        </div>
+      </Dialog>
+    );
+  },
+);

package/src/components/editor/edit-panel/connection-editor/FlatDataConnectionEditor.tsx

@@ -0,0 +1,51 @@
+/**
+ * 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 { FlatDataConnectionValueState } from '../../../../stores/editor-state/element-editor-state/connection/ConnectionEditorState.js';
+import { flatDataConnection_setUrl } from '../../../../stores/graphModifier/StoreFlatData_GraphModifierHelper.js';
+
+export const FlatDataConnectionEditor = observer(
+  (props: {
+    connectionValueState: FlatDataConnectionValueState;
+    isReadOnly: boolean;
+  }) => {
+    const { connectionValueState, isReadOnly } = props;
+    const connection = connectionValueState.connection;
+    // url
+    const changeUrl: React.ChangeEventHandler<HTMLTextAreaElement> = (event) =>
+      flatDataConnection_setUrl(connection, event.target.value);
+    return (
+      <div className="panel__content__form">
+        <div className="panel__content__form__section">
+          <div className="panel__content__form__section__header__label">
+            URL
+          </div>
+          <div className="panel__content__form__section__header__prompt">
+            Specifies the connection URL
+          </div>
+          <textarea
+            className="panel__content__form__section__textarea connection-editor__model-connection-url__textarea"
+            spellCheck={false}
+            value={connection.url}
+            onChange={changeUrl}
+            disabled={isReadOnly}
+          />
+        </div>
+      </div>
+    );
+  },
+);