MTV-1727: Provide disabled reason with tooltip on Cancel and Remove VMs buttons

packages/forklift-console-plugin/locales/en/plugin__forklift-console-plugin.json

@@ -420,6 +420,7 @@
   "Secrets": "Secrets",
   "Select a namespace": "Select a namespace",
   "Select a provider": "Select a provider",
+  "Select at least one virtual machine.": "Select at least one virtual machine.",
   "Select migration network": "Select migration network",
   "Select source provider": "Select source provider",
   "Select virtual machines": "Select virtual machines",

packages/forklift-console-plugin/src/modules/Plans/views/details/tabs/VirtualMachines/components/MigrationVMsCancelButton.tsx

@@ -3,10 +3,12 @@ import { useModal } from 'src/modules/Providers/modals';
 import { useForkliftTranslation } from 'src/utils/i18n';
 
 import { V1beta1Migration } from '@kubev2v/types';
-import { Button, ToolbarItem } from '@patternfly/react-core';
+import { ToolbarItem } from '@patternfly/react-core';
 
 import { MigrationVMsCancelModal } from '../modals';
 
+import { VMsActionButton } from './VMsActionButton';
+
 export const MigrationVMsCancelButton: FC<{
   selectedIds: string[];
   migration: V1beta1Migration;
@@ -17,11 +19,13 @@ export const MigrationVMsCancelButton: FC<{
     showModal(<MigrationVMsCancelModal migration={migration} selected={selectedIds} />);
   };
 
+  const reason = selectedIds?.length < 1 && t('Select at least one virtual machine.');
+
   return (
     <ToolbarItem>
-      <Button variant="secondary" onClick={onClick} isDisabled={!selectedIds?.length}>
+      <VMsActionButton onClick={onClick} disabledReason={reason}>
         {t('Cancel virtual machines')}
-      </Button>
+      </VMsActionButton>
     </ToolbarItem>
   );
 };

packages/forklift-console-plugin/src/modules/Plans/views/details/tabs/VirtualMachines/components/PlanVMsDeleteButton.tsx

@@ -1,12 +1,15 @@
-import React, { FC } from 'react';
+import React, { FC, useMemo } from 'react';
+import { isPlanArchived } from 'src/modules/Plans/utils';
 import { useModal } from 'src/modules/Providers/modals';
 import { useForkliftTranslation } from 'src/utils/i18n';
 
 import { V1beta1Plan } from '@kubev2v/types';
-import { Button, ToolbarItem } from '@patternfly/react-core';
+import { ToolbarItem } from '@patternfly/react-core';
 
 import { PlanVMsDeleteModal } from '../modals';
 
+import { VMsActionButton } from './VMsActionButton';
+
 export const PlanVMsDeleteButton: FC<{
   selectedIds: string[];
   plan: V1beta1Plan;
@@ -18,11 +21,30 @@ export const PlanVMsDeleteButton: FC<{
     showModal(<PlanVMsDeleteModal plan={plan} selected={selectedIds} />);
   };
 
+  const remainingVms = useMemo(() => {
+    return (plan?.spec?.vms || []).filter((vm) => !selectedIds.includes(vm.id)) || [];
+  }, [plan, selectedIds]);
+
+  const reason = useMemo(() => {
+    if (isPlanArchived(plan)) {
+      return t('Deleting virtual machines from an archived migration plan is not allowed.');
+    }
+    if (!selectedIds?.length) {
+      return t('Select at least one virtual machine.');
+    }
+    if (!remainingVms?.length) {
+      return t(
+        'All virtual machines planned for migration are selected for deletion, deleting all virtual machines from a migration plan is not allowed.',
+      );
+    }
+    return '';
+  }, [plan, selectedIds, remainingVms]);
+
   return (
     <ToolbarItem>
-      <Button variant="secondary" onClick={onClick} isDisabled={selectedIds?.length < 1}>
+      <VMsActionButton onClick={onClick} disabledReason={reason}>
         {t('Remove virtual machines')}
-      </Button>
+      </VMsActionButton>
     </ToolbarItem>
   );
 };

packages/forklift-console-plugin/src/modules/Plans/views/details/tabs/VirtualMachines/components/VMsActionButton.tsx

@@ -0,0 +1,21 @@
+import React, { FC, ReactNode } from 'react';
+
+import { Button, ButtonVariant, Tooltip } from '@patternfly/react-core';
+
+export const VMsActionButton: FC<{
+  children: ReactNode;
+  onClick: () => void;
+  disabledReason?: string;
+}> = ({ children, onClick, disabledReason }) => {
+  const button = (
+    <Button
+      variant={ButtonVariant.secondary}
+      onClick={onClick}
+      isAriaDisabled={Boolean(disabledReason)}
+    >
+      {children}
+    </Button>
+  );
+
+  return disabledReason ? <Tooltip content={disabledReason}>{button}</Tooltip> : button;
+};

packages/forklift-console-plugin/src/modules/Plans/views/details/tabs/VirtualMachines/components/index.ts

@@ -4,4 +4,5 @@ export * from './MigrationVMsCancelButton';
 export * from './NameCellRenderer';
 export * from './PlanVMsCellProps';
 export * from './PlanVMsDeleteButton';
+export * from './VMsActionButton';
 // @endindex

packages/forklift-console-plugin/src/modules/Plans/views/details/tabs/VirtualMachines/modals/MigrationVMsCancelModal.tsx

@@ -5,7 +5,7 @@ import { useForkliftTranslation } from 'src/utils/i18n';
 
 import { MigrationModel, V1beta1Migration } from '@kubev2v/types';
 import { k8sPatch } from '@openshift-console/dynamic-plugin-sdk';
-import { Button, Modal, ModalVariant } from '@patternfly/react-core';
+import { Button, ButtonVariant, Modal, ModalVariant } from '@patternfly/react-core';
 
 import './PlanVMsDeleteModal.style.css';
 
@@ -53,13 +53,12 @@ export const MigrationVMsCancelModal: React.FC<MigrationVMsCancelModalProps> = (
     <Button
       key="confirm"
       onClick={handleSave}
-      variant="primary"
-      isDisabled={vms.length < 1}
+      variant={ButtonVariant.primary}
       isLoading={isLoading}
     >
       {t('Cancel migration')}
     </Button>,
-    <Button key="cancel" variant="secondary" onClick={toggleModal}>
+    <Button key="cancel" variant={ButtonVariant.secondary} onClick={toggleModal}>
       {t('Cancel')}
     </Button>,
   ];

packages/forklift-console-plugin/src/modules/Plans/views/details/tabs/VirtualMachines/modals/PlanVMsDeleteModal.tsx

@@ -1,12 +1,11 @@
 import React, { ReactNode, useCallback, useState } from 'react';
-import { isPlanArchived } from 'src/modules/Plans/utils';
 import { useToggle } from 'src/modules/Providers/hooks';
 import { AlertMessageForModals, useModal } from 'src/modules/Providers/modals';
 import { useForkliftTranslation } from 'src/utils/i18n';
 
 import { PlanModel, V1beta1Plan } from '@kubev2v/types';
 import { k8sPatch } from '@openshift-console/dynamic-plugin-sdk';
-import { Button, Modal, ModalVariant } from '@patternfly/react-core';
+import { Button, ButtonVariant, Modal, ModalVariant } from '@patternfly/react-core';
 
 import './PlanVMsDeleteModal.style.css';
 
@@ -23,22 +22,6 @@ export const PlanVMsDeleteModal: React.FC<PlanVMsDeleteModalProps> = ({ plan, se
 
   const vms = (plan?.spec?.vms || []).filter((vm) => !selected.includes(vm.id)) || [];
 
-  React.useEffect(() => {
-    if (isPlanArchived(plan)) {
-      setAlertMessage(
-        t('Deleting virtual machines from an archived migration plan is not allowed.'),
-      );
-      return;
-    }
-    if (vms.length < 1) {
-      setAlertMessage(
-        t(
-          'All virtual machines planned for migration are selected for deletion, deleting all virtual machines from a migration plan is not allowed.',
-        ),
-      );
-    }
-  }, [vms, plan]);
-
   const handleSave = useCallback(async () => {
     toggleIsLoading();
 
@@ -60,16 +43,10 @@ export const PlanVMsDeleteModal: React.FC<PlanVMsDeleteModalProps> = ({ plan, se
   }, [selected]);
 
   const actions = [
-    <Button
-      key="confirm"
-      onClick={handleSave}
-      variant="danger"
-      isDisabled={vms.length < 1 || isPlanArchived(plan)}
-      isLoading={isLoading}
-    >
+    <Button key="confirm" onClick={handleSave} variant={ButtonVariant.danger} isLoading={isLoading}>
       {t('Delete')}
     </Button>,
-    <Button key="cancel" variant="secondary" onClick={toggleModal}>
+    <Button key="cancel" variant={ButtonVariant.secondary} onClick={toggleModal}>
       {t('Cancel')}
     </Button>,
   ];