add cred access tab and update credentials routing

awx/ui_next/src/screens/Credential/Credential.jsx

@@ -6,12 +6,14 @@ import {
   Switch,
   useParams,
   useLocation,
+  useRouteMatch,
   Route,
   Redirect,
   Link,
 } from 'react-router-dom';
 import { TabbedCardHeader } from '@components/Card';
 import CardCloseButton from '@components/CardCloseButton';
+import { ResourceAccessList } from '@components/ResourceAccessList';
 import ContentError from '@components/ContentError';
 import RoutedTabs from '@components/RoutedTabs';
 import CredentialDetail from './CredentialDetail';
@@ -21,7 +23,10 @@ function Credential({ i18n, setBreadcrumb }) {
   const [credential, setCredential] = useState(null);
   const [contentError, setContentError] = useState(null);
   const [hasContentLoading, setHasContentLoading] = useState(true);
-  const location = useLocation();
+  const { pathname } = useLocation();
+  const match = useRouteMatch({
+    path: '/credentials/:id',
+  });
   const { id } = useParams();
 
   useEffect(() => {
@@ -37,18 +42,20 @@ function Credential({ i18n, setBreadcrumb }) {
       }
     }
     fetchData();
-  }, [id, setBreadcrumb]);
+  }, [id, pathname, setBreadcrumb]);
 
   const tabsArray = [
     { name: i18n._(t`Details`), link: `/credentials/${id}/details`, id: 0 },
-    { name: i18n._(t`Access`), link: `/credentials/${id}/access`, id: 1 },
-    {
-      name: i18n._(t`Notifications`),
-      link: `/credentials/${id}/notifications`,
-      id: 2,
-    },
   ];
 
+  if (credential && credential.organization) {
+    tabsArray.push({
+      name: i18n._(t`Access`),
+      link: `/credentials/${id}/access`,
+      id: 1,
+    });
+  }
+
   let cardHeader = hasContentLoading ? null : (
     <TabbedCardHeader>
       <RoutedTabs tabsArray={tabsArray} />
@@ -56,7 +63,7 @@ function Credential({ i18n, setBreadcrumb }) {
     </TabbedCardHeader>
   );
 
-  if (location.pathname.endsWith('edit') || location.pathname.endsWith('add')) {
+  if (pathname.endsWith('edit') || pathname.endsWith('add')) {
     cardHeader = null;
   }
 
@@ -87,11 +94,40 @@ function Credential({ i18n, setBreadcrumb }) {
             to="/credentials/:id/details"
             exact
           />
-          {credential && (
+          {credential && [
-            <Route path="/credentials/:id/details">
+            <Route
-              <CredentialDetail credential={credential} />
+              key="details"
-            </Route>
+              path="/credentials/:id/details"
+              render={() => <CredentialDetail credential={credential} />}
+            />,
+            credential.organization && (
+              <Route
+                key="access"
+                path="/credentials/:id/access"
+                render={() => (
+                  <ResourceAccessList
+                    resource={credential}
+                    apiModel={CredentialsAPI}
+                  />
+                )}
+              />
+            ),
+            <Route
+              key="not-found"
+              path="*"
+              render={() =>
+                !hasContentLoading && (
+                  <ContentError isNotFound>
+                    {match.params.id && (
+                      <Link to={`/credentials/${match.params.id}/details`}>
+                        {i18n._(`View Credential Details`)}
+                      </Link>
           )}
+                  </ContentError>
+                )
+              }
+            />,
+          ]}
           <Route
             key="not-found"
             path="*"

awx/ui_next/src/screens/Credential/Credential.test.jsx

@@ -3,31 +3,50 @@ import { act } from 'react-dom/test-utils';
 import { createMemoryHistory } from 'history';
 import { CredentialsAPI } from '@api';
 import { mountWithContexts, waitForElement } from '@testUtils/enzymeHelpers';
-import { mockCredentials } from './shared';
+import mockCredential from './shared/data.credential.json';
+import mockOrgCredential from './shared/data.orgCredential.json';
 import Credential from './Credential';
 
 jest.mock('@api');
+jest.mock('react-router-dom', () => ({
+  ...jest.requireActual('react-router-dom'),
+  useRouteMatch: () => ({
+    url: '/credentials/2',
+    params: { id: 2 },
+  }),
+}));
 
-CredentialsAPI.readDetail.mockResolvedValue({
+CredentialsAPI.readDetail.mockResolvedValueOnce({
-  data: mockCredentials.results[0],
+  data: mockCredential,
 });
 
 describe('<Credential />', () => {
   let wrapper;
 
-  beforeEach(async () => {
+  test('initially renders user-based credential succesfully', async () => {
     await act(async () => {
       wrapper = mountWithContexts(<Credential setBreadcrumb={() => {}} />);
     });
+    await waitForElement(wrapper, 'ContentLoading', el => el.length === 0);
+    await waitForElement(wrapper, '.pf-c-tabs__item', el => el.length === 1);
   });
 
-  test('initially renders succesfully', async () => {
+  test('initially renders org-based credential succesfully', async () => {
-    expect(wrapper.find('Credential').length).toBe(1);
+    CredentialsAPI.readDetail.mockResolvedValueOnce({
+      data: mockOrgCredential,
+    });
+
+    await act(async () => {
+      wrapper = mountWithContexts(<Credential setBreadcrumb={() => {}} />);
+    });
+    await waitForElement(wrapper, 'ContentLoading', el => el.length === 0);
+    // org-based credential detail needs access tab
+    await waitForElement(wrapper, '.pf-c-tabs__item', el => el.length === 2);
   });
 
   test('should show content error when user attempts to navigate to erroneous route', async () => {
     const history = createMemoryHistory({
-      initialEntries: ['/credentials/1/foobar'],
+      initialEntries: ['/credentials/2/foobar'],
     });
     await act(async () => {
       wrapper = mountWithContexts(<Credential setBreadcrumb={() => {}} />, {
@@ -38,8 +57,8 @@ describe('<Credential />', () => {
               location: history.location,
               match: {
                 params: { id: 1 },
-                url: '/credentials/1/foobar',
+                url: '/credentials/2/foobar',
-                path: '/credentials/1/foobar',
+                path: '/credentials/2/foobar',
               },
             },
           },
@@ -47,19 +66,5 @@ describe('<Credential />', () => {
       });
     });
     await waitForElement(wrapper, 'ContentError', el => el.length === 1);
-    expect(wrapper.find('ContentError Title').text()).toEqual('Not Found');
-  });
-
-  test('should show content error if api throws an error', async () => {
-    CredentialsAPI.readDetail.mockImplementationOnce(() =>
-      Promise.reject(new Error())
-    );
-    await act(async () => {
-      wrapper = mountWithContexts(<Credential setBreadcrumb={() => {}} />);
-    });
-    await waitForElement(wrapper, 'ContentError', el => el.length === 1);
-    expect(wrapper.find('ContentError Title').text()).toEqual(
-      'Something went wrong...'
-    );
   });
 });

awx/ui_next/src/screens/Credential/Credentials.jsx

@@ -2,7 +2,7 @@ import React, { useState, useCallback } from 'react';
 import { Route, Switch } from 'react-router-dom';
 import { withI18n } from '@lingui/react';
 import { t } from '@lingui/macro';
-
+import { Config } from '@contexts/Config';
 import Breadcrumbs from '@components/Breadcrumbs';
 import Credential from './Credential';
 import CredentialAdd from './CredentialAdd';
@@ -24,7 +24,9 @@ function Credentials({ i18n }) {
         '/credentials': i18n._(t`Credentials`),
         '/credentials/add': i18n._(t`Create New Credential`),
         [`/credentials/${credential.id}`]: `${credential.name}`,
+        [`/credentials/${credential.id}/edit`]: i18n._(t`Edit Details`),
         [`/credentials/${credential.id}/details`]: i18n._(t`Details`),
+        [`/credentials/${credential.id}/access`]: i18n._(t`Access`),
       });
     },
     [i18n]
@@ -35,7 +37,7 @@ function Credentials({ i18n }) {
       <Breadcrumbs breadcrumbConfig={breadcrumbConfig} />
       <Switch>
         <Route path="/credentials/add">
-          <CredentialAdd />
+          <Config>{({ me }) => <CredentialAdd me={me || {}} />}</Config>
         </Route>
         <Route path="/credentials/:id">
           <Credential setBreadcrumb={buildBreadcrumbConfig} />