Fix/modal refresh after login [] (#11273)

* closes modal when auth token is not present and updates validation

* closes modal when auth token is not present and updates validation

Author: MikeDReynolds68

apps/aem-assets/README.md

@@ -8,14 +8,24 @@ This app lets editors browse, select, sort, and remove AEM DAM assets from a Con
 
 ## Configuration
 
+### Installation Parameters
+
 | Field | Required | Description |
 | --- | --- | --- |
 | IMS Client ID | Yes | Client ID from Adobe IMS. Must be requested from Adobe support — not the standard Adobe Developer Console. |
-| IMS Organization | Yes | The Adobe IMS org ID assigned when AEM as a Cloud Service was provisioned for your organization. |
-| Repository ID | No | Restricts asset selection to a single AEM repository. |
-| AEM Tier | No | Restricts the tier(s) searched (`delivery`, `author`). Defaults to both. |
-| Environment | No | Specifies the AEM repository environment (`prod`, `stage`). |
-| Hide Asset Upload Button | No | Hides the upload-to-AEM button inside the picker. Defaults to hidden. |
+| IMS Organization | Yes | The Adobe Identity Management System (IMS) ID provided by Adobe when provisioning Adobe AEM CS for your organization. |
+| Repository ID | No | Restricts the asset selector to a single repository. |
+| AEM Tier | No | Restricts the asset selector to repositories in the selected tier(s). |
+| Environment | No | Restricts the asset selector to repositories in the selected environment. |
+| Prefill Selected Assets | No | Specifies if selected assets are pre-selected in the asset picker. |
+| Hide Asset Upload Button | No | Specifies if the upload button is displayed in the asset picker. |
+
+### Instance Parameters
+
+| Field | Required | Description |
+| --- | --- | --- |
+| Hide Tree Nav | Yes | Specifies whether to show or hide the assets tree navigation sidebar |
+| Selection Type | No | Specifies if the field supports single or multiple asset selection. |
 
 ## Important setup requirement: origin allowlisting
 

apps/aem-assets/src/index.css

@@ -17,23 +17,32 @@ div {
   position: relative;
 }
 
+.content-advisor-toolbar {
+  display: flex;
+  flex-direction: row-reverse;
+  justify-content: space-between;
+  align-items: center;
+}
+
+#content-advisor-dialog {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+  height: 100%;
+  width: 100%;
+  overflow: hidden;
+}
+
 /* Colors match Forma 36 tokens red100/red500/red700 (@contentful/f36-tokens) */
-.content-advisor-error {
+#content-advisor-error {
   background-color: #fff2f2;
   border: 1px solid #da294a;
   color: #990017;
   padding: 12px 16px;
-  margin-bottom: 8px;
   font-size: 14px;
   line-height: 1.4;
 }
 
-.content-advisor-error[hidden] {
+#content-advisor-error[hidden] {
   display: none;
-}
-
-.content-advisor-toolbar {
-  display: flex;
-  justify-content: flex-end;
-  padding: 8px 16px 0;
 }

apps/aem-assets/src/index.jsx

@@ -62,12 +62,12 @@ async function openDialog(sdk, _currentValue, _config) {
 
 function prepareAEMAssetsHTML() {
   return `
-    <dialog id='content-advisor-dialog' style='width:100%;height:100%;'>
-      <div id='content-advisor-error' class='content-advisor-error' role='alert' hidden></div>
+    <dialog id='content-advisor-dialog'>
       <div class='content-advisor-toolbar'>
         <div id='content-advisor-logout-container'></div>
+        <div id='content-advisor-error' role='alert' hidden></div>
       </div>
-      <div id='content-advisor' style='overflow-x:auto;width:100%;height:100%;'></div>
+      <div id='content-advisor' style='width:100%;height:95%;'></div>
     </dialog>
   `;
 }
@@ -226,10 +226,11 @@ async function renderDialog(sdk) {
         onLogout={async () => {
           if (!imsInstance) return;
           try {
-            await imsInstance.signOut();
-            showAuthError(
-              'You have been logged out of Adobe. Close this dialog and reopen the asset selector to sign in again.'
-            );
+            await imsInstance.signOut().then(() => {
+              showAuthError(
+                'You have been logged out of Adobe. Close this dialog and reopen the asset selector to sign in again.'
+              );
+            });
           } catch (error) {
             showAuthError(`Failed to log out of Adobe: ${error?.message || error}`);
           }
@@ -240,6 +241,7 @@ async function renderDialog(sdk) {
 
   const imsAuthProps = {
     imsClientId: imsClientId,
+    imsOrg: imsOrg,
     imsScope: IMS_SCOPE,
     redirectUrl: window.location.href,
     modalMode: true,
@@ -253,15 +255,21 @@ async function renderDialog(sdk) {
         'Your Adobe session has expired. Close this dialog and try selecting assets again.'
       );
     },
-    onAccessTokenReceived: () => {
-      hideAuthError();
+    onAccessTokenReceived: (imsToken) => {
+      if (imsToken) {
+        hideAuthError();
+      } else {
+        // Close the modal if we don't have a valid IMS token. The IMS login modal should open.
+        // After signing in, the user can re-open the asset selector by clicking the select assets button.
+        sdk.close();
+      }
     },
   };
 
   const contentAdvisorProps = {
     imsOrg,
     repositoryId,
-    aemTierType: aemTierType ? aemTierType.split(',') : ['delivery', 'author'],
+    aemTierType: aemTierType && aemTierType !== 'both' ? [aemTierType] : ['delivery', 'author'],
     env: env === 'stage' ? 'stage' : undefined,
     hideTreeNav,
     selectedAssets:
@@ -272,7 +280,7 @@ async function renderDialog(sdk) {
     uploadConfig: {
       hideUploadButton: hideUploadButton === 'Yes' ? true : false,
     },
-    alwaysUseDMDelivery: true,
+    alwaysUseDMDelivery: aemTierType !== 'author',
     // handleAssetSelection, // only enabled for testing
     handleSelection,
     onClose,
@@ -333,10 +341,13 @@ function isDisabled() {
   return false;
 }
 
-function validateParameters({ imsClientId }) {
+function validateParameters({ imsClientId, imsOrg }) {
   if (!imsClientId) {
     return 'Please add your IMS Client ID';
   }
+  if (!imsOrg) {
+    return 'Please add your IMS Organization';
+  }
   return null;
 }
 
@@ -352,32 +363,32 @@ setup({
       id: 'imsClientId',
       type: 'Symbol',
       name: 'IMS Client ID',
-      description: 'Your Client ID from Adobe IMS.',
+      description:
+        'The Adobe Identity Management System (IMS) Client ID provided by Adobe for your Adobe AEM CS organization.',
       required: true,
     },
     {
       id: 'imsOrg',
       name: 'IMS Organization',
       type: 'Symbol',
       description:
-        'Adobe Identity Management System (IMS) ID that is assigned while provisioning Adobe Experience Manager as a Cloud Service for your organization',
+        'The Adobe Identity Management System (IMS) ID provided by Adobe when provisioning Adobe AEM CS for your organization.',
       required: true,
     },
     {
       id: 'repositoryId',
-      name: 'Repository ID',
+      name: 'Repository',
       type: 'Symbol',
-      description: 'Restricts access to a single repository',
+      description: 'Restricts the asset selector to a single repository.',
       required: false,
     },
     {
       id: 'aemTierType',
       name: 'AEM Tier',
       type: 'List',
-      value: 'delivery,author',
-      default: '',
-      description:
-        'Specifies the tier type for the app (defaults to delivery and author if no selection made)',
+      value: 'delivery,author,both',
+      default: 'both',
+      description: 'Restricts the asset selector to repositories in the selected tier(s).',
       required: false,
     },
     {
@@ -386,25 +397,23 @@ setup({
       type: 'List',
       value: 'prod,stage',
       default: 'prod',
-      description:
-        'Specifies the AEM repository environment for the app (defaults to prod if no selection made)',
+      description: 'Restricts the asset selector to repositories in the selected environment.',
     },
     {
       id: 'prefillSelectedAssets',
       name: 'Prefill Selected Assets',
       type: 'List',
       value: 'No,Yes',
       default: 'Yes',
-      description:
-        'Determines whether the selected assets will be prefilled when opening the asset picker.',
+      description: 'Specifies if selected assets are pre-selected in the asset picker.',
     },
     {
       id: 'hideUploadButton',
       name: 'Hide Asset Upload Button',
       type: 'List',
       value: 'Yes, No',
       default: 'Yes',
-      description: 'Specifies whether to show or hide the upload button',
+      description: 'Specifies if the upload button is displayed in the asset picker.',
     },
   ],
   customUpdateStateValue,