feat(pci-object-storage): routing and layout tabs

ref: DTCORE-2874
Signed-off-by: Yoann Fievez <[email protected]>

packages/manager/apps/pci-object-storage/public/translations/objects/Messages_de_DE.json

@@ -0,0 +1,7 @@
+{
+  "pci_projects_project_storages_blocks_add_object_label": "Objektcontainer erstellen",
+  "pci_projects_project_storages_containers_my_containers_label": "Meine Container",
+  "pci_projects_project_storages_containers_s3_users_label": "S3-Nutzer",
+  "pci_projects_project_storages_containers_object_title": "Object Storage",
+  "pci_projects_project_storages_containers_object_description": "Hosten Sie Ihren Datenkatalog mit unserer Object-Storage-Lösung. Verwalten Sie diese Daten mit Ihrer Anwendung und nutzen Sie dafür S3-APIs."
+}

packages/manager/apps/pci-object-storage/public/translations/objects/Messages_en_GB.json

@@ -0,0 +1,7 @@
+{
+  "pci_projects_project_storages_blocks_add_object_label": "Create an object container ",
+  "pci_projects_project_storages_containers_my_containers_label": "My containers",
+  "pci_projects_project_storages_containers_s3_users_label": "S3 users",
+  "pci_projects_project_storages_containers_object_title": "Object Storage",
+  "pci_projects_project_storages_containers_object_description": "Host your data catalogue in our Object Storage solution. You can manage this data from your application using the S3 APIs."
+}

packages/manager/apps/pci-object-storage/public/translations/objects/Messages_es_ES.json

@@ -0,0 +1,7 @@
+{
+  "pci_projects_project_storages_blocks_add_object_label": "Crear un contenedor de objetos",
+  "pci_projects_project_storages_containers_my_containers_label": "Mis contenedores",
+  "pci_projects_project_storages_containers_s3_users_label": "Usuarios S3",
+  "pci_projects_project_storages_containers_object_title": "Object Storage",
+  "pci_projects_project_storages_containers_object_description": "Aloje su catálogo de datos en nuestra solución Object Storage. Puede administrar estos datos desde su aplicación gracias a las API S3."
+}

packages/manager/apps/pci-object-storage/public/translations/objects/Messages_fr_CA.json

@@ -0,0 +1,8 @@
+{
+  "pci_projects_project_storages_blocks_add_object_label": "Créer un conteneur d'objets",
+  "pci_projects_project_storages_containers_my_containers_label": "Mes conteneurs",
+  "pci_projects_project_storages_containers_s3_users_label": "Utilisateurs S3",
+
+  "pci_projects_project_storages_containers_object_title": "Object Storage",
+  "pci_projects_project_storages_containers_object_description": "Hébergez votre catalogue de données dans notre solution Object Storage. Vous pouvez administrer ces données depuis votre application grâce aux API S3."
+}

packages/manager/apps/pci-object-storage/public/translations/objects/Messages_fr_FR.json

@@ -0,0 +1,8 @@
+{
+  "pci_projects_project_storages_blocks_add_object_label": "Créer un conteneur d'objets",
+  "pci_projects_project_storages_containers_my_containers_label": "Mes conteneurs",
+  "pci_projects_project_storages_containers_s3_users_label": "Utilisateurs S3",
+
+  "pci_projects_project_storages_containers_object_title": "Object Storage",
+  "pci_projects_project_storages_containers_object_description": "Hébergez votre catalogue de données dans notre solution Object Storage. Vous pouvez administrer ces données depuis votre application grâce aux API S3."
+}

packages/manager/apps/pci-object-storage/public/translations/objects/Messages_it_IT.json

@@ -0,0 +1,7 @@
+{
+  "pci_projects_project_storages_blocks_add_object_label": "Crea un container di oggetti",
+  "pci_projects_project_storages_containers_my_containers_label": "I tuoi container",
+  "pci_projects_project_storages_containers_s3_users_label": "Utenti S3",
+  "pci_projects_project_storages_containers_object_title": "Object Storage",
+  "pci_projects_project_storages_containers_object_description": "Ospita il tuo catalogo di dati nella nostra soluzione Object Storage. Puoi gestire questi dati dalla tua applicazione con le API S3."
+}

packages/manager/apps/pci-object-storage/public/translations/objects/Messages_pl_PL.json

@@ -0,0 +1,7 @@
+{
+  "pci_projects_project_storages_blocks_add_object_label": "Utwórz kontener obiektów",
+  "pci_projects_project_storages_containers_my_containers_label": "Twoje kontenery",
+  "pci_projects_project_storages_containers_s3_users_label": "Użytkownicy S3",
+  "pci_projects_project_storages_containers_object_title": "Object Storage",
+  "pci_projects_project_storages_containers_object_description": "Hostuj katalog danych w naszym rozwiązaniu Object Storage. Danymi możesz zarządzać z poziomu swojej aplikacji za pomocą API S3."
+}

packages/manager/apps/pci-object-storage/public/translations/objects/Messages_pt_PT.json

@@ -0,0 +1,7 @@
+{
+  "pci_projects_project_storages_blocks_add_object_label": "Criar um container de objetos",
+  "pci_projects_project_storages_containers_my_containers_label": "Os meus containers",
+  "pci_projects_project_storages_containers_s3_users_label": "Utilizadores S3",
+  "pci_projects_project_storages_containers_object_title": "Object Storage",
+  "pci_projects_project_storages_containers_object_description": "Aloje o seu catálogo de dados na nossa solução Object Storage. Pode administrar estes dados a partir da sua aplicação graças às API S3."
+}

packages/manager/apps/pci-object-storage/src/components/TabsPanel.component.tsx

@@ -0,0 +1,75 @@
+import { useNotifications } from '@ovh-ux/manager-react-components';
+import { ShellContext } from '@ovh-ux/manager-react-shell-client';
+import {
+  OsdsTabBar,
+  OsdsTabBarItem,
+  OsdsTabs,
+} from '@ovhcloud/ods-components/react';
+import React, { useContext, useEffect, useState } from 'react';
+import { NavLink, useLocation } from 'react-router-dom';
+
+export type TabItemProps = {
+  name: string;
+  title: string | JSX.Element;
+  to?: string;
+  tracking?: string;
+  isDisabled?: boolean;
+};
+
+export type TabsProps = {
+  tabs: TabItemProps[];
+};
+
+export default function TabsPanel({ tabs }: Readonly<TabsProps>) {
+  const [activePanel, setActivePanel] = useState('');
+  const location = useLocation();
+  const { clearNotifications } = useNotifications();
+  const { tracking } = useContext(ShellContext)?.shell || {};
+
+  useEffect(() => {
+    const activeTab = tabs.find((tab) => location.pathname === tab.to);
+    if (activeTab) {
+      if (activeTab.name !== activePanel) {
+        clearNotifications();
+      }
+      setActivePanel(activeTab.name);
+    } else {
+      clearNotifications();
+      setActivePanel(tabs[0].name);
+    }
+  }, [location.pathname]);
+
+  return (
+    <OsdsTabs panel={activePanel}>
+      <OsdsTabBar slot="top">
+        {tabs.map((tab: TabItemProps) => (
+          <React.Fragment key={`osds-tab-bar-item-${tab.name}`}>
+            {tab.isDisabled ? (
+              <div>
+                <OsdsTabBarItem
+                  panel={tab.name}
+                  disabled={tab.isDisabled || undefined}
+                >
+                  {tab.title}
+                </OsdsTabBarItem>
+              </div>
+            ) : (
+              <NavLink
+                to={tab.to}
+                onClick={() => tracking?.trackClick({ name: tab.tracking })}
+                className="no-underline"
+              >
+                <OsdsTabBarItem
+                  panel={tab.name}
+                  disabled={tab.isDisabled || undefined}
+                >
+                  {tab.title}
+                </OsdsTabBarItem>
+              </NavLink>
+            )}
+          </React.Fragment>
+        ))}
+      </OsdsTabBar>
+    </OsdsTabs>
+  );
+}

packages/manager/apps/pci-object-storage/src/index.css

@@ -1,3 +1,7 @@
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
+
+.application {
+  @apply md:mx-12 mt-8;
+}

packages/manager/apps/pci-object-storage/src/pages/objects/Objects.page.tsx

@@ -0,0 +1,72 @@
+import { useProject } from '@ovh-ux/manager-pci-common';
+import {
+  Headers,
+  Notifications,
+  PciGuidesHeader,
+  useProjectUrl,
+} from '@ovh-ux/manager-react-components';
+import { OsdsBreadcrumb } from '@ovhcloud/ods-components/react';
+import { Suspense, useEffect, useState } from 'react';
+
+import { useTranslation } from 'react-i18next';
+import { Outlet, useLocation, useResolvedPath } from 'react-router-dom';
+import { ROUTE_PATHS } from '@/routes';
+import TabsPanel from '@/components/TabsPanel.component';
+
+export default function BillingPage() {
+  const { t } = useTranslation('objects');
+  const location = useLocation();
+  const hrefProject = useProjectUrl('public-cloud');
+  const { data: project } = useProject();
+
+  const tabs = [
+    {
+      name: 'pci_projects_project_storages_containers_my_containers_label',
+      title: t('pci_projects_project_storages_containers_my_containers_label'),
+      to: useResolvedPath(ROUTE_PATHS.OBJECTS).pathname,
+    },
+    {
+      name: 'pci_projects_project_storages_containers_s3_users_label',
+      title: t('pci_projects_project_storages_containers_s3_users_label'),
+      to: useResolvedPath(ROUTE_PATHS.USER_LIST).pathname,
+    },
+  ];
+
+  const [activePanelTranslation, setActivePanelTranslation] = useState(null);
+
+  useEffect(() => {
+    const activeTab = tabs.find((tab) => location.pathname === tab.to);
+    setActivePanelTranslation(t(activeTab?.name));
+  }, [location.pathname]);
+
+  return (
+    <>
+      <OsdsBreadcrumb
+        items={[
+          {
+            href: hrefProject,
+            label: project.description,
+          },
+          { label: activePanelTranslation },
+        ]}
+      />
+
+      <div className="header mb-6 mt-8">
+        <Headers
+          title={t('pci_projects_project_storages_containers_object_title')}
+          headerButton={<PciGuidesHeader category="objectStorage" />}
+        />
+      </div>
+
+      <Notifications />
+
+      <div className="my-10">
+        <TabsPanel tabs={tabs} />
+      </div>
+
+      <Suspense>
+        <Outlet />
+      </Suspense>
+    </>
+  );
+}

packages/manager/apps/pci-object-storage/src/pages/objects/container/Listing.page.tsx

@@ -0,0 +1,3 @@
+export default function Listing() {
+  return <div>Container listing</div>;
+}

packages/manager/apps/pci-object-storage/src/pages/objects/container/users/Listing.page.tsx

@@ -0,0 +1,3 @@
+export default function Listing() {
+  return <div>User listing</div>;
+}

packages/manager/apps/pci-object-storage/src/routes.tsx

@@ -1,16 +1,29 @@
 import { lazy } from 'react';
 import { Route, Routes } from 'react-router-dom';
 
-const ROUTE_PATHS = {
+export const ROUTE_PATHS = {
   ROOT: '/pci/projects/:projectId/storages/objects',
-  LISTING: '',
+  OBJECTS: '',
+  USER_LIST: 'users',
 };
 
 const LayoutPage = lazy(() => import('@/pages/Layout'));
+const ObjectsPage = lazy(() => import('@/pages/objects/Objects.page'));
+const ContainerListPage = lazy(() =>
+  import('@/pages/objects/container/Listing.page'),
+);
+const UserListPage = lazy(() =>
+  import('@/pages/objects/container/users/Listing.page'),
+);
 
 const RoutesComponent = () => (
   <Routes>
-    <Route id="root" path={ROUTE_PATHS.ROOT} Component={LayoutPage}></Route>
+    <Route id="root" path={ROUTE_PATHS.ROOT} Component={LayoutPage}>
+      <Route path={ROUTE_PATHS.OBJECTS} Component={ObjectsPage}>
+        <Route path={ROUTE_PATHS.OBJECTS} Component={ContainerListPage} />
+        <Route path={ROUTE_PATHS.USER_LIST} Component={UserListPage} />
+      </Route>
+    </Route>
     <Route path="" element={<>Page not found</>}></Route>
   </Routes>
 );