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

package/build/api/asset/asset.types.d.ts

@@ -60,6 +60,7 @@ export type GetAssetsRawResponse = {
 };
 export type GetAssetsResponse = {
     facets: Facet[];
+    isError: boolean;
     items: Array<Asset & Record<string, string | boolean>>;
     totalCount: number;
 };

package/build/components/content-browser/content-browser.d.ts

@@ -133,6 +133,7 @@ export default class CxContentBrowser extends CortexElement {
     private handleGridResize;
     private clearInitialFolderPending;
     private releaseInitialFolder;
+    private handleRetry;
     private handleGridClick;
     private handleVersionHistoryOpen;
     private handleFavoriteChange;

package/build/components/content-browser-grid/content-browser-grid.d.ts

@@ -2,6 +2,8 @@ import '@lit-labs/virtualizer';
 import CortexElement from '../../base/element';
 import { Asset } from '../../types/asset';
 import { GridView } from '../../types/content-browser';
+import CxButton from '@orangelogic/design-system/components/button';
+import CxIcon from '@orangelogic/design-system/components/icon';
 import CxProgressBar from '@orangelogic/design-system/components/progress-bar';
 import CxResizeObserver from '@orangelogic/design-system/components/resize-observer';
 import CxContentBrowserAssetCard from '../content-browser-asset-card/content-browser-asset-card';
@@ -11,8 +13,10 @@ export default class CxContentBrowserGrid extends CortexElement {
     #private;
     static readonly styles: CSSResultGroup;
     static readonly dependencies: {
+        'cx-button': typeof CxButton;
         'cx-content-browser-asset-card': typeof CxContentBrowserAssetCard;
         'cx-content-browser-no-result': typeof CxContentBrowserNoResult;
+        'cx-icon': typeof CxIcon;
         'cx-progress-bar': typeof CxProgressBar;
         'cx-resize-observer': typeof CxResizeObserver;
     };
@@ -21,6 +25,8 @@ export default class CxContentBrowserGrid extends CortexElement {
     private readonly virtualizerEl;
     assets: Asset[];
     empty: boolean;
+    /** The last search request got an error. With no rows, the error replaces the grid. With rows, it shows at the bottom. */
+    error: boolean;
     view: GridView;
     hasMore: boolean;
     loading: boolean;
@@ -44,6 +50,9 @@ export default class CxContentBrowserGrid extends CortexElement {
     private handleScroll;
     private readonly debouncedHandleScrollEnd;
     private handleScrollEnd;
+    private handleRetry;
+    private renderRetry;
+    private renderContent;
     render(): import("lit-html").TemplateResult<1>;
 }
 declare global {

package/build/content-browser.mjs

@@ -12126,6 +12126,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>
     `;
   }
@@ -12278,7 +12279,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 {
@@ -12315,6 +12337,7 @@ let CxContentBrowserGrid = class extends CortexElement {
     this.localize = new LocalizeController(this);
     this.assets = [];
     this.empty = false;
+    this.error = false;
     this.view = GridView.Medium;
     this.hasMore = false;
     this.loading = false;
@@ -12454,6 +12477,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
@@ -12467,36 +12547,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$1({
-        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>
     `;
@@ -12507,8 +12558,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
 };
@@ -12524,6 +12577,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);
@@ -12872,6 +12928,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() {
@@ -13244,6 +13311,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, _e2, _f2, _g, _h, _i, _j, _k, _l;
               let extension = (_a3 = item.fields[FIELD_EXTENSION]) != null ? _a3 : "";
@@ -13272,6 +13347,7 @@ function apiGetAssets(_0) {
             })) != null ? _b2 : [];
             return {
               facets: rawResponse.facets,
+              isError: false,
               items: mappedItems,
               totalCount: rawResponse.totalCount
             };
@@ -13283,6 +13359,7 @@ function apiGetAssets(_0) {
     } catch (error) {
       return {
         facets: [],
+        isError: true,
         items: [],
         totalCount: 0
       };
@@ -13780,6 +13857,7 @@ class FetchAndMergeAssetsController {
     this.items = [];
     this.totalCount = 0;
     this.lastRequest = null;
+    this.failedRequest = null;
     this.sortOrders = {};
     this.parameters = null;
     this.availableExtensions = null;
@@ -14005,6 +14083,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
@@ -14051,6 +14137,7 @@ class FetchAndMergeAssetsController {
       }
       const generation = __privateGet(this, _generation);
       this.loading = true;
+      this.failedRequest = null;
       this.host.requestUpdate();
       if (this._debounceTimeout) {
         clearTimeout(this._debounceTimeout);
@@ -14105,17 +14192,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);
@@ -14326,6 +14421,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
@@ -14695,6 +14791,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;
@@ -14752,9 +14851,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), {
@@ -14780,6 +14879,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;
@@ -14960,6 +15064,7 @@ let CxContentBrowser = class extends CortexElement {
       loading,
       parameters,
       request,
+      searchError,
       sortOrders,
       totalCount,
       userInfo
@@ -15048,7 +15153,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}
@@ -15059,6 +15165,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/events/cx-content-browser-grid-retry.d.ts

@@ -0,0 +1,6 @@
+export type CxContentBrowserGridRetryEvent = CustomEvent<Record<PropertyKey, never>>;
+declare global {
+    interface GlobalEventHandlersEventMap {
+        'cx-content-browser-grid-retry': CxContentBrowserGridRetryEvent;
+    }
+}

package/build/events/index.d.ts

@@ -13,6 +13,7 @@ export * from './cx-content-browser-format-dialog-proxy-confirm';
 export * from './cx-content-browser-format-dialog-version-history-open';
 export * from './cx-content-browser-grid-click';
 export * from './cx-content-browser-grid-resize';
+export * from './cx-content-browser-grid-retry';
 export * from './cx-content-browser-grid-scroll-end';
 export * from './cx-content-browser-header-close';
 export * from './cx-content-browser-header-logout';