feat: conditionaly render readOnly writeOnly nodes (#83)

* feat: conditional readOnly and writeOnly nodes

* fix: shpw node if both validations are present

* chore: simplify validations

* chore: clean updating component

* chore: viewMode instead of context

Author: Jakub Jankowski

src/__fixtures__/default-schema.json

@@ -12,11 +12,13 @@
       "maximum": 150,
       "multipleOf": 10,
       "exclusiveMinimum": true,
-      "exclusiveMaximum": true
+      "exclusiveMaximum": true,
+      "readOnly": true
     },
     "completed_at": {
       "type": "string",
-      "format": "date-time"
+      "format": "date-time",
+      "writeOnly": true
     },
     "items": {
       "type": ["null", "array"],

src/__stories__/JsonSchemaViewer.tsx

@@ -24,6 +24,15 @@ storiesOf('JsonSchemaViewer', module)
       hideTopBar={boolean('hideTopBar', false)}
       shouldResolveEagerly={boolean('shouldResolveEagerly', false)}
       onGoToRef={action('onGoToRef')}
+      viewMode={select(
+        'viewMode',
+        {
+          standalone: 'standalone',
+          read: 'read',
+          write: 'write',
+        },
+        'standalone',
+      )}
     />
   ))
   .add('custom schema', () => (

src/components/JsonSchemaViewer.tsx

@@ -6,7 +6,7 @@ import * as React from 'react';
 
 import { JSONSchema4 } from 'json-schema';
 import { SchemaTree, SchemaTreeOptions, SchemaTreePopulateHandler, SchemaTreeRefDereferenceFn } from '../tree/tree';
-import { GoToRefHandler, RowRenderer } from '../types';
+import { GoToRefHandler, RowRenderer, ViewMode } from '../types';
 import { isSchemaViewerEmpty } from '../utils/isSchemaViewerEmpty';
 import { SchemaTree as SchemaTreeComponent } from './SchemaTree';
 
@@ -27,8 +27,12 @@ export interface IJsonSchemaViewer {
   onTreePopulate?: SchemaTreePopulateHandler;
   resolveRef?: SchemaTreeRefDereferenceFn;
   shouldResolveEagerly?: boolean;
+  viewMode?: ViewMode;
 }
 
+export const ViewModeContext = React.createContext<ViewMode>('standalone');
+ViewModeContext.displayName = 'ViewModeContext';
+
 export class JsonSchemaViewerComponent extends React.PureComponent<IJsonSchemaViewer & ErrorBoundaryForwardedProps> {
   protected readonly treeStore: TreeStore;
   protected readonly tree: SchemaTree;
@@ -51,6 +55,7 @@ export class JsonSchemaViewerComponent extends React.PureComponent<IJsonSchemaVi
       resolveRef: this.props.resolveRef,
       shouldResolveEagerly: !!this.props.shouldResolveEagerly,
       onPopulate: this.props.onTreePopulate,
+      viewMode: this.props.viewMode,
     };
   }
 
@@ -96,7 +101,8 @@ export class JsonSchemaViewerComponent extends React.PureComponent<IJsonSchemaVi
       this.treeStore.defaultExpandedDepth !== this.expandedDepth ||
       prevProps.schema !== this.props.schema ||
       prevProps.mergeAllOf !== this.props.mergeAllOf ||
-      prevProps.shouldResolveEagerly !== this.props.shouldResolveEagerly
+      prevProps.shouldResolveEagerly !== this.props.shouldResolveEagerly ||
+      prevProps.viewMode !== this.props.viewMode
     ) {
       this.treeStore.defaultExpandedDepth = this.expandedDepth;
       this.tree.treeOptions = this.treeOptions;
@@ -117,7 +123,9 @@ export class JsonSchemaViewerComponent extends React.PureComponent<IJsonSchemaVi
 
     return (
       <div className={cn(className, 'JsonSchemaViewer flex flex-col relative')}>
-        <SchemaTreeComponent expanded={expanded} name={name} schema={schema} treeStore={this.treeStore} {...props} />
+        <ViewModeContext.Provider value={this.props.viewMode ?? 'standalone'}>
+          <SchemaTreeComponent expanded={expanded} name={name} schema={schema} treeStore={this.treeStore} {...props} />
+        </ViewModeContext.Provider>
       </div>
     );
   }

src/components/shared/Validations.tsx

@@ -3,16 +3,18 @@ import { Dictionary } from '@stoplight/types';
 import { Popover } from '@stoplight/ui-kit';
 import cn from 'classnames';
 import * as React from 'react';
+import { ViewModeContext } from '../JsonSchemaViewer';
 
 export interface IValidations {
   required: boolean;
-  validations: (Dictionary<unknown> | {}) & { deprecated?: boolean };
+  validations: (Dictionary<unknown> | {}) & { deprecated?: boolean; readOnly?: unknown; writeOnly?: unknown };
 }
 
 export const Validations: React.FunctionComponent<IValidations> = ({
   required,
-  validations: { deprecated, ...validations },
+  validations: { deprecated, readOnly, writeOnly, ...validations },
 }) => {
+  const viewMode = React.useContext(ViewModeContext);
   const validationCount = Object.keys(validations).length;
 
   const requiredElem = (
@@ -22,9 +24,20 @@ export const Validations: React.FunctionComponent<IValidations> = ({
     </div>
   );
 
+  // Show readOnly writeOnly validations only in standalone mode and only if just one of them is present
+  const showVisibilityValidations = viewMode === 'standalone' && !!readOnly !== !!writeOnly;
+  const visibility = showVisibilityValidations ? (
+    readOnly ? (
+      <span className="ml-2 text-darken-7 dark:text-lighten-6">read-only</span>
+    ) : (
+      <span className="ml-2 text-darken-7 dark:text-lighten-6">write-only</span>
+    )
+  ) : null;
+
   return (
     <>
       {deprecated ? <span className="ml-2 text-orange-7 dark:text-orange-6">deprecated</span> : null}
+      {visibility}
       {validationCount ? (
         <Popover
           boundary="window"

src/tree/__tests__/tree.spec.ts

@@ -1,6 +1,7 @@
 import { TreeListParentNode } from '@stoplight/tree-list';
 import { JSONSchema4 } from 'json-schema';
 import { ResolvingError } from '../../errors';
+import { ViewMode } from '../../types';
 import { getNodeMetadata } from '../metadata';
 import { SchemaTree, SchemaTreeState } from '../tree';
 import { printTree } from './utils/printTree';
@@ -1365,6 +1366,34 @@ describe('SchemaTree', () => {
         expect(printTree(tree)).toMatchSnapshot();
       });
     });
+
+    test.each(['standalone', 'read', 'write'])('given %s mode, should populate proper nodes', mode => {
+      const schema: JSONSchema4 = {
+        type: ['string', 'object'],
+        properties: {
+          id: {
+            type: 'string',
+            readOnly: true,
+          },
+          description: {
+            type: 'string',
+            writeOnly: true,
+          },
+        },
+      };
+
+      const tree = new SchemaTree(schema, new SchemaTreeState(), {
+        expandedDepth: Infinity,
+        mergeAllOf: true,
+        resolveRef: void 0,
+        shouldResolveEagerly: true,
+        onPopulate: void 0,
+        viewMode: mode as ViewMode,
+      });
+
+      tree.populate();
+      expect(tree.count).toEqual(mode === 'standalone' ? 3 : 2);
+    });
   });
 
   test('given visible $ref node, should try to inject the title immediately', () => {

src/tree/tree.ts

@@ -4,6 +4,7 @@ import { JsonPath, Optional } from '@stoplight/types';
 import { JSONSchema4 } from 'json-schema';
 import { get as _get, isEqual as _isEqual, isObject as _isObject } from 'lodash';
 import { ResolvingError } from '../errors';
+import { ViewMode } from '../types';
 import { hasRefItems, isRefNode } from '../utils/guards';
 import { getSchemaNodeMetadata } from './metadata';
 import { canStepIn } from './utils/canStepIn';
@@ -29,6 +30,7 @@ export type SchemaTreeOptions = {
   resolveRef: Optional<SchemaTreeRefDereferenceFn>;
   shouldResolveEagerly: boolean;
   onPopulate: Optional<SchemaTreePopulateHandler>;
+  viewMode?: ViewMode;
 };
 
 export { TreeState as SchemaTreeState };
@@ -53,6 +55,13 @@ export class SchemaTree extends Tree {
     populateTree(this.schema, this.root, 0, [], {
       mergeAllOf: this.treeOptions.mergeAllOf,
       onNode: (fragment, node, parentTreeNode, level): boolean => {
+        if (
+          !!fragment.writeOnly !== !!fragment.readOnly &&
+          ((this.treeOptions.viewMode === 'read' && fragment.writeOnly) ||
+            (this.treeOptions.viewMode === 'write' && fragment.readOnly))
+        ) {
+          return false;
+        }
         if (
           !this.treeOptions.shouldResolveEagerly &&
           ((isRefNode(node) && node.$ref !== null) || (hasRefItems(node) && node.items.$ref !== null))

src/types.ts

@@ -65,3 +65,5 @@ export type RowRenderer = (
   rowOptions: IRowRendererOptions,
   treeStore: TreeStore,
 ) => React.ReactNode;
+
+export type ViewMode = 'read' | 'write' | 'standalone';