feat(page-cluster): settings danger zone (#448)

libs/pages/cluster/src/lib/feature/page-settings-danger-zone-feature/page-settings-danger-zone-feature.spec.tsx

@@ -0,0 +1,9 @@
+import { render } from '__tests__/utils/setup-jest'
+import PageSettingsDangerZoneFeature from './page-settings-danger-zone-feature'
+
+describe('PageSettingsDangerZoneFeature', () => {
+ it('should render successfully', () => {
+ const { baseElement } = render(<PageSettingsDangerZoneFeature />)
+ expect(baseElement).toBeTruthy()
+ })
+})

libs/pages/cluster/src/lib/feature/page-settings-danger-zone-feature/page-settings-danger-zone-feature.tsx

@@ -0,0 +1,27 @@
+import { useDispatch, useSelector } from 'react-redux'
+import { useNavigate, useParams } from 'react-router-dom'
+import { deleteClusterAction, selectClusterById } from '@qovery/domains/organization'
+import { ClusterEntity } from '@qovery/shared/interfaces'
+import { CLUSTERS_GENERAL_URL, CLUSTERS_URL } from '@qovery/shared/routes'
+import { AppDispatch, RootState } from '@qovery/store'
+import PageSettingsDangerZone from '../../ui/page-settings-danger-zone/page-settings-danger-zone'
+
+export function PageSettingsDangerZoneFeature() {
+ const { organizationId = '', clusterId = '' } = useParams()
+ const dispatch = useDispatch<AppDispatch>()
+ const navigate = useNavigate()
+
+ const cluster = useSelector<RootState, ClusterEntity | undefined>((state) => selectClusterById(state, clusterId))
+
+ const deleteCluster = () => {
+ if (cluster) {
+ dispatch(deleteClusterAction({ organizationId, clusterId }))
+ .unwrap()
+ .then(() => navigate(CLUSTERS_URL(organizationId) + CLUSTERS_GENERAL_URL))
+ }
+ }
+
+ return <PageSettingsDangerZone deleteCluster={deleteCluster} cluster={cluster} />
+}
+
+export default PageSettingsDangerZoneFeature

libs/pages/cluster/src/lib/router/router.tsx

@@ -9,6 +9,7 @@ import {
  CLUSTER_SETTINGS_URL,
  Route,
 } from '@qovery/shared/routes'
+import { PageSettingsDangerZoneFeature } from '../feature/page-settings-danger-zone-feature/page-settings-danger-zone-feature'
 import { PageSettingsFeature } from '../feature/page-settings-feature/page-settings-feature'
 import { PageSettingsV2 } from '../ui/page-settings-v2/page-settings-v2'
 
@@ -46,6 +47,6 @@ export const ROUTER_CLUSTER_SETTINGS: Route[] = [
  },
  {
  path: CLUSTER_SETTINGS_DANGER_ZONE_URL,
- component: <PageSettingsV2 />,
+ component: <PageSettingsDangerZoneFeature />,
  },
 ]

libs/pages/cluster/src/lib/ui/page-settings-danger-zone/page-settings-danger-zone.spec.tsx

@@ -0,0 +1,13 @@
+import { render } from '__tests__/utils/setup-jest'
+import PageSettingsDangerZone, { PageSettingsDangerZoneProps } from './page-settings-danger-zone'
+
+const props: PageSettingsDangerZoneProps = {
+ deleteCluster: jest.fn(),
+}
+
+describe('PageSettingsDangerZone', () => {
+ it('should render successfully', () => {
+ const { baseElement } = render(<PageSettingsDangerZone {...props} />)
+ expect(baseElement).toBeTruthy()
+ })
+})

libs/pages/cluster/src/lib/ui/page-settings-danger-zone/page-settings-danger-zone.tsx

@@ -0,0 +1,41 @@
+import { EnvironmentModeEnum } from 'qovery-typescript-axios'
+import { ClusterEntity } from '@qovery/shared/interfaces'
+import { BlockContentDelete, HelpSection } from '@qovery/shared/ui'
+
+export interface PageSettingsDangerZoneProps {
+ deleteCluster: () => void
+ cluster?: ClusterEntity
+}
+
+export function PageSettingsDangerZone(props: PageSettingsDangerZoneProps) {
+ const { deleteCluster, cluster } = props
+ return (
+ <div className="flex flex-col justify-between w-full">
+ <div className="p-8 max-w-content-with-navigation-left">
+ <BlockContentDelete
+ title="Uninstall cluster"
+ ctaLabel="Delete cluster"
+ callback={deleteCluster}
+ modalConfirmation={{
+ mode: EnvironmentModeEnum.PRODUCTION,
+ title: 'Uninstall cluster',
+ description: 'To confirm the deletion of your cluster, please type the name of the cluster:',
+ name: cluster?.name,
+ }}
+ />
+ </div>
+ <HelpSection
+ description="Need help? You may find these links useful"
+ links={[
+ {
+ link: 'https://hub.qovery.com/docs/using-qovery/configuration/clusters/#deleting-a-cluster',
+ linkLabel: 'How to delete my cluster',
+ external: true,
+ },
+ ]}
+ />
+ </div>
+ )
+}
+
+export default PageSettingsDangerZone