Add Asset Modal (#51)

* fix: update fstab * Update README.md * ASSETS-3207 integrate Unified shell (#3) * ASSETS-32004 use discovery service to find instances with content hub product profiles (#4) * ASSETS-31822 Create separate security module for Unified Shell * Setup delivery endpoint discovery * docs: update readme * docs: update readme * chore: allow showing 404 page * chore: update sidekick host * chore: remove old comment * fix: update serviceCode===dma_aem_contenthub * fix: don't open browser on "aem up" * ASSETS-32078: Handle changes of imsOrg from Unified Shell * Show spinner while imsOrg changes * fix: use delivery urls from discovery * fix: use delivery urls from discovery * refactor: use page.iframeReload(false); * adapt 404 error page for Unified Shell * feat: reflect url changes from unified shell in app * ASSETS-32075 Hide header bar (logo, user switcher) when using Unified Shell (#5) * ASSETS-32055: POC integration with Upload MFE (#8) * ASSETS-32055: provide bearer token * chore: remove dialog after closing * ASSETS-31831 - Portal style changes for content hub (#6) * chore: fix typo in jsdocs: BrandingConfig.portalTheme * Load Reporting MFE using pure JS * Add css * Add css * Point the reporting MFE to prod * Add discovery call * ASSETS-32176 Keep url in unified shell updated. React to url changes. (#7) Keep url in unified shell updated. React to url changes. handle url changes in asset detail view fix link for link share refactor history listener redirect to /no-access if no delivery env can be found * Accessibility: add role and aria-labels where missing (#10) * quick fix to show reporting in CH * Remove bar graph * fix: cleanup eslint errors * ASSETS-31803 - Refactor Modal code for Unified Shell (#12) * add platform connector * add platform connector with rollup * poc of PlatformConnector * docs: describe rollup * docs: no sudo * cleanup * add PlatformConnector lib * fix: keep existing discovery * cleanup: remove old libs * Update README.md * ASSETS-31899 use PlatfromConnector API for repositoryID * cleanup: only delete dependencies selectively * cleanup: remove unused dependencies * cleanup: undo comment out * cleanup: undo comment out * chore: cleanup imports * PlatformConnector: initial draft (#15) * add platform connector, use rollup to convert library * cleanup after merge * update readme * ASSETS-31899 use franklin lib loadScript based on feedback * ASSETS-31899 add delivery and storageUsage * ASSETS-31831 - Portal changes for content hub (#14) * docs: add sharepoint * fix merge conflicts * ASSETS-31831 - Update style for content hub (#17) * Feat: implement user settings * Feat: implement user settings and redirect users * ASSETS-31899 clear up * Fix modal dialog styling (#18) * ASSETS-31899 remove storageUsage * ASSETS-32522 - Fix upload dialog styling (#19) * add missing import * Feat: Playwright End-2-End test (#11) This is a very simple setup. Expect it to fail for no reason. But it's good to run after making some changes to be sure nothing major broke. * fix: export everything from platform connector * chore: refactor exc-app import/exports * fix: remove text-transform: capitalize; * fix: improve error message when run without unified shell * Fixing to use the IMS org from the site config for GMO * don't call getRepositoryList * Upload dialog (#23) * Fixing to use the distribution url to determine the author repoId * Changing clientid * Adding the version supporting setting metadata * Updating to latest version of the upload MFE * Fixing incorrect mappings * Updating to latest PR build * Updating to new schema * Styling tweaks to the upload dialog * Commented out ProductFamily from 'Add Asset' (#30) * Alphabetize Product List on 'Add Assets' Modal (#32) * DXI-23343: New Multi-required fields. Enable upload on form filled (#34) Co-authored-by: Mathieu Lessard <[email protected]> * DXI-23346: Hydration uses values from Algolia for selections (#35) * DXI-23346: Hydration uses values from Algolia for selections * Adjusted spacing * Adjusted spacing --------- Co-authored-by: Mathieu Lessard <[email protected]> * Updated Asset Upload Experience (#37) * Updated Asset Upload Experience * Added comment regarding why the button change is delayed --------- Co-authored-by: Mathieu Lessard <[email protected]> * Enabled Perpetuity Option * Fixed license date to use ISO instead of epoch * Refactored code * 'Add Assets' button can now be hidden by IMS group (#44) - Added checkAddAssetsAccess() that will compare 'imsAuthorGroup' in 'admin-config.xlsx' in sharepoint to the IMS groups of the current user. - Code that loads the 'Add Assets' button will now not execute unless checkAddAssetsAccess() returns true. * Removed Keywords from Asset Upload * Renamed LisenceDate Property * Renamed LisenceDate Property * Swapped out ims/api key for MarketingHub one --------- Co-authored-by: Aravindo Wingeier <[email protected]> Co-authored-by: Aravindo Wingeier <[email protected]> Co-authored-by: Andrew Khoury <[email protected]> Co-authored-by: Narendra Katamaneni <[email protected]> Co-authored-by: Cris Rockwell <[email protected]> Co-authored-by: lsun <[email protected]> Co-authored-by: ling <[email protected]> Co-authored-by: Dan Klco <[email protected]> Co-authored-by: Samruddhi <[email protected]> Co-authored-by: Mathieu Lessard <[email protected]> Co-authored-by: Christopher Heintzman <[email protected]>
hlxsites · Mar 15, 2024 · a519a51 · a519a51
1 parent 8ac29bb
commit a519a51
Show file tree

Hide file tree

Showing 93 changed files with 33,977 additions and 9,488 deletions.
diff --git a/.env b/.env
@@ -0,0 +1,4 @@
+AEM_TLS_CERT=env/server.crt
+AEM_TLS_KEY=env/server.key
+AEM_OPEN=/
+AEM_PORT=443
diff --git a/.eslintignore b/.eslintignore
@@ -1 +1,2 @@
 scripts/libs/**
+test/e2e/
diff --git a/.eslintrc.js b/.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 }],
   },
 };
diff --git a/.gitattributes b/.gitattributes
@@ -0,0 +1 @@
+README.md merge=ours
diff --git a/.github/workflows/playwright.yml.disabled b/.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
diff --git a/.gitignore b/.gitignore
@@ -14,4 +14,5 @@ helix-importer-ui
 /env/
 .env
 server.crt
-server.key
+server.key
+/test/e2e/test-results
diff --git a/.npmrc b/.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
diff --git a/404.html b/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">

diff --git a/blocks/adp-add-to-collection-modal/adp-add-to-collection-modal.css b/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 {

diff --git a/blocks/adp-add-to-collection-modal/adp-add-to-collection-modal.js b/blocks/adp-add-to-collection-modal/adp-add-to-collection-modal.js
@@ -2,12 +2,10 @@ import { decorateIcons } from '../../scripts/lib-franklin.js';
 import {
   searchListCollection, 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) {
@@ -145,12 +143,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();
@@ -240,8 +237,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'>
@@ -274,19 +273,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');
@@ -307,13 +306,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);
-    }
-  });
 }
diff --git a/blocks/adp-asset-details-modal/adp-asset-details-modal.js b/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

diff --git a/blocks/adp-asset-details-panel/adp-asset-details-panel.css b/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;
 }

diff --git a/blocks/adp-asset-details-panel/adp-asset-details-panel.js b/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">

diff --git a/blocks/adp-assets-actions/adp-assets-actions.css b/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;
+}
diff --git a/blocks/adp-assets-actions/adp-assets-actions.js b/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);
+}
diff --git a/blocks/adp-collection-header/adp-collection-header.js b/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,

diff --git a/blocks/adp-download-modal/adp-download-modal.js b/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');