chore(core): end "Array Tree Editing" beta (#7411)

* chore(core): end "Array Tree Editing" beta

* chore(tests): skip tree editing tests

* chore(types): deprecate treeEditing option in arrays

* fix(tests): revert array tests to before tree editing dialog

Author: pedrobonamin

packages/@sanity/types/src/schema/definition/type/array.ts

@@ -27,6 +27,7 @@ export interface ArrayOptions<V = unknown> extends SearchConfiguration {
   /**
    * A boolean flag to enable or disable tree editing for the array.
    * If there are any nested arrays, they will inherit this value.
+   * @deprecated tree editing beta feature has been disabled
    */
   treeEditing?: boolean
 }

packages/sanity/playwright-ct/tests/formBuilder/tree-editing/TreeEditing.spec.tsx

@@ -86,7 +86,7 @@ const DOCUMENT_VALUE: SanityDocument = {
   ],
 }
 
-test.describe('Tree editing', () => {
+test.skip('Tree editing', () => {
   test('should open tree editing dialog when adding an item and close it when clicking done', async ({
     mount,
     page,

packages/sanity/playwright-ct/tests/formBuilder/tree-editing/TreeEditingNestedObjects.spec.tsx

@@ -53,7 +53,7 @@ const DOCUMENT_VALUE: SanityDocument = {
   ],
 }
 
-test.describe('Tree Editing with nested objects', () => {
+test.skip('Tree Editing with nested objects', () => {
   test('should navigate and display nested objects correctly', async ({mount, page}) => {
     // Mount the TreeEditingStory component with initial open path
     await mount(

packages/sanity/src/core/config/configPropertyReducers.ts

@@ -310,29 +310,6 @@ export const documentCommentsEnabledReducer = (opts: {
   return result
 }
 
-export const arrayEditingReducer = (opts: {
-  config: PluginOptions
-  initialValue: boolean
-}): boolean => {
-  const {config, initialValue} = opts
-  const flattenedConfig = flattenConfig(config, [])
-
-  const result = flattenedConfig.reduce((acc, {config: innerConfig}) => {
-    const resolver = innerConfig.beta?.treeArrayEditing?.enabled
-
-    if (!resolver && typeof resolver !== 'boolean') return acc
-    if (typeof resolver === 'boolean') return resolver
-
-    throw new Error(
-      `Expected \`beta.treeArrayEditing.enabled\` to be a boolean, but received ${getPrintableType(
-        resolver,
-      )}`,
-    )
-  }, initialValue)
-
-  return result
-}
-
 export const internalTasksReducer = (opts: {
   config: PluginOptions
 }): {footerAction: ReactNode} | undefined => {

packages/sanity/src/core/config/prepareConfig.ts

@@ -19,7 +19,6 @@ import {operatorDefinitions} from '../studio/components/navbar/search/definition
 import {type InitialValueTemplateItem, type Template, type TemplateItem} from '../templates'
 import {EMPTY_ARRAY, isNonNullable} from '../util'
 import {
-  arrayEditingReducer,
   documentActionsReducer,
   documentBadgesReducer,
   documentCommentsEnabledReducer,
@@ -629,7 +628,8 @@ function resolveSource({
     },
     beta: {
       treeArrayEditing: {
-        enabled: arrayEditingReducer({config, initialValue: false}),
+        // This beta feature is no longer available.
+        enabled: false,
       },
     },
   }

packages/sanity/src/core/config/types.ts

@@ -901,10 +901,11 @@ interface BetaFeatures {
   /**
    * @beta
    * @hidden
+   * @deprecated beta feature is no longer available.
    * */
   treeArrayEditing?: {
     /**
-     * Enables the tree array editing feature.
+     * @deprecated beta feature is no longer available.
      */
     enabled: boolean
   }

packages/sanity/src/core/form/studio/tree-editing/__tests__/useTreeEditingEnabled.test.tsx

@@ -40,7 +40,7 @@ describe('useTreeEditingEnabled', () => {
     expect(result.current).toEqual({enabled: false, legacyEditing: false})
   })
 
-  test('should return enabled: true when config is enabled', () => {
+  test('should return enabled: false when config is enabled, beta feature is no longer available', () => {
     const features = {
       beta: {
         treeArrayEditing: {
@@ -52,18 +52,18 @@ describe('useTreeEditingEnabled', () => {
 
     const {result} = renderHook(() => useTreeEditingEnabled(), {wrapper})
 
-    expect(result.current).toEqual({enabled: true, legacyEditing: false})
+    expect(result.current).toEqual({enabled: false, legacyEditing: false})
   })
 
   test('should return legacyEditing: true when legacyEditing is true', () => {
     const {result} = renderHook(() => useTreeEditingEnabled(), {wrapper: legacyEditingWrapper})
 
-    expect(result.current).toEqual({enabled: true, legacyEditing: true})
+    expect(result.current).toEqual({enabled: false, legacyEditing: true})
   })
 
   test('should return legacyEditing: true when parent has legacyEditing enabled', () => {
     const {result} = renderHook(() => useTreeEditingEnabled(), {wrapper: nestedWrapper})
 
-    expect(result.current).toEqual({enabled: true, legacyEditing: true})
+    expect(result.current).toEqual({enabled: false, legacyEditing: true})
   })
 })

packages/sanity/src/core/form/studio/tree-editing/context/enabled/TreeEditingEnabledProvider.tsx

@@ -1,7 +1,6 @@
 import {useMemo} from 'react'
 import {TreeEditingEnabledContext} from 'sanity/_singletons'
 
-import {useSource} from '../../../../../studio/source'
 import {type TreeEditingEnabledContextValue, useTreeEditingEnabled} from './useTreeEditingEnabled'
 
 interface TreeEditingEnabledProviderProps {
@@ -11,8 +10,6 @@ interface TreeEditingEnabledProviderProps {
 
 export function TreeEditingEnabledProvider(props: TreeEditingEnabledProviderProps): JSX.Element {
   const {children, legacyEditing: legacyEditingProp} = props
-
-  const {beta} = useSource()
   const parentContextValue = useTreeEditingEnabled()
 
   const value = useMemo((): TreeEditingEnabledContextValue => {
@@ -26,10 +23,10 @@ export function TreeEditingEnabledProvider(props: TreeEditingEnabledProviderProp
       legacyEditingProp
 
     return {
-      enabled: beta?.treeArrayEditing?.enabled === true,
+      enabled: false, // The tree editing beta feature has been disabled
       legacyEditing: Boolean(legacyEditing),
     }
-  }, [beta?.treeArrayEditing?.enabled, legacyEditingProp, parentContextValue.legacyEditing])
+  }, [legacyEditingProp, parentContextValue.legacyEditing])
 
   return (
     <TreeEditingEnabledContext.Provider value={value}>

test/e2e/tests/inputs/array.spec.ts

@@ -42,17 +42,17 @@ test(`file drop event should not propagate to dialog parent`, async ({
 
   // Open the dialog.
   await page.getByRole('button', {name: fileName}).click()
-  await expect(page.locator('#tree-editing-dialog')).toBeVisible()
+  await expect(page.getByRole('dialog')).toBeVisible()
 
   // Drop the file again; this time, while the dialog is open.
   //
   // - The drop event should not propagate to the parent.
   // - Therefore, the drop event should not cause the image to be added to the list again.
-  await page.locator('#tree-editing-dialog').dispatchEvent('drop', {dataTransfer})
+  await page.getByRole('dialog').dispatchEvent('drop', {dataTransfer})
 
   // Close the dialog.
-  await page.getByTestId('tree-editing-done').click()
-  await expect(await page.locator('#tree-editing-dialog')).not.toBeVisible()
+  await page.keyboard.press('Escape')
+  await expect(page.getByRole('dialog')).not.toBeVisible()
 
   // Ensure the list still contains one item.
   expect(item).toHaveCount(1)
@@ -93,8 +93,9 @@ test(`Scenario: Adding a new type from multiple options`, async ({page, createDr
   await expect(titleInput).toHaveValue('Book title')
 
   // And the dialog is closed
-  await page.keyboard.press('Escape')
-  await expect(await insertDialog).not.toBeVisible()
+  const closeDialogButton = insertDialog.getByLabel('Close dialog')
+  await closeDialogButton.click()
+  await expect(insertDialog).not.toBeVisible()
 
   // Then a new item is inserted in the array
   const bookItem = field.getByText('Book title')
@@ -217,9 +218,9 @@ function createArrayFieldLocators(page: Page) {
   const popover = page.getByTestId('document-panel-portal')
   const popoverMenu = popover.getByRole('menu')
   const popoverMenuItem = (name: string) => popoverMenu.getByRole('menuitem', {name})
-  const insertDialog = page.locator('#tree-editing-dialog')
+  const insertDialog = page.getByRole('dialog')
   const input = (label: string) => insertDialog.getByLabel(label)
-  const closeDialogButton = page.getByTestId('tree-editing-done')
+  const closeDialogButton = insertDialog.getByLabel('Close dialog')
 
   return {
     items,

test/e2e/tests/tree-editing/TreeEditingBasicInteraction.spec.ts

@@ -1,7 +1,7 @@
 import {expect} from '@playwright/test'
 import {test} from '@sanity/test'
 
-test.describe('basic - open and close', () => {
+test.skip('basic - open and close', () => {
   test.beforeEach(async ({page, createDraftDocument}) => {
     // wait for form to be attached
     await createDraftDocument('/test/content/input-debug;objectsDebug')
@@ -40,7 +40,7 @@ test.describe('basic - open and close', () => {
   })
 })
 
-test.describe('basic - main document action', () => {
+test.skip('basic - main document action', () => {
   test.beforeEach(async ({page, createDraftDocument}) => {
     // wait for form to be attached
     await createDraftDocument('/test/content/input-debug;objectsDebug')

test/e2e/tests/tree-editing/TreeEditingNavigation.spec.ts

@@ -1,7 +1,7 @@
 import {expect} from '@playwright/test'
 import {test} from '@sanity/test'
 
-test.describe('navigation - tree sidebar', () => {
+test.skip('navigation - tree sidebar', () => {
   test.beforeEach(async ({page, createDraftDocument, browserName}) => {
     // set up an array with two items: Albert, the whale and Lucy, the cat
 
@@ -118,7 +118,7 @@ test.describe('navigation - tree sidebar', () => {
   })
 })
 
-test.describe('navigation - breadcrumb', () => {
+test.skip('navigation - breadcrumb', () => {
   test.beforeEach(async ({page, createDraftDocument}) => {
     // set up an array with two items: Albert, the whale and Lucy, the cat
     await createDraftDocument('/test/content/input-debug;objectsDebug')