feat: Add ArgoApp delete confirmation (#321)

Author: callmevladik

src/components/LogViewer/index.tsx

@@ -351,7 +351,7 @@ export function SearchPopover(props: SearchPopoverProps) {
       });
     } catch (e) {
       // Catch invalid regular expression error
-      console.log('Error searching logs: ', e);
+      // console.log('Error searching logs: ', e);
       searchAddonRef.current?.findNext('');
     }
 

src/k8s/groups/EDP/Codemie/index.ts

@@ -8,7 +8,9 @@ const {
   version,
 } = CodemieKubeObjectConfig;
 
-export class CodemieKubeObject extends K8s.cluster.makeKubeObject<CodemieKubeObjectInterface>(singularForm) {
+export class CodemieKubeObject extends K8s.cluster.makeKubeObject<CodemieKubeObjectInterface>(
+  singularForm
+) {
   static apiEndpoint = ApiProxy.apiFactoryWithNamespace(group, version, pluralForm);
 
   static get className(): string {

src/k8s/groups/EDP/CodemieProject/index.ts

@@ -8,7 +8,9 @@ const {
   version,
 } = CodemieProjectKubeObjectConfig;
 
-export class CodemieProjectKubeObject extends K8s.cluster.makeKubeObject<CodemieProjectKubeObjectInterface>(singularForm) {
+export class CodemieProjectKubeObject extends K8s.cluster.makeKubeObject<CodemieProjectKubeObjectInterface>(
+  singularForm
+) {
   static apiEndpoint = ApiProxy.apiFactoryWithNamespace(group, version, pluralForm);
 
   static get className(): string {

src/pages/stage-details/components/Applications/hooks/useConfigurationHandlers.ts

@@ -1,7 +1,6 @@
 import React from 'react';
 import { FieldValues, useFormContext } from 'react-hook-form';
 import { editResource } from '../../../../../k8s/common/editResource';
-import { ApplicationKubeObjectInterface } from '../../../../../k8s/groups/ArgoCD/Application/types';
 import { useCreateCleanPipelineRun } from '../../../../../k8s/groups/Tekton/PipelineRun/hooks/useCreateCleanPipelineRun';
 import { useCreateDeployPipelineRun } from '../../../../../k8s/groups/Tekton/PipelineRun/hooks/useCreateDeployPipelineRun';
 import {
@@ -98,18 +97,14 @@ export const useConfigurationHandlers = ({
   setSelected,
   enrichedApplicationsByApplicationName,
   enrichedApplicationsWithArgoApplications,
-  deleteArgoApplication,
+  setDeleteDialogOpen,
 }: {
   values: FieldValues;
   selected: string[];
   setSelected: React.Dispatch<React.SetStateAction<string[]>>;
   enrichedApplicationsByApplicationName: Map<string, EnrichedApplicationWithArgoApplication>;
   enrichedApplicationsWithArgoApplications: EnrichedApplicationWithArgoApplication[];
-  deleteArgoApplication: ({
-    argoApplication,
-  }: {
-    argoApplication: ApplicationKubeObjectInterface;
-  }) => Promise<void>;
+  setDeleteDialogOpen?: React.Dispatch<React.SetStateAction<boolean>>;
 }) => {
   const { CDPipeline } = useDataContext();
   const {
@@ -348,27 +343,8 @@ export const useConfigurationHandlers = ({
   }, [handleClean, setDialog]);
 
   const handleClickUninstall = React.useCallback(async () => {
-    for (const enrichedApplication of enrichedApplicationsWithArgoApplications) {
-      const appName = enrichedApplication.application.metadata.name;
-
-      if (!selected.includes(appName)) {
-        continue;
-      }
-
-      const argoApplication = enrichedApplicationsByApplicationName.get(appName)?.argoApplication;
-
-      await deleteArgoApplication({
-        argoApplication,
-      });
-    }
-    setSelected([]);
-  }, [
-    deleteArgoApplication,
-    enrichedApplicationsByApplicationName,
-    enrichedApplicationsWithArgoApplications,
-    selected,
-    setSelected,
-  ]);
+    setDeleteDialogOpen(true);
+  }, [setDeleteDialogOpen]);
 
   return {
     handleClickDeploy,

src/pages/stage-details/components/Applications/index.tsx

@@ -12,6 +12,7 @@ import { useCreateArgoApplication } from '../../../../k8s/groups/ArgoCD/Applicat
 import { APPLICATIONS_TABLE_MODE } from '../../constants';
 import { usePermissionsContext } from '../../providers/Permissions/hooks';
 import { EnrichedApplicationWithArgoApplication } from '../../types';
+import { ApplicationsMultiDeletion } from '../ApplicationsMultiDeletion';
 import { useButtonsEnabledMap } from './hooks/useButtonsEnabled';
 import { useColumns } from './hooks/useColumns';
 import { useConfigurationHandlers } from './hooks/useConfigurationHandlers';
@@ -25,6 +26,10 @@ export const Applications = ({
 }: ApplicationsProps) => {
   const permissions = usePermissionsContext();
 
+  const allArgoApplications = enrichedApplicationsWithArgoApplications?.map(
+    ({ argoApplication }) => argoApplication
+  );
+
   const enrichedApplicationsByApplicationName = React.useMemo(() => {
     return (
       enrichedApplicationsWithArgoApplications &&
@@ -46,7 +51,9 @@ export const Applications = ({
   );
 
   const [selected, setSelected] = React.useState<string[]>([]);
+
   const [mode, setMode] = React.useState<ApplicationsTableMode>(APPLICATIONS_TABLE_MODE.PREVIEW);
+  const [deleteDialogOpen, setDeleteDialogOpen] = React.useState(false);
 
   const toggleMode = () =>
     mode === APPLICATIONS_TABLE_MODE.PREVIEW
@@ -74,8 +81,8 @@ export const Applications = ({
     setSelected,
     enrichedApplicationsByApplicationName,
     enrichedApplicationsWithArgoApplications,
-    deleteArgoApplication,
     values,
+    setDeleteDialogOpen,
   });
 
   const buttonsEnabledMap = useButtonsEnabledMap({
@@ -239,6 +246,17 @@ export const Applications = ({
       }
     >
       <Table<EnrichedApplicationWithArgoApplication> {..._TableProps} />
+      <ApplicationsMultiDeletion
+        applications={allArgoApplications}
+        selected={selected}
+        open={deleteDialogOpen}
+        handleClose={() => setDeleteDialogOpen(false)}
+        onDelete={() => {
+          setSelected([]);
+          setDeleteDialogOpen(false);
+        }}
+        deleteArgoApplication={deleteArgoApplication}
+      />
     </TabSection>
   );
 };

src/pages/stage-details/components/ApplicationsMultiDeletion/index.tsx

@@ -0,0 +1,95 @@
+import {
+  Button,
+  Dialog,
+  DialogActions,
+  DialogContent,
+  DialogTitle,
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableRow,
+  TextField,
+} from '@mui/material';
+import React from 'react';
+import { APPLICATION_LABEL_SELECTOR_APP_NAME } from '../../../../k8s/groups/ArgoCD/Application/labels';
+import { ApplicationMultiDeletionProps } from './types';
+
+const CONFIRM_TEXT_VALUE = 'confirm';
+
+export const ApplicationsMultiDeletion = ({
+  applications,
+  open,
+  handleClose,
+  selected,
+  onDelete,
+  deleteArgoApplication,
+}: ApplicationMultiDeletionProps) => {
+  const [value, setValue] = React.useState('');
+
+  const deletionDisabled = value !== CONFIRM_TEXT_VALUE;
+
+  const selectedApplications = React.useMemo(
+    () =>
+      applications?.filter((application) =>
+        selected.includes(application?.metadata?.labels?.[APPLICATION_LABEL_SELECTOR_APP_NAME])
+      ),
+    [applications, selected]
+  );
+
+  const handleDelete = React.useCallback(() => {
+    if (deletionDisabled || !selectedApplications || !selectedApplications.length) {
+      return;
+    }
+
+    selectedApplications.forEach((application) => {
+      deleteArgoApplication({ argoApplication: application });
+    });
+
+    setValue('');
+
+    if (onDelete) {
+      onDelete();
+    }
+  }, [deleteArgoApplication, deletionDisabled, onDelete, selectedApplications]);
+
+  return (
+    <Dialog open={open} onClose={handleClose}>
+      <DialogTitle>Are you sure you want to delete the selected applications?</DialogTitle>
+      <DialogContent sx={{ pt: '20px !important' }}>
+        <Table sx={{ mb: (t) => t.typography.pxToRem(20) }}>
+          <TableHead>
+            <TableRow>
+              <TableCell>Application name</TableCell>
+              <TableCell>ArgoCD Application name</TableCell>
+            </TableRow>
+          </TableHead>
+          <TableBody>
+            {selectedApplications &&
+              selectedApplications?.map((application, index) => (
+                <TableRow key={index}>
+                  <TableCell>
+                    {application?.metadata?.labels?.[APPLICATION_LABEL_SELECTOR_APP_NAME]}
+                  </TableCell>
+                  <TableCell>{application?.metadata.name}</TableCell>
+                </TableRow>
+              ))}
+          </TableBody>
+        </Table>
+        <TextField
+          label={`Enter "${CONFIRM_TEXT_VALUE}" to start deletion`}
+          value={value}
+          onChange={(e) => setValue(e.target.value)}
+          variant="outlined"
+          fullWidth
+        />
+      </DialogContent>
+      <DialogActions>
+        <Button onClick={handleClose}>Cancel</Button>
+        <Button onClick={handleDelete} disabled={deletionDisabled} color="primary">
+          Delete
+        </Button>
+      </DialogActions>
+    </Dialog>
+  );
+};

src/pages/stage-details/components/ApplicationsMultiDeletion/types.ts

@@ -0,0 +1,10 @@
+import { ApplicationKubeObjectInterface } from '../../../../k8s/groups/ArgoCD/Application/types';
+
+export interface ApplicationMultiDeletionProps {
+  applications: ApplicationKubeObjectInterface[];
+  selected: string[];
+  open: boolean;
+  handleClose: () => void;
+  onDelete: () => void;
+  deleteArgoApplication: ({ argoApplication }) => Promise<void>;
+}

src/widgets/AIChat/components/Chat/index.tsx

@@ -219,7 +219,7 @@ export const Chat = ({
       setIsRequestLoading(true);
     },
     onFinish: (data) => {
-      console.log('finish', data);
+      // console.log('finish', data);
     },
     onError: (error) => console.log('error', error),
   });

src/widgets/AIChat/hooks/useStreaming.ts

@@ -92,7 +92,7 @@ export const useStreaming = <I, A, C>({
           } catch (error) {
             // Request was aborted by user
             // if (error.name === ABORT_ERROR) return handleAbort(chat, reader);
-            console.log(error.name);
+            // console.log(error.name);
             throw error;
           }
         }

src/widgets/ManageCodeMie/components/CodemieProjectSettings/fields/index.ts

@@ -2,4 +2,3 @@ export * from './Alias';
 export * from './TokenName';
 export * from './Type';
 export * from './URL';
-

src/widgets/ManageCodeMie/components/CodemieProjectSettingsSecret/fields/index.ts

@@ -1,2 +1 @@
 export * from './Token';
-