Merge remote-tracking branch 'oss-upstream/develop' into develop

opticdev · Jun 3, 2020 · e4f9666 · e4f9666
2 parents 99c73cd + bf97d5a
commit e4f9666
Show file tree

Hide file tree

Showing 11 changed files with 118 additions and 55 deletions.
diff --git a/workspaces/agent-cli/src/config.ts b/workspaces/agent-cli/src/config.ts
@@ -2,8 +2,7 @@ import urljoin from 'url-join';
 
 const apiPathPrefix = '/api/v1';
 const apiBaseUrl = urljoin(
-  process.env.OPTIC_LOCAL_CLI__API_GATEWAY ||
-    'https://k2shife0j5.execute-api.us-east-1.amazonaws.com/stage',
+  process.env.OPTIC_LOCAL_CLI__API_GATEWAY || 'https://api.opticnerve.net',
   apiPathPrefix
 );
 const Config = {

diff --git a/workspaces/ci-cli/src/config.ts b/workspaces/ci-cli/src/config.ts
@@ -2,8 +2,7 @@ import urljoin from 'url-join';
 
 const apiPathPrefix = '/api/v1';
 const apiBaseUrl = urljoin(
-  process.env.OPTIC_LOCAL_CLI__API_GATEWAY ||
-    'https://k2shife0j5.execute-api.us-east-1.amazonaws.com/stage',
+  process.env.OPTIC_LOCAL_CLI__API_GATEWAY || 'https://api.opticnerve.net',
   apiPathPrefix
 );
 const Config = {

diff --git a/workspaces/cli-client/src/spec-service-client.ts b/workspaces/cli-client/src/spec-service-client.ts
@@ -88,4 +88,12 @@ export class Client implements ISpecService {
       `${this.baseUrl}/specs/${this.specId}/testing-credentials`
     );
   }
+
+  async getEnabledFeatures() {
+    const response = await this.getTestingCredentials();
+
+    return {
+      TESTING_DASHBOARD: response.status >= 200 && response.status <= 299,
+    };
+  }
 }
diff --git a/workspaces/local-cli/src/config.ts b/workspaces/local-cli/src/config.ts
@@ -2,8 +2,7 @@ import urljoin from 'url-join';
 
 const apiPathPrefix = '/api/v1';
 const apiBaseUrl = urljoin(
-  process.env.OPTIC_LOCAL_CLI__API_GATEWAY ||
-    'https://k2shife0j5.execute-api.us-east-1.amazonaws.com/stage',
+  process.env.OPTIC_LOCAL_CLI__API_GATEWAY || 'https://api.opticnerve.net',
   apiPathPrefix
 );
 const Config = {

diff --git a/workspaces/ui/.env b/workspaces/ui/.env
@@ -1,4 +1,3 @@
-REACT_APP_TESTING_DASHBOARD=false
 REACT_APP_TESTING_DASHBOARD_TEASER=false
 REACT_APP_TESTING_DASHBOARD_ENDPOINT_DETAILS=false
 REACT_APP_TESTING_DASHBOARD_ENDPOINT_DIFF_STATS=false

diff --git a/workspaces/ui/.env.development b/workspaces/ui/.env.development
@@ -1,4 +1,3 @@
-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

diff --git a/workspaces/ui/src/components/dashboards/TestingDashboard.js b/workspaces/ui/src/components/dashboards/TestingDashboard.js
@@ -80,14 +80,11 @@ export default function TestingDashboardPage(props) {
             {hasCaptures ? (
               <div className={classes.reportContainer}>
                 <Switch>
-                  {process.env.REACT_APP_TESTING_DASHBOARD_ENDPOINT_DETAILS ===
-                    'true' && (
-                    <Route
-                      strict
-                      path={routerPaths.testingEndpointDetails}
-                      component={TestingDashboard}
-                    />
-                  )}
+                  <Route
+                    strict
+                    path={routerPaths.testingEndpointDetails}
+                    component={TestingDashboard}
+                  />
                   <Route
                     strict
                     path={routerPaths.testingCapture}
@@ -104,30 +101,7 @@ export default function TestingDashboardPage(props) {
                 </Switch>
               </div>
             ) : (
-              <div className={classes.setup}>
-                <div className={classes.setupInstructions}>
-                  <h3>No live captures have been found yet.</h3>
-
-                  <p>
-                    For help getting started with Live Contract Testing,
-                    <SetupLink>contact the maintainers</SetupLink>.
-                  </p>
-
-                  <p>
-                    Think this might not be right? Feel free to{' '}
-                    <a
-                      href={SupportLinks.Contact(
-                        'Problem: No live captures found'
-                      )}
-                    >
-                      contact us about it
-                    </a>
-                    .
-                  </p>
-                </div>
-
-                <TestingPromo />
-              </div>
+              <TestingDashboardSetup assertion="No live captures have been found yet." />
             )}
           </div>
         </Page.Body>
@@ -136,6 +110,47 @@ export default function TestingDashboardPage(props) {
   );
 }
 
+export function TestingDashboardSetupPage() {
+  return (
+    <Page title="Live Contracting Dashboard">
+      <Page.Navbar mini={true} />
+
+      <Page.Body padded={false}>
+        <TestingDashboardSetup />
+      </Page.Body>
+    </Page>
+  );
+}
+
+function TestingDashboardSetup({ assertion }) {
+  const classes = useStyles();
+
+  if (!assertion) assertion = 'Live Contract Testing has not been setup yet.';
+
+  return (
+    <div className={classes.setup}>
+      <div className={classes.setupInstructions}>
+        <h3>{assertion}</h3>
+
+        <p>
+          For help on how to get started with Live Contract Testing, see{' '}
+          <SetupLink>the setup instructions</SetupLink>.
+        </p>
+
+        <p>
+          Think this might not be right? Feel free to{' '}
+          <a href={SupportLinks.Contact(`Problem: ${assertion}`)}>
+            contact us about it
+          </a>
+          .
+        </p>
+      </div>
+
+      <TestingPromo />
+    </div>
+  );
+}
+
 export function TestingDashboard(props) {
   const { captureId, endpointId } = props.match.params;
   const {

diff --git a/workspaces/ui/src/components/loaders/ApiLoader.js b/workspaces/ui/src/components/loaders/ApiLoader.js
@@ -152,6 +152,12 @@ async function createExampleSpecServiceFactory(data) {
       requestExamples.push(interaction);
       examples[requestId] = requestExamples;
     },
+
+    getEnabledFeatures() {
+      return {
+        TESTING_DASHBOARD: true,
+      };
+    },
   };
 
   return { specService };

diff --git a/workspaces/ui/src/components/loaders/TestingDashboardLoader.js b/workspaces/ui/src/components/loaders/TestingDashboardLoader.js
@@ -1,7 +1,12 @@
 import React, { useEffect, useState } from 'react';
-import TestingDashboard from '../dashboards/TestingDashboard';
+import TestingDashboard, {
+  TestingDashboardSetupPage,
+} from '../dashboards/TestingDashboard';
 import { useMockData } from '../../contexts/MockDataContext';
-import { useSpecService } from '../../contexts/SpecServiceContext';
+import {
+  useSpecService,
+  useEnabledFeatures,
+} from '../../contexts/SpecServiceContext';
 
 import { createExampleTestingService } from '../../services/testing/ExampleTestingService';
 import { TestingService } from '../../services/testing/TestingService';
@@ -12,9 +17,15 @@ export default function TestingServiceLoader(props) {
 
   const [service, setService] = useState(null);
   const specService = useSpecService();
+  const enabledFeatures = useEnabledFeatures();
 
   useEffect(() => {
-    if (debugData.available && debugData.loading) return; // wait until next time when example data has been fetched
+    if (
+      (debugData.available && debugData.loading) || // wait until next time when example data has been fetched
+      !enabledFeatures ||
+      !enabledFeatures.TESTING_DASHBOARD // don't setup if we're not sure testing is enabled
+    )
+      return;
 
     const serviceFactory = debugData.available
       ? () => createExampleTestingServiceFactory(debugData.data)
@@ -31,6 +42,10 @@ export default function TestingServiceLoader(props) {
     task();
   }, [debugData.available, debugData.loading, specService]);
 
+  if (enabledFeatures && !enabledFeatures.TESTING_DASHBOARD) {
+    return <TestingDashboardSetupPage />;
+  }
+
   return <TestingDashboard service={service} {...props} />;
 }
 

diff --git a/workspaces/ui/src/components/navigation/Navbar.js b/workspaces/ui/src/components/navigation/Navbar.js
@@ -1,7 +1,8 @@
-import React, { useMemo } from 'react';
+import React, { useMemo, useState } from 'react';
 import Drawer from '@material-ui/core/Drawer';
 import { makeStyles } from '@material-ui/core/styles';
 import { useRouterPaths } from '../../RouterPaths';
+import { useEnabledFeatures } from '../../contexts/SpecServiceContext';
 import { Link } from 'react-router-dom';
 import IconButton from '@material-ui/core/IconButton';
 import DescriptionIcon from '@material-ui/icons/Description';
@@ -55,6 +56,8 @@ export default function Navbar(props) {
   const classes = useStyles();
   const routerPaths = useRouterPaths();
 
+  const enabledFeatures = useEnabledFeatures();
+
   const menuItems = useMemo(
     () => [
       {
@@ -67,8 +70,7 @@ export default function Navbar(props) {
         icon: <DescriptionIcon style={{ color: '#e2e2e2' }} />,
         link: routerPaths.docsRoot,
       },
-      ...(process.env.REACT_APP_TESTING_DASHBOARD === 'true' ||
-      process.env.REACT_APP_TESTING_DASHBOARD_TEASER === 'true'
+      ...(enabledFeatures && enabledFeatures.TESTING_DASHBOARD
         ? [
             {
               name: 'Live Contract Testing',

diff --git a/workspaces/ui/src/contexts/SpecServiceContext.js b/workspaces/ui/src/contexts/SpecServiceContext.js
@@ -1,44 +1,66 @@
-import React, {useContext} from 'react';
-import {GenericContextFactory} from './GenericContextFactory';
+import React, { useContext, useEffect, useState } from 'react';
+import { GenericContextFactory } from './GenericContextFactory';
 
 const {
   Context: SpecServiceContext,
-  withContext: withSpecServiceContext
+  withContext: withSpecServiceContext,
 } = GenericContextFactory(null);
 
 class SpecServiceStore extends React.Component {
+  state = { enabledFeatures: null };
 
   componentDidMount() {
-    const {specService, specServiceEvents} = this.props;
+    const { specService, specServiceEvents } = this.props;
     if (!specServiceEvents) {
       console.warn('I need specServiceEvents');
-      debugger
+      debugger;
     } else {
       specServiceEvents.on('events-updated', () => {
         this.forceUpdate();
       });
     }
+
+    const determineEnabledFeatures = async () => {
+      const enabledFeatures = await specService.getEnabledFeatures();
+
+      this.setState({ enabledFeatures });
+    };
+
+    determineEnabledFeatures();
   }
 
   render() {
-    const {specService} = this.props;
+    const { specService } = this.props;
+    const { enabledFeatures } = this.state;
 
     return (
-      <SpecServiceContext.Provider value={{specService}}>
+      <SpecServiceContext.Provider value={{ specService, enabledFeatures }}>
         {this.props.children}
       </SpecServiceContext.Provider>
     );
   }
 }
 
 function useSpecService() {
-  const {specService} = useContext(SpecServiceContext);
+  const { specService } = useContext(SpecServiceContext);
   return specService;
 }
 
+function useEnabledFeatures() {
+  const specContext = useContext(SpecServiceContext);
+
+  if (!specContext)
+    throw Error(
+      'useEnabledFeatures can only be used inside SpecServiceContext'
+    );
+
+  return specContext.enabledFeatures;
+}
+
 export {
   withSpecServiceContext,
   SpecServiceContext,
   SpecServiceStore,
-  useSpecService
+  useSpecService,
+  useEnabledFeatures,
 };