Show JSON content for unknown entity in JSON view (#2959)

finos · Feb 20, 2024 · 75d25e4 · 75d25e4
1 parent 2a690c7
commit 75d25e4
Show file tree

Hide file tree

Showing 6 changed files with 81 additions and 14 deletions.
diff --git a/.changeset/sharp-shrimps-draw.md b/.changeset/sharp-shrimps-draw.md
@@ -0,0 +1,5 @@
+---
+'@finos/legend-graph': patch
+---
+
+Export INTERNAL__UnknownPackageableElement
diff --git a/.changeset/yellow-panthers-battle.md b/.changeset/yellow-panthers-battle.md
@@ -0,0 +1,5 @@
+---
+'@finos/legend-application-studio': patch
+---
+
+Show JSON content for unknown entity in JSON view
diff --git a/...legend-application-studio/src/components/editor/editor-group/UnsupportedElementEditor.tsx b/...legend-application-studio/src/components/editor/editor-group/UnsupportedElementEditor.tsx
@@ -27,27 +27,55 @@ import { UnsupportedElementEditorState } from '../../../stores/editor/editor-sta
 import { flowResult } from 'mobx';
 import { useEditorStore } from '../EditorStoreProvider.js';
 import { useApplicationStore } from '@finos/legend-application';
+import { ELEMENT_NATIVE_VIEW_MODE } from '../../../stores/editor/EditorConfig.js';
+import { INTERNAL__UnknownPackageableElement } from '@finos/legend-graph';
+import { isType } from '@finos/legend-shared';
 
 export const UnsupportedEditorPanel = observer(
-  (props: { text: string; isReadOnly: boolean }) => {
-    const { text, isReadOnly } = props;
+  (props: {
+    text: string;
+    isReadOnly: boolean;
+    unsupportedElementEditorState?: UnsupportedElementEditorState;
+  }) => {
+    const { text, isReadOnly, unsupportedElementEditorState } = props;
     const editorStore = useEditorStore();
     const applicationStore = useApplicationStore();
+
+    const isUnknownEntity = unsupportedElementEditorState
+      ? isType(
+          unsupportedElementEditorState.element,
+          INTERNAL__UnknownPackageableElement,
+        )
+      : false;
+
     const handleTextModeClick = applicationStore.guardUnhandledError(() =>
       flowResult(editorStore.toggleTextMode()),
     );
 
+    const handleJsonModeClick = (): void => {
+      unsupportedElementEditorState?.setEditMode(ELEMENT_NATIVE_VIEW_MODE.JSON);
+    };
+
     return (
       <BlankPanelContent>
         <div className="unsupported-element-editor__main">
           <div className="unsupported-element-editor__summary">{text}</div>
-          {!isReadOnly && (
-            <Button
-              className="unsupported-element-editor__to-text-mode__btn"
-              onClick={handleTextModeClick}
-              text="Edit in text mode"
-            />
-          )}
+          <div className="unsupported-element-editor__actions">
+            {!isReadOnly && (
+              <Button
+                className="unsupported-element-editor__to-text-mode__btn"
+                onClick={handleTextModeClick}
+                text="Edit in text mode"
+              />
+            )}
+            {isUnknownEntity && (
+              <Button
+                className="unsupported-element-editor__to-text-mode__btn unsupported-element-editor__btn--dark"
+                onClick={handleJsonModeClick}
+                text="View content"
+              />
+            )}
+          </div>
         </div>
       </BlankPanelContent>
     );
@@ -82,6 +110,7 @@ export const UnsupportedElementEditor = observer(() => {
           <UnsupportedEditorPanel
             text="Can't display this element in form-mode"
             isReadOnly={isReadOnly}
+            unsupportedElementEditorState={unsupportedElementEditorState}
           />
         </PanelContent>
       </Panel>

diff --git a/...lication-studio/src/stores/editor/editor-state/element-editor-state/ElementEditorState.ts b/...lication-studio/src/stores/editor/editor-state/element-editor-state/ElementEditorState.ts
@@ -23,12 +23,15 @@ import {
   LogEvent,
   assertErrorThrown,
   guaranteeNonNullable,
+  guaranteeType,
+  isType,
 } from '@finos/legend-shared';
 import {
   type CompilationError,
   type PackageableElement,
   GRAPH_MANAGER_EVENT,
   isElementReadOnly,
+  INTERNAL__UnknownPackageableElement,
 } from '@finos/legend-graph';
 import { DEFAULT_TAB_SIZE } from '@finos/legend-application';
 import type { ElementFileGenerationState } from './ElementFileGenerationState.js';
@@ -198,12 +201,26 @@ export abstract class ElementEditorState extends EditorState {
       );
     } catch (error) {
       assertErrorThrown(error);
-      this.setTextContent(
-        generateMultiLineCommentForError(
-          `Can't generate protocol JSON for element`,
-          error,
-        ),
+      const isUnknownEntity = isType(
+        this.element,
+        INTERNAL__UnknownPackageableElement,
       );
+      if (isUnknownEntity) {
+        const unknownEntity = guaranteeType(
+          this.element,
+          INTERNAL__UnknownPackageableElement,
+        );
+        this.setTextContent(
+          JSON.stringify(unknownEntity.content, undefined, DEFAULT_TAB_SIZE),
+        );
+      } else {
+        this.setTextContent(
+          generateMultiLineCommentForError(
+            `Can't generate protocol JSON for element`,
+            error,
+          ),
+        );
+      }
       this.editorStore.applicationStore.logService.error(
         LogEvent.create(GRAPH_MANAGER_EVENT.PARSING_FAILURE),
         error,

diff --git a/packages/legend-application-studio/style/components/editor/_unsupported-element-editor.scss b/packages/legend-application-studio/style/components/editor/_unsupported-element-editor.scss
@@ -78,4 +78,14 @@
     height: 2.8rem;
     width: 15rem;
   }
+
+  &__btn--dark {
+    background: var(--color-dark-grey-200);
+  }
+
+  &__actions {
+    @include flexCenter;
+
+    flex-direction: row;
+  }
 }
diff --git a/packages/legend-graph/src/index.ts b/packages/legend-graph/src/index.ts
@@ -77,6 +77,7 @@ export { FunctionActivator } from './graph/metamodel/pure/packageableElements/fu
 export { INTERNAL__UnknownFunctionActivator } from './graph/metamodel/pure/packageableElements/function/INTERNAL__UnknownFunctionActivator.js';
 export { SnowflakeApp } from './graph/metamodel/pure/packageableElements/function/SnowflakeApp.js';
 export { SnowflakeAppDeploymentConfiguration } from './graph/metamodel/pure/functionActivator/SnowflakeAppDeploymentConfiguration.js';
+export { INTERNAL__UnknownPackageableElement } from './graph/metamodel/pure/packageableElements/INTERNAL__UnknownPackageableElement.js';
 export {
   Ownership,
   DeploymentOwner,