Add confirmation prompt for critical quick actions

Introduced a needConfirmation flag in DeviceQuickActionReference to trigger confirmation prompts for critical actions like 'Reboot'. Integrated Popconfirm component in DeviceQuickActionDropDown to handle user confirmation before proceeding with these actions.

client/src/components/DeviceComponents/DeviceQuickAction/DeviceQuickActionDropDown.tsx

@@ -6,7 +6,7 @@ import { TerminalStateProps } from '@/components/PlaybookExecutionModal';
 import PlaybookSelectionModal from '@/components/PlaybookSelection/PlaybookSelectionModal';
 import { DownOutlined } from '@ant-design/icons';
 import { history } from '@umijs/max';
-import { Dropdown, MenuProps, Space } from 'antd';
+import { Dropdown, MenuProps, Popconfirm, Space } from 'antd';
 import { ItemType } from 'rc-menu/es/interface';
 import React, { Dispatch, ReactNode, SetStateAction } from 'react';
 import { API, SsmAnsible } from 'ssm-shared-lib';
@@ -22,6 +22,10 @@ export type QuickActionProps = {
 const DeviceQuickActionDropDown: React.FC<QuickActionProps> = (props) => {
   const [playbookSelectionModalIsOpened, setPlaybookSelectionModalIsOpened] =
     React.useState(false);
+  const [showConfirmation, setShowConfirmation] = React.useState({
+    visible: false,
+    onConfirm: () => {},
+  });
 
   const onClick: MenuProps['onClick'] = ({ key }) => {
     const idx = parseInt(key);
@@ -30,13 +34,27 @@ const DeviceQuickActionDropDown: React.FC<QuickActionProps> = (props) => {
         alert('Internal Error');
         return;
       }
+
       if (DeviceQuickActionReference[idx].action === Actions.CONNECT) {
         history.push({
           pathname: `/manage/devices/ssh/${props.target?.uuid}`,
         });
         return;
       }
       if (DeviceQuickActionReference[idx].type === Types.PLAYBOOK) {
+        if (DeviceQuickActionReference[idx].needConfirmation) {
+          setShowConfirmation({
+            visible: true,
+            onConfirm: () => {
+              props.setTerminal({
+                isOpen: true,
+                quickRef: DeviceQuickActionReference[idx].playbookQuickRef,
+                target: props.target ? [props.target] : undefined,
+              });
+            },
+          });
+          return;
+        }
         props.setTerminal({
           isOpen: true,
           quickRef: DeviceQuickActionReference[idx].playbookQuickRef,
@@ -104,6 +122,19 @@ const DeviceQuickActionDropDown: React.FC<QuickActionProps> = (props) => {
         itemSelected={props.target ? [props.target] : undefined}
         callback={onSelectPlaybook}
       />
+      <Popconfirm
+        title={'Are you sure you want to execute this action?'}
+        open={showConfirmation.visible}
+        onConfirm={() => {
+          showConfirmation.onConfirm();
+          setShowConfirmation({ visible: false, onConfirm: () => {} });
+        }}
+        onCancel={() =>
+          setShowConfirmation({ visible: false, onConfirm: () => {} })
+        }
+        okText="Yes"
+        cancelText="No"
+      />
       <Dropdown menu={{ items, onClick }}>
         <a onClick={(e) => e.preventDefault()}>
           <Space>{props.children ? props.children : <DownOutlined />}</Space>

client/src/components/DeviceComponents/DeviceQuickAction/DeviceQuickActionReference.tsx

@@ -27,6 +27,7 @@ export type QuickActionReferenceType = {
   onAdvancedMenu: boolean;
   children?: QuickActionReferenceType[];
   icon?: React.ReactNode;
+  needConfirmation?: boolean;
 };
 
 export enum Actions {
@@ -47,6 +48,7 @@ const DeviceQuickActionReference: QuickActionReferenceType[] = [
     icon: <ReloadOutlined />,
     label: 'Reboot',
     onAdvancedMenu: false,
+    needConfirmation: true,
   },
   {
     type: Types.ACTION,