Update routing flow for creating accelerator/hardware profile on custom notebook image table (#3688)

* Update routing flow for creating accelerator/hardware profile on custom notebook image table

* Update frontend/src/pages/hardwareProfiles/manage/ManageHardwareProfileFooter.tsx

* Update frontend/src/pages/acceleratorProfiles/screens/manage/ManageAcceleratorProfileFooter.tsx

* Apply suggestions from code review

* Update frontend/src/pages/acceleratorProfiles/screens/manage/ManageAcceleratorProfileFooter.tsx

---------

Co-authored-by: Gage Krumbach <[email protected]>

Author: DaoDaoNoCode

frontend/src/app/AppRoutes.tsx

@@ -57,7 +57,7 @@ const CustomServingRuntimeRoutes = React.lazy(
 );
 const GroupSettingsPage = React.lazy(() => import('../pages/groupSettings/GroupSettings'));
 const LearningCenterPage = React.lazy(() => import('../pages/learningCenter/LearningCenter'));
-const BYONImagesPage = React.lazy(() => import('../pages/BYONImages/BYONImages'));
+const BYONImageRoutes = React.lazy(() => import('../pages/BYONImages/BYONImageRoutes'));
 const NotFound = React.lazy(() => import('../pages/NotFound'));
 
 const DependencyMissingPage = React.lazy(
@@ -135,7 +135,7 @@ const AppRoutes: React.FC = () => {
 
         {isAdmin && (
           <>
-            <Route path="/notebookImages" element={<BYONImagesPage />} />
+            <Route path="/notebookImages/*" element={<BYONImageRoutes />} />
             <Route path="/clusterSettings" element={<ClusterSettingsPage />} />
             <Route path="/acceleratorProfiles/*" element={<AcceleratorProfileRoutes />} />
             <Route path="/hardwareProfiles/*" element={<HardwareProfileRoutes />} />

frontend/src/pages/BYONImages/BYONImageAccelerators.tsx

@@ -70,7 +70,7 @@ export const BYONImageAccelerators: React.FC<BYONImageAcceleratorsProps> = ({
                 variant="outline"
                 render={({ className, content }) => (
                   <Link
-                    to={`/acceleratorProfiles/create?${new URLSearchParams({
+                    to={`/notebookImages/acceleratorProfile/create?${new URLSearchParams({
                       identifiers: image.recommendedAcceleratorIdentifiers.join(','),
                     }).toString()}`}
                     className={className}

frontend/src/pages/BYONImages/BYONImageHardwareProfiles.tsx

@@ -70,7 +70,7 @@ const BYONImageHardwareProfiles: React.FC<BYONImageHardwareProfilesProps> = ({
               variant="outline"
               render={({ className, content }) => (
                 <Link
-                  to={`/hardwareProfiles/create?${new URLSearchParams({
+                  to={`/notebookImages/hardwareProfile/create?${new URLSearchParams({
                     identifiers: image.recommendedAcceleratorIdentifiers.join(','),
                   }).toString()}`}
                   className={className}

frontend/src/pages/BYONImages/BYONImageRoutes.tsx

@@ -0,0 +1,26 @@
+import React from 'react';
+import { Navigate, Route, Routes } from 'react-router-dom';
+import ManageAcceleratorProfile from '~/pages/acceleratorProfiles/screens/manage/ManageAcceleratorProfile';
+import BYONImages from '~/pages/BYONImages/BYONImages';
+import ManageHardwareProfile from '~/pages/hardwareProfiles/manage/ManageHardwareProfile';
+
+const BYONImageRoutes: React.FC = () => (
+  <Routes>
+    <Route path="/" element={<BYONImages />} />
+    <Route
+      path="/hardwareProfile/create"
+      element={
+        <ManageHardwareProfile homepageTitle="Notebook images" contextPath="/notebookImages" />
+      }
+    />
+    <Route
+      path="/acceleratorProfile/create"
+      element={
+        <ManageAcceleratorProfile homepageTitle="Notebook images" contextPath="/notebookImages" />
+      }
+    />
+    <Route path="*" element={<Navigate to="." />} />
+  </Routes>
+);
+
+export default BYONImageRoutes;

frontend/src/pages/acceleratorProfiles/screens/manage/ManageAcceleratorProfile.tsx

@@ -18,16 +18,21 @@ import { ManageAcceleratorProfileDetailsSection } from './ManageAcceleratorProfi
 
 type ManageAcceleratorProfileProps = {
   existingAcceleratorProfile?: AcceleratorProfileKind;
+  contextPath?: string;
+  homepageTitle?: string;
 };
 
 const ManageAcceleratorProfile: React.FC<ManageAcceleratorProfileProps> = ({
   existingAcceleratorProfile,
+  contextPath = '/acceleratorProfiles',
+  homepageTitle = 'Accelerator profiles',
 }) => {
-  const [state, setState] = useGenericObjectState<AcceleratorProfileKind['spec']>({
+  const [state, setState] = useGenericObjectState<AcceleratorProfileFormData>({
     displayName: '',
     identifier: '',
     enabled: true,
     tolerations: [],
+    name: '',
   });
   const { data: profileNameDesc, onDataChange: setProfileNameDesc } =
     useK8sNameDescriptionFieldData({
@@ -71,9 +76,7 @@ const ManageAcceleratorProfile: React.FC<ManageAcceleratorProfileProps> = ({
       }
       breadcrumb={
         <Breadcrumb>
-          <BreadcrumbItem
-            render={() => <Link to="/acceleratorProfiles">Accelerator profiles</Link>}
-          />
+          <BreadcrumbItem render={() => <Link to={contextPath}>{homepageTitle}</Link>} />
           <BreadcrumbItem>
             {existingAcceleratorProfile ? 'Edit' : 'Create'} accelerator profile
           </BreadcrumbItem>
@@ -118,6 +121,7 @@ const ManageAcceleratorProfile: React.FC<ManageAcceleratorProfileProps> = ({
           state={formState}
           existingAcceleratorProfile={existingAcceleratorProfile}
           validFormData={validFormData}
+          redirectPath={contextPath}
         />
       </PageSection>
     </ApplicationsPage>

frontend/src/pages/acceleratorProfiles/screens/manage/ManageAcceleratorProfileDetailsSection.tsx

@@ -3,14 +3,13 @@ import React from 'react';
 import { OutlinedQuestionCircleIcon } from '@patternfly/react-icons';
 import { useSearchParams } from 'react-router-dom';
 import { UpdateObjectAtPropAndValue } from '~/pages/projects/types';
-import { AcceleratorProfileKind } from '~/k8sTypes';
 import DashboardPopupIconButton from '~/concepts/dashboard/DashboardPopupIconButton';
 import { AcceleratorProfileFormData } from './types';
 import { IdentifierSelectField } from './IdentifierSelectField';
 
 type ManageAcceleratorProfileDetailsSectionProps = {
   state: AcceleratorProfileFormData;
-  setState: UpdateObjectAtPropAndValue<AcceleratorProfileKind['spec']>;
+  setState: UpdateObjectAtPropAndValue<AcceleratorProfileFormData>;
 };
 
 export const ManageAcceleratorProfileDetailsSection: React.FC<

frontend/src/pages/acceleratorProfiles/screens/manage/ManageAcceleratorProfileFooter.tsx

@@ -14,28 +14,47 @@ import {
   updateAcceleratorProfile,
 } from '~/services/acceleratorProfileService';
 import { AcceleratorProfileFormData } from '~/pages/acceleratorProfiles/screens/manage/types';
+import useNotification from '~/utilities/useNotification';
 
 type ManageAcceleratorProfileFooterProps = {
   state: AcceleratorProfileFormData;
   existingAcceleratorProfile?: AcceleratorProfileKind;
   validFormData: boolean;
+  redirectPath: string;
 };
 
 export const ManageAcceleratorProfileFooter: React.FC<ManageAcceleratorProfileFooterProps> = ({
   state,
   existingAcceleratorProfile,
   validFormData,
+  redirectPath,
 }) => {
   const [errorMessage, setErrorMessage] = React.useState<string>('');
   const [isLoading, setIsLoading] = React.useState<boolean>(false);
   const navigate = useNavigate();
+  const notification = useNotification();
 
   const onCreateAcceleratorProfile = async () => {
     setIsLoading(true);
     createAcceleratorProfile(state)
       .then((res) => {
         if (res.success) {
-          navigate(`/acceleratorProfiles`);
+          if (redirectPath !== '/acceleratorProfiles') {
+            notification.success(
+              'Accelerator profile has been created.',
+              <Stack hasGutter>
+                <StackItem>
+                  A new accelerator profile <strong>{state.displayName}</strong> has been created.
+                </StackItem>
+                <StackItem>
+                  <Button isInline variant="link" onClick={() => navigate(`/acceleratorProfiles`)}>
+                    View profile details
+                  </Button>
+                </StackItem>
+              </Stack>,
+            );
+          }
+          navigate(redirectPath);
         } else {
           setErrorMessage(res.error || 'Could not create accelerator profile');
         }
@@ -54,7 +73,7 @@ export const ManageAcceleratorProfileFooter: React.FC<ManageAcceleratorProfileFo
       updateAcceleratorProfile(existingAcceleratorProfile.metadata.name, state)
         .then((res) => {
           if (res.success) {
-            navigate(`/acceleratorProfiles`);
+            navigate(redirectPath);
           } else {
             setErrorMessage(res.error || 'Could not update accelerator profile');
           }
@@ -103,7 +122,7 @@ export const ManageAcceleratorProfileFooter: React.FC<ManageAcceleratorProfileFo
             <Button
               variant="link"
               id="cancel-button"
-              onClick={() => navigate(`/acceleratorProfiles`)}
+              onClick={() => navigate(redirectPath)}
               isDisabled={isLoading}
             >
               Cancel

frontend/src/pages/acceleratorProfiles/screens/manage/types.ts

@@ -9,4 +9,4 @@ export type ManageAcceleratorProfileSectionTitlesType = {
   [key in ManageAcceleratorProfileSectionID]: string;
 };
 
-export type AcceleratorProfileFormData = { name?: string } & AcceleratorProfileKind['spec'];
+export type AcceleratorProfileFormData = { name: string } & AcceleratorProfileKind['spec'];

frontend/src/pages/hardwareProfiles/manage/ManageHardwareProfile.tsx

@@ -21,11 +21,15 @@ import { HardwareProfileFormData, ManageHardwareProfileSectionID } from './types
 type ManageHardwareProfileProps = {
   existingHardwareProfile?: HardwareProfileKind;
   duplicatedHardwareProfile?: HardwareProfileKind;
+  contextPath?: string;
+  homepageTitle?: string;
 };
 
 const ManageHardwareProfile: React.FC<ManageHardwareProfileProps> = ({
   existingHardwareProfile,
   duplicatedHardwareProfile,
+  contextPath = '/hardwareProfiles',
+  homepageTitle = 'Hardware profiles',
 }) => {
   const [state, setState] = useGenericObjectState<HardwareProfileKind['spec']>(
     DEFAULT_HARDWARE_PROFILE_SPEC,
@@ -87,7 +91,7 @@ const ManageHardwareProfile: React.FC<ManageHardwareProfileProps> = ({
       }
       breadcrumb={
         <Breadcrumb>
-          <BreadcrumbItem render={() => <Link to="/hardwareProfiles">Hardware profiles</Link>} />
+          <BreadcrumbItem render={() => <Link to={contextPath}>{homepageTitle}</Link>} />
           <BreadcrumbItem isActive>
             {existingHardwareProfile ? 'Edit' : duplicatedHardwareProfile ? 'Duplicate' : 'Create'}{' '}
             hardware profile
@@ -133,6 +137,7 @@ const ManageHardwareProfile: React.FC<ManageHardwareProfileProps> = ({
           state={formState}
           existingHardwareProfile={existingHardwareProfile}
           validFormData={validFormData}
+          redirectPath={contextPath}
         />
       </PageSection>
     </ApplicationsPage>

frontend/src/pages/hardwareProfiles/manage/ManageHardwareProfileFooter.tsx

@@ -12,29 +12,50 @@ import { HardwareProfileKind } from '~/k8sTypes';
 import { HardwareProfileFormData } from '~/pages/hardwareProfiles/manage/types';
 import { createHardwareProfile, updateHardwareProfile } from '~/api';
 import { useDashboardNamespace } from '~/redux/selectors';
+import useNotification from '~/utilities/useNotification';
 
 type ManageHardwareProfileFooterProps = {
   state: HardwareProfileFormData;
   existingHardwareProfile?: HardwareProfileKind;
   validFormData: boolean;
+  redirectPath: string;
 };
 
 const ManageHardwareProfileFooter: React.FC<ManageHardwareProfileFooterProps> = ({
   state,
   existingHardwareProfile,
   validFormData,
+  redirectPath,
 }) => {
   const [errorMessage, setErrorMessage] = React.useState<string>('');
   const [isLoading, setIsLoading] = React.useState<boolean>(false);
   const { dashboardNamespace } = useDashboardNamespace();
   const navigate = useNavigate();
+  const notification = useNotification();
 
   const { name, ...spec } = state;
 
   const onCreateHardwareProfile = async () => {
     setIsLoading(true);
     createHardwareProfile(name, spec, dashboardNamespace)
-      .then(() => navigate('/hardwareProfiles'))
+      .then(() => {
+        if (redirectPath !== '/hardwareProfiles') {
+          notification.success(
+            'Hardware profile has been created.',
+            <Stack hasGutter>
+              <StackItem>
+                A new hardware profile <strong>{state.displayName}</strong> has been created.
+              </StackItem>
+              <StackItem>
+                <Button isInline variant="link" onClick={() => navigate(`/hardwareProfiles`)}>
+                  View profile details
+                </Button>
+              </StackItem>
+            </Stack>,
+          );
+        }
+        navigate(redirectPath);
+      })
       .catch((err) => {
         setErrorMessage(err.message);
       })
@@ -47,7 +68,7 @@ const ManageHardwareProfileFooter: React.FC<ManageHardwareProfileFooterProps> =
     if (existingHardwareProfile) {
       setIsLoading(true);
       updateHardwareProfile(spec, existingHardwareProfile, dashboardNamespace)
-        .then(() => navigate(`/hardwareProfiles`))
+        .then(() => navigate(redirectPath))
         .catch((err) => {
           setErrorMessage(err.message);
         })
@@ -88,7 +109,7 @@ const ManageHardwareProfileFooter: React.FC<ManageHardwareProfileFooterProps> =
             <Button
               variant="link"
               id="cancel-button"
-              onClick={() => navigate(`/hardwareProfiles`)}
+              onClick={() => navigate(redirectPath)}
               isDisabled={isLoading}
             >
               Cancel