Removed members-forward route (TryGhost#27040)

closes https://linear.app/ghost/issue/BER-3506/rework-feature-flagging-for-release

Reworked `membersForward` to gate React rendering on `/members` instead of changing sidebar URLs. Added React support for `/members/import`, kept Ember fallback routes, prevented duplicate Ember rendering under the flag, and restored missing members access checks.

Author: jonatansberg

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

@@ -15,17 +15,20 @@ 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) {
+function isMemberViewActive(pathname: string, currentSearch: string, filter: string) {
+    if (pathname !== '/members') {
+        return false;
+    }
+
     return new URLSearchParams(currentSearch).get('filter') === filter;
 }
 
 export function useMemberSidebarViews() {
     const location = useLocation();
     const sharedViews = useSharedViews('members');
-    const isOnMembersForward = location.pathname === '/members-forward';
 
     return useMemo<NavSavedView[]>(() => {
         return sharedViews
@@ -34,7 +37,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: isMemberViewActive(location.pathname, location.search, view.filter.filter)
             }));
-    }, [isOnMembersForward, location.search, sharedViews]);
+    }, [location.pathname, location.search, sharedViews]);
 }

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

@@ -2,7 +2,6 @@ import React from "react"
 
 import {SidebarGroup, SidebarGroupContent, SidebarMenu, SidebarMenuBadge} from "@tryghost/shade/components"
 import {formatNumber, LucideIcon} from "@tryghost/shade/utils"
-import { useLocation } from "@tryghost/admin-x-framework";
 import { useCurrentUser } from "@tryghost/admin-x-framework/api/current-user";
 import { canManageMembers, canManageTags } from "@tryghost/admin-x-framework/api/users";
 import { NavMenuItem } from "./nav-menu-item";
@@ -11,7 +10,6 @@ import { useNavigationExpanded } from "./hooks/use-navigation-preferences";
 import { NavCustomViews } from "./nav-custom-views";
 import { NavMemberViews } from "./nav-member-views";
 import { useMemberSidebarViews } from "./member-sidebar-views";
-import { getMembersNavActiveRoutes, isMembersNavActive } from "./nav-content.helpers";
 import { useCustomSidebarViews } from "./use-custom-sidebar-views";
 import { useEmberRouting } from "@/ember-bridge";
 import { useFeatureFlag } from "@/hooks/use-feature-flag";
@@ -72,12 +70,12 @@ function NavContent({ ...props }: React.ComponentProps<typeof SidebarGroup>) {
     const [savedMembersExpanded, setMembersExpanded] = useNavigationExpanded('members');
     const postCustomViews = useCustomSidebarViews('posts');
     const memberViews = useMemberSidebarViews();
-    const hasMemberViews = memberViews.length > 0;
-    const location = useLocation();
     const memberCount = useMemberCount();
     const routing = useEmberRouting();
     const commentModerationEnabled = useFeatureFlag('commentModeration');
     const membersForwardEnabled = useFeatureFlag('membersForward');
+    const visibleMemberViews = membersForwardEnabled ? memberViews : [];
+    const hasMemberViews = visibleMemberViews.length > 0;
 
     const showTags = currentUser && canManageTags(currentUser);
     const showMembers = currentUser && canManageMembers(currentUser);
@@ -86,20 +84,14 @@ 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 hasActiveMemberChild = visibleMemberViews.some(view => view.isActive);
     const membersExpanded = savedMembersExpanded;
-    const membersNavActive = isMembersNavActive({
-        membersForwardEnabled,
-        isOnMembersForward,
-        hasActiveMemberView,
-        isMembersExpanded: membersExpanded,
-        isLegacyMembersRouteActive: routing.isRouteActive(getMembersNavActiveRoutes())
-    });
+    const isMembersBaseRouteActive = routing.isRouteActive(['members', 'member', 'member.new', 'members-activity']);
     const postsRoute = routing.getRouteUrl('posts');
     const isPostsRouteActive = routing.isRouteActive('posts');
     const postsNavActive = isPostsRouteActive || (!postsExpanded && hasActivePostChild);
-    const membersRoute = membersForwardEnabled ? 'members-forward' : routing.getRouteUrl('members');
+    const membersNavActive = (isMembersBaseRouteActive && !hasActiveMemberChild) || (!membersExpanded && hasActiveMemberChild);
+    const membersRoute = routing.getRouteUrl('members');
 
     return (
         <SidebarGroup {...props}>
@@ -176,7 +168,7 @@ function NavContent({ ...props }: React.ComponentProps<typeof SidebarGroup>) {
 
                     {showMembers && (
                         <>
-                            {membersForwardEnabled && hasMemberViews ? (
+                            {hasMemberViews ? (
                                 <NavMenuItem.Collapsible
                                     expanded={membersExpanded}
                                     id="members-submenu"

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

@@ -0,0 +1,13 @@
+import {Outlet} from "@tryghost/admin-x-framework";
+import {EmberFallback} from "./ember-bridge";
+import {useFeatureFlag} from "./hooks/use-feature-flag";
+
+export function MembersRouteGate() {
+    const membersForwardEnabled = useFeatureFlag("membersForward");
+
+    if (!membersForwardEnabled) {
+        return <EmberFallback />;
+    }
+
+    return <Outlet />;
+}

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

@@ -0,0 +1,82 @@
+import {render, screen} from '@testing-library/react';
+import React from 'react';
+import {beforeEach, describe, expect, it, vi} from 'vitest';
+import {MembersRoute} from './members-route';
+
+const {mockCanManageMembers, mockUseCurrentUser} = vi.hoisted(() => ({
+    mockCanManageMembers: vi.fn(),
+    mockUseCurrentUser: vi.fn()
+}));
+
+vi.mock('@tryghost/admin-x-framework', () => ({
+    Navigate: ({replace, to}: {replace?: boolean; to: string}) => React.createElement('div', {
+        'data-replace': String(Boolean(replace)),
+        'data-testid': 'navigate',
+        'data-to': to
+    })
+}));
+
+vi.mock('@tryghost/admin-x-framework/api/current-user', () => ({
+    useCurrentUser: mockUseCurrentUser
+}));
+
+vi.mock('@tryghost/admin-x-framework/api/users', () => ({
+    canManageMembers: mockCanManageMembers
+}));
+
+vi.mock('./members-route-gate', () => ({
+    MembersRouteGate: () => React.createElement('div', {'data-testid': 'members-route-gate'})
+}));
+
+describe('MembersRoute', () => {
+    beforeEach(() => {
+        mockCanManageMembers.mockReturnValue(true);
+        mockUseCurrentUser.mockReturnValue({
+            data: {
+                id: '1',
+                roles: [{name: 'Administrator'}]
+            },
+            isError: false,
+            isLoading: false
+        });
+    });
+
+    it('renders the members route gate for authorized users', () => {
+        render(<MembersRoute />);
+
+        expect(screen.getByTestId('members-route-gate')).toBeInTheDocument();
+    });
+
+    it('redirects users without member permissions to home', () => {
+        mockCanManageMembers.mockReturnValue(false);
+
+        render(<MembersRoute />);
+
+        expect(screen.getByTestId('navigate')).toHaveAttribute('data-to', '/');
+        expect(screen.getByTestId('navigate')).toHaveAttribute('data-replace', 'true');
+    });
+
+    it('renders nothing while the current user is still loading', () => {
+        mockUseCurrentUser.mockReturnValue({
+            data: undefined,
+            isError: false,
+            isLoading: true
+        });
+
+        const {container} = render(<MembersRoute />);
+
+        expect(container).toBeEmptyDOMElement();
+    });
+
+    it('redirects to home when the current user is unavailable after loading', () => {
+        mockUseCurrentUser.mockReturnValue({
+            data: undefined,
+            isError: false,
+            isLoading: false
+        });
+
+        render(<MembersRoute />);
+
+        expect(screen.getByTestId('navigate')).toHaveAttribute('data-to', '/');
+    });
+});

apps/admin/src/members-route-gate.tsx

@@ -0,0 +1,22 @@
+import {Navigate} from "@tryghost/admin-x-framework";
+import {useCurrentUser} from "@tryghost/admin-x-framework/api/current-user";
+import {canManageMembers} from "@tryghost/admin-x-framework/api/users";
+import {MembersRouteGate} from "./members-route-gate";
+
+export function MembersRoute() {
+    const {data: currentUser, isError, isLoading} = useCurrentUser();
+
+    if (!currentUser) {
+        if (isError || !isLoading) {
+            return <Navigate replace to="/" />;
+        }
+
+        return null;
+    }
+
+    if (!canManageMembers(currentUser)) {
+        return <Navigate replace to="/" />;
+    }
+
+    return <MembersRouteGate />;
+}

apps/admin/src/members-route.test.tsx

@@ -15,6 +15,7 @@ import MyProfileRedirect from "./my-profile-redirect";
 // Ember
 import { EmberFallback, ForceUpgradeGuard } from "./ember-bridge";
 import type { RouteHandle } from "./ember-bridge";
+import { MembersRoute } from "./members-route";
 
 import { NotFound } from "./not-found";
 
@@ -40,7 +41,8 @@ const EMBER_ROUTES: string[] = [
     "/tags/new",
     "/explore/*",
     "/migrate/*",
-    "/members/*",
+    "/members/new",
+    "/members/:member_id",
     "/members-activity",
     "/designsandbox",
     "/mentions",
@@ -53,6 +55,33 @@ const emberFallbackRoutes: RouteObject[] = EMBER_ROUTES.map(path => ({
     Component: EmberFallback,
     handle: emberFallbackHandle,
 }));
+
+const membersRoute: RouteObject = {
+    path: "/members",
+    element: <MembersRoute />,
+    handle: emberFallbackHandle,
+    children: [
+        {
+            index: true,
+            lazy: lazyComponent(() => import("@tryghost/posts/src/views/members/members"))
+        },
+        {
+            path: "import",
+            lazy: lazyComponent(() => import("@tryghost/posts/src/views/members/members"))
+        }
+    ]
+};
+
+const membersForwardRedirectRoute: RouteObject = {
+    path: "/members-forward",
+    // TODO: Remove once the legacy Ember members list is deleted.
+    handle: emberFallbackHandle,
+    loader: ({request}) => {
+        const url = new URL(request.url);
+        return redirect(`/members${url.search}`);
+    }
+};
+
 export const routes: RouteObject[] = [
     {
         // ForceUpgradeGuard wraps all routes to redirect to /pro when in force upgrade mode.
@@ -69,6 +98,8 @@ export const routes: RouteObject[] = [
                 Component: EmberFallback,
                 handle: emberFallbackHandle,
             },
+            membersRoute,
+            membersForwardRedirectRoute,
             {
                 element: (
                     <PostsAppContextProvider value={{ fromAnalytics: true }}>