feat(okms): add <OkmsUpdateNameModal /> common component

ref: #MANAGER-19793

Signed-off-by: Romain Jamet <[email protected]>

Author: Romain Jamet

packages/manager/apps/okms/src/common/components/okmsUpdateNameModal/OkmsUpdateNameModal.component.tsx

@@ -0,0 +1,44 @@
+import React from 'react';
+import { UpdateNameModal } from '@ovh-ux/manager-react-components';
+import { useTranslation } from 'react-i18next';
+import { useNavigate } from 'react-router-dom';
+import { NAMESPACES } from '@ovh-ux/manager-common-translations';
+import { useUpdateOkmsName } from '@/data/hooks/useUpdateOkmsName';
+import { OKMS } from '@/types/okms.type';
+
+type OkmsUpdateNameModalProps = {
+  okms: OKMS;
+};
+
+const OkmsUpdateNameModal = ({ okms }: OkmsUpdateNameModalProps) => {
+  const { t } = useTranslation([NAMESPACES.DASHBOARD, NAMESPACES.ACTIONS]);
+  const navigate = useNavigate();
+
+  const { updateOkmsName, isPending, error: updateError } = useUpdateOkmsName({
+    okms,
+    onSuccess: () => {
+      navigate('..');
+    },
+  });
+
+  const handleUpdateDisplayName = (newDisplayName: string) => {
+    updateOkmsName({ displayName: newDisplayName });
+  };
+
+  return (
+    <UpdateNameModal
+      isOpen
+      headline={t('modify_name', { ns: NAMESPACES.ACTIONS })}
+      inputLabel={t('display_name', { ns: NAMESPACES.DASHBOARD })}
+      defaultValue={okms.iam.displayName}
+      isLoading={isPending}
+      error={updateError?.message}
+      closeModal={() => {
+        navigate('..');
+      }}
+      updateDisplayName={handleUpdateDisplayName}
+    />
+  );
+};
+
+export default OkmsUpdateNameModal;

packages/manager/apps/okms/src/data/api/okmsService.ts

@@ -1,5 +1,5 @@
 import { apiClient } from '@ovh-ux/manager-core-api';
-import { ServiceDetails } from '@ovh-ux/manager-react-components';
+import { ServiceDetails } from '@ovh-ux/manager-module-common-api';
 
 export type UpdateOkmsNameParams = {
   serviceId: number;
@@ -12,14 +12,15 @@ export const updateOkmsName = async ({
   serviceId,
   displayName,
 }: UpdateOkmsNameParams) =>
-  apiClient.v6.put(`/services/${serviceId}`, {
+  apiClient.v6.put<ServiceDetails>(`/services/${serviceId}`, {
     displayName,
   });
 
 export const getOkmsServiceIdQueryKey = (okmsId: string) => [
   `get/okms/services`,
   okmsId,
 ];
+
 /**
  * allowedServices operations : List all services allowed in this kms
  */

packages/manager/apps/okms/src/data/hooks/useUpdateOkmsName.ts

@@ -1,26 +1,23 @@
 import { ApiError, ApiResponse } from '@ovh-ux/manager-core-api';
 import { useMutation, useQueryClient } from '@tanstack/react-query';
 import { useTranslation } from 'react-i18next';
-import {
-  getServiceDetailsQueryKey,
-  useNotifications,
-} from '@ovh-ux/manager-react-components';
+import { useNotifications } from '@ovh-ux/manager-react-components';
+import { NAMESPACES } from '@ovh-ux/manager-common-translations';
 import { okmsQueryKeys } from '../api/okms';
 import {
   updateOkmsNameQueryKey,
   getOkmsServiceIdQueryKey,
   getOkmsServiceId,
   updateOkmsName,
 } from '../api/okmsService';
+import { OKMS } from '@/types/okms.type';
 
 export type UpdateOkmsParams = {
-  okmsId: string;
+  okms: OKMS;
   onSuccess: () => void;
   onError?: (result: ApiError) => void;
 };
 export type UpdateOkmsNameMutationParams = {
-  /** Okms service id */
-  okms: string;
   /** Okms service new display name */
   displayName: string;
 };
@@ -29,60 +26,69 @@ export type UpdateOkmsNameMutationParams = {
  * Get the function to mutate a okms Services
  */
 export const useUpdateOkmsName = ({
-  okmsId,
+  okms,
   onSuccess,
   onError,
 }: UpdateOkmsParams) => {
   const queryClient = useQueryClient();
-  const { t } = useTranslation('key-management-service/serviceKeys');
-  const { addError, addSuccess, clearNotifications } = useNotifications();
+  const { t } = useTranslation([NAMESPACES.ACTIONS, NAMESPACES.ERROR]);
+  const { addSuccess, clearNotifications } = useNotifications();
 
-  const {
-    mutate: updateKmsName,
-    isPending,
-    error: updateNameError,
-  } = useMutation({
+  const { mutate, isPending, error: updateNameError } = useMutation({
     mutationKey: updateOkmsNameQueryKey(),
-    mutationFn: async ({ okms, displayName }: UpdateOkmsNameMutationParams) => {
+    mutationFn: async ({ displayName }: UpdateOkmsNameMutationParams) => {
       const { data: servicesId } = await queryClient.fetchQuery<
         ApiResponse<number[]>
       >({
-        queryKey: getOkmsServiceIdQueryKey(okms),
-        queryFn: () => getOkmsServiceId(okms),
+        queryKey: getOkmsServiceIdQueryKey(okms.id),
+        queryFn: () => getOkmsServiceId(okms.id),
       });
       return updateOkmsName({ serviceId: servicesId[0], displayName });
     },
-    onSuccess: async () => {
-      await queryClient.invalidateQueries({
-        queryKey: okmsQueryKeys.listDatagrid,
-      });
-      await queryClient.invalidateQueries({
-        queryKey: getServiceDetailsQueryKey(okmsId),
+    onSuccess: (_, { displayName }) => {
+      const previousData = queryClient.getQueryData<{ data: OKMS }>(
+        okmsQueryKeys.detail(okms.id),
+      );
+
+      // To handle the delay in which the new name is propagated to the OKMS databases, we need to:
+      // 1. Optimistically update the OKMS domain cache so that the user sees the new name on the OKMS dashboard immediately.
+      queryClient.setQueryData(okmsQueryKeys.detail(okms.id), {
+        data: {
+          ...previousData.data,
+          iam: {
+            ...previousData.data.iam,
+            displayName,
+          },
+        },
       });
-      await queryClient.invalidateQueries({
-        queryKey: okmsQueryKeys.detail(okmsId),
+
+      // 2. Invalidate the OKMS list query so that the list is refetched when the user returns to it.
+      queryClient.invalidateQueries({
+        queryKey: okmsQueryKeys.listDatagrid,
       });
+
+      // 3. Invalidate the OKMS list and detail queries after a delay to synchronize the front-end cache with the back-end.
+      setTimeout(async () => {
+        queryClient.invalidateQueries({
+          queryKey: okmsQueryKeys.detail(okms.id),
+        });
+        // Invalidate the list query again to handle the case where the user returns to the list before the data is propagated in the back-end.
+        queryClient.invalidateQueries({
+          queryKey: okmsQueryKeys.listDatagrid,
+        });
+      }, 3000);
+
       clearNotifications();
-      addSuccess(
-        t('key_management_service_service-keys_update_name_success'),
-        true,
-      );
+      addSuccess(t('modify_name_success', { ns: NAMESPACES.ACTIONS }), true);
       onSuccess?.();
     },
     onError: (result: ApiError) => {
-      clearNotifications();
-      addError(
-        t('key_management_service_service-keys_update_error', {
-          error: result.message,
-        }),
-        true,
-      );
       onError?.(result);
     },
   });
 
   return {
-    updateKmsName,
+    updateOkmsName: mutate,
     isPending,
     error: updateNameError,
   };