console: fix non clickable elements

[PLAT-487]: https://hasurahq.atlassian.net/browse/PLAT-487?atlOrigin=eyJpIjoiNWRkNTljNzYxNjVmNDY3MDlhMDU5Y2ZhYzA5YTRkZjUiLCJwIjoiZ2l0aHViLWNvbS1KU1cifQ
[PLAT-488]: https://hasurahq.atlassian.net/browse/PLAT-488?atlOrigin=eyJpIjoiNWRkNTljNzYxNjVmNDY3MDlhMDU5Y2ZhYzA5YTRkZjUiLCJwIjoiZ2l0aHViLWNvbS1KU1cifQ

PR-URL: https://github.com/hasura/graphql-engine-mono/pull/8273
GitOrigin-RevId: 00855e10d09eb6f860df3d206630c918858252e2

frontend/libs/console/legacy-ce/src/lib/new-components/Dialog/Dialog.stories.tsx

@@ -2,6 +2,7 @@ import React from 'react';
 import { ComponentMeta, Story } from '@storybook/react';
 import { RiPlayFill } from 'react-icons/ri';
 import { Dialog, DialogProps, FooterProps } from './Dialog';
+import { hasuraToast } from '../Toasts';
 
 export default {
   title: 'components/Dialog',
@@ -72,3 +73,40 @@ CustomFooter.args = {
   isLoading: false,
   footer: <div>custom footer</div>,
 };
+
+export const CollisionWithToast: Story<DialogProps & FooterProps> = args => (
+  <Dialog
+    hasBackdrop={args.hasBackdrop}
+    title={args.title}
+    description={args.description}
+    onClose={args.onClose}
+  >
+    <>
+      <div>I am the body!</div>
+      <Dialog.Footer
+        callToDeny={args.callToDeny}
+        callToAction={args.callToAction}
+        callToActionIconPosition="start"
+        callToActionIcon={<RiPlayFill />}
+        onClose={args.onClose}
+        onSubmit={() =>
+          hasuraToast({
+            type: 'error',
+            title: 'The toast title',
+            message: 'The toast message',
+          })
+        }
+        isLoading={args.isLoading}
+      />
+    </>
+  </Dialog>
+);
+
+CollisionWithToast.args = {
+  title: 'Title',
+  description: 'Description',
+  callToDeny: 'Cancel',
+  callToAction: 'Show toast',
+  hasBackdrop: true,
+  isLoading: false,
+};

frontend/libs/console/legacy-ce/src/lib/new-components/Toasts/ToastsHub.tsx

@@ -40,6 +40,7 @@ export const ToastsHub = ({ className = '' }: { className?: string }) => {
               position: 'absolute',
               transition: 'all 0.3s ease-out',
               opacity: toast.visible ? 1 : 0,
+              pointerEvents: toast.visible ? 'all' : 'none',
               transform: `translate(-100%, ${offset}px)`,
               zIndex: toast.visible ? 9999 : 9998,
             }}

frontend/libs/console/legacy-ee/src/lib/components/Services/Metrics/Common/DatePickerModal.js

@@ -10,6 +10,7 @@ import 'react-date-range/dist/theme/default.css'; // theme css file
 import { Button } from '@hasura/console-legacy-ce';
 
 import styles from '../Metrics.module.scss';
+import clsx from 'clsx';
 
 const DatePickerModal = props => {
   const selectionRange = {
@@ -44,7 +45,7 @@ const DatePickerModal = props => {
       id="dateModal"
       onHide={onHide}
       show={show}
-      className={styles.datePickerModalWrapper}
+      className={clsx(styles.datePickerModalWrapper, '!pointer-events-auto')}
     >
       <BootstrapModal.Header className={styles.modalHeader} closeButton>
         <BootstrapModal.Title className={styles.title}>