[GEN-1574]: delete actions (#1657)

Author: BenElferink

frontend/webapp/containers/main/actions/choose-action-modal/index.tsx

@@ -1,8 +1,8 @@
 import styled from 'styled-components';
-import React, { useMemo, useState } from 'react';
 import { ChooseActionBody } from '../';
+import React, { useMemo, useState } from 'react';
+import { useActionCRUD, useActionFormData } from '@/hooks/actions';
 import { ACTION_OPTIONS, type ActionOption } from './action-options';
-import { useActionFormData, useCreateAction } from '@/hooks/actions';
 import { AutocompleteInput, Modal, NavigationButtons, Text, Divider, FadeLoader } from '@/reuseable-components';
 
 const DefineActionContainer = styled.section`
@@ -43,7 +43,7 @@ interface AddActionModalProps {
 
 export const AddActionModal: React.FC<AddActionModalProps> = ({ isModalOpen, handleCloseModal }) => {
   const { formData, handleFormChange, resetFormData, validateForm } = useActionFormData();
-  const { createAction, loading } = useCreateAction({ onSuccess: handleClose });
+  const { createAction, loading } = useActionCRUD({ onSuccess: handleClose });
   const [selectedItem, setSelectedItem] = useState<ActionOption | null>(null);
 
   const isFormOk = useMemo(() => !!selectedItem && validateForm(), [selectedItem, formData]);

frontend/webapp/containers/main/overview/overview-drawer/index.tsx

@@ -7,12 +7,11 @@ import DrawerFooter from './drawer-footer';
 import { SourceDrawer } from '../../sources';
 import { Drawer } from '@/reuseable-components';
 import { DeleteEntityModal } from '@/components';
-import { useActualSources, useNotify, useUpdateDestination } from '@/hooks';
 import { ActionDrawer, type ActionDrawerHandle } from '../../actions';
 import { DestinationDrawer, type DestinationDrawerHandle } from '../../destinations';
+import { useActionCRUD, useActualSources, useNotify, useUpdateDestination } from '@/hooks';
 import { getMainContainerLanguageLogo, WORKLOAD_PROGRAMMING_LANGUAGES } from '@/utils/constants/programming-languages';
 import { WorkloadId, K8sActualSource, ActualDestination, OVERVIEW_ENTITY_TYPES, PatchSourceRequestInput, ActionDataParsed } from '@/types';
-import { useUpdateAction } from '@/hooks/actions/useUpdateAction';
 
 const componentMap = {
   source: SourceDrawer,
@@ -31,7 +30,7 @@ const OverviewDrawer = () => {
   const [title, setTitle] = useState('');
 
   const notify = useNotify();
-  const { updateAction } = useUpdateAction();
+  const { updateAction, deleteAction } = useActionCRUD();
   const { updateExistingDestination } = useUpdateDestination();
   const { updateActualSource, deleteSourcesForNamespace } = useActualSources();
 
@@ -177,7 +176,9 @@ const OverviewDrawer = () => {
     }
 
     if (type === OVERVIEW_ENTITY_TYPES.ACTION) {
-      alert('TODO !');
+      const { id, type } = item as ActionDataParsed;
+
+      await deleteAction(id, type);
     }
 
     if (type === OVERVIEW_ENTITY_TYPES.DESTINATION) {

frontend/webapp/graphql/mutations/action.ts

@@ -15,3 +15,9 @@ export const UPDATE_ACTION = gql`
     }
   }
 `;
+
+export const DELETE_ACTION = gql`
+  mutation DeleteAction($id: ID!, $actionType: String!) {
+    deleteAction(id: $id, actionType: $actionType)
+  }
+`;

frontend/webapp/graphql/mutations/index.ts

@@ -1,3 +1,4 @@
 export * from './destination';
 export * from './source';
 export * from './namespace';
+export * from './action';

frontend/webapp/hooks/actions/index.ts

@@ -1,5 +1,5 @@
 export * from './useActionFormData';
 export * from './useActions';
 export * from './useActionState';
-export * from './useCreateAction';
 export * from './useGetActions';
+export * from './useActionCRUD';

frontend/webapp/hooks/actions/useActionCRUD.ts

@@ -3,7 +3,7 @@ import { useNotify } from '../useNotify';
 import { useMutation } from '@apollo/client';
 import type { ActionInput, ActionsType } from '@/types';
 import { useComputePlatform } from '../compute-platform';
-import { CREATE_ACTION, DELETE_ACTION, UPDATE_ACTION } from '@/graphql/mutations/action';
+import { CREATE_ACTION, DELETE_ACTION, UPDATE_ACTION } from '@/graphql/mutations';
 
 interface UseActionCrudParams {
   onSuccess?: () => void;
@@ -15,57 +15,33 @@ export const useActionCRUD = (params?: UseActionCrudParams) => {
   const { refetch } = useComputePlatform();
   const notify = useNotify();
 
-  const handleError = (title: string, message: string) => {
-    notify({
-      title,
-      message,
-      type: 'error',
-      target: 'notification',
-      crdType: 'notification',
-    });
+  const notifyUser = (title: string, message: string, type: 'error' | 'success') => {
+    notify({ title, message, type, target: 'notification', crdType: 'notification' });
+  };
 
-    if (params?.onError) params.onError();
+  const handleError = (title: string, message: string) => {
+    notifyUser(title, message, 'error');
+    params?.onError?.();
   };
 
   const handleComplete = (title: string, message: string) => {
+    notifyUser(title, message, 'success');
     setDrawerItem(null);
     refetch();
-    notify({
-      title,
-      message,
-      type: 'success',
-      target: 'notification',
-      crdType: 'notification',
-    });
-
-    if (params?.onSuccess) params.onSuccess();
+    params?.onSuccess?.();
   };
 
   const [createAction, cState] = useMutation(CREATE_ACTION, {
-    onError: (error) => {
-      handleError('Create Action', error.message);
-    },
-    onCompleted: () => {
-      handleComplete('Create Action', 'successfully created');
-    },
+    onError: (error) => handleError('Create Action', error.message),
+    onCompleted: () => handleComplete('Create Action', 'successfully created'),
   });
-
   const [updateAction, uState] = useMutation(UPDATE_ACTION, {
-    onError: (error) => {
-      handleError('Update Action', error.message);
-    },
-    onCompleted: () => {
-      handleComplete('Update Action', 'successfully updated');
-    },
+    onError: (error) => handleError('Update Action', error.message),
+    onCompleted: () => handleComplete('Update Action', 'successfully updated'),
   });
-
   const [deleteAction, dState] = useMutation(DELETE_ACTION, {
-    onError: (error) => {
-      handleError('Delete Action', error.message);
-    },
-    onCompleted: () => {
-      handleComplete('Delete Action', 'successfully deleted');
-    },
+    onError: (error) => handleError('Delete Action', error.message),
+    onCompleted: () => handleComplete('Delete Action', 'successfully deleted'),
   });
 
   return {

frontend/webapp/hooks/actions/useCreateAction.ts

@@ -78,7 +78,7 @@ export interface ActionItem {
 
 export interface ActionData {
   id: string;
-  type: string;
+  type: ActionsType;
   spec: ActionItem | string;
 }