UIMARCAUTH-423: Pass showSortIndicator prop to SearchResultsList to d…

…isplay sort indicator in the results header. (#406)

CHANGELOG.md

@@ -9,6 +9,7 @@
 - [UIMARCAUTH-415](https://issues.folio.org/browse/UIMARCAUTH-415) Pass the record search error to the `SearchResultsList` component.
 - [UIMARCAUTH-411](https://issues.folio.org/browse/UIMARCAUTH-411) Send requests for Source Files Settings with current tenant id.
 - [UIMARCAUTH-404](https://issues.folio.org/browse/UIMARCAUTH-404) Focus on record title after closing record details view, on search field after canceling record creation, on close record details view icon after closing quick-marc.
+- [UIMARCAUTH-423](https://issues.folio.org/browse/UIMARCAUTH-423) Pass `showSortIndicator` prop to `SearchResultsList` to display sort indicator in the results header.
 
 ## [5.0.1](https://github.com/folio-org/ui-marc-authorities/tree/v5.0.1) (2024-04-02)
 

src/constants/index.js

@@ -1,5 +1,6 @@
 export * from './sortableSearchResultListColumns';
 export * from './sortOrders';
+export * from './sortableColumns';
 export * from './queryKeys';
 export * from './exportAuthorityJobProfileId';
 export * from './createAuthorityRoute';

src/constants/sortableColumns.js

@@ -0,0 +1,7 @@
+import { searchResultListColumns } from '@folio/stripes-authority-components';
+
+export const sortableColumns = [
+  searchResultListColumns.AUTH_REF_TYPE,
+  searchResultListColumns.HEADING_REF,
+  searchResultListColumns.HEADING_TYPE,
+];

src/hooks/useSortColumnManager/useSortColumnManager.test.js

@@ -5,7 +5,10 @@ import {
 import { searchResultListColumns } from '@folio/stripes-authority-components';
 
 import useSortColumnManager from './useSortColumnManager';
-import { sortOrders } from '../../constants';
+import {
+  sortableColumns,
+  sortOrders,
+} from '../../constants';
 
 jest.mock('react-router-dom', () => ({
   ...jest.requireActual('react-router-dom'),
@@ -15,12 +18,6 @@ jest.mock('react-router-dom', () => ({
   }),
 }));
 
-const sortableColumns = [
-  searchResultListColumns.AUTH_REF_TYPE,
-  searchResultListColumns.HEADING_REF,
-  searchResultListColumns.HEADING_TYPE,
-];
-
 const mockSetSortedColumn = jest.fn();
 const mockSetSortOrder = jest.fn();
 

src/routes/SearchRoute/SearchRoute.js

@@ -6,11 +6,11 @@ import {
   SelectedAuthorityRecordContext,
   useAuthorities,
   searchableIndexesValues,
-  searchResultListColumns,
 } from '@folio/stripes-authority-components';
 
 import { AuthoritiesSearch } from '../../views';
 import { useSortColumnManager } from '../../hooks';
+import { sortableColumns } from '../../constants';
 
 const propTypes = {
   children: PropTypes.oneOfType([
@@ -43,11 +43,6 @@ const SearchRoute = ({ children }) => {
   } = useContext(AuthoritiesSearchContext);
   const [, setSelectedAuthorityRecordContext] = useContext(SelectedAuthorityRecordContext);
 
-  const sortableColumns = [
-    searchResultListColumns.AUTH_REF_TYPE,
-    searchResultListColumns.HEADING_REF,
-    searchResultListColumns.HEADING_TYPE,
-  ];
   const {
     onHeaderClick,
   } = useSortColumnManager({

src/views/AuthoritiesSearch/AuthoritiesSearch.js

@@ -71,6 +71,7 @@ import { useExportReport } from '../../queries';
 import { useAuthorityExport } from '../../hooks';
 import {
   createAuthorityRoute,
+  sortableColumns,
   sortableSearchResultListColumns,
   sortOrders,
 } from '../../constants';
@@ -79,7 +80,7 @@ import css from './AuthoritiesSearch.css';
 import { REPORT_TYPES } from './constants';
 
 const prefix = 'authorities';
-const NON_INTERACTIVE_HEADERS = [searchResultListColumns.SELECT];
+const NON_INTERACTIVE_HEADERS = Object.values(searchResultListColumns).filter(column => !sortableColumns.includes(column));
 
 const propTypes = {
   authorities: PropTypes.arrayOf(AuthorityShape).isRequired,
@@ -641,6 +642,7 @@ const AuthoritiesSearch = ({
             loading={isLoading}
             loaded={isLoaded}
             visibleColumns={visibleColumns}
+            showSortIndicator
             sortedColumn={sortedColumn}
             sortOrder={sortOrder}
             onHeaderClick={onHeaderClick}

src/views/AuthoritiesSearch/AuthoritiesSearch.test.js

@@ -5,7 +5,10 @@ import {
 } from '@folio/jest-config-stripes/testing-library/react';
 
 import { runAxeTest } from '@folio/stripes-testing';
-import { searchResultListColumns } from '@folio/stripes-authority-components';
+import {
+  searchResultListColumns,
+  SearchResultsList,
+} from '@folio/stripes-authority-components';
 
 import AuthoritiesSearch from './AuthoritiesSearch';
 import authorities from '../../../mocks/authorities';
@@ -44,6 +47,11 @@ jest.mock('@folio/stripes-authority-components', () => ({
     isLoading: false,
     sourceFiles: [],
   }),
+  SearchResultsList: jest.fn(props => {
+    const ReactSearchResultsList = jest.requireActual('@folio/stripes-authority-components').SearchResultsList;
+
+    return <ReactSearchResultsList {...props} />;
+  }),
 }));
 
 jest.mock('../../hooks', () => ({
@@ -492,4 +500,14 @@ describe('Given AuthoritiesSearch', () => {
     expect(getByRole('columnheader', { name: 'stripes-authority-components.search-results-list.authoritySource' })).toBeVisible();
     expect(getByRole('columnheader', { name: 'ui-marc-authorities.search-results-list.numberOfTitles' })).toBeVisible();
   });
+
+  it('should have correct props in SearchResultsList', () => {
+    renderAuthoritiesSearch({ authorities });
+
+    const expectedProps = {
+      nonInteractiveHeaders: ['select', 'link', 'numberOfTitles', 'authoritySource'],
+    };
+
+    expect(SearchResultsList).toHaveBeenCalledWith(expect.objectContaining(expectedProps), {});
+  });
 });