Rpenido/bkp/fal 3764 before squash

src/index.scss

@@ -26,7 +26,8 @@
 @import "textbooks/Textbooks";
 @import "content-tags-drawer/ContentTagsDropDownSelector";
 @import "content-tags-drawer/ContentTagsCollapsible";
-@import "search-modal/SearchModal";
+@import "search-modal";
+@import "search-manager";
 @import "certificates/scss/Certificates";
 @import "group-configurations/GroupConfigurations";
 @import "library-authoring";

src/library-authoring/LibraryAuthoringPage.test.tsx

@@ -12,9 +12,8 @@ import {
   screen,
 } from '@testing-library/react';
 import fetchMock from 'fetch-mock-jest';
-
 import initializeStore from '../store';
-import { getContentSearchConfigUrl } from '../search-modal/data/api';
+import { getContentSearchConfigUrl } from '../search-manager/data/api';
 import mockResult from '../search-modal/__mocks__/search-result.json';
 import mockEmptyResult from '../search-modal/__mocks__/empty-search-result.json';
 import { getContentLibraryApiUrl, type ContentLibrary } from './data/api';
@@ -51,6 +50,21 @@ const returnEmptyResult = (_url, req) => {
   return mockEmptyResult;
 };
 
+const returnLowNumberResults = (_url, req) => {
+  const requestData = JSON.parse(req.body?.toString() ?? '');
+  const query = requestData?.queries[0]?.q ?? '';
+  // We have to replace the query (search keywords) in the mock results with the actual query,
+  // because otherwise we may have an inconsistent state that causes more queries and unexpected results.
+  mockResult.results[0].query = query;
+  // Limit number of results to just 2
+  mockResult.results[0].hits = mockResult.results[0]?.hits.slice(0, 2);
+  mockResult.results[0].estimatedTotalHits = 2;
+  // And fake the required '_formatted' fields; it contains the highlighting <mark>...</mark> around matched words
+  // eslint-disable-next-line no-underscore-dangle, no-param-reassign
+  mockResult.results[0]?.hits.forEach((hit) => { hit._formatted = { ...hit }; });
+  return mockResult;
+};
+
 const libraryData: ContentLibrary = {
   id: 'lib:org1:lib1',
   type: 'complex',
@@ -158,8 +172,9 @@ describe('<LibraryAuthoringPage />', () => {
       getByRole, getByText, queryByText, findByText,
     } = render(<RootWrapper />);
 
-    // Ensure the search endpoint is called
-    // One called for LibraryComponents and another called for components count
+    // Ensure the search endpoint is called:
+    // Call 1: To fetch searchable/filterable/sortable library data
+    // Call 2: To fetch the recently modified components only
     await waitFor(() => { expect(fetchMock).toHaveFetchedTimes(2, searchEndpoint, 'post'); });
 
     expect(getByText('Content library')).toBeInTheDocument();
@@ -204,8 +219,10 @@ describe('<LibraryAuthoringPage />', () => {
     expect(await findByText('Content library')).toBeInTheDocument();
     expect(await findByText(libraryData.title)).toBeInTheDocument();
 
-    // Ensure the search endpoint is called
-    await waitFor(() => { expect(fetchMock).toHaveFetchedTimes(1, searchEndpoint, 'post'); });
+    // Ensure the search endpoint is called:
+    // Call 1: To fetch searchable/filterable/sortable library data
+    // Call 2: To fetch the recently modified components only
+    await waitFor(() => { expect(fetchMock).toHaveFetchedTimes(2, searchEndpoint, 'post'); });
 
     expect(getByText('You have not added any content to this library yet.')).toBeInTheDocument();
   });
@@ -230,13 +247,16 @@ describe('<LibraryAuthoringPage />', () => {
     expect(await findByText('Content library')).toBeInTheDocument();
     expect(await findByText(libraryData.title)).toBeInTheDocument();
 
-    // Ensure the search endpoint is called
-    await waitFor(() => { expect(fetchMock).toHaveFetchedTimes(1, searchEndpoint, 'post'); });
+    // Ensure the search endpoint is called:
+    // Call 1: To fetch searchable/filterable/sortable library data
+    // Call 2: To fetch the recently modified components only
+    await waitFor(() => { expect(fetchMock).toHaveFetchedTimes(2, searchEndpoint, 'post'); });
 
     fireEvent.change(getByRole('searchbox'), { target: { value: 'noresults' } });
 
-    // Ensure the search endpoint is called again
-    await waitFor(() => { expect(fetchMock).toHaveFetchedTimes(2, searchEndpoint, 'post'); });
+    // Ensure the search endpoint is called again, only once more since the recently modified call
+    // should not be impacted by the search
+    await waitFor(() => { expect(fetchMock).toHaveFetchedTimes(3, searchEndpoint, 'post'); });
 
     expect(getByText('No matching components found in this library.')).toBeInTheDocument();
 
@@ -268,4 +288,111 @@ describe('<LibraryAuthoringPage />', () => {
 
     expect(screen.queryByText(/add content/i)).not.toBeInTheDocument();
   });
+
+  it('show the "View All" button when viewing library with many components', async () => {
+    mockUseParams.mockReturnValue({ libraryId: libraryData.id });
+    axiosMock.onGet(getContentLibraryApiUrl(libraryData.id)).reply(200, libraryData);
+
+    const {
+      getByRole, getByText, queryByText, getAllByText,
+    } = render(<RootWrapper />);
+
+    // Ensure the search endpoint is called:
+    // Call 1: To fetch searchable/filterable/sortable library data
+    // Call 2: To fetch the recently modified components only
+    await waitFor(() => { expect(fetchMock).toHaveFetchedTimes(2, searchEndpoint, 'post'); });
+
+    expect(getByText('Content library')).toBeInTheDocument();
+    expect(getByText(libraryData.title)).toBeInTheDocument();
+
+    expect(queryByText('You have not added any content to this library yet.')).not.toBeInTheDocument();
+
+    expect(getByText('Recently Modified')).toBeInTheDocument();
+    expect(getByText('Collections (0)')).toBeInTheDocument();
+    expect(getByText('Components (6)')).toBeInTheDocument();
+    expect(getAllByText('Test HTML Block')[0]).toBeInTheDocument();
+
+    // There should only be one "View All" button, since the Components count
+    // are above the preview limit (4)
+    expect(getByText('View All')).toBeInTheDocument();
+
+    // Clicking on "View All" button should navigate to the Components tab
+    fireEvent.click(getByText('View All'));
+    expect(queryByText('Recently Modified')).not.toBeInTheDocument();
+    expect(queryByText('Collections (0)')).not.toBeInTheDocument();
+    expect(queryByText('Components (6)')).not.toBeInTheDocument();
+    expect(getAllByText('Test HTML Block')[0]).toBeInTheDocument();
+
+    // Go back to Home tab
+    // This step is necessary to avoid the url change leak to other tests
+    fireEvent.click(getByRole('tab', { name: 'Home' }));
+    expect(getByText('Recently Modified')).toBeInTheDocument();
+    expect(getByText('Collections (0)')).toBeInTheDocument();
+    expect(getByText('Components (6)')).toBeInTheDocument();
+  });
+
+  it('should not show the "View All" button when viewing library with low number of components', async () => {
+    mockUseParams.mockReturnValue({ libraryId: libraryData.id });
+    axiosMock.onGet(getContentLibraryApiUrl(libraryData.id)).reply(200, libraryData);
+    fetchMock.post(searchEndpoint, returnLowNumberResults, { overwriteRoutes: true });
+
+    const {
+      getByText, queryByText, getAllByText,
+    } = render(<RootWrapper />);
+
+    // Ensure the search endpoint is called:
+    // Call 1: To fetch searchable/filterable/sortable library data
+    // Call 2: To fetch the recently modified components only
+    await waitFor(() => { expect(fetchMock).toHaveFetchedTimes(2, searchEndpoint, 'post'); });
+
+    expect(getByText('Content library')).toBeInTheDocument();
+    expect(getByText(libraryData.title)).toBeInTheDocument();
+
+    expect(queryByText('You have not added any content to this library yet.')).not.toBeInTheDocument();
+
+    expect(getByText('Recently Modified')).toBeInTheDocument();
+    expect(getByText('Collections (0)')).toBeInTheDocument();
+    expect(getByText('Components (2)')).toBeInTheDocument();
+    expect(getAllByText('Test HTML Block')[0]).toBeInTheDocument();
+
+    // There should not be any "View All" button on page since Components count
+    // is less than the preview limit (4)
+    expect(queryByText('View All')).not.toBeInTheDocument();
+  });
+
+  it('sort library components', async () => {
+    mockUseParams.mockReturnValue({ libraryId: libraryData.id });
+    axiosMock.onGet(getContentLibraryApiUrl(libraryData.id)).reply(200, libraryData);
+    fetchMock.post(searchEndpoint, returnEmptyResult, { overwriteRoutes: true });
+
+    const { findByText, getByText, getByTitle } = render(<RootWrapper />);
+
+    // Default sorts by relevance
+    expect(await findByText('Most Relevant')).toBeInTheDocument();
+
+    const testSortOption = (async (optionText, sortBy) => {
+      fireEvent.click(getByTitle('Sort search results'));
+      fireEvent.click(getByText(optionText));
+      const bodyText = sortBy ? `"sort":["${sortBy}"]` : '"sort":[]';
+      const searchText = sortBy ? `?sort=${encodeURIComponent(sortBy)}` : '';
+      await waitFor(() => {
+        expect(fetchMock).toHaveBeenLastCalledWith(searchEndpoint, {
+          body: expect.stringContaining(bodyText),
+          method: 'POST',
+          headers: expect.anything(),
+        });
+      });
+      expect(window.location.search).toEqual(searchText);
+    });
+
+    await testSortOption('Title, A-Z', 'display_name:asc');
+    await testSortOption('Title, Z-A', 'display_name:desc');
+    await testSortOption('Newest', 'created:desc');
+    await testSortOption('Oldest', 'created:asc');
+    await testSortOption('Recently Published', 'last_published:desc');
+    await testSortOption('Recently Modified', 'modified:desc');
+
+    // Selecting the default sort option clears the url search param
+    await testSortOption('Most Relevant', '');
+  });
 });

src/library-authoring/LibraryAuthoringPage.tsx

@@ -3,31 +3,38 @@
 import { useIntl } from '@edx/frontend-platform/i18n';
 import {
   Button,
+  Col,
   Container,
   Icon,
   IconButton,
-  SearchField,
+  Row,
   Tab,
   Tabs,
-  Row,
-  Col,
 } from '@openedx/paragon';
 import { Add, InfoOutline } from '@openedx/paragon/icons';
 import {
-  Routes, Route, useLocation, useNavigate, useParams,
+  Routes, Route, useLocation, useNavigate, useParams, useSearchParams,
 } from 'react-router-dom';
 
 import Loading from '../generic/Loading';
 import SubHeader from '../generic/sub-header/SubHeader';
 import Header from '../header';
 import NotFoundAlert from '../generic/NotFoundAlert';
+import {
+  ClearFiltersButton,
+  FilterByBlockType,
+  FilterByTags,
+  SearchContextProvider,
+  SearchKeywordsField,
+  SearchSortWidget,
+} from '../search-manager';
 import LibraryComponents from './components/LibraryComponents';
 import LibraryCollections from './LibraryCollections';
 import LibraryHome from './LibraryHome';
 import { useContentLibrary } from './data/apiHooks';
-import messages from './messages';
 import { LibrarySidebar } from './library-sidebar';
 import { LibraryContext } from './common/context';
+import messages from './messages';
 
 enum TabList {
   home = '',
@@ -54,15 +61,14 @@
   const intl = useIntl();
   const location = useLocation();
   const navigate = useNavigate();
-  const [searchKeywords, setSearchKeywords] = React.useState('');
 
   const { libraryId } = useParams();
-
   const { data: libraryData, isLoading } = useContentLibrary(libraryId);
 
   const currentPath = location.pathname.split('/').pop();
   const activeKey = (currentPath && currentPath in TabList) ? TabList[currentPath] : TabList.home;
   const { sidebarBodyComponent, openAddContentSidebar } = useContext(LibraryContext);
+  const [searchParams] = useSearchParams();
 
   if (isLoading) {
     return <Loading />;
@@ -73,7 +79,10 @@
   }
 
   const handleTabChange = (key: string) => {
-    navigate(key);
+    navigate({
+      pathname: key,
+      search: searchParams.toString(),
+    });
   };
 
   return (
@@ -87,57 +96,62 @@
             contextId={libraryId}
             isLibrary
           />
-          <Container size="xl" className="p-4 mt-3">
-            <SubHeader
-              title={<SubHeaderTitle title={libraryData.title} />}
-              subtitle={intl.formatMessage(messages.headingSubtitle)}
-              headerActions={[
-                <Button
-                  iconBefore={Add}
-                  variant="primary rounded-0"
-                  onClick={() => openAddContentSidebar()}
-                  disabled={!libraryData.canEditLibrary}
-                >
-                  {intl.formatMessage(messages.newContentButton)}
-                </Button>,
-              ]}
-            />
-            <SearchField
-              value={searchKeywords}
-              placeholder={intl.formatMessage(messages.searchPlaceholder)}
-              onChange={(value: string) => setSearchKeywords(value)}
-              onSubmit={() => {}}
-              className="w-50"
-            />
-            <Tabs
-              variant="tabs"
-              activeKey={activeKey}
-              onSelect={handleTabChange}
-              className="my-3"
-            >
-              <Tab eventKey={TabList.home} title={intl.formatMessage(messages.homeTab)} />
-              <Tab eventKey={TabList.components} title={intl.formatMessage(messages.componentsTab)} />
-              <Tab eventKey={TabList.collections} title={intl.formatMessage(messages.collectionsTab)} />
-            </Tabs>
-            <Routes>
-              <Route
-                path={TabList.home}
-                element={<LibraryHome libraryId={libraryId} filter={{ searchKeywords }} />}
-              />
-              <Route
-                path={TabList.components}
-                element={<LibraryComponents libraryId={libraryId} filter={{ searchKeywords }} variant="full" />}
-              />
-              <Route
-                path={TabList.collections}
-                element={<LibraryCollections />}
-              />
-              <Route
-                path="*"
-                element={<NotFoundAlert />}
+          <SearchContextProvider
+            extraFilter={`context_key = "${libraryId}"`}
+          >
+            <Container size="xl" className="p-4 mt-3">
+              <SubHeader
+                title={<SubHeaderTitle title={libraryData.title} />}
+                subtitle={intl.formatMessage(messages.headingSubtitle)}
+                headerActions={[
+                  <Button
+                    iconBefore={Add}
+                    variant="primary rounded-0"
+                    onClick={openAddContentSidebar}
+                    disabled={!libraryData.canEditLibrary}
+                  >
+                    {intl.formatMessage(messages.newContentButton)}
+                  </Button>,
+                ]}
               />
-            </Routes>
-          </Container>
+              <SearchKeywordsField className="w-50" />
+              <div className="d-flex mt-3 align-items-center">
+                <FilterByTags />
+                <FilterByBlockType />
+                <ClearFiltersButton />
+                <div className="flex-grow-1" />
+                <SearchSortWidget />
+              </div>
+              <Tabs
+                variant="tabs"
+                activeKey={activeKey}
+                onSelect={handleTabChange}
+                className="my-3"
+              >
+                <Tab eventKey={TabList.home} title={intl.formatMessage(messages.homeTab)} />
+                <Tab eventKey={TabList.components} title={intl.formatMessage(messages.componentsTab)} />
+                <Tab eventKey={TabList.collections} title={intl.formatMessage(messages.collectionsTab)} />
+              </Tabs>
+              <Routes>
+                <Route
+                  path={TabList.home}
+                  element={<LibraryHome libraryId={libraryId} />}
+                />
+                <Route
+                  path={TabList.components}
+                  element={<LibraryComponents libraryId={libraryId} variant="full" />}
+                />
+                <Route
+                  path={TabList.collections}
+                  element={<LibraryCollections />}
+                />
+                <Route
+                  path="*"
+                  element={<NotFoundAlert />}
+                />
+              </Routes>
+            </Container>
+          </SearchContextProvider>
           <StudioFooter />
         </Col>
         { sidebarBodyComponent !== null && (