feat(pci-object-storage): add empty user modal

bump to MRC version also to 3.0.0 ref: DTCORE-3002 Signed-off-by: LIDRISSI Hamid <[email protected]>
ovh · Jan 23, 2025 · d1d1ed9 · d1d1ed9
1 parent bce5e6d
commit d1d1ed9
Show file tree

Hide file tree

Showing 14 changed files with 151 additions and 14 deletions.
diff --git a/packages/manager/apps/pci-object-storage/package.json b/packages/manager/apps/pci-object-storage/package.json
@@ -18,7 +18,7 @@
     "@ovh-ux/manager-config": "^8.0.0",
     "@ovh-ux/manager-core-api": "^0.9.0",
     "@ovh-ux/manager-pci-common": "^1.0.5",
-    "@ovh-ux/manager-react-components": "^2.6.1",
+    "@ovh-ux/manager-react-components": "^3.0.0",
     "@ovh-ux/manager-react-core-application": "^0.11.1",
     "@ovh-ux/manager-react-shell-client": "0.8.5",
     "@ovh-ux/manager-tailwind-config": "^0.2.1",

diff --git a/...pci-object-storage/public/translations/containers/add-user/empty-user/Messages_de_DE.json b/...pci-object-storage/public/translations/containers/add-user/empty-user/Messages_de_DE.json
@@ -0,0 +1,5 @@
+{
+  "pci_projects_project_storages_containers_container_empty_user_title": "Einen Nutzer zu meinem Container hinzufügen",
+  "pci_projects_project_storages_containers_container_empty_user_description": "Sie müssen einen User erstellen und im Bereich „Object Storage User“ Object Storage Credentials generieren.",
+  "pci_projects_project_storages_containers_container_empty_user_label": "Zu „Object Storage User“ wechseln"
+}
diff --git a/...pci-object-storage/public/translations/containers/add-user/empty-user/Messages_en_GB.json b/...pci-object-storage/public/translations/containers/add-user/empty-user/Messages_en_GB.json
@@ -0,0 +1,5 @@
+{
+  "pci_projects_project_storages_containers_container_empty_user_title": "Add a user to my container",
+  "pci_projects_project_storages_containers_container_empty_user_description": "You need to create a user and generate Object Storage credentials in the \"Object Storage users\" section.",
+  "pci_projects_project_storages_containers_container_empty_user_label": "Go to \"Object Storage users\""
+}
diff --git a/...pci-object-storage/public/translations/containers/add-user/empty-user/Messages_es_ES.json b/...pci-object-storage/public/translations/containers/add-user/empty-user/Messages_es_ES.json
@@ -0,0 +1,5 @@
+{
+  "pci_projects_project_storages_containers_container_empty_user_title": "Añadir un usuario a mi contenedor",
+  "pci_projects_project_storages_containers_container_empty_user_description": "Es necesario crear un usuario y generar claves Object Storage en la sección «Usuarios Object Storage».",
+  "pci_projects_project_storages_containers_container_empty_user_label": "Acceder a «Usuarios Object Storage»"
+}
diff --git a/...pci-object-storage/public/translations/containers/add-user/empty-user/Messages_fr_CA.json b/...pci-object-storage/public/translations/containers/add-user/empty-user/Messages_fr_CA.json
@@ -0,0 +1,5 @@
+{
+  "pci_projects_project_storages_containers_container_empty_user_title": "Ajouter un utilisateur à mon conteneur",
+  "pci_projects_project_storages_containers_container_empty_user_description": "Vous devez créer un utilisateur et générer des crédentials Object Storage dans la section « Utilisateurs Object Storage ».",
+  "pci_projects_project_storages_containers_container_empty_user_label": "Accéder à « Utilisateurs Object Storage »"
+}
diff --git a/...pci-object-storage/public/translations/containers/add-user/empty-user/Messages_fr_FR.json b/...pci-object-storage/public/translations/containers/add-user/empty-user/Messages_fr_FR.json
@@ -0,0 +1,5 @@
+{
+  "pci_projects_project_storages_containers_container_empty_user_title": "Ajouter un utilisateur à mon conteneur",
+  "pci_projects_project_storages_containers_container_empty_user_description": "Vous devez créer un utilisateur et générer des crédentials Object Storage dans la section « Utilisateurs Object Storage ».",
+  "pci_projects_project_storages_containers_container_empty_user_label": "Accéder à « Utilisateurs Object Storage »"
+}
diff --git a/...pci-object-storage/public/translations/containers/add-user/empty-user/Messages_it_IT.json b/...pci-object-storage/public/translations/containers/add-user/empty-user/Messages_it_IT.json
@@ -0,0 +1,5 @@
+{
+  "pci_projects_project_storages_containers_container_empty_user_title": "Aggiungi un utente al tuo container",
+  "pci_projects_project_storages_containers_container_empty_user_description": "È necessario creare un utente e generare le credenziali Object Storage nella sezione \"Utenti Object Storage\".",
+  "pci_projects_project_storages_containers_container_empty_user_label": "Accedere a \"Utenti Object Storage\""
+}
diff --git a/...pci-object-storage/public/translations/containers/add-user/empty-user/Messages_pl_PL.json b/...pci-object-storage/public/translations/containers/add-user/empty-user/Messages_pl_PL.json
@@ -0,0 +1,5 @@
+{
+  "pci_projects_project_storages_containers_container_empty_user_title": "Dodaj użytkownika do kontenera",
+  "pci_projects_project_storages_containers_container_empty_user_description": "Utwórz użytkownika i wygeneruj dane identyfikacyjne Object Storage w sekcji „Użytkownicy Object Storage”.",
+  "pci_projects_project_storages_containers_container_empty_user_label": "Dostęp do „Użytkownicy Object Storage”"
+}
diff --git a/...pci-object-storage/public/translations/containers/add-user/empty-user/Messages_pt_PT.json b/...pci-object-storage/public/translations/containers/add-user/empty-user/Messages_pt_PT.json
@@ -0,0 +1,5 @@
+{
+  "pci_projects_project_storages_containers_container_empty_user_title": "Adicionar um utilizador ao meu container",
+  "pci_projects_project_storages_containers_container_empty_user_description": "Deve criar um utilizador e gerar credenciais Object Storage na secção «Utilizadores Object Storage».",
+  "pci_projects_project_storages_containers_container_empty_user_label": "Aceder a «Utilizadores Object Storage»"
+}
diff --git a/packages/manager/apps/pci-object-storage/src/pages/objects/container/Actions.tsx b/packages/manager/apps/pci-object-storage/src/pages/objects/container/Actions.tsx
@@ -8,6 +8,7 @@ import { TStorage } from '@/api/data/storages';
 import { OBJECT_CONTAINER_MODE_LOCAL_ZONE } from '@/constants';
 import { isSwiftType } from '@/helpers';
 import { useUpdateStorageType } from '@/api/hooks/useStorages';
+import { useUsers } from '@/api/hooks/useUser';
 
 export function Actions({ storage }: Readonly<{ storage: TStorage }>) {
   const { t } = useTranslation('containers');
@@ -16,6 +17,8 @@ export function Actions({ storage }: Readonly<{ storage: TStorage }>) {
   const { projectId } = useParams();
   const { addSuccess, addError } = useNotifications();
 
+  const { validUsersWithCredentials } = useUsers(projectId);
+
   const { isPending, updateStorageType } = useUpdateStorageType({
     projectId,
     onSuccess() {
@@ -54,12 +57,14 @@ export function Actions({ storage }: Readonly<{ storage: TStorage }>) {
       id: 0,
       label: t('pci_projects_project_storages_containers_view_add_user_label'),
       onClick: () =>
-        navigate({
-          pathname: `./addUser`,
-          search: `?${createSearchParams({
-            containerId: storage.name,
-          })}`,
-        }),
+        validUsersWithCredentials?.length === 0
+          ? navigate('./emptyUser')
+          : navigate({
+              pathname: `./addUser`,
+              search: `?${createSearchParams({
+                containerId: storage.name,
+              })}`,
+            }),
       condition:
         storage.s3StorageType &&
         (!storage.deploymentMode ||

diff --git a/...nager/apps/pci-object-storage/src/pages/objects/container/empty-users/EmptyUsers.page.tsx b/...nager/apps/pci-object-storage/src/pages/objects/container/empty-users/EmptyUsers.page.tsx
@@ -0,0 +1,54 @@
+import { ODS_BUTTON_VARIANT } from '@ovhcloud/ods-components';
+import { OdsButton, OdsModal, OdsText } from '@ovhcloud/ods-components/react';
+import { useTranslation } from 'react-i18next';
+import { useNavigate, useParams, useSearchParams } from 'react-router-dom';
+
+export default function EmptyUsers() {
+  const { t } = useTranslation([
+    'containers/add-user/empty-user',
+    'containers/add-user',
+  ]);
+
+  const navigate = useNavigate();
+
+  const { objectName } = useParams();
+  const [searchParams] = useSearchParams();
+  const region = searchParams.get('region');
+
+  const onCancel = () =>
+    objectName ? navigate(`../?region=${region}`) : navigate(`..`);
+
+  return (
+    <OdsModal onOdsClose={onCancel} isOpen>
+      <OdsText preset="heading-3">
+        {t(
+          'pci_projects_project_storages_containers_container_empty_user_title',
+        )}
+      </OdsText>
+
+      <OdsText className="my-8">
+        {t(
+          'pci_projects_project_storages_containers_container_empty_user_description',
+        )}
+      </OdsText>
+
+      <OdsButton
+        slot="actions"
+        onClick={onCancel}
+        variant={ODS_BUTTON_VARIANT.outline}
+        label={t(
+          'containers/add-user:pci_projects_project_storages_containers_container_addUser_cancel_label',
+        )}
+      />
+      <OdsButton
+        slot="actions"
+        onClick={() =>
+          objectName ? navigate(`../../users`) : navigate(`../users`)
+        }
+        label={t(
+          'pci_projects_project_storages_containers_container_empty_user_label',
+        )}
+      />
+    </OdsModal>
+  );
+}
diff --git a/...ager/apps/pci-object-storage/src/pages/objects/container/object/show/ActionsComponent.tsx b/...ager/apps/pci-object-storage/src/pages/objects/container/object/show/ActionsComponent.tsx
@@ -7,6 +7,7 @@ import { addWeeks } from 'date-fns';
 import { OPENIO_PRESIGN_EXPIRE, TRACKING_PREFIX } from '@/constants';
 import { TObject } from '@/api/data/container';
 import { TContainer } from '@/pages/objects/container/object/show/Show.page';
+import { useUsers } from '@/api/hooks/useUser';
 
 type TIndexedObject = TObject & { index: string };
 
@@ -28,6 +29,8 @@ export default function ActionsComponent({
 
   const { projectId } = useParams();
 
+  const { validUsersWithCredentials } = useUsers(projectId);
+
   const download = async () => {
     trackClick({
       name: `${TRACKING_PREFIX}object::download-file`,
@@ -64,13 +67,18 @@ export default function ActionsComponent({
         label: t(
           'pci_projects_project_storages_containers_container_add_user_label',
         ),
-        onClick: () => {
-          navigate(
-            `./${encodeURIComponent(
-              object.name || object.key,
-            )}/addUser?region=${searchParams.get('region')}`,
-          );
-        },
+        onClick: () =>
+          validUsersWithCredentials?.length === 0
+            ? navigate(
+                `./${encodeURIComponent(
+                  object.name || object.key,
+                )}/emptyUser?region=${searchParams.get('region')}`,
+              )
+            : navigate(
+                `./${encodeURIComponent(
+                  object.name || object.key,
+                )}/addUser?region=${searchParams.get('region')}`,
+              ),
       },
     {
       id: 1,

diff --git a/packages/manager/apps/pci-object-storage/src/routes.tsx b/packages/manager/apps/pci-object-storage/src/routes.tsx
@@ -6,6 +6,7 @@ export const ROUTE_PATHS = {
   ONBOARDING: 'onboarding',
   CONTAINER_DELETE: 'delete',
   CONTAINER_ADD_USER: 'addUser',
+  CONTAINER_EMPTY_USER: 'emptyUser',
   STORAGES: '',
   CONTAINER_NEW: 'new',
   USER_LIST: 'users',
@@ -18,6 +19,7 @@ export const ROUTE_PATHS = {
   ENABLE_VERSIONING: 'enableVersioning',
   DOWNLOAD_RCLONE: 'rclone/download',
   ADD_USER_OBJECT: `:objectName/addUser`,
+  EMPTY_USER_OBJECT: `:objectName/emptyUser`,
 };
 
 const LayoutPage = lazy(() => import('@/pages/Layout'));
@@ -44,6 +46,9 @@ const AddUserObjectPage = lazy(() =>
 const AddUserToContainerPage = lazy(() =>
   import('@/pages/objects/container/add-user/AddUser.page'),
 );
+const EmptyUsersPage = lazy(() =>
+  import('@/pages/objects/container/empty-users/EmptyUsers.page'),
+);
 const UserListPage = lazy(() =>
   import('@/pages/objects/container/users/Listing.page'),
 );
@@ -83,6 +88,10 @@ const RoutesComponent = () => (
             path={ROUTE_PATHS.CONTAINER_ADD_USER}
             Component={AddUserToContainerPage}
           />
+          <Route
+            path={ROUTE_PATHS.CONTAINER_EMPTY_USER}
+            Component={EmptyUsersPage}
+          />
         </Route>
         <Route path={ROUTE_PATHS.USER_LIST} Component={UserListPage}>
           <Route path={ROUTE_PATHS.USER_CREATE} Component={UserCreatePage} />
@@ -102,6 +111,10 @@ const RoutesComponent = () => (
           path={ROUTE_PATHS.ADD_USER_OBJECT}
           Component={AddUserObjectPage}
         />
+        <Route
+          path={ROUTE_PATHS.EMPTY_USER_OBJECT}
+          Component={EmptyUsersPage}
+        />
         <Route path={ROUTE_PATHS.DELETE_OBJECT} Component={DeleteObjectPage} />
         <Route
           path={ROUTE_PATHS.ENABLE_VERSIONING}

diff --git a/yarn.lock b/yarn.lock
@@ -5852,6 +5852,23 @@
     tailwindcss "^3.4.4"
     uuid "^9.0.1"
 
+"@ovh-ux/manager-react-components@^2.5.1", "@ovh-ux/manager-react-components@^2.6.2":
+  version "2.6.2"
+  resolved "https://registry.yarnpkg.com/@ovh-ux/manager-react-components/-/manager-react-components-2.6.2.tgz#eb6b0db0541ec9f6f1318de3ce9d8bafd883a3cb"
+  integrity sha512-wykxmGlYAZmdLqUB8IcKKofMubPHagETKDBMFJiCjdnTT9+manV17JQPcZYSh9geN3GjWEgLd0ZVwrAj4j1lEw==
+  dependencies:
+    "@babel/plugin-proposal-private-property-in-object" "^7.21.11"
+    "@tanstack/react-query" "^5.51.21"
+    "@tanstack/react-table" "^8.20.1"
+    clsx "^2.1.1"
+    lodash.isdate "^4.0.1"
+    lodash.isequal "^4.5.0"
+    react-i18next "^14.0.5"
+    react-use "^17.5.0"
+    sass "1.71.0"
+    tailwindcss "^3.4.4"
+    uuid "^9.0.1"
+
 "@ovh-ux/[email protected]", "@ovh-ux/manager-react-shell-client@^0.8.5":
   version "0.8.5"
   resolved "https://registry.yarnpkg.com/@ovh-ux/manager-react-shell-client/-/manager-react-shell-client-0.8.5.tgz#b391298e455dd79b0d29a2cfff38a677c8472ef6"