@orangelogic/orange-dam-content-browser-sdk 2.4.4 → 2.4.5

package/build/index.mjs

@@ -110,7 +110,7 @@ var __yieldStar = (value) => {
   }, "return" in obj && method("return"), it2;
 };
 var __forAwait = (obj, it2, method) => (it2 = obj[__knownSymbol("asyncIterator")]) ? it2.call(obj) : (obj = obj[__knownSymbol("iterator")](), it2 = {}, method = (key, fn) => (fn = obj[key]) && (it2[key] = (arg) => new Promise((yes, no, done) => (arg = fn.call(obj, arg), done = arg.done, Promise.resolve(arg.value).then((value) => yes({ value, done }), no)))), method("next"), method("return"), it2);
-var _a, _b, _c, _d, _e2, _f, _host, _getContainer, _getItemIndexById, _itemSelector, _anchor, _columnCount, _itemHeight, _pendingRestoreFrames, _restoreSequence, _lastGetDataParameters, _lastMappedAvailableExtensions, _lastData, _hasFetchedOnce;
+var _a, _b, _c, _d, _e2, _f, _host, _getContainer, _getItemIndexById, _itemSelector, _anchor, _columnCount, _itemHeight, _pendingRestoreFrames, _restoreSequence, _lastGetDataParameters, _lastMappedAvailableExtensions, _lastData, _hasFetchedOnce, _generation, _inFlight, _queued, _lastPage;
 import CxDrawer from "@orangelogic/design-system/components/drawer";
 import CxFolderSelect from "@orangelogic/design-system/components/folder-select";
 import CxIcon from "@orangelogic/design-system/components/icon";
@@ -8570,6 +8570,7 @@ let CxContentBrowserAssetProxySelector = class extends CortexElement {
     this.canUseRepresentative = false;
     this.canUseATS = false;
     this.canUseTracking = false;
+    this.proxiesFailed = false;
     this.selected = "";
     this.disabledSelected = false;
     this.customWidth = "";
@@ -8798,7 +8799,10 @@ let CxContentBrowserAssetProxySelector = class extends CortexElement {
           >
             <cx-icon name="warning"></cx-icon>
             <cx-typography variant="body3" class="content-browser-asset-proxy-selector__menu-item__name">
-              ${this.localize.term("damViewNoAvailableOptionsForThisAsset")}
+              ${this.localize.term(
+        // The no-options text names permissions as a possible cause, which a request error is not (L-42BIA4).
+        this.proxiesFailed ? "oopsSomethingWentWrong" : "damViewNoAvailableOptionsForThisAsset"
+      )}
             </cx-typography>
           </cx-space>
         `
@@ -8831,6 +8835,9 @@ __decorateClass$7([
 __decorateClass$7([
   n$6({ attribute: "can-use-tracking", reflect: true, type: Boolean })
 ], CxContentBrowserAssetProxySelector.prototype, "canUseTracking", 2);
+__decorateClass$7([
+  n$6({ attribute: "proxies-failed", reflect: true, type: Boolean })
+], CxContentBrowserAssetProxySelector.prototype, "proxiesFailed", 2);
 __decorateClass$7([
   n$6({ attribute: "selected", reflect: true, type: String })
 ], CxContentBrowserAssetProxySelector.prototype, "selected", 2);
@@ -9179,6 +9186,7 @@ let CxContentBrowserFormatDialog = class extends CortexElement {
     this.isFavorite = false;
     this.isAssetPinned = false;
     this.proxies = [];
+    this.proxiesFailed = false;
     this.showVersionHistory = false;
     this.showCustomFormat = false;
     this.loadingVersionHistory = false;
@@ -9196,7 +9204,7 @@ let CxContentBrowserFormatDialog = class extends CortexElement {
     return !!this.autoExtension && this.supportedExtensions.includes(this.autoExtension);
   }
   get canUseATS() {
-    if (!this.asset) {
+    if (!this.asset || this.filteredProxies.length === 0) {
       return false;
     }
     const extensionList = (this.availableExtensions && this.asset.docType ? uniqBy([
@@ -9205,6 +9213,18 @@ let CxContentBrowserFormatDialog = class extends CortexElement {
     ], "value") : [{ displayName: this.localize.term("automatic"), value: this.autoExtension }]).filter((item) => this.shouldAppendAutoExtension || item.value !== this.autoExtension);
     return this.canCustomFormat && extensionList.some((item) => item.value === this.asset.extension);
   }
+  /**
+   * One rule for the Insert button and handleProxyConfirm, so an enabled Insert always confirms (L-42BIA4).
+   */
+  get canConfirm() {
+    if (!this.asset) {
+      return false;
+    }
+    if (!this.canUseProxies || this.selectedProxy === CUSTOM_FORMAT_VALUE || this.selectedProxy === USE_REPRESENTATIVE_VALUE) {
+      return true;
+    }
+    return this.filteredProxies.some((proxy) => proxy.id === this.selectedProxy);
+  }
   handleSupportedExtensionsChange() {
     var _a2, _b2;
     this.filteredProxies = this.proxies.filter((item) => {
@@ -9221,12 +9241,14 @@ let CxContentBrowserFormatDialog = class extends CortexElement {
     asset,
     isFavorite,
     isAssetPinned = false,
-    proxies
+    proxies,
+    proxiesFailed = false
   }) {
     this.asset = asset;
     this.isFavorite = isFavorite;
     this.isAssetPinned = isAssetPinned;
     this.proxies = proxies;
+    this.proxiesFailed = proxiesFailed;
     this.isOpen = true;
   }
   hide() {
@@ -9337,7 +9359,7 @@ let CxContentBrowserFormatDialog = class extends CortexElement {
   }
   handleProxyConfirm() {
     var _a2, _b2;
-    if (!this.asset) {
+    if (!this.asset || !this.canConfirm) {
       return;
     }
     if (!this.canUseProxies) {
@@ -9360,9 +9382,6 @@ let CxContentBrowserFormatDialog = class extends CortexElement {
         detail: payload
       });
     } else {
-      if (!selectedProxy && this.selectedProxy !== USE_REPRESENTATIVE_VALUE) {
-        return;
-      }
       const payload = this.mapProxyConfirmPayload(this.asset, selectedProxy);
       this.loadingConfirm = true;
       this.emit("cx-content-browser-format-dialog-proxy-confirm", {
@@ -9643,11 +9662,12 @@ let CxContentBrowserFormatDialog = class extends CortexElement {
         }
       )}
           ?can-use-ats=${i3(
-        [this.availableExtensions, this.asset, this.canCustomFormat],
+        [this.availableExtensions, this.asset, this.canCustomFormat, this.filteredProxies],
         () => this.canUseATS
       )}
           ?can-use-tracking=${this.canTrack}
           ?enabled-tracking=${this.enabledTracking}
+          ?proxies-failed=${this.proxiesFailed}
           ?disabled-selected=${this.selectedProxy === CUSTOM_FORMAT_VALUE}
           @cx-select=${this.handleProxySelect}
           @cx-content-browser-asset-tracking-parameters-change=${this.handleTrackingParametersChange}
@@ -9748,7 +9768,7 @@ let CxContentBrowserFormatDialog = class extends CortexElement {
       content = b`
         <cx-button
           class="content-browser-format__footer__button"
-          ?disabled=${this.disabledConfirm}
+          ?disabled=${this.disabledConfirm || !this.canConfirm}
           ?loading=${this.loadingConfirm}
           variant="primary"
           style=${o$2({
@@ -9804,6 +9824,7 @@ let CxContentBrowserFormatDialog = class extends CortexElement {
     this.loadingPinAsset = false;
     this.loadingVersionHistory = false;
     this.proxies = [];
+    this.proxiesFailed = false;
     this.selectedProxy = "";
     this.showCustomFormat = false;
     this.showVersionHistory = false;
@@ -9954,6 +9975,9 @@ __decorateClass$5([
 __decorateClass$5([
   r$6()
 ], CxContentBrowserFormatDialog.prototype, "proxies", 2);
+__decorateClass$5([
+  r$6()
+], CxContentBrowserFormatDialog.prototype, "proxiesFailed", 2);
 __decorateClass$5([
   r$6()
 ], CxContentBrowserFormatDialog.prototype, "showVersionHistory", 2);
@@ -13333,6 +13357,13 @@ function apiGetAvailableProxies(_0) {
     try {
       const response = yield http.request({
         baseURL: siteUrl,
+        cache: {
+          // A malformed body arrives with HTTP 200, so the default status check would cache the error and
+          // serve it again after the server recovers.
+          cachePredicate: {
+            responseMatch: ({ data }) => !data.isError
+          }
+        },
         method: "GET",
         params: {
           RecordId: assetRecordId
@@ -13341,16 +13372,18 @@ function apiGetAvailableProxies(_0) {
         transformResponse: [
           ...Array.isArray(http.defaults.transformResponse) ? http.defaults.transformResponse : [],
           (rawResponse) => {
-            var _a2, _b2, _c2;
-            if (!rawResponse || typeof rawResponse !== "object") {
+            var _a2;
+            if (!rawResponse || typeof rawResponse !== "object" || !Array.isArray(rawResponse.proxies)) {
               return {
+                isError: true,
                 previewUrl: "",
                 proxies: []
               };
             }
             return {
+              isError: false,
               previewUrl: (_a2 = rawResponse.previewUrl) != null ? _a2 : "",
-              proxies: (_c2 = (_b2 = rawResponse.proxies) == null ? void 0 : _b2.map((proxy) => ({
+              proxies: rawResponse.proxies.map((proxy) => ({
                 cdnName: proxy.cdnName,
                 extension: proxy.extension,
                 formatHeight: proxy.formatHeight,
@@ -13361,7 +13394,7 @@ function apiGetAvailableProxies(_0) {
                 proxyLabel: proxy.proxyLabel,
                 proxyName: proxy.proxyName,
                 width: proxy.width
-              }))) != null ? _c2 : []
+              }))
             };
           }
         ],
@@ -13370,6 +13403,7 @@ function apiGetAvailableProxies(_0) {
       return response.data;
     } catch (error) {
       return {
+        isError: true,
         previewUrl: "",
         proxies: []
       };
@@ -13795,6 +13829,10 @@ class FetchAndMergeAssetsController {
     __privateAdd(this, _lastMappedAvailableExtensions);
     __privateAdd(this, _lastData);
     __privateAdd(this, _hasFetchedOnce);
+    __privateAdd(this, _generation);
+    __privateAdd(this, _inFlight);
+    __privateAdd(this, _queued);
+    __privateAdd(this, _lastPage);
     var _a2, _b2;
     this.availableFacets = [];
     this.facets = [];
@@ -13818,6 +13856,10 @@ class FetchAndMergeAssetsController {
     this.responseInterceptorId = null;
     this._debouncePromise = null;
     this._debounceResolve = null;
+    __privateSet(this, _generation, 0);
+    __privateSet(this, _inFlight, []);
+    __privateSet(this, _queued, false);
+    __privateSet(this, _lastPage, null);
     this.host = host;
     this.availableDocTypes = availableDocTypes;
     this.defaultFolderId = defaultFolderId;
@@ -14049,11 +14091,19 @@ class FetchAndMergeAssetsController {
   fetchAndMergeAssets(request) {
     return __async(this, null, function* () {
       var _a2;
-      this.loading = true;
-      this.host.requestUpdate();
       if (request.start === null) {
         return;
       }
+      const isRestart = this.isRestart(request);
+      if (!isRestart && this.isBusy()) {
+        return;
+      }
+      if (isRestart) {
+        __privateSet(this, _generation, __privateGet(this, _generation) + 1);
+      }
+      const generation = __privateGet(this, _generation);
+      this.loading = true;
+      this.host.requestUpdate();
       if (this._debounceTimeout) {
         clearTimeout(this._debounceTimeout);
         this._debounceTimeout = void 0;
@@ -14061,61 +14111,105 @@ class FetchAndMergeAssetsController {
       (_a2 = this._debouncePromise) != null ? _a2 : this._debouncePromise = new Promise((resolve) => {
         this._debounceResolve = resolve;
       });
+      __privateSet(this, _queued, true);
       this._debounceTimeout = setTimeout(() => __async(this, null, function* () {
-        var _a3, _b2, _c2, _d2, _e3, _f2, _g, _h, _i;
-        if (Object.keys(this.sortOrders).length === 0) {
-          const sortOrders = yield apiGetSortOrders();
-          this.sortOrders = sortOrders;
-        }
-        const forceRefetch = request.start === ((_a3 = this.lastRequest) == null ? void 0 : _a3.start) && !!request.pageSize && !!((_b2 = this.lastRequest) == null ? void 0 : _b2.pageSize) && request.pageSize > ((_c2 = this.lastRequest) == null ? void 0 : _c2.pageSize);
-        if (!__privateGet(this, _hasFetchedOnce)) {
+        var _a3, _b2, _c2, _d2, _e3, _f2, _g;
+        __privateSet(this, _queued, false);
+        __privateGet(this, _inFlight).push(generation);
+        try {
+          if (Object.keys(this.sortOrders).length === 0) {
+            const sortOrders = yield apiGetSortOrders();
+            this.sortOrders = sortOrders;
+          }
+          if (generation !== __privateGet(this, _generation)) {
+            return;
+          }
+          if (!__privateGet(this, _hasFetchedOnce)) {
+            request = __spreadProps(__spreadValues({}, request), {
+              // Keep a folder the host already resolved (e.g. the auto-selected initial folder).
+              folderId: request.folderId || this.defaultFolderId,
+              isSeeThrough: (_a3 = request.isSeeThrough) != null ? _a3 : this.defaultIsSeeThrough,
+              searchText: (_b2 = request.searchText) != null ? _b2 : this.defaultSearchText,
+              selectedFacets: (_c2 = request.selectedFacets) != null ? _c2 : this.defaultSelectedFacets,
+              sortDirection: (_d2 = request.sortDirection) != null ? _d2 : this.defaultSortDirection,
+              sortOrderName: (_e3 = request.sortOrderName) != null ? _e3 : this.defaultSortOrderName
+            });
+          }
+          let sortOrder;
+          if (request.sortOrderName && request.sortDirection) {
+            const sortOrders = this.sortOrders[request.sortOrderName];
+            sortOrder = (_f2 = sortOrders == null ? void 0 : sortOrders.find((item) => {
+              var _a4;
+              return item.sortDirection.toLowerCase() === ((_a4 = request.sortDirection) == null ? void 0 : _a4.toLowerCase());
+            })) == null ? void 0 : _f2.id;
+            if (!sortOrder && (sortOrders == null ? void 0 : sortOrders[0])) {
+              sortOrder = sortOrders[0].id;
+              request.sortDirection = sortOrders[0].sortDirection;
+            }
+          }
           request = __spreadProps(__spreadValues({}, request), {
-            // Keep a folder the host already resolved (e.g. the auto-selected initial folder).
-            folderId: request.folderId || this.defaultFolderId,
-            isSeeThrough: (_d2 = request.isSeeThrough) != null ? _d2 : this.defaultIsSeeThrough,
-            searchText: (_e3 = request.searchText) != null ? _e3 : this.defaultSearchText,
-            selectedFacets: (_f2 = request.selectedFacets) != null ? _f2 : this.defaultSelectedFacets,
-            sortDirection: (_g = request.sortDirection) != null ? _g : this.defaultSortDirection,
-            sortOrderName: (_h = request.sortOrderName) != null ? _h : this.defaultSortOrderName
+            limitedToDocTypes: this.availableDocTypes
           });
-        }
-        let sortOrder;
-        if (request.sortOrderName && request.sortDirection) {
-          const sortOrders = this.sortOrders[request.sortOrderName];
-          sortOrder = (_i = sortOrders == null ? void 0 : sortOrders.find((item) => {
-            var _a4;
-            return item.sortDirection.toLowerCase() === ((_a4 = request.sortDirection) == null ? void 0 : _a4.toLowerCase());
-          })) == null ? void 0 : _i.id;
-          if (!sortOrder && (sortOrders == null ? void 0 : sortOrders[0])) {
-            sortOrder = sortOrders[0].id;
-            request.sortDirection = sortOrders[0].sortDirection;
+          this.lastRequest = request;
+          const assets = yield apiGetAssets(__spreadProps(__spreadValues({}, request), {
+            sortOrder
+          }));
+          if (generation !== __privateGet(this, _generation)) {
+            return;
           }
+          if (isRestart) {
+            this.items = assets.items;
+          } else {
+            this.items = uniqBy([...this.items, ...assets.items], "recordId");
+          }
+          this.facets = this.mergeFacetsWithSelected(assets.facets, this.facets, request.selectedFacets);
+          this.totalCount = assets.totalCount;
+          __privateSet(this, _lastPage, {
+            pageSize: request.pageSize || assets.items.length,
+            start: (_g = request.start) != null ? _g : 0
+          });
+          __privateSet(this, _hasFetchedOnce, true);
+          if (this._debounceResolve) {
+            this._debounceResolve(this.lastRequest);
+          }
+          this._debouncePromise = null;
+          this._debounceResolve = null;
+        } finally {
+          const index = __privateGet(this, _inFlight).indexOf(generation);
+          if (index >= 0) {
+            __privateGet(this, _inFlight).splice(index, 1);
+          }
+          this.loading = this.isBusy();
+          this.host.requestUpdate();
         }
-        request = __spreadProps(__spreadValues({}, request), {
-          limitedToDocTypes: this.availableDocTypes
-        });
-        this.lastRequest = request;
-        const assets = yield apiGetAssets(__spreadProps(__spreadValues({}, request), {
-          sortOrder
-        }));
-        if (request.start && request.start > 0 && !forceRefetch) {
-          this.items = uniqBy([...this.items, ...assets.items], "recordId");
-        } else {
-          this.items = assets.items;
-        }
-        this.facets = this.mergeFacetsWithSelected(assets.facets, this.facets, request.selectedFacets);
-        this.totalCount = assets.totalCount;
-        this.loading = false;
-        __privateSet(this, _hasFetchedOnce, true);
-        this.host.requestUpdate();
-        if (this._debounceResolve) {
-          this._debounceResolve(this.lastRequest);
-        }
-        this._debouncePromise = null;
-        this._debounceResolve = null;
       }), 200);
     });
   }
+  /**
+   * Where the next page of the list on screen starts, or `null` while a request of that list is queued
+   * or in flight. The start follows the last accepted page, not the last request sent, so a page that
+   * was dropped or discarded never leaves a gap. `lastPageSize` is the size of that accepted page.
+   */
+  getNextPage() {
+    var _a2, _b2;
+    if (this.isBusy()) {
+      return null;
+    }
+    return {
+      lastPageSize: (_b2 = (_a2 = __privateGet(this, _lastPage)) == null ? void 0 : _a2.pageSize) != null ? _b2 : 0,
+      start: __privateGet(this, _lastPage) ? __privateGet(this, _lastPage).start + __privateGet(this, _lastPage).pageSize : 0
+    };
+  }
+  isBusy() {
+    return __privateGet(this, _queued) || __privateGet(this, _inFlight).includes(__privateGet(this, _generation));
+  }
+  /**
+   * A request that starts a new list: the first page, or the same page asked for with a larger page size.
+   */
+  isRestart(request) {
+    var _a2, _b2;
+    return !request.start || request.start === ((_a2 = this.lastRequest) == null ? void 0 : _a2.start) && !!request.pageSize && !!((_b2 = this.lastRequest) == null ? void 0 : _b2.pageSize) && request.pageSize > this.lastRequest.pageSize;
+  }
   fetchAssetFavoriteStatus(id) {
     return __async(this, null, function* () {
       return apiGetAssetFavoriteStatus({
@@ -14125,7 +14219,7 @@ class FetchAndMergeAssetsController {
   }
   fetchAssetByID(id, options) {
     return __async(this, null, function* () {
-      var _a2, _b2, _c2, _d2, _e3, _f2, _g, _h, _i, _j, _k, _l, _m, _n;
+      var _a2, _b2, _c2, _d2, _e3, _f2, _g, _h, _i, _j, _k, _l, _m, _n, _o;
       const { allowedExtensions = [], canFavorite = false, simplePick = false } = options != null ? options : {};
       const promises = [
         apiGetAssetsByIDs({
@@ -14205,7 +14299,8 @@ class FetchAndMergeAssetsController {
             }
             return proxyExtension.toLowerCase() === extension.toLowerCase();
           });
-        })
+        }),
+        proxiesFailed: (_o = proxyData == null ? void 0 : proxyData.isError) != null ? _o : false
       };
     });
   }
@@ -14305,12 +14400,17 @@ class FetchAndMergeAssetsController {
     this.items = [];
     this.totalCount = 0;
     this.sortOrders = {};
+    __privateSet(this, _lastPage, null);
   }
 }
 _lastGetDataParameters = new WeakMap();
 _lastMappedAvailableExtensions = new WeakMap();
 _lastData = new WeakMap();
 _hasFetchedOnce = new WeakMap();
+_generation = new WeakMap();
+_inFlight = new WeakMap();
+_queued = new WeakMap();
+_lastPage = new WeakMap();
 function safeInteger(value) {
   if (Number.isNaN(value) || !Number.isInteger(value)) {
     return 0;
@@ -14641,10 +14741,13 @@ let CxContentBrowser = class extends CortexElement {
   }
   handleScrollEnd() {
     return __async(this, null, function* () {
-      const newStart = safeInteger(this.lastRequest.start) + safeInteger(this.lastRequest.pageSize);
+      const nextPage = this.fetchAndMergeAssetsController.getNextPage();
+      if (!nextPage) {
+        return;
+      }
       this.lastRequest = __spreadProps(__spreadValues({}, this.lastRequest), {
         pageSize: this.defaultPageSize,
-        start: newStart
+        start: nextPage.start
       });
       yield this.fetchAndMergeAssetsController.fetchAndMergeAssets(this.lastRequest);
     });
@@ -14691,13 +14794,17 @@ let CxContentBrowser = class extends CortexElement {
         }
         return;
       }
+      const nextPage = this.fetchAndMergeAssetsController.getNextPage();
+      if (!nextPage) {
+        return;
+      }
       const totalCount = this.fetchAndMergeAssetsController.getData().totalCount;
-      const newStart = safeInteger(this.lastRequest.start) + safeInteger(this.lastRequest.pageSize);
-      if (newPageSize <= safeInteger(this.lastRequest.pageSize) || newPageSize === 0 || newStart > totalCount) {
+      const newStart = nextPage.start;
+      if (newPageSize <= nextPage.lastPageSize || newPageSize === 0 || newStart > totalCount) {
         return;
       }
       this.lastRequest = __spreadProps(__spreadValues({}, this.lastRequest), {
-        pageSize: newPageSize - safeInteger(this.lastRequest.pageSize),
+        pageSize: newPageSize - nextPage.lastPageSize,
         start: newStart
       });
       yield this.fetchAndMergeAssetsController.fetchAndMergeAssets(this.lastRequest);

package/build/tools/fetch-and-merge-assets.d.ts

@@ -79,6 +79,20 @@ export declare class FetchAndMergeAssetsController implements ReactiveController
      */
     private mergeFacetsWithSelected;
     fetchAndMergeAssets(request: GetAssetsRequest): Promise<void>;
+    /**
+     * Where the next page of the list on screen starts, or `null` while a request of that list is queued
+     * or in flight. The start follows the last accepted page, not the last request sent, so a page that
+     * was dropped or discarded never leaves a gap. `lastPageSize` is the size of that accepted page.
+     */
+    getNextPage(): {
+        lastPageSize: number;
+        start: number;
+    } | null;
+    private isBusy;
+    /**
+     * A request that starts a new list: the first page, or the same page asked for with a larger page size.
+     */
+    private isRestart;
     fetchAssetFavoriteStatus(id: string): Promise<boolean>;
     fetchAssetByID(id: string, options?: {
         allowedExtensions?: string[];
@@ -106,6 +120,7 @@ export declare class FetchAndMergeAssetsController implements ReactiveController
         };
         isFavorite: boolean;
         proxies: import("../types/asset").AvailableProxy[];
+        proxiesFailed: boolean;
     } | undefined>;
     fetchAssetVersionHistory(id: string): Promise<import("../api/asset/asset.types").GetAssetVersionHistoryResponse>;
     addAssetToFavorite(id: string): Promise<boolean>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@orangelogic/orange-dam-content-browser-sdk",
-  "version": "2.4.4",
+  "version": "2.4.5",
   "description": "OrangeDAM Content Browser SDK source code",
   "main": "./build/OrangeDAMContentBrowserSDK.min.js",
   "module": "./build/index.mjs",