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));

src/screens/Template/TemplateList/TemplateListItem.jsx

@@ -44,7 +44,7 @@ class TemplateListItem extends Component {
             <DataListCell key="divider">
               <VerticalSeparator />
               <span>
-                <Link to="/home">
+                <Link to={`/templates/${template.type}/${template.id}`}>
                   <b>{template.name}</b>
                 </Link>
               </span>

src/screens/Template/Templates.jsx

@@ -3,9 +3,11 @@ import { withI18n } from '@lingui/react';
 import { t } from '@lingui/macro';
 import { Route, withRouter, Switch } from 'react-router-dom';
 
+import { Config } from '@contexts/Config';
 import Breadcrumbs from '@components/Breadcrumbs/Breadcrumbs';
 
 import { TemplateList } from './TemplateList';
+import Template from './Template';
 
 class Templates extends Component {
   constructor (props) {
@@ -19,13 +21,41 @@ class Templates extends Component {
     };
   }
 
+  setBreadCrumbConfig = (template) => {
+    const { i18n } = this.props;
+    if (!template) {
+      return;
+    }
+    const breadcrumbConfig = {
+      '/templates': i18n._(t`Templates`),
+      [`/templates/${template.type}/${template.id}/details`]: i18n._(t`${template.name} Details`)
+    };
+    this.setState({ breadcrumbConfig });
+  }
+
   render () {
-    const { match } = this.props;
+    const { match, history, location } = this.props;
     const { breadcrumbConfig } = this.state;
     return (
       <Fragment>
         <Breadcrumbs breadcrumbConfig={breadcrumbConfig} />
         <Switch>
+          <Route
+            path={`${match.path}/:templateType/:id`}
+            render={({ match: newRouteMatch }) => (
+              <Config>
+                {({ me }) => (
+                  <Template
+                    history={history}
+                    location={location}
+                    setBreadcrumb={this.setBreadCrumbConfig}
+                    me={me || {}}
+                    match={newRouteMatch}
+                  />
+                )}
+              </Config>
+            )}
+          />
           <Route
             path={`${match.path}`}
             render={() => (