[GEN-1621]: add cancel modal & breakdown overview-drawer files (#1682)

frontend/webapp/components/modals/cancel-warning/index.tsx

@@ -0,0 +1,31 @@
+import React from 'react';
+import { WarningModal } from '@/reuseable-components';
+
+interface Props {
+  isOpen: boolean;
+  name?: string;
+  onApprove: () => void;
+  onDeny: () => void;
+}
+
+const CancelWarning: React.FC<Props> = ({ isOpen, name, onApprove, onDeny }) => {
+  return (
+    <WarningModal
+      isOpen={isOpen}
+      noOverlay
+      title={`Cancel${name ? ` ${name}` : ''}`}
+      description='Are you sure you want to cancel?'
+      approveButton={{
+        text: 'Cancel',
+        variant: 'warning',
+        onClick: onApprove,
+      }}
+      denyButton={{
+        text: 'Go Back',
+        onClick: onDeny,
+      }}
+    />
+  );
+};
+
+export { CancelWarning };

frontend/webapp/components/modals/delete-warning/index.tsx

@@ -0,0 +1,31 @@
+import React from 'react';
+import { WarningModal } from '@/reuseable-components';
+
+interface Props {
+  isOpen: boolean;
+  name?: string;
+  onApprove: () => void;
+  onDeny: () => void;
+}
+
+const DeleteWarning: React.FC<Props> = ({ isOpen, name, onApprove, onDeny }) => {
+  return (
+    <WarningModal
+      isOpen={isOpen}
+      noOverlay
+      title={`Delete${name ? ` ${name}` : ''}`}
+      description='Are you sure you want to delete this?'
+      approveButton={{
+        text: 'Delete',
+        variant: 'danger',
+        onClick: onApprove,
+      }}
+      denyButton={{
+        text: 'Cancel',
+        onClick: onDeny,
+      }}
+    />
+  );
+};
+
+export { DeleteWarning };

frontend/webapp/components/modals/index.ts

@@ -0,0 +1,2 @@
+export * from './cancel-warning';
+export * from './delete-warning';

frontend/webapp/components/setup/connection/create.connection.form/create.connection.form.tsx

@@ -95,7 +95,7 @@ export function CreateConnectionForm({
     filterSupportedMonitors();
   }, [destination]);
 
-  useKeyDown('Enter', handleKeyPress);
+  useKeyDown({ key: 'Enter', active: true }, handleKeyPress);
 
   function handleKeyPress(e: any) {
     if (!isCreateButtonDisabled) {

frontend/webapp/containers/main/actions/action-drawer-container/index.tsx

@@ -1,25 +1,24 @@
-import React, { forwardRef, useImperativeHandle, useMemo } from 'react';
+import React, { useMemo, useState } from 'react';
 import styled from 'styled-components';
+import { getActionIcon } from '@/utils';
 import { useDrawerStore } from '@/store';
 import { CardDetails } from '@/components';
-import { useActionFormData, useNotify } from '@/hooks';
+import type { ActionDataParsed } from '@/types';
 import { ChooseActionBody } from '../choose-action-body';
-import type { ActionDataParsed, ActionInput } from '@/types';
+import OverviewDrawer from '../../overview/overview-drawer';
 import buildCardFromActionSpec from './build-card-from-action-spec';
+import { useActionCRUD, useActionFormData, useNotify } from '@/hooks';
 import { ACTION_OPTIONS } from '../choose-action-modal/action-options';
 
-export type ActionDrawerHandle = {
-  getCurrentData: () => ActionInput | null;
-};
-
-interface Props {
-  isEditing: boolean;
-}
+interface Props {}
 
-const ActionDrawer = forwardRef<ActionDrawerHandle, Props>(({ isEditing }, ref) => {
+const ActionDrawer: React.FC<Props> = () => {
   const notify = useNotify();
   const selectedItem = useDrawerStore(({ selectedItem }) => selectedItem);
+  const [isEditing, setIsEditing] = useState(false);
+
   const { formData, handleFormChange, resetFormData, validateForm, loadFormWithDrawerItem } = useActionFormData();
+  const { updateAction, deleteAction } = useActionCRUD();
 
   const cardData = useMemo(() => {
     if (!selectedItem) return [];
@@ -48,33 +47,65 @@ const ActionDrawer = forwardRef<ActionDrawerHandle, Props>(({ isEditing }, ref)
     return found;
   }, [selectedItem, isEditing]);
 
-  useImperativeHandle(ref, () => ({
-    getCurrentData: () => {
-      if (validateForm()) {
-        return formData;
-      } else {
-        notify({
-          message: 'Required fields are missing!',
-          title: 'Update Action Error',
-          type: 'error',
-          target: 'notification',
-          crdType: 'notification',
-        });
-        return null;
-      }
-    },
-  }));
-
-  return isEditing && thisAction ? (
-    <FormContainer>
-      <ChooseActionBody isUpdate action={thisAction} formData={formData} handleFormChange={handleFormChange} />
-    </FormContainer>
-  ) : (
-    <CardDetails data={cardData} />
-  );
-});
+  if (!selectedItem?.item) return null;
+  const { id, item } = selectedItem;
 
-ActionDrawer.displayName = 'ActionDrawer';
+  const handleEdit = (bool?: boolean) => {
+    if (typeof bool === 'boolean') {
+      setIsEditing(bool);
+    } else {
+      setIsEditing(true);
+    }
+  };
+
+  const handleCancel = () => {
+    resetFormData();
+    setIsEditing(false);
+  };
+
+  const handleDelete = async () => {
+    await deleteAction(id as string, (item as ActionDataParsed).type);
+  };
+
+  const handleSave = async (newTitle: string) => {
+    if (!validateForm()) {
+      notify({
+        message: 'Required fields are missing!',
+        title: 'Update Action Error',
+        type: 'error',
+        target: 'notification',
+        crdType: 'notification',
+      });
+    } else {
+      const payload = {
+        ...formData,
+        name: newTitle,
+      };
+
+      await updateAction(id as string, payload);
+    }
+  };
+
+  return (
+    <OverviewDrawer
+      title={(item as ActionDataParsed).spec.actionName}
+      imageUri={getActionIcon((item as ActionDataParsed).type)}
+      isEdit={isEditing}
+      clickEdit={handleEdit}
+      clickSave={handleSave}
+      clickDelete={handleDelete}
+      clickCancel={handleCancel}
+    >
+      {isEditing && thisAction ? (
+        <FormContainer>
+          <ChooseActionBody isUpdate action={thisAction} formData={formData} handleFormChange={handleFormChange} />
+        </FormContainer>
+      ) : (
+        <CardDetails data={cardData} />
+      )}
+    </OverviewDrawer>
+  );
+};
 
 export { ActionDrawer };
 

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

@@ -5,11 +5,11 @@ import { ACTION_OPTIONS, type ActionOption } from './action-options';
 import { AutocompleteInput, Modal, NavigationButtons, Divider, FadeLoader, SectionTitle, ModalContent, Center } from '@/reuseable-components';
 
 interface AddActionModalProps {
-  isModalOpen: boolean;
-  handleCloseModal: () => void;
+  isOpen: boolean;
+  onClose: () => void;
 }
 
-export const AddActionModal: React.FC<AddActionModalProps> = ({ isModalOpen, handleCloseModal }) => {
+export const AddActionModal: React.FC<AddActionModalProps> = ({ isOpen, onClose }) => {
   const { formData, handleFormChange, resetFormData, validateForm } = useActionFormData();
   const { createAction, loading } = useActionCRUD({ onSuccess: handleClose });
   const [selectedItem, setSelectedItem] = useState<ActionOption | undefined>(undefined);
@@ -23,7 +23,7 @@ export const AddActionModal: React.FC<AddActionModalProps> = ({ isModalOpen, han
   function handleClose() {
     resetFormData();
     setSelectedItem(undefined);
-    handleCloseModal();
+    onClose();
   }
 
   const handleSelect = (item?: ActionOption) => {
@@ -34,7 +34,7 @@ export const AddActionModal: React.FC<AddActionModalProps> = ({ isModalOpen, han
 
   return (
     <Modal
-      isOpen={isModalOpen}
+      isOpen={isOpen}
       onClose={handleClose}
       header={{ title: 'Add Action' }}
       actionComponent={