From 657ea545d628021dbde39e23d056d639966bdd6c Mon Sep 17 00:00:00 2001 From: Renat Kalimulin Date: Tue, 20 Feb 2024 09:57:56 +0300 Subject: [PATCH 1/2] Wizard: Add an ability to delete clusters from UI + Added delete Button + useUpdateAppConfig changed to delete clusters Resolves Issue #65 --- frontend/src/lib/hooks/api/appConfig.ts | 12 +++++-- .../src/widgets/ClusterConfigForm/index.tsx | 35 +++++++++++++++++++ 2 files changed, 45 insertions(+), 2 deletions(-) diff --git a/frontend/src/lib/hooks/api/appConfig.ts b/frontend/src/lib/hooks/api/appConfig.ts index f452ad067..ac900ada9 100644 --- a/frontend/src/lib/hooks/api/appConfig.ts +++ b/frontend/src/lib/hooks/api/appConfig.ts @@ -15,7 +15,13 @@ export function useAppConfig() { return useQuery(['app', 'config'], () => api.getCurrentConfig()); } -export function useUpdateAppConfig({ initialName }: { initialName?: string }) { +export function useUpdateAppConfig({ + initialName, + deleteCluster, +}: { + initialName?: string; + deleteCluster?: boolean; +}) { const client = useQueryClient(); return useMutation( async (cluster: ApplicationConfigPropertiesKafkaClusters) => { @@ -27,10 +33,12 @@ export function useUpdateAppConfig({ initialName }: { initialName?: string }) { if (existingClusters.length > 0) { if (!initialName) { clusters = [...existingClusters, cluster]; - } else { + } else if (!deleteCluster) { clusters = existingClusters.map((c) => c.name === initialName ? cluster : c ); + } else { + clusters = existingClusters.filter((c) => c.name !== initialName); } } else { clusters = [cluster]; diff --git a/frontend/src/widgets/ClusterConfigForm/index.tsx b/frontend/src/widgets/ClusterConfigForm/index.tsx index d4007cf48..cc57cb52c 100644 --- a/frontend/src/widgets/ClusterConfigForm/index.tsx +++ b/frontend/src/widgets/ClusterConfigForm/index.tsx @@ -22,6 +22,7 @@ import Metrics from 'widgets/ClusterConfigForm/Sections/Metrics'; import CustomAuthentication from 'widgets/ClusterConfigForm/Sections/CustomAuthentication'; import Authentication from 'widgets/ClusterConfigForm/Sections/Authentication/Authentication'; import KSQL from 'widgets/ClusterConfigForm/Sections/KSQL'; +import { useConfirm } from 'lib/hooks/useConfirm'; interface ClusterConfigFormProps { hasCustomConfig?: boolean; @@ -52,12 +53,36 @@ const ClusterConfigForm: React.FC = ({ const validate = useValidateAppConfig(); const update = useUpdateAppConfig({ initialName: initialValues.name }); + const deleteCluster = useUpdateAppConfig({ + initialName: initialValues.name, + deleteCluster: true, + }); + const confirm = useConfirm(true); + const { value: isFormDisabled, setTrue: disableForm, setFalse: enableForm, } = useBoolean(); + const confirmClusterDelete = () => + confirm('Are you sure want to delete this cluster?', async () => { + if (initialValues.name) { + const data = methods.getValues(); + const config = transformFormDataToPayload(data); + try { + await deleteCluster.mutateAsync(config); + navigate('/'); + } catch (error) { + showAlert('error', { + id: 'app-config-update-error', + title: 'Error updating application config', + message: 'There was an error updating the application config', + }); + } + } + }); + const onSubmit = async (data: ClusterConfigFormValues) => { const config = transformFormDataToPayload(data); try { @@ -146,6 +171,16 @@ const ClusterConfigForm: React.FC = ({ > Submit + {initialValues.name && ( + + )} From 4560f10c3db0407deba265512288fd2784932058 Mon Sep 17 00:00:00 2001 From: Renat Kalimulin Date: Thu, 29 Feb 2024 10:04:56 +0300 Subject: [PATCH 2/2] Wizard: Add an ability to delete clusters from UI + removed unnecessary if statement + some logic was decomposed Resolves Issue #65 --- frontend/src/lib/hooks/api/appConfig.ts | 46 ++++++++++++++++--------- 1 file changed, 29 insertions(+), 17 deletions(-) diff --git a/frontend/src/lib/hooks/api/appConfig.ts b/frontend/src/lib/hooks/api/appConfig.ts index ac900ada9..e3ee0fdcb 100644 --- a/frontend/src/lib/hooks/api/appConfig.ts +++ b/frontend/src/lib/hooks/api/appConfig.ts @@ -1,6 +1,9 @@ import { appConfigApiClient as api } from 'lib/api'; import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query'; -import { ApplicationConfigPropertiesKafkaClusters } from 'generated-sources'; +import { + ApplicationConfig, + ApplicationConfigPropertiesKafkaClusters, +} from 'generated-sources'; import { QUERY_REFETCH_OFF_OPTIONS } from 'lib/constants'; export function useAppInfo() { @@ -15,6 +18,25 @@ export function useAppConfig() { return useQuery(['app', 'config'], () => api.getCurrentConfig()); } +function aggregateClusters( + cluster: ApplicationConfigPropertiesKafkaClusters, + existingConfig: ApplicationConfig, + initialName?: string, + deleteCluster?: boolean +): ApplicationConfigPropertiesKafkaClusters[] { + const existingClusters = existingConfig.properties?.kafka?.clusters || []; + + if (!initialName) { + return [...existingClusters, cluster]; + } + + if (!deleteCluster) { + return existingClusters.map((c) => (c.name === initialName ? cluster : c)); + } + + return existingClusters.filter((c) => c.name !== initialName); +} + export function useUpdateAppConfig({ initialName, deleteCluster, @@ -26,23 +48,13 @@ export function useUpdateAppConfig({ return useMutation( async (cluster: ApplicationConfigPropertiesKafkaClusters) => { const existingConfig = await api.getCurrentConfig(); - const existingClusters = existingConfig.properties?.kafka?.clusters || []; - - let clusters: ApplicationConfigPropertiesKafkaClusters[] = []; - if (existingClusters.length > 0) { - if (!initialName) { - clusters = [...existingClusters, cluster]; - } else if (!deleteCluster) { - clusters = existingClusters.map((c) => - c.name === initialName ? cluster : c - ); - } else { - clusters = existingClusters.filter((c) => c.name !== initialName); - } - } else { - clusters = [cluster]; - } + const clusters = aggregateClusters( + cluster, + existingConfig, + initialName, + deleteCluster + ); const config = { ...existingConfig,