app: home: Add delete button for clusters

Signed-off-by: Vincent T <[email protected]>

Author: vyncent-t

frontend/src/components/App/Home/index.tsx

@@ -33,8 +33,8 @@ function ContextMenu({ cluster }: { cluster: Cluster }) {
   const menuId = useId('context-menu');
   const [openConfirmDialog, setOpenConfirmDialog] = React.useState(false);
 
-  function removeCluster(cluster: Cluster) {
-    deleteCluster(cluster.name || '')
+  function removeCluster(cluster: Cluster, isDynamic: boolean = false) {
+    deleteCluster(cluster.name || '', isDynamic)
       .then(config => {
         dispatch(setConfig(config));
       })
@@ -92,7 +92,7 @@ function ContextMenu({ cluster }: { cluster: Cluster }) {
         >
           <ListItemText>{t('translation|Settings')}</ListItemText>
         </MenuItem>
-        {helpers.isElectron() && cluster.meta_data?.source === 'dynamic_cluster' && (
+        {helpers.isElectron() && (
           <MenuItem
             onClick={() => {
               setOpenConfirmDialog(true);
@@ -104,6 +104,26 @@ function ContextMenu({ cluster }: { cluster: Cluster }) {
         )}
       </Menu>
 
+      <ConfirmDialog
+        open={openConfirmDialog}
+        handleClose={() => setOpenConfirmDialog(false)}
+        onConfirm={() => {
+          setOpenConfirmDialog(false);
+          // to do: create a function that removes the cluster and also edits the kubeconfig
+          if (cluster.meta_data?.source === 'dynamic_cluster') {
+            removeCluster(cluster, true);
+          } else removeCluster(cluster);
+        }}
+        title={t('translation|Delete Cluster')}
+        description={t(
+          'translation|Are you sure you want to remove the cluster "{{ clusterName }}"? from "{{ clusterOrigin }}"',
+          {
+            clusterName: cluster.name,
+            clusterOrigin: getOrigin(cluster),
+          }
+        )}
+      />
+
       <ConfirmDialog
         open={openConfirmDialog}
         handleClose={() => setOpenConfirmDialog(false)}
@@ -113,9 +133,10 @@ function ContextMenu({ cluster }: { cluster: Cluster }) {
         }}
         title={t('translation|Delete Cluster')}
         description={t(
-          'translation|Are you sure you want to remove the cluster "{{ clusterName }}"?',
+          'translation|Are you sure you want to remove the cluster "{{ clusterName }}"? from "{{ clusterOrigin }}"',
           {
             clusterName: cluster.name,
+            clusterOrigin: getOrigin(cluster),
           }
         )}
       />
@@ -162,6 +183,26 @@ function ClusterStatus({ error }: { error?: ApiError | null }) {
   );
 }
 
+/**
+ * Gets the origin of a cluster.
+ *
+ * @param cluster
+ * @returns A description of where the cluster is picked up from: dynamic, in-cluster, or from a kubeconfig file.
+ */
+function getOrigin(cluster: Cluster): string {
+  const { t } = useTranslation(['translation']);
+
+  if (cluster.meta_data?.source === 'kubeconfig') {
+    const kubeconfigPath = process.env.KUBECONFIG ?? '~/.kube/config';
+    return `Kubeconfig: ${kubeconfigPath}`;
+  } else if (cluster.meta_data?.source === 'dynamic_cluster') {
+    return t('translation|Plugin');
+  } else if (cluster.meta_data?.source === 'in_cluster') {
+    return t('translation|In-cluster');
+  }
+  return 'Unknown';
+}
+
 export default function Home() {
   const history = useHistory();
   const clusters = useClustersConf() || {};
@@ -239,24 +280,6 @@ function HomeComponent(props: HomeComponentProps) {
       .sort();
   }
 
-  /**
-   * Gets the origin of a cluster.
-   *
-   * @param cluster
-   * @returns A description of where the cluster is picked up from: dynamic, in-cluster, or from a kubeconfig file.
-   */
-  function getOrigin(cluster: Cluster): string {
-    if (cluster.meta_data?.source === 'kubeconfig') {
-      const kubeconfigPath = process.env.KUBECONFIG ?? '~/.kube/config';
-      return `Kubeconfig: ${kubeconfigPath}`;
-    } else if (cluster.meta_data?.source === 'dynamic_cluster') {
-      return t('translation|Plugin');
-    } else if (cluster.meta_data?.source === 'in_cluster') {
-      return t('translation|In-cluster');
-    }
-    return 'Unknown';
-  }
-
   const memoizedComponent = React.useMemo(
     () => (
       <PageGrid>

frontend/src/lib/k8s/api/v1/clusterApi.ts

@@ -1,3 +1,5 @@
+import { exec } from 'child_process';
+import { promisify } from 'util';
 import helpers, { getHeadlampAPIHeaders } from '../../../../helpers';
 import { ConfigState } from '../../../../redux/configSlice';
 import store from '../../../../redux/stores/store';
@@ -10,6 +12,8 @@ import { getCluster, getClusterGroup } from '../../../util';
 import { ClusterRequest, clusterRequest, post, request } from './clusterRequests';
 import { JSON_HEADERS } from './constants';
 
+const execAsync = promisify(exec);
+
 /**
  * Test authentication for the given cluster.
  * Will throw an error if the user is not authenticated.
@@ -78,14 +82,27 @@ export async function setCluster(clusterReq: ClusterRequest) {
 // @todo: needs documenting.
 
 export async function deleteCluster(
-  cluster: string
+  cluster: string,
+  isDynamic: boolean
 ): Promise<{ clusters: ConfigState['clusters'] }> {
-  if (cluster) {
+  if (cluster && isDynamic) {
     const kubeconfig = await findKubeconfigByClusterName(cluster);
     if (kubeconfig !== null) {
       await deleteClusterKubeconfig(cluster);
       window.location.reload();
       return { clusters: {} };
+    } else if (cluster && !isDynamic) {
+      // Delete cluster from kubeconfig for non-dynamic clusters
+      try {
+        await execAsync(`kubectl config unset clusters.${cluster}`);
+        await execAsync(`kubectl config unset contexts.${cluster}`);
+        await execAsync(`kubectl config unset users.${cluster}`);
+        window.location.reload();
+        return { clusters: {} };
+      } catch (error) {
+        console.error('Failed to delete non-dynamic cluster:', error);
+        throw error;
+      }
     }
   }