PRE-POC - dropdown depend fields

cf-editor-form-field-depend-fields-sample/README.md

@@ -0,0 +1,81 @@
+# AEM Content Fragment Editor Form Field Dropdown Example
+
+A sample extension demonstrating the customization of a form field in the AEM Content Fragment Editor.
+
+## Setup
+
+- Populate the `.env` file in the project root and fill it as shown [below](#env)
+
+## Local Dev
+
+- `aio app run` to start your local Dev server
+- App will run on `localhost:9080` by default
+
+By default the UI will be served locally but actions will be deployed and served from Adobe I/O Runtime. To start a
+local serverless stack and also run your actions locally use the `aio app run --local` option.
+
+## Test & Coverage
+
+- Run `aio app test` to run unit tests for ui and actions
+- Run `aio app test --e2e` to run e2e tests
+
+## Deploy & Cleanup
+
+- `aio app deploy` to build and deploy all actions on Runtime and static files to CDN
+- `aio app undeploy` to undeploy the app
+
+## Config
+
+### `.env`
+
+You can generate this file using the command `aio app use`.
+
+```bash
+# This file must **not** be committed to source control
+
+## please provide your Adobe I/O Runtime credentials
+# AIO_RUNTIME_AUTH=
+# AIO_RUNTIME_NAMESPACE=
+```
+
+### `app.config.yaml`
+
+- Main configuration file that defines an application's implementation.
+- More information on this file, application configuration, and extension configuration
+  can be found [here](https://developer.adobe.com/app-builder/docs/guides/configuration/#appconfigyaml)
+
+#### Action Dependencies
+
+- You have two options to resolve your actions' dependencies:
+
+    1. **Packaged action file**: Add your action's dependencies to the root
+       `package.json` and install them using `npm install`. Then set the `function`
+       field in `app.config.yaml` to point to the **entry file** of your action
+       folder. We will use `webpack` to package your code and dependencies into a
+       single minified js file. The action will then be deployed as a single file.
+       Use this method if you want to reduce the size of your actions.
+
+    2. **Zipped action folder**: In the folder containing the action code add a
+       `package.json` with the action's dependencies. Then set the `function`
+       field in `app.config.yaml` to point to the **folder** of that action. We will
+       install the required dependencies within that directory and zip the folder
+       before deploying it as a zipped action. Use this method if you want to keep
+       your action's dependencies separated.
+
+## Debugging in VS Code
+
+While running your local server (`aio app run`), both UI and actions can be debugged, to do so open the vscode debugger
+and select the debugging configuration called `WebAndActions`.
+Alternatively, there are also debug configs for only UI and each separate action.
+
+## Typescript support for UI
+
+To use typescript use `.tsx` extension for react components and add a `tsconfig.json`
+and make sure you have the below config added
+```
+ {
+  "compilerOptions": {
+      "jsx": "react"
+    }
+  }
+```

cf-editor-form-field-depend-fields-sample/_dot.env

@@ -0,0 +1,10 @@
+
+# Specify your secrets here
+# This file must not be committed to source control
+
+## Adobe I/O Runtime credentials
+AIO_runtime_auth=''
+AIO_runtime_namespace=''
+AIO_runtime_apihost='https://adobeioruntime.net'
+## Adobe I/O Console service account credentials (JWT) Api Key
+SERVICE_API_KEY=''

cf-editor-form-field-depend-fields-sample/_dot.gitignore

@@ -0,0 +1,42 @@
+
+# package directories
+node_modules
+jspm_packages
+
+# build
+build
+dist
+.manifest-dist.yml
+
+# Config
+config.json
+.env*
+.aio
+
+# Adobe I/O console config
+console.json
+
+# Test output
+junit.xml
+
+# IDE & Temp
+.cache
+.idea
+.nyc_output
+.vscode
+coverage
+.aws.tmp.creds.json
+.wskdebug.props.tmp
+
+# Parcel
+.parcel-cache
+
+# OSX
+.DS_Store
+
+# yeoman
+.yo-repository
+
+# logs folder for aio-run-detached
+logs
+

cf-editor-form-field-depend-fields-sample/app.config.yaml

@@ -0,0 +1,3 @@
+extensions:
+  aem/cf-editor/1:
+    $include: src/aem-cf-editor-1/ext.config.yaml

cf-editor-form-field-depend-fields-sample/e2e/dropdown-data.e2e.test.js

@@ -0,0 +1,23 @@
+/* 
+* <license header>
+*/
+
+const { Config } = require('@adobe/aio-sdk').Core
+const fs = require('fs')
+const fetch = require('node-fetch')
+
+// get action url
+const namespace = Config.get('runtime.namespace')
+const hostname = Config.get('cna.hostname') || 'adobeioruntime.net'
+const packagejson = JSON.parse(fs.readFileSync('package.json').toString())
+const runtimePackage = 'cf-editor-form-field-dropdown-sample'
+const actionUrl = `https://${namespace}.${hostname}/api/v1/web/${runtimePackage}/dropdown-data`
+
+// The deployed actions are secured with the `require-adobe-auth` annotation.
+// If the authorization header is missing, Adobe I/O Runtime returns with a 401 before the action is executed.
+test('returns a 401 when missing Authorization header', async () => {
+  const res = await fetch(actionUrl)
+  expect(res).toEqual(expect.objectContaining({
+    status: 401
+  }))
+})

cf-editor-form-field-depend-fields-sample/extension-manifest.json

@@ -0,0 +1,6 @@
+{
+  "name": "cf-editor-form-field-dropdown-sample",
+  "id": "cf-editor-form-field-dropdown-sample",
+  "description": "cf-editor-form-field-dropdown-sample",
+  "version": "0.0.1"
+}

cf-editor-form-field-depend-fields-sample/hooks/post-deploy.js

@@ -0,0 +1,40 @@
+/*
+ * Copyright 2024 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License")
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+const chalk = require('chalk');
+const fs = require('fs');
+const yaml = require('js-yaml');
+
+module.exports = (config) => {
+  try {
+    // read the app.config.yaml file to get the extension points
+    const yamlFile = fs.readFileSync(`${config.root}/app.config.yaml`, 'utf8');
+    const yamlData = yaml.load(yamlFile);
+    const { extensions } = yamlData;
+
+    // For now we are ok just to read the first extension point to build the preview link
+    const extension = Object.keys(extensions)[0];
+    const previewData = {
+      extensionPoint: extension,
+      url: config.project.workspace.app_url,
+    };
+
+    // buid the preview URL
+    const base64EncodedData = Buffer.from(JSON.stringify(previewData)).toString('base64');
+    console.log(chalk.magenta(chalk.bold('For a developer preview of your UI extension in the AEM environment, follow the URL:')));
+
+    // check if the environment is stage, if so, we need to add the -stage suffix to the URL
+    const env = process.env.AIO_CLI_ENV === 'stage' ? '-stage' : '';
+    console.log(chalk.magenta(chalk.bold(`  -> https://experience${env}.adobe.com/aem/extension-manager/preview/${base64EncodedData}`)));
+  } catch (error) {
+    // if something went wrong, we do nothing, and just don't display the URL
+  }
+};

cf-editor-form-field-depend-fields-sample/jest.setup.js

@@ -0,0 +1,15 @@
+/*
+Copyright 2024 Adobe. All rights reserved.
+This file is licensed to you under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License. You may obtain a copy
+of the License at http://www.apache.org/licenses/LICENSE-2.0
+Unless required by applicable law or agreed to in writing, software distributed under
+the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+OF ANY KIND, either express or implied. See the License for the specific language
+governing permissions and limitations under the License.
+*/
+
+jest.setTimeout(10000)
+
+beforeEach(() => { })
+afterEach(() => { })