[LIBSEARCH-958] Implement new availability filters in the UI

src/config.js

@@ -65,19 +65,11 @@ const config = {
       filters: [
         {
           conditions: {
-            checked: true
-          },
-          groupBy: 'Access Options',
-          type: 'checkbox',
-          uid: 'available_online'
-        },
-        {
-          conditions: {
-            default: 'checked',
-            unchecked: false
+            checked: true,
+            unchecked: null
           },
           groupBy: 'Access Options',
-          name: 'Remove Search Only HathiTrust Materials',
+          name: 'View HathiTrust search-only materials',
           type: 'checkbox',
           uid: 'search_only'
         },

src/modules/filters/components/CheckboxFilters/index.js

@@ -1,42 +1,42 @@
+import './styles.css';
 import { Anchor, Icon } from '../../../reusable';
 import { getURLWithFiltersRemoved, newSearch } from '../../utilities';
 import React from 'react';
 import { useSelector } from 'react-redux';
 
-const CheckBoxFiltersContainer = () => {
+const CheckBoxFilters = () => {
   const { active: activeFilters, groups, order } = useSelector((state) => {
     return state.filters;
   });
-  const activeDatastore = useSelector((state) => {
-    return state.datastores.active;
+  const { active: activeDatastore } = useSelector((state) => {
+    return state.datastores;
   });
-  const checkboxes = order.reduce((acc, id) => {
-    if (groups[id]?.type === 'checkbox') {
-      return acc.concat(groups[id]);
-    }
-    return acc;
-  }, []);
+  const checkboxes = order
+    .filter((id) => {
+      return groups[id]?.type === 'checkbox';
+    })
+    .map((id) => {
+      return groups[id];
+    });
 
   if (!checkboxes.length) {
     return null;
   }
 
   return (
-    <ul className='list__unstyled padding-y__s active-filters'>
-      {checkboxes.map((checkbox) => {
-        const { uid } = checkbox;
-        const { metadata, preSelected } = groups[uid];
-        const isActive = activeFilters[activeDatastore]?.[uid]?.[0];
-        const isChecked = isActive ? isActive === 'true' : preSelected;
+    <ul className='list__unstyled active-filters'>
+      {checkboxes.map(({ uid, metadata, preSelected }, index) => {
+        const [isActive] = activeFilters[activeDatastore]?.[uid] || [];
+        const isChecked = isActive === 'true' || preSelected;
         return (
-          <li key={uid}>
+          <li key={uid} className={`margin-top__${index === 0 ? 'none' : '2xs'}`}>
             <Anchor
               to={
                 preSelected === isChecked
                   ? `${document.location.pathname}?${newSearch({ filter: { [uid]: String(!isChecked) }, page: 1 })}`
                   : getURLWithFiltersRemoved({ group: uid, value: isActive })
               }
-              className={`padding-y__2xs padding-x__m flex underline__hover ${isChecked ? 'active-checkbox' : 'inactive-checkbox'}`}
+              className={`flex underline__hover ${isChecked ? '' : 'in'}active-checkbox`}
             >
               <Icon icon={`checkbox_${isChecked ? 'checked' : 'unchecked'}`} size='22' />
               {metadata.name}
@@ -48,4 +48,4 @@ const CheckBoxFiltersContainer = () => {
   );
 };
 
-export default CheckBoxFiltersContainer;
+export default CheckBoxFilters;

src/modules/filters/components/CheckboxFilters/styles.css

@@ -0,0 +1,3 @@
+ul.active-filters {
+  padding: var(--search-spacing-s) var(--search-spacing-m);
+}

src/modules/resource-acccess/components/Holders/index.js

@@ -10,21 +10,21 @@ const Holders = ({ context, record }) => {
     return state.filters.active;
   });
   /*
-   * - Check if the record is under 'Catalog', and the 'Remove search-only HathiTrust materials' is checked
+   * - Check if the record is under 'Catalog', and the 'View search-only HathiTrust materials' is unchecked
    * - If true, remove all 'Search only (no full text)' holdings
    */
   if (
     record.datastore === 'mirlyn'
-    && (
-      !mirlyn
-      || (Object.keys(mirlyn).includes('search_only') && mirlyn.search_only.includes('true'))
-    )
+    && (!mirlyn || !mirlyn.search_only || mirlyn.search_only.includes('false'))
   ) {
     record.resourceAccess.forEach((resource) => {
       resource.rows = resource.rows.filter((row) => {
         return row[0].text !== 'Search only (no full text)';
       });
     });
+    record.resourceAccess = record.resourceAccess.filter((resource) => {
+      return resource.rows.length > 0;
+    });
   }
   return (
     <>