Content Search Modal: Filters [FC-0040]

package.json

@@ -43,7 +43,7 @@
     "@edx/brand": "npm:@openedx/brand-openedx@^1.2.2",
     "@edx/frontend-component-ai-translations": "^2.0.0",
     "@edx/frontend-component-footer": "^13.0.2",
-    "@edx/frontend-component-header": "^5.0.2",
+    "@edx/frontend-component-header": "^5.1.0",
     "@edx/frontend-enterprise-hotjar": "^2.0.0",
     "@edx/frontend-lib-content-components": "^2.1.4",
     "@edx/frontend-platform": "7.0.1",
@@ -53,6 +53,7 @@
     "@fortawesome/free-regular-svg-icons": "5.15.4",
     "@fortawesome/free-solid-svg-icons": "5.15.4",
     "@fortawesome/react-fontawesome": "0.2.0",
+    "@meilisearch/instant-meilisearch": "^0.17.0",
     "@openedx-plugins/course-app-calculator": "file:plugins/course-apps/calculator",
     "@openedx-plugins/course-app-edxnotes": "file:plugins/course-apps/edxnotes",
     "@openedx-plugins/course-app-learning_assistant": "file:plugins/course-apps/learning_assistant",
@@ -80,6 +81,7 @@
     "react-datepicker": "^4.13.0",
     "react-dom": "17.0.2",
     "react-helmet": "^6.1.0",
+    "react-instantsearch": "7.7.0",
     "react-redux": "7.2.9",
     "react-responsive": "9.0.2",
     "react-router": "6.16.0",
@@ -107,6 +109,7 @@
     "axios": "^0.27.2",
     "axios-mock-adapter": "1.22.0",
     "eslint-import-resolver-webpack": "^0.13.8",
+    "fetch-mock-jest": "^1.5.1",
     "glob": "7.2.3",
     "husky": "7.0.4",
     "jest-canvas-mock": "^2.5.2",

src/content-tags-drawer/ContentTagsDropDownSelector.jsx

@@ -283,7 +283,7 @@ const ContentTagsDropDownSelector = ({
                     <Icon
                       src={isOpen(tagData.value) ? ArrowDropUp : ArrowDropDown}
                       onClick={() => clickAndEnterHandler(tagData.value)}
-                      tabIndex="-1"
+                      tabIndex={-1}
                     />
                   </div>
                 )}

src/header/Header.jsx

@@ -1,9 +1,12 @@
+// @ts-check
 import React from 'react';
 import PropTypes from 'prop-types';
 import { getConfig } from '@edx/frontend-platform';
-import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
-
+import { useIntl } from '@edx/frontend-platform/i18n';
 import { StudioHeader } from '@edx/frontend-component-header';
+import { useToggle } from '@openedx/paragon';
+
+import SearchModal from '../search-modal/SearchModal';
 import { getContentMenuItems, getSettingMenuItems, getToolsMenuItems } from './utils';
 import messages from './messages';
 
@@ -13,10 +16,13 @@
   courseNumber,
   courseTitle,
   isHiddenMainMenu,
-  // injected
-  intl,
 }) => {
+  const intl = useIntl();
+
+  const [isShowSearchModalOpen, openSearchModal, closeSearchModal] = useToggle(false);
+
   const studioBaseUrl = getConfig().STUDIO_BASE_URL;
+  const meiliSearchEnabled = [true, 'true'].includes(getConfig().MEILISEARCH_ENABLED);
   const mainMenuDropdowns = [
     {
       id: `${intl.formatMessage(messages['header.links.content'])}-dropdown-menu`,
@@ -35,17 +41,26 @@
     },
   ];
   const outlineLink = `${studioBaseUrl}/course/${courseId}`;
+
   return (
-    <StudioHeader
-      {...{
-        org: courseOrg,
-        number: courseNumber,
-        title: courseTitle,
-        isHiddenMainMenu,
-        mainMenuDropdowns,
-        outlineLink,
-      }}
-    />
+    <>
+      <StudioHeader
+        org={courseOrg}
+        number={courseNumber}
+        title={courseTitle}
+        isHiddenMainMenu={isHiddenMainMenu}
+        mainMenuDropdowns={mainMenuDropdowns}
+        outlineLink={outlineLink}
+        searchButtonAction={meiliSearchEnabled && openSearchModal}
+      />
+      { meiliSearchEnabled && (
+        <SearchModal
+          isOpen={isShowSearchModalOpen}
+          courseId={courseId}
+          onClose={closeSearchModal}
+        />
+      )}
+    </>
   );
 };
 
@@ -55,8 +70,6 @@
   courseOrg: PropTypes.string,
   courseTitle: PropTypes.string,
   isHiddenMainMenu: PropTypes.bool,
-  // injected
-  intl: intlShape.isRequired,
 };
 
 Header.defaultProps = {
@@ -67,4 +80,4 @@
   isHiddenMainMenu: false,
 };
 
-export default injectIntl(Header);
+export default Header;

src/header/messages.js

@@ -156,6 +156,11 @@ const messages = defineMessages({
     defaultMessage: 'Back to course outline in Studio',
     description: 'The aria label for the link back to the Studio Course Outline',
   },
+  courseSearchTitle: {
+    id: 'courseSearch.title',
+    defaultMessage: 'Search Course(s)',
+    description: 'Title for the course search dialog',
+  },
 });
 
 export default messages;

src/hooks.js

@@ -32,3 +32,19 @@
     };
   }, [dependency]);
 };
+
+export const useKeyHandler = ({ keyName, handler, dependencies = [] }) => {
+  useEffect(() => {
+    const checkKey = (event) => {
+      if (event.key === keyName) {
+        handler();
+      }
+    };
+
+    window.addEventListener('keydown', checkKey);
+
+    return () => {
+      window.removeEventListener('keydown', checkKey);
+    };
+  }, dependencies);
+};

src/index.scss

@@ -25,3 +25,4 @@
 @import "course-checklist/CourseChecklist";
 @import "content-tags-drawer/ContentTagsDropDownSelector";
 @import "content-tags-drawer/ContentTagsCollapsible";
+@import "search-modal/SearchModal";

src/search-modal/BlockTypeLabel.jsx

@@ -0,0 +1,25 @@
+/* eslint-disable react/prop-types */
+// @ts-check
+import React from 'react';
+import { FormattedMessage } from '@edx/frontend-platform/i18n';
+import messages from './messages';
+
+/**
+ * Displays a friendly, localized text name for the given XBlock/component type
+ * e.g. `vertical` becomes `"Unit"`
+ * @type {React.FC<{type: string}>}
+ */
+const BlockTypeLabel = ({ type }) => {
+  // TODO: Load the localized list of Component names from Studio REST API?
+  const msg = messages[`blockType.${type}`];
+
+  if (msg) {
+    return <FormattedMessage {...msg} />;
+  }
+  // Replace underscores and hypens with spaces, then let the browser capitalize this
+  // in a locale-aware way to get a reasonable display value.
+  // e.g. 'drag-and-drop-v2' -> "Drag And Drop V2"
+  return <span style={{ textTransform: 'capitalize' }}>XXX {type.replace(/[_-]/g, ' ')}</span>;
+};
+
+export default BlockTypeLabel;

src/search-modal/ClearFiltersButton.jsx

@@ -0,0 +1,25 @@
+/* eslint-disable react/prop-types */
+// @ts-check
+import React from 'react';
+import { useClearRefinements } from 'react-instantsearch';
+import { FormattedMessage } from '@edx/frontend-platform/i18n';
+import { Button } from '@openedx/paragon';
+import messages from './messages';
+
+/**
+ * A button that appears when at least one filter is active, and will clear the filters when clicked.
+ * @type {React.FC<Record<never, never>>}
+ */
+const ClearFiltersButton = () => {
+  const { refine, canRefine } = useClearRefinements();
+  if (canRefine) {
+    return (
+      <Button variant="link" size="sm" onClick={refine}>
+        <FormattedMessage {...messages.clearFilters} />
+      </Button>
+    );
+  }
+  return null;
+};
+
+export default ClearFiltersButton;

src/search-modal/EmptyStates.jsx

@@ -0,0 +1,30 @@
+/* eslint-disable react/prop-types */
+// @ts-check
+import React from 'react';
+import { useStats, useClearRefinements } from 'react-instantsearch';
+
+/**
+ * If the user hasn't put any keywords/filters yet, display an "empty state".
+ * Likewise, if the results are empty (0 results), display a special message.
+ * Otherwise, display the results, which are assumed to be the children prop.
+ * @type {React.FC<{children: React.ReactElement}>}
+ */
+const EmptyStates = ({ children }) => {
+  const { nbHits, query } = useStats();
+  const { canRefine: hasFiltersApplied } = useClearRefinements();
+  const hasQuery = !!query;
+
+  if (!hasQuery && !hasFiltersApplied) {
+    // We haven't started the search yet. Display the "start your search" empty state
+    // Note this isn't localized because it's going to be replaced in a fast-follow PR.
+    return <p className="text-muted text-center mt-6">Enter a keyword or select a filter to begin searching.</p>;
+  }
+  if (nbHits === 0) {
+    // Note this isn't localized because it's going to be replaced in a fast-follow PR.
+    return <p className="text-muted text-center mt-6">No results found. Change your search and try again.</p>;
+  }
+
+  return children;
+};
+
+export default EmptyStates;

src/search-modal/FilterByBlockType.jsx

@@ -0,0 +1,90 @@
+/* eslint-disable react/prop-types */
+// @ts-check
+import React from 'react';
+import { FormattedMessage } from '@edx/frontend-platform/i18n';
+import {
+  Button,
+  Badge,
+  Form,
+  Menu,
+  MenuItem,
+} from '@openedx/paragon';
+import {
+  useCurrentRefinements,
+  useRefinementList,
+} from 'react-instantsearch';
+import SearchFilterWidget from './SearchFilterWidget';
+import messages from './messages';
+import BlockTypeLabel from './BlockTypeLabel';
+
+/**
+ * A button with a dropdown that allows filtering the current search by component type (XBlock type)
+ * e.g. Limit results to "Text" (html) and "Problem" (problem) components.
+ * The button displays the first type selected, and a count of how many other types are selected, if more than one.
+ * @type {React.FC<Record<never, never>>}
+ */
+const FilterByBlockType = () => {
+  const {
+    items,
+    refine,
+    canToggleShowMore,
+    isShowingMore,
+    toggleShowMore,
+  } = useRefinementList({ attribute: 'block_type', sortBy: ['count:desc', 'name'] });
+
+  // Get the list of applied 'items' (selected block types to filter) in the original order that the user clicked them.
+  // The first choice will be shown on the button, and we don't want it to change as the user selects more options.
+  // (But for the dropdown menu, we always want them sorted by 'count:desc' and 'name'; not in order of selection.)
+  const refinementsData = useCurrentRefinements({ includedAttributes: ['block_type'] });
+  const appliedItems = refinementsData.items[0]?.refinements ?? [];
+  // If we didn't need to preserve the order the user clicked on, the above two lines could be simplified to:
+  //   const appliedItems = items.filter(item => item.isRefined);
+
+  const handleCheckboxChange = React.useCallback((e) => {
+    refine(e.target.value);
+  }, [refine]);
+
+  return (
+    <SearchFilterWidget
+      appliedFilters={appliedItems.map(item => ({ label: <BlockTypeLabel type={String(item.value)} /> }))}
+      label={<FormattedMessage {...messages.blockTypeFilter} />}
+    >
+      <Form.Group>
+        <Form.CheckboxSet
+          name="block-type-filter"
+          defaultValue={appliedItems.map(item => item.value)}
+        >
+          <Menu style={{ boxShadow: 'none' }}>
+            {
+              items.map((item) => (
+                <MenuItem
+                  key={item.value}
+                  as={Form.Checkbox}
+                  value={item.value}
+                  checked={item.isRefined}
+                  onChange={handleCheckboxChange}
+                >
+                  <BlockTypeLabel type={item.value} />{' '}
+                  <Badge variant="light" pill>{item.count}</Badge>
+                </MenuItem>
+              ))
+            }
+            {
+              // Show a message if there are no options at all to avoid the impression that the dropdown isn't working
+              items.length === 0 ? (
+                <MenuItem disabled><FormattedMessage {...messages['blockTypeFilter.empty']} /></MenuItem>
+              ) : null
+            }
+          </Menu>
+        </Form.CheckboxSet>
+      </Form.Group>
+      {
+        canToggleShowMore && !isShowingMore
+          ? <Button onClick={toggleShowMore}><FormattedMessage {...messages.showMore} /></Button>
+          : null
+      }
+    </SearchFilterWidget>
+  );
+};
+
+export default FilterByBlockType;