fix: app group bulk actions focus trap

Author: arunjaindev

src/Pages/Shared/EnvironmentOverviewTable/EnvironmentOverviewPopupMenu.tsx

@@ -25,7 +25,7 @@ export const EnvironmentOverviewPopupMenu = ({
                 showAriaLabelInTippy={false}
             />
         </PopupMenu.Button>
-        <PopupMenu.Body rootClassName="dc__border py-4 w-180">
+        <PopupMenu.Body noBackDrop rootClassName="dc__border py-4 w-180">
             {popUpMenuItems.map((popUpMenuItem) => {
                 if ('label' in popUpMenuItem) {
                     const { label, onClick, disabled, iconName } = popUpMenuItem

src/components/ApplicationGroup/Details/EnvironmentOverview/HibernateModal.tsx

@@ -110,8 +110,8 @@ export const HibernateModal = ({
         <VisibleModal close={closeModal} onEscape={closeModal} className="">
             <div onClick={stopPropagation} className="modal__body w-400 pl-24 pr-24 pt-24 pb-24 fs-14 flex column">
                 {isDeploymentWindowLoading ? (
-                    <div className="mh-320 flex">
-                        <Progressing pageLoader />
+                    <div className="mh-150 flex">
+                        <Progressing />
                     </div>
                 ) : (
                     <>
@@ -130,25 +130,25 @@ export const HibernateModal = ({
                             </span>
                             {renderHibernateModalBody()}
                         </div>
-                        <div className="pt-40 flexbox dc__content-end w-100 dc__align-end dc__gap-12">
-                            <button
-                                onClick={closeModal}
-                                className="flex bg__primary dc__border-radius-4-imp h-36 pl-16 pr-16 pt-8 pb-8 dc__border"
-                            >
-                                Cancel
-                            </button>
-
-                            <button
-                                type="button"
-                                className="cta flex h-36 pl-16 pr-16 pt-8 pb-8 w-96 dc__border-radius-4-imp"
-                                disabled={!showDefaultDrawer && isActionButtonDisabled}
-                                onClick={handleAction}
-                            >
-                                {openedHibernateModalType === MODAL_TYPE.HIBERNATE ? 'Hibernate' : 'Unhibernate'}
-                            </button>
-                        </div>
                     </>
                 )}
+                <div className="pt-40 flexbox dc__content-end w-100 dc__align-end dc__gap-12">
+                    <button
+                        onClick={closeModal}
+                        className="flex bg__primary dc__border-radius-4-imp h-36 pl-16 pr-16 pt-8 pb-8 dc__border"
+                    >
+                        Cancel
+                    </button>
+
+                    <button
+                        type="button"
+                        className="cta flex h-36 pl-16 pr-16 pt-8 pb-8 w-96 dc__border-radius-4-imp"
+                        disabled={!showDefaultDrawer && isActionButtonDisabled}
+                        onClick={handleAction}
+                    >
+                        {openedHibernateModalType === MODAL_TYPE.HIBERNATE ? 'Hibernate' : 'Unhibernate'}
+                    </button>
+                </div>
             </div>
         </VisibleModal>
     )

src/components/ApplicationGroup/Details/EnvironmentOverview/RestartWorkloadModal.tsx

@@ -20,12 +20,16 @@ import { Prompt, useHistory, useLocation } from 'react-router-dom'
 import {
     ApiQueuingWithBatch,
     Button,
+    ButtonStyleType,
+    ButtonVariantType,
     Checkbox,
     CHECKBOX_VALUE,
+    ComponentSizeType,
     DEFAULT_ROUTE_PROMPT_MESSAGE,
     Drawer,
     ErrorScreenManager,
     GenericEmptyState,
+    Icon,
     InfoBlock,
     MODAL_TYPE,
     stopPropagation,
@@ -36,7 +40,6 @@ import {
 import { ReactComponent as Retry } from '../../../../assets/icons/ic-arrow-clockwise.svg'
 import { ReactComponent as DropdownIcon } from '../../../../assets/icons/ic-arrow-left.svg'
 import { ReactComponent as RotateIcon } from '../../../../assets/icons/ic-arrows_clockwise.svg'
-import { ReactComponent as Close } from '../../../../assets/icons/ic-close.svg'
 import { ReactComponent as MechanicalIcon } from '../../../../assets/img/ic-mechanical-operation.svg'
 import { importComponentFromFELibrary } from '../../../common'
 import {
@@ -205,7 +208,16 @@ export const RestartWorkloadModal = ({
     const renderHeaderSection = (): JSX.Element => (
         <div className="flex dc__content-space dc__border-bottom pt-12 pr-20 pb-12 pl-20">
             <div className="fs-16 fw-6 lh-1-5">{` Restart workloads on '${envName}'`}</div>
-            <Close className="icon-dim-24 cursor" onClick={closeDrawer} />
+            <Button
+                dataTestId="close-bulk-restart"
+                icon={<Icon name="ic-close-large" color={null} />}
+                size={ComponentSizeType.xs}
+                onClick={closeDrawer}
+                ariaLabel="close bulk restart drawer"
+                showAriaLabelInTippy={false}
+                style={ButtonStyleType.negativeGrey}
+                variant={ButtonVariantType.borderLess}
+            />
         </div>
     )