From 9894c6dbd88dc9ba6cbc6c1da42e0b74ff3e382d Mon Sep 17 00:00:00 2001 From: Pedro Bonamin <46196328+pedrobonamin@users.noreply.github.com> Date: Thu, 22 Aug 2024 15:59:06 +0200 Subject: [PATCH] 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 --- .../types/src/schema/definition/type/array.ts | 1 + .../tree-editing/TreeEditing.spec.tsx | 2 +- .../TreeEditingNestedObjects.spec.tsx | 2 +- .../src/core/config/configPropertyReducers.ts | 23 ------------------- .../sanity/src/core/config/prepareConfig.ts | 4 ++-- packages/sanity/src/core/config/types.ts | 3 ++- .../__tests__/useTreeEditingEnabled.test.tsx | 8 +++---- .../enabled/TreeEditingEnabledProvider.tsx | 7 ++---- test/e2e/tests/inputs/array.spec.ts | 17 +++++++------- .../TreeEditingBasicInteraction.spec.ts | 4 ++-- .../TreeEditingNavigation.spec.ts | 4 ++-- 11 files changed, 26 insertions(+), 49 deletions(-) diff --git a/packages/@sanity/types/src/schema/definition/type/array.ts b/packages/@sanity/types/src/schema/definition/type/array.ts index 2b3901e73d5..efecfdc1cfb 100644 --- a/packages/@sanity/types/src/schema/definition/type/array.ts +++ b/packages/@sanity/types/src/schema/definition/type/array.ts @@ -27,6 +27,7 @@ export interface ArrayOptions 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 } diff --git a/packages/sanity/playwright-ct/tests/formBuilder/tree-editing/TreeEditing.spec.tsx b/packages/sanity/playwright-ct/tests/formBuilder/tree-editing/TreeEditing.spec.tsx index f72fd9ceb63..8aceac8573e 100644 --- a/packages/sanity/playwright-ct/tests/formBuilder/tree-editing/TreeEditing.spec.tsx +++ b/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, diff --git a/packages/sanity/playwright-ct/tests/formBuilder/tree-editing/TreeEditingNestedObjects.spec.tsx b/packages/sanity/playwright-ct/tests/formBuilder/tree-editing/TreeEditingNestedObjects.spec.tsx index 3e234eca360..9c2b78f1ff7 100644 --- a/packages/sanity/playwright-ct/tests/formBuilder/tree-editing/TreeEditingNestedObjects.spec.tsx +++ b/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( diff --git a/packages/sanity/src/core/config/configPropertyReducers.ts b/packages/sanity/src/core/config/configPropertyReducers.ts index 680e3b96435..0c93ce5cc1c 100644 --- a/packages/sanity/src/core/config/configPropertyReducers.ts +++ b/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 => { diff --git a/packages/sanity/src/core/config/prepareConfig.ts b/packages/sanity/src/core/config/prepareConfig.ts index 370842300ae..f90070cbbf6 100644 --- a/packages/sanity/src/core/config/prepareConfig.ts +++ b/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, }, }, } diff --git a/packages/sanity/src/core/config/types.ts b/packages/sanity/src/core/config/types.ts index 924fa63ba21..6f223b42e60 100644 --- a/packages/sanity/src/core/config/types.ts +++ b/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 } diff --git a/packages/sanity/src/core/form/studio/tree-editing/__tests__/useTreeEditingEnabled.test.tsx b/packages/sanity/src/core/form/studio/tree-editing/__tests__/useTreeEditingEnabled.test.tsx index 99abf1aa4ce..83ba96acb9d 100644 --- a/packages/sanity/src/core/form/studio/tree-editing/__tests__/useTreeEditingEnabled.test.tsx +++ b/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}) }) }) diff --git a/packages/sanity/src/core/form/studio/tree-editing/context/enabled/TreeEditingEnabledProvider.tsx b/packages/sanity/src/core/form/studio/tree-editing/context/enabled/TreeEditingEnabledProvider.tsx index d0df1fec9c0..a2e30c93669 100644 --- a/packages/sanity/src/core/form/studio/tree-editing/context/enabled/TreeEditingEnabledProvider.tsx +++ b/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 ( diff --git a/test/e2e/tests/inputs/array.spec.ts b/test/e2e/tests/inputs/array.spec.ts index 8cce703c997..77981150e98 100644 --- a/test/e2e/tests/inputs/array.spec.ts +++ b/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, diff --git a/test/e2e/tests/tree-editing/TreeEditingBasicInteraction.spec.ts b/test/e2e/tests/tree-editing/TreeEditingBasicInteraction.spec.ts index bafb39212aa..34e0cea4e29 100644 --- a/test/e2e/tests/tree-editing/TreeEditingBasicInteraction.spec.ts +++ b/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') diff --git a/test/e2e/tests/tree-editing/TreeEditingNavigation.spec.ts b/test/e2e/tests/tree-editing/TreeEditingNavigation.spec.ts index bf8df5b68fe..da7982edbff 100644 --- a/test/e2e/tests/tree-editing/TreeEditingNavigation.spec.ts +++ b/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')