[WIP] ASSETS-48891 Adopt modal dialog support to common Host API in Detail extension

src/generator-add-web-assets.js

@@ -125,6 +125,17 @@ class ExtensionWebAssetsGenerator extends Generator {
                     PanelComponentName: panelComponentName
                 }
             );
+
+            const customModals = panel.customModals || [];
+            customModals.forEach((modal) => {
+                const modalComponentName = modal.componentName;
+                this.fs.copyTpl(
+                    this.templatePath(relativeTemplatePath),
+                    this.destinationPath(path.join(this.destFolder, `./src/components/${modalComponentName}.js`)), {
+                        ModalComponentName: modalComponentName
+                    }
+                );
+            });
         })
     }
 }

src/prompts.js

@@ -140,10 +140,33 @@ const promptMainMenu = (manifest) => {
 
 // Prompts for panel metadata
 const nestedPanelsPrompts = (manifest, manifestNodeName) => {
-    const questions = [tooltipPrompt(), titlePrompt(), iconPrompt()];
+    // First prompt for basic info
+    const basicQuestions = [tooltipPrompt(), titlePrompt(), iconPrompt(), modalPrompt()];
 
     return inquirer
-        .prompt(questions)
+        .prompt(basicQuestions)
+        .then((basicAnswers) => {
+            // If modal is needed, prompt for modal details
+            if (basicAnswers.needsModal) {
+                // First get title and type
+                const mandatoryModalQuestions = [
+                    modalButtonLabelPrompt(),
+                    modalTitlePrompt(),
+                    modalTypePrompt()
+                ];
+
+                return inquirer.prompt(mandatoryModalQuestions).then(mandatoryModalAnswers => {
+                    // Only prompt for size if type is 'modal'
+                    if (mandatoryModalAnswers.modalType === 'modal') {
+                        return inquirer.prompt(modalSizePrompt()).then(sizeAnswer => {
+                            return {...basicAnswers, ...mandatoryModalAnswers, ...sizeAnswer};
+                        });
+                    }
+                    return {...basicAnswers, ...mandatoryModalAnswers};
+                });
+            }
+            return basicAnswers;
+        })
         .then((answers) => {
             answers.id = slugify(answers.tooltip, {
                 replacement: '-',  // replace spaces with replacement character, defaults to `-`
@@ -156,6 +179,11 @@ const nestedPanelsPrompts = (manifest, manifestNodeName) => {
             answers.componentName = 'Panel' + answers.id.split('-')
                 .map((word) => word.charAt(0).toUpperCase() + word.slice(1))
                 .join('');
+            if (answers.needsModal) {
+                answers.modalComponentName = 'Modal' + answers.id.split('-')
+                    .map((word) => word.charAt(0).toUpperCase() + word.slice(1))
+                    .join('');
+            }
             manifest[manifestNodeName] = manifest[manifestNodeName] || [];
             manifest[manifestNodeName].push(answers);
         })
@@ -324,6 +352,67 @@ const iconPrompt = () => {
     };
 }
 
+const modalPrompt = () => {
+    return {
+        type: 'confirm',
+        name: 'needsModal',
+        message: "Do you need to show a modal with a button?",
+        default: false
+    };
+}
+
+// Helper prompts for the open for opening a modal dialog
+const modalButtonLabelPrompt = () => {
+    return {
+        type: 'input',
+        name: 'label',
+        message: 'Please provide label for the button:',
+        validate(answer) {
+            if (!answer.length) {
+                return 'Required.';
+            }
+
+            return true;
+        },
+    };
+}
+
+const modalTitlePrompt = () => {
+    return {
+        type: 'input',
+        name: 'modalTitle',
+        message: 'Please provide the title for the modal:',
+        validate(answer) {
+            if (!answer.length) {
+                return 'Required.';
+            }
+
+            return true;
+        },
+    };
+}
+
+const modalTypePrompt = () => {
+    return {
+        type: 'list',
+        name: 'modalType',
+        message: 'Please select the type for the modal:',
+        default: 'modal',
+        choices: [
+            'modal',
+            'fullScreen'
+        ],
+    };
+}
+
+const modalSizePrompt = () => {
+    return {
+        type: 'list',
+        name: 'modalSize',
+        message: 'Please select the size for the modal:',
+        choices: ['S', 'M', 'L']
+    };
+}
 // Prompts for action metadata
 const nestedActionPrompts = (manifest, manifestNodeName) => {
     let actionName = 'generic';
@@ -374,7 +463,7 @@ const promptGuideMenu = (manifest) => {
         {
             name: "Go back",
             value: () => {
-                return Promise.resolve(true)
+                return Promise.resolve(true);
             }
         }
     );

src/templates/_shared/stub-modal.ejs

@@ -0,0 +1,54 @@
+/*
+ * <license header>
+ */
+
+import React, { useState, useEffect } from 'react';
+import { attach } from '@adobe/uix-guest';
+import {
+  Flex,
+  Provider,
+  defaultTheme,
+  Link,
+  Text,
+  ButtonGroup,
+  Button,
+  View
+} from '@adobe/react-spectrum';
+
+import { extensionId } from './Constants';
+
+export default function <%- ModalComponentName %>() {
+  // Fields
+  const [guestConnection, setGuestConnection] = useState();
+  const [colorScheme, setColorScheme] = useState('light');
+
+  useEffect(() => {
+    (async () => {
+      const guestConnection = await attach({ id: extensionId });
+      setGuestConnection(guestConnection);
+
+      const { colorScheme } = await guestConnection.host.theme.getThemeInfo();
+      setColorScheme(colorScheme);
+    })()
+  }, []);
+
+  function closeDialog() {
+    guestConnection.host.modal.closeDialog();
+  }
+
+  return (
+  <Provider theme={defaultTheme} colorScheme={colorScheme} height={'100vh'}>
+    <View>
+      <View>
+        <Text>Please visit <Link href="https://developer.adobe.com/uix/docs/">UI Extensibility documentation</Link> to get started.</Text>
+
+        <Flex justifyContent="center" marginTop="size-400">
+          <ButtonGroup>
+            <Button variant="primary" onPress={() => closeDialog()}>Close</Button>
+          </ButtonGroup>
+        </Flex>
+      </View>
+    </View>
+  </Provider>
+  );
+}