feat(next): add redirect from ${adminRoute}/collections to ${adminRoute} (#13061)

Occasionally, I find myself on a URL like
`https://domain.com/admin/collections/myCollection/docId` and I modify
the URL with the intention of going to the admin panel, but I shorten it
in the wrong place: `https://domain.com/admin/collections`.

The confusion arises because the admin panel basically displays the
collections.

I think this redirect is a subtle but nice touch, since `/collections`
is a URL that doesn't exist.

EDIT: now I'm doing also the same thing for `/globals`

Author: GermanJablo

packages/next/src/views/Root/index.tsx

@@ -17,6 +17,7 @@ import React from 'react'
 import { DefaultTemplate } from '../../templates/Default/index.js'
 import { MinimalTemplate } from '../../templates/Minimal/index.js'
 import { initPage } from '../../utilities/initPage/index.js'
+import { getCustomViewByRoute } from './getCustomViewByRoute.js'
 import { getRouteData } from './getRouteData.js'
 
 export type GenerateViewMetadata = (args: {
@@ -62,6 +63,32 @@ export const RootPage = async ({
 
   const searchParams = await searchParamsPromise
 
+  // Redirect `${adminRoute}/collections` to `${adminRoute}`
+  if (segments.length === 1 && segments[0] === 'collections') {
+    const { viewKey } = getCustomViewByRoute({
+      config,
+      currentRoute: '/collections',
+    })
+
+    // Only redirect if there's NO custom view configured for /collections
+    if (!viewKey) {
+      redirect(adminRoute)
+    }
+  }
+
+  // Redirect `${adminRoute}/globals` to `${adminRoute}`
+  if (segments.length === 1 && segments[0] === 'globals') {
+    const { viewKey } = getCustomViewByRoute({
+      config,
+      currentRoute: '/globals',
+    })
+
+    // Only redirect if there's NO custom view configured for /globals
+    if (!viewKey) {
+      redirect(adminRoute)
+    }
+  }
+
   const {
     browseByFolderSlugs,
     DefaultView,

test/admin-root/e2e.spec.ts

@@ -64,6 +64,13 @@ test.describe('Admin Panel (Root)', () => {
   //   })
   // })
 
+  test('should redirect `${adminRoute}/collections` to `${adminRoute}', async () => {
+    const collectionsURL = `${url.admin}/collections`
+    await page.goto(collectionsURL)
+    // Should redirect to dashboard
+    await expect.poll(() => page.url()).toBe(`${url.admin}`)
+  })
+
   test('renders admin panel at root', async () => {
     await page.goto(url.admin)
     const pageURL = page.url()

test/admin/config.ts

@@ -83,6 +83,10 @@ export default buildConfigWithDefaults({
       views: {
         // Dashboard: CustomDashboardView,
         // Account: CustomAccountView,
+        collections: {
+          Component: '/components/views/CustomView/index.js#CustomView',
+          path: '/collections',
+        },
         CustomDefaultView: {
           Component: '/components/views/CustomDefault/index.js#CustomDefaultView',
           path: '/custom-default-view',

test/admin/e2e/general/e2e.spec.ts

@@ -358,6 +358,19 @@ describe('General', () => {
       const response = await page.goto(customLogoutRouteURL)
       expect(response.status() !== 404).toBeTruthy()
     })
+
+    test('should not redirect `${adminRoute}/collections` to `${adminRoute} if there is a custom view', async () => {
+      const collectionsURL = `${serverURL}/admin/collections`
+      await page.goto(collectionsURL)
+      await expect(page.getByText('Custom View').first()).toBeVisible()
+    })
+
+    test('should redirect `${adminRoute}/globals` to `${adminRoute}', async () => {
+      const globalsURL = `${serverURL}/admin/globals`
+      await page.goto(globalsURL)
+      // Should redirect to dashboard
+      await expect.poll(() => page.url()).toBe(`${serverURL}/admin`)
+    })
   })
 
   describe('navigation', () => {