Adds TemplateList of Project

awx/ui_next/src/screens/Project/ProjectJobTemplates/ProjectJobTemplates.jsx

@@ -1,10 +1,9 @@
-import React, { Component } from 'react';
-import { CardBody } from '@components/Card';
+import React from 'react';
+import { withRouter } from 'react-router-dom';
+import TemplateList from '../../Template/TemplateList/TemplateList';
 
-class ProjectJobTemplates extends Component {
-  render() {
-    return <CardBody>Coming soon :)</CardBody>;
-  }
+function ProjectJobTemplates() {
+  return <TemplateList />;
 }
 
-export default ProjectJobTemplates;
+export default withRouter(ProjectJobTemplates);

awx/ui_next/src/screens/Template/TemplateList/TemplateList.jsx

@@ -109,12 +109,14 @@ class TemplatesList extends Component {
   }
 
   async loadTemplates() {
-    const { location } = this.props;
+    const { location, match } = this.props;
     const {
       jtActions: cachedJTActions,
       wfjtActions: cachedWFJTActions,
     } = this.state;
-    const params = parseQueryString(QS_CONFIG, location.search);
+    const params = {
+      ...parseQueryString(QS_CONFIG, location.search),
+    };
 
     let jtOptionsPromise;
     if (cachedJTActions) {
@@ -133,6 +135,9 @@ class TemplatesList extends Component {
     } else {
       wfjtOptionsPromise = WorkflowJobTemplatesAPI.readOptions();
     }
+    if (match.url.startsWith('/projects') && match.params.id) {
+      params.jobtemplate__project = match.params.id;
+    }
 
     const promises = Promise.all([
       UnifiedJobTemplatesAPI.read(params),
@@ -189,13 +194,13 @@ class TemplatesList extends Component {
     if (canAddJT) {
       addButtonOptions.push({
         label: i18n._(t`Template`),
-        url: `${match.url}/job_template/add/`,
+        url: `/templates/job_template/add/`,
       });
     }
     if (canAddWFJT) {
       addButtonOptions.push({
         label: i18n._(t`Workflow Template`),
-        url: `${match.url}/workflow_job_template/add/`,
+        url: `/templates/workflow_job_template/add/`,
       });
     }
     const isAllSelected =
@@ -204,7 +209,7 @@ class TemplatesList extends Component {
       <AddDropDownButton key="add" dropdownItems={addButtonOptions} />
     );
     return (
-      <PageSection>
+      <>
         <Card>
           <PaginatedDataList
             contentError={contentError}
@@ -292,7 +297,7 @@ class TemplatesList extends Component {
           {i18n._(t`Failed to delete one or more templates.`)}
           <ErrorDetail error={deletionError} />
         </AlertModal>
-      </PageSection>
+      </>
     );
   }
 }

awx/ui_next/src/screens/Template/TemplateList/TemplatesList.test.jsx

@@ -1,4 +1,6 @@
 import React from 'react';
+import { createMemoryHistory } from 'history';
+import { Route } from 'react-router-dom';
 import {
   JobTemplatesAPI,
   UnifiedJobTemplatesAPI,
@@ -229,4 +231,38 @@ describe('<TemplatesList />', () => {
 
     done();
   });
+  test('Calls API with jobtemplate__project id', async () => {
+    const history = createMemoryHistory({
+      initialEntries: ['/projects/6/job_templates'],
+    });
+    const wrapper = mountWithContexts(
+      <Route
+        path="/projects/:id/job_templates"
+        component={() => <TemplatesList />}
+      />,
+      {
+        context: {
+          router: {
+            history,
+            route: {
+              location: history.location,
+              match: { params: { id: 6 } },
+            },
+          },
+        },
+      }
+    );
+    await waitForElement(
+      wrapper,
+      'TemplatesList',
+      el => el.state('hasContentLoading') === true
+    );
+    expect(UnifiedJobTemplatesAPI.read).toBeCalledWith({
+      jobtemplate__project: '6',
+      order_by: 'name',
+      page: 1,
+      page_size: 20,
+      type: 'job_template,workflow_job_template',
+    });
+  });
 });