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 && (
-            <Route path="/credentials/:id/details">
-              <CredentialDetail credential={credential} />
-            </Route>
+          {credential && [
+            <Route
+              key="details"
+              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="*"