Released React members list on /members

apps/admin-x-settings/src/components/settings/advanced/labs/private-features.tsx

@@ -55,10 +55,6 @@ const features: Feature[] = [{
     title: 'Verification flow',
     description: 'Enable new Email verification webhook-based flow',
     flag: 'verificationFlow'
-}, {
-    title: 'Members Forward',
-    description: 'Use the new React-based members list instead of the Ember implementation',
-    flag: 'membersForward'
 }, {
     title: 'Welcome Emails Design Customization',
     description: 'Enable design customization options for welcome emails',

apps/admin/src/layout/app-sidebar/member-sidebar-views.ts

@@ -15,7 +15,7 @@ function isMemberSidebarView(view: SharedView): view is MemberSidebarView {
 }
 
 function getMemberViewUrl(filter: string) {
-    return `members-forward?${new URLSearchParams({filter}).toString()}`;
+    return `members?${new URLSearchParams({filter}).toString()}`;
 }
 
 function isMemberViewActive(currentSearch: string, filter: string) {
@@ -25,7 +25,7 @@ function isMemberViewActive(currentSearch: string, filter: string) {
 export function useMemberSidebarViews() {
     const location = useLocation();
     const sharedViews = useSharedViews('members');
-    const isOnMembersForward = location.pathname === '/members-forward';
+    const isOnMembers = location.pathname === '/members';
 
     return useMemo<NavSavedView[]>(() => {
         return sharedViews
@@ -34,7 +34,7 @@ export function useMemberSidebarViews() {
                 key: `${view.name}:${view.filter.filter}`,
                 name: view.name,
                 to: getMemberViewUrl(view.filter.filter),
-                isActive: isOnMembersForward && isMemberViewActive(location.search, view.filter.filter)
+                isActive: isOnMembers && isMemberViewActive(location.search, view.filter.filter)
             }));
-    }, [isOnMembersForward, location.search, sharedViews]);
+    }, [isOnMembers, location.search, sharedViews]);
 }

apps/admin/src/layout/app-sidebar/nav-content.helpers.test.ts

@@ -2,9 +2,8 @@ import {describe, expect, it} from 'vitest';
 import {getMembersNavActiveRoutes, isMembersNavActive} from './nav-content.helpers';
 
 describe('getMembersNavActiveRoutes', () => {
-    it('always includes members-forward alongside the legacy members routes', () => {
+    it('returns the members routes owned by the members section', () => {
         expect(getMembersNavActiveRoutes()).toEqual([
-            'members-forward',
             'members',
             'member',
             'member.new'
@@ -13,43 +12,39 @@ describe('getMembersNavActiveRoutes', () => {
 });
 
 describe('isMembersNavActive', () => {
-    it('uses the legacy route active state when members forward is disabled', () => {
-        expect(isMembersNavActive({
-            membersForwardEnabled: false,
-            isOnMembersForward: false,
-            hasActiveMemberView: false,
-            isMembersExpanded: false,
-            isLegacyMembersRouteActive: true
-        })).toBe(true);
-    });
-
     it('marks the base Members link active when a saved member view is active but collapsed', () => {
         expect(isMembersNavActive({
-            membersForwardEnabled: true,
-            isOnMembersForward: true,
+            isOnMembers: true,
             hasActiveMemberView: true,
             isMembersExpanded: false,
-            isLegacyMembersRouteActive: false
+            isMembersSectionRouteActive: true
         })).toBe(true);
     });
 
     it('marks the base Members link inactive when a saved member view is active and expanded', () => {
         expect(isMembersNavActive({
-            membersForwardEnabled: true,
-            isOnMembersForward: true,
+            isOnMembers: true,
             hasActiveMemberView: true,
             isMembersExpanded: true,
-            isLegacyMembersRouteActive: false
+            isMembersSectionRouteActive: true
         })).toBe(false);
     });
 
     it('falls back to the base Members link when no saved member view is active', () => {
         expect(isMembersNavActive({
-            membersForwardEnabled: true,
-            isOnMembersForward: true,
+            isOnMembers: true,
+            hasActiveMemberView: false,
+            isMembersExpanded: false,
+            isMembersSectionRouteActive: false
+        })).toBe(true);
+    });
+
+    it('uses the section route active state when outside the members list route', () => {
+        expect(isMembersNavActive({
+            isOnMembers: false,
             hasActiveMemberView: false,
             isMembersExpanded: false,
-            isLegacyMembersRouteActive: false
+            isMembersSectionRouteActive: true
         })).toBe(true);
     });
 });

apps/admin/src/layout/app-sidebar/nav-content.helpers.ts

@@ -1,32 +1,25 @@
 export function getMembersNavActiveRoutes(): string[] {
-    // TODO: Remove members-forward once the membersForward flag and legacy route split are gone.
-    return ['members-forward', 'members', 'member', 'member.new'];
+    return ['members', 'member', 'member.new'];
 }
 
 export function isMembersNavActive({
-    membersForwardEnabled,
-    isOnMembersForward,
+    isOnMembers,
     hasActiveMemberView,
     isMembersExpanded,
-    isLegacyMembersRouteActive
+    isMembersSectionRouteActive
 }: {
-    membersForwardEnabled: boolean;
-    isOnMembersForward: boolean;
+    isOnMembers: boolean;
     hasActiveMemberView: boolean;
     isMembersExpanded: boolean;
-    isLegacyMembersRouteActive: boolean;
+    isMembersSectionRouteActive: boolean;
 }): boolean {
-    if (!membersForwardEnabled) {
-        return isLegacyMembersRouteActive;
-    }
-
-    if (isOnMembersForward) {
+    if (isOnMembers) {
         if (!hasActiveMemberView) {
             return true;
         }
 
         return !isMembersExpanded;
     }
 
-    return isLegacyMembersRouteActive;
+    return isMembersSectionRouteActive;
 }

apps/admin/src/layout/app-sidebar/nav-content.tsx

@@ -83,7 +83,6 @@ function NavContent({ ...props }: React.ComponentProps<typeof SidebarGroup>) {
     const memberCount = useMemberCount();
     const routing = useEmberRouting();
     const commentModerationEnabled = useFeatureFlag('commentModeration');
-    const membersForwardEnabled = useFeatureFlag('membersForward');
 
     const showTags = currentUser && canManageTags(currentUser);
     const showMembers = currentUser && canManageMembers(currentUser);
@@ -92,20 +91,19 @@ function NavContent({ ...props }: React.ComponentProps<typeof SidebarGroup>) {
     const isPublishedPostsRouteActive = routing.isRouteActive('posts', {type: 'published'});
     const hasActivePostChild = isDraftPostsRouteActive || isScheduledPostsRouteActive || isPublishedPostsRouteActive || postCustomViews.some(view => view.isActive);
     const postsExpanded = savedPostsExpanded;
-    const isOnMembersForward = location.pathname === '/members-forward';
-    const hasActiveMemberView = isOnMembersForward && memberViews.some(view => view.isActive);
+    const isOnMembers = location.pathname === '/members';
+    const hasActiveMemberView = isOnMembers && memberViews.some(view => view.isActive);
     const membersExpanded = savedMembersExpanded;
     const membersNavActive = isMembersNavActive({
-        membersForwardEnabled,
-        isOnMembersForward,
+        isOnMembers,
         hasActiveMemberView,
         isMembersExpanded: membersExpanded,
-        isLegacyMembersRouteActive: routing.isRouteActive(getMembersNavActiveRoutes())
+        isMembersSectionRouteActive: routing.isRouteActive(getMembersNavActiveRoutes())
     });
     const postsRoute = routing.getRouteUrl('posts');
     const isPostsRouteActive = routing.isRouteActive('posts');
     const postsNavActive = isPostsRouteActive || (!postsExpanded && hasActivePostChild);
-    const membersRoute = membersForwardEnabled ? 'members-forward' : routing.getRouteUrl('members');
+    const membersRoute = routing.getRouteUrl('members');
 
     return (
         <SidebarGroup {...props}>
@@ -182,7 +180,7 @@ function NavContent({ ...props }: React.ComponentProps<typeof SidebarGroup>) {
 
                     {showMembers && (
                         <>
-                            {membersForwardEnabled && hasMemberViews ? (
+                            {hasMemberViews ? (
                                 <NavMenuItem.Collapsible
                                     expanded={membersExpanded}
                                     id="members-submenu"

apps/posts/src/routes.tsx

@@ -70,7 +70,7 @@ export const routes: RouteObject[] = [
                 lazy: lazyComponent(() => import('@views/comments/comments'))
             },
             {
-                path: 'members-forward',
+                path: 'members',
                 lazy: lazyComponent(() => import('@views/members/members'))
             },
 

e2e/tests/admin/members/custom-views.test.ts

@@ -30,8 +30,6 @@ async function saveCurrentView(page: Page, name: string) {
 }
 
 test.describe('Ghost Admin - Member Saved Views', () => {
-    test.use({labs: {membersForward: true}});
-
     let memberFactory: MemberFactory;
 
     test.beforeEach(async ({page}) => {
@@ -48,7 +46,7 @@ test.describe('Ghost Admin - Member Saved Views', () => {
         });
 
         const sidebar = new SidebarPage(page);
-        await page.goto('/ghost/#/members-forward');
+        await page.goto('/ghost/#/members');
 
         await addFilter(page, 'Name', 'active-nav');
         await saveCurrentView(page, 'View A');

e2e/tests/admin/members/import.test.ts

@@ -7,7 +7,7 @@ import {expect, test} from '@/helpers/playwright';
 
 test.describe('Ghost Admin - Members Import', () => {
     test('imports members from CSV via the UI', async ({page}) => {
-        const membersPage = new MembersPage(page, {route: 'members-forward'});
+        const membersPage = new MembersPage(page);
         const importModal = new MembersImportModal(page);
 
         const timestamp = Date.now();

ghost/admin/app/components/posts-list/list-item.hbs

@@ -149,7 +149,7 @@
     <div class="gh-post-list-metrics-container">
         {{!-- Opened / Signups column --}}
         {{#if (and @post.showEmailOpenAnalytics @post.showEmailClickAnalytics) }}
-            <LinkTo @route="members" @query={{hash filterParam=(concat "opened_emails.post_id:" @post.id) }} class="permalink gh-list-data gh-post-list-metrics">
+            <LinkTo @route="members" @query={{hash filter=(concat "opened_emails.post_id:" @post.id) }} class="permalink gh-list-data gh-post-list-metrics">
                 <span class="gh-content-email-stats-value">
                     {{#if this.isHovered}}
                         {{format-number @post.email.openedCount}}
@@ -169,7 +169,7 @@
 
         {{!-- Clicked / Conversions column --}}
         {{#if @post.showEmailClickAnalytics }}
-            <LinkTo @route="members" @query={{hash filterParam=(concat "clicked_links.post_id:" @post.id) }} class="permalink gh-list-data gh-post-list-metrics">
+            <LinkTo @route="members" @query={{hash filter=(concat "clicked_links.post_id:" @post.id) }} class="permalink gh-list-data gh-post-list-metrics">
                 <span class="gh-content-email-stats-value">
                     {{#if this.isHovered}}
                         {{format-number @post.count.clicks}}
@@ -183,7 +183,7 @@
             </LinkTo>
         {{else}}
             {{#if @post.showEmailOpenAnalytics }}
-                <LinkTo @route="members" @query={{hash filterParam=(concat "opened_emails.post_id:" @post.id) }} class="permalink gh-list-data gh-post-list-metrics">
+                <LinkTo @route="members" @query={{hash filter=(concat "opened_emails.post_id:" @post.id) }} class="permalink gh-list-data gh-post-list-metrics">
                     <span class="gh-content-email-stats-value">
                         {{#if this.isHovered}}
                             {{format-number @post.email.openedCount}}