Add the ability to launch multiple modals with useModal hook

Author: kyoto

Diff for: dynamic-demo-plugin/src/components/Modals/ModalPage.tsx

@@ -32,6 +32,36 @@ export const TestModal: React.FC<{ closeModal: () => void }> = (props) => {
   );
 };
 
+const TEST_ID_1 = 'TEST_ID_1';
+const TestComponentWithID1 = ({ closeModal }) => (
+  <div style={{
+    backgroundColor: 'gray',
+    position: 'absolute',
+    right: '5rem',
+    top: '5rem',
+    width: '20rem',
+    zIndex: 100,
+  }}>
+    <p>Test Modal with ID "{TEST_ID_1}"</p>
+    <Button onClick={closeModal}>Close</Button>
+  </div>
+);
+
+const TEST_ID_2 = 'TEST_ID_2';
+const TestComponentWithID2 = ({ closeModal, ...rest }) => (
+  <div style={{
+    backgroundColor: 'gray',
+    bottom: '5rem',
+    position: 'absolute',
+    right: '5rem',
+    width: '20rem',
+    zIndex: 100,
+  }}>
+    <p>Test Modal with ID "{TEST_ID_2}" and testProp "{rest.testProp}"</p>
+    <Button onClick={closeModal}>Close</Button>
+  </div>
+);
+
 const LoadingComponent: React.FC = () => {
   const { t } = useTranslation();
 
@@ -70,6 +100,14 @@ export const TestModalPage: React.FC<{ closeComponent: any }> = () => {
   };
 
   const onClick = React.useCallback(() => launchModal(TestComponent, {}), [launchModal]);
+  const onClickWithID1 = React.useCallback(
+    () => launchModal(TestComponentWithID1, {}, TEST_ID_1),
+    [launchModal],
+  );
+  const onClickWithID2 = React.useCallback(
+    () => launchModal(TestComponentWithID2, { testProp: 'abc' }, TEST_ID_2),
+    [launchModal],
+  );
   const onAsyncClick = React.useCallback(() => launchModal(AsyncTestComponent, {}), [launchModal]);
 
   return (
@@ -81,6 +119,12 @@ export const TestModalPage: React.FC<{ closeComponent: any }> = () => {
       className="demo-modal__page"
     >
       <Button onClick={onClick}>{t('plugin__console-demo-plugin~Launch Modal')}</Button>
+      <Button onClick={onClickWithID1}>
+        {t('plugin__console-demo-plugin~Launch Modal with ID 1')}
+      </Button>
+      <Button onClick={onClickWithID2}>
+        {t('plugin__console-demo-plugin~Launch Modal with ID 2')}
+      </Button>
       <Button onClick={onAsyncClick}>
         {t('plugin__console-demo-plugin~Launch Modal Asynchronously')}
       </Button>

Diff for: frontend/packages/console-dynamic-plugin-sdk/src/app/modal-support/ModalProvider.tsx

@@ -1,11 +1,16 @@
 import * as React from 'react';
+import * as _ from 'lodash';
 
 type CloseModal = () => void;
 
 type UnknownProps = { [key: string]: unknown };
 export type ModalComponent<P = UnknownProps> = React.FC<P & { closeModal: CloseModal }>;
 
-export type LaunchModal = <P = UnknownProps>(component: ModalComponent<P>, extraProps: P) => void;
+export type LaunchModal = <P = UnknownProps>(
+  component: ModalComponent<P>,
+  extraProps: P,
+  id?: string,
+) => void;
 
 type ModalContextValue = {
   launchModal: LaunchModal;
@@ -17,24 +22,50 @@ export const ModalContext = React.createContext<ModalContextValue>({
   closeModal: () => {},
 });
 
+type ComponentMap = {
+  [key: string]: {
+    Component: ModalComponent<UnknownProps>;
+    props: { [key: string]: any };
+  };
+};
+
 export const ModalProvider: React.FC = ({ children }) => {
   const [isOpen, setOpen] = React.useState(false);
   const [Component, setComponent] = React.useState<ModalComponent>();
   const [componentProps, setComponentProps] = React.useState({});
+  const [componentsMap, setComponentsMap] = React.useState<ComponentMap>({});
 
   const launchModal = React.useCallback<LaunchModal>(
-    (component, compProps) => {
-      setComponent(() => component);
+    (component, compProps, id = undefined) => {
+      if (id) {
+        setComponentsMap((components) => ({
+          ...components,
+          [id]: { Component: component, props: compProps },
+        }));
+      } else {
+        setComponent(() => component);
+      }
       setComponentProps(compProps);
       setOpen(true);
     },
     [setOpen, setComponent, setComponentProps],
   );
-  const closeModal = React.useCallback<CloseModal>(() => setOpen(false), [setOpen]);
+
+  const closeModal = React.useCallback<CloseModal>(() => {
+    setOpen(false);
+    setComponent(undefined);
+  }, [setOpen]);
+
+  const closeModalWithID = React.useCallback<(id: string) => void>((id) => {
+    setComponentsMap((components) => _.omit(components, id));
+  }, []);
 
   return (
     <ModalContext.Provider value={{ launchModal, closeModal }}>
       {isOpen && !!Component && <Component {...componentProps} closeModal={closeModal} />}
+      {_.map(componentsMap, (c, id) => (
+        <c.Component {...c.props} key={id} closeModal={() => closeModalWithID(id)} />
+      ))}
       {children}
     </ModalContext.Provider>
   );