fix: align required, validations, and button

Author: lottamus

src/components/DetailDialog.tsx

@@ -12,7 +12,7 @@ import { SchemaNodeWithMeta } from '../types';
 import { isCombiner, isRef } from '../utils';
 import { Types } from './';
 
-export interface IDetailDialog extends React.HTMLAttributes<HTMLDivElement> {
+export interface IDetailDialog {
   treeStore: TreeStore;
 }
 

src/components/Divider.tsx

@@ -8,8 +8,10 @@ import { isSchemaViewerEmpty, renderSchema } from '../utils';
 import { ISchemaTree, SchemaTree } from './SchemaTree';
 
 export interface IJsonSchemaViewer extends ErrorBoundaryProps, Omit<ISchemaTree, 'treeStore'> {
+  style?: object;
   emptyText?: string;
   defaultExpandedDepth?: number;
+  expanded?: boolean;
 }
 
 class JsonSchemaViewerComponent extends React.PureComponent<IJsonSchemaViewer> {

src/components/JsonSchemaViewer.tsx

@@ -1,50 +1,23 @@
 import { IRowRendererOptions, ITreeListNode, TreeStore } from '@stoplight/tree-list';
-import { Omit } from '@stoplight/types';
-import { Button, Checkbox, Colors, Icon } from '@stoplight/ui-kit';
-import * as cn from 'classnames';
+import { Button, Colors, Icon } from '@stoplight/ui-kit';
 import * as pluralize from 'pluralize';
 import * as React from 'react';
 
 import { IMasking, SchemaNodeWithMeta } from '../types';
-import { formatRef, isCombiner, isRef, pathToString } from '../utils';
-import { Divider, Types } from './';
+import { formatRef, isCombiner, isRef } from '../utils';
+import { Types } from './';
 
-export interface ISchemaRow extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onClick' | 'onSelect'>, IMasking {
+export interface ISchemaRow extends IMasking {
   node: ITreeListNode<object>;
   rowOptions: IRowRendererOptions;
-  onMaskEdit(node: SchemaNodeWithMeta): void;
   treeStore: TreeStore;
 }
 
 const ICON_SIZE = 12;
 
-export const SchemaRow: React.FunctionComponent<ISchemaRow> = ({
-  node,
-  treeStore,
-  canSelect,
-  onSelect,
-  onMaskEdit,
-  selected,
-}) => {
+export const SchemaRow: React.FunctionComponent<ISchemaRow> = ({ node, treeStore }) => {
   const schemaNode = node.metadata as SchemaNodeWithMeta;
-  const { showDivider, name, $ref, subtype, required, path, inheritedFrom } = schemaNode;
-
-  const handleChange = React.useCallback(
-    () => {
-      if (onSelect !== undefined) {
-        onSelect(pathToString(path));
-      }
-    },
-    [onSelect]
-  );
-
-  const handleEditMask = React.useCallback<React.MouseEventHandler<HTMLButtonElement>>(
-    e => {
-      e.stopPropagation();
-      onMaskEdit(schemaNode);
-    },
-    [onMaskEdit]
-  );
+  const { showDivider, name, $ref, subtype, required, inheritedFrom } = schemaNode;
 
   const handleButtonClick = React.useCallback((e: React.MouseEvent) => {
     e.stopPropagation();
@@ -82,50 +55,40 @@ export const SchemaRow: React.FunctionComponent<ISchemaRow> = ({
           />
         )}
 
-        {showDivider && <Divider>or</Divider>}
+        {showDivider && (
+          <div className="flex items-center w-full h-2 absolute" style={{ top: -16, left: -16 }}>
+            <div className="font-bold text-darken-7 pr-2">OR</div>
+            <div className="flex-1 bg-darken-5" style={{ height: 2 }} />
+          </div>
+        )}
 
         <div className="flex-1 truncate">
           <div className="flex items-baseline">
-            {name && <span className="mr-3">{name}</span>}
+            {name && <span>{name}</span>}
 
-            <Types type={type} subtype={subtype}>
+            <Types className="ml-2" type={type} subtype={subtype}>
               {type === '$ref' ? `[${$ref}]` : null}
             </Types>
 
-            {inheritedFrom ? (
-              <>
-                <span className="text-darken-7 mx-2">{`{${formatRef(inheritedFrom)}}`}</span>
-                {onMaskEdit !== undefined && <span onClick={handleEditMask}>(edit mask)</span>}
-              </>
-            ) : null}
+            {inheritedFrom && <span className="text-darken-7 ml-2">{`{${formatRef(inheritedFrom)}}`}</span>}
           </div>
 
           {description && <span className="text-darken-7 text-xs">{description}</span>}
         </div>
 
-        {(canSelect || validationCount || required) && (
-          <div className="items-center text-right ml-auto text-xs">
-            {canSelect ? (
-              <Checkbox onChange={handleChange} checked={selected && selected.includes(pathToString(path))} />
-            ) : (
-              <>
-                {validationCount ? (
-                  <span className="mr-2 text-darken-7">
-                    {validationCount} {pluralize('validation', validationCount)}
-                  </span>
-                ) : null}
-
-                {required && <span className="font-semibold">required</span>}
-              </>
-            )}
+        {validationCount > 0 && (
+          <div className="ml-2 text-darken-7 text-xs">
+            {validationCount} {pluralize('validation', validationCount)}
           </div>
         )}
 
-        {(validationCount || description) &&
-          node.canHaveChildren && (
+        {required && <div className="ml-2 font-semibold text-xs">required</div>}
+
+        {node.canHaveChildren &&
+          (validationCount || description) && (
             <Button
               small
-              className={cn(required && 'ml-2')}
+              className="ml-2"
               id={`${node.id}-showMore`}
               icon={<Icon icon="info-sign" className="opacity-75" iconSize={ICON_SIZE} />}
               onClick={handleButtonClick}

src/components/MaskedSchema.tsx

@@ -1,51 +1,33 @@
 import { TreeList, TreeListEvents, TreeStore } from '@stoplight/tree-list';
-import { Omit } from '@stoplight/types';
 
 import * as cn from 'classnames';
 import { JSONSchema4 } from 'json-schema';
 import { observer } from 'mobx-react-lite';
 import * as React from 'react';
 
+import { Dialog } from '@blueprintjs/core';
 import { IMasking } from '../types';
-import { lookupRef } from '../utils';
-import { DetailDialog, ISchemaRow, MaskedSchema, SchemaRow, TopBar } from './';
+import { DetailDialog, SchemaRow } from './';
+import { JsonSchemaViewer } from './JsonSchemaViewer';
 
 const ROW_HEIGHT = 40;
 const canDrag = () => false;
 
-export interface ISchemaTree extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onSelect' | 'onError'>, IMasking {
+export interface ISchemaTree extends IMasking {
+  treeStore: TreeStore;
+  schema: JSONSchema4;
+  className?: string;
   name?: string;
   dereferencedSchema?: JSONSchema4;
-  schema: JSONSchema4;
-  expanded?: boolean;
   hideTopBar?: boolean;
-  treeStore: TreeStore;
+  expanded?: boolean;
 }
 
 export const SchemaTree = observer<ISchemaTree>(props => {
-  const {
-    expanded = false,
-    schema,
-    dereferencedSchema,
-    hideTopBar,
-    selected,
-    canSelect,
-    onSelect,
-    name,
-    treeStore,
-    className,
-    ...rest
-  } = props;
+  const { hideTopBar, selected, name, treeStore, className } = props;
 
   const [maskedSchema, setMaskedSchema] = React.useState<JSONSchema4 | null>(null);
 
-  const handleMaskEdit = React.useCallback<ISchemaRow['onMaskEdit']>(
-    node => {
-      setMaskedSchema(lookupRef(node.path, dereferencedSchema));
-    },
-    [dereferencedSchema]
-  );
-
   treeStore.on(TreeListEvents.NodeClick, (e, node) => {
     if (node.level === 0) return; // Don't allow collapsing the root
 
@@ -59,10 +41,7 @@ export const SchemaTree = observer<ISchemaTree>(props => {
   const handleMaskedSchemaClose = React.useCallback(() => setMaskedSchema(null), []);
 
   const itemData = {
-    onSelect,
-    onMaskEdit: handleMaskEdit,
     selected,
-    canSelect,
     treeStore,
     count: treeStore.nodes.length,
   };
@@ -73,12 +52,19 @@ export const SchemaTree = observer<ISchemaTree>(props => {
   );
 
   return (
-    <div className={cn(className, 'flex flex-col h-full w-full')} {...rest}>
+    <div className={cn(className, 'flex flex-col h-full w-full')}>
       {maskedSchema && (
-        <MaskedSchema onClose={handleMaskedSchemaClose} onSelect={onSelect} selected={selected} schema={maskedSchema} />
+        <Dialog isOpen onClose={handleMaskedSchemaClose}>
+          <JsonSchemaViewer selected={selected} schema={maskedSchema} style={{ height: 500 }} />
+        </Dialog>
       )}
 
-      {!hideTopBar && <TopBar name={name} height={ROW_HEIGHT} />}
+      {name &&
+        !hideTopBar && (
+          <div className="flex items-center text-sm px-6 font-semibold" style={{ height: ROW_HEIGHT }}>
+            {name}
+          </div>
+        )}
 
       <DetailDialog treeStore={treeStore} />
 

src/components/SchemaRow.tsx

@@ -7,12 +7,14 @@ import { ITreeNodeMeta, JSONSchema4CombinerName } from '../types';
 export interface IType {
   type: JSONSchema4TypeName | JSONSchema4CombinerName | 'binary' | '$ref';
   subtype?: ITreeNodeMeta['subtype'];
+  className?: string;
 }
 
-export const Type: React.FunctionComponent<IType> = ({ children, type, subtype }) => {
+export const Type: React.FunctionComponent<IType> = ({ className, children, type, subtype }) => {
   return (
-    <span className={cn(PropertyTypeColors[type])}>
+    <span className={cn(className, PropertyTypeColors[type])}>
       {type === 'array' && subtype && subtype !== 'array' ? `array[${subtype}]` : type}
+
       {children}
     </span>
   );

src/components/SchemaTree.tsx

@@ -1,27 +1,29 @@
+import cn from 'classnames';
 import { JSONSchema4TypeName } from 'json-schema';
 import * as React from 'react';
 import { ITreeNodeMeta, JSONSchema4CombinerName } from '../types';
-import { MutedText } from './common/MutedText';
 import { Type } from './Type';
 
 interface ITypes {
+  className?: string;
   type?: JSONSchema4TypeName | JSONSchema4TypeName[] | JSONSchema4CombinerName | '$ref';
   subtype?: ITreeNodeMeta['subtype'];
 }
 
-export const Types: React.FunctionComponent<ITypes> = ({ type, subtype }) => {
+export const Types: React.FunctionComponent<ITypes> = ({ className, type, subtype, children }) => {
   if (!type) return null;
 
   if (!Array.isArray(type)) {
-    return <Type type={type} subtype={subtype} />;
+    return <Type className={className} type={type} subtype={subtype} children={children} />;
   }
 
   return (
-    <div className="truncate">
+    <div className={cn(className, 'truncate')}>
       <>
         {type.map((name, i, { length }) => (
           <React.Fragment key={i}>
             <Type key={i} type={name} subtype={subtype} />
+
             {i < length - 1 && (
               <span key={`${i}-sep`} className="text-darken-7">
                 {' or '}

src/components/TopBar.tsx

@@ -1,9 +1,6 @@
-export * from './Divider';
 export * from './JsonSchemaViewer';
-export * from './MaskedSchema';
 export * from './SchemaRow';
 export * from './SchemaTree';
-export * from './TopBar';
 export * from './Type';
 export * from './Types';
 export * from './DetailDialog';