From ccca4e8a9e7bd482b7686bbc0e5d662cf3eeecb6 Mon Sep 17 00:00:00 2001 From: Thibault Barske Date: Tue, 17 Dec 2024 10:46:56 +0100 Subject: [PATCH] fix(kms): Revert "feat(kms): refacto delete modal" This reverts commit d7c2efde61b46b4660ccbb894ce660de68f2e7f7. ref: MANAGER-15716 --- .../terminate/TerminateModal.component.tsx | 119 ++++++++++++++++++ .../terminate/TerminateModal.constants.ts | 1 + .../BillingInformationsTile.tsx | 43 ++++++- .../src/data/hooks/useTerminateOKms.ts | 28 ++--- .../dashboard/KmsDashboard.page.spec.tsx | 6 +- .../GeneralInformations.tsx | 5 +- .../pages/listing/terminate/TerminateKms.tsx | 51 ++------ .../src/routes/routes.constants.ts | 2 +- .../src/routes/routes.tsx | 12 -- 9 files changed, 189 insertions(+), 78 deletions(-) create mode 100644 packages/manager/apps/key-management-service/src/components/Modal/terminate/TerminateModal.component.tsx create mode 100644 packages/manager/apps/key-management-service/src/components/Modal/terminate/TerminateModal.constants.ts diff --git a/packages/manager/apps/key-management-service/src/components/Modal/terminate/TerminateModal.component.tsx b/packages/manager/apps/key-management-service/src/components/Modal/terminate/TerminateModal.component.tsx new file mode 100644 index 000000000000..29df84dfd14b --- /dev/null +++ b/packages/manager/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 = ({ + closeModal, + isLoading, + onConfirmTerminate, +}) => { + const { trackClick } = useOvhTracking(); + const { t } = useTranslation('key-management-service/terminate'); + const [terminateInput, setTerminateInput] = useState(''); + + const close = () => { + setTerminateInput(''); + closeModal(); + }; + + return ( + +
+ {isLoading ? ( +
+ +
+ ) : ( + <> + + {t('key_management_service_terminate_description', { + terminateKeyword: terminateValue, + })} + + + setTerminateInput(e.detail.value) + } + /> + + )} +
+ { + trackClick({ + location: PageLocation.popup, + buttonType: ButtonType.button, + actionType: 'navigation', + actions: ['delete_kms', 'cancel'], + }); + close(); + }} + > + {t('key_management_service_terminate_cancel')} + + { + trackClick({ + location: PageLocation.popup, + buttonType: ButtonType.button, + actionType: 'navigation', + actions: ['delete_kms', 'confirm'], + }); + setTerminateInput(''); + onConfirmTerminate(); + }} + > + {t('key_management_service_terminate_confirm')} + + + ); +}; diff --git a/packages/manager/apps/key-management-service/src/components/Modal/terminate/TerminateModal.constants.ts b/packages/manager/apps/key-management-service/src/components/Modal/terminate/TerminateModal.constants.ts new file mode 100644 index 000000000000..b12864b664ed --- /dev/null +++ b/packages/manager/apps/key-management-service/src/components/Modal/terminate/TerminateModal.constants.ts @@ -0,0 +1 @@ +export const terminateValue = 'TERMINATE'; diff --git a/packages/manager/apps/key-management-service/src/components/layout-helpers/Dashboard/GeneralInformationsTiles/BillingInformationsTile.tsx b/packages/manager/apps/key-management-service/src/components/layout-helpers/Dashboard/GeneralInformationsTiles/BillingInformationsTile.tsx index 36b856b43fdc..c0334ef1e19c 100644 --- a/packages/manager/apps/key-management-service/src/components/layout-helpers/Dashboard/GeneralInformationsTiles/BillingInformationsTile.tsx +++ b/packages/manager/apps/key-management-service/src/components/layout-helpers/Dashboard/GeneralInformationsTiles/BillingInformationsTile.tsx @@ -10,16 +10,19 @@ 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'; @@ -27,25 +30,47 @@ 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 = ({ )} - + {showTerminationModal && ( + + )} ); }; 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 index c3f4e751017b..a862377f09d9 100644 --- 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, 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,9 +45,9 @@ 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', { @@ -58,9 +55,8 @@ export const useTerminateOKms = ({ }), 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 index 698c515e6871..5a8dfdaa55fe 100644 --- 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/packages/manager/apps/key-management-service/src/pages/dashboard/generalInformations/GeneralInformations.tsx b/packages/manager/apps/key-management-service/src/pages/dashboard/generalInformations/GeneralInformations.tsx index 3f7e3329a5dd..64853d40c477 100644 --- a/packages/manager/apps/key-management-service/src/pages/dashboard/generalInformations/GeneralInformations.tsx +++ b/packages/manager/apps/key-management-service/src/pages/dashboard/generalInformations/GeneralInformations.tsx @@ -36,7 +36,10 @@ function GeneralInformationsTab() { okmsData={okms.data} okmsServiceInfos={okmsService.data} /> - + ); } diff --git a/packages/manager/apps/key-management-service/src/pages/listing/terminate/TerminateKms.tsx b/packages/manager/apps/key-management-service/src/pages/listing/terminate/TerminateKms.tsx index 89b6c6c7fcbf..d829aff8b300 100644 --- a/packages/manager/apps/key-management-service/src/pages/listing/terminate/TerminateKms.tsx +++ b/packages/manager/apps/key-management-service/src/pages/listing/terminate/TerminateKms.tsx @@ -1,23 +1,17 @@ import React from 'react'; -import { - ButtonType, - PageLocation, - PageType, - useOvhTracking, -} from '@ovh-ux/manager-react-shell-client'; +import { PageType, useOvhTracking } from '@ovh-ux/manager-react-shell-client'; import { useNavigate, useParams } from 'react-router-dom'; -import { useTranslation } from 'react-i18next'; -import { - DeleteModal, - defaultDeleteModalTerminateValue, -} from '@ovh-ux/manager-react-components'; +import { TerminateModal } from '@/components/Modal/terminate/TerminateModal.component'; import { useTerminateOKms } from '@/data/hooks/useTerminateOKms'; export default function TerminateKms() { const navigate = useNavigate(); - const { t } = useTranslation('key-management-service/terminate'); + const { trackPage } = useOvhTracking(); const { okmsId } = useParams(); - const { trackPage, trackClick } = useOvhTracking(); + + const closeModal = () => { + navigate('..'); + }; const { terminateKms, isPending } = useTerminateOKms({ okmsId, @@ -26,43 +20,22 @@ export default function TerminateKms() { pageType: PageType.bannerSuccess, pageName: 'delete_kms_success', }); + closeModal(); }, onError: () => { trackPage({ pageType: PageType.bannerError, pageName: 'delete_kms_error', }); - }, - onSettled: () => { - navigate('..'); + closeModal(); }, }); return ( - { - trackClick({ - location: PageLocation.popup, - buttonType: ButtonType.button, - actionType: 'navigation', - actions: ['delete_kms', 'cancel'], - }); - navigate('..'); - }} + { - trackClick({ - location: PageLocation.popup, - buttonType: ButtonType.button, - actionType: 'navigation', - actions: ['delete_kms', 'confirm'], - }); - terminateKms(); - }} - deleteInputLabel={t('key_management_service_terminate_description', { - terminateKeyword: defaultDeleteModalTerminateValue, - })} /> ); } diff --git a/packages/manager/apps/key-management-service/src/routes/routes.constants.ts b/packages/manager/apps/key-management-service/src/routes/routes.constants.ts index f9847cc3ec15..0041c5ff8b1e 100644 --- a/packages/manager/apps/key-management-service/src/routes/routes.constants.ts +++ b/packages/manager/apps/key-management-service/src/routes/routes.constants.ts @@ -2,7 +2,7 @@ export const ROUTES_URLS = { root: '/', listing: '/', onboarding: '/onboarding', - terminateOkms: 'terminate', + terminateOkms: '/terminate', createKeyManagementService: 'create', okmsId: ':okmsId', okmsUpdateName: 'update-name', diff --git a/packages/manager/apps/key-management-service/src/routes/routes.tsx b/packages/manager/apps/key-management-service/src/routes/routes.tsx index 015abd04f327..fddde97f6f77 100644 --- a/packages/manager/apps/key-management-service/src/routes/routes.tsx +++ b/packages/manager/apps/key-management-service/src/routes/routes.tsx @@ -99,18 +99,6 @@ export default [ }, }, }, - { - path: ROUTES_URLS.terminateOkms, - ...lazyRouteConfig(() => - import('@/pages/listing/terminate/TerminateKms'), - ), - handle: { - tracking: { - pageName: 'terminate', - pageType: PageType.popup, - }, - }, - }, ], }, {