@byline/admin 6.2.0 → 6.2.1

package/src/forms/form-renderer-tab-persistence.test.tsx

@@ -0,0 +1,145 @@
+/**
+ * This Source Code is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/.
+ *
+ * Copyright (c) Infonomic Company Limited
+ */
+
+import { act } from 'react'
+
+import { defineAdminConfig } from '@byline/core'
+import { adminTranslations } from '@byline/i18n/admin'
+import { I18nProvider } from '@byline/i18n/react'
+import { createRoot, type Root } from 'react-dom/client'
+import { afterEach, beforeEach, describe, expect, it } from 'vitest'
+
+import { BylineFieldServicesProvider } from '../fields/field-services-context'
+import { FormRenderer } from './form-renderer'
+
+const globalWithAct = globalThis as any
+globalWithAct.IS_REACT_ACT_ENVIRONMENT = true
+
+defineAdminConfig({
+  i18n: {
+    admin: { defaultLocale: 'en', locales: ['en'] },
+    content: { defaultLocale: 'en', locales: ['en', 'fr'] },
+  },
+  collections: [
+    {
+      path: 'pages',
+      labels: { singular: 'Page', plural: 'Pages' },
+      fields: [{ name: 'title', label: 'Title', type: 'text' }],
+    },
+  ],
+  slugifier: (value: string) => value.toLowerCase().trim().replace(/\s+/g, '-'),
+})
+
+const fields = [
+  { name: 'title', label: 'Title', type: 'text' as const },
+  { name: 'seoTitle', label: 'SEO title', type: 'text' as const },
+]
+
+const adminConfig = {
+  layout: { main: ['content'] },
+  tabSets: [
+    {
+      name: 'content',
+      tabs: [
+        { name: 'general', label: 'General', fields: ['title'] },
+        { name: 'seo', label: 'SEO', fields: ['seoTitle'] },
+      ],
+    },
+  ],
+}
+
+let container: HTMLDivElement
+let root: Root
+
+beforeEach(() => {
+  container = document.createElement('div')
+  document.body.appendChild(container)
+  root = createRoot(container)
+})
+
+afterEach(() => {
+  act(() => {
+    root.unmount()
+  })
+  container.remove()
+})
+
+const mount = (locale: string, versionId: string) => {
+  act(() => {
+    root.render(
+      <I18nProvider
+        bundle={adminTranslations({ locales: ['en'] })}
+        activeLocale="en"
+        defaultLocale="en"
+        localeDefinitions={[{ code: 'en', nativeName: 'English' }]}
+      >
+        <BylineFieldServicesProvider
+          services={
+            {
+              getCollectionDocuments: async () => ({ docs: [], total: 0 }),
+              uploadField: async () => ({}),
+            } as any
+          }
+        >
+          <FormRenderer
+            mode="edit"
+            fields={fields as any}
+            initialLocale={locale}
+            initialData={{
+              id: 'doc1',
+              versionId,
+              fields: { title: locale, seoTitle: `${locale} SEO` },
+            }}
+            adminConfig={adminConfig as any}
+            collectionPath="pages"
+            onSubmit={() => {}}
+            onCancel={() => {}}
+          />
+        </BylineFieldServicesProvider>
+      </I18nProvider>
+    )
+  })
+}
+
+const selectedTabLabel = () =>
+  container.querySelector('[role="tab"][aria-selected="true"]')?.textContent
+
+describe('FormRenderer tab persistence across keyed remounts', () => {
+  // FormProvider is keyed on `${initialLocale}-${versionId}`, so changing either
+  // remounts the whole subtree. Tab selection is lifted above that key on
+  // purpose; this asserts the wiring, which a controlled-prop test on
+  // FormLayout alone cannot reach.
+  //
+  // Adopted from the reviewer's Checkpoint 2 regression fixture.
+  it('retains the selected tab through locale and version remounts', () => {
+    mount('en', 'v1')
+
+    const seoTab = [...container.querySelectorAll('[role="tab"]')].find(
+      (t) => t.textContent === 'SEO'
+    )
+    if (seoTab == null) throw new Error('SEO tab not found')
+    act(() => {
+      ;(seoTab as HTMLElement).click()
+    })
+    const first = container.querySelector<HTMLInputElement>('input[name="seoTitle"]')
+    expect(first).not.toBeNull()
+
+    mount('fr', 'v1') // locale change remounts FormProvider via its key
+    const french = container.querySelector<HTMLInputElement>('input[name="seoTitle"]')
+    expect(french).not.toBeNull()
+    expect(french).not.toBe(first)
+    expect(french?.value).toBe('fr SEO')
+    expect(selectedTabLabel()).toBe('SEO')
+
+    mount('fr', 'v2') // version change remounts it again
+    const versioned = container.querySelector<HTMLInputElement>('input[name="seoTitle"]')
+    expect(versioned).not.toBeNull()
+    expect(versioned).not.toBe(french)
+    expect(selectedTabLabel()).toBe('SEO')
+  })
+})

package/src/forms/form-renderer.module.css

@@ -304,6 +304,24 @@
   }
 }
 
+/* One column at every width. The split layout above becomes a two-column grid
+   at >=60rem; a stacked form must not inherit that, or it reserves an empty
+   second track and narrows its only content column. */
+.layout-stacked,
+:global(.byline-form-layout-stacked) {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-12);
+  padding-top: var(--spacing-32);
+}
+
+@media (min-width: 60rem) {
+  .layout-stacked,
+  :global(.byline-form-layout-stacked) {
+    gap: var(--spacing-32);
+  }
+}
+
 .content,
 :global(.byline-form-content) {
   display: flex;