feat(pci-file-storage): add custom error page for share not found

aTurmo · aTurmo · commit 354feb42c8ce · 2026-03-30T17:25:12.000+02:00
ref: #TAPC-6299

Signed-off-by: aTurmo &lt;adrien.turmo.ext@ovhcloud.com&gt;
diff --git a/packages/manager/apps/pci-file-storage/public/assets/error-banner-oops.png b/packages/manager/apps/pci-file-storage/public/assets/error-banner-oops.png
diff --git a/packages/manager/apps/pci-file-storage/public/translations/dashboard/Messages_de_DE.json b/packages/manager/apps/pci-file-storage/public/translations/dashboard/Messages_de_DE.json
@@ -14,5 +14,11 @@
   "rename": {
     "success": "Share wird aktualisiert. Das kann einige Sekunden dauern",
     "error": "Beim Aktualisieren des Share ist ein Fehler aufgetreten"
+  },
+  "not_found": {
+    "title": "Share nicht gefunden",
+    "description": "Der Share \"{{shareId}}\" wurde nicht gefunden. Er wurde möglicherweise gelöscht oder die ID ist falsch.",
+    "go_back": "Zurück zum File Storage",
+    "reload": "Seite neu laden"
   }
 }
diff --git a/packages/manager/apps/pci-file-storage/public/translations/dashboard/Messages_en_GB.json b/packages/manager/apps/pci-file-storage/public/translations/dashboard/Messages_en_GB.json
@@ -14,5 +14,11 @@
   "rename": {
     "success": "Updating share... This may take a few seconds",
     "error": "An error occurred while updating the share"
+  },
+  "not_found": {
+    "title": "Share not found",
+    "description": "The share \"{{shareId}}\" could not be found. It may have been deleted or the ID is incorrect.",
+    "go_back": "Back to file storage",
+    "reload": "Reload the page"
   }
 }
diff --git a/packages/manager/apps/pci-file-storage/public/translations/dashboard/Messages_es_ES.json b/packages/manager/apps/pci-file-storage/public/translations/dashboard/Messages_es_ES.json
@@ -14,5 +14,11 @@
   "rename": {
     "success": "La actualización del share está en curso, esto puede tardar unos segundos",
     "error": "Se ha producido un error al actualizar el share"
+  },
+  "not_found": {
+    "title": "Share no encontrado",
+    "description": "No se ha encontrado el share \"{{shareId}}\". Es posible que se haya eliminado o que el identificador sea incorrecto.",
+    "go_back": "Volver al file storage",
+    "reload": "Recargar la página"
   }
 }
diff --git a/packages/manager/apps/pci-file-storage/public/translations/dashboard/Messages_fr_CA.json b/packages/manager/apps/pci-file-storage/public/translations/dashboard/Messages_fr_CA.json
@@ -14,5 +14,11 @@
   "rename": {
     "success": "La mise à jour du share est en cours, cela peut prendre quelques secondes",
     "error": "Une erreur s'est produite lors de la mise à jour du share"
+  },
+  "not_found": {
+    "title": "Share introuvable",
+    "description": "Le share \"{{shareId}}\" est introuvable. Il a peut-être été supprimé ou l'identifiant est incorrect.",
+    "go_back": "Retour au file storage",
+    "reload": "Recharger la page"
   }
 }
diff --git a/packages/manager/apps/pci-file-storage/public/translations/dashboard/Messages_fr_FR.json b/packages/manager/apps/pci-file-storage/public/translations/dashboard/Messages_fr_FR.json
@@ -14,5 +14,11 @@
   "rename": {
     "success": "La mise à jour du share est en cours, cela peut prendre quelques secondes",
     "error": "Une erreur s'est produite lors de la mise à jour du share"
+  },
+  "not_found": {
+    "title": "Share introuvable",
+    "description": "Le share \"{{shareId}}\" est introuvable. Il a peut-être été supprimé ou l'identifiant est incorrect.",
+    "go_back": "Retour au file storage",
+    "reload": "Recharger la page"
   }
 }
diff --git a/packages/manager/apps/pci-file-storage/public/translations/dashboard/Messages_it_IT.json b/packages/manager/apps/pci-file-storage/public/translations/dashboard/Messages_it_IT.json
@@ -12,7 +12,13 @@
     "coming_soon": "In arrivo"
   },
   "rename": {
-    "success": "L’aggiornamento dello share è in corso, l’operazione potrebbe richiedere alcuni secondi",
+    "success": "L'aggiornamento dello share è in corso, l'operazione potrebbe richiedere alcuni secondi",
     "error": "Si è verificato un errore durante l'aggiornamento dello share"
+  },
+  "not_found": {
+    "title": "Share non trovato",
+    "description": "Lo share \"{{shareId}}\" non è stato trovato. Potrebbe essere stato eliminato o l'identificativo è errato.",
+    "go_back": "Torna al file storage",
+    "reload": "Ricarica la pagina"
   }
 }
diff --git a/packages/manager/apps/pci-file-storage/public/translations/dashboard/Messages_pl_PL.json b/packages/manager/apps/pci-file-storage/public/translations/dashboard/Messages_pl_PL.json
@@ -14,5 +14,11 @@
   "rename": {
     "success": "Trwa aktualizacja „share”. Może to zająć kilka sekund.",
     "error": "Wystąpił błąd podczas aktualizacji „share”."
+  },
+  "not_found": {
+    "title": "Nie znaleziono share",
+    "description": "Nie znaleziono share \"{{shareId}}\". Mógł zostać usunięty lub identyfikator jest nieprawidłowy.",
+    "go_back": "Wróć do file storage",
+    "reload": "Odśwież stronę"
   }
 }
diff --git a/packages/manager/apps/pci-file-storage/public/translations/dashboard/Messages_pt_PT.json b/packages/manager/apps/pci-file-storage/public/translations/dashboard/Messages_pt_PT.json
@@ -14,5 +14,11 @@
   "rename": {
     "success": "A atualização do share está em curso, o que pode demorar alguns segundos",
     "error": "Ocorreu um erro aquando da atualização do share"
+  },
+  "not_found": {
+    "title": "Share não encontrado",
+    "description": "O share \"{{shareId}}\" não foi encontrado. Ele pode ter sido excluído ou o identificador está incorreto.",
+    "go_back": "Voltar ao file storage",
+    "reload": "Recarregar a página"
   }
 }
diff --git a/packages/manager/apps/pci-file-storage/src/data/hooks/shares/useShare.ts b/packages/manager/apps/pci-file-storage/src/data/hooks/shares/useShare.ts
@@ -1,4 +1,5 @@
 import { useQuery } from '@tanstack/react-query';
+import { isAxiosError } from 'axios';
 
 import { shareDetailsQueryKey } from '@/adapters/shares/queryKeys';
 import { getShare } from '@/data/api/shares.api';
@@ -21,6 +22,11 @@ export const useShare = <TData>(
     select: options?.select,
     ...getForceReloadUseQueryOptions(),
     retry: 1,
-    throwOnError: true,
+    throwOnError: (error) => {
+      if (isAxiosError(error) && error.response?.status === 404) {
+        return false;
+      }
+      return true;
+    },
   });
 };
diff --git a/packages/manager/apps/pci-file-storage/src/pages/dashboard/Dashboard.layout.tsx b/packages/manager/apps/pci-file-storage/src/pages/dashboard/Dashboard.layout.tsx
@@ -2,6 +2,7 @@ import React from 'react';
 
 import { Outlet, useLocation, useNavigate } from 'react-router-dom';
 
+import { isAxiosError } from 'axios';
 import { useTranslation } from 'react-i18next';
 
 import {
@@ -21,6 +22,7 @@ import { useShare } from '@/data/hooks/shares/useShare';
 import { useProjectId } from '@/hooks/useProjectId';
 import { useShareParams } from '@/hooks/useShareParams';
 import { ShareEditableName } from '@/pages/dashboard/ShareEditableName/ShareEditableName.component';
+import ShareNotFound from '@/pages/dashboard/ShareNotFound/ShareNotFound.page';
 import { selectShareDetails } from '@/pages/dashboard/view-model/shareDetails.view-model';
 import { useFileStorageGuideItems } from '@/pages/view-model/guides.view-model';
 import { subRoutes } from '@/routes/Routes.constants';
@@ -46,10 +48,12 @@ const DashboardLayout: React.FC = () => {
   const location = useLocation();
   const navigate = useNavigate();
 
-  const { data: shareDetails } = useShare(region, shareId, {
+  const { data: shareDetails, error: shareError } = useShare(region, shareId, {
     select: selectShareDetails,
   });
 
+  const isShareNotFound = isAxiosError(shareError) && shareError.response?.status === 404;
+
   const guideItems = useFileStorageGuideItems();
 
   const currentTab = getTabValueFromPathname(location.pathname);
@@ -62,6 +66,10 @@ const DashboardLayout: React.FC = () => {
     navigate(value === TAB_GENERAL ? '.' : value);
   };
 
+  if (isShareNotFound) {
+    return <ShareNotFound error={shareError} />;
+  }
+
   return (
     <BaseLayout
       breadcrumb={<Breadcrumb items={[{ label: shareDetails?.name ?? '' }]} />}
diff --git a/packages/manager/apps/pci-file-storage/src/pages/dashboard/ShareNotFound/ShareNotFound.page.tsx b/packages/manager/apps/pci-file-storage/src/pages/dashboard/ShareNotFound/ShareNotFound.page.tsx
@@ -0,0 +1,56 @@
+import React from 'react';
+
+import { useNavigate, useParams } from 'react-router-dom';
+
+import { AxiosError } from 'axios';
+import { useTranslation } from 'react-i18next';
+
+import {
+  BUTTON_VARIANT,
+  Button,
+  MESSAGE_COLOR,
+  Message,
+  MessageBody,
+  MessageIcon,
+} from '@ovhcloud/ods-react';
+
+import ErrorImg from '../../../../public/assets/error-banner-oops.png';
+
+type ShareNotFoundProps = {
+  error: AxiosError;
+};
+
+const ShareNotFound: React.FC<ShareNotFoundProps> = ({ error }) => {
+  const { t } = useTranslation('dashboard');
+  const { shareId } = useParams<{ shareId: string }>();
+  const navigate = useNavigate();
+
+  const queryId = error.response?.headers?.['x-ovh-queryid'] as string | undefined;
+
+  return (
+    <section className="mx-auto size-full max-w-[600px] overflow-hidden p-5">
+      <img src={ErrorImg} alt="OOPS" className="w-full" />
+      <Message color={MESSAGE_COLOR.warning} dismissible={false} className="w-full">
+        <MessageIcon name="triangle-exclamation" />
+        <MessageBody>
+          <p className="m-0">
+            <span className="block">
+              <strong>{t('dashboard:not_found.description', { shareId })}</strong>
+            </span>
+            {queryId && <span className="block py-[10px]">Error code: {queryId}</span>}
+          </p>
+        </MessageBody>
+      </Message>
+      <div className="mt-5 overflow-hidden py-2">
+        <Button className="w-full" variant={BUTTON_VARIANT.ghost} onClick={() => navigate('..')}>
+          {t('dashboard:not_found.go_back')}
+        </Button>
+        <Button className="w-full" onClick={() => navigate(0)}>
+          {t('dashboard:not_found.reload')}
+        </Button>
+      </div>
+    </section>
+  );
+};
+
+export default ShareNotFound;
diff --git a/packages/manager/apps/pci-file-storage/src/pages/dashboard/ShareNotFound/__tests__/ShareNotFound.page.spec.tsx b/packages/manager/apps/pci-file-storage/src/pages/dashboard/ShareNotFound/__tests__/ShareNotFound.page.spec.tsx
@@ -0,0 +1,77 @@
+import React from 'react';
+
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { AxiosError, AxiosHeaders } from 'axios';
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+
+import ShareNotFound from '../ShareNotFound.page';
+
+const mockNavigate = vi.fn();
+
+vi.mock('react-router-dom', async (importOriginal) => {
+  const actual = await importOriginal<typeof import('react-router-dom')>();
+  return {
+    ...actual,
+    useNavigate: () => mockNavigate,
+    useParams: () => ({ shareId: 'share-123' }),
+  };
+});
+
+const createAxios404 = (queryId?: string): AxiosError => {
+  const headers = new AxiosHeaders();
+  if (queryId) {
+    headers.set('x-ovh-queryid', queryId);
+  }
+  return new AxiosError('Not Found', '404', undefined, undefined, {
+    status: 404,
+    statusText: 'Not Found',
+    headers,
+    config: { headers: new AxiosHeaders() },
+    data: {},
+  });
+};
+
+describe('ShareNotFound', () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+  });
+
+  it('should render the not found description with the share id', () => {
+    render(<ShareNotFound error={createAxios404()} />);
+
+    expect(
+      screen.getByText('dashboard:not_found.description{"shareId":"share-123"}'),
+    ).toBeVisible();
+  });
+
+  it('should display the query id when present in error headers', () => {
+    render(<ShareNotFound error={createAxios404('FR.ws-8.abc123')} />);
+
+    expect(screen.getByText('Error code: FR.ws-8.abc123')).toBeVisible();
+  });
+
+  it('should not display the query id when absent from error headers', () => {
+    render(<ShareNotFound error={createAxios404()} />);
+
+    expect(screen.queryByText(/Error code/)).not.toBeInTheDocument();
+  });
+
+  it('should navigate back when go back button is clicked', async () => {
+    const user = userEvent.setup();
+    render(<ShareNotFound error={createAxios404()} />);
+
+    await user.click(screen.getByText('dashboard:not_found.go_back'));
+
+    expect(mockNavigate).toHaveBeenCalledWith('..');
+  });
+
+  it('should reload when reload button is clicked', async () => {
+    const user = userEvent.setup();
+    render(<ShareNotFound error={createAxios404()} />);
+
+    await user.click(screen.getByText('dashboard:not_found.reload'));
+
+    expect(mockNavigate).toHaveBeenCalledWith(0);
+  });
+});
diff --git a/packages/manager/apps/pci-file-storage/src/pages/dashboard/__tests__/Dashboard.layout.spec.tsx b/packages/manager/apps/pci-file-storage/src/pages/dashboard/__tests__/Dashboard.layout.spec.tsx
diff --git a/packages/manager/apps/pci-file-storage/src/routes/Routes.tsx b/packages/manager/apps/pci-file-storage/src/routes/Routes.tsx

Original file line number	Diff line number	Diff line change
`@@ -14,5 +14,11 @@`
`14`	`14`	`"rename": {`
`15`	`15`	`"success": "Share wird aktualisiert. Das kann einige Sekunden dauern",`
`16`	`16`	`"error": "Beim Aktualisieren des Share ist ein Fehler aufgetreten"`
	`17`	`+ },`
	`18`	`+ "not_found": {`
	`19`	`+ "title": "Share nicht gefunden",`
	`20`	`+ "description": "Der Share \"{{shareId}}\" wurde nicht gefunden. Er wurde möglicherweise gelöscht oder die ID ist falsch.",`
	`21`	`+ "go_back": "Zurück zum File Storage",`
	`22`	`+ "reload": "Seite neu laden"`
`17`	`23`	`}`
`18`	`24`	`}`