Merge branch 'master' into STSMACOM-876

CHANGELOG.md

@@ -6,6 +6,7 @@
 * Improve confirmation modal footer for `ControlledVocab` component. Refs STSMACOM-863.
 * Add the `endDateInputRef` prop to `DateRangeFilter` to access the end date element. Refs STSMACOM-859.
 * Remove unnecessary `aria-rowindex` in `ItemView` and `ItemEdit` components. Fixes STSMACOM-871.
+* Check for `active` status of `<Settings>` navigation links independently from the applied href and query string. Query string should only be applied to active link. Refs STSMACOM-837.
 * `<EditableListForm>` use `lodash.isEmpty` to check for empty `state.status` in re-initialization checks on component update. Fixes STSMACOM-876.
 
 ## [9.2.3] IN PROGRESS

lib/Settings/Settings.js

@@ -62,12 +62,32 @@ class Settings extends Component {
     const navlinks = (section) => {
       const navItems = section.pages.map((p) => {
         const search = props.location.search || '';
-        const link = `${props.match.path}/${p.route}${search}`;
+        const link = `${props.match.path}/${p.route}`;
+        let href = link;
+        let isActive = false;
+
+        // NavListItem allows for isActive to be set independently, rather than
+        // strict internal comparison of the href and the `activeLink`
+        // Since the location can be augmented after navigation through subsequent navigation
+        // or through appending a query string, it's best to
+        // solely rely on the pathname for appying the style vs equality.
         if (props.location.pathname.startsWith(link)) {
+          // apply the query string for the active link only.
+          href = link + search;
           activeLink = link;
+          isActive = true;
         }
         if (p.perm && !stripes.hasPerm(p.perm)) return null;
-        return <NavListItem key={p.route} to={link}>{p.label}</NavListItem>;
+
+        return (
+          <NavListItem
+            key={p.route}
+            to={href}
+            isActive={isActive}
+          >
+            {p.label}
+          </NavListItem>
+        );
       }).filter(x => x !== null);
 
       return (

lib/Settings/tests/Settings-test.js

@@ -0,0 +1,88 @@
+import React from 'react';
+import setupStripesCore from '@folio/stripes-core/test/bigtest/helpers/setup-application';
+import {
+  describe,
+  beforeEach,
+  it,
+} from 'mocha';
+
+
+
+import { HTML } from '@folio/stripes-testing';
+import { Paneset } from '@folio/stripes-components';
+import mirageOptions from '../../../tests/network';
+import Settings from '../Settings';
+
+const settingsInteractor = HTML.extend('Settings')
+  .selector('#app-settings-nav-pane')
+  .filters({
+    numLinks: (el) => el.querySelector('[data-test-nav-list]').querySelectorAll('a').length,
+    navTitle: (el) => el.querySelector('[data-test-pane-header]').innerText
+  });
+
+const MockSettingsPage = () => <div>Mock Settings</div>;
+
+const TestApp = (props) => {
+  const pages = [
+    { route: 'perms', label: 'Permission sets', component: MockSettingsPage, perm: 'perms.permissions.get' },
+    { route: 'groups', label: 'Patron groups', component: MockSettingsPage },
+  ];
+  return ((
+    <Paneset>
+      <Settings pages={pages} paneTitle="Test title" {...props} />
+    </Paneset>
+  ));
+};
+
+function setupApplication({
+  scenarios,
+  component = null,
+  permissions = {},
+  stripesConfig
+} = {}) {
+  const initialState = {
+    discovery: {
+      modules: {
+        'users-module-id': 'users-test',
+      },
+    }
+  }
+  setupStripesCore({
+    mirageOptions: {
+      serverType: 'miragejs',
+      ...mirageOptions
+    },
+    stripesConfig,
+    scenarios,
+    permissions,
+    initialState,
+    // setup a dummy app for smart components
+    modules: [{
+      type: 'app',
+      name: '@folio/ui-dummy',
+      displayName: 'dummy.title',
+      route: '/dummy',
+      module: (props) => component(props),
+    }],
+
+    translations: {
+      'dummy.title': 'Dummy'
+    }
+  });
+
+  // go to the dummy app where smart components are mounted
+  beforeEach(async function () { // eslint-disable-line func-names
+    await this.visit('/dummy');
+  });
+}
+
+describe('Settings', () => {
+  const settings = settingsInteractor();
+  setupApplication({ component: TestApp });
+  beforeEach(async function () { // eslint-disable-line func-names
+    await this.visit('/dummy');
+  });
+
+  it('renders the pane title', () => settings.has({ navTitle: 'Test title' }));
+  it('renders correct number of links', () => settings.has({ numLinks: 2 }));
+});