feat: Content Search Modal: Filters [FC-0040] (openedx#918)

Implementation of openedx/modular-learning#201

Implements a modal for searching course content with filters for searching in current or all courses, filtering by content type, content tags and text.

package.json

@@ -53,7 +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.16.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",
@@ -110,6 +110,7 @@
     "axios": "^0.28.0",
     "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

@@ -22,7 +22,7 @@ const Header = ({
   const [isShowSearchModalOpen, openSearchModal, closeSearchModal] = useToggle(false);
 
   const studioBaseUrl = getConfig().STUDIO_BASE_URL;
-  const meiliSearchEnabled = getConfig().MEILISEARCH_ENABLED || null;
+  const meiliSearchEnabled = [true, 'true'].includes(getConfig().MEILISEARCH_ENABLED);
   const mainMenuDropdowns = [
     {
       id: `${intl.formatMessage(messages['header.links.content'])}-dropdown-menu`,

src/index.scss

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

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' }}>{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;