fix: show not found page if prompt name does not exist (mlflow#14981)

Signed-off-by: Keita Nonaka <[email protected]>
Signed-off-by: Yuki Watanabe <[email protected]>
Co-authored-by: Yuki Watanabe <[email protected]>

Author: 2 people

Diff for: mlflow/server/js/src/experiment-tracking/pages/prompts/PromptsDetailsPage.test.tsx

@@ -191,15 +191,15 @@ describe('PromptsDetailsPage', () => {
     expect(screen.getByRole('columnheader', { name: 'Registered at' })).toBeInTheDocument();
   });
 
-  it('should display error boundary UI component upon showstopper failure', async () => {
+  it('should display 404 UI component upon showstopper failure', async () => {
     jest.spyOn(console, 'error').mockImplementation(() => {});
     server.use(getFailedRegisteredPromptDetailsResponse(404));
 
     renderTestComponent();
-    await waitFor(() => {
-      expect(screen.getByRole('heading', { name: 'Error' })).toBeInTheDocument();
-    });
-    expect(screen.getByText('The requested resource was not found.')).toBeInTheDocument();
+    expect(await screen.findByRole('heading', { name: 'Page Not Found' })).toBeInTheDocument();
+    expect(
+      await screen.findByRole('heading', { name: "Prompt name 'prompt1' does not exist, go back to the home page." }),
+    ).toBeInTheDocument();
     jest.restoreAllMocks();
   });
 });

Diff for: mlflow/server/js/src/experiment-tracking/pages/prompts/PromptsDetailsPage.tsx

@@ -34,6 +34,7 @@ import ErrorUtils from '../../../common/utils/ErrorUtils';
 import { PromptPageErrorHandler } from './components/PromptPageErrorHandler';
 import { first, isEmpty } from 'lodash';
 import { PromptsListTableTagsBox } from './components/PromptDetailsTagsBox';
+import { PromptNotFoundView } from './components/PromptNotFoundView';
 import { useUpdatePromptVersionMetadataModal } from './hooks/useUpdatePromptVersionMetadataModal';
 
 const getAliasesModalTitle = (version: string) => (
@@ -123,9 +124,9 @@ const PromptsDetailsPage = () => {
     ),
   });
 
-  // If the load error occurs, throw the error into the error boundary
+  // If the load error occurs, show not found page
   if (promptLoadError) {
-    throw promptLoadError;
+    return <PromptNotFoundView promptName={promptName} />;
   }
 
   const breadcrumbs = (

Diff for: mlflow/server/js/src/experiment-tracking/pages/prompts/components/PromptNotFoundView.tsx

@@ -0,0 +1,16 @@
+import { ErrorView } from '@mlflow/mlflow/src/common/components/ErrorView';
+import Routes from '../../../routes';
+
+interface Props {
+  promptName: string;
+}
+
+export function PromptNotFoundView({ promptName }: Props) {
+  return (
+    <ErrorView
+      statusCode={404}
+      subMessage={`Prompt name '${promptName}' does not exist`}
+      fallbackHomePageReactRoute={Routes.promptsPageRoute}
+    />
+  );
+}