Wizard: Add an ability to delete clusters from UI

+ Added delete Button
+ Added useDeleteCluster hook

Resolves Issue #65

Author: Nilumilak

frontend/src/widgets/ClusterConfigForm/hooks/useDeleteCluster.ts

@@ -0,0 +1,48 @@
+import React from 'react';
+import {
+  useQueryClient,
+  useMutation,
+  UseMutationResult,
+} from '@tanstack/react-query';
+import { appConfigApiClient as api } from 'lib/api';
+import { ApplicationConfigPropertiesKafkaClusters } from 'generated-sources';
+
+export function useDeleteCluster(): [
+  UseMutationResult<void, unknown, string, unknown>,
+  boolean
+] {
+  const client = useQueryClient();
+  const [isDeleteing, setIsDeleting] = React.useState(false);
+
+  return [
+    useMutation(
+      async (clusterName: string) => {
+        setIsDeleting(true);
+        const existingConfig = await api.getCurrentConfig();
+        const existingClusters =
+          existingConfig.properties?.kafka?.clusters || [];
+
+        let clusters: ApplicationConfigPropertiesKafkaClusters[] = [];
+
+        if (existingClusters.length > 0) {
+          clusters = existingClusters.filter((c) => c.name !== clusterName);
+        }
+        const config = {
+          ...existingConfig,
+          properties: {
+            ...existingConfig.properties,
+            kafka: { clusters },
+          },
+        };
+        return api.restartWithConfig({ restartRequest: { config } });
+      },
+      {
+        onSuccess: () => {
+          client.invalidateQueries(['app', 'config']);
+          setIsDeleting(false);
+        },
+      }
+    ),
+    isDeleteing,
+  ];
+}

frontend/src/widgets/ClusterConfigForm/index.tsx

@@ -22,6 +22,9 @@ 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';
+
+import { useDeleteCluster } from './hooks/useDeleteCluster';
 
 interface ClusterConfigFormProps {
   hasCustomConfig?: boolean;
@@ -52,12 +55,23 @@ const ClusterConfigForm: React.FC<ClusterConfigFormProps> = ({
 
   const validate = useValidateAppConfig();
   const update = useUpdateAppConfig({ initialName: initialValues.name });
+  const [deleteCluster, isDeleting] = useDeleteCluster();
+  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) {
+        await deleteCluster.mutateAsync(initialValues.name);
+        navigate('/');
+      }
+    });
+
   const onSubmit = async (data: ClusterConfigFormValues) => {
     const config = transformFormDataToPayload(data);
     try {
@@ -146,6 +160,17 @@ const ClusterConfigForm: React.FC<ClusterConfigFormProps> = ({
             >
               Submit
             </Button>
+            {initialValues.name && (
+              <Button
+                type="button"
+                buttonSize="L"
+                buttonType="danger"
+                inProgress={isDeleting}
+                onClick={confirmClusterDelete}
+              >
+                Delete
+              </Button>
+            )}
           </S.ButtonWrapper>
         </FlexFieldset>
       </StyledForm>