From c28a903e8aab1e1a8e3b11d8b08d22b55d2b1328 Mon Sep 17 00:00:00 2001
From: Jaap Rood <jaap@jaaprood.nl>
Date: Wed, 3 Jun 2020 12:28:30 +0200
Subject: [PATCH 1/2] Disable EndpointDetails route through new feature flag

---
 workspaces/ui/.env                                  |  3 ++-
 workspaces/ui/.env.development                      |  3 ++-
 .../src/components/dashboards/TestingDashboard.js   | 13 ++++++++-----
 3 files changed, 12 insertions(+), 7 deletions(-)

diff --git a/workspaces/ui/.env b/workspaces/ui/.env
index 400f50e392..6a76f8dc78 100644
--- a/workspaces/ui/.env
+++ b/workspaces/ui/.env
@@ -1,2 +1,3 @@
 REACT_APP_TESTING_DASHBOARD=false
-REACT_APP_TESTING_DASHBOARD_TEASER=false
\ No newline at end of file
+REACT_APP_TESTING_DASHBOARD_TEASER=false
+REACT_APP_TESTING_DASHBOARD_ENDPOINT_DETAILS=false
\ No newline at end of file
diff --git a/workspaces/ui/.env.development b/workspaces/ui/.env.development
index 92247e9df8..df72e65434 100644
--- a/workspaces/ui/.env.development
+++ b/workspaces/ui/.env.development
@@ -1,2 +1,3 @@
 REACT_APP_TESTING_DASHBOARD=true
-REACT_APP_TESTING_DASHBOARD_TEASER=false
\ No newline at end of file
+REACT_APP_TESTING_DASHBOARD_TEASER=false
+REACT_APP_TESTING_DASHBOARD_ENDPOINT_DETAILS=true
\ No newline at end of file
diff --git a/workspaces/ui/src/components/dashboards/TestingDashboard.js b/workspaces/ui/src/components/dashboards/TestingDashboard.js
index cbb6df029d..62911fa477 100644
--- a/workspaces/ui/src/components/dashboards/TestingDashboard.js
+++ b/workspaces/ui/src/components/dashboards/TestingDashboard.js
@@ -80,11 +80,14 @@ export default function TestingDashboardPage(props) {
             {hasCaptures ? (
               <div className={classes.reportContainer}>
                 <Switch>
-                  <Route
-                    strict
-                    path={routerPaths.testingEndpointDetails}
-                    component={TestingDashboard}
-                  />
+                  {process.env.REACT_APP_TESTING_DASHBOARD_ENDPOINT_DETAILS ===
+                    'true' && (
+                    <Route
+                      strict
+                      path={routerPaths.testingEndpointDetails}
+                      component={TestingDashboard}
+                    />
+                  )}
                   <Route
                     strict
                     path={routerPaths.testingCapture}

From a0c49b2bbf91a0accaf2ef6ad427eb932fd52f6a Mon Sep 17 00:00:00 2001
From: Jaap Rood <jaap@jaaprood.nl>
Date: Wed, 3 Jun 2020 12:38:18 +0200
Subject: [PATCH 2/2] Only render links to endpoint details route when feature
 flag for it is enabled

---
 .../src/components/testing/ReportSummary.js   | 147 ++++++++++--------
 1 file changed, 78 insertions(+), 69 deletions(-)

diff --git a/workspaces/ui/src/components/testing/ReportSummary.js b/workspaces/ui/src/components/testing/ReportSummary.js
index 4917c658b5..e9da9bdd50 100644
--- a/workspaces/ui/src/components/testing/ReportSummary.js
+++ b/workspaces/ui/src/components/testing/ReportSummary.js
@@ -115,83 +115,92 @@ export default function ReportSummary(props) {
 
       {endpoints.length > 0 ? (
         <ul className={classes.endpointsList} onClick={onClickList}>
-          {endpoints.map((endpoint) => (
-            <li
-              key={endpoint.id}
-              className={classNames(classes.endpointsListItem, {
-                [classes.isCurrent]:
-                  currentEndpointId && endpoint.id === currentEndpointId,
-              })}
-            >
-              <Card className={classes.endpointCard}>
-                <ReportEndpointLink
-                  replace
-                  className={classes.endpointLink}
-                  captureId={captureId}
-                  endpointId={endpoint.id}
+          {endpoints.map((endpoint) => {
+            const endpointHeader = (
+              <div className={classes.endpointHeader}>
+                <span
+                  className={classNames(
+                    classes.endpointMethod,
+                    classesHttpMethods[endpoint.descriptor.httpMethod]
+                  )}
                 >
-                  <div className={classes.endpointHeader}>
+                  {endpoint.descriptor.httpMethod}
+                </span>
+                <code className={classes.endpointPath}>
+                  {endpoint.descriptor.fullPath}
+                </code>
+
+                <div className={classes.endpointStats}>
+                  {endpoint.counts.diffs > 0 && (
                     <span
                       className={classNames(
-                        classes.endpointMethod,
-                        classesHttpMethods[endpoint.descriptor.httpMethod]
+                        classes.endpointChip,
+                        classes.endpointDiffsChip
                       )}
                     >
-                      {endpoint.descriptor.httpMethod}
+                      <strong>{endpoint.counts.diffs}</strong>
+                      {endpoint.counts.diffs > 1 ? ' diffs' : ' diff'}
                     </span>
-                    <code className={classes.endpointPath}>
-                      {endpoint.descriptor.fullPath}
-                    </code>
-
-                    <div className={classes.endpointStats}>
-                      {endpoint.counts.diffs > 0 && (
-                        <span
-                          className={classNames(
-                            classes.endpointChip,
-                            classes.endpointDiffsChip
-                          )}
-                        >
-                          <strong>{endpoint.counts.diffs}</strong>
-                          {endpoint.counts.diffs > 1 ? ' diffs' : ' diff'}
-                        </span>
+                  )}
+                  {endpoint.counts.incompliant > 0 ? (
+                    <span
+                      className={classNames(
+                        classes.endpointChip,
+                        classes.endpointIncompliantChip
                       )}
-                      {endpoint.counts.incompliant > 0 ? (
-                        <span
-                          className={classNames(
-                            classes.endpointChip,
-                            classes.endpointIncompliantChip
-                          )}
-                        >
-                          <strong>
-                            {endpoint.counts.incompliant}/
-                            {endpoint.counts.interactions}
-                          </strong>
-                          {' incompliant'}
-                        </span>
-                      ) : (
-                        <span
-                          className={classNames(
-                            classes.endpointChip,
-                            classes.endpointCompliantChip
-                          )}
-                        >
-                          <strong>
-                            {endpoint.counts.compliant}/
-                            {endpoint.counts.interactions}
-                          </strong>
-                          {' compliant'}
-                        </span>
+                    >
+                      <strong>
+                        {endpoint.counts.incompliant}/
+                        {endpoint.counts.interactions}
+                      </strong>
+                      {' incompliant'}
+                    </span>
+                  ) : (
+                    <span
+                      className={classNames(
+                        classes.endpointChip,
+                        classes.endpointCompliantChip
                       )}
-                    </div>
-                  </div>
-                </ReportEndpointLink>
-
-                {currentEndpointId && endpoint.id === currentEndpointId && (
-                  <EndpointReport endpoint={endpoint} captureId={captureId} />
-                )}
-              </Card>
-            </li>
-          ))}
+                    >
+                      <strong>
+                        {endpoint.counts.compliant}/
+                        {endpoint.counts.interactions}
+                      </strong>
+                      {' compliant'}
+                    </span>
+                  )}
+                </div>
+              </div>
+            );
+            return (
+              <li
+                key={endpoint.id}
+                className={classNames(classes.endpointsListItem, {
+                  [classes.isCurrent]:
+                    currentEndpointId && endpoint.id === currentEndpointId,
+                })}
+              >
+                <Card className={classes.endpointCard}>
+                  {process.env.REACT_APP_TESTING_DASHBOARD_ENDPOINT_DETAILS ===
+                  'true' ? (
+                    <ReportEndpointLink
+                      replace
+                      className={classes.endpointLink}
+                      captureId={captureId}
+                      endpointId={endpoint.id}
+                    >
+                      {endpointHeader}
+                    </ReportEndpointLink>
+                  ) : (
+                    <div className={classes.endpointLink}>{endpointHeader}</div>
+                  )}
+                  {currentEndpointId && endpoint.id === currentEndpointId && (
+                    <EndpointReport endpoint={endpoint} captureId={captureId} />
+                  )}
+                </Card>
+              </li>
+            );
+          })}
         </ul>
       ) : (
         // @TODO: revisit this empty state