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

package/src/components/ControlBar/Facet/Facet.cy.tsx

@@ -4,56 +4,170 @@ import Facet from './Facet';
 
 describe('Facet', () => {
   it('Should render nothing when no facet is provided', () => {
-    cy.mount(<Facet facet={{}} type="" collections={[]} displayName=''/>);
+    cy.mount(<Facet values={[]} type="" collections={[]} displayName=''/>);
     cy.get('cx-details').should('not.exist');
   });
 
   it('Should render the facet with some items', () => {
     const data = {
       type: 'example',
-      facet: {
-        item1: 10,
-        item2: 20,
-      },
+      values: [
+        {
+          'displayValue': 'images',
+          'value': 'images',
+          'count': 50,
+        },
+        {
+          'displayValue': 'others',
+          'value': 'others',
+          'count': 9,
+        },
+        {
+          'displayValue': 'videos',
+          'value': 'videos',
+          'count': 5,
+        },
+        {
+          'displayValue': '3d assets',
+          'value': '3d assets',
+          'count': 4,
+        },
+        {
+          'displayValue': 'audio',
+          'value': 'audio',
+          'count': 3,
+        },
+        {
+          'displayValue': 'image',
+          'value': 'image',
+          'count': 1,
+        },
+        {
+          'displayValue': 'images>>image 1s',
+          'value': 'images>>image 1s',
+          'count': 1,
+        },
+        {
+          'displayValue': 'images>>image 2s',
+          'value': 'images>>image 2s',
+          'count': 1,
+        },
+      ],
       displayName: 'Example Facet', 
     };
-    cy.mount(<Facet facet={data.facet} type={data.type} collections={[]} displayName={data.displayName}/>);
+    cy.mount(<Facet values={data.values} type={data.type} collections={[]} displayName={data.displayName}/>);
     cy.waitForCustomElement('cx-details');
     cy.waitForCustomElement('cx-tree');
     cy.waitForCustomElement('cx-tree-item');
     cy.get('cx-details').should('exist');
     cy.get('cx-tree').should('exist');
-    cy.get('cx-tree-item').should('have.length', Object.keys(data.facet).length);
+    cy.get('cx-tree-item').should('have.length', data.values.length);
   });
 
   it('Should render the facet with selected items', () => {
     const data = {
       type: 'example',
-      facet: {
-        item1: 10,
-        item2: 20,
-      },
+      values: [
+        {
+          'displayValue': 'images',
+          'value': 'images',
+          'count': 50,
+        },
+        {
+          'displayValue': 'others',
+          'value': 'others',
+          'count': 9,
+        },
+        {
+          'displayValue': 'videos',
+          'value': 'videos',
+          'count': 5,
+        },
+        {
+          'displayValue': '3d assets',
+          'value': '3d assets',
+          'count': 4,
+        },
+        {
+          'displayValue': 'audio',
+          'value': 'audio',
+          'count': 3,
+        },
+        {
+          'displayValue': 'image',
+          'value': 'image',
+          'count': 1,
+        },
+        {
+          'displayValue': 'images>>image 1s',
+          'value': 'images>>image 1s',
+          'count': 1,
+        },
+        {
+          'displayValue': 'images>>image 2s',
+          'value': 'images>>image 2s',
+          'count': 1,
+        },
+      ],
       displayName: 'Example Facet', 
     };
-    cy.mount(<Facet facet={data.facet} type={data.type} collections={['item1']} displayName={data.displayName}/>);
+    cy.mount(<Facet values={data.values} type={data.type} collections={['item1']} displayName={data.displayName}/>);
     cy.waitForCustomElement('cx-details');
     cy.waitForCustomElement('cx-tree');
     cy.waitForCustomElement('cx-tree-item');
     cy.get('cx-details').should('exist');
     cy.get('cx-tree').should('exist');
-    cy.get('cx-tree-item').should('have.length', Object.keys(data.facet).length);
+    cy.get('cx-tree-item').should('have.length', data.values.length);
   });
 
   it('should render the facet with loading state', () => {
     const data = {
       type: 'example',
-      facet: {
-        item1: 10,
-        item2: 20,
-      },
+      values: [
+        {
+          'displayValue': 'images',
+          'value': 'images',
+          'count': 50,
+        },
+        {
+          'displayValue': 'others',
+          'value': 'others',
+          'count': 9,
+        },
+        {
+          'displayValue': 'videos',
+          'value': 'videos',
+          'count': 5,
+        },
+        {
+          'displayValue': '3d assets',
+          'value': '3d assets',
+          'count': 4,
+        },
+        {
+          'displayValue': 'audio',
+          'value': 'audio',
+          'count': 3,
+        },
+        {
+          'displayValue': 'image',
+          'value': 'image',
+          'count': 1,
+        },
+        {
+          'displayValue': 'images>>image 1s',
+          'value': 'images>>image 1s',
+          'count': 1,
+        },
+        {
+          'displayValue': 'images>>image 2s',
+          'value': 'images>>image 2s',
+          'count': 1,
+        },
+      ],
       displayName: 'Example Facet', 
     };
-    cy.mount(<Facet facet={data.facet} type={data.type} collections={[]} loading={true} displayName={data.displayName}/>);
+    cy.mount(<Facet values={data.values} type={data.type} collections={[]} loading={true} displayName={data.displayName}/>);
     cy.waitForCustomElement('cx-details');
     cy.waitForCustomElement('cx-spinner');
     cy.get('cx-spinner').should('exist');
@@ -62,14 +176,51 @@ describe('Facet', () => {
   it('should render the facet with subtype', () => {
     const data = {
       type: 'example',
-      facet: {
-        'item1 >> item1.1': 10,
-        'item1 >> item1.2': 5,
-        item2: 20,
-      },
+      values: [
+        {
+          'displayValue': 'images',
+          'value': 'images',
+          'count': 50,
+        },
+        {
+          'displayValue': 'others',
+          'value': 'others',
+          'count': 9,
+        },
+        {
+          'displayValue': 'videos',
+          'value': 'videos',
+          'count': 5,
+        },
+        {
+          'displayValue': '3d assets',
+          'value': '3d assets',
+          'count': 4,
+        },
+        {
+          'displayValue': 'audio',
+          'value': 'audio',
+          'count': 3,
+        },
+        {
+          'displayValue': 'image',
+          'value': 'image',
+          'count': 1,
+        },
+        {
+          'displayValue': 'images>>image 1s',
+          'value': 'images>>image 1s',
+          'count': 1,
+        },
+        {
+          'displayValue': 'images>>image 2s',
+          'value': 'images>>image 2s',
+          'count': 1,
+        },
+      ],
       displayName: 'Example Facet', 
     };
-    cy.mount(<Facet facet={data.facet} type={data.type} collections={[]} loading={false} displayName={data.displayName}/>);
+    cy.mount(<Facet values={data.values} type={data.type} collections={[]} loading={false} displayName={data.displayName}/>);
     cy.waitForCustomElement('cx-details');
     cy.waitForCustomElement('cx-tree');
     cy.waitForCustomElement('cx-tree-item');

package/src/components/ControlBar/Facet/Facet.tsx

@@ -1,24 +1,25 @@
 import LoadMoreButton from '@/components/Browser/LoadMoreButton';
-import _capitalize from 'lodash-es/capitalize';
 import { FC, useMemo, useState } from 'react';
 
 const ITEMS_PER_PAGE = 20;
 
 type Props = {
-  facet: Record<string, number>;
+  values: {
+    count: number;
+    displayValue: string;
+    value: string;
+  }[];
   type: string;
   displayName: string;
   collections: string[];
-  capitalize?: boolean;
   loading?: boolean;
 };
 
 const Facet: FC<Props> = ({
-  facet,
+  values,
   type,
   displayName,
   collections,
-  capitalize = true,
   loading = false,
 }) => {
   const [page, setPage] = useState(1);
@@ -32,7 +33,7 @@ const Facet: FC<Props> = ({
   */
 
   const mappedSubtypes = useMemo(() => {
-    return Object.entries(facet).reduce((acc, [key, value]) => {
+    return values.reduce((acc, { value: key, count: value }) => {
       const [parent, subtype] = key.split('>>');
 
       if (!acc[parent] || typeof acc[parent] !== 'object') {
@@ -51,14 +52,22 @@ const Facet: FC<Props> = ({
 
       return acc;
     }, {} as Record<string, Record<string, number> | number>);
-  }, [facet]);
+  }, [values]);
+
+  const mappedDisplayNames = useMemo(() => {
+    return values.reduce((acc, { value: key, displayValue: value }) => {
+      acc[key] = value;
+
+      return acc;
+    }, {} as Record<string, string>);
+  }, [values]);
 
   const hasNextPage = useMemo(
     () => Object.keys(mappedSubtypes).length > page * ITEMS_PER_PAGE,
     [mappedSubtypes, page],
   );
 
-  if (!facet || Object.values(facet).length === 0) {
+  if (values.length === 0) {
     return null;
   }
 
@@ -74,7 +83,7 @@ const Facet: FC<Props> = ({
         {loading && <cx-spinner></cx-spinner>}
       </cx-space>
       <cx-space direction="vertical">
-        <cx-tree selection="multiple" data-facet={type}>
+        <cx-tree selection="multiple" label-selects-single data-facet={type}>
           {Object.entries(mappedSubtypes)
             .slice(0, page * ITEMS_PER_PAGE)
             .map(([key, value]) => {
@@ -83,6 +92,11 @@ const Facet: FC<Props> = ({
 
                 const { all, ...rest } = value;
 
+                const totalCount = Object.values(rest).reduce(
+                  (sum, count) => sum + count,
+                  0,
+                );
+
                 return (
                   <cx-tree-item
                     key={key}
@@ -90,9 +104,9 @@ const Facet: FC<Props> = ({
                     data-type={type}
                     readonly={loading}
                     selected={selected}
-                    disabled-sync-checkboxes
+                    disabled-sync-checkboxes={totalCount !== all ? true : undefined}
                   >
-                    {capitalize ? _capitalize(key) : key} {!!all && `(${all})`}
+                    {mappedDisplayNames[key]} {!!all && `(${all})`}
                     {Object.entries(rest).map(([subtype, count]) => (
                       <cx-tree-item
                         key={subtype}
@@ -101,7 +115,7 @@ const Facet: FC<Props> = ({
                         readonly={loading}
                         selected={collections.includes(`${key}>>${subtype}`)}
                       >
-                        {capitalize ? _capitalize(subtype) : subtype} ({count})
+                        {mappedDisplayNames[`${key}>>${subtype}`]} ({count})
                       </cx-tree-item>
                     ))}
                   </cx-tree-item>
@@ -115,7 +129,7 @@ const Facet: FC<Props> = ({
                   readonly={loading}
                   selected={collections.includes(key)}
                 >
-                  {capitalize ? _capitalize(key) : key} ({value})
+                  {mappedDisplayNames[key]} ({value})
                 </cx-tree-item>
               );
             })}

package/src/consts/data.ts

@@ -12,6 +12,8 @@ export const FIELD_SCRUB_URL = 'ScrubURL';
 export const FIELD_SUBTYPE = 'CoreField.DocSubType';
 export const FIELD_TITLE_WITH_FALLBACK = 'CoreField.TitleWithFallback';
 export const FIELD_HAS_BROWSER_CHILDREN = 'Document.HasBrowserChildren';
+export const FIELD_ORIGINAL_FILE_NAME = 'CoreField.OriginalFileName';
+export const FIELD_UPDATED_FILE_NAME = 'CoreField.UpdatedFileName';
 export const LIBRARY_NAME = 'Library';
 export const MESSAGE_NEW_LINE = '\n';
 export const ORIGINAL_VIEW_SIZE = 'CoreField.OriginalPreview';