fix(pci-block-storage): add file storage alpha information banner

aTurmo · ovh-cds · lolottetheclash · commit d5464cc207c5 · 2025-10-31T11:09:41.000+01:00
ref: #TAPC-5227

Signed-off-by: Adrien Turmo &lt;adrien.turmo.ext@ovhcloud.com&gt;
Co-authored-by: CDS Translator Agent &lt;opensource@ovh.net&gt;
diff --git a/packages/manager/apps/pci-block-storage/public/translations/general-banners/Messages_de_DE.json b/packages/manager/apps/pci-block-storage/public/translations/general-banners/Messages_de_DE.json
@@ -0,0 +1,5 @@
+{
+  "pci_project_file_storage_alpha_banner_message_title": "Dateispeicher",
+  "pci_project_file_storage_alpha_banner_message": "Haben Sie Schwierigkeiten, Speicherplatz zwischen Instanzen oder Containern zu teilen? Dateispeicher ist jetzt in der öffentlichen Alpha-Version bis zum 12. Januar 2026 kostenlos verfügbar!",
+  "pci_project_file_storage_alpha_banner_button": "Alpha entdecken"
+}
diff --git a/packages/manager/apps/pci-block-storage/public/translations/general-banners/Messages_en_GB.json b/packages/manager/apps/pci-block-storage/public/translations/general-banners/Messages_en_GB.json
@@ -0,0 +1,5 @@
+{
+  "pci_project_file_storage_alpha_banner_message_title": "File Storage",
+  "pci_project_file_storage_alpha_banner_message": "Struggling to share storage volumes between instances or containers? File Storage is now available in Public Alpha until January 12th 2026, free of charge!",
+  "pci_project_file_storage_alpha_banner_button": "Explore the alpha"
+}
diff --git a/packages/manager/apps/pci-block-storage/public/translations/general-banners/Messages_es_ES.json b/packages/manager/apps/pci-block-storage/public/translations/general-banners/Messages_es_ES.json
@@ -0,0 +1,5 @@
+{
+  "pci_project_file_storage_alpha_banner_message_title": "Almacenamiento de archivos",
+  "pci_project_file_storage_alpha_banner_message": "¿Tienes dificultades para compartir volúmenes de almacenamiento entre instancias o contenedores? Almacenamiento de archivos ahora está disponible en versión Alpha pública hasta el 12 de enero de 2026, ¡sin costo!",
+  "pci_project_file_storage_alpha_banner_button": "Descubrir la alpha"
+}
diff --git a/packages/manager/apps/pci-block-storage/public/translations/general-banners/Messages_fr_CA.json b/packages/manager/apps/pci-block-storage/public/translations/general-banners/Messages_fr_CA.json
@@ -0,0 +1,5 @@
+{
+  "pci_project_file_storage_alpha_banner_message_title": "File Storage",
+  "pci_project_file_storage_alpha_banner_message": "Vous rencontrez des difficultés pour partager des volumes de stockage entre instances ou conteneurs ? File Storage est désormais disponible en version Alpha publique jusqu'au 12 janvier 2026, sans frais !",
+  "pci_project_file_storage_alpha_banner_button": "Découvrir l'alpha"
+}
diff --git a/packages/manager/apps/pci-block-storage/public/translations/general-banners/Messages_fr_FR.json b/packages/manager/apps/pci-block-storage/public/translations/general-banners/Messages_fr_FR.json
@@ -0,0 +1,5 @@
+{
+  "pci_project_file_storage_alpha_banner_message_title": "File Storage",
+  "pci_project_file_storage_alpha_banner_message": "Vous rencontrez des difficultés pour partager des volumes de stockage entre instances ou conteneurs ? File Storage est désormais disponible en version Alpha publique jusqu'au 12 janvier 2026, sans frais !",
+  "pci_project_file_storage_alpha_banner_button": "Découvrir l'alpha"
+}
diff --git a/packages/manager/apps/pci-block-storage/public/translations/general-banners/Messages_it_IT.json b/packages/manager/apps/pci-block-storage/public/translations/general-banners/Messages_it_IT.json
@@ -0,0 +1,5 @@
+{
+  "pci_project_file_storage_alpha_banner_message_title": "File Storage",
+  "pci_project_file_storage_alpha_banner_message": "Hai difficoltà a condividere volumi di archiviazione tra istanze o contenitori? File Storage è ora disponibile in versione Alpha pubblica fino al 12 gennaio 2026, senza costi!",
+  "pci_project_file_storage_alpha_banner_button": "Scopri l'alpha"
+}
diff --git a/packages/manager/apps/pci-block-storage/public/translations/general-banners/Messages_pl_PL.json b/packages/manager/apps/pci-block-storage/public/translations/general-banners/Messages_pl_PL.json
@@ -0,0 +1,5 @@
+{
+  "pci_project_file_storage_alpha_banner_message_title": "Przechowywanie plików",
+  "pci_project_file_storage_alpha_banner_message": "Czy masz trudności z udostępnianiem wolumenów pamięci masowej między instancjami lub kontenerami? Przechowywanie plików jest teraz dostępne w wersji Alpha publicznej do 12 stycznia 2026 roku, bez opłat!",
+  "pci_project_file_storage_alpha_banner_button": "Poznaj wersję alpha"
+}
diff --git a/packages/manager/apps/pci-block-storage/public/translations/general-banners/Messages_pt_PT.json b/packages/manager/apps/pci-block-storage/public/translations/general-banners/Messages_pt_PT.json
@@ -0,0 +1,5 @@
+{
+  "pci_project_file_storage_alpha_banner_message_title": "Armazenamento de Arquivos",
+  "pci_project_file_storage_alpha_banner_message": "Você está tendo dificuldades para compartilhar volumes de armazenamento entre instâncias ou contêineres? O Armazenamento de Arquivos está agora disponível em versão Alpha pública até 12 de janeiro de 2026, sem custos!",
+  "pci_project_file_storage_alpha_banner_button": "Descobrir a alpha"
+}
diff --git a/packages/manager/apps/pci-block-storage/src/App.tsx b/packages/manager/apps/pci-block-storage/src/App.tsx
@@ -1,4 +1,4 @@
-import { RouterProvider, createHashRouter } from 'react-router-dom';
+import { createHashRouter, RouterProvider } from 'react-router-dom';
 import { QueryClientProvider } from '@tanstack/react-query';
 import { ReactQueryDevtools } from '@tanstack/react-query-devtools';
 import { odsSetup } from '@ovhcloud/ods-common-core';
@@ -10,6 +10,7 @@ import '@ovhcloud/ods-themes/default';
 import '@ovhcloud/ods-theme-blue-jeans';
 import '@ovh-ux/manager-pci-common/dist/style.css';
 import './index.scss';
+import { GeneralBannerContextProvider } from '@/contexts/GeneralBanner.context';
 
 odsSetup();
 
@@ -18,7 +19,9 @@ const router = createHashRouter(appRoutes);
 function App() {
   return (
     <QueryClientProvider client={queryClient}>
-      <RouterProvider router={router}></RouterProvider>
+      <GeneralBannerContextProvider>
+        <RouterProvider router={router} />
+      </GeneralBannerContextProvider>
       <ReactQueryDevtools initialIsOpen={false} />
     </QueryClientProvider>
   );
diff --git a/packages/manager/apps/pci-block-storage/src/api/feature.tsx b/packages/manager/apps/pci-block-storage/src/api/feature.tsx
@@ -0,0 +1,9 @@
+import { usePCIFeatureAvailability } from '@ovh-ux/manager-pci-common';
+
+export const FILE_STORAGE_ALPHA = 'pci-block-storage:file-storage-alpha-banner';
+
+export const useIsFileStorageAlphaBannerAvailable = () => {
+  const { data } = usePCIFeatureAvailability([FILE_STORAGE_ALPHA]);
+
+  return data?.get(FILE_STORAGE_ALPHA) ?? false;
+};
diff --git a/packages/manager/apps/pci-block-storage/src/components/banner/Banner.component.tsx b/packages/manager/apps/pci-block-storage/src/components/banner/Banner.component.tsx
@@ -0,0 +1,42 @@
+import { PropsWithChildren, useState } from 'react';
+import {
+  IconName,
+  Message,
+  MessageBody,
+  MessageIcon,
+  MessageProp,
+} from '@ovhcloud/ods-react';
+
+type BannerProps = PropsWithChildren<
+  {
+    iconName?: IconName;
+  } & MessageProp
+>;
+
+export const Banner = ({
+  iconName,
+  children,
+  onRemove,
+  dismissible = false,
+  ...messageProps
+}: BannerProps) => {
+  const [displayBanner, setDisplayBanner] = useState(true);
+
+  const handleRemove = () => {
+    onRemove?.();
+    if (dismissible) setDisplayBanner(false);
+  };
+
+  if (!displayBanner) return null;
+
+  return (
+    <Message
+      dismissible={dismissible}
+      onRemove={handleRemove}
+      {...messageProps}
+    >
+      {iconName && <MessageIcon name={iconName} />}
+      <MessageBody>{children}</MessageBody>
+    </Message>
+  );
+};
diff --git a/packages/manager/apps/pci-block-storage/src/components/banner/FileStorageAlphaBanner.component.tsx b/packages/manager/apps/pci-block-storage/src/components/banner/FileStorageAlphaBanner.component.tsx
@@ -0,0 +1,44 @@
+import { useEffect } from 'react';
+import { useTranslation } from 'react-i18next';
+import { useGeneralBannerContext } from '@/contexts/GeneralBanner.context';
+import { Banner } from '@/components/banner/Banner.component';
+import { ButtonLink } from '@/components/button-link/ButtonLink';
+import { useIsFileStorageAlphaBannerAvailable } from '@/api/feature';
+
+export const FileStorageAlphaBanner = () => {
+  const { t } = useTranslation(['general-banners']);
+
+  const { addBanner, getBanner } = useGeneralBannerContext();
+  const isFileStorageAlphaBannerAvailable = useIsFileStorageAlphaBannerAvailable();
+
+  useEffect(() => {
+    if (!isFileStorageAlphaBannerAvailable) return;
+
+    addBanner('alpha_file_storage', ({ onRemove }) => (
+      <Banner
+        iconName="circle-info"
+        dismissible
+        onRemove={onRemove}
+        className="w-full"
+      >
+        <div className="w-full flex flex-col gap-4 items-start">
+          <h4 className="m-0">
+            {t('pci_project_file_storage_alpha_banner_message_title')}
+          </h4>
+          <div>{t('pci_project_file_storage_alpha_banner_message')}</div>
+          <ButtonLink
+            isExternal
+            href="https://labs.ovhcloud.com/en/file-storage/"
+            target="_blank"
+            rel="noopener noreferrer"
+            size="xs"
+          >
+            {t('pci_project_file_storage_alpha_banner_button')}
+          </ButtonLink>
+        </div>
+      </Banner>
+    ));
+  }, [isFileStorageAlphaBannerAvailable]);
+
+  return getBanner('alpha_file_storage');
+};
diff --git a/packages/manager/apps/pci-block-storage/src/components/button-link/ButtonLink.tsx b/packages/manager/apps/pci-block-storage/src/components/button-link/ButtonLink.tsx
@@ -6,14 +6,25 @@ import {
   useMemo,
 } from 'react';
 import { Link } from 'react-router-dom';
-import { ButtonColor, ButtonVariant, ButtonSize } from '@ovhcloud/ods-react';
+import { ButtonColor, ButtonSize, ButtonVariant } from '@ovhcloud/ods-react';
 import './style.scss';
 import clsx from 'clsx';
 import { TrackActionParams, useTrackAction } from '@/hooks/useTrackAction';
 import { Icon } from '../icon/Icon';
 
-type ButtonLinkProps = {
+type InternalButtonProps = {
+  isExternal?: false;
   to: string;
+  href?: undefined;
+};
+
+type ExternalButtonProps = {
+  isExternal: true;
+  href: string;
+  to?: undefined;
+} & React.AnchorHTMLAttributes<HTMLAnchorElement>;
+
+type ButtonLinkProps = (InternalButtonProps | ExternalButtonProps) & {
   variant?: ButtonVariant;
   color?: ButtonColor;
   size?: ButtonSize;
@@ -30,7 +41,9 @@ export const ButtonLink = forwardRef<
 >(
   (
     {
+      isExternal,
       to,
+      href,
       variant = 'default',
       color = 'primary',
       size = 'md',
@@ -52,21 +65,35 @@ export const ButtonLink = forwardRef<
       [actionName, actionValues],
     );
 
-    const onTrackingClick = useTrackAction(trackingParams);
+    const handleTrackingClick = useTrackAction(trackingParams);
+
+    const classNames = clsx([
+      'button-link',
+      `button-link--${color}`,
+      `button-link--${size}`,
+      `button-link--${variant}`,
+      'box-border',
+      'no-underline',
+      className,
+    ]);
+
+    return isExternal ? (
+      <a
+        className={classNames}
+        href={href}
+        onClick={handleTrackingClick}
+        ref={ref}
+        {...htmlProps}
+      >
+        {!!icon && <Icon name={icon} />}
 
-    return (
+        {children}
+      </a>
+    ) : (
       <Link
-        className={clsx([
-          'button-link',
-          `button-link--${color}`,
-          `button-link--${size}`,
-          `button-link--${variant}`,
-          'box-border',
-          'no-underline',
-          className,
-        ])}
+        className={classNames}
         to={to}
-        onClick={onTrackingClick}
+        onClick={handleTrackingClick}
         ref={ref}
         {...htmlProps}
       >
diff --git a/packages/manager/apps/pci-block-storage/src/contexts/GeneralBanner.context.spec.tsx b/packages/manager/apps/pci-block-storage/src/contexts/GeneralBanner.context.spec.tsx
@@ -0,0 +1,45 @@
+import { render } from '@testing-library/react';
+import { useEffect } from 'react';
+import { userEvent } from '@testing-library/user-event';
+import {
+  GeneralBannerContextProvider,
+  useGeneralBannerContext,
+} from '@/contexts/GeneralBanner.context';
+
+describe('GeneralBannerContext', () => {
+  const testBanner = ({ onRemove }: { onRemove: () => void }) => (
+    <button onClick={onRemove} type="button">
+      click me
+    </button>
+  );
+  const TestComponent = () => {
+    const { addBanner, getBanner } = useGeneralBannerContext();
+
+    useEffect(() => {
+      addBanner('testBanner', testBanner);
+    }, []);
+
+    return getBanner('testBanner');
+  };
+
+  const renderWithGeneralBannerContext = () =>
+    render(
+      <GeneralBannerContextProvider>
+        <TestComponent />
+      </GeneralBannerContextProvider>,
+    );
+
+  it('should add the banner and display it', () => {
+    const { getByText } = renderWithGeneralBannerContext();
+
+    expect(getByText('click me')).toBeVisible();
+  });
+
+  it('should remove the banner when onRemoved is triggered', async () => {
+    const { getByText, queryByText } = renderWithGeneralBannerContext();
+
+    await userEvent.click(getByText('click me'));
+
+    expect(queryByText('click me')).toBeNull();
+  });
+});
diff --git a/packages/manager/apps/pci-block-storage/src/contexts/GeneralBanner.context.tsx b/packages/manager/apps/pci-block-storage/src/contexts/GeneralBanner.context.tsx
@@ -0,0 +1,49 @@
+import {
+  createContext,
+  FC,
+  PropsWithChildren,
+  useContext,
+  useState,
+} from 'react';
+
+type BannerName = string;
+type BannerValue = FC<{ onRemove: () => void }> | null;
+
+type TGeneralBannerValue = {
+  addBanner: (name: BannerName, bannerContent: BannerValue) => void;
+  getBanner: (name: BannerName) => JSX.Element | null;
+};
+
+const GeneralBannerContext = createContext<TGeneralBannerValue>({
+  addBanner: () => {},
+  getBanner: () => null,
+});
+
+export const GeneralBannerContextProvider = ({
+  children,
+}: PropsWithChildren) => {
+  const [banners, setBanners] = useState<Record<BannerName, BannerValue>>({});
+
+  const removeBanner = (name: BannerName) =>
+    setBanners((prev) => ({ ...prev, [name]: null }));
+
+  const addBanner = (name: BannerName, bannerValue: BannerValue) => {
+    setBanners((prev) => ({ [name]: bannerValue, ...prev }));
+  };
+
+  const getBanner = (name: BannerName) => {
+    const BannerValue = banners[name];
+
+    const handleRemoveBanner = () => removeBanner(name);
+
+    return BannerValue ? <BannerValue onRemove={handleRemoveBanner} /> : null;
+  };
+
+  return (
+    <GeneralBannerContext.Provider value={{ addBanner, getBanner }}>
+      {children}
+    </GeneralBannerContext.Provider>
+  );
+};
+
+export const useGeneralBannerContext = () => useContext(GeneralBannerContext);
diff --git a/packages/manager/apps/pci-block-storage/src/pages/list/List.page.spec.tsx b/packages/manager/apps/pci-block-storage/src/pages/list/List.page.spec.tsx
@@ -2,6 +2,7 @@ import { waitFor } from '@testing-library/react';
 import { describe, it, vi } from 'vitest';
 import ListingPage from './List.page';
 import { renderWithMockedWrappers } from '@/__tests__/renderWithMockedWrappers';
+import { useIsFileStorageAlphaBannerAvailable } from '@/api/feature';
 
 vi.mock('@ovh-ux/manager-react-shell-client', async (importOriginal) => {
   const actual: any = await importOriginal();
@@ -93,6 +94,10 @@ vi.mock('@/api/hooks/useVolume', () => ({
   })),
 }));
 
+vi.mock('@/api/feature', () => ({
+  useIsFileStorageAlphaBannerAvailable: () => true,
+}));
+
 afterEach(() => {
   vi.clearAllMocks();
 });
diff --git a/packages/manager/apps/pci-block-storage/src/pages/list/List.page.tsx b/packages/manager/apps/pci-block-storage/src/pages/list/List.page.tsx
