Update focus order for search result page (#209)

Co-authored-by: Ray Lee <ray.lee@lyrasis.org>

src/components/pages/SearchResultPage.jsx

@@ -17,7 +17,6 @@ import SearchResultTitleBar from '../search/SearchResultTitleBar';
 import SelectBar from '../search/SelectBar';
 import ExportModalContainer from '../../containers/search/ExportModalContainer';
 import WatchedSearchResultTableContainer from '../../containers/search/WatchedSearchResultTableContainer';
-import SearchResultSidebarToggleButtonContainer from '../../containers/search/SearchResultSidebarToggleButtonContainer';
 import SearchToRelateModalContainer from '../../containers/search/SearchToRelateModalContainer';
 import { canRelate } from '../../helpers/permissionHelpers';
 import { getListType } from '../../helpers/searchHelpers';
@@ -32,7 +31,6 @@ import {
 
 import styles from '../../../styles/cspace-ui/SearchResultPage.css';
 import pageBodyStyles from '../../../styles/cspace-ui/PageBody.css';
-import sidebarToggleBarStyles from '../../../styles/cspace-ui/SidebarToggleBar.css';
 
 // const stopPropagation = (event) => {
 //   event.stopPropagation();
@@ -785,7 +783,6 @@ export default class SearchResultPage extends Component {
     } = this.state;
 
     const searchDescriptor = this.getSearchDescriptor();
-    const advancedSearchCondition = searchDescriptor.getIn(['searchQuery', 'as']);
 
     const listType = this.getListType(searchDescriptor);
 
@@ -847,17 +844,6 @@ export default class SearchResultPage extends Component {
           searchName={SEARCH_RESULT_PAGE_SEARCH_NAME}
           updateDocumentTitle
         />
-
-        <div
-          className={
-            advancedSearchCondition
-              ? sidebarToggleBarStyles.advanced
-              : sidebarToggleBarStyles.normal
-          }
-        >
-          <SearchResultSidebarToggleButtonContainer />
-        </div>
-
         <div className={isSidebarOpen ? pageBodyStyles.common : pageBodyStyles.full}>
           <WatchedSearchResultTableContainer
             config={config}

src/components/search/SearchResultSidebar.jsx

@@ -3,7 +3,9 @@ import PropTypes from 'prop-types';
 import Immutable from 'immutable';
 import SearchResultBatchPanelContainer from '../../containers/search/SearchResultBatchPanelContainer';
 import SearchResultReportPanelContainer from '../../containers/search/SearchResultReportPanelContainer';
+import SearchResultSidebarToggleButtonContainer from '../../containers/search/SearchResultSidebarToggleButtonContainer';
 import styles from '../../../styles/cspace-ui/SearchResultSidebar.css';
+import sidebarToggleBarStyles from '../../../styles/cspace-ui/SidebarToggleBar.css';
 
 const panelColor = 'black';
 
@@ -23,6 +25,14 @@ const defaultProps = {
   isOpen: true,
 };
 
+function renderSidebarToggle() {
+  return (
+    <div className={sidebarToggleBarStyles.common}>
+      <SearchResultSidebarToggleButtonContainer />
+    </div>
+  );
+}
+
 export default function SearchResultSidebar(props) {
   const {
     config,
@@ -32,12 +42,20 @@ export default function SearchResultSidebar(props) {
     selectedItems,
   } = props;
 
+  const toggle = renderSidebarToggle();
+
   if (!isOpen) {
-    return null;
+    return (
+      <div className={styles.closed}>
+        {toggle}
+      </div>
+    );
   }
 
   return (
     <div className={styles.common}>
+      {toggle}
+
       <SearchResultReportPanelContainer
         color={panelColor}
         config={config}

src/components/search/SearchResultTitleBar.jsx

@@ -95,6 +95,7 @@ export default function SearchResultTitleBar(props) {
   }
 
   let advancedTitle;
+  let serviceType = 'searchresult';
 
   if (advancedSearchCondition) {
     advancedTitle = (
@@ -106,6 +107,7 @@ export default function SearchResultTitleBar(props) {
         recordType={recordType}
       />
     );
+    serviceType = 'advancedsearchresult';
   }
 
   const title = (
@@ -125,6 +127,7 @@ export default function SearchResultTitleBar(props) {
       title={title}
       aside={aside}
       subtitle={advancedTitle}
+      serviceType={serviceType}
       {...remainingProps}
     />
   );

styles/cspace-ui/SearchResultSidebar.css

@@ -1,3 +1,7 @@
 .common {
   width: 30%;
 }
+
+.closed {
+  flex: none;
+}

styles/cspace-ui/SidebarToggleBar.css

@@ -1,15 +1,12 @@
 @value tabHeight from '../dimensions.css';
 
-.normal {
-  height: tabHeight;
-}
-
-.advanced {
+.common {
   height: 0;
   position: relative;
 }
 
-.advanced > :global(.cspace-ui-SidebarToggleButton--common) {
+.common > :global(.cspace-ui-SidebarToggleButton--common) {
   top: -31px;
   right: 0;
+  width: max-content;
 }

styles/cspace-ui/TitleBar.css

@@ -40,6 +40,10 @@
   text-align: right;
 }
 
+.searchresult {
+  margin-bottom: 31px;
+}
+
 .audit > div > div > aside > h2,
 .object > div > div > aside > h2,
 .procedure > div > div > aside > h2,

test/specs/components/search/SearchResultSidebar.spec.jsx

@@ -1,5 +1,10 @@
 import React from 'react';
 import { createRenderer } from 'react-test-renderer/shallow';
+import configureMockStore from 'redux-mock-store';
+import thunk from 'redux-thunk';
+import { Provider as StoreProvider } from 'react-redux';
+import Immutable from 'immutable';
+import { IntlProvider } from 'react-intl';
 import createTestContainer from '../../../helpers/createTestContainer';
 import { render } from '../../../helpers/renderHelpers';
 import SearchResultSidebar from '../../../../src/components/search/SearchResultSidebar';
@@ -35,15 +40,27 @@ describe('SearchResultSidebar', () => {
     result.type.should.equal('div');
   });
 
-  it('should render nothing if isOpen is false', function test() {
+  it('should only render the sidebar toggle if isOpen is false', function test() {
+    const mockStore = configureMockStore([thunk]);
+    const store = mockStore({
+      prefs: Immutable.Map({
+        searchResultSidebarOpen: false,
+      }),
+    });
+
     render(
-      <SearchResultSidebar
-        config={config}
-        recordType="group"
-        isOpen={false}
-      />, this.container,
+      <IntlProvider locale="en">
+        <StoreProvider store={store}>
+          <SearchResultSidebar
+            config={config}
+            recordType="group"
+            isOpen={false}
+          />
+        </StoreProvider>
+      </IntlProvider>, this.container,
     );
 
-    expect(this.container.firstElementChild).to.equal(null);
+    expect(this.container.querySelector('.cspace-ui-SearchResultSidebar--common')).to.equal(null);
+    this.container.querySelector('.cspace-ui-SearchResultSidebar--closed').textContent.should.equal('Show sidebar');
   });
 });