From d02364a8338a141a0da5b6e7f4349fdf20eab70e Mon Sep 17 00:00:00 2001
From: mabashian <mabashia@redhat.com>
Date: Mon, 28 Oct 2019 14:50:48 -0400
Subject: [PATCH 1/4] Configures access tabs for job template, project,
 inventory and smart inventory details views.

---
 awx/ui_next/src/api/models/Inventories.js     |  6 ++++
 awx/ui_next/src/api/models/JobTemplates.js    |  5 ++++
 awx/ui_next/src/api/models/Projects.js        |  5 ++++
 .../DeleteRoleConfirmationModal.jsx           |  8 ++---
 .../DeleteRoleConfirmationModal.test.jsx      |  0
 .../ResourceAccessList.jsx}                   | 27 +++++++----------
 .../ResourceAccessList.test.jsx}              | 30 +++++++++----------
 .../ResourceAccessListItem.jsx}               |  4 +--
 .../ResourceAccessListItem.test.jsx}          |  8 ++---
 .../DeleteRoleConfirmationModal.test.jsx.snap |  4 +--
 .../ResourceAccessListItem.test.jsx.snap}     | 22 +++++++-------
 .../components/ResourceAccessList/index.js    |  5 ++++
 .../src/screens/Inventory/Inventory.jsx       | 11 +++++--
 .../InventoryAccess/InventoryAccess.jsx       | 10 -------
 .../Inventory/InventoryAccess/index.js        |  1 -
 .../src/screens/Inventory/SmartInventory.jsx  |  9 ++++--
 .../SmartInventoryAccess.jsx                  | 10 -------
 .../Inventory/SmartInventoryAccess/index.js   |  1 -
 .../src/screens/Organization/Organization.jsx |  7 +++--
 .../Organization/OrganizationAccess/index.js  |  5 ----
 awx/ui_next/src/screens/Project/Project.jsx   |  9 ++++--
 .../Project/ProjectAccess/ProjectAccess.jsx   | 10 -------
 .../screens/Project/ProjectAccess/index.js    |  1 -
 awx/ui_next/src/screens/Template/Template.jsx | 15 +++++++++-
 24 files changed, 109 insertions(+), 104 deletions(-)
 rename awx/ui_next/src/{screens/Organization/OrganizationAccess => components/ResourceAccessList}/DeleteRoleConfirmationModal.jsx (88%)
 rename awx/ui_next/src/{screens/Organization/OrganizationAccess => components/ResourceAccessList}/DeleteRoleConfirmationModal.test.jsx (100%)
 rename awx/ui_next/src/{screens/Organization/OrganizationAccess/OrganizationAccess.jsx => components/ResourceAccessList/ResourceAccessList.jsx} (89%)
 rename awx/ui_next/src/{screens/Organization/OrganizationAccess/OrganizationAccess.test.jsx => components/ResourceAccessList/ResourceAccessList.test.jsx} (84%)
 rename awx/ui_next/src/{screens/Organization/OrganizationAccess/OrganizationAccessItem.jsx => components/ResourceAccessList/ResourceAccessListItem.jsx} (97%)
 rename awx/ui_next/src/{screens/Organization/OrganizationAccess/OrganizationAccessItem.test.jsx => components/ResourceAccessList/ResourceAccessListItem.test.jsx} (78%)
 rename awx/ui_next/src/{screens/Organization/OrganizationAccess => components/ResourceAccessList}/__snapshots__/DeleteRoleConfirmationModal.test.jsx.snap (98%)
 rename awx/ui_next/src/{screens/Organization/OrganizationAccess/__snapshots__/OrganizationAccessItem.test.jsx.snap => components/ResourceAccessList/__snapshots__/ResourceAccessListItem.test.jsx.snap} (98%)
 create mode 100644 awx/ui_next/src/components/ResourceAccessList/index.js
 delete mode 100644 awx/ui_next/src/screens/Inventory/InventoryAccess/InventoryAccess.jsx
 delete mode 100644 awx/ui_next/src/screens/Inventory/InventoryAccess/index.js
 delete mode 100644 awx/ui_next/src/screens/Inventory/SmartInventoryAccess/SmartInventoryAccess.jsx
 delete mode 100644 awx/ui_next/src/screens/Inventory/SmartInventoryAccess/index.js
 delete mode 100644 awx/ui_next/src/screens/Organization/OrganizationAccess/index.js
 delete mode 100644 awx/ui_next/src/screens/Project/ProjectAccess/ProjectAccess.jsx
 delete mode 100644 awx/ui_next/src/screens/Project/ProjectAccess/index.js

diff --git a/awx/ui_next/src/api/models/Inventories.js b/awx/ui_next/src/api/models/Inventories.js
index 9c9f86754a..cdd30d4e6f 100644
--- a/awx/ui_next/src/api/models/Inventories.js
+++ b/awx/ui_next/src/api/models/Inventories.js
@@ -4,6 +4,12 @@ class Inventories extends Base {
   constructor(http) {
     super(http);
     this.baseUrl = '/api/v2/inventories/';
+
+    this.readAccessList = this.readAccessList.bind(this);
+  }
+
+  readAccessList(id, params) {
+    return this.http.get(`${this.baseUrl}${id}/access_list/`, { params });
   }
 }
 
diff --git a/awx/ui_next/src/api/models/JobTemplates.js b/awx/ui_next/src/api/models/JobTemplates.js
index 1587f6c86b..cec450ce0d 100644
--- a/awx/ui_next/src/api/models/JobTemplates.js
+++ b/awx/ui_next/src/api/models/JobTemplates.js
@@ -12,6 +12,7 @@ class JobTemplates extends InstanceGroupsMixin(NotificationsMixin(Base)) {
     this.associateLabel = this.associateLabel.bind(this);
     this.disassociateLabel = this.disassociateLabel.bind(this);
     this.readCredentials = this.readCredentials.bind(this);
+    this.readAccessList = this.readAccessList.bind(this);
     this.generateLabel = this.generateLabel.bind(this);
   }
 
@@ -57,6 +58,10 @@ class JobTemplates extends InstanceGroupsMixin(NotificationsMixin(Base)) {
       disassociate: true,
     });
   }
+
+  readAccessList(id, params) {
+    return this.http.get(`${this.baseUrl}${id}/access_list/`, { params });
+  }
 }
 
 export default JobTemplates;
diff --git a/awx/ui_next/src/api/models/Projects.js b/awx/ui_next/src/api/models/Projects.js
index 3af665f2cb..742150e5aa 100644
--- a/awx/ui_next/src/api/models/Projects.js
+++ b/awx/ui_next/src/api/models/Projects.js
@@ -7,11 +7,16 @@ class Projects extends LaunchUpdateMixin(NotificationsMixin(Base)) {
     super(http);
     this.baseUrl = '/api/v2/projects/';
 
+    this.readAccessList = this.readAccessList.bind(this);
     this.readPlaybooks = this.readPlaybooks.bind(this);
     this.readSync = this.readSync.bind(this);
     this.sync = this.sync.bind(this);
   }
 
+  readAccessList(id, params) {
+    return this.http.get(`${this.baseUrl}${id}/access_list/`, { params });
+  }
+
   readPlaybooks(id) {
     return this.http.get(`${this.baseUrl}${id}/playbooks/`);
   }
diff --git a/awx/ui_next/src/screens/Organization/OrganizationAccess/DeleteRoleConfirmationModal.jsx b/awx/ui_next/src/components/ResourceAccessList/DeleteRoleConfirmationModal.jsx
similarity index 88%
rename from awx/ui_next/src/screens/Organization/OrganizationAccess/DeleteRoleConfirmationModal.jsx
rename to awx/ui_next/src/components/ResourceAccessList/DeleteRoleConfirmationModal.jsx
index 4c5aaaa69a..11b5e4a21f 100644
--- a/awx/ui_next/src/screens/Organization/OrganizationAccess/DeleteRoleConfirmationModal.jsx
+++ b/awx/ui_next/src/components/ResourceAccessList/DeleteRoleConfirmationModal.jsx
@@ -39,7 +39,7 @@ class DeleteRoleConfirmationModal extends React.Component {
           <Button
             key="delete"
             variant="danger"
-            aria-label="Confirm delete"
+            aria-label={i18n._(t`Confirm delete`)}
             onClick={onConfirm}
           >
             {i18n._(t`Delete`)}
@@ -57,11 +57,7 @@ class DeleteRoleConfirmationModal extends React.Component {
             <br />
             <br />
             {i18n._(
-              t`If you ${(
-                <b>
-                  <i>only</i>
-                </b>
-              )} want to remove access for this particular user, please remove them from the team.`
+              t`If you only want to remove access for this particular user, please remove them from the team.`
             )}
           </Fragment>
         ) : (
diff --git a/awx/ui_next/src/screens/Organization/OrganizationAccess/DeleteRoleConfirmationModal.test.jsx b/awx/ui_next/src/components/ResourceAccessList/DeleteRoleConfirmationModal.test.jsx
similarity index 100%
rename from awx/ui_next/src/screens/Organization/OrganizationAccess/DeleteRoleConfirmationModal.test.jsx
rename to awx/ui_next/src/components/ResourceAccessList/DeleteRoleConfirmationModal.test.jsx
diff --git a/awx/ui_next/src/screens/Organization/OrganizationAccess/OrganizationAccess.jsx b/awx/ui_next/src/components/ResourceAccessList/ResourceAccessList.jsx
similarity index 89%
rename from awx/ui_next/src/screens/Organization/OrganizationAccess/OrganizationAccess.jsx
rename to awx/ui_next/src/components/ResourceAccessList/ResourceAccessList.jsx
index 534a278524..68ad3fe60d 100644
--- a/awx/ui_next/src/screens/Organization/OrganizationAccess/OrganizationAccess.jsx
+++ b/awx/ui_next/src/components/ResourceAccessList/ResourceAccessList.jsx
@@ -3,7 +3,7 @@ import { withRouter } from 'react-router-dom';
 import { withI18n } from '@lingui/react';
 import { t } from '@lingui/macro';
 
-import { OrganizationsAPI, TeamsAPI, UsersAPI } from '@api';
+import { TeamsAPI, UsersAPI } from '@api';
 import AddResourceRole from '@components/AddRole/AddResourceRole';
 import AlertModal from '@components/AlertModal';
 import DataListToolbar from '@components/DataListToolbar';
@@ -11,10 +11,9 @@ import PaginatedDataList, {
   ToolbarAddButton,
 } from '@components/PaginatedDataList';
 import { getQSConfig, encodeQueryString, parseQueryString } from '@util/qs';
-import { Organization } from '@types';
 
 import DeleteRoleConfirmationModal from './DeleteRoleConfirmationModal';
-import OrganizationAccessItem from './OrganizationAccessItem';
+import ResourceAccessListItem from './ResourceAccessListItem';
 
 const QS_CONFIG = getQSConfig('access', {
   page: 1,
@@ -22,11 +21,7 @@ const QS_CONFIG = getQSConfig('access', {
   order_by: 'first_name',
 });
 
-class OrganizationAccess extends React.Component {
-  static propTypes = {
-    organization: Organization.isRequired,
-  };
-
+class ResourceAccessList extends React.Component {
   constructor(props) {
     super(props);
     this.state = {
@@ -65,14 +60,14 @@ class OrganizationAccess extends React.Component {
   }
 
   async loadAccessList() {
-    const { organization, location } = this.props;
+    const { apiModel, resource, location } = this.props;
     const params = parseQueryString(QS_CONFIG, location.search);
 
     this.setState({ contentError: null, hasContentLoading: true });
     try {
       const {
         data: { results: accessRecords = [], count: itemCount = 0 },
-      } = await OrganizationsAPI.readAccessList(organization.id, params);
+      } = await apiModel.readAccessList(resource.id, params);
       this.setState({ itemCount, accessRecords });
     } catch (err) {
       this.setState({ contentError: err });
@@ -143,7 +138,7 @@ class OrganizationAccess extends React.Component {
   }
 
   render() {
-    const { organization, i18n } = this.props;
+    const { resource, i18n } = this.props;
     const {
       accessRecords,
       contentError,
@@ -154,7 +149,7 @@ class OrganizationAccess extends React.Component {
       itemCount,
       isAddModalOpen,
     } = this.state;
-    const canEdit = organization.summary_fields.user_capabilities.edit;
+    const canEdit = resource.summary_fields.user_capabilities.edit;
     const isDeleteModalOpen =
       !hasContentLoading && !hasDeletionError && deletionRole;
 
@@ -204,7 +199,7 @@ class OrganizationAccess extends React.Component {
             />
           )}
           renderItem={accessRecord => (
-            <OrganizationAccessItem
+            <ResourceAccessListItem
               key={accessRecord.id}
               accessRecord={accessRecord}
               onRoleDelete={this.handleDeleteOpen}
@@ -215,7 +210,7 @@ class OrganizationAccess extends React.Component {
           <AddResourceRole
             onClose={this.handleAddClose}
             onSave={this.handleAddSuccess}
-            roles={organization.summary_fields.object_roles}
+            roles={resource.summary_fields.object_roles}
           />
         )}
         {isDeleteModalOpen && (
@@ -239,5 +234,5 @@ class OrganizationAccess extends React.Component {
   }
 }
 
-export { OrganizationAccess as _OrganizationAccess };
-export default withI18n()(withRouter(OrganizationAccess));
+export { ResourceAccessList as _ResourceAccessList };
+export default withI18n()(withRouter(ResourceAccessList));
diff --git a/awx/ui_next/src/screens/Organization/OrganizationAccess/OrganizationAccess.test.jsx b/awx/ui_next/src/components/ResourceAccessList/ResourceAccessList.test.jsx
similarity index 84%
rename from awx/ui_next/src/screens/Organization/OrganizationAccess/OrganizationAccess.test.jsx
rename to awx/ui_next/src/components/ResourceAccessList/ResourceAccessList.test.jsx
index eb0c1b8564..61dfa38723 100644
--- a/awx/ui_next/src/screens/Organization/OrganizationAccess/OrganizationAccess.test.jsx
+++ b/awx/ui_next/src/components/ResourceAccessList/ResourceAccessList.test.jsx
@@ -5,11 +5,11 @@ import { mountWithContexts, waitForElement } from '@testUtils/enzymeHelpers';
 
 import { OrganizationsAPI, TeamsAPI, UsersAPI } from '@api';
 
-import OrganizationAccess from './OrganizationAccess';
+import ResourceAccessList from './ResourceAccessList';
 
 jest.mock('@api');
 
-describe('<OrganizationAccess />', () => {
+describe('<ResourceAccessList />', () => {
   const organization = {
     id: 1,
     name: 'Default',
@@ -83,33 +83,33 @@ describe('<OrganizationAccess />', () => {
 
   test('initially renders succesfully', () => {
     const wrapper = mountWithContexts(
-      <OrganizationAccess organization={organization} />
+      <ResourceAccessList resource={organization} apiModel={OrganizationsAPI} />
     );
     expect(wrapper.find('PaginatedDataList')).toHaveLength(1);
   });
 
   test('should fetch and display access records on mount', async done => {
     const wrapper = mountWithContexts(
-      <OrganizationAccess organization={organization} />
+      <ResourceAccessList resource={organization} apiModel={OrganizationsAPI} />
     );
     await waitForElement(
       wrapper,
-      'OrganizationAccessItem',
+      'ResourceAccessListItem',
       el => el.length === 2
     );
     expect(wrapper.find('PaginatedDataList').prop('items')).toEqual(
       data.results
     );
-    expect(wrapper.find('OrganizationAccess').state('hasContentLoading')).toBe(
+    expect(wrapper.find('ResourceAccessList').state('hasContentLoading')).toBe(
       false
     );
-    expect(wrapper.find('OrganizationAccess').state('contentError')).toBe(null);
+    expect(wrapper.find('ResourceAccessList').state('contentError')).toBe(null);
     done();
   });
 
   test('should open confirmation dialog when deleting role', async done => {
     const wrapper = mountWithContexts(
-      <OrganizationAccess organization={organization} />
+      <ResourceAccessList resource={organization} apiModel={OrganizationsAPI} />
     );
     await sleep(0);
     wrapper.update();
@@ -118,7 +118,7 @@ describe('<OrganizationAccess />', () => {
     button.prop('onClick')();
     wrapper.update();
 
-    const component = wrapper.find('OrganizationAccess');
+    const component = wrapper.find('ResourceAccessList');
     expect(component.state('deletionRole')).toEqual(
       data.results[0].summary_fields.direct_access[0].role
     );
@@ -129,7 +129,7 @@ describe('<OrganizationAccess />', () => {
 
   it('should close dialog when cancel button clicked', async done => {
     const wrapper = mountWithContexts(
-      <OrganizationAccess organization={organization} />
+      <ResourceAccessList resource={organization} apiModel={OrganizationsAPI} />
     );
     await sleep(0);
     wrapper.update();
@@ -138,7 +138,7 @@ describe('<OrganizationAccess />', () => {
     wrapper.update();
 
     wrapper.find('DeleteRoleConfirmationModal').prop('onCancel')();
-    const component = wrapper.find('OrganizationAccess');
+    const component = wrapper.find('ResourceAccessList');
     expect(component.state('deletionRole')).toBeNull();
     expect(component.state('deletionRecord')).toBeNull();
     expect(TeamsAPI.disassociateRole).not.toHaveBeenCalled();
@@ -148,7 +148,7 @@ describe('<OrganizationAccess />', () => {
 
   it('should delete user role', async done => {
     const wrapper = mountWithContexts(
-      <OrganizationAccess organization={organization} />
+      <ResourceAccessList resource={organization} apiModel={OrganizationsAPI} />
     );
     const button = await waitForElement(
       wrapper,
@@ -170,7 +170,7 @@ describe('<OrganizationAccess />', () => {
 
     await sleep(0);
     wrapper.update();
-    const component = wrapper.find('OrganizationAccess');
+    const component = wrapper.find('ResourceAccessList');
     expect(component.state('deletionRole')).toBeNull();
     expect(component.state('deletionRecord')).toBeNull();
     expect(TeamsAPI.disassociateRole).not.toHaveBeenCalled();
@@ -181,7 +181,7 @@ describe('<OrganizationAccess />', () => {
 
   it('should delete team role', async done => {
     const wrapper = mountWithContexts(
-      <OrganizationAccess organization={organization} />
+      <ResourceAccessList resource={organization} apiModel={OrganizationsAPI} />
     );
     const button = await waitForElement(
       wrapper,
@@ -203,7 +203,7 @@ describe('<OrganizationAccess />', () => {
 
     await sleep(0);
     wrapper.update();
-    const component = wrapper.find('OrganizationAccess');
+    const component = wrapper.find('ResourceAccessList');
     expect(component.state('deletionRole')).toBeNull();
     expect(component.state('deletionRecord')).toBeNull();
     expect(TeamsAPI.disassociateRole).toHaveBeenCalledWith(5, 3);
diff --git a/awx/ui_next/src/screens/Organization/OrganizationAccess/OrganizationAccessItem.jsx b/awx/ui_next/src/components/ResourceAccessList/ResourceAccessListItem.jsx
similarity index 97%
rename from awx/ui_next/src/screens/Organization/OrganizationAccess/OrganizationAccessItem.jsx
rename to awx/ui_next/src/components/ResourceAccessList/ResourceAccessListItem.jsx
index 80198b9cdf..ae89bebb20 100644
--- a/awx/ui_next/src/screens/Organization/OrganizationAccess/OrganizationAccessItem.jsx
+++ b/awx/ui_next/src/components/ResourceAccessList/ResourceAccessListItem.jsx
@@ -22,7 +22,7 @@ const DataListItemCells = styled(PFDataListItemCells)`
   align-items: start;
 `;
 
-class OrganizationAccessItem extends React.Component {
+class ResourceAccessListItem extends React.Component {
   static propTypes = {
     accessRecord: AccessRecord.isRequired,
     onRoleDelete: func.isRequired,
@@ -132,4 +132,4 @@ class OrganizationAccessItem extends React.Component {
   }
 }
 
-export default withI18n()(OrganizationAccessItem);
+export default withI18n()(ResourceAccessListItem);
diff --git a/awx/ui_next/src/screens/Organization/OrganizationAccess/OrganizationAccessItem.test.jsx b/awx/ui_next/src/components/ResourceAccessList/ResourceAccessListItem.test.jsx
similarity index 78%
rename from awx/ui_next/src/screens/Organization/OrganizationAccess/OrganizationAccessItem.test.jsx
rename to awx/ui_next/src/components/ResourceAccessList/ResourceAccessListItem.test.jsx
index 5c10a6edcf..203564d0d0 100644
--- a/awx/ui_next/src/screens/Organization/OrganizationAccess/OrganizationAccessItem.test.jsx
+++ b/awx/ui_next/src/components/ResourceAccessList/ResourceAccessListItem.test.jsx
@@ -2,7 +2,7 @@ import React from 'react';
 
 import { mountWithContexts } from '@testUtils/enzymeHelpers';
 
-import OrganizationAccessItem from './OrganizationAccessItem';
+import ResourceAccessListItem from './ResourceAccessListItem';
 
 const accessRecord = {
   id: 2,
@@ -28,14 +28,14 @@ const accessRecord = {
   },
 };
 
-describe('<OrganizationAccessItem />', () => {
+describe('<ResourceAccessListItem />', () => {
   test('initially renders succesfully', () => {
     const wrapper = mountWithContexts(
-      <OrganizationAccessItem
+      <ResourceAccessListItem
         accessRecord={accessRecord}
         onRoleDelete={() => {}}
       />
     );
-    expect(wrapper.find('OrganizationAccessItem')).toMatchSnapshot();
+    expect(wrapper.find('ResourceAccessListItem')).toMatchSnapshot();
   });
 });
diff --git a/awx/ui_next/src/screens/Organization/OrganizationAccess/__snapshots__/DeleteRoleConfirmationModal.test.jsx.snap b/awx/ui_next/src/components/ResourceAccessList/__snapshots__/DeleteRoleConfirmationModal.test.jsx.snap
similarity index 98%
rename from awx/ui_next/src/screens/Organization/OrganizationAccess/__snapshots__/DeleteRoleConfirmationModal.test.jsx.snap
rename to awx/ui_next/src/components/ResourceAccessList/__snapshots__/DeleteRoleConfirmationModal.test.jsx.snap
index 5ba7c12b16..2579a66af2 100644
--- a/awx/ui_next/src/screens/Organization/OrganizationAccess/__snapshots__/DeleteRoleConfirmationModal.test.jsx.snap
+++ b/awx/ui_next/src/components/ResourceAccessList/__snapshots__/DeleteRoleConfirmationModal.test.jsx.snap
@@ -211,7 +211,7 @@ exports[`<DeleteRoleConfirmationModal /> should render initially 1`] = `
                     Are you sure you want to remove {0} access from {1}?  Doing so affects all members of the team.
                     <br />
                     <br />
-                    If you {0} want to remove access for this particular user, please remove them from the team.
+                    If you only want to remove access for this particular user, please remove them from the team.
                     <svg
                       aria-hidden="true"
                       class="at-c-alertModal__icon"
@@ -422,7 +422,7 @@ exports[`<DeleteRoleConfirmationModal /> should render initially 1`] = `
                           Are you sure you want to remove {0} access from {1}?  Doing so affects all members of the team.
                           <br />
                           <br />
-                          If you {0} want to remove access for this particular user, please remove them from the team.
+                          If you only want to remove access for this particular user, please remove them from the team.
                           <ExclamationCircleIcon
                             className="at-c-alertModal__icon"
                             color="currentColor"
diff --git a/awx/ui_next/src/screens/Organization/OrganizationAccess/__snapshots__/OrganizationAccessItem.test.jsx.snap b/awx/ui_next/src/components/ResourceAccessList/__snapshots__/ResourceAccessListItem.test.jsx.snap
similarity index 98%
rename from awx/ui_next/src/screens/Organization/OrganizationAccess/__snapshots__/OrganizationAccessItem.test.jsx.snap
rename to awx/ui_next/src/components/ResourceAccessList/__snapshots__/ResourceAccessListItem.test.jsx.snap
index 639c7e768d..d404aaf693 100644
--- a/awx/ui_next/src/screens/Organization/OrganizationAccess/__snapshots__/OrganizationAccessItem.test.jsx.snap
+++ b/awx/ui_next/src/components/ResourceAccessList/__snapshots__/ResourceAccessListItem.test.jsx.snap
@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`<OrganizationAccessItem /> initially renders succesfully 1`] = `
-<OrganizationAccessItem
+exports[`<ResourceAccessListItem /> initially renders succesfully 1`] = `
+<ResourceAccessListItem
   accessRecord={
     Object {
       "first_name": "jane",
@@ -47,7 +47,7 @@ exports[`<OrganizationAccessItem /> initially renders succesfully 1`] = `
         <div
           className="pf-c-data-list__item-row"
         >
-          <OrganizationAccessItem__DataListItemCells
+          <ResourceAccessListItem__DataListItemCells
             dataListCells={
               Array [
                 <DataListCell>
@@ -157,17 +157,17 @@ exports[`<OrganizationAccessItem /> initially renders succesfully 1`] = `
                   "$$typeof": Symbol(react.forward_ref),
                   "attrs": Array [],
                   "componentStyle": ComponentStyle {
-                    "componentId": "OrganizationAccessItem__DataListItemCells-sc-1b9e0ad-0",
+                    "componentId": "ResourceAccessListItem__DataListItemCells-a3r9sq-0",
                     "isStatic": true,
-                    "lastClassName": "QeteT",
+                    "lastClassName": "WzRoT",
                     "rules": Array [
                       "align-items:start;",
                     ],
                   },
-                  "displayName": "OrganizationAccessItem__DataListItemCells",
+                  "displayName": "ResourceAccessListItem__DataListItemCells",
                   "foldedComponentIds": Array [],
                   "render": [Function],
-                  "styledComponentId": "OrganizationAccessItem__DataListItemCells-sc-1b9e0ad-0",
+                  "styledComponentId": "ResourceAccessListItem__DataListItemCells-a3r9sq-0",
                   "target": [Function],
                   "toString": [Function],
                   "warnTooManyClasses": [Function],
@@ -178,7 +178,7 @@ exports[`<OrganizationAccessItem /> initially renders succesfully 1`] = `
               rowid="access-list-item"
             >
               <DataListItemCells
-                className="OrganizationAccessItem__DataListItemCells-sc-1b9e0ad-0 QeteT"
+                className="ResourceAccessListItem__DataListItemCells-a3r9sq-0 WzRoT"
                 dataListCells={
                   Array [
                     <DataListCell>
@@ -232,7 +232,7 @@ exports[`<OrganizationAccessItem /> initially renders succesfully 1`] = `
                 rowid="access-list-item"
               >
                 <div
-                  className="pf-c-data-list__item-content OrganizationAccessItem__DataListItemCells-sc-1b9e0ad-0 QeteT"
+                  className="pf-c-data-list__item-content ResourceAccessListItem__DataListItemCells-a3r9sq-0 WzRoT"
                 >
                   <DataListCell
                     key="name"
@@ -887,10 +887,10 @@ exports[`<OrganizationAccessItem /> initially renders succesfully 1`] = `
                 </div>
               </DataListItemCells>
             </StyledComponent>
-          </OrganizationAccessItem__DataListItemCells>
+          </ResourceAccessListItem__DataListItemCells>
         </div>
       </DataListItemRow>
     </li>
   </DataListItem>
-</OrganizationAccessItem>
+</ResourceAccessListItem>
 `;
diff --git a/awx/ui_next/src/components/ResourceAccessList/index.js b/awx/ui_next/src/components/ResourceAccessList/index.js
new file mode 100644
index 0000000000..1993e74cba
--- /dev/null
+++ b/awx/ui_next/src/components/ResourceAccessList/index.js
@@ -0,0 +1,5 @@
+export { default as ResourceAccessList } from './ResourceAccessList';
+export { default as ResourceAccessListItem } from './ResourceAccessListItem';
+export {
+  default as DeleteRoleConfirmationModal,
+} from './DeleteRoleConfirmationModal';
diff --git a/awx/ui_next/src/screens/Inventory/Inventory.jsx b/awx/ui_next/src/screens/Inventory/Inventory.jsx
index e1398e5ea5..44d281f320 100644
--- a/awx/ui_next/src/screens/Inventory/Inventory.jsx
+++ b/awx/ui_next/src/screens/Inventory/Inventory.jsx
@@ -6,12 +6,12 @@ import { Switch, Route, Redirect, withRouter, Link } from 'react-router-dom';
 import CardCloseButton from '@components/CardCloseButton';
 import ContentError from '@components/ContentError';
 import RoutedTabs from '@components/RoutedTabs';
+import { ResourceAccessList } from '@components/ResourceAccessList';
 import InventoryDetail from './InventoryDetail';
-import InventoryAccess from './InventoryAccess';
 import InventoryHosts from './InventoryHosts';
 import InventoryGroups from './InventoryGroups';
-import InventorySources from './InventorySources';
 import InventoryCompletedJobs from './InventoryCompletedJobs';
+import InventorySources from './InventorySources';
 import { InventoriesAPI } from '@api';
 import InventoryEdit from './InventoryEdit';
 
@@ -137,7 +137,12 @@ class Inventory extends Component {
               <Route
                 key="access"
                 path="/inventories/inventory/:id/access"
-                render={() => <InventoryAccess inventory={inventory} />}
+                render={() => (
+                  <ResourceAccessList
+                    resource={inventory}
+                    apiModel={InventoriesAPI}
+                  />
+                )}
               />,
               <Route
                 key="groups"
diff --git a/awx/ui_next/src/screens/Inventory/InventoryAccess/InventoryAccess.jsx b/awx/ui_next/src/screens/Inventory/InventoryAccess/InventoryAccess.jsx
deleted file mode 100644
index 328483ce7d..0000000000
--- a/awx/ui_next/src/screens/Inventory/InventoryAccess/InventoryAccess.jsx
+++ /dev/null
@@ -1,10 +0,0 @@
-import React, { Component } from 'react';
-import { CardBody } from '@patternfly/react-core';
-
-class InventoryAccess extends Component {
-  render() {
-    return <CardBody>Coming soon :)</CardBody>;
-  }
-}
-
-export default InventoryAccess;
diff --git a/awx/ui_next/src/screens/Inventory/InventoryAccess/index.js b/awx/ui_next/src/screens/Inventory/InventoryAccess/index.js
deleted file mode 100644
index 153f828893..0000000000
--- a/awx/ui_next/src/screens/Inventory/InventoryAccess/index.js
+++ /dev/null
@@ -1 +0,0 @@
-export { default } from './InventoryAccess';
diff --git a/awx/ui_next/src/screens/Inventory/SmartInventory.jsx b/awx/ui_next/src/screens/Inventory/SmartInventory.jsx
index aacce2a14a..2acd518b2c 100644
--- a/awx/ui_next/src/screens/Inventory/SmartInventory.jsx
+++ b/awx/ui_next/src/screens/Inventory/SmartInventory.jsx
@@ -6,8 +6,8 @@ import { Switch, Route, Redirect, withRouter, Link } from 'react-router-dom';
 import CardCloseButton from '@components/CardCloseButton';
 import ContentError from '@components/ContentError';
 import RoutedTabs from '@components/RoutedTabs';
+import { ResourceAccessList } from '@components/ResourceAccessList';
 import SmartInventoryDetail from './SmartInventoryDetail';
-import SmartInventoryAccess from './SmartInventoryAccess';
 import SmartInventoryHosts from './SmartInventoryHosts';
 import SmartInventoryCompletedJobs from './SmartInventoryCompletedJobs';
 import { InventoriesAPI } from '@api';
@@ -132,7 +132,12 @@ class SmartInventory extends Component {
               <Route
                 key="access"
                 path="/inventories/smart_inventory/:id/access"
-                render={() => <SmartInventoryAccess inventory={inventory} />}
+                render={() => (
+                  <ResourceAccessList
+                    resource={inventory}
+                    apiModel={InventoriesAPI}
+                  />
+                )}
               />,
               <Route
                 key="hosts"
diff --git a/awx/ui_next/src/screens/Inventory/SmartInventoryAccess/SmartInventoryAccess.jsx b/awx/ui_next/src/screens/Inventory/SmartInventoryAccess/SmartInventoryAccess.jsx
deleted file mode 100644
index bccaa7c7ca..0000000000
--- a/awx/ui_next/src/screens/Inventory/SmartInventoryAccess/SmartInventoryAccess.jsx
+++ /dev/null
@@ -1,10 +0,0 @@
-import React, { Component } from 'react';
-import { CardBody } from '@patternfly/react-core';
-
-class SmartInventoryAccess extends Component {
-  render() {
-    return <CardBody>Coming soon :)</CardBody>;
-  }
-}
-
-export default SmartInventoryAccess;
diff --git a/awx/ui_next/src/screens/Inventory/SmartInventoryAccess/index.js b/awx/ui_next/src/screens/Inventory/SmartInventoryAccess/index.js
deleted file mode 100644
index a013b55783..0000000000
--- a/awx/ui_next/src/screens/Inventory/SmartInventoryAccess/index.js
+++ /dev/null
@@ -1 +0,0 @@
-export { default } from './SmartInventoryAccess';
diff --git a/awx/ui_next/src/screens/Organization/Organization.jsx b/awx/ui_next/src/screens/Organization/Organization.jsx
index f0ef864cb0..8bbbdbc828 100644
--- a/awx/ui_next/src/screens/Organization/Organization.jsx
+++ b/awx/ui_next/src/screens/Organization/Organization.jsx
@@ -12,7 +12,7 @@ import CardCloseButton from '@components/CardCloseButton';
 import RoutedTabs from '@components/RoutedTabs';
 import ContentError from '@components/ContentError';
 import NotificationList from '@components/NotificationList/NotificationList';
-import { OrganizationAccess } from './OrganizationAccess';
+import { ResourceAccessList } from '@components/ResourceAccessList';
 import OrganizationDetail from './OrganizationDetail';
 import OrganizationEdit from './OrganizationEdit';
 import OrganizationTeams from './OrganizationTeams';
@@ -216,7 +216,10 @@ class Organization extends Component {
               <Route
                 path="/organizations/:id/access"
                 render={() => (
-                  <OrganizationAccess organization={organization} />
+                  <ResourceAccessList
+                    resource={organization}
+                    apiModel={OrganizationsAPI}
+                  />
                 )}
               />
             )}
diff --git a/awx/ui_next/src/screens/Organization/OrganizationAccess/index.js b/awx/ui_next/src/screens/Organization/OrganizationAccess/index.js
deleted file mode 100644
index e6e4c2c884..0000000000
--- a/awx/ui_next/src/screens/Organization/OrganizationAccess/index.js
+++ /dev/null
@@ -1,5 +0,0 @@
-export { default as OrganizationAccess } from './OrganizationAccess';
-export { default as OrganizationAccessItem } from './OrganizationAccessItem';
-export {
-  default as DeleteRoleConfirmationModal,
-} from './DeleteRoleConfirmationModal';
diff --git a/awx/ui_next/src/screens/Project/Project.jsx b/awx/ui_next/src/screens/Project/Project.jsx
index 362fb3d22c..eb0cd3ebce 100644
--- a/awx/ui_next/src/screens/Project/Project.jsx
+++ b/awx/ui_next/src/screens/Project/Project.jsx
@@ -12,7 +12,7 @@ import CardCloseButton from '@components/CardCloseButton';
 import RoutedTabs from '@components/RoutedTabs';
 import ContentError from '@components/ContentError';
 import NotificationList from '@components/NotificationList';
-import ProjectAccess from './ProjectAccess';
+import { ResourceAccessList } from '@components/ResourceAccessList';
 import ProjectDetail from './ProjectDetail';
 import ProjectEdit from './ProjectEdit';
 import ProjectJobTemplates from './ProjectJobTemplates';
@@ -222,7 +222,12 @@ class Project extends Component {
             {project && (
               <Route
                 path="/projects/:id/access"
-                render={() => <ProjectAccess project={project} />}
+                render={() => (
+                  <ResourceAccessList
+                    resource={project}
+                    apiModel={ProjectsAPI}
+                  />
+                )}
               />
             )}
             {canSeeNotificationsTab && (
diff --git a/awx/ui_next/src/screens/Project/ProjectAccess/ProjectAccess.jsx b/awx/ui_next/src/screens/Project/ProjectAccess/ProjectAccess.jsx
deleted file mode 100644
index 18365a9bf5..0000000000
--- a/awx/ui_next/src/screens/Project/ProjectAccess/ProjectAccess.jsx
+++ /dev/null
@@ -1,10 +0,0 @@
-import React, { Component } from 'react';
-import { CardBody } from '@patternfly/react-core';
-
-class ProjectAccess extends Component {
-  render() {
-    return <CardBody>Coming soon :)</CardBody>;
-  }
-}
-
-export default ProjectAccess;
diff --git a/awx/ui_next/src/screens/Project/ProjectAccess/index.js b/awx/ui_next/src/screens/Project/ProjectAccess/index.js
deleted file mode 100644
index ebfe78aa2d..0000000000
--- a/awx/ui_next/src/screens/Project/ProjectAccess/index.js
+++ /dev/null
@@ -1 +0,0 @@
-export { default } from './ProjectAccess';
diff --git a/awx/ui_next/src/screens/Template/Template.jsx b/awx/ui_next/src/screens/Template/Template.jsx
index 408bc11dcf..688c63018a 100644
--- a/awx/ui_next/src/screens/Template/Template.jsx
+++ b/awx/ui_next/src/screens/Template/Template.jsx
@@ -7,6 +7,7 @@ import CardCloseButton from '@components/CardCloseButton';
 import ContentError from '@components/ContentError';
 import NotificationList from '@components/NotificationList';
 import RoutedTabs from '@components/RoutedTabs';
+import { ResourceAccessList } from '@components/ResourceAccessList';
 import JobTemplateDetail from './JobTemplateDetail';
 import { JobTemplatesAPI, OrganizationsAPI } from '@api';
 import JobTemplateEdit from './JobTemplateEdit';
@@ -90,7 +91,7 @@ class Template extends Component {
 
     const tabsArray = [
       { name: i18n._(t`Details`), link: `${match.url}/details` },
-      { name: i18n._(t`Access`), link: '/home' },
+      { name: i18n._(t`Access`), link: `${match.url}/access` },
     ];
 
     if (canSeeNotificationsTab) {
@@ -177,6 +178,18 @@ class Template extends Component {
                 render={() => <JobTemplateEdit template={template} />}
               />
             )}
+            {template && (
+              <Route
+                key="access"
+                path="/templates/:templateType/:id/access"
+                render={() => (
+                  <ResourceAccessList
+                    resource={template}
+                    apiModel={JobTemplatesAPI}
+                  />
+                )}
+              />
+            )}
             {canSeeNotificationsTab && (
               <Route
                 path="/templates/:templateType/:id/notifications"

From fc080732d498b0a5af10d629a9ce8c4f01e58d85 Mon Sep 17 00:00:00 2001
From: mabashian <mabashia@redhat.com>
Date: Mon, 28 Oct 2019 15:02:18 -0400
Subject: [PATCH 2/4] Add breadcrumb for template access tab

---
 awx/ui_next/src/screens/Template/Templates.jsx | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/awx/ui_next/src/screens/Template/Templates.jsx b/awx/ui_next/src/screens/Template/Templates.jsx
index bea9a244f0..6c54778e77 100644
--- a/awx/ui_next/src/screens/Template/Templates.jsx
+++ b/awx/ui_next/src/screens/Template/Templates.jsx
@@ -40,6 +40,9 @@ class Templates extends Component {
       [`/templates/${template.type}/${template.id}/notifications`]: i18n._(
         t`Notifications`
       ),
+      [`/templates/${template.type}/${template.id}/access`]: i18n._(
+        t`Access`
+      ),
     };
     this.setState({ breadcrumbConfig });
   };

From 64776f97cfe919680c94a4728d5743c1112de247 Mon Sep 17 00:00:00 2001
From: mabashian <mabashia@redhat.com>
Date: Tue, 29 Oct 2019 11:03:20 -0400
Subject: [PATCH 3/4] Prettier formatting

---
 awx/ui_next/src/screens/Template/Templates.jsx | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/awx/ui_next/src/screens/Template/Templates.jsx b/awx/ui_next/src/screens/Template/Templates.jsx
index 6c54778e77..85e1ae4a83 100644
--- a/awx/ui_next/src/screens/Template/Templates.jsx
+++ b/awx/ui_next/src/screens/Template/Templates.jsx
@@ -40,9 +40,7 @@ class Templates extends Component {
       [`/templates/${template.type}/${template.id}/notifications`]: i18n._(
         t`Notifications`
       ),
-      [`/templates/${template.type}/${template.id}/access`]: i18n._(
-        t`Access`
-      ),
+      [`/templates/${template.type}/${template.id}/access`]: i18n._(t`Access`),
     };
     this.setState({ breadcrumbConfig });
   };

From e9728f2a7816161e0b50598a82fb654698e42858 Mon Sep 17 00:00:00 2001
From: mabashian <mabashia@redhat.com>
Date: Wed, 30 Oct 2019 20:11:11 -0400
Subject: [PATCH 4/4] Update snapshot after rebase

---
 .../__snapshots__/DeleteRoleConfirmationModal.test.jsx.snap     | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/awx/ui_next/src/components/ResourceAccessList/__snapshots__/DeleteRoleConfirmationModal.test.jsx.snap b/awx/ui_next/src/components/ResourceAccessList/__snapshots__/DeleteRoleConfirmationModal.test.jsx.snap
index 2579a66af2..0cf60593da 100644
--- a/awx/ui_next/src/components/ResourceAccessList/__snapshots__/DeleteRoleConfirmationModal.test.jsx.snap
+++ b/awx/ui_next/src/components/ResourceAccessList/__snapshots__/DeleteRoleConfirmationModal.test.jsx.snap
@@ -110,7 +110,7 @@ exports[`<DeleteRoleConfirmationModal /> should render initially 1`] = `
                     Are you sure you want to remove {0} access from {1}?  Doing so affects all members of the team.
                     <br />
                     <br />
-                    If you {0} want to remove access for this particular user, please remove them from the team.
+                    If you only want to remove access for this particular user, please remove them from the team.
                     <svg
                       aria-hidden="true"
                       class="at-c-alertModal__icon"