Add basic routing for templates

src/screens/Template/Template.jsx

@@ -0,0 +1,103 @@
+import React, { Component, Fragment } 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 CardCloseButton from '@components/CardCloseButton';
+import ContentError from '@components/ContentError';
+import RoutedTabs from '@components/RoutedTabs';
+import { JobTemplatesAPI } from '@api';
+
+class Template extends Component {
+  constructor (props) {
+    super(props);
+    this.state = {
+      contentError: false,
+      contentLoading: true,
+      template: {}
+    };
+    this.readTemplate = this.readTemplate.bind(this);
+  }
+
+  componentDidMount () {
+    this.readTemplate();
+  }
+
+  async readTemplate () {
+    const { setBreadcrumb, match } = this.props;
+    const { id } = match.params;
+    try {
+      const { data } = await JobTemplatesAPI.readDetail(id);
+      setBreadcrumb(data);
+      this.setState({ template: data });
+    } catch {
+      this.setState({ contentError: true });
+    } finally {
+      this.setState({ contentLoading: false });
+    }
+  }
+
+  render () {
+    const { match, i18n, history } = this.props;
+    const { contentLoading, template, contentError } = this.state;
+
+    const tabsArray = [
+      { name: i18n._(t`Details`), link: `${match.url}/details`, id: 0 },
+      { name: i18n._(t`Access`), link: '/home', id: 1 },
+      { name: i18n._(t`Notification`), link: '/home', id: 2 },
+      { name: i18n._(t`Schedules`), link: '/home', id: 3 },
+      { name: i18n._(t`Completed Jobs`), link: '/home', id: 4 },
+      { name: i18n._(t`Survey`), link: '/home', id: 5 }
+    ];
+    const cardHeader = (contentLoading ? null
+      : (
+        <CardHeader style={{ padding: 0 }}>
+          <Fragment>
+            <div css="display: flex;">
+              <RoutedTabs
+                history={history}
+                tabsArray={tabsArray}
+              />
+              <CardCloseButton linkTo="/templates" />
+            </div>
+          </Fragment>
+        </CardHeader>
+      )
+    );
+
+    if (!contentLoading && contentError) {
+      return (
+        <PageSection>
+          <Card className="awx-c-card">
+            <ContentError />
+          </Card>
+        </PageSection>
+      );
+    }
+    return (
+      <PageSection>
+        <Card className="awx-c-card">
+          { cardHeader }
+          <Switch>
+            <Redirect
+              from="/templates/:templateType/:id"
+              to="/templates/:templateType/:id/details"
+              exact
+            />
+            {template && (
+              <Route
+                path="/templates/:templateType/:id/details"
+                render={() => (
+                  <span>Coming soon!</span>
+                )}
+              />
+            )}
+          </Switch>
+        </Card>
+      </PageSection>
+    );
+  }
+}
+export { Template as _Template };
+export default withI18n()(withRouter(Template));