Implement flattened-rows rendering ShapeViewer behind feature flag

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
+REACT_APP_TESTING_DASHBOARD_UNDOCUMENTED_ENDPOINTS=false
+REACT_APP_FLATTENED_SHAPE_VIEWER=false

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
+REACT_APP_TESTING_DASHBOARD_UNDOCUMENTED_ENDPOINTS=true
+REACT_APP_FLATTENED_SHAPE_VIEWER=false

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() {

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' && (
+        <Route
+          exact
+          path={routerPaths.captureRequestDiffsRootWithViewer}
+          component={RequestDiffWrapper}
+        />
+      )}
       {captures.length && (
         <Redirect to={`${baseUrl}/diffs/${captures[0].captureId}`} />
       )}
@@ -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);
                       }}
                     >
                       <div className={classes.listItemInner}>

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 {
         <DiffReviewExpandedCached
           captureId={captureId}
           key={selectedDiff.diff.toString()}
+          viewer={viewer}
           {...{ selectedDiff, setSelectedDiff: this.setSelectedDiff }}
         />
       </div>

workspaces/ui/src/components/diff/v2/DiffHunkViewer.js

@@ -1,26 +1,31 @@
 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 { getOrUndefined } 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 (
-    <ShapeRenderStore shape={preview} diff={diff} diffDescription={diffDescription} suggestion={suggestion} exampleOnly={exampleOnly}>
-      <DiffViewer shape={shape}/>
+    <ShapeRenderStore
+      shape={preview}
+      diff={diff}
+      diffDescription={diffDescription}
+      suggestion={suggestion}
+      exampleOnly={exampleOnly}
+    >
+      <DiffViewer shape={shape} />
     </ShapeRenderStore>
   );
 }

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 (
     <CaptureSessionInlineContext
@@ -53,8 +54,12 @@ function DiffPageNew(props) {
         inContextOfDiff={true}
         notFound={<Redirect to={`${baseUrl}/diffs`} />}
       >
-        {/*<DiffPageContent captureId={captureId} />*/}
-        <DiffReviewPage captureId={captureId} pathId={pathId} method={method} />
+        <DiffReviewPage
+          captureId={captureId}
+          pathId={pathId}
+          method={method}
+          viewer={viewer}
+        />
       </EndpointsContextStore>
     </CaptureSessionInlineContext>
   );

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 (
       <DiffReviewExpanded
         diff={selectedDiff}
         captureId={captureId}
+        viewer={viewer}
         {...{ selectedDiff, setSelectedDiff }}
       />
     );
@@ -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 (
     <ShapeExpandedStore>
       <div>
@@ -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}
                   />
                 </ShapeBox>
               }
@@ -245,6 +254,7 @@ export const DiffReviewExpanded = (props) => {
                     body={interactionScala.response.body}
                     outerRfcState={outerRfcState}
                     selectedInterpretation={selectedInterpretation}
+                    viewer={viewer}
                   />
                 </ShapeBox>
               }

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 (
     <div className={classes.container}>
@@ -224,6 +224,7 @@ export function DiffReviewPage(props) {
               )}
               completed={completed}
               tab={currentTab}
+              viewer={viewer}
             />
           )}
         </div>

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 (
-                  <DiffHunkViewer
-                    suggestion={selectedInterpretation}
-                    diff={diff}
-                    preview={getOrUndefined(preview)}
-                    diffDescription={description}
-                  />
-                );
+                  return (
+                    <ShapeViewer
+                      shape={preview && getOrUndefined(preview.getRootShape)}
+                    />
+                  );
+                } else {
+                  console.time('Making preview ' + renderKey);
+                  let preview = DiffResultHelper.previewDiff(
+                    diff,
+                    interactionScala,
+                    currentRfcState
+                  );
+                  console.timeEnd('Making preview ' + renderKey);
+                  return (
+                    <DiffHunkViewer
+                      suggestion={selectedInterpretation}
+                      diff={diff}
+                      preview={getOrUndefined(preview)}
+                      diffDescription={description}
+                    />
+                  );
+                }
               }}
             </RfcContext.Consumer>
           </SimulatedCommandContext>