feat: search filters refinement

src/search-modal/FilterByBlockType.jsx

@@ -25,7 +25,39 @@ const FilterByBlockType = () => {
     blockTypesFilter,
     setBlockTypesFilter,
   } = useSearchContext();
-  // TODO: sort blockTypes first by count, then by name
+
+  // Sort blocktypes in order of hierarchy followed by alphabetically for components
+  const sortedBlockTypeKeys = Object.keys(blockTypes).sort((a, b) => {
+    const order = {
+      chapter: 1,
+      sequential: 2,
+      vertical: 3,
+    };
+
+    // If both blocktypes are in the order dictionary, sort them based on the order defined
+    if (order[a] && order[b]) {
+      return order[a] - order[b];
+    }
+
+    // If only blocktype 'a' is in the order dictionary, place it before 'b'
+    if (order[a]) {
+      return -1;
+    }
+
+    // If only blocktype 'b' is in the order dictionary, place it before 'a'
+    if (order[b]) {
+      return 1;
+    }
+
+    // If neither blocktype is in the order dictionary, sort alphabetically
+    return a.localeCompare(b);
+  });
+
+  // Rebuild sorted blocktypes dictionary
+  const sortedBlockTypes = {};
+  sortedBlockTypeKeys.forEach(key => {
+    sortedBlockTypes[key] = blockTypes[key];
+  });
 
   const handleCheckboxChange = React.useCallback((e) => {
     setBlockTypesFilter(currentFilters => {
@@ -46,9 +78,9 @@ const FilterByBlockType = () => {
           name="block-type-filter"
           defaultValue={blockTypesFilter}
         >
-          <Menu style={{ boxShadow: 'none' }}>
+          <Menu className="block-type-refinement-menu" style={{ boxShadow: 'none' }}>
             {
-              Object.entries(blockTypes).map(([blockType, count]) => (
+              Object.entries(sortedBlockTypes).map(([blockType, count]) => (
                 <MenuItem
                   key={blockType}
                   as={Form.Checkbox}
@@ -63,7 +95,7 @@ const FilterByBlockType = () => {
             }
             {
               // Show a message if there are no options at all to avoid the impression that the dropdown isn't working
-              blockTypes.length === 0 ? (
+              sortedBlockTypes.length === 0 ? (
                 <MenuItem disabled><FormattedMessage {...messages['blockTypeFilter.empty']} /></MenuItem>
               ) : null
             }

src/search-modal/SearchModal.scss

@@ -47,6 +47,14 @@
     }
   }
 
+  // Options for the "filter by block type" menu
+  .pgn__menu.block-type-refinement-menu {
+    .pgn__menu-item {
+      // Make the "filter by block type" menu expand to fit longer block types names
+      width: 100%;
+    }
+  }
+
   .pgn__menu-item {
     // Fix a bug in Paragon menu dropdowns: the checkbox currently shrinks if the text is too long.
     // https://github.com/openedx/paragon/pull/3019

src/search-modal/__mocks__/search-result.json

@@ -280,6 +280,7 @@
       "estimatedTotalHits": 0,
       "facetDistribution": {
         "block_type": {
+          "chapter": 1,
           "html": 2,
           "problem": 16,
           "vertical": 2,