Add Asset Modal

.env

@@ -0,0 +1,4 @@
+AEM_TLS_CERT=env/server.crt
+AEM_TLS_KEY=env/server.key
+AEM_OPEN=/
+AEM_PORT=443

.eslintignore

@@ -1 +1,2 @@
 scripts/libs/**
+test/e2e/

.eslintrc.js

@@ -21,7 +21,8 @@ module.exports = {
     'no-use-before-define': 'off',
     'no-return-await': 'off',
     'no-restricted-syntax': 'off',
-    'max-len': ['warn', { code: 140 }],
+    'no-else-return': 'off',
     'import/prefer-default-export': 'off',
+    'max-len': ['warn', { code: 140 }],
   },
 };

.gitattributes

@@ -0,0 +1 @@
+README.md merge=ours

.github/workflows/playwright.yml.disabled

@@ -0,0 +1,39 @@
+# Does not work, because Adobe flags the source IP as untrusted, and requires confirming a code sent by email.
+
+name: Playwright Tests
+on:
+  push:
+    branches: [ main, master ]
+  pull_request:
+    branches: [ main, master ]
+jobs:
+  test:
+    timeout-minutes: 60
+    runs-on: ubuntu-latest
+    steps:
+    - uses: actions/checkout@v3
+    - uses: actions/setup-node@v3
+      with:
+        node-version: 18
+    - name: Install dependencies
+      run: npm ci
+      working-directory: test/e2e/
+    - name: Install Playwright Browsers
+      run: npx playwright install --with-deps
+      working-directory: test/e2e/
+    - name: Run Playwright tests
+      run: |
+        mkdir -p .auth;
+        echo "{}" > .auth/user.json;
+        npx playwright test
+      working-directory: test/e2e/
+      env:
+        TEST_USERNAME: ${{ secrets.TEST_USERNAME }}
+        TEST_PASSWORD: ${{ secrets.TEST_PASSWORD }}
+        SHELL_SOURCE: stage
+    - uses: actions/upload-artifact@v3
+      if: always()
+      with:
+        name: playwright-report
+        path: test/e2e/playwright-report/
+        retention-days: 30

.gitignore

@@ -14,4 +14,5 @@ helix-importer-ui
 /env/
 .env
 server.crt
-server.key
+server.key
+/test/e2e/test-results

.npmrc

@@ -0,0 +1,2 @@
+registry=https://artifactory.corp.adobe.com:443/artifactory/api/npm/npm-adobe-release/
+//artifactory.corp.adobe.com:443/artifactory/api/npm/npm-adobe-release/:always-auth=false

404.html

@@ -14,10 +14,14 @@
   <script src="/scripts/scripts.js" type="module" crossorigin="use-credentials"></script>
   <script type="module">
     import { sampleRUM } from '/scripts/lib-franklin.js';
+    import { bootstrapUnifiedShell, page } from '/contenthub/unified-shell.js';
+
+    window.addEventListener('load', async () => {
+      await bootstrapUnifiedShell();
+      page.notFound();
 
-    window.addEventListener('load', () => {
       if (document.referrer) {
-        const { origin, pathname } = new URL(document.referrer);
+        const {origin, pathname} = new URL(document.referrer);
         if (origin === window.location.origin) {
           const backBtn = document.createElement('a');
           backBtn.classList.add('button', 'error-button-back');
@@ -28,7 +32,7 @@
           btnContainer.append(backBtn);
         }
       }
-      sampleRUM('404', { source: document.referrer, target: window.location.href });
+      sampleRUM('404', {source: document.referrer, target: window.location.href});
     });
   </script>
   <link rel="stylesheet" href="/styles/styles.css">

blocks/adp-add-to-collection-modal/adp-add-to-collection-modal.css

@@ -10,7 +10,6 @@
   flex-direction: column;
   row-gap: 31px;
   width: 100%;
-  height: 100%;
 }
 
 .adp-add-to-collection-modal-container .dialog-header {

blocks/adp-add-to-collection-modal/adp-add-to-collection-modal.js

@@ -2,12 +2,10 @@ import { decorateIcons } from '../../scripts/lib-franklin.js';
 import {
   listCollection, createCollection, patchCollection, getCollection,
 } from '../../scripts/collections.js';
-import { getSelectedAssetsFromInfiniteResultsBlock, populateAssetViewLeftDialog } from '../../scripts/scripts.js';
+import { populateAssetViewLeftDialog } from '../../scripts/scripts.js';
+import { getSelectedAssetsFromInfiniteResultsBlock } from '../../scripts/shared.js';
 import createMultiSelectedAssetsTable from '../../scripts/multi-selected-assets-table.js';
-
-function closeDialog(dialog) {
-  dialog.close();
-}
+import { addDialogEventListeners } from '../../scripts/dialog-html-builder.js';
 
 // Function to create the new collection input
 function createNewCollectionInput(newCollectionRadioInputContainer) {
@@ -164,12 +162,11 @@ export async function openModal(items) {
     }
 
     // Close the dialog
-    closeDialog(dialog);
+    dialog.close();
   });
 
   dialog.querySelector('.action-cancel').addEventListener('click', () => {
-    resetDialogState();
-    closeDialog(dialog);
+    dialog.close();
   });
 
   dialog.showModal();
@@ -259,8 +256,10 @@ async function populateMultiAssetView(dialog) {
 }
 
 export default async function decorate(block) {
-  block.innerHTML = `<dialog autofocus aria-label="Add To Collection">
-    <div class='adp-add-to-collection-modal-container'>
+  block.innerHTML = '';
+  const dialog = document.createElement('dialog');
+  dialog.setAttribute('aria-label', 'Add To Collection');
+  dialog.innerHTML = `<div class='adp-add-to-collection-modal-container'>
       <div class='dialog-header'>
         <div class='dialog-header-left'>Add To Collection</div>
         <div class='dialog-header-right'>
@@ -293,19 +292,19 @@ export default async function decorate(block) {
         </div>
 
       </div>
-    </div>
-  </dialog>`;
-
-  await decorateIcons(block);
-  const dialog = block.querySelector('dialog');
+    </div>`;
+  await decorateIcons(dialog);
+  block.appendChild(dialog);
   dialog.querySelector('.action-close').addEventListener('click', () => {
-    resetDialogState();
-    closeDialog(dialog);
+    dialog.close();
   });
-  document.addEventListener('keydown', (event) => {
-    if (event.key === 'Escape' && dialog.open) {
-      closeDialog(dialog);
-    }
+
+  addDialogEventListeners(dialog, {
+    closeModalOnEscape: false,
+    closeModalOnOutsideClick: true,
+    onClose: () => {
+      resetDialogState();
+    },
   });
 
   const newCollectionRadio = dialog.querySelector('#collection-selector-new-collection');
@@ -326,13 +325,4 @@ export default async function decorate(block) {
       createDropdown(addToExistingRadioDropboxContainer);
     }
   });
-
-  dialog.addEventListener('click', (event) => {
-    // only react to clicks outside the dialog. https://stackoverflow.com/a/70593278/79461
-    const dialogDimensions = dialog.getBoundingClientRect();
-    if (event.clientX < dialogDimensions.left || event.clientX > dialogDimensions.right
-      || event.clientY < dialogDimensions.top || event.clientY > dialogDimensions.bottom) {
-      closeDialog(dialog);
-    }
-  });
 }

blocks/adp-asset-details-modal/adp-asset-details-modal.js

@@ -3,10 +3,11 @@ import {
   getAnchorVariable,
   createTag,
   sortMetadata,
-  removeParamFromWindowURL,
   setHashParamInWindowURL,
-} from '../../scripts/scripts.js';
-import { closeModal } from '../../scripts/shared.js';
+  removeParamFromWindowURL,
+  closeAssetDetailsModal,
+} from '../../scripts/shared.js';
+import { addDialogEventListeners } from '../../scripts/dialog-html-builder.js';
 import { authorizeURL, getAssetMetadata } from '../../scripts/polaris.js';
 import {
   getAssetName, getAssetMimeType, getAssetTitle, isLicensedContent,
@@ -119,9 +120,6 @@ export async function openAssetDetailsModal(id, resultsManager) {
     setHashParamInWindowURL('assetId', assetId);
   }
   if (assetId) {
-    if (!document.body.classList.contains('no-scroll')) {
-      document.body.classList.add('no-scroll');
-    }
     const modal = document.querySelector('.modal-container');
     if (!modal.classList.contains('open')) {
       modal.classList.add('open');
@@ -275,15 +273,16 @@ export default function decorate(block) {
       </div>
     </dialog>`;
   decorateIcons(block);
-
+  const dialog = block.querySelector('dialog');
   block.querySelector('#asset-details-close').addEventListener('click', () => {
-    closeModal(block);
+    dialog.close();
   });
-
-  document.addEventListener('keydown', (event) => {
-    if (event.key === 'Escape' && block.querySelector('.modal-container').open) {
-      closeModal(block);
-    }
+  addDialogEventListeners(dialog, {
+    closeModalOnEscape: true,
+    closeModalOnOutsideClick: true,
+    onClose: () => {
+      closeAssetDetailsModal(block);
+    },
   });
 
   // eslint-disable-next-line func-names

blocks/adp-asset-details-panel/adp-asset-details-panel.css

@@ -3,13 +3,17 @@
   max-height: calc(100vh - 155px);
   min-height: calc(100vh - 235px);
   position: sticky;
-  top: 151px;
+  top: calc(var(--nav-height) + var(--main-container-padding-top));
   box-shadow: 0 0 7px rgb(0 0 0 / 10%);
   border-radius: 10px;
   scrollbar-width: none;
   overflow: auto;
 }
 
+.contenthub .adp-asset-details-panel-wrapper {
+  top: calc(var(--nav-height) + var(--main-container-padding-top) + 46px);
+}
+
 .adp-asset-details-panel-wrapper::-webkit-scrollbar {
   width: 0;
 }

blocks/adp-asset-details-panel/adp-asset-details-panel.js

@@ -129,7 +129,7 @@ export async function openAssetDetailsPanel(assetId, resultsManagerObj) {
 }
 
 export default async function decorate(block) {
-  block.innerHTML = ` 
+  block.innerHTML = `
         <div class="asset-details-header-container">
           <div class="asset-details-header">
             <div class="top-left">

blocks/adp-assets-actions/adp-assets-actions.css

@@ -0,0 +1,35 @@
+.adp-assets-actions-wrapper {
+    grid-area: assets-actions;
+}
+
+.adp-assets-actions {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    flex-direction: row-reverse;
+}
+
+.adp-assets-actions button {
+    background-color: var(--button-focus-outline-color);
+    border-radius: 16px;
+    font: var(--bold-font-size-s);
+    color: var(--button-text-color);
+    height: 37px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    padding: 0 16px;
+}
+
+.adp-assets-actions button svg {
+    height: 17px;
+    width: 17px;
+    fill: #fff;
+}
+
+.adp-assets-actions button .icon {
+    height: 17px;
+    width: 17px;
+    margin-right: 8px;
+    fill: #fff;
+}

blocks/adp-assets-actions/adp-assets-actions.js

@@ -0,0 +1,25 @@
+import { openUploadDialog } from '../../contenthub/hydration/hydration.js';
+import { decorateIcons } from '../../scripts/lib-franklin.js';
+import { checkAddAssetsAccess } from '../../scripts/security.js';
+import { isContentHub } from '../../scripts/site-config.js';
+
+export default async function decorate(block) {
+  block.innerHTML = '';
+  const assetActionsDiv = document.createElement('div');
+  assetActionsDiv.className = 'actions-container';
+  //add Asset actions button
+  if (await isContentHub() && await checkAddAssetsAccess()) {
+    const addAssetsButton = document.createElement('button');
+    addAssetsButton.classList.add('action', 'add-assets');
+    const addAssetsSpan = document.createElement('span');
+    addAssetsSpan.classList.add('icon', 'icon-addAssets');
+    addAssetsButton.appendChild(addAssetsSpan);
+    assetActionsDiv.appendChild(addAssetsButton);
+    addAssetsButton.appendChild(document.createTextNode('Add Assets'));
+    addAssetsButton.addEventListener('click', () => {
+      openUploadDialog();
+    });
+  }
+  block.appendChild(assetActionsDiv);
+  decorateIcons(block);
+}

blocks/adp-collection-header/adp-collection-header.js

@@ -1,7 +1,7 @@
 import { getCollection, getCollectionIdFromURL, deleteCollection } from '../../scripts/collections.js';
 import createConfirmDialog from '../../scripts/confirm-dialog.js';
 import { decorateIcons } from '../../scripts/lib-franklin.js';
-import { createLinkHref, navigateTo } from '../../scripts/scripts.js';
+import { createLinkHref, navigateTo } from '../../scripts/shared.js';
 
 import {
   selectAllAssets, deselectAllAssets,

blocks/adp-download-modal/adp-download-modal.js

@@ -1,6 +1,8 @@
 import { decorateIcons } from '../../scripts/lib-franklin.js';
 import { getAvailableRenditions } from '../../scripts/renditions.js';
-import { createTag, closeDialogEvent, logError } from '../../scripts/scripts.js';
+import { logError } from '../../scripts/scripts.js';
+import { createTag, closeDialogEvent } from '../../scripts/shared.js';
+import { addDialogEventListeners } from '../../scripts/dialog-html-builder.js';
 import { addAssetToContainer } from '../../scripts/asset-panel-html-builder.js';
 import { emitEvent, EventNames } from '../../scripts/events.js';
 import { getBearerToken } from '../../scripts/security.js';
@@ -31,14 +33,15 @@ export default function decorate(block) {
   </dialog>`;
   decorateIcons(block);
   const dialog = block.querySelector('dialog');
-  dialog.querySelector('.action-close').addEventListener('click', () => {
-    closeDialog(dialog);
+  addDialogEventListeners(dialog, {
+    removeDialogElementOnClose: false,
+    closeModalOnEscape: true,
+    closeModalOnOutsideClick: true,
   });
-  document.addEventListener('keydown', (event) => {
-    if (event.key === 'Escape' && dialog.open) {
-      closeDialog(dialog);
-    }
+  dialog.querySelector('.action-close').addEventListener('click', () => {
+    dialog.close();
   });
+
   closeDialogEvent(dialog);
 }
 
@@ -309,7 +312,6 @@ export async function openDownloadModal(assetId) {
   const format = getAssetMimeType(assetJSON);
 
   // add no-scroll to disable scrolling for the main page in the background
-  document.body.classList.add('no-scroll');
   const dialog = document.querySelector('.adp-download-modal.block dialog');
   dialog.classList.remove('multi-select');
   dialog.querySelector('.modal-header-left').textContent = 'Download';
@@ -333,13 +335,7 @@ export async function openDownloadModal(assetId) {
   document.querySelector('.adp-download-modal.block .action-close').blur();
 }
 
-function closeDialog(dialog) {
-  dialog.close();
-  document.body.classList.remove('no-scroll');
-}
-
 export async function openMultiSelectDownloadModal() {
-  document.body.classList.add('no-scroll');
   const dialog = document.querySelector('.adp-download-modal.block dialog');
   dialog.classList.add('multi-select');