fix(kms): Revert "feat(kms): refacto delete modal"

This reverts commit d7c2efd. ref: MANAGER-15716
ovh · Dec 17, 2024 · ccca4e8 · ccca4e8
1 parent 0916c1c
commit ccca4e8
Show file tree

Hide file tree

Showing 9 changed files with 189 additions and 78 deletions.
diff --git a/...r/apps/key-management-service/src/components/Modal/terminate/TerminateModal.component.tsx b/...r/apps/key-management-service/src/components/Modal/terminate/TerminateModal.component.tsx
@@ -0,0 +1,119 @@
+import { ODS_THEME_COLOR_INTENT } from '@ovhcloud/ods-common-theming';
+import {
+  ButtonType,
+  PageLocation,
+  useOvhTracking,
+} from '@ovh-ux/manager-react-shell-client';
+import {
+  ODS_BUTTON_TYPE,
+  ODS_BUTTON_VARIANT,
+  ODS_INPUT_TYPE,
+  ODS_SPINNER_SIZE,
+  ODS_TEXT_LEVEL,
+  OdsInputValueChangeEvent,
+} from '@ovhcloud/ods-components';
+import {
+  OsdsButton,
+  OsdsInput,
+  OsdsModal,
+  OsdsSpinner,
+  OsdsText,
+} from '@ovhcloud/ods-components/react';
+import React, { useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { terminateValue } from './TerminateModal.constants';
+
+export type TerminateModalProps = {
+  closeModal: () => void;
+  isLoading?: boolean;
+  onConfirmTerminate: () => void;
+};
+
+export const TerminateModal: React.FC<TerminateModalProps> = ({
+  closeModal,
+  isLoading,
+  onConfirmTerminate,
+}) => {
+  const { trackClick } = useOvhTracking();
+  const { t } = useTranslation('key-management-service/terminate');
+  const [terminateInput, setTerminateInput] = useState('');
+
+  const close = () => {
+    setTerminateInput('');
+    closeModal();
+  };
+
+  return (
+    <OsdsModal
+      dismissible
+      color={ODS_THEME_COLOR_INTENT.warning}
+      headline={t('key_management_service_terminate_heading')}
+      onOdsModalClose={close}
+    >
+      <div className="mt-8">
+        {isLoading ? (
+          <div className="flex justify-center">
+            <OsdsSpinner inline size={ODS_SPINNER_SIZE.md} />
+          </div>
+        ) : (
+          <>
+            <OsdsText
+              color={ODS_THEME_COLOR_INTENT.text}
+              level={ODS_TEXT_LEVEL.body}
+              className="block mb-3"
+            >
+              {t('key_management_service_terminate_description', {
+                terminateKeyword: terminateValue,
+              })}
+            </OsdsText>
+            <OsdsInput
+              disabled={isLoading || undefined}
+              type={ODS_INPUT_TYPE.text}
+              value={terminateInput}
+              onOdsValueChange={(e: OdsInputValueChangeEvent) =>
+                setTerminateInput(e.detail.value)
+              }
+            />
+          </>
+        )}
+      </div>
+      <OsdsButton
+        disabled={isLoading || undefined}
+        slot="actions"
+        type={ODS_BUTTON_TYPE.button}
+        variant={ODS_BUTTON_VARIANT.ghost}
+        color={ODS_THEME_COLOR_INTENT.primary}
+        onClick={() => {
+          trackClick({
+            location: PageLocation.popup,
+            buttonType: ButtonType.button,
+            actionType: 'navigation',
+            actions: ['delete_kms', 'cancel'],
+          });
+          close();
+        }}
+      >
+        {t('key_management_service_terminate_cancel')}
+      </OsdsButton>
+      <OsdsButton
+        disabled={isLoading || terminateInput !== terminateValue || undefined}
+        slot="actions"
+        type={ODS_BUTTON_TYPE.button}
+        variant={ODS_BUTTON_VARIANT.flat}
+        color={ODS_THEME_COLOR_INTENT.primary}
+        onClick={() => {
+          trackClick({
+            location: PageLocation.popup,
+            buttonType: ButtonType.button,
+            actionType: 'navigation',
+            actions: ['delete_kms', 'confirm'],
+          });
+          setTerminateInput('');
+          onConfirmTerminate();
+        }}
+      >
+        {t('key_management_service_terminate_confirm')}
+      </OsdsButton>
+    </OsdsModal>
+  );
+};
diff --git a/...er/apps/key-management-service/src/components/Modal/terminate/TerminateModal.constants.ts b/...er/apps/key-management-service/src/components/Modal/terminate/TerminateModal.constants.ts
@@ -0,0 +1 @@
+export const terminateValue = 'TERMINATE';
diff --git a/.../components/layout-helpers/Dashboard/GeneralInformationsTiles/BillingInformationsTile.tsx b/.../components/layout-helpers/Dashboard/GeneralInformationsTiles/BillingInformationsTile.tsx
@@ -10,42 +10,67 @@ import {
   ODS_ICON_SIZE,
   ODS_TEXT_COLOR_INTENT,
 } from '@ovhcloud/ods-components';
-import { Outlet, useNavigate } from 'react-router-dom';
 import { OsdsChip, OsdsIcon, OsdsLink } from '@ovhcloud/ods-components/react';
 import React, { useContext, useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import {
   ButtonType,
   PageLocation,
+  PageType,
   ShellContext,
   useOvhTracking,
 } from '@ovh-ux/manager-react-shell-client';
+import { OKMS } from '@/types/okms.type';
+import { useTerminateOKms } from '@/data/hooks/useTerminateOKms';
+import { TerminateModal } from '@/components/Modal/terminate/TerminateModal.component';
 import { OkmsServiceState } from '../okmsServiceState/OkmsServiceState.component';
 import { Tile } from '@/components/dashboard/tile/tile.component';
 import { TileItem } from '@/components/dashboard/tile-item/tileItem.component';
 import { TileValue } from '@/components/dashboard/tile-value/tileValue.component';
 import { TileSeparator } from '@/components/dashboard/tile-separator/tileSeparator';
 import { TileValueDate } from '@/components/dashboard/tile-value-date/tileValueDate.component';
 import { DISPLAY_CONTACTS_MANAGEMENT_KEY } from './BillingInformationsTile.constants';
-import { ROUTES_URLS } from '@/routes/routes.constants';
 
 type BillingInformationsTileProps = {
+  okmsData?: OKMS;
   okmsService?: ServiceDetails;
 };
 
 const BillingInformationsTile = ({
+  okmsData,
   okmsService,
 }: BillingInformationsTileProps) => {
   const { t } = useTranslation('key-management-service/dashboard');
-  const navigate = useNavigate();
-  const { trackClick } = useOvhTracking();
+  const { trackClick, trackPage } = useOvhTracking();
   const [contactUrl, setContactUrl] = useState('');
+  const [showTerminationModal, setShowTerminationModal] = useState(false);
   const { data: availability } = useFeatureAvailability([
     DISPLAY_CONTACTS_MANAGEMENT_KEY,
   ]);
   const {
     shell: { navigation },
   } = useContext(ShellContext);
+  const closeTerminateModal = () => {
+    setShowTerminationModal(false);
+  };
+
+  const { terminateKms, isPending } = useTerminateOKms({
+    okmsId: okmsData.id,
+    onSuccess: () => {
+      trackPage({
+        pageType: PageType.bannerSuccess,
+        pageName: 'delete_kms_success',
+      });
+      closeTerminateModal();
+    },
+    onError: () => {
+      trackPage({
+        pageType: PageType.bannerError,
+        pageName: 'delete_kms_error',
+      });
+      closeTerminateModal();
+    },
+  });
 
   const dateFormat: Intl.DateTimeFormatOptions = {
     day: '2-digit',
@@ -65,7 +90,7 @@ const BillingInformationsTile = ({
           actionType: 'navigation',
           actions: ['delete_kms'],
         });
-        navigate(ROUTES_URLS.terminateOkms);
+        setShowTerminationModal(true);
       },
     },
   ];
@@ -187,7 +212,13 @@ const BillingInformationsTile = ({
           </>
         )}
       </Tile>
-      <Outlet />
+      {showTerminationModal && (
+        <TerminateModal
+          onConfirmTerminate={terminateKms}
+          closeModal={closeTerminateModal}
+          isLoading={isPending}
+        />
+      )}
     </>
   );
 };

diff --git a/packages/manager/apps/key-management-service/src/data/hooks/useTerminateOKms.ts b/packages/manager/apps/key-management-service/src/data/hooks/useTerminateOKms.ts
@@ -1,10 +1,6 @@
 import { ApiError, ApiResponse } from '@ovh-ux/manager-core-api';
 import { useNotifications } from '@ovh-ux/manager-react-components';
-import {
-  MutationOptions,
-  useMutation,
-  useQueryClient,
-} from '@tanstack/react-query';
+import { useMutation, useQueryClient } from '@tanstack/react-query';
 import { useTranslation } from 'react-i18next';
 import { getOkmsServicesResourceListQueryKey } from '../api/okms';
 import {
@@ -14,14 +10,15 @@ import {
   terminateOKmsQueryKey,
 } from '../api/okmsService';
 
-export type UseTerminateOkmsParams = {
-  okmsId: string;
-} & MutationOptions<ApiResponse<{ message: string }>, ApiError>;
-
 export const useTerminateOKms = ({
   okmsId,
-  ...options
-}: UseTerminateOkmsParams) => {
+  onSuccess,
+  onError,
+}: {
+  okmsId: string;
+  onSuccess?: () => void;
+  onError?: () => void;
+}) => {
   const queryClient = useQueryClient();
   const { addError, addSuccess, clearNotifications } = useNotifications();
   const { t } = useTranslation('key-management-service/terminate');
@@ -37,7 +34,7 @@ export const useTerminateOKms = ({
       });
       return terminateOKms({ serviceId: servicesId[0] });
     },
-    onSuccess: (...params) => {
+    onSuccess: () => {
       clearNotifications();
       addSuccess(
         t('key_management_service_terminate_success_banner', {
@@ -48,19 +45,18 @@ export const useTerminateOKms = ({
       queryClient.invalidateQueries({
         queryKey: getOkmsServicesResourceListQueryKey,
       });
-      options?.onSuccess?.(...params);
+      onSuccess?.();
     },
-    onError: (result: ApiError, ...params) => {
+    onError: (result: ApiError) => {
       clearNotifications();
       addError(
         t('key_management_service_terminate_error', {
           error: result.message,
         }),
         true,
       );
-      options?.onError?.(result, ...params);
+      onError?.();
     },
-    ...options,
   });
 
   return {

diff --git a/packages/manager/apps/key-management-service/src/pages/dashboard/KmsDashboard.page.spec.tsx b/packages/manager/apps/key-management-service/src/pages/dashboard/KmsDashboard.page.spec.tsx
@@ -1,9 +1,9 @@
 import { act, screen, waitFor } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import { renderTestApp } from '@/utils/tests/renderTestApp';
+import '@testing-library/jest-dom';
 import { labels } from '@/utils/tests/init.i18n';
 import { okmsMock } from '@/mocks/kms/okms.mock';
-import '@testing-library/jest-dom';
 
 describe('KMS dashboard test suite', () => {
   it('should display an error if the API is KO', async () => {
@@ -134,12 +134,12 @@ describe('KMS dashboard test suite', () => {
     await waitFor(
       () =>
         expect(
-          screen.getAllByText(
+          screen.getByText(
             labels.serviceKeys[
               'key_management_service_service-keys_dashboard_field_name'
             ],
           ),
-        ).toHaveLength(2),
+        ).toBeVisible(),
       {
         timeout: 30_000,
       },

diff --git a/...ps/key-management-service/src/pages/dashboard/generalInformations/GeneralInformations.tsx b/...ps/key-management-service/src/pages/dashboard/generalInformations/GeneralInformations.tsx
@@ -36,7 +36,10 @@ function GeneralInformationsTab() {
         okmsData={okms.data}
         okmsServiceInfos={okmsService.data}
       />
-      <BillingInformationsTile okmsService={okmsService.data} />
+      <BillingInformationsTile
+        okmsData={okms.data}
+        okmsService={okmsService.data}
+      />
     </div>
   );
 }