@finos/legend-application-studio 13.0.0

package/src/components/editor/edit-panel/diff-editor/EntityDiffView.tsx

@@ -0,0 +1,177 @@
+/**
+ * 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 { useEffect } from 'react';
+import { observer } from 'mobx-react-lite';
+import {
+  type EntityDiffViewState,
+  DIFF_VIEW_MODE,
+} from '../../../../stores/editor-state/entity-diff-editor-state/EntityDiffViewState.js';
+import { TextDiffView, JsonDiffView } from '../../../shared/DiffView.js';
+import { clsx, GoToFileIcon, CompareIcon } from '@finos/legend-art';
+import { getPrettyLabelForRevision } from '../../../../stores/editor-state/entity-diff-editor-state/EntityDiffEditorState.js';
+import { flowResult } from 'mobx';
+import { type EntityDiff, EntityChangeType } from '@finos/legend-server-sdlc';
+import { useEditorStore } from '../../EditorStoreProvider.js';
+import {
+  useApplicationStore,
+  EDITOR_LANGUAGE,
+} from '@finos/legend-application';
+import { sortObjectKeys } from '@finos/legend-shared';
+
+const getDiffItemTitle = (diff: EntityDiff): string | undefined => {
+  switch (diff.entityChangeType) {
+    case EntityChangeType.RENAME:
+      return `${diff.newPath ? `${diff.newPath} \u2022 ` : ''}Renamed`;
+    case EntityChangeType.DELETE:
+      return `${diff.oldPath ? `${diff.oldPath} \u2022 ` : ''}Deleted`;
+    case EntityChangeType.CREATE:
+      return `${diff.newPath ? `${diff.newPath} \u2022 ` : ''}Created`;
+    case EntityChangeType.MODIFY:
+      return `${diff.newPath ? `${diff.newPath} \u2022 ` : ''}Modified`;
+    default:
+      return undefined; // no title
+  }
+};
+
+export const EntityDiffSideBarItem = observer(
+  (props: { diff: EntityDiff; isSelected: boolean; openDiff: () => void }) => {
+    const { diff, isSelected, openDiff } = props;
+    return (
+      <button
+        className={clsx('side-bar__panel__item', {
+          'side-bar__panel__item--selected': isSelected,
+        })}
+        tabIndex={-1}
+        title={getDiffItemTitle(diff)}
+        onClick={openDiff}
+      >
+        <div className="diff-panel__item__info">
+          <span
+            className={clsx(
+              'diff-panel__item__info-name',
+              `diff-panel__item__info-name--${diff.entityChangeType.toLowerCase()}`,
+            )}
+          >
+            {diff.entityName}
+          </span>
+          <span className="diff-panel__item__info-path">{diff.entityPath}</span>
+        </div>
+        <div
+          className={clsx(
+            'diff-panel__item__type',
+            `diff-panel__item__type--${diff.entityChangeType.toLowerCase()}`,
+          )}
+        >
+          {diff.getChangeTypeIcon()}
+        </div>
+      </button>
+    );
+  },
+);
+
+export const EntityDiffView = observer(
+  (props: { entityDiffViewState: EntityDiffViewState }) => {
+    const editorStore = useEditorStore();
+    const applicationStore = useApplicationStore();
+    const diffEditorState = props.entityDiffViewState;
+    const {
+      fromEntity,
+      fromGrammarText,
+      toEntity,
+      toGrammarText,
+      fromRevision,
+      toRevision,
+    } = diffEditorState;
+    const goToElement = (): void => {
+      if (diffEditorState.element) {
+        editorStore.openElement(diffEditorState.element);
+      }
+    };
+
+    useEffect(() => {
+      diffEditorState.refresh();
+    }, [diffEditorState]);
+    useEffect(() => {
+      flowResult(diffEditorState.getFromGrammar()).catch(
+        applicationStore.alertUnhandledError,
+      );
+    }, [applicationStore, diffEditorState, diffEditorState.fromEntity]);
+    useEffect(() => {
+      flowResult(diffEditorState.getToGrammar()).catch(
+        applicationStore.alertUnhandledError,
+      );
+    }, [applicationStore, diffEditorState, diffEditorState.toEntity]);
+
+    return (
+      <div className="entity-diff-view">
+        <div className="entity-diff-view__header">
+          <div className="entity-diff-view__header__info">
+            <div className="entity-diff-view__header__info__revision-summary">
+              <div className="entity-diff-view__header__info__revision-summary__revision">
+                {getPrettyLabelForRevision(fromRevision)}
+              </div>
+              <div className="entity-diff-view__header__info__revision-summary__icon">
+                <CompareIcon />
+              </div>
+              <div className="entity-diff-view__header__info__revision-summary__revision">
+                {getPrettyLabelForRevision(toRevision)}
+              </div>
+            </div>
+            <div className="entity-diff-view__header__info__revision-summary__icon">
+              <CompareIcon />
+            </div>
+            <div className="entity-diff-view__header__info__revision-summary__revision">
+              {getPrettyLabelForRevision(toRevision)}
+            </div>
+          </div>
+          <div className="entity-diff-view__header__actions">
+            <button
+              className="entity-diff-view__header__action"
+              disabled={!diffEditorState.element}
+              tabIndex={-1}
+              onClick={goToElement}
+              title={'Go to element'}
+            >
+              <GoToFileIcon />
+            </button>
+          </div>
+        </div>
+        <div className="entity-diff-view__content">
+          {diffEditorState.diffMode === DIFF_VIEW_MODE.GRAMMAR && (
+            <TextDiffView
+              language={EDITOR_LANGUAGE.PURE}
+              from={fromGrammarText}
+              to={toGrammarText}
+            />
+          )}
+          {diffEditorState.diffMode === DIFF_VIEW_MODE.JSON && (
+            <JsonDiffView
+              from={
+                fromEntity?.content
+                  ? sortObjectKeys(fromEntity.content)
+                  : undefined
+              }
+              to={
+                toEntity?.content ? sortObjectKeys(toEntity.content) : undefined
+              }
+            />
+          )}
+        </div>
+      </div>
+    );
+  },
+);

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

@@ -0,0 +1,203 @@
+/**
+ * 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 { useRef, useState, useEffect } from 'react';
+import { observer } from 'mobx-react-lite';
+import {
+  ELEMENT_PATH_DELIMITER,
+  resolvePackagePathAndElementName,
+  Package,
+} from '@finos/legend-graph';
+import type { ElementFileGenerationState } from '../../../../stores/editor-state/element-editor-state/ElementFileGenerationState.js';
+import type { ElementEditorState } from '../../../../stores/editor-state/element-editor-state/ElementEditorState.js';
+import { guaranteeType } from '@finos/legend-shared';
+import {
+  GenerationResultViewer,
+  FileGenerationConfigurationEditor,
+} from '../../../editor/edit-panel/element-generation-editor/FileGenerationEditor.js';
+import { flowResult } from 'mobx';
+import {
+  Dialog,
+  ResizablePanel,
+  ResizablePanelGroup,
+  ResizablePanelSplitter,
+  ResizablePanelSplitterLine,
+  ArrowCircleLeftIcon,
+} from '@finos/legend-art';
+import { useEditorStore } from '../../EditorStoreProvider.js';
+import { useApplicationStore } from '@finos/legend-application';
+
+const NewFileGenerationModal = observer(
+  (props: {
+    currentElementState: ElementEditorState;
+    elementGenerationState: ElementFileGenerationState;
+  }) => {
+    const { elementGenerationState, currentElementState } = props;
+    const applicationStore = useApplicationStore();
+    const isReadOnly = currentElementState.isReadOnly;
+    const element = currentElementState.element;
+    const mappingPackage = guaranteeType(element.package, Package);
+    const nameRef = useRef<HTMLInputElement>(null);
+    const editorStore = useEditorStore();
+    const defaultFileGenerationName = `${element.path}_${elementGenerationState.fileGenerationType}`;
+    const [servicePath, setServicePath] = useState<string>(
+      defaultFileGenerationName,
+    );
+    const [packagePath, serviceName] = resolvePackagePathAndElementName(
+      servicePath,
+      mappingPackage.path,
+    );
+    const close = (): void =>
+      elementGenerationState.setShowNewFileGenerationModal(false);
+    const handleEnter = (): void => nameRef.current?.focus();
+    const elementAlreadyExists =
+      editorStore.graphManagerState.graph.allOwnElements
+        .map((el) => el.path)
+        .includes(packagePath + ELEMENT_PATH_DELIMITER + serviceName);
+    const promoteToFileGeneration = async (): Promise<void> => {
+      if (servicePath && !isReadOnly && !elementAlreadyExists) {
+        await flowResult(
+          elementGenerationState.promoteToFileGeneration(
+            packagePath,
+            serviceName,
+          ),
+        );
+        close();
+      }
+    };
+    const onSubmit = (event: React.FormEvent<HTMLFormElement>): void => {
+      event.preventDefault();
+      promoteToFileGeneration().catch(applicationStore.alertUnhandledError);
+    };
+    const changeValue: React.ChangeEventHandler<HTMLInputElement> = (event) =>
+      setServicePath(event.target.value);
+
+    return (
+      <Dialog
+        open={elementGenerationState.showNewFileGenerationModal}
+        onClose={close}
+        TransitionProps={{
+          onEnter: handleEnter,
+        }}
+        PaperProps={{
+          classes: {
+            root: 'search-modal__inner-container',
+          },
+        }}
+      >
+        <form onSubmit={onSubmit} className="modal search-modal modal--dark">
+          <div className="modal__title">
+            Promote file generation specification
+          </div>
+          <div className="input-group">
+            <input
+              ref={nameRef}
+              className="modal--simple__input input--dark input-group__input"
+              disabled={isReadOnly}
+              value={servicePath}
+              spellCheck={false}
+              onChange={changeValue}
+              placeholder={`Enter a name, use ${ELEMENT_PATH_DELIMITER} to create new package(s) for the service`}
+            />
+            {elementAlreadyExists && (
+              <div className="input-group__error-message">
+                Element with same path already exists
+              </div>
+            )}
+          </div>
+          <div className="search-modal__actions">
+            <button
+              className="modal--simple__btn btn btn--dark btn--primary"
+              disabled={isReadOnly || elementAlreadyExists}
+              color="primary"
+            >
+              Create
+            </button>
+          </div>
+        </form>
+      </Dialog>
+    );
+  },
+);
+
+export const ElementGenerationEditor = observer(
+  (props: {
+    currentElementState: ElementEditorState;
+    elementGenerationState: ElementFileGenerationState;
+  }) => {
+    const { elementGenerationState, currentElementState } = props;
+    const applicationStore = useApplicationStore();
+    const isReadOnly = currentElementState.isReadOnly;
+    const leaveElementGenerationView = (): void =>
+      currentElementState.setGenerationViewMode(undefined);
+
+    useEffect(() => {
+      flowResult(elementGenerationState.regenerate()).catch(
+        applicationStore.alertUnhandledError,
+      );
+    }, [applicationStore, currentElementState, elementGenerationState]);
+
+    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"
+              >
+                <FileGenerationConfigurationEditor
+                  fileGenerationState={
+                    elementGenerationState.fileGenerationState
+                  }
+                  isReadOnly={isReadOnly}
+                  elementGenerationState={elementGenerationState}
+                />
+              </ResizablePanel>
+              <ResizablePanelSplitter>
+                <ResizablePanelSplitterLine color="var(--color-dark-grey-200)" />
+              </ResizablePanelSplitter>
+              <ResizablePanel>
+                <GenerationResultViewer
+                  fileGenerationState={
+                    elementGenerationState.fileGenerationState
+                  }
+                />
+              </ResizablePanel>
+            </ResizablePanelGroup>
+            <NewFileGenerationModal
+              elementGenerationState={elementGenerationState}
+              currentElementState={currentElementState}
+            />
+          </div>
+        </div>
+      </div>
+    );
+  },
+);

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

@@ -0,0 +1,61 @@
+/**
+ * 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 { useEffect } from 'react';
+import { observer } from 'mobx-react-lite';
+import type { ElementEditorState } from '../../../../stores/editor-state/element-editor-state/ElementEditorState.js';
+import { ELEMENT_NATIVE_VIEW_MODE } from '../../../../stores/EditorConfig.js';
+import { flowResult } from 'mobx';
+import {
+  useApplicationStore,
+  EDITOR_LANGUAGE,
+} from '@finos/legend-application';
+import { StudioTextInputEditor } from '../../../shared/StudioTextInputEditor.js';
+
+export const ElementNativeView = observer(
+  (props: { currentElementState: ElementEditorState }) => {
+    const { currentElementState } = props;
+    const applicationStore = useApplicationStore();
+    const generatedText = currentElementState.textContent;
+    const editorLanguage =
+      currentElementState.editMode === ELEMENT_NATIVE_VIEW_MODE.GRAMMAR
+        ? EDITOR_LANGUAGE.PURE
+        : EDITOR_LANGUAGE.JSON;
+
+    useEffect(() => {
+      switch (currentElementState.editMode) {
+        case ELEMENT_NATIVE_VIEW_MODE.JSON:
+          currentElementState.generateElementProtocol();
+          break;
+        case ELEMENT_NATIVE_VIEW_MODE.GRAMMAR:
+          flowResult(currentElementState.generateElementGrammar()).catch(
+            applicationStore.alertUnhandledError,
+          );
+          break;
+        default:
+          break;
+      }
+    }, [applicationStore, currentElementState, currentElementState.editMode]);
+
+    return (
+      <StudioTextInputEditor
+        inputValue={generatedText}
+        language={editorLanguage}
+        isReadOnly={true}
+      />
+    );
+  },
+);