@orangelogic/orange-dam-content-browser-sdk 2.1.21 → 2.1.23

package/src/page/Home/Home.tsx

@@ -1,6 +1,8 @@
 import _camelCase from 'lodash-es/camelCase';
 import _debounce from 'lodash-es/debounce';
 import _intersection from 'lodash-es/intersection';
+import _isArray from 'lodash-es/isArray';
+import _pickBy from 'lodash-es/pickBy';
 import {
   FC, useCallback, useContext, useEffect, useMemo, useReducer, useRef, useState,
 } from 'react';
@@ -14,30 +16,35 @@ import FormatDialog from '@/components/FormatDialog';
 import Header from '@/components/Header/Header';
 import AssetCardWrapper from '@/components/Result/AssetCard';
 import { ASSET_SIZE } from '@/consts/asset';
+import { COMPUTED_FIELDS } from '@/consts/data';
 import { GlobalConfigContext } from '@/GlobalConfigContext';
 import { useAppDispatch, useAppSelector } from '@/store';
 import {
-  useGetAvailableExtensionsQuery,
-  useGetAvailableProxiesQuery, useGetParametersQuery, useGetSortOrdersQuery,
+  useGetAvailableExtensionsQuery, useGetAvailableFacetsQuery, useGetAvailableProxiesQuery,
+  useGetParametersQuery, useGetSortOrdersQuery,
 } from '@/store/assets/assets.api';
-import { addAssetToFavorite, importAssets, removeAssetFromFavorite, selectedAssetIdSelector, setSelectedAssetId } from '@/store/assets/assets.slice';
-import { authenticatedSelector, logout, applySessionSelector } from '@/store/auth/auth.slice';
-import { useGetAssetByIdQuery, useGetAssetsQuery, useGetIsFavoriteQuery } from '@/store/search/search.api';
+import {
+  addAssetToFavorite, importAssets, removeAssetFromFavorite, selectedAssetIdSelector,
+  setSelectedAssetId,
+} from '@/store/assets/assets.slice';
+import { applySessionSelector, authenticatedSelector, logout } from '@/store/auth/auth.slice';
+import {
+  useGetAssetByIdQuery, useGetAssetsQuery, useGetIsFavoriteQuery,
+} from '@/store/search/search.api';
 import { explorePath, RootFolder } from '@/store/search/search.slice';
 import { useGetUserInfoQuery } from '@/store/user/user.api';
 import { FormatLoaderState } from '@/types/assets';
 import {
-  Asset, Filter, Folder, GetAssetLinkResponse, GridView, SortDirection,
+  Asset, Facet, Folder, GetAssetLinkResponse, GridView, SortDirection,
 } from '@/types/search';
 import { MOBILE_THRESHOLD, PAGE_SIZE, RESIZE_TIMEOUT } from '@/utils/constants';
+import { isPromise } from '@/utils/function';
 import { getData, storeData } from '@/utils/storage';
-import type { CxResizeEvent, CxResizeObserver } from '@orangelogic-private/design-system';
 import { skipToken } from '@reduxjs/toolkit/query';
 
 import { Container } from './Home.styled';
-import { COMPUTED_FIELDS } from '@/consts/data';
-import { isPromise } from '@/utils/function';
 
+import type { CxResizeEvent, CxResizeObserver } from '@orangelogic-private/design-system';
 type Props = {
   multiSelect?: boolean;
 };
@@ -50,24 +57,21 @@ type State = {
   currentCount: number;
   currentFolder: Folder;
   defaultPageSize: number;
-  extensions: string[];
-  facets: Record<string, Record<string, number>>;
+  facets: Facet[];
   hasScrolled: boolean;
   isLoading: boolean;
   isSeeThrough: boolean;
-  mediaTypes: string[];
   openBrowser: boolean;
   start: number;
   pageSize: number;
   maxPageSize: number;
   searchText: string;
+  selectedFacets: Record<string, string[]>;
   shouldResetFilters: boolean;
   sortDirection?: 'ascending' | 'descending';
   sortOrder: string;
-  statuses: string[];
   totalCount: number;
   view: GridView;
-  visibilityClasses: string[];
 };
 
 type Action =
@@ -78,8 +82,8 @@ type Action =
     folder: Folder,
     shouldResetFilters?: boolean;
   } }
-  | { type: 'SET_FACETS'; payload: Record<string, Record<string, number>> }
-  | { type: 'SET_FILTERS'; payload: Filter }
+  | { type: 'SET_FACETS'; payload: Facet[] }
+  | { type: 'SET_FILTERS'; payload: Record<string, string[]> }
   | { type: 'SET_HAS_SCROLLED'; payload: boolean }
   | { type: 'SET_IS_LOADING'; payload: boolean }
   | { type: 'SET_IS_SEE_THROUGH'; payload: boolean }
@@ -103,24 +107,21 @@ const initialState: State = {
   currentCount: 0,
   currentFolder: RootFolder,
   defaultPageSize: PAGE_SIZE,
-  extensions: [],
-  facets: {},
+  facets: [],
   hasScrolled: false,
   isLoading: false,
   isSeeThrough: true,
-  mediaTypes: [],
   openBrowser: false,
   start: 0,
   pageSize: 0,
   maxPageSize: 0,
   searchText: '',
+  selectedFacets: {},
   shouldResetFilters: true,
   sortDirection: undefined,
   sortOrder: '',
-  statuses: [],
   totalCount: 0,
   view: GridView.Medium,
-  visibilityClasses: [],
 };
 
 const reducer = (state: State, action: Action): State => {
@@ -140,11 +141,8 @@ const reducer = (state: State, action: Action): State => {
     case 'SET_FILTERS':
       return {
         ...state,
-        mediaTypes: action.payload.mediaTypes,
-        visibilityClasses: action.payload.visibilityClasses,
+        selectedFacets: action.payload,
         shouldResetFilters: false,
-        statuses: action.payload.statuses,
-        extensions: action.payload.extensions,
         ...resetPageState,
       };
     case 'SET_HAS_SCROLLED':
@@ -156,15 +154,12 @@ const reducer = (state: State, action: Action): State => {
     case 'SET_OPEN_BROWSER':
       return { ...state, openBrowser: action.payload };
     case 'SET_START':{
-      return { ...state, start: state.start + state.pageSize, pageSize: state.defaultPageSize };
+      return { ...state, start: action.payload, pageSize: state.defaultPageSize };
     }
     case 'SET_PAGE_SIZE': {
       const result = { ...state, pageSize: action.payload.pageSize, maxPageSize: action.payload.pageSize };
       if (action.payload.returnToFirstPage) {
         result.start = 0;
-      } else {
-        result.start = state.start + state.pageSize;
-        result.pageSize = Math.abs(action.payload.pageSize - result.start);
       }
       return result;
     }
@@ -260,7 +255,7 @@ const HomePage: FC<Props> = () => {
     : skipToken,
   );
 
-  const { data: availableExtensions } = useGetAvailableExtensionsQuery();
+  const { data: availableExtensions } = useGetAvailableExtensionsQuery({ useSession });
 
   const { data: params } = useGetParametersQuery({
     useSession,
@@ -278,6 +273,8 @@ const HomePage: FC<Props> = () => {
     useSession,
   });
 
+  const { data: availableFacets } = useGetAvailableFacetsQuery({ useSession });
+
   const { data: isFavorite, refetch: refetchIsFavorite } = useGetIsFavoriteQuery(
     selectedAsset && allowFavorites ? {
       recordId: selectedAsset.id,
@@ -286,13 +283,14 @@ const HomePage: FC<Props> = () => {
   const [browserMounted, setBrowserMounted] = useState(false);
   const [isResized, setIsResized] = useState(false);
   const [showFormatLoader, setShowFormatLoader] = useState<FormatLoaderState>(FormatLoaderState.Hide);
+  const [itemsCount, setItemsCount] = useState(0);
 
   const browserMountedRef = useRef(browserMounted);
   const containerRef = useRef<HTMLDivElement>(null);
   const resultRef = useRef<HTMLDivElement>(null);
   const containerResizeObserverRef = useRef<CxResizeObserver>(null);
   const loadedFromStorage = useRef(false);
-  const facetsRef = useRef<Record<string, Record<string, number>>>({});
+  const facetsRef = useRef<Facet[]>([]);
   const appDispatch = useAppDispatch();
 
   const pageSizeRef = useRef(state.pageSize);
@@ -310,9 +308,9 @@ const HomePage: FC<Props> = () => {
   }, [availableDocTypes, supportedDocTypes]);
 
   const mappedMediaTypes = useMemo(() => {
-    if (state.mediaTypes.length > 0) return state.mediaTypes;
+    if (state.selectedFacets.Types && state.selectedFacets.Types.length > 0) return state.selectedFacets.Types;
     return ['*'];
-  }, [state.mediaTypes]);
+  }, [state.selectedFacets]);
 
   const isConfigError = useMemo(() => (!mappedMediaTypes?.length || mappedMediaTypes.length === 0) && !!supportedDocTypes, [mappedMediaTypes, supportedDocTypes]);
 
@@ -361,21 +359,26 @@ const HomePage: FC<Props> = () => {
     });
   }, [availableProxies, allowedExtensions]);
 
-  const { data, isFetching, isError, refetch } = useGetAssetsQuery(isResized && sortOrders && mappedMediaTypes?.length && browserMounted ? {
-    extensions: state.extensions,
+  const shouldFetch = useMemo(() => {
+    return isResized && sortOrders && mappedMediaTypes?.length && browserMounted;
+  }, [isResized, sortOrders, mappedMediaTypes, browserMounted]);
+
+  const { data, isFetching, isError, refetch } = useGetAssetsQuery(shouldFetch ? {
     folderID: state.currentFolder.id,
     isSeeThrough: state.isSeeThrough,
     limitedToDocTypes: mappedAvailableDocTypes,
-    mediaTypes: mappedMediaTypes,
     pageSize: state.pageSize,
     searchText: state.searchText,
+    selectedFacets: state.selectedFacets,
     sortOrder: selectedSortOrder?.id,
     start: state.start,
-    statuses: state.statuses ?? [],
     useSession,
-    visibilityClasses: state.visibilityClasses,
   } : skipToken);
 
+  useEffect(() => {
+    setItemsCount(data?.items.length ?? 0);
+  }, [data?.items.length]);
+
   useEffect(() => {
     if (isErrorSelectedAsset) {
       appDispatch(setSelectedAssetId(null));
@@ -429,17 +432,33 @@ const HomePage: FC<Props> = () => {
           dispatch({ type: 'SET_SORT_DIRECTION', payload: sortDirection });
         }
         if (typeof view === 'string') {
-          dispatch({ type: 'SET_VIEW', payload: view as GridView });
+          if (!Object.values(GridView).includes(view as GridView)) {
+            /**
+             * Default to Medium if the stored view is invalid.
+             */
+            dispatch({ type: 'SET_VIEW', payload: GridView.Medium });
+          } else {
+            dispatch({ type: 'SET_VIEW', payload: view as GridView });
+          }
         }
         
         if (lastLocationMode) {
           if (newFacets) {
             const parsedFacets = JSON.parse(newFacets);
-            dispatch({ type: 'SET_FACETS', payload: parsedFacets });
+            if (_isArray(parsedFacets)) {
+              dispatch({ type: 'SET_FACETS', payload: parsedFacets });
+            } else {
+              dispatch({ type: 'SET_FACETS', payload: [] });
+            }
           }
           if (selectedFilter) {
             const parsedFilter = JSON.parse(selectedFilter);
-            dispatch({ type: 'SET_FILTERS', payload: parsedFilter });
+
+            if (parsedFilter) {
+              dispatch({ type: 'SET_FILTERS', payload: _pickBy(parsedFilter, _isArray) });
+            } else {
+              dispatch({ type: 'SET_FILTERS', payload: {} });
+            }
           }
           if (selectedIsSeeThrough) {
             dispatch({ type: 'SET_IS_SEE_THROUGH', payload: selectedIsSeeThrough === 'true' });
@@ -454,6 +473,32 @@ const HomePage: FC<Props> = () => {
     }
   }, [appDispatch, authenticated, lastLocationMode]);
 
+  useEffect(() => {
+    /**
+     * Force re-render of the container to ensure that the width is recalculated correctly.
+     * The issue is that the container width is not updated correctly when the Content Browser is mounted inside custom windows, e.g. in the File on Demand, Contentful.
+     */
+    let timeout = null;
+    const container = containerRef.current;
+
+    if (!container) {
+      return;
+    }
+
+    const currentWidth = container.offsetWidth;
+    container.style.width = (currentWidth - 1) + 'px';
+
+    timeout = setTimeout(() => {
+      container.style.width = '100%';
+    }, 50);
+
+    return () => {
+      if (timeout) {
+        clearTimeout(timeout);
+      }
+    };
+  }, [authenticated]);
+
   useEffect(() => {
     const resizeObserver = containerResizeObserverRef.current;
     if (!resizeObserver) {
@@ -504,29 +549,11 @@ const HomePage: FC<Props> = () => {
     storeData('newFacets', JSON.stringify(state.facets));
     storeData(
       'selectedFilter',
-      JSON.stringify({
-        mediaTypes: state.mediaTypes,
-        visibilityClasses: state.visibilityClasses,
-        shouldResetFilters: false,
-        statuses: state.statuses,
-        extensions: state.extensions,
-      }),
+      JSON.stringify(state.selectedFacets),
     );
     storeData('selectedIsSeeThrough', state.isSeeThrough.toString());
     storeData('searchText', state.searchText);
-  }, [
-    state.currentFolder,
-    state.extensions,
-    state.facets,
-    state.isSeeThrough,
-    state.mediaTypes,
-    state.sortDirection,
-    state.sortOrder,
-    state.searchText,
-    state.statuses,
-    state.view,
-    state.visibilityClasses,
-  ]);
+  }, [state.currentFolder, state.facets, state.isSeeThrough, state.sortDirection, state.sortOrder, state.searchText, state.view, state.selectedFacets]);
 
   const isMobile = state.containerSize.width <= MOBILE_THRESHOLD;
 
@@ -565,7 +592,7 @@ const HomePage: FC<Props> = () => {
     const rowCount = Math.ceil(containerHeight / (breakpoint + gutter));
     const newPageSize = Math.ceil((rowCount * columnCount) / defaultPageSizeRef.current + 1) * defaultPageSizeRef.current;
     setIsResized(true);
-    if (newPageSize !== pageSizeRef.current) {
+    if (newPageSize !== pageSizeRef.current && newPageSize !== 0) {
       dispatch({
         type: 'SET_PAGE_SIZE',
         payload: {
@@ -577,7 +604,7 @@ const HomePage: FC<Props> = () => {
   }, []);
 
   const debouncedHandleResize = useMemo(() => {
-    return _debounce(handleResize, 300, {
+    return _debounce(handleResize, RESIZE_TIMEOUT, {
       leading: false,
     });
   }, [handleResize]);
@@ -601,7 +628,7 @@ const HomePage: FC<Props> = () => {
   const onSettingChange = useCallback(
     (
       setting: string,
-      value: GridView | SortDirection | Filter | string | boolean | string[],
+      value: GridView | SortDirection | Record<string, string[]> | string | boolean | string[],
     ) => {
       switch (setting) {
         case 'view':
@@ -620,7 +647,7 @@ const HomePage: FC<Props> = () => {
           dispatch({ type: 'SET_IS_SEE_THROUGH', payload: Boolean(value) });
           break;
         case 'filter':
-          dispatch({ type: 'SET_FILTERS', payload: value as Filter });
+          dispatch({ type: 'SET_FILTERS', payload: value as Record<string, string[]> });
           break;
         default:
           break;
@@ -631,7 +658,7 @@ const HomePage: FC<Props> = () => {
 
   const onDataChange = useCallback(
     (newData: {
-      facets: Record<string, Record<string, number>>;
+      facets: Facet[];
       items: Asset[];
       totalCount: number;
       currentCount: number;
@@ -667,15 +694,17 @@ const HomePage: FC<Props> = () => {
       isWindowResizing.current = false;
       return;
     }
-    dispatch({ type: 'SET_START', payload: 1 });
-  }, []);
+    dispatch({ type: 'SET_START', payload: itemsCount ?? 0 });
+  }, [itemsCount]);
 
   const onScroll = useCallback((e: MouseEvent) => {
     if (!e.target) {
       return;
     }
 
-    if ((e.target as HTMLElement).scrollTop === 0) {
+    const newScrollTop = (e.target as HTMLElement).scrollTop;
+
+    if (newScrollTop === 0) {
       dispatch({ type: 'SET_HAS_SCROLLED', payload: false });
     } else {
       dispatch({ type: 'SET_HAS_SCROLLED', payload: true });
@@ -725,8 +754,8 @@ const HomePage: FC<Props> = () => {
     if (onDataChange) {
       onDataChange({
         currentCount: data?.items.length ?? 0,
-        items: data?.items || [],
-        facets: data?.facets || {},
+        items: data?.items ?? [],
+        facets: data?.facets ?? [],
         totalCount: data?.totalCount ?? 0,
       });
     }
@@ -805,21 +834,19 @@ const HomePage: FC<Props> = () => {
         >
           <ControlBar
             allowSorting={selectedSortOrder?.sortDirection !== 'Mono' && !!selectedSortOrder}
+            availableFacets={availableFacets ?? []}
             currentCount={state.currentCount}
-            extensions={state.extensions}
             facets={state.facets}
             isMobile={isMobile}
             isSeeThrough={state.isSeeThrough}
             loading={state.isLoading}
-            mediaTypes={state.mediaTypes}
             searchValue={state.searchText}
+            selectedFacets={state.selectedFacets}
             sortDirection={state.sortDirection}
             sortOrder={state.sortOrder}
             sortOrders={sortOrders}
-            statuses={state.statuses}
             totalCount={state.totalCount}
             view={state.view}
-            visibilityClasses={state.visibilityClasses}
             onSearchChange={onSearchChange}
             onSettingChange={onSettingChange}
           />
@@ -872,10 +899,7 @@ const HomePage: FC<Props> = () => {
                     key={
                       state.currentFolder.id +
                       state.searchText +
-                      state.mediaTypes.join('+') +
-                      state.extensions.join('+') +
-                      state.statuses.join('+') +
-                      state.visibilityClasses.join('+') +
+                      Object.values(state.selectedFacets).join('+') +
                       state.isSeeThrough +
                       state.view
                     }

package/src/store/assets/assets.api.ts

@@ -1,7 +1,7 @@
 import { v4 as uuidv4 } from 'uuid';
 
 import { SortOrder } from '@/types/assets';
-import { Asset, MediaType, Proxy } from '@/types/search';
+import { Asset, Facet, MediaType, Proxy } from '@/types/search';
 import { AppBaseQuery, GetValueByKeyCaseInsensitive } from '@/utils/api';
 import { hasElements, uniqueArray } from '@/utils/array';
 import { createApi, retry } from '@reduxjs/toolkit/query/react';
@@ -28,6 +28,8 @@ export type GetAvailableProxiesResponse = {
 
 type GetAvailableExtensionsResponse = Record<MediaType, { displayName: string; value: string }[]>;
 
+type GetAvailableFacetsResponse = Facet['facetDetails'][];
+
 /**
  * get query parameter for AvailableProxies_4ea_v2 API
  * @param {GetAvailableProxiesRequest} 
@@ -61,11 +63,12 @@ const baseQueryWithRetry = retry(AppBaseQuery, {
 export const assetsApi = createApi({
   reducerPath: 'assetsApi',
   baseQuery: baseQueryWithRetry,
-  tagTypes: ['AvailableExtensions', 'AvailableProxies', 'Parameters', 'SortOrders', 'VersionHistory'],
+  tagTypes: ['AvailableExtensions', 'AvailableFacets', 'AvailableProxies', 'Parameters', 'SortOrders', 'VersionHistory'],
   endpoints: (builder) => ({
-    getAvailableExtensions: builder.query<GetAvailableExtensionsResponse, void>({
-      query: () => ({
+    getAvailableExtensions: builder.query<GetAvailableExtensionsResponse, { useSession: string }>({
+      query: ({ useSession }) => ({
         url: '/webapi/extensibility/integrations/gab/assetbrowser/getavailableextensionsfortransformation_419v_v1',
+        params: useSession ? [['UseSession', useSession]] : [],
       }),
       transformResponse: (response: { extensions: GetAvailableExtensionsResponse }) => {
         return response.extensions;
@@ -96,6 +99,15 @@ export const assetsApi = createApi({
       serializeQueryArgs: ({ queryArgs }) => getAvailableProxiesAPIParams(queryArgs),
       providesTags: (_result, _error, _args) => ['AvailableProxies'],
     }),
+    getAvailableFacets: builder.query<GetAvailableFacetsResponse,  { useSession: string }>({
+      keepUnusedDataFor: 0,
+      query: ({ useSession }) => ({
+        url: '/webapi/extensibility/integrations/gab/assetbrowser/getavailablefacets',
+        params: useSession ? [['UseSession', useSession]] : [],
+      }),
+      transformResponse: (response: { facets: Facet['facetDetails'][] }) => response.facets,
+      providesTags: ['AvailableFacets'],
+    }),
     getParameters: builder.query<{
       ATSEnabled: boolean;
       autoExtension: string;
@@ -162,12 +174,21 @@ export const assetsApi = createApi({
       versions: Record<string, string>[];
     }, {
       assetId: string;
+      useSession?: string;
     }>({
       keepUnusedDataFor: 0,
-      query: ({ assetId }) => ({
-        url: '/webapi/extensibility/integrations/contentBrowserSDK/getassetversion_418f',
-        params: [['RecordID', assetId]],
-      }),
+      query: ({ assetId, useSession }) => {
+        const params = [['RecordID', assetId]];
+
+        if (useSession) {
+          params.push(['UseSession', useSession]);
+        }
+
+        return {
+          url: '/webapi/extensibility/integrations/contentBrowserSDK/getassetversion_418f',
+          params,
+        };
+      },
       transformResponse: (response: { count: number, versions: Record<string, string>[] }) => {
         return {
           count: response.count,
@@ -195,6 +216,7 @@ export const assetsApi = createApi({
 // auto-generated based on the defined endpoints
 export const {
   useGetAvailableExtensionsQuery,
+  useGetAvailableFacetsQuery,
   useGetAvailableProxiesQuery,
   useGetParametersQuery,
   useGetSortOrdersQuery,