App: Show under construction page if getversion fails

src/App.js

@@ -5,11 +5,16 @@ import { connect } from 'react-redux';
 import { Routes } from './Routes';
 import './App.scss';
 
+import api from './api.js';
+import PermissionDenied from './PresentationalComponents/LandingPage/PermissionDenied';
+
 class App extends Component {
     constructor() {
         super();
 
-        this.state = {};
+        this.state = {
+            permission: true,
+        };
     }
 
     componentDidMount () {
@@ -19,6 +24,13 @@ class App extends Component {
         insights.chrome.auth.getUser().then(data => {
             this.setState({ identity: data.identity });
         });
+
+        api.getVersion().then(() => {
+            this.setState({ permission: true });
+        }).catch(() => {
+            this.setState({ permission: false });
+        });
+
     }
 
     componentWillUnmount () {
@@ -28,7 +40,7 @@ class App extends Component {
     render () {
         return (
             <React.Fragment>
-                <Routes childProps={ this.props } />
+                { this.state.permission ? <Routes childProps={ this.props } /> : <PermissionDenied /> }
             </React.Fragment>
         );
     }

src/PresentationalComponents/LandingPage/PermissionDenied.js

@@ -0,0 +1,22 @@
+import React from 'react';
+
+import { InfoCircleIcon } from '@patternfly/react-icons';
+import { EmptyState, EmptyStateVariant, EmptyStateIcon, EmptyStateBody, Title } from '@patternfly/react-core';
+
+const PermissionDenied = () => {
+    return (
+        <EmptyState variant={ EmptyStateVariant.large } data-testid="empty-state-denied">
+            <EmptyStateIcon icon={ InfoCircleIcon } />
+            <Title headingLevel="h4" size="lg">
+            Image Builder is not quite ready
+            </Title>
+            <EmptyStateBody>
+            Image Builder is in early development and not ready for use yet.
+            If you&apos;re interested in trying it out once it reaches beta,
+            there will be a contact form up soon to notify anyone who signs up.
+            </EmptyStateBody>
+        </EmptyState>
+    );
+};
+
+export default PermissionDenied;

src/api.js

@@ -17,7 +17,14 @@ async function getComposeStatus(id) {
     return request.data;
 }
 
+async function getVersion() {
+    let path = '/version';
+    const request = await axios.get(IMAGE_BUILDER_API.concat(path));
+    return request.data;
+}
+
 export default {
     composeImage,
     getComposeStatus,
+    getVersion,
 };

src/test/SmartComponents/LandingPage/LandingPage.test.js

@@ -2,16 +2,19 @@ import React from 'react';
 import { screen } from '@testing-library/react';
 import { renderWithReduxRouter } from '../../testUtils';
 import LandingPage from '../../../SmartComponents/LandingPage/LandingPage';
+import api from '../../../api.js';
 
 describe('Landing Page', () => {
-    beforeEach(() => {
+    beforeEach(async () => {
         renderWithReduxRouter(<LandingPage />);
     });
-    test('renders page heading', () => {
+    test('renders page heading', async () => {
+        const composeImage = jest.spyOn(api, 'getVersion');
+        composeImage.mockResolvedValue({ version: '1.0' });
         // check heading
         screen.getByRole('heading', { name: /images/i });
     });
-    test('renders EmptyState child component', () => {
+    test('renders EmptyState child component', async () => {
         // check action loads
         screen.getByTestId('create-image-action');
         // check table loads