diff --git a/packages/manager/apps/pci-object-storage/public/translations/objects/Messages_de_DE.json b/packages/manager/apps/pci-object-storage/public/translations/objects/Messages_de_DE.json new file mode 100644 index 000000000000..302f6edc0f1a --- /dev/null +++ b/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." +} diff --git a/packages/manager/apps/pci-object-storage/public/translations/objects/Messages_en_GB.json b/packages/manager/apps/pci-object-storage/public/translations/objects/Messages_en_GB.json new file mode 100644 index 000000000000..d238c1721b7a --- /dev/null +++ b/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." +} diff --git a/packages/manager/apps/pci-object-storage/public/translations/objects/Messages_es_ES.json b/packages/manager/apps/pci-object-storage/public/translations/objects/Messages_es_ES.json new file mode 100644 index 000000000000..a67d0424d698 --- /dev/null +++ b/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." +} diff --git a/packages/manager/apps/pci-object-storage/public/translations/objects/Messages_fr_CA.json b/packages/manager/apps/pci-object-storage/public/translations/objects/Messages_fr_CA.json new file mode 100644 index 000000000000..460b13eabbe5 --- /dev/null +++ b/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." +} diff --git a/packages/manager/apps/pci-object-storage/public/translations/objects/Messages_fr_FR.json b/packages/manager/apps/pci-object-storage/public/translations/objects/Messages_fr_FR.json new file mode 100644 index 000000000000..460b13eabbe5 --- /dev/null +++ b/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." +} diff --git a/packages/manager/apps/pci-object-storage/public/translations/objects/Messages_it_IT.json b/packages/manager/apps/pci-object-storage/public/translations/objects/Messages_it_IT.json new file mode 100644 index 000000000000..58bf3d0763a8 --- /dev/null +++ b/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." +} diff --git a/packages/manager/apps/pci-object-storage/public/translations/objects/Messages_pl_PL.json b/packages/manager/apps/pci-object-storage/public/translations/objects/Messages_pl_PL.json new file mode 100644 index 000000000000..7915848b4f56 --- /dev/null +++ b/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." +} diff --git a/packages/manager/apps/pci-object-storage/public/translations/objects/Messages_pt_PT.json b/packages/manager/apps/pci-object-storage/public/translations/objects/Messages_pt_PT.json new file mode 100644 index 000000000000..c9541b2a02a3 --- /dev/null +++ b/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." +} diff --git a/packages/manager/apps/pci-object-storage/src/components/TabsPanel.component.tsx b/packages/manager/apps/pci-object-storage/src/components/TabsPanel.component.tsx new file mode 100644 index 000000000000..8b5daee77b28 --- /dev/null +++ b/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) { + 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 ( + + + {tabs.map((tab: TabItemProps) => ( + + {tab.isDisabled ? ( +
+ + {tab.title} + +
+ ) : ( + tracking?.trackClick({ name: tab.tracking })} + className="no-underline" + > + + {tab.title} + + + )} + + ))} + + + ); +} diff --git a/packages/manager/apps/pci-object-storage/src/components/common.module.css b/packages/manager/apps/pci-object-storage/src/components/common.module.css deleted file mode 100644 index 8c4aceade79c..000000000000 --- a/packages/manager/apps/pci-object-storage/src/components/common.module.css +++ /dev/null @@ -1,28 +0,0 @@ -.linkContainer a { - font-family: 'Source Sans Pro', sans-serif; - font-weight: 600; - color: rgb(0, 80, 215); - transition: background-size 0.2s ease-in 0s, color 0.1s ease-in-out 0s; - background-position: 0 100%; - background-repeat: no-repeat; - background-size: 0 2px; - background-image: linear-gradient(currentcolor, currentcolor); - outline: none; - cursor: pointer; - text-decoration: none; - user-select: auto; -} - -.linkContainer a:hover { - transition: background-size 0.2s ease-out 0s; - background-size: 100% 2px; -} - -.linkContainer a:focus { - transition: background-size 0.2s ease-out 0s; - background-size: 100% 2px; -} - -.linkContainer a:active { - transition: color ease-in-out 0s; -} diff --git a/packages/manager/apps/pci-object-storage/src/index.css b/packages/manager/apps/pci-object-storage/src/index.css index b5c61c956711..ef47e310969e 100644 --- a/packages/manager/apps/pci-object-storage/src/index.css +++ b/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; +} diff --git a/packages/manager/apps/pci-object-storage/src/pages/objects/Objects.page.tsx b/packages/manager/apps/pci-object-storage/src/pages/objects/Objects.page.tsx new file mode 100644 index 000000000000..eb236be258a1 --- /dev/null +++ b/packages/manager/apps/pci-object-storage/src/pages/objects/Objects.page.tsx @@ -0,0 +1,76 @@ +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 ( + <> + + +
+ + +
+ + + +
+ +
+ + + + + + ); +} diff --git a/packages/manager/apps/pci-object-storage/src/pages/objects/container/Listing.page.tsx b/packages/manager/apps/pci-object-storage/src/pages/objects/container/Listing.page.tsx new file mode 100644 index 000000000000..bb3f342fa44d --- /dev/null +++ b/packages/manager/apps/pci-object-storage/src/pages/objects/container/Listing.page.tsx @@ -0,0 +1,3 @@ +export default function Listing() { + return
Container listing
; +} diff --git a/packages/manager/apps/pci-object-storage/src/pages/objects/container/users/Listing.page.tsx b/packages/manager/apps/pci-object-storage/src/pages/objects/container/users/Listing.page.tsx new file mode 100644 index 000000000000..e8f96c39aa4b --- /dev/null +++ b/packages/manager/apps/pci-object-storage/src/pages/objects/container/users/Listing.page.tsx @@ -0,0 +1,3 @@ +export default function Listing() { + return
User listing
; +} diff --git a/packages/manager/apps/pci-object-storage/src/routes.tsx b/packages/manager/apps/pci-object-storage/src/routes.tsx index 7db953a8c948..288d9ee3d213 100644 --- a/packages/manager/apps/pci-object-storage/src/routes.tsx +++ b/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 = () => ( - + + + + + + Page not found}> );