UIREQMED-3: Add Search field for Mediated requests activity page

Author: Dmitriy-Litvinenko

CHANGELOG.md

@@ -5,6 +5,8 @@
 * Add landing page actions: Confirm item arrival, Mediated requests activities and Send item in transit. Refs UIREQMED-2.
 * Hide permission that should not be visible. Refs UIREQMED-20.
 * Add caret to `react` peer dependency. Refs UIREQMED-23.
+* Add Search field for Mediated requests activity page. Refs UIREQMED-3.
+* Add Filters for Mediated requests actions page. Refs UIREQMED-4.
 
 ## 1.0.0
 * New app created with stripes-cli. Updated module after created with stripes-cli. Refs UIREQMED-1.

package.json

@@ -83,6 +83,10 @@
         "displayName": "Mediated requests: View",
         "subPermissions": [
           "module.requests-mediated.enabled",
+          "settings.circulation.enabled",
+          "mod-settings.global.read.circulation",
+          "mod-settings.entries.collection.get",
+          "mod-settings.entries.item.get",
           "settings.requests-mediated.enabled"
         ],
         "visible": true

src/components/MediatedRequestsActivities/MediatedRequestsActivities.js

@@ -1,13 +1,22 @@
+import { useState } from 'react';
+
 import { FormattedMessage } from 'react-intl';
 
 import { AppIcon } from '@folio/stripes/core';
 
 import {
   Pane,
+  PaneMenu,
   Paneset,
 } from '@folio/stripes/components';
+import {
+  SearchAndSortQuery,
+  ExpandFilterPaneButton,
+  CollapseFilterPaneButton,
+} from '@folio/stripes/smart-components';
 
 import NavigationMenu from '../NavigationMenu';
+import MediatedRequestsFilters from './components/MediatedRequestsFilters';
 
 import {
   APP_ICON_NAME,
@@ -16,21 +25,60 @@ import {
 } from '../../constants';
 
 const MediatedRequestsActivities = () => {
+  const [filterPaneIsVisible, setFilterPaneIsVisible] = useState(true);
+
+  const toggleFilterPane = () => {
+    setFilterPaneIsVisible(!filterPaneIsVisible);
+  };
+
+  const renderResultsFirstMenu = () => {
+    if (filterPaneIsVisible) {
+      return null;
+    }
+
+    return (
+      <PaneMenu>
+        <ExpandFilterPaneButton
+          onClick={toggleFilterPane}
+        />
+      </PaneMenu>
+    );
+  };
+
   return (
-    <Paneset data-testid="mediatedRequestsActivitiesPaneSet">
-      <Pane
-        data-testid="mediatedRequestsActivitiesPane"
-        defaultWidth={FILTER_PANE_WIDTH}
-        paneTitle={<FormattedMessage id="ui-requests-mediated.app.filterPane.selectActivity" />}
-      >
-        <NavigationMenu value={getMediatedRequestsActivitiesUrl()} />
-      </Pane>
-      <Pane
-        defaultWidth="fill"
-        appIcon={<AppIcon app={APP_ICON_NAME} />}
-        paneTitle={<FormattedMessage id="ui-requests-mediated.app.mediatedRequestsActivities.paneTitle" />}
-      />
-    </Paneset>
+    <SearchAndSortQuery data-testid="mediatedRequestsActivitiesSearchAndSortQuery">
+      {() => (
+        <Paneset data-testid="mediatedRequestsActivitiesPaneSet">
+          {filterPaneIsVisible &&
+            <Pane
+              data-testid="mediatedRequestsActivitiesPane"
+              defaultWidth={FILTER_PANE_WIDTH}
+              paneTitle={<FormattedMessage id="ui-requests-mediated.app.filterPane.selectActivity" />}
+              lastMenu={
+                <PaneMenu>
+                  <CollapseFilterPaneButton
+                    data-testid="mediatedRequestsActivitiesCollapseFilterPaneButton"
+                    onClick={toggleFilterPane}
+                  />
+                </PaneMenu>
+              }
+            >
+              <NavigationMenu
+                value={getMediatedRequestsActivitiesUrl()}
+                separator
+              />
+              <MediatedRequestsFilters />
+            </Pane>
+          }
+          <Pane
+            defaultWidth="fill"
+            appIcon={<AppIcon app={APP_ICON_NAME} />}
+            paneTitle={<FormattedMessage id="ui-requests-mediated.app.mediatedRequestsActivities.paneTitle" />}
+            firstMenu={renderResultsFirstMenu()}
+          />
+        </Paneset>
+      )}
+    </SearchAndSortQuery>
   );
 };
 

src/components/MediatedRequestsActivities/MediatedRequestsActivities.test.js

@@ -5,14 +5,18 @@ import {
 
 import MediatedRequestsActivities from './MediatedRequestsActivities';
 import NavigationMenu from '../NavigationMenu';
+import MediatedRequestsFilters from './components/MediatedRequestsFilters';
 
 import { getMediatedRequestsActivitiesUrl } from '../../constants';
 
 jest.mock('../NavigationMenu', () => jest.fn((props) => (<div {...props} />)));
+jest.mock('./components/MediatedRequestsFilters', () => jest.fn((props) => (<div {...props} />)));
 
 const testIds = {
+  mediatedRequestsActivitiesSearchAndSortQuery: 'mediatedRequestsActivitiesSearchAndSortQuery',
   mediatedRequestsActivitiesPaneSet: 'mediatedRequestsActivitiesPaneSet',
   mediatedRequestsActivitiesPane: 'mediatedRequestsActivitiesPane',
+  mediatedRequestsActivitiesCollapseFilterPaneButton: 'mediatedRequestsActivitiesCollapseFilterPaneButton',
 };
 const labelIds = {
   paneTitle: 'ui-requests-mediated.app.mediatedRequestsActivities.paneTitle',
@@ -23,6 +27,10 @@ describe('MediatedRequestsActivities', () => {
     render(<MediatedRequestsActivities />);
   });
 
+  it('should render search and sort query', () => {
+    expect(screen.getByTestId(testIds.mediatedRequestsActivitiesSearchAndSortQuery)).toBeInTheDocument();
+  });
+
   it('should render pane set', () => {
     expect(screen.getByTestId(testIds.mediatedRequestsActivitiesPaneSet)).toBeInTheDocument();
   });
@@ -40,4 +48,12 @@ describe('MediatedRequestsActivities', () => {
       value: getMediatedRequestsActivitiesUrl(),
     }), {});
   });
+
+  it('should trigger MediatedRequestsFilters with correct props', () => {
+    expect(MediatedRequestsFilters).toHaveBeenCalledWith(expect.objectContaining({}), {});
+  });
+
+  it('should render CollapseFilterPaneButton', () => {
+    expect(screen.getByTestId(testIds.mediatedRequestsActivitiesCollapseFilterPaneButton)).toBeInTheDocument();
+  });
 });

src/components/MediatedRequestsActivities/components/MediatedRequestsFilters/MediatedRequestsFilters.js

@@ -0,0 +1,61 @@
+import PropTypes from 'prop-types';
+
+import { stripesConnect } from '@folio/stripes/core';
+
+import {
+  MediatedRequestLevelFilter,
+  MediatedRequestStatusFilter,
+  Search,
+} from './components';
+
+import {
+  getIsTitleLevelRequestsFeatureEnabled,
+} from '../../../../utils';
+
+const SETTINGS_SCOPES = {
+  CIRCULATION: 'circulation',
+};
+const SETTINGS_KEYS = {
+  GENERAL_TLR: 'generalTlr',
+};
+
+const MediatedRequestsFilters = ({
+  resources,
+}) => {
+  const isTitleLevelRequestsFeatureEnabled = getIsTitleLevelRequestsFeatureEnabled(resources);
+
+  return (
+    <form
+      data-testid="MediatedRequestsFiltersForm"
+    >
+      <Search
+        data-testid="MediatedRequestsFiltersSearch"
+      />
+      <MediatedRequestStatusFilter
+        data-testid="mediatedRequestFiltersStatusFilter"
+      />
+      {isTitleLevelRequestsFeatureEnabled && (
+        <MediatedRequestLevelFilter
+          data-testid="mediatedRequestFiltersLevelFilter"
+        />
+      )}
+    </form>
+  );
+};
+
+MediatedRequestsFilters.manifest = {
+  configs: {
+    type: 'okapi',
+    records: 'items',
+    path: 'settings/entries',
+    params: {
+      query: `(scope==${SETTINGS_SCOPES.CIRCULATION} and key==${SETTINGS_KEYS.GENERAL_TLR})`,
+    },
+  },
+};
+
+MediatedRequestsFilters.propTypes = {
+  resources: PropTypes.object.isRequired,
+};
+
+export default stripesConnect(MediatedRequestsFilters);

src/components/MediatedRequestsActivities/components/MediatedRequestsFilters/MediatedRequestsFilters.test.js

@@ -0,0 +1,57 @@
+import {
+  render,
+  screen,
+} from '@folio/jest-config-stripes/testing-library/react';
+
+import MediatedRequestsFilters from './MediatedRequestsFilters';
+
+import {
+  MediatedRequestLevelFilter,
+  MediatedRequestStatusFilter,
+  Search,
+} from './components';
+import NavigationMenu from '../../../NavigationMenu';
+import { getMediatedRequestsActivitiesUrl } from '../../../../constants';
+
+jest.mock('./components', () => ({
+  MediatedRequestLevelFilter: jest.fn((props) => (<div {...props} />)),
+  MediatedRequestStatusFilter: jest.fn((props) => (<div {...props} />)),
+  Search: jest.fn((props) => (<div {...props} />)),
+}));
+
+const testIds = {
+  mediatedRequestsFiltersForm: 'MediatedRequestsFiltersForm',
+  mediatedRequestsFiltersSearch: 'MediatedRequestsFiltersSearch',
+  mediatedRequestFiltersStatusFilter: 'mediatedRequestFiltersStatusFilter',
+  mediatedRequestFiltersLevelFilter: 'mediatedRequestFiltersLevelFilter',
+};
+
+describe('MediatedRequestsFilters', () => {
+  beforeEach(() => {
+    render(<MediatedRequestsFilters />);
+  });
+
+  it('should render form', () => {
+    expect(screen.getByTestId(testIds.mediatedRequestsFiltersForm)).toBeInTheDocument();
+  });
+
+  it('should render search', () => {
+    expect(screen.getByTestId(testIds.mediatedRequestsFiltersSearch)).toBeInTheDocument();
+  });
+
+  it('should trigger search with correct props', () => {
+    expect(Search).toHaveBeenCalledWith(expect.objectContaining({}), {});
+  });
+
+  it('should render status filter', () => {
+    expect(screen.getByTestId(testIds.mediatedRequestFiltersStatusFilter)).toBeInTheDocument();
+  });
+
+  it('should trigger status filter with correct props', () => {
+    expect(MediatedRequestStatusFilter).toHaveBeenCalledWith(expect.objectContaining({}), {});
+  });
+
+  it('should not render status filter', () => {
+    expect(screen.queryByTestId(testIds.mediatedRequestFiltersLevelFilter)).not.toBeInTheDocument();
+  });
+});

src/components/MediatedRequestsActivities/components/MediatedRequestsFilters/components/MediatedRequestLevelFilter/MediatedRequestLevelFilter.js

@@ -0,0 +1,47 @@
+import { useIntl } from 'react-intl';
+
+import {
+  Accordion,
+  AccordionSet,
+  FilterAccordionHeader,
+} from '@folio/stripes/components';
+import {
+  CheckboxFilter,
+} from '@folio/stripes/smart-components';
+
+import {
+  transformRequestFilterOptions,
+} from '../../../../../../utils';
+import {
+  MEDIATED_REQUEST_FILTER_TYPES,
+  MEDIATED_REQUEST_LEVEL_TRANSLATIONS,
+} from '../../../../../../constants';
+
+const MediatedRequestLevelFilter = () => {
+  const { formatMessage } = useIntl();
+
+  return (
+    <AccordionSet
+      data-testid={`${MEDIATED_REQUEST_FILTER_TYPES.MEDIATED_REQUEST_LEVELS}Set`}
+    >
+      <Accordion
+        id={MEDIATED_REQUEST_FILTER_TYPES.MEDIATED_REQUEST_LEVELS}
+        data-testid={MEDIATED_REQUEST_FILTER_TYPES.MEDIATED_REQUEST_LEVELS}
+        header={FilterAccordionHeader}
+        label={formatMessage({ id:'ui-requests-mediated.filters.mediatedRequestLevel.accordionTitle' })}
+        name={MEDIATED_REQUEST_FILTER_TYPES.MEDIATED_REQUEST_LEVELS}
+        separator={false}
+        onClearFilter={() => {}}
+      >
+        <CheckboxFilter
+          data-testid={`${MEDIATED_REQUEST_FILTER_TYPES.MEDIATED_REQUEST_LEVELS}Filter`}
+          dataOptions={transformRequestFilterOptions(MEDIATED_REQUEST_LEVEL_TRANSLATIONS, formatMessage)}
+          name={MEDIATED_REQUEST_FILTER_TYPES.MEDIATED_REQUEST_LEVELS}
+          onChange={() => {}}
+        />
+      </Accordion>
+    </AccordionSet>
+  );
+};
+
+export default MediatedRequestLevelFilter;

src/components/MediatedRequestsActivities/components/MediatedRequestsFilters/components/MediatedRequestLevelFilter/MediatedRequestLevelFilter.test.js

@@ -0,0 +1,32 @@
+import {
+  render,
+  screen,
+} from '@folio/jest-config-stripes/testing-library/react';
+
+import MediatedRequestLevelFilter from './MediatedRequestLevelFilter';
+
+import { MEDIATED_REQUEST_FILTER_TYPES } from '../../../../../../constants';
+
+const testIds = {
+  accordionSet: `${MEDIATED_REQUEST_FILTER_TYPES.MEDIATED_REQUEST_LEVELS}Set`,
+  accordion: MEDIATED_REQUEST_FILTER_TYPES.MEDIATED_REQUEST_LEVELS,
+  checkboxFilter: `${MEDIATED_REQUEST_FILTER_TYPES.MEDIATED_REQUEST_LEVELS}Filter`,
+};
+
+describe('MediatedRequestLevelFilter', () => {
+  beforeEach(() => {
+    render(<MediatedRequestLevelFilter />);
+  });
+
+  it('should render accordion set', () => {
+    expect(screen.getByTestId(testIds.accordionSet)).toBeInTheDocument();
+  });
+
+  it('should render accordion', () => {
+    expect(screen.getByTestId(testIds.accordion)).toBeInTheDocument();
+  });
+
+  it('should render checkbox filter', () => {
+    expect(screen.getByTestId(testIds.checkboxFilter)).toBeInTheDocument();
+  });
+});

src/components/MediatedRequestsActivities/components/MediatedRequestsFilters/components/MediatedRequestLevelFilter/index.js

@@ -0,0 +1 @@
+export { default } from './MediatedRequestLevelFilter';