From ea1d98ae167441cff91ba59c98c8d575f85300c3 Mon Sep 17 00:00:00 2001
From: Keith Grant <keithjgrant@redhat.com>
Date: Wed, 4 Oct 2023 13:16:06 -0700
Subject: [PATCH] Update routing for credential types, notification templates,
 management jobs (#990)

---
 frontend/awx/AwxMasthead.tsx                  |   5 +-
 frontend/awx/AwxRoutes.tsx                    |   8 +-
 .../CredentialTypePage/CredentialTypePage.tsx |  31 +++--
 .../ManagementJobPage/ManagementJobPage.tsx   |  37 +++---
 .../NotificationPage/NotificationPage.tsx     |  33 +++---
 frontend/awx/useAwxNavigation.tsx             | 110 +++++++++++-------
 6 files changed, 122 insertions(+), 102 deletions(-)

diff --git a/frontend/awx/AwxMasthead.tsx b/frontend/awx/AwxMasthead.tsx
index b7097d7c0e..18ad943997 100644
--- a/frontend/awx/AwxMasthead.tsx
+++ b/frontend/awx/AwxMasthead.tsx
@@ -48,7 +48,10 @@ export function AwxMasthead() {
           <PageSettingsIcon />
         </ToolbarItem>
         <ToolbarItem>
-          <PageNotificationsIcon count={0} onClick={() => pageNavigate(AwxRoute.Notifications)} />
+          <PageNotificationsIcon
+            count={0}
+            onClick={() => pageNavigate(AwxRoute.WorkflowApprovals)}
+          />
         </ToolbarItem>
         <ToolbarItem>
           <PageMastheadDropdown id="help-menu" icon={<QuestionCircleIcon />}>
diff --git a/frontend/awx/AwxRoutes.tsx b/frontend/awx/AwxRoutes.tsx
index c4a779bdd9..bdefa5ca07 100644
--- a/frontend/awx/AwxRoutes.tsx
+++ b/frontend/awx/AwxRoutes.tsx
@@ -138,13 +138,17 @@ export enum AwxRoute {
 
   CredentialTypes = 'awx-credential-types',
   CredentialType = 'awx-credential-type',
+  CredentialTypeDetails = 'awx-credential-type-details',
 
-  Notifications = 'awx-notifications',
-  NotificationPage = 'awx-notification-page',
+  NotificationTemplates = 'awx-notification-templates',
+  NotificationTemplatePage = 'awx-notification-template-page',
+  NotificationTemplateDetails = 'awx-notification-template-details',
 
   ManagementJobs = 'awx-management-jobs',
   ManagementJobPage = 'awx-management-job-page',
   ManagementJobSchedules = 'awx-management-job-schedules',
+  ManagementJobNotifications = 'awx-management-job-notifications',
+
   ManagementJobSchedulePage = 'awx-management-job-schedule-page',
   ManagementJobScheduleDetails = 'awx-management-job-schedule-details',
   ManagementJobScheduleRrules = 'awx-management-job-schedule-rrules',
diff --git a/frontend/awx/administration/credential-types/CredentialTypePage/CredentialTypePage.tsx b/frontend/awx/administration/credential-types/CredentialTypePage/CredentialTypePage.tsx
index 3f302bded7..3a37e22c53 100644
--- a/frontend/awx/administration/credential-types/CredentialTypePage/CredentialTypePage.tsx
+++ b/frontend/awx/administration/credential-types/CredentialTypePage/CredentialTypePage.tsx
@@ -3,9 +3,7 @@ import { useTranslation } from 'react-i18next';
 import { useParams } from 'react-router-dom';
 import { PageHeader, PageLayout, useGetPageUrl } from '../../../../../framework';
 import { LoadingPage } from '../../../../../framework/components/LoadingPage';
-import { PageNotImplemented } from '../../../../common/PageNotImplemented';
-import { PageBackTab, RoutedTab, RoutedTabs } from '../../../../common/RoutedTabs';
-import { RouteObj } from '../../../../common/Routes';
+import { PageRoutedTabs } from '../../../../../framework/PageTabs/PageRoutedTabs';
 import { useGetItem } from '../../../../common/crud/useGet';
 import { AwxRoute } from '../../../AwxRoutes';
 import { AwxError } from '../../../common/AwxError';
@@ -16,35 +14,34 @@ export function CredentialTypePage() {
   const params = useParams<{ id: string }>();
   const {
     error,
-    data: credential_type,
+    data: credentialType,
     refresh,
   } = useGetItem<CredentialType>('/api/v2/credential_types', params.id);
 
   const getPageUrl = useGetPageUrl();
 
   if (error) return <AwxError error={error} handleRefresh={refresh} />;
-  if (!credential_type) return <LoadingPage breadcrumbs tabs />;
+  if (!credentialType) return <LoadingPage breadcrumbs tabs />;
 
   return (
     <PageLayout>
       <PageHeader
-        title={credential_type?.name}
+        title={credentialType?.name}
         breadcrumbs={[
           { label: t('Credential Types'), to: getPageUrl(AwxRoute.CredentialTypes) },
-          { label: credential_type?.name },
+          { label: credentialType?.name },
         ]}
         headerActions={[]}
       />
-      <RoutedTabs isLoading={!credential_type} baseUrl={RouteObj.CredentialTypePage}>
-        <PageBackTab
-          label={t('Back to Credential Types')}
-          url={RouteObj.CredentialTypes}
-          persistentFilterKey="credential_types"
-        />
-        <RoutedTab label={t('Details')} url={RouteObj.CredentialTypeDetails}>
-          <PageNotImplemented />
-        </RoutedTab>
-      </RoutedTabs>
+      <PageRoutedTabs
+        backTab={{
+          label: t('Back to Credential Types'),
+          page: AwxRoute.CredentialTypes,
+          persistentFilterKey: 'credential-types',
+        }}
+        tabs={[{ label: t('Details'), page: AwxRoute.CredentialTypeDetails }]}
+        params={{ id: credentialType.id }}
+      />
     </PageLayout>
   );
 }
diff --git a/frontend/awx/administration/management-jobs/ManagementJobPage/ManagementJobPage.tsx b/frontend/awx/administration/management-jobs/ManagementJobPage/ManagementJobPage.tsx
index 893c01e542..e5a10a527f 100644
--- a/frontend/awx/administration/management-jobs/ManagementJobPage/ManagementJobPage.tsx
+++ b/frontend/awx/administration/management-jobs/ManagementJobPage/ManagementJobPage.tsx
@@ -3,9 +3,7 @@ import { useTranslation } from 'react-i18next';
 import { useParams } from 'react-router-dom';
 import { PageHeader, PageLayout, useGetPageUrl } from '../../../../../framework';
 import { LoadingPage } from '../../../../../framework/components/LoadingPage';
-import { PageNotImplemented } from '../../../../common/PageNotImplemented';
-import { PageBackTab, RoutedTab, RoutedTabs } from '../../../../common/RoutedTabs';
-import { RouteObj } from '../../../../common/Routes';
+import { PageRoutedTabs } from '../../../../../framework/PageTabs/PageRoutedTabs';
 import { useGetItem } from '../../../../common/crud/useGet';
 import { AwxRoute } from '../../../AwxRoutes';
 import { AwxError } from '../../../common/AwxError';
@@ -16,38 +14,37 @@ export function ManagementJobPage() {
   const params = useParams<{ id: string }>();
   const {
     error,
-    data: system_job_template,
+    data: systemJobTemplate,
     refresh,
   } = useGetItem<SystemJobTemplate>('/api/v2/system_job_templates', params.id);
 
   const getPageUrl = useGetPageUrl();
 
   if (error) return <AwxError error={error} handleRefresh={refresh} />;
-  if (!system_job_template) return <LoadingPage breadcrumbs tabs />;
+  if (!systemJobTemplate) return <LoadingPage breadcrumbs tabs />;
 
   return (
     <PageLayout>
       <PageHeader
-        title={system_job_template?.name}
+        title={systemJobTemplate?.name}
         breadcrumbs={[
           { label: t('Management Jobs'), to: getPageUrl(AwxRoute.ManagementJobs) },
-          { label: system_job_template?.name },
+          { label: systemJobTemplate?.name },
         ]}
         headerActions={[]}
       />
-      <RoutedTabs isLoading={!system_job_template} baseUrl={RouteObj.ManagementJobPage}>
-        <PageBackTab
-          label={t('Back to Management Jobs')}
-          url={RouteObj.ManagementJobs}
-          persistentFilterKey="management_jobs"
-        />
-        <RoutedTab label={t('Schedules')} url={RouteObj.ManagementJobSchedules}>
-          <PageNotImplemented />
-        </RoutedTab>
-        <RoutedTab label={t('Notifications')} url={RouteObj.ManagementJobNotifications}>
-          <PageNotImplemented />
-        </RoutedTab>
-      </RoutedTabs>
+      <PageRoutedTabs
+        backTab={{
+          label: t('Back to Management Jobs'),
+          page: AwxRoute.ManagementJobPage,
+          persistentFilterKey: 'management-jobs',
+        }}
+        tabs={[
+          { label: t('Schedules'), page: AwxRoute.ManagementJobSchedules },
+          { label: t('Notifications'), page: AwxRoute.ManagementJobNotifications },
+        ]}
+        params={{ id: systemJobTemplate.id }}
+      />
     </PageLayout>
   );
 }
diff --git a/frontend/awx/administration/notifications/NotificationPage/NotificationPage.tsx b/frontend/awx/administration/notifications/NotificationPage/NotificationPage.tsx
index c845632db2..2a6daf3428 100644
--- a/frontend/awx/administration/notifications/NotificationPage/NotificationPage.tsx
+++ b/frontend/awx/administration/notifications/NotificationPage/NotificationPage.tsx
@@ -3,9 +3,7 @@ import { useTranslation } from 'react-i18next';
 import { useParams } from 'react-router-dom';
 import { PageHeader, PageLayout, useGetPageUrl } from '../../../../../framework';
 import { LoadingPage } from '../../../../../framework/components/LoadingPage';
-import { PageNotImplemented } from '../../../../common/PageNotImplemented';
-import { PageBackTab, RoutedTab, RoutedTabs } from '../../../../common/RoutedTabs';
-import { RouteObj } from '../../../../common/Routes';
+import { PageRoutedTabs } from '../../../../../framework/PageTabs/PageRoutedTabs';
 import { useGetItem } from '../../../../common/crud/useGet';
 import { AwxRoute } from '../../../AwxRoutes';
 import { AwxError } from '../../../common/AwxError';
@@ -16,35 +14,34 @@ export function NotificationPage() {
   const params = useParams<{ id: string }>();
   const {
     error,
-    data: notification_template,
+    data: notificationTemplate,
     refresh,
   } = useGetItem<NotificationTemplate>('/api/v2/notification_templates', params.id);
 
   const getPageUrl = useGetPageUrl();
 
   if (error) return <AwxError error={error} handleRefresh={refresh} />;
-  if (!notification_template) return <LoadingPage breadcrumbs tabs />;
+  if (!notificationTemplate) return <LoadingPage breadcrumbs tabs />;
 
   return (
     <PageLayout>
       <PageHeader
-        title={notification_template?.name}
+        title={notificationTemplate?.name}
         breadcrumbs={[
-          { label: t('Notifications'), to: getPageUrl(AwxRoute.Notifications) },
-          { label: notification_template?.name },
+          { label: t('Notifications'), to: getPageUrl(AwxRoute.NotificationTemplates) },
+          { label: notificationTemplate?.name },
         ]}
         headerActions={[]}
       />
-      <RoutedTabs isLoading={!notification_template} baseUrl={RouteObj.NotificationPage}>
-        <PageBackTab
-          label={t('Back to Notifications')}
-          url={getPageUrl(AwxRoute.Notifications)}
-          persistentFilterKey="notifications"
-        />
-        <RoutedTab label={t('Details')} url={RouteObj.NotificationDetails}>
-          <PageNotImplemented />
-        </RoutedTab>
-      </RoutedTabs>
+      <PageRoutedTabs
+        backTab={{
+          label: t('Back to Credential Types'),
+          page: AwxRoute.NotificationTemplates,
+          persistentFilterKey: 'credential-types',
+        }}
+        tabs={[{ label: t('Details'), page: AwxRoute.NotificationTemplateDetails }]}
+        params={{ id: notificationTemplate.id }}
+      />
     </PageLayout>
   );
 }
diff --git a/frontend/awx/useAwxNavigation.tsx b/frontend/awx/useAwxNavigation.tsx
index 4782c2bee9..e252a89bcf 100644
--- a/frontend/awx/useAwxNavigation.tsx
+++ b/frontend/awx/useAwxNavigation.tsx
@@ -381,7 +381,6 @@ export function useAwxNavigation() {
                             path: 'notifications',
                             element: <PageNotImplemented />,
                           },
-
                           {
                             path: '',
                             element: <Navigate to="details" />,
@@ -823,6 +822,10 @@ export function useAwxNavigation() {
                         path: 'roles',
                         element: <UserRoles />,
                       },
+                      {
+                        path: '',
+                        element: <Navigate to="details" />,
+                      },
                     ],
                   },
                   {
@@ -844,8 +847,19 @@ export function useAwxNavigation() {
                 children: [
                   {
                     id: AwxRoute.CredentialType,
-                    path: ':id/*',
+                    path: ':id/',
                     element: <CredentialTypePage />,
+                    children: [
+                      {
+                        id: AwxRoute.CredentialTypeDetails,
+                        path: 'details',
+                        element: <PageNotImplemented />,
+                      },
+                      {
+                        path: '',
+                        element: <Navigate to="details" />,
+                      },
+                    ],
                   },
                   {
                     path: '',
@@ -854,14 +868,25 @@ export function useAwxNavigation() {
                 ],
               },
               {
-                id: AwxRoute.Notifications,
+                id: AwxRoute.NotificationTemplates,
                 label: t('Notifications'),
                 path: 'notifications',
                 children: [
                   {
-                    id: AwxRoute.NotificationPage,
+                    id: AwxRoute.NotificationTemplatePage,
                     path: ':id/*',
                     element: <NotificationPage />,
+                    children: [
+                      {
+                        id: AwxRoute.NotificationTemplateDetails,
+                        path: 'details',
+                        element: <PageNotImplemented />,
+                      },
+                      {
+                        path: '',
+                        element: <Navigate to="details" />,
+                      },
+                    ],
                   },
                   {
                     path: '',
@@ -874,55 +899,52 @@ export function useAwxNavigation() {
                 label: t('Management Jobs'),
                 path: 'management-jobs',
                 children: [
+                  {
+                    id: AwxRoute.ManagementJobSchedulePage,
+                    path: ':id/schedules/:schedule_id',
+                    element: (
+                      <SchedulePage
+                        backTab={{
+                          label: t('Back to Schedules'),
+                          page: AwxRoute.ManagementJobSchedules,
+                          persistentFilterKey: 'management-jobs-schedules',
+                        }}
+                        tabs={[
+                          {
+                            label: t('Details'),
+                            page: AwxRoute.ManagementJobScheduleDetails,
+                          },
+                          {
+                            label: t('Rules'),
+                            page: AwxRoute.ManagementJobScheduleRrules,
+                          },
+                        ]}
+                      />
+                    ),
+                  },
+                  {
+                    id: AwxRoute.ManagementJobEditSchedule,
+                    path: ':id/schedules/:schedule_id/edit',
+                    element: <PageNotImplemented />,
+                  },
                   {
                     id: AwxRoute.ManagementJobPage,
-                    path: ':id/*',
+                    path: ':id',
                     element: <ManagementJobPage />,
                     children: [
                       {
                         id: AwxRoute.ManagementJobSchedules,
                         path: 'schedules',
-                        element: <Schedules sublistEndpoint={`/api/v2/system_jobs`} />,
+                        element: <Schedules sublistEndpoint={`/api/v2/system_job_templates`} />,
                       },
                       {
-                        id: AwxRoute.ManagementJobSchedulePage,
-                        path: ':schedule_id/*',
-                        element: (
-                          <SchedulePage
-                            backTab={{
-                              label: t('Back to Schedules'),
-                              page: AwxRoute.ManagementJobSchedules,
-                              persistentFilterKey: 'management-jobs-schedules',
-                            }}
-                            tabs={[
-                              {
-                                label: t('Details'),
-                                page: AwxRoute.JobTemplateScheduleDetails,
-                              },
-                              {
-                                label: t('Rules'),
-                                page: AwxRoute.JobTemplateScheduleRrules,
-                              },
-                            ]}
-                          />
-                        ),
-                        children: [
-                          {
-                            id: AwxRoute.ManagementJobScheduleDetails,
-                            path: 'details',
-                            element: <ScheduleDetails />,
-                          },
-                          {
-                            id: AwxRoute.ManagementJobScheduleRrules,
-                            path: 'rrules',
-                            element: <ScheduleRules />,
-                          },
-                          {
-                            id: AwxRoute.ManagementJobEditSchedule,
-                            path: 'edit',
-                            element: <PageNotImplemented />,
-                          },
-                        ],
+                        id: AwxRoute.ManagementJobNotifications,
+                        path: 'notifications',
+                        element: <PageNotImplemented />,
+                      },
+                      {
+                        path: '',
+                        element: <Navigate to="schedules" />,
                       },
                     ],
                   },