🐛 Fixed contributor profile editor navigation on close (TryGhost#25629)

ref https://linear.app/ghost/issue/BER-3039

When a contributor attempted to close their profile page they'd be re-directed back to it. This was caused by competing rules and side effects in the Settings component and the Ember router. This was fixed by lifting the redirect into the Router, which removed the conflict and allowed contributors to navigate away from their profile page.

Author: rob-ghost

apps/admin-x-settings/src/components/settings/general/user-detail-modal.tsx

@@ -220,7 +220,8 @@ const UserDetailModalContent: React.FC<{user: User}> = ({user}) => {
         if (canAccessSettings(currentUser)) {
             updateRoute('staff');
         } else {
-            updateRoute({isExternal: true, route: 'analytics'});
+            // Contributors can't access settings, exit to let the shell handle navigation
+            updateRoute({isExternal: true, route: ''});
         }
     }, [currentUser, updateRoute]);
 

apps/admin-x-settings/src/main-content.tsx

@@ -22,7 +22,7 @@ const Page: React.FC<{children: ReactNode}> = ({children}) => {
 
 const MainContent: React.FC = () => {
     const {currentUser} = useGlobalData();
-    const {route, updateRoute, loadingModal} = useRouting();
+    const {loadingModal} = useRouting();
     const {isDirty} = useGlobalDirtyState();
 
     const navigateAway = (escLocation: string) => {
@@ -50,12 +50,8 @@ const MainContent: React.FC = () => {
         toast.remove();
     }, []);
 
-    useEffect(() => {
-        if (!canAccessSettings(currentUser) && route !== `staff/${currentUser.slug}`) {
-            updateRoute(`staff/${currentUser.slug}`);
-        }
-    }, [currentUser, route, updateRoute]);
-
+    // Contributors/Authors only see their profile modal (rendered via routing)
+    // Don't render the main settings content for them
     if (!canAccessSettings(currentUser)) {
         return null;
     }

apps/admin-x-settings/test/acceptance/permissions.test.ts

@@ -16,20 +16,22 @@ test.describe('User permissions', async () => {
         await expect(page.getByTestId('title-and-description')).toBeHidden();
     });
 
+    // Note: Author/Contributor redirect to profile is handled by the Ember router (settings-x.js),
+    // not by the React app. These tests verify the UI renders correctly when on the profile route.
     test('Authors can only see their own profile', async ({page}) => {
         await mockApi({page, requests: {
             ...globalDataRequests,
             browseMe: {...globalDataRequests.browseMe, response: meWithRole('Author')}
         }});
 
-        await page.goto('/');
+        // Navigate directly to profile route using hash-based routing
+        // (Ember router handles redirect in production)
+        await page.goto('/#/settings/staff/owner');
 
         await expect(page.getByTestId('user-detail-modal')).toBeVisible();
         await expect(page.getByTestId('sidebar')).toBeHidden();
         await expect(page.getByTestId('users')).toBeHidden();
         await expect(page.getByTestId('title-and-description')).toBeHidden();
-
-        expect(page.url()).toMatch(/\/owner$/);
     });
 
     test('Contributors can only see their own profile', async ({page}) => {
@@ -38,13 +40,13 @@ test.describe('User permissions', async () => {
             browseMe: {...globalDataRequests.browseMe, response: meWithRole('Contributor')}
         }});
 
-        await page.goto('/');
+        // Navigate directly to profile route using hash-based routing
+        // (Ember router handles redirect in production)
+        await page.goto('/#/settings/staff/owner');
 
         await expect(page.getByTestId('user-detail-modal')).toBeVisible();
         await expect(page.getByTestId('sidebar')).toBeHidden();
         await expect(page.getByTestId('users')).toBeHidden();
         await expect(page.getByTestId('title-and-description')).toBeHidden();
-
-        expect(page.url()).toMatch(/\/owner$/);
     });
 });

ghost/admin/app/routes/settings-x.js

@@ -7,6 +7,22 @@ export default class SettingsXRoute extends AuthenticatedRoute {
     @service ui;
     @service modals;
 
+    beforeModel(transition) {
+        super.beforeModel(...arguments);
+
+        // Contributors and Authors can only access their own profile in settings
+        if (this.session.user.isAuthorOrContributor) {
+            // Check if they're trying to access their own profile route
+            const subPath = transition.to?.params?.sub;
+            const ownProfilePath = `staff/${this.session.user.slug}`;
+
+            // Only allow access to their own profile, redirect everything else
+            if (subPath !== ownProfilePath) {
+                return this.transitionTo('settings-x.settings-x', ownProfilePath);
+            }
+        }
+    }
+
     activate() {
         super.activate(...arguments);