Added breadcrumbs to members pages when coming from analytics

fixes https://github.com/TryGhost/Team/issues/2140

ghost/admin/app/controllers/members.js

@@ -62,6 +62,11 @@ export default class MembersController extends Controller {
 
     @tracked parseFilterParamCounter = 0;
 
+    /**
+     * Flag used to determine if we should return to the analytics page
+     */
+    fromAnalytics = null;
+
     paidParams = PAID_PARAMS;
 
     constructor() {

ghost/admin/app/routes/member.js

@@ -9,6 +9,7 @@ export default class MembersRoute extends AdminRoute {
     @service router;
 
     _requiresBackgroundRefresh = true;
+    fromAnalytics = null;
 
     constructor() {
         super(...arguments);
@@ -27,11 +28,20 @@ export default class MembersRoute extends AdminRoute {
         }
     }
 
-    setupController(controller, member) {
+    setupController(controller, member, transition) {
         super.setupController(...arguments);
         if (this._requiresBackgroundRefresh) {
             controller.fetchMemberTask.perform(member.id);
         }
+
+        if (transition.from?.name === 'members.index' && transition.from?.parent?.name === 'members') {
+            const fromAnalytics = transition.from?.parent?.metadata.fromAnalytics ?? null;
+            controller.fromAnalytics = fromAnalytics;
+            this.fromAnalytics = fromAnalytics;
+        } else {
+            controller.fromAnalytics = null;
+            this.fromAnalytics = null;
+        }
     }
 
     deactivate() {
@@ -96,4 +106,10 @@ export default class MembersRoute extends AdminRoute {
     titleToken() {
         return this.controller.member.name;
     }
+
+    buildRouteInfoMetadata() {
+        return {
+            fromAnalytics: this.fromAnalytics
+        };
+    }
 }

ghost/admin/app/routes/members.js

@@ -5,6 +5,8 @@ export default class MembersRoute extends AdminRoute {
     @service store;
     @service feature;
 
+    fromAnalytics = false;
+
     queryParams = {
         label: {refreshModel: true},
         searchParam: {refreshModel: true, replace: true},
@@ -24,15 +26,39 @@ export default class MembersRoute extends AdminRoute {
     }
 
     // trigger a background load of members plus labels for filter dropdown
-    setupController(controller) {
+    setupController(controller, model, transition) {
         super.setupController(...arguments);
         controller.fetchLabelsTask.perform();
+
+        if (transition.from?.name === 'posts.analytics') {
+            // Sadly transition.from.params is not reliable to use (not populated on transitions)
+            const oldParams = transition.router?.oldState?.params['posts.analytics'] ?? {};
+            
+            // We need to store analytics in 'this' to have it accessible for the member route
+            this.fromAnalytics = Object.values(oldParams);
+            controller.fromAnalytics = this.fromAnalytics;
+        } else if (transition.from?.metadata?.fromAnalytics) {
+            // Handle returning from member route
+            const fromAnalytics = transition.from?.metadata.fromAnalytics ?? null;
+            controller.fromAnalytics = fromAnalytics;
+            this.fromAnalytics = fromAnalytics;
+        } else {
+            controller.fromAnalytics = null;
+            this.fromAnalytics = null;
+        }
+    }
+
+    resetController() {
+        super.resetController(...arguments);
+        // don't reset fromAnalytics here, we need to reuse it. We reset it in setup
+        //controller.fromAnalytics = null;
     }
 
     buildRouteInfoMetadata() {
         return {
             titleToken: 'Members',
-            mainClasses: ['gh-main-fullwidth']
+            mainClasses: ['gh-main-fullwidth'],
+            fromAnalytics: this.fromAnalytics
         };
     }
 }

ghost/admin/app/templates/member.hbs

@@ -1,12 +1,29 @@
 <section class="gh-canvas">
     <GhCanvasHeader class="gh-canvas-header sticky gh-member-header">
         <div class="flex flex-column">
-            <div class="gh-canvas-breadcrumb">
-                <LinkTo @route="members" data-test-link="members-back">
-                    Members
-                </LinkTo>
-                {{svg-jar "arrow-right-small"}} {{if this.member.isNew "New member" "Edit member"}}
-            </div>
+            {{#if this.fromAnalytics}}
+                <div class="gh-canvas-breadcrumb">
+                    <LinkTo @route="posts">
+                        Posts
+                    </LinkTo>
+                    {{svg-jar "arrow-right-small"}}
+                    <LinkTo @route="posts.analytics" @models={{this.fromAnalytics}}>
+                        Analytics
+                    </LinkTo>
+                    {{svg-jar "arrow-right-small"}}
+                    <LinkTo @route="members" data-test-link="members-back">
+                        Members
+                    </LinkTo>
+                    {{svg-jar "arrow-right-small"}} {{if this.member.isNew "New member" "Edit member"}}
+                </div>
+            {{else}}
+                <div class="gh-canvas-breadcrumb">
+                    <LinkTo @route="members" data-test-link="members-back">
+                        Members
+                    </LinkTo>
+                    {{svg-jar "arrow-right-small"}} {{if this.member.isNew "New member" "Edit member"}}
+                </div>
+            {{/if}}
             <h2 class="gh-canvas-title" data-test-screen-title>
                 {{#if this.member.isNew}}
                     New<span class="gh-canvas-title-hide-for-mobile">&nbsp;member</span>

ghost/admin/app/templates/members.hbs

@@ -1,6 +1,20 @@
 <section class="gh-canvas">
     <GhCanvasHeader class="gh-canvas-header break tablet members-header">
-        <h2 class="gh-canvas-title" data-test-screen-title>Members</h2>
+        <div class="flex flex-column">
+            {{#if this.fromAnalytics}}
+                <div class="gh-canvas-breadcrumb">
+                    <LinkTo @route="posts">
+                        Posts
+                    </LinkTo>
+                    {{svg-jar "arrow-right-small"}}
+                    <LinkTo @route="posts.analytics" @models={{this.fromAnalytics}}>
+                        Analytics
+                    </LinkTo>
+                    {{svg-jar "arrow-right-small"}}Members
+                </div>
+            {{/if}}
+            <h2 class="gh-canvas-title" data-test-screen-title>Members</h2>
+        </div>
         {{#if (not-eq this.settings.membersSignupAccess "none")}}
             <section class="view-actions">
                 <div class="view-actions-bottom-row {{if this.hideSearchBar "hidden"}}">