Merge pull request #23 from VladimirZaets/SITES-18113

SITES-18113: Extensibility template improvements

src/templates/_shared/stub-extension-registration.ejs

@@ -2,7 +2,12 @@
  * <license header>
  */
 
+<% if (
+        extensionManifest.actionBarButtons && (extensionManifest.actionBarButtons.filter(button => button.needsModal)).length ||
+        extensionManifest.headerMenuButtons && (extensionManifest.headerMenuButtons.filter(button => button.needsModal)).length
+) { %>
 import { generatePath } from "react-router";
+<% } %>
 import { Text } from "@adobe/react-spectrum";
 import { register } from "@adobe/uix-guest";
 import { extensionId } from "./Constants";

src/templates/_shared/stub-modal.ejs

@@ -22,8 +22,6 @@ import {
 <% if (extensionArea === 'actionBar') { %>
 import { useParams } from "react-router-dom"
 <% } %>
-import allActions from '../config.json'
-import actionWebInvoke from '../utils'
 
 import { extensionId } from "./Constants"
 
@@ -32,7 +30,7 @@ export default function <%- functionName %> () {
   const [guestConnection, setGuestConnection] = useState()
   <% if (extensionArea === 'actionBar') { %>
   const fragmentId = useParams()
-  
+
   if (!fragmentId) {
     console.error("fragmentId parameter is missing")
     return
@@ -55,7 +53,7 @@ export default function <%- functionName %> () {
     <Provider theme={defaultTheme} colorScheme='light'>
       <Content width="100%">
         <Text>Your modal content</Text>
-        
+
         <Flex width="100%" justifyContent="end" alignItems="center" marginTop="size-400">
           <ButtonGroup align="end">
             <Button variant="primary" onClick={onCloseHandler}>Close</Button>

src/templates/web/src/index.js

@@ -1,73 +1,16 @@
-/* 
+/*
 * <license header>
 */
 
 import 'core-js/stable'
-import 'regenerator-runtime/runtime'
 
 window.React = require('react')
 import ReactDOM from 'react-dom'
 
-import Runtime, { init } from '@adobe/exc-app'
-
 import App from './components/App'
 import './index.css'
-/* Here you can bootstrap your application and configure the integration with the Adobe Experience Cloud Shell */
-try {
-  // attempt to load the Experience Cloud Runtime
-  require('./exc-runtime')
-  // if there are no errors, bootstrap the app in the Experience Cloud Shell
-  init(bootstrapInExcShell)
-} catch (e) {
-  console.log('application not running in Adobe Experience Cloud Shell')
-  // fallback mode, run the application without the Experience Cloud Runtime
-  bootstrapRaw()
-}
-
-function bootstrapRaw () {
-  /* **here you can mock the exc runtime and ims objects** */
-  const mockRuntime = { on: () => {} }
-  const mockIms = {}
 
-  // render the actual react application and pass along the runtime object to make it available to the App
-  ReactDOM.render(
-    <App runtime={mockRuntime} ims={mockIms} />,
+ReactDOM.render(
+    <App />,
     document.getElementById('root')
-  )
-}
-
-function bootstrapInExcShell () {
-  // get the Experience Cloud Runtime object
-  const runtime = Runtime()
-
-  // use this to set a favicon
-  // runtime.favicon = 'url-to-favicon'
-
-  // use this to respond to clicks on the app-bar title
-  // runtime.heroClick = () => window.alert('Did I ever tell you you\'re my hero?')
-
-  // ready event brings in authentication/user info
-  runtime.on('ready', ({ imsOrg, imsToken, imsProfile, locale }) => {
-    // tell the exc-runtime object we are done
-    runtime.done()
-    console.log('Ready! received imsProfile:', imsProfile)
-    const ims = {
-      profile: imsProfile,
-      org: imsOrg,
-      token: imsToken
-    }
-    // render the actual react application and pass along the runtime and ims objects to make it available to the App
-    ReactDOM.render(
-      <App runtime={runtime} ims={ims} />,
-      document.getElementById('root')
-    )
-  })
-
-  // set solution info, shortTitle is used when window is too small to display full title
-  runtime.solution = {
-    icon: 'AdobeExperienceCloud',
-    title: '<%- extensionManifest.name %>',
-    shortTitle: 'JGR'
-  }
-  runtime.title = '<%- extensionManifest.name %>'
-}
+)

test/generator-add-web-assets-cf-admin.test.js

@@ -52,10 +52,8 @@ function assertEnvContent (prevContent) {
 function assertFiles (extensionManifest) {
   // Asert generated web assets files
   assert.file(`${webSrcFolder}/index.html`)
-  assert.file(`${webSrcFolder}/src/exc-runtime.js`)
   assert.file(`${webSrcFolder}/src/index.css`)
   assert.file(`${webSrcFolder}/src/index.js`)
-  assert.file(`${webSrcFolder}/src/utils.js`)
   assert.file(`${webSrcFolder}/src/components/Constants.js`)
   assert.file(`${webSrcFolder}/src/components/App.js`)
   assert.file(`${webSrcFolder}/src/components/ExtensionRegistration.js`)
@@ -83,7 +81,7 @@ function assertFiles (extensionManifest) {
     `${webSrcFolder}/src/components/Constants.js`,
     `extensionId: '${extensionManifest.id}'`
   )
-  
+
   assert.fileContent(
     `${webSrcFolder}/index.html`,
     '<script src="./src/index.js"'
@@ -96,7 +94,7 @@ function assertFiles (extensionManifest) {
   allCustomButtons.forEach((button) => {
     if (button.needsModal) {
       const modalFileName = button.label.replace(/ /g, '') + 'Modal'
-      
+
       assert.fileContent(
         `${webSrcFolder}/src/components/App.js`,
         `import ${modalFileName} from "./${modalFileName}"`
@@ -128,7 +126,7 @@ function assertFiles (extensionManifest) {
 
 describe('run', () => {
   const prevDotEnv = 'FAKECONTENT'
-  
+
   test('test a generator invocation with custom code generation', async () => {
     const options = cloneDeep(basicGeneratorOptions)
     options['extension-manifest'] = customExtensionManifest
@@ -214,4 +212,4 @@ describe('run', () => {
     assertEnvContent(prevDotEnv)
     assertCodeContent(demoExtensionManifest)
   })
-})
+})