Add template edit form skeleton

src/screens/Template/Template.jsx

@@ -1,37 +1,73 @@
 import React, { Component } from 'react';
 import { t } from '@lingui/macro';
 import { withI18n } from '@lingui/react';
-import { Card, CardHeader, PageSection } from '@patternfly/react-core';
-import { Switch, Route, Redirect, withRouter } from 'react-router-dom';
-
+import {
+  Card,
+  CardHeader,
+  PageSection,
+} from '@patternfly/react-core';
+import {
+  Switch,
+  Route,
+  Redirect,
+  withRouter,
+} from 'react-router-dom';
 import CardCloseButton from '@components/CardCloseButton';
 import ContentError from '@components/ContentError';
 import RoutedTabs from '@components/RoutedTabs';
 import JobTemplateDetail from './JobTemplateDetail';
 import { JobTemplatesAPI } from '@api';
+import TemplateEdit from './TemplateEdit';
 
 class Template extends Component {
   constructor (props) {
     super(props);
+
     this.state = {
       hasContentError: false,
       hasContentLoading: true,
-      template: {}
+      template: null,
+      actions: null,
     };
-    this.readTemplate = this.readTemplate.bind(this);
+    this.loadTemplate = this.loadTemplate.bind(this);
   }
 
-  componentDidMount () {
-    this.readTemplate();
+  async componentDidMount () {
+    await this.loadTemplate();
   }
 
-  async readTemplate () {
+  async componentDidUpdate (prevProps) {
+    const { location } = this.props;
+    if (location !== prevProps.location) {
+      await this.loadTemplate();
+    }
+  }
+
+  async loadTemplate () {
+    const { actions: cachedActions } = this.state;
     const { setBreadcrumb, match } = this.props;
     const { id } = match.params;
+
+    let optionsPromise;
+    if (cachedActions) {
+      optionsPromise = Promise.resolve({ data: { actions: cachedActions } });
+    } else {
+      optionsPromise = JobTemplatesAPI.readOptions();
+    }
+
+    const promises = Promise.all([
+      JobTemplatesAPI.readDetail(id),
+      optionsPromise
+    ]);
+
+    this.setState({ hasContentError: false, hasContentLoading: true });
     try {
-      const { data } = await JobTemplatesAPI.readDetail(id);
+      const [{ data }, { data: { actions } }] = await promises;
       setBreadcrumb(data);
-      this.setState({ template: data });
+      this.setState({
+        template: data,
+        actions
+      });
     } catch {
       this.setState({ hasContentError: true });
     } finally {
@@ -40,8 +76,21 @@ class Template extends Component {
   }
 
   render () {
-    const { match, i18n, history } = this.props;
-    const { hasContentLoading, template, hasContentError } = this.state;
+    const {
+      history,
+      i18n,
+      location,
+      match,
+    } = this.props;
+
+    const {
+      actions,
+      hasContentError,
+      hasContentLoading,
+      template
+    } = this.state;
+
+    const canAdd = actions && Object.prototype.hasOwnProperty.call(actions, 'POST');
 
     const tabsArray = [
       { name: i18n._(t`Details`), link: `${match.url}/details`, id: 0 },
@@ -51,7 +100,8 @@ class Template extends Component {
       { name: i18n._(t`Completed Jobs`), link: '/home', id: 4 },
       { name: i18n._(t`Survey`), link: '/home', id: 5 }
     ];
-    const cardHeader = (hasContentLoading ? null
+
+    let cardHeader = (hasContentLoading ? null
       : (
         <CardHeader style={{ padding: 0 }}>
           <RoutedTabs
@@ -63,6 +113,10 @@ class Template extends Component {
       )
     );
 
+    if (location.pathname.endsWith('edit')) {
+      cardHeader = null;
+    }
+
     if (!hasContentLoading && hasContentError) {
       return (
         <PageSection>
@@ -94,11 +148,23 @@ class Template extends Component {
                 )}
               />
             )}
+            {template && (
+              <Route
+                path="/templates/:templateType/:id/edit"
+                render={() => (
+                  <TemplateEdit
+                    template={template}
+                    hasPermissions={canAdd}
+                  />
+                )}
+              />
+            )}
           </Switch>
         </Card>
       </PageSection>
     );
   }
 }
+
 export { Template as _Template };
 export default withI18n()(withRouter(Template));