fix: global permissions for live preview (#3854)

test/live-preview/e2e.spec.ts

@@ -19,6 +19,17 @@ const goToDoc = async (page: Page) => {
   await linkToDoc.click()
 }
 
+const goToCollectionPreview = async (page: Page): Promise<void> => {
+  await goToDoc(page)
+  await page.goto(`${page.url()}/preview`)
+}
+
+const goToGlobalPreview = async (page: Page, slug: string): Promise<void> => {
+  const global = new AdminUrlUtil(serverURL, slug)
+  const previewURL = `${global.global(slug)}/preview`
+  await page.goto(previewURL)
+}
+
 describe('Live Preview', () => {
   let page: Page
 
@@ -49,24 +60,29 @@ describe('Live Preview', () => {
   })
 
   test('collection - has route', async () => {
-    await goToDoc(page)
-    const docURL = page.url()
-    await page.goto(`${docURL}/preview`)
-    expect(page.url()).toBe(`${docURL}/preview`)
+    const url = page.url()
+    await goToCollectionPreview(page)
+    expect(page.url()).toBe(`${url}/preview`)
   })
 
   test('collection - renders iframe', async () => {
-    await goToDoc(page)
-    const docURL = page.url()
-    await page.goto(`${docURL}/preview`)
-    expect(page.url()).toBe(`${docURL}/preview`)
+    await goToCollectionPreview(page)
     const iframe = page.locator('iframe.live-preview-iframe')
     await expect(iframe).toBeVisible()
   })
 
+  test('collection - can edit fields', async () => {
+    await goToCollectionPreview(page)
+    const field = page.locator('#field-title')
+    await expect(field).toBeVisible()
+    await field.fill('Title 1')
+    await saveDocAndAssert(page)
+  })
+
   test('global - has tab', async () => {
     const global = new AdminUrlUtil(serverURL, 'header')
     await page.goto(global.global('header'))
+
     const docURL = page.url()
     const pathname = new URL(docURL).pathname
 
@@ -80,31 +96,35 @@ describe('Live Preview', () => {
   })
 
   test('global - has route', async () => {
-    const global = new AdminUrlUtil(serverURL, 'header')
-    const previewURL = `${global.global('header')}/preview`
-    await page.goto(previewURL)
-    expect(page.url()).toBe(previewURL)
+    const url = page.url()
+    await goToGlobalPreview(page, 'header')
+    expect(page.url()).toBe(`${url}/preview`)
   })
 
   test('global - renders iframe', async () => {
-    const global = new AdminUrlUtil(serverURL, 'header')
-    await page.goto(global.global('header'))
-    const docURL = page.url()
-    await page.goto(`${docURL}/preview`)
-    expect(page.url()).toBe(`${docURL}/preview`)
+    await goToGlobalPreview(page, 'header')
     const iframe = page.locator('iframe.live-preview-iframe')
     await expect(iframe).toBeVisible()
   })
 
+  test('global - can edit fields', async () => {
+    await goToGlobalPreview(page, 'header')
+    const field = page.locator('input#field-navItems__0__link__newTab')
+    await expect(field).toBeVisible()
+    await expect(field).toBeEnabled()
+    await field.check()
+    await saveDocAndAssert(page)
+  })
+
   test('properly measures iframe and displays size', async () => {
     await page.goto(url.create)
     await page.locator('#field-title').fill('Title 3')
     await page.locator('#field-slug').fill('slug-3')
 
     await saveDocAndAssert(page)
-    const docURL = page.url()
-    await page.goto(`${docURL}/preview`)
-    expect(page.url()).toBe(`${docURL}/preview`)
+    await goToCollectionPreview(page)
+    expect(page.url()).toContain('/preview')
+
     const iframe = page.locator('iframe')
 
     // Measure the actual iframe size and compare it with the inputs rendered in the toolbar
@@ -137,9 +157,8 @@ describe('Live Preview', () => {
     await page.locator('#field-slug').fill('slug-4')
 
     await saveDocAndAssert(page)
-    const docURL = page.url()
-    await page.goto(`${docURL}/preview`)
-    expect(page.url()).toBe(`${docURL}/preview`)
+    await goToCollectionPreview(page)
+    expect(page.url()).toContain('/preview')
 
     const breakpointSelector = page.locator(
       '.live-preview-toolbar select[name="live-preview-breakpoint"]',

test/live-preview/globals/Footer.ts

@@ -6,6 +6,7 @@ export const Footer: GlobalConfig = {
   slug: 'footer',
   access: {
     read: () => true,
+    update: () => true,
   },
   fields: [
     {

test/live-preview/globals/Header.ts

@@ -6,6 +6,7 @@ export const Header: GlobalConfig = {
   slug: 'header',
   access: {
     read: () => true,
+    update: () => true,
   },
   fields: [
     {