minor: add support for StructuredDataSet Input/Output type

packages/zapp/console/package.json

@@ -48,6 +48,7 @@
         "react-chartjs-2": "^4.0.0",
         "react-flow-renderer": "10.1.1",
         "react-ga4": "^1.4.1",
+        "react-json-view": "^1.21.3",
         "react-transition-group": "^2.3.1",
         "serve-static": "^1.12.3",
         "tslib": "^1.9.0"

packages/zapp/console/src/components/Literals/DeprecatedLiteralMapViewer.tsx

@@ -0,0 +1,50 @@
+import classnames from 'classnames';
+import { sortedObjectEntries } from 'common/utils';
+import { useCommonStyles } from 'components/common/styles';
+import { Literal, LiteralMap } from 'models/Common/types';
+import * as React from 'react';
+import { htmlEntities } from './constants';
+import { LiteralValue } from './LiteralValue';
+import { NoneTypeValue } from './Scalar/NoneTypeValue';
+
+export const NoDataIsAvailable = () => {
+  return (
+    <p>
+      <em>No data is available.</em>
+    </p>
+  );
+};
+
+/** Renders a LiteralMap as a formatted object */
+export const DeprecatedLiteralMapViewer: React.FC<{
+  className?: string;
+  map: LiteralMap | null;
+  showBrackets?: boolean;
+}> = ({ className, map, showBrackets = false }) => {
+  if (!map) {
+    return <NoDataIsAvailable />;
+  }
+
+  const commonStyles = useCommonStyles();
+  const { literals } = map;
+  const mapContent = Object.keys(literals).length ? (
+    <ul className={classnames(className, commonStyles.textMonospace, commonStyles.listUnstyled)}>
+      {sortedObjectEntries(literals).map(([key, value]) => (
+        <li key={key}>
+          <LiteralValue label={key} literal={value as Literal} />
+        </li>
+      ))}
+    </ul>
+  ) : (
+    <div className={commonStyles.flexCenter}>
+      <NoneTypeValue />
+    </div>
+  );
+  return (
+    <>
+      {showBrackets && <span>{htmlEntities.leftCurlyBrace}</span>}
+      {mapContent}
+      {showBrackets && <span>{htmlEntities.rightCurlyBrace}</span>}
+    </>
+  );
+};

packages/zapp/console/src/components/Literals/LiteralMapViewer.tsx

@@ -1,10 +1,7 @@
-import classnames from 'classnames';
-import { sortedObjectEntries } from 'common/utils';
-import { useCommonStyles } from 'components/common/styles';
-import { Literal, LiteralMap } from 'models/Common/types';
+import { ReactJsonViewWrapper } from 'components/common/ReactJsonView';
+import { LiteralMap } from 'models/Common/types';
 import * as React from 'react';
-import { htmlEntities } from './constants';
-import { LiteralValue } from './LiteralValue';
+import { transformLiterals } from './helpers';
 import { NoneTypeValue } from './Scalar/NoneTypeValue';
 
 export const NoDataIsAvailable = () => {
@@ -20,31 +17,18 @@ export const LiteralMapViewer: React.FC<{
   className?: string;
   map: LiteralMap | null;
   showBrackets?: boolean;
-}> = ({ className, map, showBrackets = false }) => {
+}> = ({ map }) => {
   if (!map) {
     return <NoDataIsAvailable />;
   }
 
-  const commonStyles = useCommonStyles();
   const { literals } = map;
-  const mapContent = Object.keys(literals).length ? (
-    <ul className={classnames(className, commonStyles.textMonospace, commonStyles.listUnstyled)}>
-      {sortedObjectEntries(literals).map(([key, value]) => (
-        <li key={key}>
-          <LiteralValue label={key} literal={value as Literal} />
-        </li>
-      ))}
-    </ul>
-  ) : (
-    <div className={commonStyles.flexCenter}>
-      <NoneTypeValue />
-    </div>
-  );
-  return (
-    <>
-      {showBrackets && <span>{htmlEntities.leftCurlyBrace}</span>}
-      {mapContent}
-      {showBrackets && <span>{htmlEntities.rightCurlyBrace}</span>}
-    </>
-  );
+
+  if (!Object.keys(literals).length) {
+    return <NoneTypeValue />;
+  }
+
+  const transformedLiterals = transformLiterals(literals);
+
+  return <ReactJsonViewWrapper src={transformedLiterals} />;
 };

packages/zapp/console/src/components/Literals/LiteralValue.tsx

@@ -1,7 +1,7 @@
 import { Literal, LiteralCollection, LiteralMap, Scalar } from 'models/Common/types';
 import * as React from 'react';
 import { LiteralCollectionViewer } from './LiteralCollectionViewer';
-import { LiteralMapViewer } from './LiteralMapViewer';
+import { DeprecatedLiteralMapViewer } from './DeprecatedLiteralMapViewer';
 import { ScalarValue } from './Scalar/ScalarValue';
 import { useLiteralStyles } from './styles';
 import { UnsupportedType } from './UnsupportedType';
@@ -27,7 +27,7 @@ export const LiteralValue: React.FC<{
       return (
         <>
           <ValueLabel label={label} />
-          <LiteralMapViewer
+          <DeprecatedLiteralMapViewer
             className={literalStyles.nestedContainer}
             map={literal.map as LiteralMap}
             showBrackets={true}

packages/zapp/console/src/components/Literals/__stories__/Collection.stories.tsx

@@ -1,8 +1,9 @@
 import { storiesOf } from '@storybook/react';
 import { LiteralCollection } from 'models/Common/types';
 import * as React from 'react';
-import { LiteralValue } from '../LiteralValue';
-import { CardDecorator } from './CardDecorator';
+import { Card, CardContent } from '@material-ui/core';
+import { LiteralMapViewer } from '../LiteralMapViewer';
+import { DeprecatedLiteralMapViewer } from '../DeprecatedLiteralMapViewer';
 import {
   binaryLiterals,
   blobLiterals,
@@ -13,10 +14,31 @@ import {
 } from './literalValues';
 
 const stories = storiesOf('Literals/Collection', module);
-stories.addDecorator(CardDecorator);
 
 function renderCollection(label: string, collection: LiteralCollection) {
-  return <LiteralValue label={label} literal={{ collection, value: 'collection', hash: '' }} />;
+  const map = { literals: { [label]: { collection, value: 'collection' } } };
+  return (
+    <>
+      <div style={{ display: 'flex' }}>
+        <div style={{ marginRight: '16px' }}>
+          OLD
+          <Card>
+            <CardContent>
+              <DeprecatedLiteralMapViewer map={map} />
+            </CardContent>
+          </Card>
+        </div>
+        <div>
+          NEW
+          <Card>
+            <CardContent>
+              <LiteralMapViewer map={map} />
+            </CardContent>
+          </Card>
+        </div>
+      </div>
+    </>
+  );
 }
 
 stories.add('Binary', () =>

packages/zapp/console/src/components/Literals/__stories__/Map.stories.tsx

@@ -1,8 +1,7 @@
 import { storiesOf } from '@storybook/react';
 import { LiteralMap } from 'models/Common/types';
 import * as React from 'react';
-import { LiteralValue } from '../LiteralValue';
-import { CardDecorator } from './CardDecorator';
+import { Card, CardContent } from '@material-ui/core';
 import {
   binaryLiterals,
   blobLiterals,
@@ -11,12 +10,35 @@ import {
   primitiveLiterals,
   schemaLiterals,
 } from './literalValues';
+import { LiteralMapViewer } from '../LiteralMapViewer';
+import { DeprecatedLiteralMapViewer } from '../DeprecatedLiteralMapViewer';
 
 const stories = storiesOf('Literals/Map', module);
-stories.addDecorator(CardDecorator);
 
 function renderMap(label: string, map: LiteralMap) {
-  return <LiteralValue label={label} literal={{ map, value: 'map', hash: '' }} />;
+  const fullMap = { literals: { [label]: { map, value: 'map' } } };
+  return (
+    <>
+      <div style={{ display: 'flex' }}>
+        <div style={{ marginRight: '16px' }}>
+          OLD
+          <Card>
+            <CardContent>
+              <DeprecatedLiteralMapViewer map={fullMap} />
+            </CardContent>
+          </Card>
+        </div>
+        <div>
+          NEW
+          <Card>
+            <CardContent>
+              <LiteralMapViewer map={fullMap} />
+            </CardContent>
+          </Card>
+        </div>
+      </div>
+    </>
+  );
 }
 
 stories.add('Binary', () =>

packages/zapp/console/src/components/Literals/__stories__/ProtobufStruct.stories.tsx

@@ -1,23 +1,41 @@
 import { storiesOf } from '@storybook/react';
 import { ProtobufListValue, ProtobufStruct } from 'models/Common/types';
 import * as React from 'react';
-import { LiteralValue } from '../LiteralValue';
-import { CardDecorator } from './CardDecorator';
+import { Card, CardContent } from '@material-ui/core';
 import { protobufValues } from './protobufValues';
+import { LiteralMapViewer } from '../LiteralMapViewer';
+
+import { DeprecatedLiteralMapViewer } from '../DeprecatedLiteralMapViewer';
 
 const stories = storiesOf('Literals/ProtobufStruct', module);
-stories.addDecorator(CardDecorator);
 
 function renderStruct(label: string, struct: ProtobufStruct) {
+  const map = {
+    literals: {
+      [label]: { scalar: { value: 'generic', generic: struct }, value: 'scalar' },
+    },
+  };
   return (
-    <LiteralValue
-      label={label}
-      literal={{
-        scalar: { value: 'generic', generic: struct },
-        value: 'scalar',
-        hash: '',
-      }}
-    />
+    <>
+      <div style={{ display: 'flex' }}>
+        <div style={{ marginRight: '16px' }}>
+          OLD
+          <Card>
+            <CardContent>
+              <DeprecatedLiteralMapViewer map={map} />
+            </CardContent>
+          </Card>
+        </div>
+        <div>
+          NEW
+          <Card>
+            <CardContent>
+              <LiteralMapViewer map={map} />
+            </CardContent>
+          </Card>
+        </div>
+      </div>
+    </>
   );
 }
 
@@ -30,7 +48,6 @@ stories.add('list', () =>
         kind: 'listValue',
         listValue: {
           values: [
-            ...Object.values(protobufValues),
             {
               kind: 'structValue',
               structValue: { fields: protobufValues },

packages/zapp/console/src/components/Literals/__stories__/Scalar.stories.tsx

@@ -1,8 +1,8 @@
 import { storiesOf } from '@storybook/react';
 import { Scalar } from 'models/Common/types';
 import * as React from 'react';
-import { ScalarValue } from '../Scalar/ScalarValue';
-import { CardDecorator } from './CardDecorator';
+import { Card, CardContent } from '@material-ui/core';
+import { LiteralMapViewer } from '../LiteralMapViewer';
 import {
   binaryScalars,
   blobScalars,
@@ -11,22 +11,45 @@ import {
   primitiveScalars,
   schemaScalars,
 } from './scalarValues';
+import { DeprecatedLiteralMapViewer } from '../DeprecatedLiteralMapViewer';
 
 const stories = storiesOf('Literals/Scalar', module);
-stories.addDecorator(CardDecorator);
 
-const renderScalars = (scalars: Dictionary<Scalar>) =>
+var renderScalars = (scalars: Dictionary<Scalar>) => {
+  const literals = {};
+
   Object.entries(scalars).map(([label, value]) => {
-    return <ScalarValue key={label} label={label} scalar={value as Scalar} />;
+    literals[label] = { scalar: value, value: 'scalar' };
   });
 
+  const map = { literals };
+  return (
+    <>
+      <div style={{ display: 'flex' }}>
+        <div style={{ marginRight: '16px' }}>
+          OLD
+          <Card>
+            <CardContent>
+              <DeprecatedLiteralMapViewer map={map} />
+            </CardContent>
+          </Card>
+        </div>
+        <div>
+          NEW
+          <Card>
+            <CardContent>
+              <LiteralMapViewer map={map} />
+            </CardContent>
+          </Card>
+        </div>
+      </div>
+    </>
+  );
+};
+
 stories.add('Binary', () => <>{renderScalars(binaryScalars)}</>);
 stories.add('Blob', () => <>{renderScalars(blobScalars)}</>);
 stories.add('Error', () => <>{renderScalars(errorScalars)}</>);
-stories.add('NoneType', () => (
-  <>
-    <ScalarValue label="empty_value" scalar={noneTypeScalar} />
-  </>
-));
+stories.add('NoneType', () => <>{renderScalars([noneTypeScalar])}</>);
 stories.add('Primitive', () => <>{renderScalars(primitiveScalars)}</>);
 stories.add('Schema', () => <>{renderScalars(schemaScalars)}</>);