From ae42294d5f6175fa49a29dff5b407f714c4d920e Mon Sep 17 00:00:00 2001 From: Jaap Rood Date: Tue, 4 Aug 2020 13:22:49 +0200 Subject: [PATCH 1/8] Start to explore how the ShapeViewer can directly render Row components --- .../diff/v2/shape_viewers/ShapeViewer.js | 65 +++++++++++++++++++ 1 file changed, 65 insertions(+) create mode 100644 workspaces/ui/src/components/diff/v2/shape_viewers/ShapeViewer.js diff --git a/workspaces/ui/src/components/diff/v2/shape_viewers/ShapeViewer.js b/workspaces/ui/src/components/diff/v2/shape_viewers/ShapeViewer.js new file mode 100644 index 0000000000..f9fbf348cd --- /dev/null +++ b/workspaces/ui/src/components/diff/v2/shape_viewers/ShapeViewer.js @@ -0,0 +1,65 @@ +import React, { useMemo } from 'react'; +import classNames from 'classnames'; +import { makeStyles } from '@material-ui/core/styles'; +import { useShapeViewerStyles } from './styles'; + +export default function ShapeViewer({ shape }) { + const generalClasses = useShapeViewerStyles(); + + const rows = useMemo(() => createRows(shape), [shape]); + + return ( +
+ + + + + + + + + +
+ ); +} + +export function Row(props) { + const generalClasses = useShapeViewerStyles(); + const { exampleOnly, onLeftClick } = props; + + return ( +
+
+ {props.type} +
+
+ ); +} +Row.displayName = 'ShapeViewer/Row'; + +const useStyles = makeStyles((theme) => ({})); + +function createRows(shape) {} + +function objectRows(objectShape) {} +function listRows(listShape) {} From ed362e9d8b228e6f9e4b302fc426c4a3a23ad400 Mon Sep 17 00:00:00 2001 From: Jaap Rood Date: Tue, 4 Aug 2020 13:24:00 +0200 Subject: [PATCH 2/8] Render the new ShapeViewer right above the current one for now, behind a feature flag that's disabled by default --- workspaces/ui/.env | 3 ++- workspaces/ui/.env.development | 3 ++- 2 files changed, 4 insertions(+), 2 deletions(-) diff --git a/workspaces/ui/.env b/workspaces/ui/.env index 7806027cc6..717d5365b0 100644 --- a/workspaces/ui/.env +++ b/workspaces/ui/.env @@ -2,4 +2,5 @@ REACT_APP_TESTING_DASHBOARD=true REACT_APP_TESTING_DASHBOARD_TEASER=false REACT_APP_TESTING_DASHBOARD_ENDPOINT_DETAILS=false REACT_APP_TESTING_DASHBOARD_ENDPOINT_DIFF_STATS=false -REACT_APP_TESTING_DASHBOARD_UNDOCUMENTED_ENDPOINTS=false \ No newline at end of file +REACT_APP_TESTING_DASHBOARD_UNDOCUMENTED_ENDPOINTS=false +REACT_APP_FLATTENED_SHAPE_VIEWER=false \ No newline at end of file diff --git a/workspaces/ui/.env.development b/workspaces/ui/.env.development index 50d9cd2599..9cb037b486 100644 --- a/workspaces/ui/.env.development +++ b/workspaces/ui/.env.development @@ -2,4 +2,5 @@ REACT_APP_TESTING_DASHBOARD=true REACT_APP_TESTING_DASHBOARD_TEASER=false REACT_APP_TESTING_DASHBOARD_ENDPOINT_DETAILS=true REACT_APP_TESTING_DASHBOARD_ENDPOINT_DIFF_STATS=true -REACT_APP_TESTING_DASHBOARD_UNDOCUMENTED_ENDPOINTS=true \ No newline at end of file +REACT_APP_TESTING_DASHBOARD_UNDOCUMENTED_ENDPOINTS=true +REACT_APP_FLATTENED_SHAPE_VIEWER=false \ No newline at end of file From ec7d5940a458049bbaa93e9cba5d14d3daf85114 Mon Sep 17 00:00:00 2001 From: Jaap Rood Date: Wed, 5 Aug 2020 11:15:08 +0200 Subject: [PATCH 3/8] Actually render the new ShapeViewer when enabled through feature flag --- .../src/components/diff/v2/DiffHunkViewer.js | 28 +++++++++++++------ 1 file changed, 19 insertions(+), 9 deletions(-) diff --git a/workspaces/ui/src/components/diff/v2/DiffHunkViewer.js b/workspaces/ui/src/components/diff/v2/DiffHunkViewer.js index b35dff37f2..81890963cf 100644 --- a/workspaces/ui/src/components/diff/v2/DiffHunkViewer.js +++ b/workspaces/ui/src/components/diff/v2/DiffHunkViewer.js @@ -1,26 +1,36 @@ import React from 'react'; -import {makeStyles} from '@material-ui/core/styles'; -import {ShapeRenderStore} from './shape_viewers/ShapeRenderContext'; -import {DiffViewer} from './shape_viewers/SideBySideShapeRows'; -import {getOrUndefined, JsonHelper} from '@useoptic/domain'; +import { makeStyles } from '@material-ui/core/styles'; +import { ShapeRenderStore } from './shape_viewers/ShapeRenderContext'; +import { DiffViewer } from './shape_viewers/SideBySideShapeRows'; +import ShapeViewer from './shape_viewers/ShapeViewer'; +import { getOrUndefined, JsonHelper } from '@useoptic/domain'; -const useStyles = makeStyles(theme => ({ +const useStyles = makeStyles((theme) => ({ root: { width: '100%', }, - })); export default function DiffHunkViewer(props) { - const {preview, diffDescription, suggestion, exampleOnly, diff} = props; + const { preview, diffDescription, suggestion, exampleOnly, diff } = props; const classes = useStyles(); const rootShape = preview.rootId; const shape = getOrUndefined(preview.getRootShape); return ( - - + + {process.env.REACT_APP_FLATTENED_SHAPE_VIEWER === 'true' && ( + + )} + + ); } From e319cdfaa0ad5e44c1688ecec95c2fb21b694837 Mon Sep 17 00:00:00 2001 From: Jaap Rood Date: Wed, 5 Aug 2020 12:22:58 +0200 Subject: [PATCH 4/8] Implement the rendering of rows field names and values --- .../diff/v2/shape_viewers/ShapeViewer.js | 149 +++++++++++++++++- 1 file changed, 144 insertions(+), 5 deletions(-) diff --git a/workspaces/ui/src/components/diff/v2/shape_viewers/ShapeViewer.js b/workspaces/ui/src/components/diff/v2/shape_viewers/ShapeViewer.js index f9fbf348cd..9bd1f6709b 100644 --- a/workspaces/ui/src/components/diff/v2/shape_viewers/ShapeViewer.js +++ b/workspaces/ui/src/components/diff/v2/shape_viewers/ShapeViewer.js @@ -1,7 +1,7 @@ import React, { useMemo } from 'react'; import classNames from 'classnames'; import { makeStyles } from '@material-ui/core/styles'; -import { useShapeViewerStyles } from './styles'; +import { useColor, useShapeViewerStyles, SymbolColor } from './styles'; export default function ShapeViewer({ shape }) { const generalClasses = useShapeViewerStyles(); @@ -21,9 +21,10 @@ export default function ShapeViewer({ shape }) { +
- {props.type} +
+ {indentPadding} + + {!missing && } +
); } Row.displayName = 'ShapeViewer/Row'; -const useStyles = makeStyles((theme) => ({})); +function RowValue({ type, value }) { + const generalClasses = useShapeViewerStyles(); + const classes = useStyles(); + + if (type === 'null') { + return ( + + {'null'} + + ); + } + + if (type === 'array_open') { + return ( + + {'['} + + ); + } + + if (type === 'array_close') { + return ( + + {']'} + + ); + } + + if (type === 'object_open') { + return ( + + {'{'} + + ); + } + + if (type === 'object_close') { + return ( + + {'}'} + + ); + } + + if (type === 'string') { + return "{value}"; + } + + if (type === 'boolean') { + return {value ? 'true' : 'false'}; + } + + if (type === 'number') { + return {value}; + } + + throw new Error(`Cannot render RowValue for type '${type}'`); +} +RowValue.displayName = 'ShapeViewer/RowValue'; + +function RowFieldName({ type, name, missing }) { + const classes = useStyles(); + if (!name) return null; + return ( + + {name}:{' '} + + ); +} + +const useStyles = makeStyles((theme) => ({ + rowContent: { + fontSize: 12, + fontFamily: "'Source Code Pro', monospace", + whiteSpace: 'pre', + color: SymbolColor, + }, + + booleanContent: { + fontWeight: 600, + fontFamily: "'Source Code Pro', monospace", + color: useColor.BooleanColor, + }, + + symbolContent: { + color: SymbolColor, + }, + + numberContent: { + fontWeight: 600, + fontFamily: "'Source Code Pro', monospace", + color: useColor.NumberColor, + }, + + stringContent: { + fontWeight: 600, + whiteSpace: 'pre-line', + wordBreak: 'break-all', + overflowWrap: 'break-word', + fontFamily: "'Source Code Pro', monospace", + color: useColor.StringColor, + }, + + fieldName: { + fontWeight: 600, + color: '#cfcfcf', + fontSize: 12, + fontFamily: "'Source Code Pro', monospace", + + opacity: 1, + + '&$isMissing': { + opacity: 0.4, + }, + }, + + isMissing: {}, +})); function createRows(shape) {} From fd703a48f4b30ddea2f544eeba13847c7eff1fb1 Mon Sep 17 00:00:00 2001 From: Jaap Rood Date: Wed, 5 Aug 2020 12:40:37 +0200 Subject: [PATCH 5/8] Add support for rows that represent arrays and array items --- .../diff/v2/shape_viewers/ShapeViewer.js | 72 ++++++++++++++++++- 1 file changed, 71 insertions(+), 1 deletion(-) diff --git a/workspaces/ui/src/components/diff/v2/shape_viewers/ShapeViewer.js b/workspaces/ui/src/components/diff/v2/shape_viewers/ShapeViewer.js index 9bd1f6709b..c944269d18 100644 --- a/workspaces/ui/src/components/diff/v2/shape_viewers/ShapeViewer.js +++ b/workspaces/ui/src/components/diff/v2/shape_viewers/ShapeViewer.js @@ -34,6 +34,39 @@ export default function ShapeViewer({ shape }) { /> + + + + + + + + + + + + + ); @@ -42,7 +75,16 @@ export default function ShapeViewer({ shape }) { export function Row(props) { const classes = useStyles(); const generalClasses = useShapeViewerStyles(); - const { indent, fieldName, type, fieldValue, onLeftClick, missing } = props; + const { + indent, + seqIndex, + fieldName, + fieldValue, + missing, + type, + + onLeftClick, + } = props; const indentPadding = ' '.repeat(indent * 2); @@ -57,6 +99,7 @@ export function Row(props) {
{indentPadding} + {!missing && }
@@ -149,6 +192,20 @@ function RowFieldName({ type, name, missing }) { ); } +function RowSeqIndex({ type, index, missing }) { + const classes = useStyles(); + if (!index && index !== 0) return null; + return ( + + {index}:{' '} + + ); +} + const useStyles = makeStyles((theme) => ({ rowContent: { fontSize: 12, @@ -195,6 +252,19 @@ const useStyles = makeStyles((theme) => ({ }, }, + fieldIndex: { + fontWeight: 500, + color: '#9cdcfe', + fontSize: 12, + fontFamily: "'Source Code Pro', monospace", + + opacity: 1, + + '&$isMissing': { + opacity: 0.4, + }, + }, + isMissing: {}, })); From 3ce16fa577e67e98b4fab6f33ec3794a589f822f Mon Sep 17 00:00:00 2001 From: Jaap Rood Date: Wed, 5 Aug 2020 15:23:08 +0200 Subject: [PATCH 6/8] Render ShapeViewer through a rows view model --- .../diff/v2/shape_viewers/ShapeViewer.js | 180 ++++++++++++------ 1 file changed, 119 insertions(+), 61 deletions(-) diff --git a/workspaces/ui/src/components/diff/v2/shape_viewers/ShapeViewer.js b/workspaces/ui/src/components/diff/v2/shape_viewers/ShapeViewer.js index c944269d18..2cbc75f481 100644 --- a/workspaces/ui/src/components/diff/v2/shape_viewers/ShapeViewer.js +++ b/workspaces/ui/src/components/diff/v2/shape_viewers/ShapeViewer.js @@ -3,6 +3,17 @@ import classNames from 'classnames'; import { makeStyles } from '@material-ui/core/styles'; import { useColor, useShapeViewerStyles, SymbolColor } from './styles'; +import { + getOrUndefined, + getOrUndefinedJson, + headOrUndefined, + JsonHelper, + lengthScala, + mapScala, + getJson, + toOption, +} from '@useoptic/domain'; + export default function ShapeViewer({ shape }) { const generalClasses = useShapeViewerStyles(); @@ -10,64 +21,9 @@ export default function ShapeViewer({ shape }) { return (
- - - - - - - - - - - - - - - - - - - - - - - + {rows.map((row, index) => ( + + ))}
); } @@ -268,7 +224,109 @@ const useStyles = makeStyles((theme) => ({ isMissing: {}, })); -function createRows(shape) {} +function createRows(shape) { + return shapeRows(shape); +} + +function shapeRows( + shape, + rows = [], + indent = 0, + field = { fieldName: null, fieldValue: undefined, seqIndex: undefined } +) { + if (!shape) return []; + + switch (shape.baseShapeId) { + case '$object': + // debugger; + objectRows(shape, rows, indent, field); + break; + case '$list': + // debugger; + listRows(shape, rows, indent, field); + break; + default: + // debugger; + if (shape.isOptional || shape.isNullable) { + shapeRows(shape.innerShape, rows, indent, field); + } else { + let type = getFieldType(field.fieldValue); + let row = { type, ...field, indent }; + rows.push(row); + } + break; + } + + return rows; +} + +function objectRows(objectShape, rows, indent, field) { + const fields = objectShape.fields; + + rows.push({ + type: 'object_open', + fieldName: field.fieldName, + seqIndex: field.seqIndex, + indent, + }); + + mapScala(fields)((field) => { + const fieldName = field.fieldName; + const fieldShape = getOrUndefined(field.exampleShape); + const fieldValue = getOrUndefinedJson(field.example); + + return shapeRows(fieldShape, rows, indent + 1, { + fieldName, + fieldValue, + }); + }); -function objectRows(objectShape) {} -function listRows(listShape) {} + rows.push({ type: 'object_close', indent }); +} +function listRows(listShape, rows, indent, field) { + const listId = listShape.id; + const items = listShape.items; + + rows.push({ + type: 'array_open', + indent, + fieldName: field.fieldName, + seqIndex: field.seqIndex, + }); + + mapScala(items)((item, index) => { + const itemShape = item.exampleShape; + const fieldValue = getJson(item.example); + + return shapeRows(itemShape, rows, indent + 1, { + seqIndex: index, + fieldValue, + }); + }); + + rows.push({ type: 'array_close', indent }); +} + +function getFieldType(fieldValue) { + if (typeof fieldValue === 'undefined') { + return 'undefined'; + } + + const jsTypeString = Object.prototype.toString.call(fieldValue); + + switch (jsTypeString) { + case '[object Null]': + return 'null'; + case '[object String]': + return 'string'; + case '[object Boolean]': + return 'boolean'; + case '[object Number]': + return 'number'; + default: + debugger; + throw new Error( + `Can not return field type for fieldValue with type string '${jsTypeString}'` + ); + } +} From 7d40d511adc4600ee73f78c7085a234a19f2c61c Mon Sep 17 00:00:00 2001 From: Jaap Rood Date: Wed, 5 Aug 2020 15:48:27 +0200 Subject: [PATCH 7/8] Track trail for each rendered row and use it to unique identify each row --- .../diff/v2/shape_viewers/ShapeViewer.js | 27 +++++++++++++++---- 1 file changed, 22 insertions(+), 5 deletions(-) diff --git a/workspaces/ui/src/components/diff/v2/shape_viewers/ShapeViewer.js b/workspaces/ui/src/components/diff/v2/shape_viewers/ShapeViewer.js index 2cbc75f481..0824454f69 100644 --- a/workspaces/ui/src/components/diff/v2/shape_viewers/ShapeViewer.js +++ b/workspaces/ui/src/components/diff/v2/shape_viewers/ShapeViewer.js @@ -22,7 +22,7 @@ export default function ShapeViewer({ shape }) { return (
{rows.map((row, index) => ( - + ))}
); @@ -224,15 +224,26 @@ const useStyles = makeStyles((theme) => ({ isMissing: {}, })); +// creating rows is a mutative process, to prevent a lot of re-alloctions for big bodies function createRows(shape) { - return shapeRows(shape); + const rows = shapeRows(shape); + for (let row of rows) { + row.id = `${row.trail.join('.') || 'root'}-${row.type}`; + } + + return rows; } function shapeRows( shape, rows = [], indent = 0, - field = { fieldName: null, fieldValue: undefined, seqIndex: undefined } + field = { + fieldName: null, + fieldValue: undefined, + seqIndex: undefined, + trail: [], + } ) { if (!shape) return []; @@ -262,11 +273,13 @@ function shapeRows( function objectRows(objectShape, rows, indent, field) { const fields = objectShape.fields; + const { trail } = field; rows.push({ type: 'object_open', fieldName: field.fieldName, seqIndex: field.seqIndex, + trail, indent, }); @@ -278,20 +291,23 @@ function objectRows(objectShape, rows, indent, field) { return shapeRows(fieldShape, rows, indent + 1, { fieldName, fieldValue, + trail: [...trail, fieldName], }); }); - rows.push({ type: 'object_close', indent }); + rows.push({ type: 'object_close', indent, trail }); } function listRows(listShape, rows, indent, field) { const listId = listShape.id; const items = listShape.items; + const { trail } = field; rows.push({ type: 'array_open', indent, fieldName: field.fieldName, seqIndex: field.seqIndex, + trail, }); mapScala(items)((item, index) => { @@ -301,10 +317,11 @@ function listRows(listShape, rows, indent, field) { return shapeRows(itemShape, rows, indent + 1, { seqIndex: index, fieldValue, + trail: [...trail, index], }); }); - rows.push({ type: 'array_close', indent }); + rows.push({ type: 'array_close', indent, trail }); } function getFieldType(fieldValue) { From 9f4d31bb8a03c2c2f9f633153e3927b0b51f7ed2 Mon Sep 17 00:00:00 2001 From: Jaap Rood Date: Thu, 6 Aug 2020 12:11:19 +0200 Subject: [PATCH 8/8] Render the new flattened diff viewer by adding "/flattened" to the route when feature flag is enabled --- workspaces/ui/src/RouterPaths.js | 2 + .../components/diff/v2/CaptureManagerPage.js | 19 ++++--- .../ui/src/components/diff/v2/DiffCursor.js | 3 +- .../src/components/diff/v2/DiffHunkViewer.js | 7 +-- .../ui/src/components/diff/v2/DiffPageNew.js | 9 +++- .../components/diff/v2/DiffReviewExpanded.js | 18 +++++-- .../src/components/diff/v2/DiffReviewPage.js | 9 ++-- .../components/diff/v2/DiffViewSimulation.js | 49 +++++++++++++------ 8 files changed, 78 insertions(+), 38 deletions(-) diff --git a/workspaces/ui/src/RouterPaths.js b/workspaces/ui/src/RouterPaths.js index e156c9b5c1..f027b1c10e 100644 --- a/workspaces/ui/src/RouterPaths.js +++ b/workspaces/ui/src/RouterPaths.js @@ -9,6 +9,8 @@ const routerPaths = { diffsRoot: (base = '') => `${base}/diffs`, captureRoot: (base = '') => `${routerPaths.diffsRoot(base)}/:captureId`, captureRequestDiffsRoot: (base = '') => `${routerPaths.captureRoot(base)}/paths/:pathId/methods/:method`, + captureRequestDiffsRootWithViewer: (base = '') => + `${routerPaths.captureRoot(base)}/paths/:pathId/methods/:method/:viewer`, }; export function useRouterPaths() { diff --git a/workspaces/ui/src/components/diff/v2/CaptureManagerPage.js b/workspaces/ui/src/components/diff/v2/CaptureManagerPage.js index 4642b803f7..ec3c37ed2b 100644 --- a/workspaces/ui/src/components/diff/v2/CaptureManagerPage.js +++ b/workspaces/ui/src/components/diff/v2/CaptureManagerPage.js @@ -171,6 +171,13 @@ export const CaptureManager = ({}) => { path={routerPaths.captureRequestDiffsRoot} component={RequestDiffWrapper} /> + {process.env.REACT_APP_FLATTENED_SHAPE_VIEWER === 'true' && ( + + )} {captures.length && ( )} @@ -212,13 +219,13 @@ function CaptureChooserComponent(props) { ); const [tab, setTab] = useState(subtabs.ENDPOINT_DIFF); - + useEffect(() => { track(`Changed to ${tab}`, { diffCount: realEndpointDiffCount, - undocumentedUrlCount: urlsSplit.total - }) - }, [tab, realEndpointDiffCount, urlsSplit.total]) + undocumentedUrlCount: urlsSplit.total, + }); + }, [tab, realEndpointDiffCount, urlsSplit.total]); useEffect(() => { global.debugOptic = debugDump(specService, captureId); @@ -323,7 +330,7 @@ function CaptureChooserComponent(props) { function RequestDiffWrapper(props) { const specService = useSpecService(); const classes = useStyles(); - + return ( // sessionId={props.match.params.captureId} // specService={specService} @@ -438,7 +445,7 @@ function EndpointDiffs(props) { component={Link} to={to} onClick={() => { - track("Viewing Endpoint Diff", i) + track('Viewing Endpoint Diff', i); }} >
diff --git a/workspaces/ui/src/components/diff/v2/DiffCursor.js b/workspaces/ui/src/components/diff/v2/DiffCursor.js index a71c1f2bd8..7c4c093c76 100644 --- a/workspaces/ui/src/components/diff/v2/DiffCursor.js +++ b/workspaces/ui/src/components/diff/v2/DiffCursor.js @@ -93,7 +93,7 @@ export class DiffCursor extends React.Component { } render = () => { - const { diffs, captureId } = this.props; + const { diffs, captureId, viewer } = this.props; const diffCount = diffs.length; const { showAllDiffs, selectedDiff } = this.state; @@ -115,6 +115,7 @@ export class DiffCursor extends React.Component {
diff --git a/workspaces/ui/src/components/diff/v2/DiffHunkViewer.js b/workspaces/ui/src/components/diff/v2/DiffHunkViewer.js index 81890963cf..d2cfb8033a 100644 --- a/workspaces/ui/src/components/diff/v2/DiffHunkViewer.js +++ b/workspaces/ui/src/components/diff/v2/DiffHunkViewer.js @@ -2,8 +2,7 @@ import React from 'react'; import { makeStyles } from '@material-ui/core/styles'; import { ShapeRenderStore } from './shape_viewers/ShapeRenderContext'; import { DiffViewer } from './shape_viewers/SideBySideShapeRows'; -import ShapeViewer from './shape_viewers/ShapeViewer'; -import { getOrUndefined, JsonHelper } from '@useoptic/domain'; +import { getOrUndefined } from '@useoptic/domain'; const useStyles = makeStyles((theme) => ({ root: { @@ -26,10 +25,6 @@ export default function DiffHunkViewer(props) { suggestion={suggestion} exampleOnly={exampleOnly} > - {process.env.REACT_APP_FLATTENED_SHAPE_VIEWER === 'true' && ( - - )} - ); diff --git a/workspaces/ui/src/components/diff/v2/DiffPageNew.js b/workspaces/ui/src/components/diff/v2/DiffPageNew.js index 1df6d6dbb7..256001379f 100644 --- a/workspaces/ui/src/components/diff/v2/DiffPageNew.js +++ b/workspaces/ui/src/components/diff/v2/DiffPageNew.js @@ -38,6 +38,7 @@ function DiffPageNew(props) { const services = useServices(); const { pathId, method, captureId } = props.match.params; + const viewer = props.match.params.viewer || null; return ( } > - {/**/} - + ); diff --git a/workspaces/ui/src/components/diff/v2/DiffReviewExpanded.js b/workspaces/ui/src/components/diff/v2/DiffReviewExpanded.js index 90b71c2294..076b60d756 100644 --- a/workspaces/ui/src/components/diff/v2/DiffReviewExpanded.js +++ b/workspaces/ui/src/components/diff/v2/DiffReviewExpanded.js @@ -80,11 +80,12 @@ export class DiffReviewExpandedCached extends React.Component { } render() { - const { selectedDiff, captureId, setSelectedDiff } = this.props; + const { selectedDiff, captureId, setSelectedDiff, viewer } = this.props; return ( ); @@ -93,7 +94,14 @@ export class DiffReviewExpandedCached extends React.Component { export const DiffReviewExpanded = (props) => { const classes = useStyles(); - const { diff, selectedDiff, setSelectedDiff, rfcContext, captureId } = props; + const { + diff, + selectedDiff, + setSelectedDiff, + rfcContext, + captureId, + viewer, + } = props; const description = useDiffDescription(diff); @@ -148,7 +156,7 @@ export const DiffReviewExpanded = (props) => { const { interaction, interactionScala } = currentInteraction; const { method, path } = interactionScala.request; - track("Display Diff in Behavior Page", props) + track('Display Diff in Behavior Page', props); return (
@@ -195,9 +203,10 @@ export const DiffReviewExpanded = (props) => { diff={diff} interactionScala={interactionScala} description={description} - body={interactionScala.response.body} + body={interactionScala.response.body} // TODO: shouldn't this be the request body? outerRfcState={outerRfcState} selectedInterpretation={selectedInterpretation} + viewer={viewer} /> } @@ -245,6 +254,7 @@ export const DiffReviewExpanded = (props) => { body={interactionScala.response.body} outerRfcState={outerRfcState} selectedInterpretation={selectedInterpretation} + viewer={viewer} /> } diff --git a/workspaces/ui/src/components/diff/v2/DiffReviewPage.js b/workspaces/ui/src/components/diff/v2/DiffReviewPage.js index d7dc3e23e6..5b2d583e99 100644 --- a/workspaces/ui/src/components/diff/v2/DiffReviewPage.js +++ b/workspaces/ui/src/components/diff/v2/DiffReviewPage.js @@ -30,13 +30,13 @@ import { DiffStats } from './Stats'; import { DiffLoading } from './LoadingNextDiff'; import { IgnoreDiffContext, SuggestionsContext } from './DiffPageNew'; import FinalizeDialog from './Finalize'; -import { track } from '../../../Analytics' +import { track } from '../../../Analytics'; import Button from '@material-ui/core/Button'; export const newRegionsConst = 'new_regions'; export function DiffReviewPage(props) { - const { captureId, method, pathId } = props; + const { captureId, method, pathId, viewer } = props; const classes = useStyles(); const { rfcId, rfcService } = useContext(RfcContext); @@ -112,9 +112,9 @@ export function DiffReviewPage(props) { useEffect(() => { if (showFinalize || (completed && regions.empty)) { - track("Rendered Finalize Card") + track('Rendered Finalize Card'); } - }, [showFinalize, completed, regions.empty]) + }, [showFinalize, completed, regions.empty]); return (
@@ -224,6 +224,7 @@ export function DiffReviewPage(props) { )} completed={completed} tab={currentTab} + viewer={viewer} /> )}
diff --git a/workspaces/ui/src/components/diff/v2/DiffViewSimulation.js b/workspaces/ui/src/components/diff/v2/DiffViewSimulation.js index 8426f79eaa..bfa262d272 100644 --- a/workspaces/ui/src/components/diff/v2/DiffViewSimulation.js +++ b/workspaces/ui/src/components/diff/v2/DiffViewSimulation.js @@ -8,6 +8,7 @@ import { import SimulatedCommandContext from '../SimulatedCommandContext'; import { RfcContext, withRfcContext } from '../../../contexts/RfcContext'; import DiffHunkViewer from './DiffHunkViewer'; +import ShapeViewer from './shape_viewers/ShapeViewer'; class _DiffViewSimulation extends React.Component { shouldComponentUpdate(nextProps, nextState, nextContext) { @@ -40,6 +41,7 @@ class _DiffViewSimulation extends React.Component { selectedInterpretation, rfcId, eventStore, + viewer, } = this.props; const renderKey = 'render ' + diff.diff.toString() + interactionScala.uuid; @@ -61,22 +63,39 @@ class _DiffViewSimulation extends React.Component { {({ rfcService, rfcId }) => { const currentRfcState = rfcService.currentState(rfcId); - console.time('Making preview ' + renderKey); - const preview = DiffResultHelper.previewDiff( - diff, - interactionScala, - currentRfcState - ); - console.timeEnd('Making preview ' + renderKey); + if (viewer === 'flattened') { + console.time('Making preview ' + renderKey); + let preview = getOrUndefined( + DiffResultHelper.previewDiff( + diff, + interactionScala, + currentRfcState + ) + ); + console.timeEnd('Making preview ' + renderKey); - return ( - - ); + return ( + + ); + } else { + console.time('Making preview ' + renderKey); + let preview = DiffResultHelper.previewDiff( + diff, + interactionScala, + currentRfcState + ); + console.timeEnd('Making preview ' + renderKey); + return ( + + ); + } }}