Changed members routes to use feature-gated rendering

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

This keeps the members list and import flow on the stable /members routes, preserves the Ember fallback behind the flag, and aligns the e2e suite layout around members and members-legacy.

Author: jonatansberg

apps/admin/src/layout/app-sidebar/member-sidebar-views.test.tsx

@@ -0,0 +1,67 @@
+// @vitest-environment jsdom
+
+import {describe, expect, it, vi} from 'vitest';
+import {renderHook} from '@testing-library/react';
+import {type SharedView} from './shared-views';
+import {useMemberSidebarViews} from './member-sidebar-views';
+
+const {mockUseLocation, mockUseSharedViews} = vi.hoisted(() => ({
+    mockUseLocation: vi.fn(),
+    mockUseSharedViews: vi.fn<(route?: string) => SharedView[]>()
+}));
+
+vi.mock('@tryghost/admin-x-framework', () => ({
+    useLocation: mockUseLocation
+}));
+
+vi.mock('./shared-views', () => ({
+    useSharedViews: mockUseSharedViews
+}));
+
+describe('useMemberSidebarViews', () => {
+    it('builds saved member view URLs on the members route', () => {
+        mockUseLocation.mockReturnValue({
+            pathname: '/members',
+            search: '?filter=status%3Afree'
+        });
+        mockUseSharedViews.mockReturnValue([
+            {
+                name: 'Free members',
+                route: 'members',
+                filter: {filter: 'status:free'}
+            }
+        ]);
+
+        const {result} = renderHook(() => useMemberSidebarViews());
+
+        expect(result.current).toEqual([
+            {
+                key: 'Free members:status:free',
+                name: 'Free members',
+                to: 'members?filter=status%3Afree',
+                isActive: true
+            }
+        ]);
+    });
+
+    it('does not mark saved member views active off the base members route', () => {
+        mockUseLocation.mockReturnValue({
+            pathname: '/members/import',
+            search: '?filter=status%3Afree'
+        });
+        mockUseSharedViews.mockReturnValue([
+            {
+                name: 'Free members',
+                route: 'members',
+                filter: {filter: 'status:free'}
+            }
+        ]);
+
+        const {result} = renderHook(() => useMemberSidebarViews());
+
+        expect(result.current[0]).toMatchObject({
+            to: 'members?filter=status%3Afree',
+            isActive: false
+        });
+    });
+});

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 isOnMembersListRoute = 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: isOnMembersListRoute && isMemberViewActive(location.search, view.filter.filter)
             }));
-    }, [isOnMembersForward, location.search, sharedViews]);
+    }, [isOnMembersListRoute, 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 only the members routes that are still Ember-owned', () => {
         expect(getMembersNavActiveRoutes()).toEqual([
-            'members-forward',
             'members',
             'member',
             'member.new'
@@ -13,10 +12,10 @@ describe('getMembersNavActiveRoutes', () => {
 });
 
 describe('isMembersNavActive', () => {
-    it('uses the legacy route active state when members forward is disabled', () => {
+    it('uses the legacy route active state when the feature flag is disabled', () => {
         expect(isMembersNavActive({
             membersForwardEnabled: false,
-            isOnMembersForward: false,
+            isOnMembersRoute: false,
             hasActiveMemberView: false,
             isMembersExpanded: false,
             isLegacyMembersRouteActive: true
@@ -26,7 +25,7 @@ describe('isMembersNavActive', () => {
     it('marks the base Members link active when a saved member view is active but collapsed', () => {
         expect(isMembersNavActive({
             membersForwardEnabled: true,
-            isOnMembersForward: true,
+            isOnMembersRoute: true,
             hasActiveMemberView: true,
             isMembersExpanded: false,
             isLegacyMembersRouteActive: false
@@ -36,17 +35,17 @@ describe('isMembersNavActive', () => {
     it('marks the base Members link inactive when a saved member view is active and expanded', () => {
         expect(isMembersNavActive({
             membersForwardEnabled: true,
-            isOnMembersForward: true,
+            isOnMembersRoute: true,
             hasActiveMemberView: true,
             isMembersExpanded: true,
             isLegacyMembersRouteActive: false
         })).toBe(false);
     });
 
-    it('falls back to the base Members link when no saved member view is active', () => {
+    it('marks the base Members link active on React-owned members routes when no saved member view is active', () => {
         expect(isMembersNavActive({
             membersForwardEnabled: true,
-            isOnMembersForward: true,
+            isOnMembersRoute: true,
             hasActiveMemberView: false,
             isMembersExpanded: false,
             isLegacyMembersRouteActive: false

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

@@ -1,17 +1,16 @@
 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,
+    isOnMembersRoute,
     hasActiveMemberView,
     isMembersExpanded,
     isLegacyMembersRouteActive
 }: {
     membersForwardEnabled: boolean;
-    isOnMembersForward: boolean;
+    isOnMembersRoute: boolean;
     hasActiveMemberView: boolean;
     isMembersExpanded: boolean;
     isLegacyMembersRouteActive: boolean;
@@ -20,7 +19,7 @@ export function isMembersNavActive({
         return isLegacyMembersRouteActive;
     }
 
-    if (isOnMembersForward) {
+    if (isOnMembersRoute) {
         if (!hasActiveMemberView) {
             return true;
         }

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

@@ -92,20 +92,20 @@ 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 isOnMembersRoute = location.pathname === '/members' || location.pathname === '/members/import';
+    const hasActiveMemberView = memberViews.some(view => view.isActive);
     const membersExpanded = savedMembersExpanded;
     const membersNavActive = isMembersNavActive({
         membersForwardEnabled,
-        isOnMembersForward,
+        isOnMembersRoute,
         hasActiveMemberView,
         isMembersExpanded: membersExpanded,
         isLegacyMembersRouteActive: 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}>

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

@@ -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/routes.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 { MembersRouteGate } from "./members-route-gate";
 
 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,30 @@ const emberFallbackRoutes: RouteObject[] = EMBER_ROUTES.map(path => ({
     Component: EmberFallback,
     handle: emberFallbackHandle,
 }));
+
+const membersRoute: RouteObject = {
+    path: "/members",
+    element: <MembersRouteGate />,
+    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: () => redirect("/members")
+};
+
 export const routes: RouteObject[] = [
     {
         // ForceUpgradeGuard wraps all routes to redirect to /pro when in force upgrade mode.
@@ -69,6 +95,8 @@ export const routes: RouteObject[] = [
                 Component: EmberFallback,
                 handle: emberFallbackHandle,
             },
+            membersRoute,
+            membersForwardRedirectRoute,
             {
                 element: (
                     <PostsAppContextProvider value={{ fromAnalytics: true }}>

apps/posts/src/routes.tsx

@@ -69,10 +69,6 @@ export const routes: RouteObject[] = [
                 path: 'comments',
                 lazy: lazyComponent(() => import('@views/comments/comments'))
             },
-            {
-                path: 'members-forward',
-                lazy: lazyComponent(() => import('@views/members/members'))
-            },
 
             // Error handling
             {

apps/posts/src/views/members/components/bulk-action-modals/import-members-modal.tsx

@@ -1,5 +1,6 @@
 import {CompleteStep, ErrorStep, InitStep, MappingStep, ProcessingStep} from './import-members/components';
 import {Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle, cn} from '@tryghost/shade';
+import {type ImportResponse} from './import-members/state';
 import {MembersFieldMapping, detectFieldTypes} from './import-members/mapping';
 import {buildImportResponse} from './import-members/upload';
 import {createInitialImportState, importReducer} from './import-members/reducer';
@@ -11,13 +12,15 @@ import {useLabelPicker} from '@src/hooks/use-label-picker';
 interface ImportMembersModalProps {
     open: boolean;
     onOpenChange: (open: boolean) => void;
-    onComplete?: () => void;
+    onComplete?: (importResponse?: ImportResponse) => void;
+    onClose?: (importResponse?: ImportResponse) => void;
 }
 
 export function ImportMembersModal({
     open,
     onOpenChange,
-    onComplete
+    onComplete,
+    onClose
 }: ImportMembersModalProps) {
     const [state, dispatch] = useReducer(importReducer, undefined, createInitialImportState);
     const errorCsvUrlRef = useRef<string | null>(null);
@@ -28,9 +31,11 @@ export function ImportMembersModal({
     });
 
     const revokeErrorCsvUrl = useCallback(() => {
-        if (errorCsvUrlRef.current) {
+        if (errorCsvUrlRef.current && typeof URL.revokeObjectURL === 'function') {
             URL.revokeObjectURL(errorCsvUrlRef.current);
             errorCsvUrlRef.current = null;
+        } else if (errorCsvUrlRef.current) {
+            errorCsvUrlRef.current = null;
         }
     }, []);
 
@@ -50,10 +55,12 @@ export function ImportMembersModal({
             return;
         }
         if (!isOpen) {
+            const importResponse = state.importResponse ?? undefined;
             reset();
+            onClose?.(importResponse);
         }
         onOpenChange(isOpen);
-    }, [onOpenChange, reset, state.status]);
+    }, [onClose, onOpenChange, reset, state.importResponse, state.status]);
 
     useEffect(() => {
         if (!state.file) {
@@ -257,7 +264,7 @@ export function ImportMembersModal({
                 type: 'UPLOAD_COMPLETE',
                 importResponse
             });
-            onComplete?.();
+            onComplete?.(importResponse);
         } catch {
             dispatch({
                 type: 'UPLOAD_ERROR',

apps/posts/src/views/members/components/bulk-action-modals/import-members/state.ts

@@ -2,12 +2,18 @@ import {MembersFieldMapping} from './mapping';
 
 export type ImportStatus = 'INIT' | 'MAPPING' | 'UPLOADING' | 'PROCESSING' | 'COMPLETE' | 'ERROR';
 
+export interface ImportLabel {
+    name: string;
+    slug: string;
+}
+
 export interface ImportResponse {
     importedCount: number;
     errorCount: number;
     errorCsvUrl: string;
     errorCsvName: string;
     errorList: Array<{message: string; count: number}>;
+    importLabel?: ImportLabel;
 }
 
 export interface ImportState {