@orangelogic/orange-dam-content-browser-sdk 2.4.7 → 2.4.8

package/build/index.mjs

@@ -12192,6 +12192,7 @@ let CxContentBrowserNoResult = class extends CortexElement {
       <div class="content-browser-no-result" data-testid="no-results">
         <cx-icon name=${this.icon}></cx-icon>
         ${this.message}
+        <slot></slot>
       </div>
     `;
   }
@@ -12344,7 +12345,28 @@ const styles$2 = i$7`
   }
 
   .content-browser-grid {
+    display: flex;
+    flex-direction: column;
     height: 100%;
+    position: relative;
+  }
+
+  .content-browser-grid__list {
+    flex: 1 1 auto;
+    min-height: 0;
+    overflow-x: hidden;
+  }
+
+  .content-browser-grid__page-error {
+    flex: none;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: var(--cx-spacing-small, 8px);
+    padding: var(--cx-spacing-small, 8px);
+    border-top: 1px solid var(--cx-color-neutral-200, #e5e5e5);
+    background-color: var(--cx-color-neutral-0, #fff);
+    color: var(--cx-color-neutral);
   }
 
   .content-browser-grid-loading {
@@ -12381,6 +12403,7 @@ let CxContentBrowserGrid = class extends CortexElement {
     this.localize = new LocalizeController(this);
     this.assets = [];
     this.empty = false;
+    this.error = false;
     this.view = GridView$1.Medium;
     this.hasMore = false;
     this.loading = false;
@@ -12520,6 +12543,63 @@ let CxContentBrowserGrid = class extends CortexElement {
       this.emit("cx-content-browser-grid-scroll-end");
     }
   }
+  handleRetry() {
+    this.emit("cx-content-browser-grid-retry");
+  }
+  renderRetry() {
+    return b`
+      <cx-button class="content-browser-grid__retry" variant="primary" @click=${this.handleRetry}>
+        ${this.localize.term("retry")}
+      </cx-button>
+    `;
+  }
+  renderContent() {
+    if (this.error && this.assets.length === 0) {
+      return b`
+        <cx-content-browser-no-result
+          class="content-browser-grid__empty"
+          icon="error_outline"
+          message=${this.localize.term("oopsSomethingWentWrong")}
+          role="alert"
+        >
+          ${this.renderRetry()}
+        </cx-content-browser-no-result>
+      `;
+    }
+    if (this.empty) {
+      return b`
+        <cx-content-browser-no-result
+          class="content-browser-grid__empty"
+          icon="search_off"
+          message=${this.localize.term("noResults")}
+        ></cx-content-browser-no-result>
+      `;
+    }
+    return b`
+      <lit-virtualizer
+        class="content-browser-grid__list"
+        scroller
+        .layout=${grid({
+      gap: `${__privateGet2(this, _gutter)}px`,
+      itemSize: {
+        height: `${Math.max(this.columnWidth, 150)}px`,
+        width: `${this.columnWidth}px`
+      },
+      flex: { preserve: "aspect-ratio" }
+    })}
+        .items=${this.assets}
+        .renderItem=${this.renderItem}
+        @scroll=${this.handleScroll}
+      ></lit-virtualizer>
+      ${n$5(this.error, () => b`
+        <div class="content-browser-grid__page-error" role="alert">
+          <cx-icon name="error_outline"></cx-icon>
+          ${this.localize.term("oopsSomethingWentWrong")}
+          ${this.renderRetry()}
+        </div>
+      `)}
+    `;
+  }
   render() {
     return b`
         <div
@@ -12533,36 +12613,7 @@ let CxContentBrowserGrid = class extends CortexElement {
         </div>
       <cx-resize-observer @cx-resize=${this.handleResize}>
         <div class="content-browser-grid">
-          ${n$5(
-      this.empty,
-      () => b`
-              <cx-content-browser-no-result
-                class="content-browser-grid__empty"
-                icon="search_off"
-                message=${this.localize.term("noResults")}
-              ></cx-content-browser-no-result>
-            `,
-      () => b`
-              <lit-virtualizer
-                scroller
-                style=${o$2({
-        height: "100%",
-        "overflow-x": "hidden"
-      })}
-                .layout=${grid({
-        gap: `${__privateGet2(this, _gutter)}px`,
-        itemSize: {
-          height: `${Math.max(this.columnWidth, 150)}px`,
-          width: `${this.columnWidth}px`
-        },
-        flex: { preserve: "aspect-ratio" }
-      })}
-                .items=${this.assets}
-                .renderItem=${this.renderItem}
-                @scroll=${this.handleScroll}
-              ></lit-virtualizer>
-            `
-    )}
+          ${this.renderContent()}
         </div>
       </cx-resize-observer>
     `;
@@ -12573,8 +12624,10 @@ _lastHeight = /* @__PURE__ */ new WeakMap();
 _lastWidth = /* @__PURE__ */ new WeakMap();
 CxContentBrowserGrid.styles = [componentStyles, styles$2];
 CxContentBrowserGrid.dependencies = {
+  "cx-button": CxButton,
   "cx-content-browser-asset-card": CxContentBrowserAssetCard,
   "cx-content-browser-no-result": CxContentBrowserNoResult,
+  "cx-icon": CxIcon,
   "cx-progress-bar": CxProgressBar,
   "cx-resize-observer": CxResizeObserver
 };
@@ -12590,6 +12643,9 @@ __decorateClass$2([
 __decorateClass$2([
   n$6({ attribute: "empty", reflect: true, type: Boolean })
 ], CxContentBrowserGrid.prototype, "empty", 2);
+__decorateClass$2([
+  n$6({ attribute: "error", reflect: true, type: Boolean })
+], CxContentBrowserGrid.prototype, "error", 2);
 __decorateClass$2([
   n$6({ attribute: "view", reflect: true, type: String })
 ], CxContentBrowserGrid.prototype, "view", 2);
@@ -12938,6 +12994,17 @@ function resolveAssetExtraFilters(selectedFacets) {
 function isCortexErrorResponse(response) {
   return response && typeof response === "object" && "ErrorCode" in response;
 }
+function isSearchFacet(facet) {
+  const details = facet == null ? void 0 : facet.facetDetails;
+  return !!facet && !!details && typeof details === "object" && !Array.isArray(details) && typeof details.facetFieldName === "string" && typeof details.displayName === "string" && Array.isArray(facet.values) && facet.values.every((facetValue) => !!facetValue && typeof facetValue.value === "string");
+}
+function isSearchResponse(response) {
+  if (!response || typeof response !== "object" || Array.isArray(response)) {
+    return false;
+  }
+  const { contentItems, facets, totalCount } = response;
+  return Array.isArray(facets) && facets.every(isSearchFacet) && Number.isFinite(totalCount) && (contentItems === void 0 || Array.isArray(contentItems));
+}
 const POST_UNSUPPORTED_STATUSES = /* @__PURE__ */ new Set([405, 501]);
 const postUnsupportedOrigins = /* @__PURE__ */ new Set();
 function createId() {
@@ -13310,6 +13377,14 @@ function apiGetAssets(_0) {
           ...Array.isArray(http.defaults.transformResponse) ? http.defaults.transformResponse : [],
           (rawResponse) => {
             var _a2, _b2;
+            if (!isSearchResponse(rawResponse)) {
+              return {
+                facets: [],
+                isError: true,
+                items: [],
+                totalCount: 0
+              };
+            }
             const mappedItems = (_b2 = (_a2 = rawResponse.contentItems) == null ? void 0 : _a2.map((item) => {
               var _a3, _b3, _c2, _d2, _e3, _f2, _g, _h, _i, _j, _k, _l;
               let extension = (_a3 = item.fields[FIELD_EXTENSION]) != null ? _a3 : "";
@@ -13338,6 +13413,7 @@ function apiGetAssets(_0) {
             })) != null ? _b2 : [];
             return {
               facets: rawResponse.facets,
+              isError: false,
               items: mappedItems,
               totalCount: rawResponse.totalCount
             };
@@ -13349,6 +13425,7 @@ function apiGetAssets(_0) {
     } catch (error) {
       return {
         facets: [],
+        isError: true,
         items: [],
         totalCount: 0
       };
@@ -13846,6 +13923,7 @@ class FetchAndMergeAssetsController {
     this.items = [];
     this.totalCount = 0;
     this.lastRequest = null;
+    this.failedRequest = null;
     this.sortOrders = {};
     this.parameters = null;
     this.availableExtensions = null;
@@ -14071,6 +14149,14 @@ class FetchAndMergeAssetsController {
       return yield apiGetFolders(request);
     });
   }
+  /** Sends the last search that got an error again, with the same page and controls. */
+  retrySearch() {
+    return __async(this, null, function* () {
+      if (this.failedRequest) {
+        yield this.fetchAndMergeAssets(this.failedRequest);
+      }
+    });
+  }
   /**
    * A folder switch (or any refetch) can return a facet list that no longer includes a
    * currently-selected value. Keep those selected-but-missing values visible (count 0) instead
@@ -14117,6 +14203,7 @@ class FetchAndMergeAssetsController {
       }
       const generation = __privateGet(this, _generation);
       this.loading = true;
+      this.failedRequest = null;
       this.host.requestUpdate();
       if (this._debounceTimeout) {
         clearTimeout(this._debounceTimeout);
@@ -14171,17 +14258,25 @@ class FetchAndMergeAssetsController {
           if (generation !== __privateGet(this, _generation)) {
             return;
           }
-          if (isRestart) {
-            this.items = assets.items;
+          if (assets.isError) {
+            this.failedRequest = request;
+            if (isRestart) {
+              this.items = [];
+              this.totalCount = 0;
+            }
           } else {
-            this.items = uniqBy([...this.items, ...assets.items], "recordId");
+            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
+            });
           }
-          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);
@@ -14392,6 +14487,7 @@ class FetchAndMergeAssetsController {
         ) : (_b2 = this.parameters.supportedRepresentativeSubtypes) != null ? _b2 : []
       }) : null,
       request: this.lastRequest,
+      searchError: this.failedRequest !== null,
       sortOrders: this.sortOrders,
       totalCount: this.totalCount,
       userInfo: this.userInfo
@@ -14761,6 +14857,9 @@ let CxContentBrowser = class extends CortexElement {
   }
   handleScrollEnd() {
     return __async(this, null, function* () {
+      if (this.fetchAndMergeAssetsController.getData().searchError) {
+        return;
+      }
       const nextPage = this.fetchAndMergeAssetsController.getNextPage();
       if (!nextPage) {
         return;
@@ -14818,9 +14917,9 @@ let CxContentBrowser = class extends CortexElement {
       if (!nextPage) {
         return;
       }
-      const totalCount = this.fetchAndMergeAssetsController.getData().totalCount;
+      const { searchError, totalCount } = this.fetchAndMergeAssetsController.getData();
       const newStart = nextPage.start;
-      if (newPageSize <= nextPage.lastPageSize || newPageSize === 0 || newStart > totalCount) {
+      if (searchError || newPageSize <= nextPage.lastPageSize || newPageSize === 0 || newStart > totalCount) {
         return;
       }
       this.lastRequest = __spreadProps(__spreadValues({}, this.lastRequest), {
@@ -14846,6 +14945,11 @@ let CxContentBrowser = class extends CortexElement {
       }
     });
   }
+  handleRetry() {
+    return __async(this, null, function* () {
+      yield this.fetchAndMergeAssetsController.retrySearch();
+    });
+  }
   handleGridClick(event) {
     return __async(this, null, function* () {
       const { id } = event.detail;
@@ -15026,6 +15130,7 @@ let CxContentBrowser = class extends CortexElement {
       loading,
       parameters,
       request,
+      searchError,
       sortOrders,
       totalCount,
       userInfo
@@ -15114,7 +15219,8 @@ let CxContentBrowser = class extends CortexElement {
           ></cx-content-browser-control-bar>
           <cx-content-browser-grid
             .assets=${items}
-            ?empty=${!loading && !this.initialFolderPending && items.length === 0}
+            ?empty=${!loading && !this.initialFolderPending && !searchError && items.length === 0}
+            ?error=${searchError}
             ?has-more=${items.length < totalCount}
             ?loading=${loading || this.initialFolderPending}
             ?show-title=${this.showTitle}
@@ -15125,6 +15231,7 @@ let CxContentBrowser = class extends CortexElement {
             view=${this.view}
             @cx-content-browser-grid-scroll-end=${this.handleScrollEnd}
             @cx-content-browser-grid-resize=${this.handleGridResize}
+            @cx-content-browser-grid-retry=${this.handleRetry}
             @cx-content-browser-grid-click=${this.handleGridClick}
           ></cx-content-browser-grid>
         </cx-resize-observer>

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

@@ -31,6 +31,8 @@ export declare class FetchAndMergeAssetsController implements ReactiveController
     private items;
     private totalCount;
     private lastRequest;
+    /** The resolved request of the last search that got an error. A retry sends it again. */
+    private failedRequest;
     private sortOrders;
     private parameters;
     private availableExtensions;
@@ -74,6 +76,8 @@ export declare class FetchAndMergeAssetsController implements ReactiveController
     private mapAvailableExtensions;
     fetchAssets(request: GetAssetsRequest): Promise<import("../api/asset/asset.types").GetAssetsResponse>;
     fetchFolders(request: GetFolderRequest): Promise<import("../types/folder").GetFolderResponse>;
+    /** Sends the last search that got an error again, with the same page and controls. */
+    retrySearch(): Promise<void>;
     /**
      * A folder switch (or any refetch) can return a facet list that no longer includes a
      * currently-selected value. Keep those selected-but-missing values visible (count 0) instead
@@ -143,6 +147,7 @@ export declare class FetchAndMergeAssetsController implements ReactiveController
             supportedRepresentativeSubtypes?: string[];
         } | null;
         request: GetAssetsRequest | null;
+        searchError: boolean;
         sortOrders: Record<string, SortOrder[]>;
         totalCount: number;
         userInfo: UserInfo | null;

package/package.json

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