Add Assets View UIX Extenstions

assets-view-browse/.babelrc

@@ -0,0 +1,5 @@
+{
+  "plugins": [
+    "@babel/plugin-transform-react-jsx"
+  ]
+}

assets-view-browse/.eslintrc.json

@@ -0,0 +1,10 @@
+{
+    "env": {
+        "es6": true,
+        "node": true
+    },
+    "extends": ["eslint:recommended", "plugin:jest/recommended"],
+    "parserOptions": {
+        "ecmaVersion": "latest"
+    }
+}

assets-view-browse/.github/workflows/deploy_prod.yml

@@ -0,0 +1,60 @@
+name: AIO App CI
+
+on:
+  release:
+    types: [released]
+jobs:
+  deploy:
+    name: Deploy to Prod
+    runs-on: ${{ matrix.os }}
+    strategy:
+      max-parallel: 1
+      matrix:
+        node-version: ['20']
+        os: [ubuntu-latest]
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+      - name: Use Node.js ${{ matrix.node-version }}
+        uses: actions/setup-node@v4
+        with:
+          node-version: ${{ matrix.node-version }}
+      - name: npm install
+        run: npm i
+      - name: Setup CLI
+        uses: adobe/[email protected]
+        with:
+          os: ${{ matrix.os }}
+          version: 11.x.x
+      - name: Auth
+        uses: adobe/[email protected]
+        with:
+          os: ${{ matrix.os }}
+          command: oauth_sts
+          CLIENTID: ${{ secrets.CLIENTID_PROD }}
+          CLIENTSECRET: ${{ secrets.CLIENTSECRET_PROD }}
+          TECHNICALACCOUNTID: ${{ secrets.TECHNICALACCID_PROD }}
+          TECHNICALACCOUNTEMAIL: ${{ secrets.TECHNICALACCEMAIL_PROD }}
+          IMSORGID: ${{ secrets.IMSORGID_PROD }}
+          SCOPES: ${{ secrets.SCOPES_PROD }}
+      - name: Build
+        env:
+          AIO_RUNTIME_NAMESPACE: ${{ secrets.AIO_RUNTIME_NAMESPACE_PROD }}
+        uses: adobe/[email protected]
+        with:
+          os: ${{ matrix.os }}
+          command: build
+      - name: Deploy
+        env:
+          AIO_RUNTIME_NAMESPACE: ${{ secrets.AIO_RUNTIME_NAMESPACE_PROD }}
+          AIO_RUNTIME_AUTH: ${{ secrets.AIO_RUNTIME_AUTH_PROD }}
+          AIO_PROJECT_ID: ${{ secrets.AIO_PROJECT_ID_PROD }}
+          AIO_PROJECT_NAME: ${{ secrets.AIO_PROJECT_NAME_PROD }}
+          AIO_PROJECT_ORG_ID: ${{ secrets.AIO_PROJECT_ORG_ID_PROD }}
+          AIO_PROJECT_WORKSPACE_ID: ${{ secrets.AIO_PROJECT_WORKSPACE_ID_PROD }}
+          AIO_PROJECT_WORKSPACE_NAME: ${{ secrets.AIO_PROJECT_WORKSPACE_NAME_PROD }}
+          AIO_PROJECT_WORKSPACE_DETAILS_SERVICES: ${{ secrets.AIO_PROJECT_WORKSPACE_DETAILS_SERVICES_PROD }}
+        uses: adobe/[email protected]
+        with:
+          os: ${{ matrix.os }}
+          command: deploy

assets-view-browse/.github/workflows/deploy_stage.yml

@@ -0,0 +1,62 @@
+name: AIO App CI
+
+on:
+  push:
+    branches:
+      - main
+jobs:
+  deploy:
+    name: Deploy to Stage
+    runs-on: ${{ matrix.os }}
+    strategy:
+      max-parallel: 1
+      matrix:
+        node-version: ['20']
+        os: [ubuntu-latest]
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+      - name: Use Node.js ${{ matrix.node-version }}
+        uses: actions/setup-node@v4
+        with:
+          node-version: ${{ matrix.node-version }}
+      - name: npm install
+        run: npm i
+      - name: Setup CLI
+        uses: adobe/[email protected]
+        with:
+          os: ${{ matrix.os }}
+          version: 11.x.x
+      - name: Auth
+        uses: adobe/[email protected]
+        with:
+          os: ${{ matrix.os }}
+          command: oauth_sts
+          CLIENTID: ${{ secrets.CLIENTID_STAGE }}
+          CLIENTSECRET: ${{ secrets.CLIENTSECRET_STAGE }}
+          TECHNICALACCOUNTID: ${{ secrets.TECHNICALACCID_STAGE }}
+          TECHNICALACCOUNTEMAIL: ${{ secrets.TECHNICALACCEMAIL_STAGE }}
+          IMSORGID: ${{ secrets.IMSORGID_STAGE }}
+          SCOPES: ${{ secrets.SCOPES_STAGE }}
+      - name: Build
+        env:
+          AIO_RUNTIME_NAMESPACE: ${{ secrets.AIO_RUNTIME_NAMESPACE_STAGE }}
+        uses: adobe/[email protected]
+        with:
+          os: ${{ matrix.os }}
+          command: build
+      - name: Deploy
+        env:
+          AIO_RUNTIME_NAMESPACE: ${{ secrets.AIO_RUNTIME_NAMESPACE_STAGE }}
+          AIO_RUNTIME_AUTH: ${{ secrets.AIO_RUNTIME_AUTH_STAGE }}
+          AIO_PROJECT_ID: ${{ secrets.AIO_PROJECT_ID_STAGE }}
+          AIO_PROJECT_NAME: ${{ secrets.AIO_PROJECT_NAME_STAGE }}
+          AIO_PROJECT_ORG_ID: ${{ secrets.AIO_PROJECT_ORG_ID_STAGE }}
+          AIO_PROJECT_WORKSPACE_ID: ${{ secrets.AIO_PROJECT_WORKSPACE_ID_STAGE }}
+          AIO_PROJECT_WORKSPACE_NAME: ${{ secrets.AIO_PROJECT_WORKSPACE_NAME_STAGE }}
+          AIO_PROJECT_WORKSPACE_DETAILS_SERVICES: ${{ secrets.AIO_PROJECT_WORKSPACE_DETAILS_SERVICES_STAGE }}
+        uses: adobe/[email protected]
+        with:
+          os: ${{ matrix.os }}
+          command: deploy
+          noPublish: true

assets-view-browse/.github/workflows/pr_test.yml

@@ -0,0 +1,48 @@
+name: AIO App CI
+
+on: [pull_request]
+jobs:
+  test:
+    name: Test PR
+    runs-on: ${{ matrix.os }}
+    strategy:
+      matrix:
+        node-version: ['20']
+        os: [macOS-latest, ubuntu-latest, windows-latest]
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+      - name: Use Node.js ${{ matrix.node-version }}
+        uses: actions/setup-node@v4
+        with:
+          node-version: ${{ matrix.node-version }}
+      - name: npm install
+        run: npm i
+      - name: Setup CLI
+        uses: adobe/[email protected]
+        with:
+          os: ${{ matrix.os }}
+          version: 11.x.x
+      - name: Auth
+        uses: adobe/[email protected]
+        with:
+          os: ${{ matrix.os }}
+          command: oauth_sts
+          CLIENTID: ${{ secrets.CLIENTID_STAGE }}
+          CLIENTSECRET: ${{ secrets.CLIENTSECRET_STAGE }}
+          TECHNICALACCOUNTID: ${{ secrets.TECHNICALACCID_STAGE }}
+          TECHNICALACCOUNTEMAIL: ${{ secrets.TECHNICALACCEMAIL_STAGE }}
+          IMSORGID: ${{ secrets.IMSORGID_STAGE }}
+          SCOPES: ${{ secrets.SCOPES_STAGE }}
+      - name: Build
+        env:
+          AIO_RUNTIME_NAMESPACE: ${{ secrets.AIO_RUNTIME_NAMESPACE_STAGE }}
+        uses: adobe/[email protected]
+        with:
+          os: ${{ matrix.os }}
+          command: build
+      - name: Test
+        uses: adobe/[email protected]
+        with:
+          os: ${{ matrix.os }}
+          command: test

assets-view-browse/.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
+

assets-view-browse/README.md

@@ -0,0 +1,80 @@
+# publicExamples
+
+Welcome to my Adobe I/O Application!
+
+## 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 run your actions locally use the `aio app dev` option.
+
+For more information on the difference between `aio app run` and `aio app dev`, see [here](https://developer.adobe.com/app-builder/docs/guides/development/#aio-app-dev-vs-aio-app-run)
+
+## 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 dev`), both UI and actions can be debugged. To do so follow the instructions [here](https://developer.adobe.com/app-builder/docs/guides/development/#debugging)
+
+## 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"
+    }
+  } 
+```

assets-view-browse/app.config.yaml

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

assets-view-browse/extension-manifest.json

@@ -0,0 +1,23 @@
+{
+  "name": "Assets View UIX Browse Example",
+  "id": "assets-view-uix-browse-example",
+  "description": "Shows a Action Bar button that opens a Modal dialog and renders data fetched using Adobe IO Actions",
+  "version": "0.0.1",
+  "actionBarActions": [
+    {
+      "label": "Open Metadata",
+      "icon": "FileData",
+      "needsModal": true,
+      "modalTitle": "Asset Data",
+      "modalType": "modal",
+      "modalSize": "M",
+      "id": "open-metadata",
+      "componentName": "ModalOpenMetadata"
+    }
+  ],
+  "runtimeActions": [
+    {
+      "name": "fetchMetadata"
+    }
+  ]
+}

assets-view-browse/hooks/post-deploy.js

@@ -0,0 +1,40 @@
+/*
+Copyright 2025 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,
+    };
+
+    // build 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 Assets View 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
+  }
+};

assets-view-browse/jest.setup.js

@@ -0,0 +1,8 @@
+/*
+* <license header>
+*/
+
+jest.setTimeout(10000)
+
+beforeEach(() => { })
+afterEach(() => { })