@finos/legend-application-studio 22.2.1 → 22.3.0

package/src/components/editor/edit-panel/element-generation-editor/ElementXTGenerationEditor.tsx

@@ -0,0 +1,194 @@
+/**
+ * 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 { useApplicationStore } from '@finos/legend-application';
+import {
+  ArrowCircleLeftIcon,
+  PanelContent,
+  RefreshIcon,
+  ResizablePanel,
+  ResizablePanelGroup,
+  ResizablePanelSplitter,
+  ResizablePanelSplitterLine,
+} from '@finos/legend-art';
+import type { GenerationProperty } from '@finos/legend-graph';
+import { debounce } from '@finos/legend-shared';
+import { flowResult } from 'mobx';
+import { observer } from 'mobx-react-lite';
+import { useEffect, useMemo } from 'react';
+import type { ElementEditorState } from '../../../../stores/editor-state/element-editor-state/ElementEditorState.js';
+import type { ElementXTSchemaGenerationState } from '../../../../stores/editor-state/element-editor-state/ElementExternalFormatGenerationState.js';
+import { ModelUnitEditor } from '../external-format-editor/DSL_ExternalFormat_BindingElementEditor.js';
+import { GenerationPropertyEditor } from './FileGenerationEditor.js';
+import { FileSystemViewer } from './FileSystemViewer.js';
+
+enum HIDDEN_CONFIGURATION_PROPERTIES {
+  FORMAT = 'format',
+  TARGET_SCHEMA_SET = 'targetSchemaSet',
+}
+
+export const ExternalFormatGeneratioConfigEditor = observer(
+  (props: {
+    isReadOnly: boolean;
+    elementEditorState: ElementEditorState;
+    xtState: ElementXTSchemaGenerationState;
+  }) => {
+    const { isReadOnly, xtState } = props;
+    const xtGenerationState = xtState.xtGenerationState;
+    const editorStore = xtState.editorStore;
+    const applicationStore = editorStore.applicationStore;
+    const configSpecification = xtState.xtGenerationState.configSpecification;
+    const schemaGenerationProperties =
+      xtState.description.schemaGenerationProperties;
+    const debouncedRegenerate = useMemo(
+      () =>
+        debounce(() => flowResult(xtState.xtGenerationState.generate()), 500),
+      [xtState],
+    );
+    const update = (
+      generationProperty: GenerationProperty,
+      newValue: object,
+    ): void => {
+      debouncedRegenerate.cancel();
+      xtGenerationState.updateFileGenerationParameters(
+        configSpecification,
+        generationProperty,
+        newValue,
+      );
+      debouncedRegenerate()?.catch(applicationStore.alertUnhandledError);
+    };
+    const resetDefaultConfiguration = (): void => {
+      debouncedRegenerate.cancel();
+      xtGenerationState.resetGenerator();
+      debouncedRegenerate()?.catch(applicationStore.alertUnhandledError);
+    };
+
+    const getConfigValue = (name: string): unknown | undefined =>
+      xtState.xtGenerationState.configSpecification.configurationProperties.find(
+        (e) => e.name === name,
+      )?.value;
+
+    return (
+      <div className="panel file-generation-editor__configuration">
+        <div className="panel__header">
+          <div className="panel__header__title">
+            <div className="panel__header__title__label">{`${xtState.description.name} configuration`}</div>
+          </div>
+          <div className="panel__header__actions">
+            <button
+              className="panel__header__action file-generation-editor__configuration__reset-btn"
+              tabIndex={-1}
+              disabled={
+                isReadOnly ||
+                !configSpecification.configurationProperties.length
+              }
+              onClick={resetDefaultConfiguration}
+              title="Reset to default configuration"
+            >
+              <RefreshIcon />
+            </button>
+          </div>
+        </div>
+        <PanelContent>
+          <div className="file-generation-editor__configuration__content">
+            <ModelUnitEditor
+              isReadOnly={isReadOnly}
+              modelUnit={configSpecification.modelUnit}
+            />
+            {schemaGenerationProperties
+
+              .filter(
+                (property) =>
+                  !Object.values(HIDDEN_CONFIGURATION_PROPERTIES).includes(
+                    property.name as HIDDEN_CONFIGURATION_PROPERTIES,
+                  ),
+              )
+              .map((abstractGenerationProperty) => (
+                <GenerationPropertyEditor
+                  key={
+                    abstractGenerationProperty.name +
+                    abstractGenerationProperty.type
+                  }
+                  update={update}
+                  isReadOnly={isReadOnly}
+                  getConfigValue={getConfigValue}
+                  property={abstractGenerationProperty}
+                />
+              ))}
+          </div>
+        </PanelContent>
+      </div>
+    );
+  },
+);
+
+export const ElementXTGenerationEditor = observer(
+  (props: {
+    currentElementState: ElementEditorState;
+    elementXTState: ElementXTSchemaGenerationState;
+  }) => {
+    const { elementXTState, currentElementState } = props;
+    const xtGenerationState = elementXTState.xtGenerationState;
+    const applicationStore = useApplicationStore();
+    const leaveElementGenerationView = (): void =>
+      currentElementState.setGenerationModeState(undefined);
+    useEffect(() => {
+      flowResult(elementXTState.regenerate()).catch(
+        applicationStore.alertUnhandledError,
+      );
+    }, [applicationStore, currentElementState, elementXTState]);
+
+    return (
+      <div className="panel element-generation-editor">
+        <div className="panel__header element-generation-editor__header">
+          <div className="panel__header__title">
+            <button
+              className="panel__header__action element-generation-editor__leave-btn"
+              tabIndex={-1}
+              onClick={leaveElementGenerationView}
+              title="Leave element generation view mode"
+            >
+              <ArrowCircleLeftIcon /> exit generation view
+            </button>
+          </div>
+        </div>
+        <div className="panel__content element-generation-editor__content">
+          <div className="file-generation-editor">
+            <ResizablePanelGroup orientation="vertical">
+              <ResizablePanel
+                size={300}
+                minSize={300}
+                className="file-generation-editor__split-pane"
+              >
+                <ExternalFormatGeneratioConfigEditor
+                  isReadOnly={currentElementState.isReadOnly}
+                  elementEditorState={currentElementState}
+                  xtState={elementXTState}
+                />
+              </ResizablePanel>
+              <ResizablePanelSplitter>
+                <ResizablePanelSplitterLine color="var(--color-dark-grey-200)" />
+              </ResizablePanelSplitter>
+              <ResizablePanel>
+                <FileSystemViewer generatedFileState={xtGenerationState} />
+              </ResizablePanel>
+            </ResizablePanelGroup>
+          </div>
+        </div>
+      </div>
+    );
+  },
+);

package/src/components/editor/edit-panel/element-generation-editor/FileGenerationEditor.tsx

@@ -14,15 +14,11 @@
  * limitations under the License.
  */
 
-import { useState, useMemo, useCallback, Fragment } from 'react';
+import { useState, useMemo, useCallback } from 'react';
 import { observer } from 'mobx-react-lite';
 import { flowResult, runInAction } from 'mobx';
 import { getElementIcon } from '../../../shared/ElementIconUtils.js';
 import { useDrop } from 'react-dnd';
-import {
-  getTextContent,
-  getEditorLanguageForFormat,
-} from '../../../../stores/editor-state/FileGenerationViewerState.js';
 import { FileGenerationEditorState } from '../../../../stores/editor-state/element-editor-state/FileGenerationEditorState.js';
 import {
   type DebouncedFunc,
@@ -32,28 +28,17 @@ import {
   type PlainObject,
 } from '@finos/legend-shared';
 import {
-  type TreeNodeContainerProps,
-  type TreeData,
-  type TreeNodeData,
   ResizablePanelGroup,
   ResizablePanel,
   ResizablePanelSplitter,
   ResizablePanelSplitterLine,
   clsx,
-  TreeView,
-  BlankPanelContent,
-  PanelLoadingIndicator,
   CustomSelectorInput,
   PencilIcon,
   RefreshIcon,
   TimesIcon,
   CheckSquareIcon,
   SquareIcon,
-  ChevronDownIcon,
-  ChevronRightIcon,
-  FolderOpenIcon,
-  FolderIcon,
-  FileCodeIcon,
   LockIcon,
   SaveIcon,
   PanelDropZone,
@@ -68,12 +53,6 @@ import {
 } from '../../../../stores/shared/DnDUtils.js';
 import type { FileGenerationState } from '../../../../stores/editor-state/FileGenerationState.js';
 import type { ElementFileGenerationState } from '../../../../stores/editor-state/element-editor-state/ElementFileGenerationState.js';
-import {
-  type GenerationTreeNodeData,
-  GenerationDirectory,
-  GenerationFile,
-  getFileGenerationChildNodes,
-} from '../../../../stores/shared/FileGenerationTreeUtils.js';
 import { LEGEND_STUDIO_TEST_ID } from '../../../LegendStudioTestID.js';
 import { useEditorStore } from '../../EditorStoreProvider.js';
 import {
@@ -86,256 +65,14 @@ import {
   resolvePackagePathAndElementName,
   getNullableFileGenerationConfig,
 } from '@finos/legend-graph';
-import {
-  TextInputEditor,
-  useApplicationStore,
-} from '@finos/legend-application';
-import type { DSL_Generation_LegendStudioApplicationPlugin_Extension } from '../../../../stores/DSL_Generation_LegendStudioApplicationPlugin_Extension.js';
+import { useApplicationStore } from '@finos/legend-application';
 import {
   fileGeneration_addScopeElement,
   fileGeneration_changeScopeElement,
   fileGeneration_deleteScopeElement,
   fileGeneration_setGenerationOutputPath,
 } from '../../../../stores/shared/modifier/DSL_Generation_GraphModifierHelper.js';
-
-export const FileGenerationTreeNodeContainer: React.FC<
-  TreeNodeContainerProps<
-    GenerationTreeNodeData,
-    {
-      selectedNode?: TreeNodeData | undefined;
-    }
-  >
-> = (props) => {
-  const { node, level, stepPaddingInRem, onNodeSelect, innerProps } = props;
-  const { selectedNode } = innerProps;
-  const isSelected = selectedNode === node;
-  const isDirectory = node.fileNode instanceof GenerationDirectory;
-  const expandIcon = !isDirectory ? (
-    <div />
-  ) : node.isOpen ? (
-    <ChevronDownIcon />
-  ) : (
-    <ChevronRightIcon />
-  );
-  const iconPackageColor = 'color--generated';
-  const nodeIcon = isDirectory ? (
-    node.isOpen ? (
-      <div className={iconPackageColor}>
-        <FolderOpenIcon />
-      </div>
-    ) : (
-      <div className={iconPackageColor}>
-        <FolderIcon />
-      </div>
-    )
-  ) : (
-    <div className="icon">
-      <FileCodeIcon />
-    </div>
-  );
-  const selectNode: React.MouseEventHandler = (event) => onNodeSelect?.(node);
-
-  return (
-    <div
-      className={clsx(
-        'tree-view__node__container generation-result-viewer__explorer__package-tree__node__container',
-        {
-          'generation-result-viewer__explorer__package-tree__node__container--selected':
-            isSelected,
-        },
-      )}
-      onClick={selectNode}
-      style={{
-        paddingLeft: `${level * (stepPaddingInRem ?? 1)}rem`,
-        display: 'flex',
-      }}
-    >
-      <div className="tree-view__node__icon generation-result-viewer__explorer__package-tree__node__icon">
-        <div className="generation-result-viewer__explorer__package-tree__node__icon__expand">
-          {expandIcon}
-        </div>
-        <div className="generation-result-viewer__explorer__package-tree__node__icon__type">
-          {nodeIcon}
-        </div>
-      </div>
-      <button
-        className="tree-view__node__label generation-result-viewer__explorer__package-tree__node__label"
-        tabIndex={-1}
-        title={node.fileNode.path}
-      >
-        {node.label}
-      </button>
-    </div>
-  );
-};
-
-export const FileGenerationTree = observer(
-  (props: {
-    selectedNode?: TreeNodeData | undefined;
-    directoryTreeData: TreeData<GenerationTreeNodeData>;
-    onNodeSelect: (node: GenerationTreeNodeData) => void;
-    getFileElementTreeChildNodes: (
-      node: GenerationTreeNodeData,
-    ) => GenerationTreeNodeData[];
-  }) => {
-    const {
-      directoryTreeData,
-      onNodeSelect,
-      getFileElementTreeChildNodes,
-      selectedNode,
-    } = props;
-
-    return (
-      <TreeView
-        components={{
-          TreeNodeContainer: FileGenerationTreeNodeContainer,
-        }}
-        treeData={directoryTreeData}
-        onNodeSelect={onNodeSelect}
-        getChildNodes={getFileElementTreeChildNodes}
-        innerProps={{
-          selectedNode: selectedNode,
-        }}
-      />
-    );
-  },
-);
-
-export const GenerationResultExplorer = observer(
-  (props: { fileGenerationState: FileGenerationState }) => {
-    const { fileGenerationState } = props;
-    const treeData = guaranteeNonNullable(
-      fileGenerationState.directoryTreeData,
-    );
-    const onNodeSelect = (node: GenerationTreeNodeData): void =>
-      fileGenerationState.onTreeNodeSelect(node, treeData);
-    const getMappingElementTreeChildNodes = (
-      node: GenerationTreeNodeData,
-    ): GenerationTreeNodeData[] => getFileGenerationChildNodes(node, treeData);
-
-    if (!treeData.nodes.size) {
-      return <BlankPanelContent>No content</BlankPanelContent>;
-    }
-    return (
-      <div className="generation-result-viewer__explorer__content">
-        <FileGenerationTree
-          selectedNode={fileGenerationState.selectedNode}
-          directoryTreeData={treeData}
-          onNodeSelect={onNodeSelect}
-          getFileElementTreeChildNodes={getMappingElementTreeChildNodes}
-        />
-      </div>
-    );
-  },
-);
-
-export const GenerationResultViewer = observer(
-  (props: { fileGenerationState: FileGenerationState }) => {
-    const { fileGenerationState } = props;
-    const applicationStore = useApplicationStore();
-    const selectedNode = fileGenerationState.selectedNode;
-    const fileNode = selectedNode?.fileNode;
-    const regenerate = applicationStore.guardUnhandledError(() =>
-      flowResult(fileGenerationState.generate()),
-    );
-    const extraFileGenerationResultViewerActions =
-      fileNode instanceof GenerationFile
-        ? fileGenerationState.editorStore.pluginManager
-            .getApplicationPlugins()
-            .flatMap(
-              (plugin) =>
-                (
-                  plugin as DSL_Generation_LegendStudioApplicationPlugin_Extension
-                ).getExtraFileGenerationResultViewerActionConfigurations?.() ??
-                [],
-            )
-            .map((config) => (
-              <Fragment key={config.key}>
-                {config.renderer(fileGenerationState)}
-              </Fragment>
-            ))
-        : null;
-    return (
-      <ResizablePanelGroup orientation="vertical">
-        <ResizablePanel size={250} minSize={250}>
-          <div className="generation-result-viewer__side-bar">
-            <div className="panel generation-result-viewer__explorer">
-              <div className="panel__header">
-                <div className="panel__header__title">
-                  <div className="panel__header__title__label">result</div>
-                </div>
-                <div className="panel__header__actions">
-                  <button
-                    className={clsx(
-                      'panel__header__action  generation-result-viewer__regenerate-btn',
-                      {
-                        ' generation-result-viewer__regenerate-btn--loading':
-                          fileGenerationState.isGenerating,
-                      },
-                    )}
-                    tabIndex={-1}
-                    disabled={fileGenerationState.isGenerating}
-                    onClick={regenerate}
-                    title="Regenerate"
-                  >
-                    <RefreshIcon />
-                  </button>
-                </div>
-              </div>
-              <PanelContent>
-                <PanelLoadingIndicator
-                  isLoading={fileGenerationState.isGenerating}
-                />
-                {Boolean(fileGenerationState.directoryTreeData) && (
-                  <GenerationResultExplorer
-                    fileGenerationState={fileGenerationState}
-                  />
-                )}
-                {Boolean(!fileGenerationState.directoryTreeData) && (
-                  <BlankPanelContent>
-                    Generation result not available
-                  </BlankPanelContent>
-                )}
-              </PanelContent>
-            </div>
-          </div>
-        </ResizablePanel>
-        <ResizablePanelSplitter>
-          <ResizablePanelSplitterLine color="var(--color-dark-grey-200)" />
-        </ResizablePanelSplitter>
-        <ResizablePanel>
-          <div className="panel generation-result-viewer__file">
-            <div className="panel__header">
-              {fileNode && !(fileNode instanceof GenerationDirectory) && (
-                <div className="panel__header__title">
-                  <div className="panel__header__title__label">file</div>
-                  <div className="panel__header__title__content generation-result-viewer__file__header__name">
-                    {fileNode.name}
-                  </div>
-                </div>
-              )}
-              <div className="panel__header__actions">
-                {extraFileGenerationResultViewerActions}
-              </div>
-            </div>
-            <PanelContent>
-              {fileNode instanceof GenerationFile && (
-                <TextInputEditor
-                  inputValue={getTextContent(fileNode.content, fileNode.format)}
-                  isReadOnly={true}
-                  language={getEditorLanguageForFormat(fileNode.format)}
-                />
-              )}
-              {!(fileNode instanceof GenerationFile) && (
-                <BlankPanelContent>No file selected</BlankPanelContent>
-              )}
-            </PanelContent>
-          </div>
-        </ResizablePanel>
-      </ResizablePanelGroup>
-    );
-  },
-);
+import { FileSystemViewer } from './FileSystemViewer.js';
 
 const FileGenerationScopeEditor = observer(
   (props: {
@@ -1299,7 +1036,7 @@ export const FileGenerationConfigurationEditor = observer(
     };
     const resetDefaultConfiguration = (): void => {
       debouncedRegenerate.cancel();
-      fileGenerationState.resetFileGeneration();
+      fileGenerationState.resetGenerator();
       debouncedRegenerate()?.catch(applicationStore.alertUnhandledError);
     };
 
@@ -1474,10 +1211,9 @@ export const FileGenerationEditor = observer(() => {
             <ResizablePanelSplitter>
               <ResizablePanelSplitterLine color="var(--color-dark-grey-200)" />
             </ResizablePanelSplitter>
-
             <ResizablePanel>
-              <GenerationResultViewer
-                fileGenerationState={
+              <FileSystemViewer
+                generatedFileState={
                   fileGenerationEditorState.fileGenerationState
                 }
               />