OCPBUGS-49709: Add useOverlay hook to dynamic plugin SDK and deprecate useModal hook

dynamic-demo-plugin/locales/en/plugin__console-demo-plugin.json

@@ -44,9 +44,15 @@
   "Storage Classes": "Storage Classes",
   "StorageClasses present in this cluster:": "StorageClasses present in this cluster:",
   "Component is resolving": "Component is resolving",
+  "Test overlay with props": "Test overlay with props",
+  "Test modal launched with useOverlay": "Test modal launched with useOverlay",
+  "Overlay modal": "Overlay modal",
   "Modal Launchers": "Modal Launchers",
   "Launch Modal": "Launch Modal",
   "Launch Modal Asynchronously": "Launch Modal Asynchronously",
+  "Launch overlay": "Launch overlay",
+  "Launch overlay with props": "Launch overlay with props",
+  "Launch overlay modal": "Launch overlay modal",
   "Hello {{planet}}! I am Thor!": "Hello {{planet}}! I am Thor!",
   "Hello {{planet}}! I am Loki!": "Hello {{planet}}! I am Loki!",
   "Added title": "Added title",

dynamic-demo-plugin/src/components/Modals/CreateProjectModal.tsx

@@ -15,10 +15,10 @@ import {
   TextInput,
 } from '@patternfly/react-core';
 import { useTranslation } from 'react-i18next';
-import { k8sCreate } from '@openshift-console/dynamic-plugin-sdk';
+import { k8sCreate, ModalComponent } from '@openshift-console/dynamic-plugin-sdk';
 import { K8sModel } from '@openshift-console/dynamic-plugin-sdk/lib/api/common-types';
 
-const CreateProjectModal: React.FC<{ closeModal: () => void }> = ({ closeModal }) => {
+const CreateProjectModal: ModalComponent = ({ closeModal }) => {
   const { t } = useTranslation('plugin__console-plugin-template');
   const [name, setName] = React.useState<string>('');
   const [displayName, setDisplayName] = React.useState('');
@@ -69,12 +69,11 @@ const CreateProjectModal: React.FC<{ closeModal: () => void }> = ({ closeModal }
   };
 
   return (
-    <Modal
-      variant={ModalVariant.small}
-      isOpen
-      onClose={closeModal}
-    >
-      <ModalHeader title={t('Create Project')} description={t('This modal is created with an extension.')} />
+    <Modal variant={ModalVariant.small} isOpen onClose={closeModal}>
+      <ModalHeader
+        title={t('Create Project')}
+        description={t('This modal is created with an extension.')}
+      />
       <ModalBody>
         <Form>
           <FormGroup label={t('Name')} isRequired fieldId="input-name">
@@ -121,18 +120,16 @@ const CreateProjectModal: React.FC<{ closeModal: () => void }> = ({ closeModal }
         </Form>
       </ModalBody>
       <ModalFooter>
-        {
-          inProgress
-            ? [<Spinner key="foo" />]
-            : [
-                <Button key="create" variant="primary" onClick={create}>
-                  {t('Create')}
-                </Button>,
-                <Button key="cancel" variant="link" onClick={closeModal}>
-                  {t('Cancel')}
-                </Button>,
-              ]
-        }
+        {inProgress
+          ? [<Spinner key="foo" />]
+          : [
+              <Button key="create" variant="primary" onClick={create}>
+                {t('Create')}
+              </Button>,
+              <Button key="cancel" variant="link" onClick={closeModal}>
+                {t('Cancel')}
+              </Button>,
+            ]}
       </ModalFooter>
     </Modal>
   );

dynamic-demo-plugin/src/components/Modals/ModalPage.tsx

@@ -1,10 +1,22 @@
 import * as React from 'react';
-import { Button, Flex, List, ListItem, Modal, ModalBody, ModalHeader, Spinner} from '@patternfly/react-core';
+import {
+  Button,
+  Flex,
+  List,
+  ListItem,
+  Modal,
+  ModalBody,
+  ModalHeader,
+  Spinner,
+} from '@patternfly/react-core';
 import {
   DocumentTitle,
   K8sResourceCommon,
+  ModalComponent,
+  OverlayComponent,
   useK8sWatchResource,
   useModal,
+  useOverlay,
 } from '@openshift-console/dynamic-plugin-sdk';
 import './modal.scss';
 import { useTranslation } from 'react-i18next';
@@ -15,14 +27,11 @@ export const scResource = {
   isList: true,
 };
 
-export const TestModal: React.FC<{ closeModal: () => void }> = (props) => {
+export const TestModal: ModalComponent = (props) => {
   const [res] = useK8sWatchResource<K8sResourceCommon[]>(scResource);
-  const { t } = useTranslation("plugin__console-demo-plugin");
+  const { t } = useTranslation('plugin__console-demo-plugin');
   return (
-    <Modal
-      isOpen
-      onClose={props?.closeModal}
-    >
+    <Modal isOpen onClose={props?.closeModal}>
       <ModalHeader title={t('Storage Classes')} />
       <ModalBody>
         {t('StorageClasses present in this cluster:')}
@@ -36,7 +45,7 @@ export const TestModal: React.FC<{ closeModal: () => void }> = (props) => {
 };
 
 const LoadingComponent: React.FC = () => {
-  const { t } = useTranslation("plugin__console-demo-plugin");
+  const { t } = useTranslation('plugin__console-demo-plugin');
 
   return (
     <Flex
@@ -50,9 +59,47 @@ const LoadingComponent: React.FC = () => {
   );
 };
 
+type TestOverlayComponentProps = {
+  heading?: string;
+};
+
+const TestOverlayComponent: OverlayComponent<TestOverlayComponentProps> = ({
+  closeOverlay,
+  heading = 'Default heading',
+}) => {
+  const [right] = React.useState(`${800 * Math.random()}px`);
+  const [top] = React.useState(`${800 * Math.random()}px`);
+
+  return (
+    <div
+      style={{
+        backgroundColor: 'gray',
+        padding: '1rem 4rem',
+        position: 'absolute',
+        right,
+        textAlign: 'center',
+        top,
+        zIndex: 999,
+      }}
+    >
+      <h2>{heading}</h2>
+      <Button onClick={closeOverlay}>Close</Button>
+    </div>
+  );
+};
+
+const OverlayModal = ({ body, closeOverlay, title }) => (
+  <Modal isOpen onClose={closeOverlay}>
+    <ModalHeader title={title} />
+    <ModalBody>{body}</ModalBody>
+  </Modal>
+);
+
 export const TestModalPage: React.FC<{ closeComponent: any }> = () => {
+  const { t } = useTranslation('plugin__console-demo-plugin');
+
   const launchModal = useModal();
-  const { t } = useTranslation("plugin__console-demo-plugin");
+  const launchOverlay = useOverlay();
 
   const TestComponent = ({ closeModal, ...rest }) => (
     <TestModal closeModal={closeModal} {...rest} />
@@ -72,8 +119,28 @@ export const TestModalPage: React.FC<{ closeComponent: any }> = () => {
     );
   };
 
-  const onClick = React.useCallback(() => launchModal(TestComponent, {}), [launchModal]);
-  const onAsyncClick = React.useCallback(() => launchModal(AsyncTestComponent, {}), [launchModal]);
+  const onClick = React.useCallback(() => {
+    launchModal(TestComponent, {});
+  }, [launchModal]);
+
+  const onAsyncClick = React.useCallback(() => {
+    launchModal(AsyncTestComponent, {});
+  }, [launchModal]);
+
+  const onClickOverlayBasic = React.useCallback(() => {
+    launchOverlay(TestOverlayComponent, {});
+  }, [launchOverlay]);
+
+  const onClickOverlayWithProps = React.useCallback(() => {
+    launchOverlay(TestOverlayComponent, { heading: t('Test overlay with props') });
+  }, [launchOverlay]);
+
+  const onClickOverlayModal = React.useCallback(() => {
+    launchOverlay(OverlayModal, {
+      body: t('Test modal launched with useOverlay'),
+      title: t('Overlay modal'),
+    });
+  }, [launchOverlay]);
 
   return (
     <Flex
@@ -85,8 +152,15 @@ export const TestModalPage: React.FC<{ closeComponent: any }> = () => {
     >
       <DocumentTitle>{t('Modal Launchers')}</DocumentTitle>
       <Button onClick={onClick}>{t('Launch Modal')}</Button>
-      <Button onClick={onAsyncClick}>
-        {t('Launch Modal Asynchronously')}
+      <Button onClick={onAsyncClick}>{t('Launch Modal Asynchronously')}</Button>
+      <Button onClick={onClickOverlayBasic}>
+        {t('plugin__console-demo-plugin~Launch overlay')}
+      </Button>
+      <Button onClick={onClickOverlayWithProps}>
+        {t('plugin__console-demo-plugin~Launch overlay with props')}
+      </Button>
+      <Button onClick={onClickOverlayModal}>
+        {t('plugin__console-demo-plugin~Launch overlay modal')}
       </Button>
     </Flex>
   );