fix(pci-object-storage): ownerId type

ref: DTCORE-2868 Signed-off-by: Florian Renaut <[email protected]>
ovh · Jan 9, 2025 · 9e42257 · 9e42257
1 parent 35cbba1
commit 9e42257
Show file tree

Hide file tree

Showing 17 changed files with 55 additions and 79 deletions.
diff --git a/packages/manager/apps/pci-object-storage/src/api/data/storages.ts b/packages/manager/apps/pci-object-storage/src/api/data/storages.ts
@@ -18,7 +18,7 @@ export type TStorage = {
   objects?: unknown[];
   objectsSize?: number;
   virtualHost?: string;
-  ownerId?: string;
+  ownerId?: number;
   deploymentMode?: string;
   state?: string;
 };
@@ -142,7 +142,7 @@ export const createS3Storage = async ({
   projectId: string;
   containerName: string;
   region: string;
-  ownerId: string;
+  ownerId: number;
   encryption: string;
   versioning: boolean;
 }) => {

diff --git a/packages/manager/apps/pci-object-storage/src/api/data/user.ts b/packages/manager/apps/pci-object-storage/src/api/data/user.ts
@@ -30,7 +30,7 @@ export type TUser = {
 
 export const getUser = async (
   projectId: string,
-  userId: string,
+  userId: number,
 ): Promise<TUser> => {
   const { data } = await v6.get<TUser>(
     `/cloud/project/${projectId}/user/${userId}`,
@@ -64,7 +64,7 @@ export const deleteUser = async (
 };
 export const getUserStoragePolicy = async (
   projectId: string,
-  userId: string,
+  userId: number,
 ): Promise<{ policy: string }> => {
   const { data } = await v6.get(
     `/cloud/project/${projectId}/user/${userId}/policy`,
@@ -74,7 +74,7 @@ export const getUserStoragePolicy = async (
 
 export const postS3Secret = async (
   projectId: string,
-  userId: string,
+  userId: number,
   userAccess: string,
 ): Promise<{ secret: string }> => {
   const { data } = await v6.post(
@@ -100,7 +100,7 @@ export const importUserPolicy = async (
 
 export const generateS3Credentials = async (
   projectId: string,
-  userId: string,
+  userId: number,
 ): Promise<TS3Credentials> => {
   const { data } = await v6.post<TS3Credentials>(
     `/cloud/project/${projectId}/user/${userId}/s3Credentials`,

diff --git a/packages/manager/apps/pci-object-storage/src/api/hooks/useObject.ts b/packages/manager/apps/pci-object-storage/src/api/hooks/useObject.ts
@@ -71,7 +71,7 @@ type AddUserProps = {
   storageId: string;
   objectName: string;
   region: string;
-  userId: string;
+  userId: number;
   role: string;
   onError: (cause: Error) => void;
   onSuccess: () => void;
@@ -89,7 +89,7 @@ export const useAddUser = ({
 }: AddUserProps) => {
   const mutation = useMutation({
     mutationFn: async () =>
-      addUser(projectId, region, objectName, storageId, userId, role),
+      addUser(projectId, region, objectName, storageId, `${userId}`, role),
     onError,
     onSuccess: async () => {
       await queryClient.invalidateQueries({

diff --git a/packages/manager/apps/pci-object-storage/src/api/hooks/useStorages.ts b/packages/manager/apps/pci-object-storage/src/api/hooks/useStorages.ts
@@ -312,7 +312,7 @@ export interface UseCreateContainerArgs {
   archive?: boolean;
   containerName: string;
   region: string;
-  ownerId?: string;
+  ownerId?: number;
   encryption?: string;
   versioning?: boolean;
   containerType?: string;

diff --git a/packages/manager/apps/pci-object-storage/src/api/hooks/useUser.ts b/packages/manager/apps/pci-object-storage/src/api/hooks/useUser.ts
@@ -138,7 +138,7 @@ export const useDeleteUser = ({
 
 type UsePostS3SecretParams = {
   projectId: string;
-  userId: string;
+  userId: number;
   userAccess: string;
   onSuccess: ({ secret }: { secret: string }) => void;
   onError: (cause: ApiError) => void;

diff --git a/packages/manager/apps/pci-object-storage/src/components/Label.component.spec.tsx b/packages/manager/apps/pci-object-storage/src/components/Label.component.spec.tsx
@@ -20,12 +20,6 @@ describe('LabelComponent', () => {
     expect(queryByText('Help Text')).not.toBeInTheDocument();
   });
 
-  it('applies error color when hasError is true', () => {
-    const { getByText } = render(<LabelComponent text="Test Label" hasError />);
-    const label = getByText('Test Label');
-    expect(label).toHaveAttribute('color', 'error');
-  });
-
   it('applies custom className when provided', () => {
     const { getByText } = render(
       <LabelComponent text="Test Label" className="custom-class" />,

diff --git a/packages/manager/apps/pci-object-storage/src/components/Label.component.tsx b/packages/manager/apps/pci-object-storage/src/components/Label.component.tsx
@@ -1,9 +1,4 @@
-import {
-  OdsIcon,
-  OdsPopover,
-  OdsText,
-  OdsTooltip,
-} from '@ovhcloud/ods-components/react';
+import { OdsIcon, OdsPopover, OdsText } from '@ovhcloud/ods-components/react';
 
 type TLabelProps = {
   text: string;

diff --git a/packages/manager/apps/pci-object-storage/src/pages/objects/container/new/New.page.tsx b/packages/manager/apps/pci-object-storage/src/pages/objects/container/new/New.page.tsx
@@ -14,7 +14,6 @@ import { ApiError } from '@ovh-ux/manager-core-api';
 import {
   OdsBreadcrumb,
   OdsBreadcrumbItem,
-  OdsLink,
   OdsText,
 } from '@ovhcloud/ods-components/react';
 import {

diff --git a/...s/pci-object-storage/src/pages/objects/container/new/step/ContainerNameStep.component.tsx b/...s/pci-object-storage/src/pages/objects/container/new/step/ContainerNameStep.component.tsx
@@ -86,26 +86,28 @@ export function ContainerNameStep({
             : undefined
         }
       >
-        <OdsInput
-          value={form.containerName}
-          name="containerName"
-          onOdsBlur={() => setIsTouched(true)}
-          onOdsChange={(event) =>
-            setContainerName(event.detail.value.toString())
-          }
-          color="primary"
-        />
+        <OdsFormField>
+          <OdsInput
+            value={form.containerName}
+            name="containerName"
+            onOdsBlur={() => setIsTouched(true)}
+            onOdsChange={(event) =>
+              setContainerName(event.detail.value.toString())
+            }
+            color="primary"
+          />
+        </OdsFormField>
+        <OdsText
+          slot="helper"
+          className={`max-w-2xl ${
+            shouldDisplayError ? 'text-[var(--ods-color-critical-500)]' : ''
+          }`}
+        >
+          {t(
+            'pci_projects_project_storages_containers_add_pattern_help_storage-s3',
+          )}
+        </OdsText>
       </OdsFormField>
-      <OdsText
-        preset="paragraph"
-        className={`${
-          shouldDisplayError ? 'text-[var(--ods-color-critical-500)]' : ''
-        }`}
-      >
-        {t(
-          'pci_projects_project_storages_containers_add_pattern_help_storage-s3',
-        )}
-      </OdsText>
       {(form.deploymentMode === OBJECT_CONTAINER_MODE_MONO_ZONE ||
         form.deploymentMode === OBJECT_CONTAINER_MODE_MULTI_ZONES) && (
         <OdsMessage className="mt-4" color="information">

diff --git a/...apps/pci-object-storage/src/pages/objects/container/new/step/EncryptionStep.component.tsx b/...apps/pci-object-storage/src/pages/objects/container/new/step/EncryptionStep.component.tsx
@@ -73,10 +73,10 @@ export function EncryptionStep() {
               'pci_projects_project_storages_containers_data_encryption_aes256',
             )}
           </label>
-          <span id="trigger-popover">
+          <span id="trigger-popover" className="ml-2">
             <OdsIcon name="circle-question" />
           </span>
-          <OdsPopover triggerId="trigger-popover" className="w-4 h-4">
+          <OdsPopover triggerId="trigger-popover">
             {t(
               'pci_projects_project_storages_containers_data_encryption_aes256_tooltip',
             )}

diff --git a/...ps/pci-object-storage/src/pages/objects/container/new/step/LinkUserCreation.component.tsx b/...ps/pci-object-storage/src/pages/objects/container/new/step/LinkUserCreation.component.tsx
@@ -49,7 +49,7 @@ export default function LinkUserCreation({
 
   const { postS3Secret: showSecretKey } = usePostS3Secret({
     projectId,
-    userId: `${newUser?.id}`,
+    userId: newUser?.id,
     userAccess: newUser?.s3Credentials?.access,
     onSuccess: ({ secret }) => {
       setSecretUser(secret);
@@ -68,13 +68,10 @@ export default function LinkUserCreation({
     const data = await createUser(projectId, formState.description);
 
     poll<TUser>({
-      fn: () => getUser(projectId, `${data.id}`),
+      fn: () => getUser(projectId, data.id),
       ruleFn: (user: TUser) => user.status === 'ok',
       onSuccess: async ({ value }) => {
-        const credentials = await generateS3Credentials(
-          projectId,
-          `${value.id}`,
-        );
+        const credentials = await generateS3Credentials(projectId, value.id);
         setNewUser({
           ...value,
           access: credentials.access,
@@ -103,7 +100,6 @@ export default function LinkUserCreation({
           }
         >
           <LabelComponent
-            hasError={formState.hasError}
             text={tAssociateUser(
               'pci_projects_project_storages_containers_add_create_or_linked_user_create_user_label',
             )}

diff --git a/...ps/pci-object-storage/src/pages/objects/container/new/step/LinkUserSelector.component.tsx b/...ps/pci-object-storage/src/pages/objects/container/new/step/LinkUserSelector.component.tsx
@@ -19,7 +19,7 @@ import queryClient from '@/queryClient';
 import UserInformationTile from './UserInformationTile.component';
 
 type LinkUserSelectorProps = {
-  userId: string;
+  userId: number;
   onSelectOwner: (user: TUser) => void;
   onCancel: () => void;
 };
@@ -35,7 +35,7 @@ export default function LinkUserSelector({
   const { data: listUsers, isPending: isPendingListUsers } = useUsers(
     projectId,
   );
-  const formUser = listUsers?.find((user) => `${user.id}` === userId);
+  const formUser = listUsers?.find((user) => user.id === userId);
 
   const [secretUser, setSecretUser] = useState('');
 
@@ -46,32 +46,23 @@ export default function LinkUserSelector({
 
   const { postS3Secret: showSecretKey } = usePostS3Secret({
     projectId,
-    userId: `${formUser?.id}`,
+    userId: formUser?.id,
     userAccess: formUser?.s3Credentials?.access,
     onSuccess: ({ secret }) => {
       setSecretUser(secret);
     },
     onError: () => {},
   });
 
-  /**
-   * this prevent onOdsValueChange to be triggered twice, it can be removed
-   * when the issue on the OsdsSelect is fixed.
-   * @TODO remove when migrating to ODS 18
-   */
   useEffect(() => {
-    console.log('formUser', formUser);
     if (formUser?.s3Credentials) {
       showSecretKey();
     }
   }, [formUser]);
 
   const onShowCredentials = async () => {
     if (!formUser?.s3Credentials) {
-      const credentials = await generateS3Credentials(
-        projectId,
-        `${formUser?.id}`,
-      );
+      const credentials = await generateS3Credentials(projectId, formUser?.id);
       await queryClient.invalidateQueries({
         queryKey: [...getQueryKeyUsers(projectId), formUser?.id],
       });
@@ -97,8 +88,9 @@ export default function LinkUserSelector({
             'pci_projects_project_storages_containers_add_create_or_linked_user_linked_user_label',
           )}
         />
-        <div>
+        <div className="flex">
           <OdsSelect
+            className="min-w-[25rem]"
             value={`${formUser?.id}`}
             name="selectUser"
             isDisabled={

diff --git a/...r/apps/pci-object-storage/src/pages/objects/container/new/step/LinkUserStep.component.tsx b/...r/apps/pci-object-storage/src/pages/objects/container/new/step/LinkUserStep.component.tsx
@@ -24,10 +24,10 @@ export function LinkUserStep() {
   const [associateMode, setAssociateMode] = useState('');
   const onCancel = () => {
     setAssociateMode('');
-    setOwnerId('');
+    setOwnerId(undefined);
   };
   const onSelectOwner = (user: TUser) => {
-    setOwnerId(`${user?.id}`);
+    setOwnerId(user?.id);
   };
   return (
     <StepComponent

diff --git a/...ager/apps/pci-object-storage/src/pages/objects/container/new/useContainerCreationStore.ts b/...ager/apps/pci-object-storage/src/pages/objects/container/new/useContainerCreationStore.ts
@@ -11,7 +11,7 @@ export interface ContainerCreationForn {
   offer: string;
   deploymentMode: string;
   region: TRegionAvailability;
-  ownerId: string;
+  ownerId: number;
   versioning: boolean;
   encryption: string;
   containerName: string;
@@ -51,7 +51,7 @@ export interface ContainerStore {
   editRegion: () => void;
   submitRegion: () => void;
 
-  setOwnerId: (ownerId: string) => void;
+  setOwnerId: (ownerId: number) => void;
   editOwnerId: () => void;
   submitOwnerId: () => void;
 
@@ -74,7 +74,7 @@ const initialForm = {
   offer: OBJECT_CONTAINER_OFFER_STORAGE_STANDARD,
   deploymentMode: undefined,
   region: undefined,
-  ownerId: '',
+  ownerId: undefined,
   versioning: false,
   encryption: NO_ENCRYPTION_VALUE,
   containerName: '',
@@ -169,7 +169,7 @@ export const useContainerCreationStore = create<ContainerStore>()(
             offer,
             deploymentMode: undefined,
             region: undefined,
-            ownerId: '',
+            ownerId: undefined,
             versioning: false,
             encryption: NO_ENCRYPTION_VALUE,
             containerName: '',
@@ -200,7 +200,7 @@ export const useContainerCreationStore = create<ContainerStore>()(
             ...state.form,
             deploymentMode,
             region: undefined,
-            ownerId: '',
+            ownerId: undefined,
             versioning: false,
             encryption: NO_ENCRYPTION_VALUE,
             containerName: '',
@@ -222,7 +222,7 @@ export const useContainerCreationStore = create<ContainerStore>()(
           form: {
             ...state.form,
             region,
-            ownerId: '',
+            ownerId: undefined,
             versioning: false,
             encryption: NO_ENCRYPTION_VALUE,
             containerName: '',
@@ -248,7 +248,7 @@ export const useContainerCreationStore = create<ContainerStore>()(
           'containerType',
         ]),
 
-      setOwnerId: (ownerId: string) =>
+      setOwnerId: (ownerId: number) =>
         set((state) => ({
           form: {
             ...state.form,

diff --git a/...apps/pci-object-storage/src/pages/objects/container/object/add-user/StepOne.component.tsx b/...apps/pci-object-storage/src/pages/objects/container/object/add-user/StepOne.component.tsx
@@ -32,9 +32,9 @@ export default function StepOneComponent({
           )}
         />
         <OdsSelect
-          value={selectedUser?.id}
+          value={`${selectedUser?.id}`}
           onOdsChange={(event) => {
-            const user = users.find((u) => u.id === event.detail.value);
+            const user = users.find((u) => `${u.id}` === event.detail.value);
             onSelectUser(user);
           }}
           name={'userSelect'}

diff --git a/...manager/apps/pci-object-storage/src/pages/objects/container/object/add/AddObject.page.tsx b/...manager/apps/pci-object-storage/src/pages/objects/container/object/add/AddObject.page.tsx
@@ -194,7 +194,6 @@ export default function AddObjectPage() {
           text={t(
             'pci_projects_project_storages_containers_container_object_add_prefix_label',
           )}
-          hasError={!formState.prefix}
         />
 
         <OsdsInput
@@ -215,7 +214,6 @@ export default function AddObjectPage() {
             text={t(
               'pci_projects_project_storages_containers_container_object_add_storage_class_label',
             )}
-            hasError={false}
           />
           <OsdsRadioGroup
             required

diff --git a/packages/manager/apps/pci-object-storage/src/pages/objects/container/users/Create.page.tsx b/packages/manager/apps/pci-object-storage/src/pages/objects/container/users/Create.page.tsx
@@ -200,7 +200,7 @@ export default function UserCreatePage(): JSX.Element {
         try {
           const credentials = await generateS3Credentials(
             projectId,
-            `${targetUser.id}`,
+            targetUser.id,
           );
           setState({ ...state, isLoading: false });
           onSuccess({