🐛 Fixed active state bug in sidebar nav (#15511)

closes: https://github.com/TryGhost/Ghost/issues/15506

- The sidebar items that don't open the editor were missing some relative current-when attributes so the nested views weren't considered "active".

ghost/admin/app/components/gh-nav-menu/main.hbs

@@ -87,18 +87,18 @@
                         {{/if}}
                     </li>
                     {{#if this.showTagsNavigation}}
-                        <li><LinkTo @route="tags" data-test-nav="tags">{{svg-jar "tag"}}Tags</LinkTo></li>
+                        <li><LinkTo @route="tags" @current-when="tags tag tag.new" data-test-nav="tags">{{svg-jar "tag"}}Tags</LinkTo></li>
                     {{/if}}
                     {{#if (gh-user-can-admin this.session.user)}}
                         <li class="relative">
                             {{#if (eq this.router.currentRouteName "members.index")}}
-                                <LinkTo @route="members" @current-when="members member" @query={{reset-query-params "members.index"}} data-test-nav="members">{{svg-jar "members"}}Members
+                                <LinkTo @route="members" @current-when="members member member.new" @query={{reset-query-params "members.index"}} data-test-nav="members">{{svg-jar "members"}}Members
                                     {{#unless this.memberCountLoading}}
                                         <span class="gh-nav-member-count">{{format-number this.membersStats.memberCount}}</span>
                                     {{/unless}}
                                 </LinkTo>
                             {{else}}
-                                <LinkTo @route="members" @current-when="members member" data-test-nav="members">{{svg-jar "members"}}Members
+                                <LinkTo @route="members" @current-when="members member member.new" data-test-nav="members">{{svg-jar "members"}}Members
                                     {{#unless this.memberCountLoading}}
                                         <span class="gh-nav-member-count">{{format-number this.membersStats.memberCount}}</span>
                                     {{/unless}}
@@ -108,7 +108,7 @@
 
                         {{#if this.settings.paidMembersEnabled}}
                             <li>
-                                <LinkTo @route="offers" @alt="Offers">{{svg-jar "percentage"}}Offers</LinkTo>
+                                <LinkTo @route="offers" @current-when="offers offer offer.new" @alt="Offers" data-test-nav="offers">{{svg-jar "percentage"}}Offers</LinkTo>
                             </li>
                         {{/if}}
                     {{/if}}

ghost/admin/tests/acceptance/members-test.js

@@ -56,6 +56,12 @@ describe('Acceptance: Members', function () {
             expect(findAll('[data-test-list="members-list-item"]').length, 'members list count')
                 .to.equal(2);
 
+            // it highlights active state in nav menu
+            expect(
+                find('[data-test-nav="members"]'),
+                'highlights nav menu item'
+            ).to.have.class('active');
+
             let member = find('[data-test-list="members-list-item"]');
             expect(member.querySelector('.gh-members-list-name').textContent, 'member list item title')
                 .to.equal(member1.name);
@@ -73,6 +79,12 @@ describe('Acceptance: Members', function () {
             expect(find('[data-test-input="member-email"]').value, 'loads correct email into form')
                 .to.equal(member1.email);
 
+            // it maintains active state in nav menu
+            expect(
+                find('[data-test-nav="members"]'),
+                'highlights nav menu item'
+            ).to.have.class('active');
+
             // trigger save
             await fillIn('[data-test-input="member-name"]', 'New Name');
             await blur('[data-test-input="member-name"]');
@@ -109,6 +121,12 @@ describe('Acceptance: Members', function () {
             expect(find('.gh-canvas-header h2').textContent, 'settings pane title')
                 .to.contain('New');
 
+            // it highlights active state in nav menu
+            expect(
+                find('[data-test-nav="members"]'),
+                'highlights nav menu item'
+            ).to.have.class('active');
+
             // all fields start blank
             findAll('.gh-member-settings-primary .gh-input').forEach(function (elem) {
                 expect(elem.value, `input field for ${elem.getAttribute('name')}`)

ghost/admin/tests/acceptance/offers-test.js

@@ -2,6 +2,7 @@ import moment from 'moment-timezone';
 import {authenticateSession, invalidateSession} from 'ember-simple-auth/test-support';
 import {beforeEach, describe, it} from 'mocha';
 import {blur, click, currentURL, fillIn, find, findAll, settled} from '@ember/test-helpers';
+import {enablePaidMembers} from '../helpers/members';
 import {expect} from 'chai';
 import {setupApplicationTest} from 'ember-mocha';
 import {setupMirage} from 'ember-cli-mirage/test-support';
@@ -38,6 +39,8 @@ describe('Acceptance: Offers', function () {
             let role = this.server.create('role', {name: 'Owner'});
             this.server.create('user', {roles: [role]});
 
+            enablePaidMembers(this.server);
+
             return await authenticateSession();
         });
 
@@ -56,6 +59,12 @@ describe('Acceptance: Offers', function () {
             // it has correct page title
             expect(document.title, 'page title').to.equal('Offers - Test Blog');
 
+            // it highlights active state in nav menu
+            expect(
+                find('[data-test-nav="offers"]'),
+                'highlights nav menu item'
+            ).to.have.class('active');
+
             // it lists all offers
             expect(findAll('[data-test-list="offers-list-item"]').length, 'offers list count')
                 .to.equal(2);
@@ -73,6 +82,12 @@ describe('Acceptance: Offers', function () {
             expect(find('[data-test-input="offer-name"]').value, 'loads correct offer into form')
                 .to.equal(offer1.name);
 
+            // it maintains active state in nav menu
+            expect(
+                find('[data-test-nav="offers"]'),
+                'highlights nav menu item'
+            ).to.have.class('active');
+
             // trigger save
             await fillIn('[data-test-input="offer-name"]', 'New Name');
             await blur('[data-test-input="offer-name"]');
@@ -88,5 +103,12 @@ describe('Acceptance: Offers', function () {
             // lands on correct page
             expect(currentURL(), 'currentURL').to.equal('/offers');
         });
+
+        it('maintains active state in nav menu when creating a new tag', async function () {
+            await visit('offers/new');
+            expect(currentURL()).to.equal('offers/new');
+            expect(find('[data-test-nav="offers"]'), 'highlights nav menu item')
+                .to.have.class('active');
+        });
     });
 });

ghost/admin/tests/acceptance/settings/tags-test.js

@@ -94,6 +94,10 @@ describe('Acceptance: Tags', function () {
             await visit('tags');
             await click(`[data-test-tag="${tag.id}"] [data-test-tag-name]`);
 
+            // it maintains active state in nav menu
+            expect(find('[data-test-nav="tags"]'), 'highlights nav menu item')
+                .to.have.class('active');
+
             expect(currentURL()).to.equal('/tags/to-be-edited');
 
             expect(find('[data-test-input="tag-name"]')).to.have.value('To be edited');
@@ -156,5 +160,12 @@ describe('Acceptance: Tags', function () {
             expect(currentRouteName()).to.equal('error404');
             expect(currentURL()).to.equal('/tags/unknown');
         });
+
+        it('maintains active state in nav menu when creating a new tag', async function () {
+            await visit('tags/new');
+            expect(currentURL()).to.equal('tags/new');
+            expect(find('[data-test-nav="tags"]'), 'highlights nav menu item')
+                .to.have.class('active');
+        });
     });
 });

ghost/admin/tests/helpers/members.js

@@ -13,3 +13,9 @@ export function disableMembers(server) {
         ? server.db.settings.update({key: 'members_signup_access'}, {value: 'none'})
         : server.create('setting', {key: 'members_signup_access', value: 'none', group: 'members'});
 }
+
+export function enablePaidMembers(server) {
+    server.db.settings.find({key: 'paid_members_enabled'})
+        ? server.db.settings.update({key: 'paid_members_enabled'}, {value: true})
+        : server.create('setting', {key: 'paid_members_enabled', value: true, group: 'members'});
+}