Add embedded dialogs

- Extracted DialogManager component selection to utils/getDialogComponent
- Added EmbeddedDialog
- Updated DialogManager to use EmbeddedDialog instead of Dialog if an app is running in embedded mode

src/components/dialog/DialogManager.js

@@ -1,13 +1,15 @@
 import React, { useRef } from 'react';
 import './Dialog.css';
-import Dialog from './Dialog';
 import { useDialogs } from '../../hooks/useDialogs';
 import { removeDialog } from '../../services/dialogService';
+import { getDialogComponent } from './utils/getDialogComponent';
+import { useEmbeddedContext } from '../../contexts/EmbeddedContext';
 
 function DialogManager() {
   const dialogs = useDialogs();
   const currentDialogRef = useRef(null);
   const currentDialog = dialogs[dialogs.length - 1];
+  const { isEmbedded } = useEmbeddedContext();
 
   const onClose = () => {
     removeDialog();
@@ -20,14 +22,11 @@ function DialogManager() {
 
   if (!currentDialog) return null;
 
-  const { customComponent, message, buttons } = currentDialog;
-  const DialogContent = customComponent ?
-    React.cloneElement(customComponent, { onClose, ref: currentDialogRef }) :
-    <Dialog message={message} buttons={buttons} onClose={onClose} ref={currentDialogRef} />;
+  const DialogComponent = getDialogComponent(currentDialog, onClose, currentDialogRef, isEmbedded);
 
   return (
     <div className="dialog-background" onClick={onBgClick}>
-      {DialogContent}
+      {DialogComponent}
     </div>
   );
 }

src/components/dialog/EmbeddedDialog.css

@@ -0,0 +1,14 @@
+.embedded-dialog {
+    display: flex;
+    background-color: var(--background-color);
+    position: relative;
+    width: 100%;
+    height: 100%;
+    align-items: center;
+    justify-content: center;
+}
+
+.embedded-dialog-message {
+    white-space: pre-wrap;
+    text-align: center;
+}

src/components/dialog/EmbeddedDialog.js

@@ -0,0 +1,15 @@
+import './EmbeddedDialog.css';
+
+const EmbeddedDialog = (props) => {
+    const {message} = props;
+
+    return (
+        <div className='embedded-dialog'>
+            <div className='embedded-dialog-message'>
+                {message}
+            </div>
+        </div>
+    );
+};
+
+export default EmbeddedDialog;

src/components/dialog/utils/getDialogComponent.js

@@ -0,0 +1,15 @@
+import { cloneElement } from 'react';
+import Dialog from '../Dialog';
+import EmbeddedDialog from '../EmbeddedDialog';
+
+export const getDialogComponent = (dialog, onClose, ref, isEmbedded) => {
+    if (dialog.customComponent) {
+        return cloneElement(dialog.customComponent, { onClose, ref });
+    }
+
+    if (isEmbedded) {
+        return <EmbeddedDialog message={dialog.message} />;
+    }
+
+    return <Dialog message={dialog.message} buttons={dialog.buttons} onClose={onClose} ref={ref} />;
+}