diff --git a/apps/aem-assets/README.md b/apps/aem-assets/README.md index eb69e69f4e..78858f7029 100644 --- a/apps/aem-assets/README.md +++ b/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 diff --git a/apps/aem-assets/src/index.css b/apps/aem-assets/src/index.css index 01c7259269..8ecdbc4a53 100644 --- a/apps/aem-assets/src/index.css +++ b/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; } \ No newline at end of file diff --git a/apps/aem-assets/src/index.jsx b/apps/aem-assets/src/index.jsx index 890df57108..2f67dedcac 100644 --- a/apps/aem-assets/src/index.jsx +++ b/apps/aem-assets/src/index.jsx @@ -62,12 +62,12 @@ async function openDialog(sdk, _currentValue, _config) { function prepareAEMAssetsHTML() { return ` - - +
+
-
+
`; } @@ -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,7 +363,8 @@ 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, }, { @@ -360,24 +372,23 @@ setup({ 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,8 +397,7 @@ 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', @@ -395,8 +405,7 @@ setup({ 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', @@ -404,7 +413,7 @@ setup({ 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,