diff --git a/next.config.mjs b/next.config.mjs index 29911443e..dc192996d 100644 --- a/next.config.mjs +++ b/next.config.mjs @@ -17,7 +17,7 @@ export default withBundleAnalyzer( ignoreBuildErrors: true, }, experimental: { - reactCompiler: false + reactCompiler: false, }, async redirects() { return [ diff --git a/packages/next/src/layouts/Root/index.tsx b/packages/next/src/layouts/Root/index.tsx index 54c8857ef..118adb89e 100644 --- a/packages/next/src/layouts/Root/index.tsx +++ b/packages/next/src/layouts/Root/index.tsx @@ -57,11 +57,13 @@ export const RootLayout = async ({ }) const payload = await getPayloadHMR({ config }) + const i18n: I18nClient = await initI18n({ config: config.i18n, context: 'client', language: languageCode, }) + const clientConfig = await createClientConfig({ config, t: i18n.t }) const dir = (rtlLanguages as unknown as AcceptedLanguages[]).includes(languageCode) diff --git a/packages/next/src/utilities/initPage/index.ts b/packages/next/src/utilities/initPage/index.ts index ec2c5795d..13dfce301 100644 --- a/packages/next/src/utilities/initPage/index.ts +++ b/packages/next/src/utilities/initPage/index.ts @@ -47,6 +47,20 @@ export const initPage = async ({ language, }) + const languageOptions = Object.entries(payload.config.i18n.supportedLanguages || {}).reduce( + (acc, [language, languageConfig]) => { + if (Object.keys(payload.config.i18n.supportedLanguages).includes(language)) { + acc.push({ + label: languageConfig.translations.general.thisLanguage, + value: language, + }) + } + + return acc + }, + [], + ) + const req = await createLocalReq( { fallbackLocale: null, @@ -98,6 +112,7 @@ export const initPage = async ({ cookies, docID, globalConfig, + languageOptions, locale, permissions, req, diff --git a/packages/next/src/utilities/initPage/shared.ts b/packages/next/src/utilities/initPage/shared.ts index 96d1004fc..c311a3c91 100644 --- a/packages/next/src/utilities/initPage/shared.ts +++ b/packages/next/src/utilities/initPage/shared.ts @@ -1,7 +1,6 @@ import type { SanitizedConfig } from 'payload/types' const authRouteKeys: (keyof SanitizedConfig['admin']['routes'])[] = [ - 'account', 'createFirstUser', 'forgot', 'login', diff --git a/packages/next/src/views/API/LocaleSelector/index.tsx b/packages/next/src/views/API/LocaleSelector/index.tsx new file mode 100644 index 000000000..f451456dd --- /dev/null +++ b/packages/next/src/views/API/LocaleSelector/index.tsx @@ -0,0 +1,23 @@ +import { Select } from '@payloadcms/ui/fields/Select' +import { useTranslation } from '@payloadcms/ui/providers/Translation' +import React from 'react' + +export const LocaleSelector: React.FC<{ + localeOptions: { + label: Record | string + value: string + }[] + onChange: (value: string) => void +}> = ({ localeOptions, onChange }) => { + const { t } = useTranslation() + + return ( + setLocale(value)} - options={localeOptions} - path="locale" - /> - )} + {localeOptions && } = (props) => { + const { languageOptions } = props + + const { i18n, switchLanguage } = useTranslation() + + return ( + { + await switchLanguage(value) + }} + options={languageOptions} + value={languageOptions.find((language) => language.value === i18n.language)} + /> + ) +} diff --git a/packages/next/src/views/Account/Settings/index.tsx b/packages/next/src/views/Account/Settings/index.tsx index aaf9c3657..6af4bc910 100644 --- a/packages/next/src/views/Account/Settings/index.tsx +++ b/packages/next/src/views/Account/Settings/index.tsx @@ -1,34 +1,28 @@ -'use client' -import { ReactSelect } from '@payloadcms/ui/elements/ReactSelect' +import type { I18n } from '@payloadcms/translations' +import type { LanguageOptions } from 'payload/types' + import { FieldLabel } from '@payloadcms/ui/forms/FieldLabel' -import { useTranslation } from '@payloadcms/ui/providers/Translation' import React from 'react' import { ToggleTheme } from '../ToggleTheme/index.js' +import { LanguageSelector } from './LanguageSelector.js' import './index.scss' const baseClass = 'payload-settings' export const Settings: React.FC<{ className?: string + i18n: I18n + languageOptions: LanguageOptions }> = (props) => { - const { className } = props - - const { i18n, languageOptions, switchLanguage, t } = useTranslation() + const { className, i18n, languageOptions } = props return (
-

{t('general:payloadSettings')}

+

{i18n.t('general:payloadSettings')}

- - { - await switchLanguage(value) - }} - options={languageOptions} - value={languageOptions.find((language) => language.value === i18n.language)} - /> + +
diff --git a/packages/next/src/views/Account/index.tsx b/packages/next/src/views/Account/index.tsx index a840a6118..07eab970b 100644 --- a/packages/next/src/views/Account/index.tsx +++ b/packages/next/src/views/Account/index.tsx @@ -9,6 +9,7 @@ import { FormQueryParamsProvider } from '@payloadcms/ui/providers/FormQueryParam import { notFound } from 'next/navigation.js' import React from 'react' +import { getDocumentData } from '../Document/getDocumentData.js' import { getDocumentPermissions } from '../Document/getDocumentPermissions.js' import { EditView } from '../Edit/index.js' import { Settings } from './Settings/index.js' @@ -21,6 +22,7 @@ export const Account: React.FC = async ({ searchParams, }) => { const { + languageOptions, locale, permissions, req, @@ -49,6 +51,13 @@ export const Account: React.FC = async ({ req, }) + const { data, formState } = await getDocumentData({ + id: user.id, + collectionConfig, + locale, + req, + }) + const viewComponentProps: ServerSideEditViewProps = { initPageResult, params, @@ -58,7 +67,7 @@ export const Account: React.FC = async ({ return ( } + AfterFields={} action={`${serverURL}${api}/${userSlug}${user?.id ? `/${user.id}` : ''}`} apiURL={`${serverURL}${api}/${userSlug}${user?.id ? `/${user.id}` : ''}`} collectionSlug={userSlug} @@ -66,6 +75,8 @@ export const Account: React.FC = async ({ hasPublishPermission={hasPublishPermission} hasSavePermission={hasSavePermission} id={user?.id.toString()} + initialData={data} + initialState={formState} isEditing > = ({ Link, permissions, visibleEntities }) => { - const config = useConfig() - - const { - collections: collectionsConfig, - globals: globalsConfig, - routes: { admin }, - } = config - - const { user } = useAuth() - - const { i18n, t } = useTranslation() - - const [groups, setGroups] = useState([]) - - useEffect(() => { - const collections = collectionsConfig.filter( - (collection) => - permissions?.collections?.[collection.slug]?.read?.permission && - visibleEntities.collections.includes(collection.slug), - ) - - const globals = globalsConfig.filter( - (global) => - permissions?.globals?.[global.slug]?.read?.permission && - visibleEntities.globals.includes(global.slug), - ) - - setGroups( - groupNavItems( - [ - ...(collections.map((collection) => { - const entityToGroup: EntityToGroup = { - type: EntityType.collection, - entity: collection, - } - - return entityToGroup - }) ?? []), - ...(globals.map((global) => { - const entityToGroup: EntityToGroup = { - type: EntityType.global, - entity: global, - } - - return entityToGroup - }) ?? []), - ], - permissions, - i18n, - ), - ) - }, [permissions, user, i18n, visibleEntities, collectionsConfig, globalsConfig]) - - return ( - - - {groups.map(({ entities, label }, groupIndex) => { - return ( -
-

{label}

-
    - {entities.map(({ type, entity }, entityIndex) => { - let title: string - let buttonAriaLabel: string - let createHREF: string - let href: string - let hasCreatePermission: boolean - - if (type === EntityType.collection) { - title = getTranslation(entity.labels.plural, i18n) - buttonAriaLabel = t('general:showAllLabel', { label: title }) - href = `${admin}/collections/${entity.slug}` - createHREF = `${admin}/collections/${entity.slug}/create` - hasCreatePermission = permissions?.collections?.[entity.slug]?.create?.permission - } - - if (type === EntityType.global) { - title = getTranslation(entity.label, i18n) - buttonAriaLabel = t('general:editLabel', { - label: getTranslation(entity.label, i18n), - }) - href = `${admin}/globals/${entity.slug}` - } - - return ( -
  • - - ) : undefined - } - buttonAriaLabel={buttonAriaLabel} - href={href} - id={`card-${entity.slug}`} - title={title} - titleAs="h3" - /> -
    • - ) - })} -
-
- ) - })} - - ) -} diff --git a/packages/next/src/views/Dashboard/Default/index.tsx b/packages/next/src/views/Dashboard/Default/index.tsx index 8865dd4c5..4c6241279 100644 --- a/packages/next/src/views/Dashboard/Default/index.tsx +++ b/packages/next/src/views/Dashboard/Default/index.tsx @@ -2,20 +2,23 @@ import type { Permissions } from 'payload/auth' import type { ServerProps } from 'payload/config' import type { VisibleEntities } from 'payload/types' +import { getTranslation } from '@payloadcms/translations' +import { Button } from '@payloadcms/ui/elements/Button' +import { Card } from '@payloadcms/ui/elements/Card' import { Gutter } from '@payloadcms/ui/elements/Gutter' import { SetStepNav } from '@payloadcms/ui/elements/StepNav' import { WithServerSideProps } from '@payloadcms/ui/elements/WithServerSideProps' import { SetViewActions } from '@payloadcms/ui/providers/Actions' -import React from 'react' +import { EntityType, type groupNavItems } from '@payloadcms/ui/utilities/groupNavItems' +import React, { Fragment } from 'react' -import { DefaultDashboardClient } from './index.client.js' import './index.scss' const baseClass = 'dashboard' export type DashboardProps = ServerProps & { Link: React.ComponentType - + navGroups?: ReturnType permissions: Permissions visibleEntities: VisibleEntities } @@ -24,20 +27,22 @@ export const DefaultDashboard: React.FC = (props) => { const { Link, i18n, + i18n: { t }, locale, + navGroups, params, payload: { config: { admin: { components: { afterDashboard, beforeDashboard }, }, + routes: { admin: adminRoute }, }, }, payload, permissions, searchParams, user, - visibleEntities, } = props const BeforeDashboards = Array.isArray(beforeDashboard) @@ -82,12 +87,75 @@ export const DefaultDashboard: React.FC = (props) => { {Array.isArray(BeforeDashboards) && BeforeDashboards.map((Component) => Component)} + + + {!navGroups || navGroups?.length === 0 ? ( +

no nav groups....

+ ) : ( + navGroups.map(({ entities, label }, groupIndex) => { + return ( +
+

{label}

+
    + {entities.map(({ type, entity }, entityIndex) => { + let title: string + let buttonAriaLabel: string + let createHREF: string + let href: string + let hasCreatePermission: boolean - + if (type === EntityType.collection) { + title = getTranslation(entity.labels.plural, i18n) + buttonAriaLabel = t('general:showAllLabel', { label: title }) + href = `${adminRoute}/collections/${entity.slug}` + createHREF = `${adminRoute}/collections/${entity.slug}/create` + hasCreatePermission = + permissions?.collections?.[entity.slug]?.create?.permission + } + + if (type === EntityType.global) { + title = getTranslation(entity.label, i18n) + buttonAriaLabel = t('general:editLabel', { + label: getTranslation(entity.label, i18n), + }) + href = `${adminRoute}/globals/${entity.slug}` + } + + return ( +
  • + + ) : undefined + } + buttonAriaLabel={buttonAriaLabel} + href={href} + id={`card-${entity.slug}`} + title={title} + titleAs="h3" + /> +
    • + ) + })} +
+
+ ) + }) + )} + {Array.isArray(AfterDashboards) && AfterDashboards.map((Component) => Component)} diff --git a/packages/next/src/views/Dashboard/index.tsx b/packages/next/src/views/Dashboard/index.tsx index 6a3dce0f9..109b35736 100644 --- a/packages/next/src/views/Dashboard/index.tsx +++ b/packages/next/src/views/Dashboard/index.tsx @@ -1,7 +1,9 @@ +import type { EntityToGroup } from '@payloadcms/ui/utilities/groupNavItems' import type { AdminViewProps } from 'payload/types' import { HydrateClientUser } from '@payloadcms/ui/elements/HydrateClientUser' import { RenderCustomComponent } from '@payloadcms/ui/elements/RenderCustomComponent' +import { EntityType, groupNavItems } from '@payloadcms/ui/utilities/groupNavItems' import LinkImport from 'next/link.js' import React, { Fragment } from 'react' @@ -28,10 +30,46 @@ export const Dashboard: React.FC = ({ initPageResult, params, se const CustomDashboardComponent = config.admin.components?.views?.Dashboard + const collections = config.collections.filter( + (collection) => + permissions?.collections?.[collection.slug]?.read?.permission && + visibleEntities.collections.includes(collection.slug), + ) + + const globals = config.globals.filter( + (global) => + permissions?.globals?.[global.slug]?.read?.permission && + visibleEntities.globals.includes(global.slug), + ) + + const navGroups = groupNavItems( + [ + ...(collections.map((collection) => { + const entityToGroup: EntityToGroup = { + type: EntityType.collection, + entity: collection, + } + + return entityToGroup + }) ?? []), + ...(globals.map((global) => { + const entityToGroup: EntityToGroup = { + type: EntityType.global, + entity: global, + } + + return entityToGroup + }) ?? []), + ], + permissions, + i18n, + ) + const viewComponentProps: DashboardProps = { Link, i18n, locale, + navGroups, params, payload, permissions, diff --git a/packages/next/src/views/Document/getDocumentData.tsx b/packages/next/src/views/Document/getDocumentData.tsx index 86618374d..4a2ad0b44 100644 --- a/packages/next/src/views/Document/getDocumentData.tsx +++ b/packages/next/src/views/Document/getDocumentData.tsx @@ -1,41 +1,45 @@ import type { Data, - Payload, - PayloadRequest, + PayloadRequestWithData, SanitizedCollectionConfig, SanitizedGlobalConfig, } from 'payload/types' +import { buildFormState } from '@payloadcms/ui/utilities/buildFormState' +import { reduceFieldsToValues } from '@payloadcms/ui/utilities/reduceFieldsToValues' + export const getDocumentData = async (args: { collectionConfig?: SanitizedCollectionConfig globalConfig?: SanitizedGlobalConfig id?: number | string locale: Locale - payload: Payload - req: PayloadRequest + req: PayloadRequestWithData }): Promise => { - const { id, collectionConfig, globalConfig, locale, payload, req } = args + const { id, collectionConfig, globalConfig, locale, req } = args - let data: Data - - if (collectionConfig && id !== undefined && id !== null) { - data = await payload.findByID({ - id, - collection: collectionConfig.slug, - depth: 0, - locale: locale.code, - req, + try { + const formState = await buildFormState({ + req: { + ...req, + data: { + id, + collectionSlug: collectionConfig?.slug, + globalSlug: globalConfig?.slug, + locale: locale.code, + operation: (collectionConfig && id) || globalConfig ? 'update' : 'create', + schemaPath: collectionConfig?.slug || globalConfig?.slug, + }, + }, }) - } - if (globalConfig) { - data = await payload.findGlobal({ - slug: globalConfig.slug, - depth: 0, - locale: locale.code, - req, - }) - } + const data = reduceFieldsToValues(formState, true) - return data + return { + data, + formState, + } + } catch (error) { + console.error('Error getting document data', error) // eslint-disable-line no-console + return {} + } } diff --git a/packages/next/src/views/Document/getViewsFromConfig.tsx b/packages/next/src/views/Document/getViewsFromConfig.tsx index 4dafc9096..e5fa589e9 100644 --- a/packages/next/src/views/Document/getViewsFromConfig.tsx +++ b/packages/next/src/views/Document/getViewsFromConfig.tsx @@ -7,6 +7,8 @@ import type { SanitizedGlobalConfig, } from 'payload/types' +import { notFound } from 'next/navigation.js' + import { APIView as DefaultAPIView } from '../API/index.js' import { EditView as DefaultEditView } from '../Edit/index.js' import { LivePreviewView as DefaultLivePreviewView } from '../LivePreview/index.js' @@ -68,63 +70,91 @@ export const getViewsFromConfig = ({ const [collectionEntity, collectionSlug, segment3, segment4, segment5, ...remainingSegments] = routeSegments - // `../:id`, or `../create` - switch (routeSegments.length) { - case 3: { - switch (segment3) { - case 'create': { - if ('create' in docPermissions && docPermissions?.create?.permission) { - CustomView = getCustomViewByKey(views, 'Default') - DefaultView = DefaultEditView - } else { - ErrorView = UnauthorizedView + if (!docPermissions?.read?.permission) { + notFound() + } else { + // `../:id`, or `../create` + switch (routeSegments.length) { + case 3: { + switch (segment3) { + case 'create': { + if ('create' in docPermissions && docPermissions?.create?.permission) { + CustomView = getCustomViewByKey(views, 'Default') + DefaultView = DefaultEditView + } else { + ErrorView = UnauthorizedView + } + break } - break - } - default: { - if (docPermissions?.read?.permission) { + default: { CustomView = getCustomViewByKey(views, 'Default') DefaultView = DefaultEditView - } else { - ErrorView = UnauthorizedView + break } - break } + break } - break - } - // `../:id/api`, `../:id/preview`, `../:id/versions`, etc - case 4: { - switch (segment4) { - case 'api': { - if (collectionConfig?.admin?.hideAPIURL !== true) { - CustomView = getCustomViewByKey(views, 'API') - DefaultView = DefaultAPIView + // `../:id/api`, `../:id/preview`, `../:id/versions`, etc + case 4: { + switch (segment4) { + case 'api': { + if (collectionConfig?.admin?.hideAPIURL !== true) { + CustomView = getCustomViewByKey(views, 'API') + DefaultView = DefaultAPIView + } + break } - break - } - case 'preview': { - if (livePreviewEnabled) { - DefaultView = DefaultLivePreviewView + case 'preview': { + if (livePreviewEnabled) { + DefaultView = DefaultLivePreviewView + } + break } - break - } - case 'versions': { + case 'versions': { + if (docPermissions?.readVersions?.permission) { + CustomView = getCustomViewByKey(views, 'Versions') + DefaultView = DefaultVersionsView + } else { + ErrorView = UnauthorizedView + } + break + } + + default: { + const baseRoute = [adminRoute, 'collections', collectionSlug, segment3] + .filter(Boolean) + .join('/') + + const currentRoute = [baseRoute, segment4, segment5, ...remainingSegments] + .filter(Boolean) + .join('/') + + CustomView = getCustomViewByRoute({ + baseRoute, + currentRoute, + views, + }) + break + } + } + break + } + + // `../:id/versions/:version`, etc + default: { + if (segment4 === 'versions') { if (docPermissions?.readVersions?.permission) { - CustomView = getCustomViewByKey(views, 'Versions') - DefaultView = DefaultVersionsView + CustomView = getCustomViewByKey(views, 'Version') + DefaultView = DefaultVersionView } else { ErrorView = UnauthorizedView } - break - } - - default: { - const baseRoute = [adminRoute, 'collections', collectionSlug, segment3] + } else { + const baseRoute = [adminRoute, collectionEntity, collectionSlug, segment3] .filter(Boolean) .join('/') @@ -137,37 +167,9 @@ export const getViewsFromConfig = ({ currentRoute, views, }) - break } + break } - break - } - - // `../:id/versions/:version`, etc - default: { - if (segment4 === 'versions') { - if (docPermissions?.readVersions?.permission) { - CustomView = getCustomViewByKey(views, 'Version') - DefaultView = DefaultVersionView - } else { - ErrorView = UnauthorizedView - } - } else { - const baseRoute = [adminRoute, collectionEntity, collectionSlug, segment3] - .filter(Boolean) - .join('/') - - const currentRoute = [baseRoute, segment4, segment5, ...remainingSegments] - .filter(Boolean) - .join('/') - - CustomView = getCustomViewByRoute({ - baseRoute, - currentRoute, - views, - }) - } - break } } } @@ -185,81 +187,81 @@ export const getViewsFromConfig = ({ // eslint-disable-next-line @typescript-eslint/no-unused-vars const [globalEntity, globalSlug, segment3, ...remainingSegments] = routeSegments - switch (routeSegments.length) { - case 2: { - if (docPermissions?.read?.permission) { + if (!docPermissions?.read?.permission) { + notFound() + } else { + switch (routeSegments.length) { + case 2: { CustomView = getCustomViewByKey(views, 'Default') DefaultView = DefaultEditView - } else { - ErrorView = UnauthorizedView + break } - break - } - case 3: { - // `../:slug/api`, `../:slug/preview`, `../:slug/versions`, etc - switch (segment3) { - case 'api': { - if (globalConfig?.admin?.hideAPIURL !== true) { - CustomView = getCustomViewByKey(views, 'API') - DefaultView = DefaultAPIView + case 3: { + // `../:slug/api`, `../:slug/preview`, `../:slug/versions`, etc + switch (segment3) { + case 'api': { + if (globalConfig?.admin?.hideAPIURL !== true) { + CustomView = getCustomViewByKey(views, 'API') + DefaultView = DefaultAPIView + } + break } - break - } - case 'preview': { - if (livePreviewEnabled) { - DefaultView = DefaultLivePreviewView + case 'preview': { + if (livePreviewEnabled) { + DefaultView = DefaultLivePreviewView + } + break } - break - } - case 'versions': { + case 'versions': { + if (docPermissions?.readVersions?.permission) { + CustomView = getCustomViewByKey(views, 'Versions') + DefaultView = DefaultVersionsView + } else { + ErrorView = UnauthorizedView + } + break + } + + default: { + if (docPermissions?.read?.permission) { + CustomView = getCustomViewByKey(views, 'Default') + DefaultView = DefaultEditView + } else { + ErrorView = UnauthorizedView + } + break + } + } + break + } + + default: { + // `../:slug/versions/:version`, etc + if (segment3 === 'versions') { if (docPermissions?.readVersions?.permission) { - CustomView = getCustomViewByKey(views, 'Versions') - DefaultView = DefaultVersionsView + CustomView = getCustomViewByKey(views, 'Version') + DefaultView = DefaultVersionView } else { ErrorView = UnauthorizedView } - break - } - - default: { - if (docPermissions?.read?.permission) { - CustomView = getCustomViewByKey(views, 'Default') - DefaultView = DefaultEditView - } else { - ErrorView = UnauthorizedView - } - break - } - } - break - } - - default: { - // `../:slug/versions/:version`, etc - if (segment3 === 'versions') { - if (docPermissions?.readVersions?.permission) { - CustomView = getCustomViewByKey(views, 'Version') - DefaultView = DefaultVersionView } else { - ErrorView = UnauthorizedView + const baseRoute = [adminRoute, 'globals', globalSlug].filter(Boolean).join('/') + + const currentRoute = [baseRoute, segment3, ...remainingSegments] + .filter(Boolean) + .join('/') + + CustomView = getCustomViewByRoute({ + baseRoute, + currentRoute, + views, + }) } - } else { - const baseRoute = [adminRoute, 'globals', globalSlug].filter(Boolean).join('/') - - const currentRoute = [baseRoute, segment3, ...remainingSegments] - .filter(Boolean) - .join('/') - - CustomView = getCustomViewByRoute({ - baseRoute, - currentRoute, - views, - }) + break } - break } } } diff --git a/packages/next/src/views/Document/index.tsx b/packages/next/src/views/Document/index.tsx index 4c57b3b05..9b8ab1349 100644 --- a/packages/next/src/views/Document/index.tsx +++ b/packages/next/src/views/Document/index.tsx @@ -63,12 +63,11 @@ export const Document: React.FC = async ({ let apiURL: string let action: string - const data = await getDocumentData({ + const { data, formState } = await getDocumentData({ id, collectionConfig, globalConfig, locale, - payload, req, }) @@ -191,6 +190,8 @@ export const Document: React.FC = async ({ hasPublishPermission={hasPublishPermission} hasSavePermission={hasSavePermission} id={id} + initialData={data} + initialState={formState} isEditing={isEditing} > {!ViewOverride && ( diff --git a/packages/next/src/views/Edit/Default/Auth/APIKey.tsx b/packages/next/src/views/Edit/Default/Auth/APIKey.tsx index 6e6483a4e..d6607b018 100644 --- a/packages/next/src/views/Edit/Default/Auth/APIKey.tsx +++ b/packages/next/src/views/Edit/Default/Auth/APIKey.tsx @@ -25,7 +25,7 @@ export const APIKey: React.FC<{ enabled: boolean; readOnly?: boolean }> = ({ const { t } = useTranslation() const config = useConfig() - const apiKey = useFormFields(([fields]) => fields[path]) + const apiKey = useFormFields(([fields]) => (fields && fields[path]) || null) const validate = (val) => text(val, { diff --git a/packages/next/src/views/Edit/Default/Auth/index.tsx b/packages/next/src/views/Edit/Default/Auth/index.tsx index 208b2638d..71fbaa9d2 100644 --- a/packages/next/src/views/Edit/Default/Auth/index.tsx +++ b/packages/next/src/views/Edit/Default/Auth/index.tsx @@ -7,6 +7,7 @@ import { Email } from '@payloadcms/ui/fields/Email' import { Password } from '@payloadcms/ui/fields/Password' import { useFormFields, useFormModified } from '@payloadcms/ui/forms/Form' import { useConfig } from '@payloadcms/ui/providers/Config' +import { useDocumentInfo } from '@payloadcms/ui/providers/DocumentInfo' import { useTranslation } from '@payloadcms/ui/providers/Translation' import React, { useCallback, useEffect, useState } from 'react' import { toast } from 'react-toastify' @@ -32,10 +33,11 @@ export const Auth: React.FC = (props) => { } = props const [changingPassword, setChangingPassword] = useState(requirePassword) - const enableAPIKey = useFormFields(([fields]) => fields.enableAPIKey) + const enableAPIKey = useFormFields(([fields]) => (fields && fields?.enableAPIKey) || null) const dispatchFields = useFormFields((reducer) => reducer[1]) const modified = useFormModified() const { i18n, t } = useTranslation() + const { isInitializing } = useDocumentInfo() const { routes: { api }, @@ -85,12 +87,15 @@ export const Auth: React.FC = (props) => { return null } + const disabled = readOnly || isInitializing + return (
{!disableLocalStrategy && ( = (props) => {
= (props) => {
)} -
{changingPassword && !requirePassword && (
) diff --git a/packages/next/src/views/Edit/Default/SetDocumentStepNav/index.tsx b/packages/next/src/views/Edit/Default/SetDocumentStepNav/index.tsx index ed00d67df..6644bf0b1 100644 --- a/packages/next/src/views/Edit/Default/SetDocumentStepNav/index.tsx +++ b/packages/next/src/views/Edit/Default/SetDocumentStepNav/index.tsx @@ -24,7 +24,7 @@ export const SetDocumentStepNav: React.FC<{ const view: string | undefined = props?.view || undefined - const { isEditing, title } = useDocumentInfo() + const { isEditing, isInitializing, title } = useDocumentInfo() const { isEntityVisible } = useEntityVisibility() const isVisible = isEntityVisible({ collectionSlug, globalSlug }) @@ -41,38 +41,41 @@ export const SetDocumentStepNav: React.FC<{ useEffect(() => { const nav: StepNavItem[] = [] - if (collectionSlug) { - nav.push({ - label: getTranslation(pluralLabel, i18n), - url: isVisible ? `${admin}/collections/${collectionSlug}` : undefined, - }) - - if (isEditing) { + if (!isInitializing) { + if (collectionSlug) { nav.push({ - label: (useAsTitle && useAsTitle !== 'id' && title) || `${id}`, - url: isVisible ? `${admin}/collections/${collectionSlug}/${id}` : undefined, + label: getTranslation(pluralLabel, i18n), + url: isVisible ? `${admin}/collections/${collectionSlug}` : undefined, }) - } else { + + if (isEditing) { + nav.push({ + label: (useAsTitle && useAsTitle !== 'id' && title) || `${id}`, + url: isVisible ? `${admin}/collections/${collectionSlug}/${id}` : undefined, + }) + } else { + nav.push({ + label: t('general:createNew'), + }) + } + } else if (globalSlug) { nav.push({ - label: t('general:createNew'), + label: title, + url: isVisible ? `${admin}/globals/${globalSlug}` : undefined, }) } - } else if (globalSlug) { - nav.push({ - label: title, - url: isVisible ? `${admin}/globals/${globalSlug}` : undefined, - }) - } - if (view) { - nav.push({ - label: view, - }) - } + if (view) { + nav.push({ + label: view, + }) + } - if (drawerDepth <= 1) setStepNav(nav) + if (drawerDepth <= 1) setStepNav(nav) + } }, [ setStepNav, + isInitializing, isEditing, pluralLabel, id, diff --git a/packages/next/src/views/Edit/Default/index.tsx b/packages/next/src/views/Edit/Default/index.tsx index c1d7512db..0d83d5bd5 100644 --- a/packages/next/src/views/Edit/Default/index.tsx +++ b/packages/next/src/views/Edit/Default/index.tsx @@ -3,7 +3,6 @@ import type { FormProps } from '@payloadcms/ui/forms/Form' import { DocumentControls } from '@payloadcms/ui/elements/DocumentControls' import { DocumentFields } from '@payloadcms/ui/elements/DocumentFields' -import { FormLoadingOverlayToggle } from '@payloadcms/ui/elements/Loading' import { Upload } from '@payloadcms/ui/elements/Upload' import { Form } from '@payloadcms/ui/forms/Form' import { useAuth } from '@payloadcms/ui/providers/Auth' @@ -14,7 +13,6 @@ import { useDocumentInfo } from '@payloadcms/ui/providers/DocumentInfo' import { useEditDepth } from '@payloadcms/ui/providers/EditDepth' import { useFormQueryParams } from '@payloadcms/ui/providers/FormQueryParams' import { OperationProvider } from '@payloadcms/ui/providers/Operation' -import { useTranslation } from '@payloadcms/ui/providers/Translation' import { getFormState } from '@payloadcms/ui/utilities/getFormState' import { useRouter } from 'next/navigation.js' import { useSearchParams } from 'next/navigation.js' @@ -52,6 +50,7 @@ export const DefaultEditView: React.FC = () => { initialData: data, initialState, isEditing, + isInitializing, onSave: onSaveFromContext, } = useDocumentInfo() @@ -64,8 +63,6 @@ export const DefaultEditView: React.FC = () => { const depth = useEditDepth() const { reportUpdate } = useDocumentEvents() - const { i18n } = useTranslation() - const { admin: { user: userSlug }, collections, @@ -183,23 +180,13 @@ export const DefaultEditView: React.FC = () => { action={action} className={`${baseClass}__form`} disableValidationOnSubmit - disabled={!hasSavePermission} - initialState={initialState} + disabled={isInitializing || !hasSavePermission} + initialState={!isInitializing && initialState} + isInitializing={isInitializing} method={id ? 'PATCH' : 'POST'} onChange={[onChange]} onSuccess={onSave} > - {BeforeDocument} {preventLeaveWithoutSaving && } { globalSlug, }) - // Allow the `DocumentInfoProvider` to hydrate - if (!Edit || (!collectionSlug && !globalSlug)) { - return + if (!Edit) { + return null } return ( diff --git a/packages/next/src/views/List/index.tsx b/packages/next/src/views/List/index.tsx index d8127d271..ae4883909 100644 --- a/packages/next/src/views/List/index.tsx +++ b/packages/next/src/views/List/index.tsx @@ -13,7 +13,6 @@ import React, { Fragment } from 'react' import type { DefaultListViewProps, ListPreferences } from './Default/types.js' -import { UnauthorizedView } from '../Unauthorized/index.js' import { DefaultListView } from './Default/index.js' export { generateListMetadata } from './meta.js' @@ -41,7 +40,7 @@ export const ListView: React.FC = async ({ const collectionSlug = collectionConfig?.slug if (!permissions?.collections?.[collectionSlug]?.read?.permission) { - return + notFound() } let listPreferences: ListPreferences diff --git a/packages/next/src/views/LivePreview/index.client.tsx b/packages/next/src/views/LivePreview/index.client.tsx index eb9dd6824..f3ebd9e0c 100644 --- a/packages/next/src/views/LivePreview/index.client.tsx +++ b/packages/next/src/views/LivePreview/index.client.tsx @@ -6,7 +6,6 @@ import type { ClientCollectionConfig, ClientConfig, ClientGlobalConfig, Data } f import { DocumentControls } from '@payloadcms/ui/elements/DocumentControls' import { DocumentFields } from '@payloadcms/ui/elements/DocumentFields' -import { LoadingOverlay } from '@payloadcms/ui/elements/Loading' import { Form } from '@payloadcms/ui/forms/Form' import { SetViewActions } from '@payloadcms/ui/providers/Actions' import { useComponentMap } from '@payloadcms/ui/providers/ComponentMap' @@ -66,6 +65,7 @@ const PreviewView: React.FC = ({ initialData, initialState, isEditing, + isInitializing, onSave: onSaveFromProps, } = useDocumentInfo() @@ -120,11 +120,6 @@ const PreviewView: React.FC = ({ [serverURL, apiRoute, id, operation, schemaPath, getDocPreferences], ) - // Allow the `DocumentInfoProvider` to hydrate - if (!collectionSlug && !globalSlug) { - return - } - return ( @@ -133,6 +128,7 @@ const PreviewView: React.FC = ({ className={`${baseClass}__form`} disabled={!hasSavePermission} initialState={initialState} + isInitializing={isInitializing} method={id ? 'PATCH' : 'POST'} onChange={[onChange]} onSuccess={onSave} diff --git a/packages/next/src/views/Login/LoginForm/index.tsx b/packages/next/src/views/Login/LoginForm/index.tsx index 3fd27dbb8..b50dd2261 100644 --- a/packages/next/src/views/Login/LoginForm/index.tsx +++ b/packages/next/src/views/Login/LoginForm/index.tsx @@ -8,7 +8,6 @@ const Link = (LinkImport.default || LinkImport) as unknown as typeof LinkImport. import type { FormState, PayloadRequestWithData } from 'payload/types' -import { FormLoadingOverlayToggle } from '@payloadcms/ui/elements/Loading' import { Email } from '@payloadcms/ui/fields/Email' import { Password } from '@payloadcms/ui/fields/Password' import { Form } from '@payloadcms/ui/forms/Form' @@ -60,7 +59,6 @@ export const LoginForm: React.FC<{ redirect={typeof searchParams?.redirect === 'string' ? searchParams.redirect : admin} waitForAutocomplete > -
-
- -
- +
+ +
) } diff --git a/packages/next/src/views/ResetPassword/index.client.tsx b/packages/next/src/views/ResetPassword/index.client.tsx index 936993d2b..f538e3eab 100644 --- a/packages/next/src/views/ResetPassword/index.client.tsx +++ b/packages/next/src/views/ResetPassword/index.client.tsx @@ -72,9 +72,9 @@ export const ResetPasswordClient: React.FC = ({ token }) => { const PasswordToConfirm = () => { const { t } = useTranslation() - const { value: confirmValue } = useFormFields(([fields]) => { - return fields['confirm-password'] - }) + const { value: confirmValue } = useFormFields( + ([fields]) => (fields && fields?.['confirm-password']) || null, + ) const validate = React.useCallback( (value: string) => { diff --git a/packages/next/src/views/Version/SelectLocales/index.tsx b/packages/next/src/views/Version/SelectLocales/index.tsx index 56d74ba32..896f52098 100644 --- a/packages/next/src/views/Version/SelectLocales/index.tsx +++ b/packages/next/src/views/Version/SelectLocales/index.tsx @@ -1,3 +1,4 @@ +'use client' import { ReactSelect } from '@payloadcms/ui/elements/ReactSelect' import { useLocale } from '@payloadcms/ui/providers/Locale' import { useTranslation } from '@payloadcms/ui/providers/Translation' diff --git a/packages/next/src/withPayload.js b/packages/next/src/withPayload.js index 760874cb4..65d0e8010 100644 --- a/packages/next/src/withPayload.js +++ b/packages/next/src/withPayload.js @@ -4,6 +4,12 @@ * @returns {import('next').NextConfig} * */ export const withPayload = (nextConfig = {}) => { + if (nextConfig.experimental?.staleTimes?.dynamic) { + console.warn( + 'Payload detected a non-zero value for the `staleTimes.dynamic` option in your Next.js config. This may cause stale data to load in the Admin Panel. To clear this warning, remove the `staleTimes.dynamic` option from your Next.js config or set it to 0. In the future, Next.js may support scoping this option to specific routes.', + ) + } + return { ...nextConfig, experimental: { diff --git a/packages/payload/src/admin/LanguageOptions.ts b/packages/payload/src/admin/LanguageOptions.ts new file mode 100644 index 000000000..5566ed169 --- /dev/null +++ b/packages/payload/src/admin/LanguageOptions.ts @@ -0,0 +1,4 @@ +export type LanguageOptions = { + label: string + value: string +}[] diff --git a/packages/payload/src/admin/types.ts b/packages/payload/src/admin/types.ts index 2dc3221f7..5e78ef479 100644 --- a/packages/payload/src/admin/types.ts +++ b/packages/payload/src/admin/types.ts @@ -1,3 +1,4 @@ +export type { LanguageOptions } from './LanguageOptions.js' export type { RichTextAdapter, RichTextAdapterProvider, RichTextFieldProps } from './RichText.js' export type { CellComponentProps, DefaultCellComponentProps } from './elements/Cell.js' export type { ConditionalDateProps } from './elements/DatePicker.js' @@ -26,6 +27,7 @@ export type { } from './forms/FieldDescription.js' export type { Data, FilterOptionsResult, FormField, FormState, Row } from './forms/Form.js' export type { LabelProps, SanitizedLabelProps } from './forms/Label.js' + export type { RowLabel, RowLabelComponent } from './forms/RowLabel.js' export type { diff --git a/packages/payload/src/admin/views/types.ts b/packages/payload/src/admin/views/types.ts index 2e44bd4b5..56804910d 100644 --- a/packages/payload/src/admin/views/types.ts +++ b/packages/payload/src/admin/views/types.ts @@ -5,6 +5,7 @@ import type { SanitizedCollectionConfig } from '../../collections/config/types.j import type { Locale } from '../../config/types.js' import type { SanitizedGlobalConfig } from '../../globals/config/types.js' import type { PayloadRequestWithData } from '../../types/index.js' +import type { LanguageOptions } from '../LanguageOptions.js' export type AdminViewConfig = { Component: AdminViewComponent @@ -40,6 +41,7 @@ export type InitPageResult = { cookies: Map docID?: string globalConfig?: SanitizedGlobalConfig + languageOptions: LanguageOptions locale: Locale permissions: Permissions req: PayloadRequestWithData diff --git a/packages/plugin-stripe/src/ui/LinkToDoc.tsx b/packages/plugin-stripe/src/ui/LinkToDoc.tsx index 04ba99831..fea33401b 100644 --- a/packages/plugin-stripe/src/ui/LinkToDoc.tsx +++ b/packages/plugin-stripe/src/ui/LinkToDoc.tsx @@ -11,7 +11,7 @@ export const LinkToDoc: CustomComponent = () => { const { custom } = useFieldProps() const { isTestKey, nameOfIDField, stripeResourceType } = custom - const field = useFormFields(([fields]) => fields[nameOfIDField]) + const field = useFormFields(([fields]) => (fields && fields?.[nameOfIDField]) || null) const { value: stripeID } = field || {} const stripeEnv = isTestKey ? 'test/' : '' diff --git a/packages/richtext-slate/src/field/RichText.tsx b/packages/richtext-slate/src/field/RichText.tsx index f11a5bab5..b96ac8ce4 100644 --- a/packages/richtext-slate/src/field/RichText.tsx +++ b/packages/richtext-slate/src/field/RichText.tsx @@ -73,7 +73,7 @@ const RichTextField: React.FC< path: pathFromProps, placeholder, plugins, - readOnly, + readOnly: readOnlyFromProps, required, style, validate = richTextValidate, @@ -102,12 +102,16 @@ const RichTextField: React.FC< [validate, required, i18n], ) - const { path: pathFromContext } = useFieldProps() + const { path: pathFromContext, readOnly: readOnlyFromContext } = useFieldProps() - const { initialValue, path, schemaPath, setValue, showError, value } = useField({ - path: pathFromContext || pathFromProps || name, - validate: memoizedValidate, - }) + const { formInitializing, initialValue, path, schemaPath, setValue, showError, value } = useField( + { + path: pathFromContext || pathFromProps || name, + validate: memoizedValidate, + }, + ) + + const disabled = readOnlyFromProps || readOnlyFromContext || formInitializing const editor = useMemo(() => { let CreatedEditor = withEnterBreakOut(withHistory(withReact(createEditor()))) @@ -241,12 +245,12 @@ const RichTextField: React.FC< }) if (ops && Array.isArray(ops) && ops.length > 0) { - if (!readOnly && val !== defaultRichTextValue && val !== value) { + if (!disabled && val !== defaultRichTextValue && val !== value) { setValue(val) } } }, - [editor?.operations, readOnly, setValue, value], + [editor?.operations, disabled, setValue, value], ) useEffect(() => { @@ -263,16 +267,16 @@ const RichTextField: React.FC< }) } - if (readOnly) { + if (disabled) { setClickableState('disabled') } return () => { - if (readOnly) { + if (disabled) { setClickableState('enabled') } } - }, [readOnly]) + }, [disabled]) // useEffect(() => { // // If there is a change to the initial value, we need to reset Slate history @@ -289,7 +293,7 @@ const RichTextField: React.FC< 'field-type', className, showError && 'error', - readOnly && `${baseClass}--read-only`, + disabled && `${baseClass}--read-only`, ] .filter(Boolean) .join(' ') @@ -344,6 +348,7 @@ const RichTextField: React.FC< if (Button) { return ( = (props) => { - const { type = 'type', children, className, el = 'button', format, onClick, tooltip } = props + const { + type = 'type', + children, + className, + disabled: disabledFromProps, + el = 'button', + format, + onClick, + tooltip, + } = props const editor = useSlate() + const { disabled: disabledFromContext } = useElementButton() const [showTooltip, setShowTooltip] = useState(false) const defaultOnClick = useCallback( @@ -30,9 +41,11 @@ export const ElementButton: React.FC = (props) => { const Tag: ElementType = el + const disabled = disabledFromProps || disabledFromContext + return ( void diff --git a/packages/richtext-slate/src/field/providers/ElementButtonProvider.tsx b/packages/richtext-slate/src/field/providers/ElementButtonProvider.tsx index 99b93cfbc..cc2847aed 100644 --- a/packages/richtext-slate/src/field/providers/ElementButtonProvider.tsx +++ b/packages/richtext-slate/src/field/providers/ElementButtonProvider.tsx @@ -5,6 +5,7 @@ import type { FormFieldBase } from '@payloadcms/ui/fields/shared' import React from 'react' type ElementButtonContextType = { + disabled?: boolean fieldProps: FormFieldBase & { name: string richTextComponentMap: Map diff --git a/packages/translations/src/languages/he.ts b/packages/translations/src/languages/he.ts index 92db7f093..ffc4f893c 100644 --- a/packages/translations/src/languages/he.ts +++ b/packages/translations/src/languages/he.ts @@ -22,16 +22,19 @@ export const heTranslations: DefaultTranslationsObject = { failedToUnlock: 'ביטול נעילה נכשל', forceUnlock: 'אלץ ביטול נעילה', forgotPassword: 'שכחתי סיסמה', - forgotPasswordEmailInstructions: 'אנא הזן את כתובת הדוא"ל שלך למטה. תקבל הודעה עם הוראות לאיפוס הסיסמה שלך.', + forgotPasswordEmailInstructions: + 'אנא הזן את כתובת הדוא"ל שלך למטה. תקבל הודעה עם הוראות לאיפוס הסיסמה שלך.', forgotPasswordQuestion: 'שכחת סיסמה?', generate: 'יצירה', generateNewAPIKey: 'יצירת מפתח API חדש', - generatingNewAPIKeyWillInvalidate: 'יצירת מפתח API חדש תבטל את המפתח הקודם. האם אתה בטוח שברצונך להמשיך?', + generatingNewAPIKeyWillInvalidate: + 'יצירת מפתח API חדש תבטל את המפתח הקודם. האם אתה בטוח שברצונך להמשיך?', lockUntil: 'נעילה עד', logBackIn: 'התחברות מחדש', logOut: 'התנתקות', loggedIn: 'כדי להתחבר עם משתמש אחר, יש להתנתק תחילה.', - loggedInChangePassword: 'כדי לשנות את הסיסמה שלך, יש לעבור לחשבון שלך ולערוך את הסיסמה שם.', + loggedInChangePassword: + 'כדי לשנות את הסיסמה שלך, יש לעבור לחשבון שלך ולערוך את הסיסמה שם.', loggedOutInactivity: 'התנתקת בשל חוסר פעילות.', loggedOutSuccessfully: 'התנתקת בהצלחה.', loggingOut: 'מתנתק...', @@ -43,7 +46,8 @@ export const heTranslations: DefaultTranslationsObject = { logoutSuccessful: 'התנתקות הצליחה.', logoutUser: 'התנתקות משתמש', newAPIKeyGenerated: 'נוצר מפתח API חדש.', - newAccountCreated: 'נוצר חשבון חדש עבורך כדי לגשת אל {{serverURL}}. אנא לחץ על הקישור הבא או הדבק את ה-URL בדפדפן שלך כדי לאמת את הדוא"ל שלך: {{verificationURL}}.
לאחר אימות כתובת הדוא"ל, תוכל להתחבר בהצלחה.', + newAccountCreated: + 'נוצר חשבון חדש עבורך כדי לגשת אל {{serverURL}}. אנא לחץ על הקישור הבא או הדבק את ה-URL בדפדפן שלך כדי לאמת את הדוא"ל שלך: {{verificationURL}}.
לאחר אימות כתובת הדוא"ל, תוכל להתחבר בהצלחה.', newPassword: 'סיסמה חדשה', passed: 'אימות הצליח', passwordResetSuccessfully: 'איפוס הסיסמה הצליח.', @@ -61,9 +65,11 @@ export const heTranslations: DefaultTranslationsObject = { verify: 'אמת', verifyUser: 'אמת משתמש', verifyYourEmail: 'אמת את כתובת הדוא"ל שלך', - youAreInactive: 'לא היית פעיל לזמן קצר ובקרוב תתנתק אוטומטית כדי לשמור על האבטחה של חשבונך. האם ברצונך להישאר מחובר?', - youAreReceivingResetPassword: 'קיבלת הודעה זו מכיוון שאתה (או מישהו אחר) ביקשת לאפס את הסיסמה של החשבון שלך. אנא לחץ על הקישור הבא או הדבק אותו בשורת הכתובת בדפדפן שלך כדי להשלים את התהליך:', - youDidNotRequestPassword: 'אם לא ביקשת זאת, אנא התעלם מההודעה והסיסמה שלך תישאר ללא שינוי.' + youAreInactive: + 'לא היית פעיל לזמן קצר ובקרוב תתנתק אוטומטית כדי לשמור על האבטחה של חשבונך. האם ברצונך להישאר מחובר?', + youAreReceivingResetPassword: + 'קיבלת הודעה זו מכיוון שאתה (או מישהו אחר) ביקשת לאפס את הסיסמה של החשבון שלך. אנא לחץ על הקישור הבא או הדבק אותו בשורת הכתובת בדפדפן שלך כדי להשלים את התהליך:', + youDidNotRequestPassword: 'אם לא ביקשת זאת, אנא התעלם מההודעה והסיסמה שלך תישאר ללא שינוי.', }, error: { accountAlreadyActivated: 'חשבון זה כבר הופעל.', @@ -339,7 +345,8 @@ export const heTranslations: DefaultTranslationsObject = { type: 'סוג', aboutToPublishSelection: 'אתה עומד לפרסם את כל ה{{label}} שנבחרו. האם אתה בטוח?', aboutToRestore: 'אתה עומד לשחזר את מסמך {{label}} למצב שהיה בו בתאריך {{versionDate}}.', - aboutToRestoreGlobal: 'אתה עומד לשחזר את {{label}} הגלובלי למצב שהיה בו בתאריך {{versionDate}}.', + aboutToRestoreGlobal: + 'אתה עומד לשחזר את {{label}} הגלובלי למצב שהיה בו בתאריך {{versionDate}}.', aboutToRevertToPublished: 'אתה עומד להחזיר את השינויים במסמך הזה לגרסה שפורסמה. האם אתה בטוח?', aboutToUnpublish: 'אתה עומד לבטל את הפרסום של מסמך זה. האם אתה בטוח?', aboutToUnpublishSelection: 'אתה עומד לבטל את הפרסום של כל ה{{label}} שנבחרו. האם אתה בטוח?', diff --git a/packages/ui/src/elements/DocumentFields/index.tsx b/packages/ui/src/elements/DocumentFields/index.tsx index 7d6d46181..da341d032 100644 --- a/packages/ui/src/elements/DocumentFields/index.tsx +++ b/packages/ui/src/elements/DocumentFields/index.tsx @@ -62,6 +62,7 @@ export const DocumentFields: React.FC = ({ = ({
{ const { versions } = useDocumentInfo() - if (versions?.totalDocs > 0) { - return {versions?.totalDocs?.toString()} - } + // To prevent CLS (versions are currently loaded client-side), render non-breaking space if there are no versions + // The pill is already conditionally rendered to begin with based on whether the document is version-enabled + // documents that are version enabled _always_ have at least one version + const hasVersions = versions?.totalDocs > 0 - return null + return ( + + {hasVersions ? versions.totalDocs.toString() :  } + + ) } diff --git a/packages/ui/src/elements/ReactSelect/index.tsx b/packages/ui/src/elements/ReactSelect/index.tsx index 7bebdf689..56c05caea 100644 --- a/packages/ui/src/elements/ReactSelect/index.tsx +++ b/packages/ui/src/elements/ReactSelect/index.tsx @@ -3,7 +3,7 @@ import type { KeyboardEventHandler } from 'react' import { arrayMove } from '@dnd-kit/sortable' import { getTranslation } from '@payloadcms/translations' -import React from 'react' +import React, { useEffect, useId } from 'react' import Select from 'react-select' import CreatableSelect from 'react-select/creatable' @@ -13,6 +13,7 @@ export type { Option } from './types.js' import { useTranslation } from '../../providers/Translation/index.js' import { DraggableSortable } from '../DraggableSortable/index.js' +import { ShimmerEffect } from '../ShimmerEffect/index.js' import { ClearIndicator } from './ClearIndicator/index.js' import { Control } from './Control/index.js' import { DropdownIndicator } from './DropdownIndicator/index.js' @@ -31,6 +32,12 @@ const createOption = (label: string) => ({ const SelectAdapter: React.FC = (props) => { const { i18n, t } = useTranslation() const [inputValue, setInputValue] = React.useState('') // for creatable select + const uuid = useId() + const [hasMounted, setHasMounted] = React.useState(false) + + useEffect(() => { + setHasMounted(true) + }, []) const { className, @@ -60,6 +67,10 @@ const SelectAdapter: React.FC = (props) => { .filter(Boolean) .join(' ') + if (!hasMounted) { + return + } + if (!isCreatable) { return ( = (props) => { const isWithinRow = useRow() const isWithinTab = useTabs() const { errorPaths } = useField({ path }) + const formInitializing = useFormInitializing() + const formProcessing = useFormProcessing() const submitted = useFormSubmitted() const errorCount = errorPaths.length const fieldHasErrors = submitted && errorCount > 0 - const readOnly = readOnlyFromProps || readOnlyFromContext + const disabled = readOnlyFromProps || readOnlyFromContext || formProcessing || formInitializing const isTopLevel = !(isWithinCollapsible || isWithinGroup || isWithinRow) @@ -108,7 +114,7 @@ const GroupField: React.FC = (props) => { margins="small" path={path} permissions={permissions?.fields} - readOnly={readOnly} + readOnly={disabled} schemaPath={schemaPath} />
diff --git a/packages/ui/src/fields/JSON/index.tsx b/packages/ui/src/fields/JSON/index.tsx index 77f3cd4b8..8d8325b73 100644 --- a/packages/ui/src/fields/JSON/index.tsx +++ b/packages/ui/src/fields/JSON/index.tsx @@ -64,12 +64,14 @@ const JSONFieldComponent: React.FC = (props) => { ) const { path: pathFromContext, readOnly: readOnlyFromContext } = useFieldProps() - const readOnly = readOnlyFromProps || readOnlyFromContext - const { initialValue, path, setValue, showError, value } = useField({ - path: pathFromContext || pathFromProps || name, - validate: memoizedValidate, - }) + const { formInitializing, formProcessing, initialValue, path, setValue, showError, value } = + useField({ + path: pathFromContext || pathFromProps || name, + validate: memoizedValidate, + }) + + const disabled = readOnlyFromProps || readOnlyFromContext || formProcessing || formInitializing const handleMount = useCallback( (editor, monaco) => { @@ -92,7 +94,7 @@ const JSONFieldComponent: React.FC = (props) => { const handleChange = useCallback( (val) => { - if (readOnly) return + if (disabled) return setStringValue(val) try { @@ -103,14 +105,16 @@ const JSONFieldComponent: React.FC = (props) => { setJsonError(e) } }, - [readOnly, setValue, setStringValue], + [disabled, setValue, setStringValue], ) useEffect(() => { - if (hasLoadedValue) return + if (hasLoadedValue || value === undefined) return + setStringValue( value || initialValue ? JSON.stringify(value ? value : initialValue, null, 2) : '', ) + setHasLoadedValue(true) }, [initialValue, value, hasLoadedValue]) @@ -121,7 +125,7 @@ const JSONFieldComponent: React.FC = (props) => { baseClass, className, showError && 'error', - readOnly && 'read-only', + disabled && 'read-only', ] .filter(Boolean) .join(' ')} @@ -145,7 +149,7 @@ const JSONFieldComponent: React.FC = (props) => { onChange={handleChange} onMount={handleMount} options={editorOptions} - readOnly={readOnly} + readOnly={disabled} value={stringValue} /> {AfterInput} diff --git a/packages/ui/src/fields/Number/index.tsx b/packages/ui/src/fields/Number/index.tsx index 14223d0c1..a052cd764 100644 --- a/packages/ui/src/fields/Number/index.tsx +++ b/packages/ui/src/fields/Number/index.tsx @@ -73,13 +73,16 @@ const NumberFieldComponent: React.FC = (props) => { ) const { path: pathFromContext, readOnly: readOnlyFromContext } = useFieldProps() - const readOnly = readOnlyFromProps || readOnlyFromContext - const { path, setValue, showError, value } = useField({ + const { formInitializing, formProcessing, path, setValue, showError, value } = useField< + number | number[] + >({ path: pathFromContext || pathFromProps || name, validate: memoizedValidate, }) + const disabled = readOnlyFromProps || readOnlyFromContext || formProcessing || formInitializing + const handleChange = useCallback( (e) => { const val = parseFloat(e.target.value) @@ -104,7 +107,7 @@ const NumberFieldComponent: React.FC = (props) => { const handleHasManyChange = useCallback( (selectedOption) => { - if (!readOnly) { + if (!disabled) { let newValue if (!selectedOption) { newValue = [] @@ -117,7 +120,7 @@ const NumberFieldComponent: React.FC = (props) => { setValue(newValue) } }, - [readOnly, setValue], + [disabled, setValue], ) // useEffect update valueToRender: @@ -145,7 +148,7 @@ const NumberFieldComponent: React.FC = (props) => { 'number', className, showError && 'error', - readOnly && 'read-only', + disabled && 'read-only', hasMany && 'has-many', ] .filter(Boolean) @@ -166,7 +169,7 @@ const NumberFieldComponent: React.FC = (props) => { {hasMany ? ( { // eslint-disable-next-line no-restricted-globals const isOverHasMany = Array.isArray(value) && value.length >= maxRows @@ -194,7 +197,7 @@ const NumberFieldComponent: React.FC = (props) => {
{BeforeInput} = (props) => { CustomLabel, autoComplete, className, - disabled, + disabled: disabledFromProps, errorProps, label, labelProps, @@ -52,14 +52,22 @@ const PasswordField: React.FC = (props) => { [validate, required], ) - const { formProcessing, path, setValue, showError, value } = useField({ + const { formInitializing, formProcessing, path, setValue, showError, value } = useField({ path: pathFromProps || name, validate: memoizedValidate, }) + const disabled = disabledFromProps || formInitializing || formProcessing + return (
= (props) => { />
- = (props) => { ) const { path: pathFromContext, readOnly: readOnlyFromContext } = useFieldProps() - const readOnly = readOnlyFromProps || readOnlyFromContext const { + formInitializing, + formProcessing, path, setValue, showError, @@ -80,6 +81,8 @@ const RadioGroupField: React.FC = (props) => { validate: memoizedValidate, }) + const disabled = readOnlyFromProps || readOnlyFromContext || formProcessing || formInitializing + const value = valueFromContext || valueFromProps return ( @@ -90,7 +93,7 @@ const RadioGroupField: React.FC = (props) => { className, `${baseClass}--layout-${layout}`, showError && 'error', - readOnly && `${baseClass}--read-only`, + disabled && `${baseClass}--read-only`, ] .filter(Boolean) .join(' ')} @@ -132,13 +135,13 @@ const RadioGroupField: React.FC = (props) => { onChangeFromProps(optionValue) } - if (!readOnly) { + if (!disabled) { setValue(optionValue) } }} option={optionIsObject(option) ? option : { label: option, value: option }} path={path} - readOnly={readOnly} + readOnly={disabled} uuid={uuid} /> diff --git a/packages/ui/src/fields/Relationship/index.tsx b/packages/ui/src/fields/Relationship/index.tsx index ebe8ba9d3..c7f9c3c9a 100644 --- a/packages/ui/src/fields/Relationship/index.tsx +++ b/packages/ui/src/fields/Relationship/index.tsx @@ -14,7 +14,6 @@ import { FieldDescription } from '../../forms/FieldDescription/index.js' import { FieldError } from '../../forms/FieldError/index.js' import { FieldLabel } from '../../forms/FieldLabel/index.js' import { useFieldProps } from '../../forms/FieldPropsProvider/index.js' -import { useFormProcessing } from '../../forms/Form/context.js' import { useField } from '../../forms/useField/index.js' import { withCondition } from '../../forms/withCondition/index.js' import { useDebouncedCallback } from '../../hooks/useDebouncedCallback.js' @@ -72,7 +71,6 @@ const RelationshipField: React.FC = (props) => { const { i18n, t } = useTranslation() const { permissions } = useAuth() const { code: locale } = useLocale() - const formProcessing = useFormProcessing() const hasMultipleRelations = Array.isArray(relationTo) const [options, dispatchOptions] = useReducer(optionsReducer, []) const [lastFullyLoadedRelation, setLastFullyLoadedRelation] = useState(-1) @@ -93,15 +91,23 @@ const RelationshipField: React.FC = (props) => { [validate, required], ) const { path: pathFromContext, readOnly: readOnlyFromContext } = useFieldProps() - const readOnly = readOnlyFromProps || readOnlyFromContext - const { filterOptions, initialValue, path, setValue, showError, value } = useField< - Value | Value[] - >({ + const { + filterOptions, + formInitializing, + formProcessing, + initialValue, + path, + setValue, + showError, + value, + } = useField({ path: pathFromContext || pathFromProps || name, validate: memoizedValidate, }) + const readOnly = readOnlyFromProps || readOnlyFromContext || formInitializing + const valueRef = useRef(value) valueRef.current = value diff --git a/packages/ui/src/fields/Select/index.tsx b/packages/ui/src/fields/Select/index.tsx index a1fa9ce97..ee5873b8b 100644 --- a/packages/ui/src/fields/Select/index.tsx +++ b/packages/ui/src/fields/Select/index.tsx @@ -73,16 +73,17 @@ const SelectField: React.FC = (props) => { ) const { path: pathFromContext, readOnly: readOnlyFromContext } = useFieldProps() - const readOnly = readOnlyFromProps || readOnlyFromContext - const { path, setValue, showError, value } = useField({ + const { formInitializing, formProcessing, path, setValue, showError, value } = useField({ path: pathFromContext || pathFromProps || name, validate: memoizedValidate, }) + const disabled = readOnlyFromProps || readOnlyFromContext || formProcessing || formInitializing + const onChange = useCallback( (selectedOption) => { - if (!readOnly) { + if (!disabled) { let newValue if (!selectedOption) { newValue = null @@ -103,7 +104,7 @@ const SelectField: React.FC = (props) => { setValue(newValue) } }, - [readOnly, hasMany, setValue, onChangeFromProps], + [disabled, hasMany, setValue, onChangeFromProps], ) return ( @@ -125,7 +126,7 @@ const SelectField: React.FC = (props) => { onChange={onChange} options={options} path={path} - readOnly={readOnly} + readOnly={disabled} required={required} showError={showError} style={style} diff --git a/packages/ui/src/fields/Tabs/index.tsx b/packages/ui/src/fields/Tabs/index.tsx index 8a0d3b021..dc4f77ca1 100644 --- a/packages/ui/src/fields/Tabs/index.tsx +++ b/packages/ui/src/fields/Tabs/index.tsx @@ -54,6 +54,7 @@ const TabsField: React.FC = (props) => { readOnly: readOnlyFromContext, schemaPath, } = useFieldProps() + const readOnly = readOnlyFromProps || readOnlyFromContext const path = pathFromContext || pathFromProps || name const { getPreference, setPreference } = usePreferences() diff --git a/packages/ui/src/fields/Text/index.tsx b/packages/ui/src/fields/Text/index.tsx index 89b08f137..f3292f90f 100644 --- a/packages/ui/src/fields/Text/index.tsx +++ b/packages/ui/src/fields/Text/index.tsx @@ -60,13 +60,14 @@ const TextField: React.FC = (props) => { ) const { path: pathFromContext, readOnly: readOnlyFromContext } = useFieldProps() - const readOnly = readOnlyFromProps || readOnlyFromContext - const { formProcessing, path, setValue, showError, value } = useField({ + const { formInitializing, formProcessing, path, setValue, showError, value } = useField({ path: pathFromContext || pathFromProps || name, validate: memoizedValidate, }) + const disabled = readOnlyFromProps || readOnlyFromContext || formProcessing || formInitializing + const renderRTL = isFieldRTL({ fieldLocalized: localized, fieldRTL: rtl, @@ -80,7 +81,7 @@ const TextField: React.FC = (props) => { const handleHasManyChange = useCallback( (selectedOption) => { - if (!readOnly) { + if (!disabled) { let newValue if (!selectedOption) { newValue = [] @@ -93,7 +94,7 @@ const TextField: React.FC = (props) => { setValue(newValue) } }, - [readOnly, setValue], + [disabled, setValue], ) // useEffect update valueToRender: @@ -140,7 +141,7 @@ const TextField: React.FC = (props) => { } path={path} placeholder={placeholder} - readOnly={formProcessing || readOnly} + readOnly={disabled} required={required} rtl={renderRTL} showError={showError} diff --git a/packages/ui/src/fields/Textarea/index.tsx b/packages/ui/src/fields/Textarea/index.tsx index 132e2dfaf..7480482b6 100644 --- a/packages/ui/src/fields/Textarea/index.tsx +++ b/packages/ui/src/fields/Textarea/index.tsx @@ -66,13 +66,14 @@ const TextareaField: React.FC = (props) => { ) const { path: pathFromContext, readOnly: readOnlyFromContext } = useFieldProps() - const readOnly = readOnlyFromProps || readOnlyFromContext - const { path, setValue, showError, value } = useField({ + const { formInitializing, formProcessing, path, setValue, showError, value } = useField({ path: pathFromContext || pathFromProps || name, validate: memoizedValidate, }) + const disabled = readOnlyFromProps || readOnlyFromContext || formProcessing || formInitializing + return ( = (props) => { }} path={path} placeholder={getTranslation(placeholder, i18n)} - readOnly={readOnly} + readOnly={disabled} required={required} rows={rows} rtl={isRTL} diff --git a/packages/ui/src/fields/Upload/index.tsx b/packages/ui/src/fields/Upload/index.tsx index 0949b2e8a..076a9fe7a 100644 --- a/packages/ui/src/fields/Upload/index.tsx +++ b/packages/ui/src/fields/Upload/index.tsx @@ -52,12 +52,14 @@ const _Upload: React.FC = (props) => { ) const { path: pathFromContext, readOnly: readOnlyFromContext } = useFieldProps() - const readOnly = readOnlyFromProps || readOnlyFromContext - const { filterOptions, path, setValue, showError, value } = useField({ - path: pathFromContext || pathFromProps, - validate: memoizedValidate, - }) + const { filterOptions, formInitializing, formProcessing, path, setValue, showError, value } = + useField({ + path: pathFromContext || pathFromProps, + validate: memoizedValidate, + }) + + const disabled = readOnlyFromProps || readOnlyFromContext || formProcessing || formInitializing const onChange = useCallback( (incomingValue) => { @@ -83,7 +85,7 @@ const _Upload: React.FC = (props) => { labelProps={labelProps} onChange={onChange} path={path} - readOnly={readOnly} + readOnly={disabled} relationTo={relationTo} required={required} serverURL={serverURL} diff --git a/packages/ui/src/forms/FieldPropsProvider/index.tsx b/packages/ui/src/forms/FieldPropsProvider/index.tsx index 2619ed5f4..d47f92e7a 100644 --- a/packages/ui/src/forms/FieldPropsProvider/index.tsx +++ b/packages/ui/src/forms/FieldPropsProvider/index.tsx @@ -32,6 +32,7 @@ export type Props = { children: React.ReactNode custom?: Record indexPath?: string + isForceRendered?: boolean path: string permissions?: FieldPermissions readOnly: boolean diff --git a/packages/ui/src/forms/Form/context.ts b/packages/ui/src/forms/Form/context.ts index 25d9a355d..f0fb68949 100644 --- a/packages/ui/src/forms/Form/context.ts +++ b/packages/ui/src/forms/Form/context.ts @@ -13,6 +13,7 @@ const FormWatchContext = createContext({} as Context) const SubmittedContext = createContext(false) const ProcessingContext = createContext(false) const ModifiedContext = createContext(false) +const InitializingContext = createContext(false) const FormFieldsContext = createSelectorContext([{}, () => null]) /** @@ -25,6 +26,7 @@ const useWatchForm = (): Context => useContext(FormWatchContext) const useFormSubmitted = (): boolean => useContext(SubmittedContext) const useFormProcessing = (): boolean => useContext(ProcessingContext) const useFormModified = (): boolean => useContext(ModifiedContext) +const useFormInitializing = (): boolean => useContext(InitializingContext) /** * Get and set the value of a form field based on a selector @@ -46,12 +48,14 @@ export { FormContext, FormFieldsContext, FormWatchContext, + InitializingContext, ModifiedContext, ProcessingContext, SubmittedContext, useAllFormFields, useForm, useFormFields, + useFormInitializing, useFormModified, useFormProcessing, useFormSubmitted, diff --git a/packages/ui/src/forms/Form/getSiblingData.ts b/packages/ui/src/forms/Form/getSiblingData.ts index a36b47839..736ef8768 100644 --- a/packages/ui/src/forms/Form/getSiblingData.ts +++ b/packages/ui/src/forms/Form/getSiblingData.ts @@ -6,9 +6,12 @@ const { unflatten } = flatleyImport import { reduceFieldsToValues } from '../../utilities/reduceFieldsToValues.js' export const getSiblingData = (fields: FormState, path: string): Data => { + if (!fields) return null + if (path.indexOf('.') === -1) { return reduceFieldsToValues(fields, true) } + const siblingFields = {} // Determine if the last segment of the path is an array-based row diff --git a/packages/ui/src/forms/Form/index.tsx b/packages/ui/src/forms/Form/index.tsx index 444345322..bac74ad77 100644 --- a/packages/ui/src/forms/Form/index.tsx +++ b/packages/ui/src/forms/Form/index.tsx @@ -33,6 +33,7 @@ import { FormContext, FormFieldsContext, FormWatchContext, + InitializingContext, ModifiedContext, ProcessingContext, SubmittedContext, @@ -60,6 +61,7 @@ export const Form: React.FC = (props) => { // fields: fieldsFromProps = collection?.fields || global?.fields, handleResponse, initialState, // fully formed initial field state + isInitializing: initializingFromProps, onChange, onSubmit, onSuccess, @@ -86,13 +88,16 @@ export const Form: React.FC = (props) => { } = config const [disabled, setDisabled] = useState(disabledFromProps || false) + const [isMounted, setIsMounted] = useState(false) const [modified, setModified] = useState(false) + const [initializing, setInitializing] = useState(initializingFromProps) const [processing, setProcessing] = useState(false) const [submitted, setSubmitted] = useState(false) const formRef = useRef(null) const contextRef = useRef({} as FormContextType) const fieldsReducer = useReducer(fieldReducer, {}, () => initialState) + /** * `fields` is the current, up-to-date state/data of all fields in the form. It can be modified by using dispatchFields, * which calls the fieldReducer, which then updates the state. @@ -489,8 +494,10 @@ export const Form: React.FC = (props) => { ) useEffect(() => { - if (typeof disabledFromProps === 'boolean') setDisabled(disabledFromProps) - }, [disabledFromProps]) + if (initializingFromProps !== undefined) { + setInitializing(initializingFromProps) + } + }, [initializingFromProps]) contextRef.current.submit = submit contextRef.current.getFields = getFields @@ -513,6 +520,15 @@ export const Form: React.FC = (props) => { contextRef.current.removeFieldRow = removeFieldRow contextRef.current.replaceFieldRow = replaceFieldRow contextRef.current.uuid = uuid + contextRef.current.initializing = initializing + + useEffect(() => { + setIsMounted(true) + }, []) + + useEffect(() => { + if (typeof disabledFromProps === 'boolean') setDisabled(disabledFromProps) + }, [disabledFromProps]) useEffect(() => { if (typeof submittedFromProps === 'boolean') setSubmitted(submittedFromProps) @@ -521,7 +537,7 @@ export const Form: React.FC = (props) => { useEffect(() => { if (initialState) { contextRef.current = { ...initContextState } as FormContextType - dispatchFields({ type: 'REPLACE_STATE', state: initialState }) + dispatchFields({ type: 'REPLACE_STATE', optimize: false, state: initialState }) } }, [initialState, dispatchFields]) @@ -597,13 +613,15 @@ export const Form: React.FC = (props) => { }} > - - - - {children} - - - + + + + + {children} + + + + diff --git a/packages/ui/src/forms/Form/initContextState.ts b/packages/ui/src/forms/Form/initContextState.ts index 81dcedb2c..bad62c5d1 100644 --- a/packages/ui/src/forms/Form/initContextState.ts +++ b/packages/ui/src/forms/Form/initContextState.ts @@ -37,6 +37,7 @@ export const initContextState: Context = { getField: (): FormField => undefined, getFields: (): FormState => ({}), getSiblingData, + initializing: undefined, removeFieldRow: () => undefined, replaceFieldRow: () => undefined, replaceState: () => undefined, diff --git a/packages/ui/src/forms/Form/types.ts b/packages/ui/src/forms/Form/types.ts index fbaef4366..2e9681f9b 100644 --- a/packages/ui/src/forms/Form/types.ts +++ b/packages/ui/src/forms/Form/types.ts @@ -35,6 +35,7 @@ export type FormProps = ( fields?: Field[] handleResponse?: (res: Response) => void initialState?: FormState + isInitializing?: boolean log?: boolean onChange?: ((args: { formState: FormState }) => Promise)[] onSubmit?: (fields: FormState, data: Data) => void @@ -197,6 +198,7 @@ export type Context = { getField: GetField getFields: GetFields getSiblingData: GetSiblingData + initializing: boolean removeFieldRow: ({ path, rowIndex }: { path: string; rowIndex: number }) => void replaceFieldRow: ({ data, diff --git a/packages/ui/src/forms/RenderFields/index.tsx b/packages/ui/src/forms/RenderFields/index.tsx index 6a9cf9360..7b4c4cd63 100644 --- a/packages/ui/src/forms/RenderFields/index.tsx +++ b/packages/ui/src/forms/RenderFields/index.tsx @@ -22,8 +22,9 @@ export const RenderFields: React.FC = (props) => { { rootMargin: '1000px', }, - forceRender, + Boolean(forceRender), ) + const isIntersecting = Boolean(entry?.isIntersecting) const isAboveViewport = entry?.boundingClientRect?.top < 0 const shouldRender = forceRender || isIntersecting || isAboveViewport @@ -67,6 +68,9 @@ export const RenderFields: React.FC = (props) => { isHidden, } = f + const forceRenderChildren = + (typeof forceRender === 'number' && fieldIndex <= forceRender) || true + const name = 'name' in f ? f.name : undefined return ( @@ -74,7 +78,7 @@ export const RenderFields: React.FC = (props) => { CustomField={CustomField} custom={custom} disabled={disabled} - fieldComponentProps={fieldComponentProps} + fieldComponentProps={{ ...fieldComponentProps, forceRender: forceRenderChildren }} indexPath={indexPath !== undefined ? `${indexPath}.${fieldIndex}` : `${fieldIndex}`} isHidden={isHidden} key={fieldIndex} diff --git a/packages/ui/src/forms/RenderFields/types.ts b/packages/ui/src/forms/RenderFields/types.ts index bd8f0e06e..3dbe618fc 100644 --- a/packages/ui/src/forms/RenderFields/types.ts +++ b/packages/ui/src/forms/RenderFields/types.ts @@ -5,7 +5,14 @@ import type { FieldMap } from '../../providers/ComponentMap/buildComponentMap/ty export type Props = { className?: string fieldMap: FieldMap - forceRender?: boolean + /** + * Controls the rendering behavior of the fields, i.e. defers rendering until they intersect with the viewport using the Intersection Observer API. + * + * If true, the fields will be rendered immediately, rather than waiting for them to intersect with the viewport. + * + * If a number is provided, will immediately render fields _up to that index_. + */ + forceRender?: boolean | number indexPath?: string margins?: 'small' | false operation?: Operation diff --git a/packages/ui/src/forms/Submit/index.tsx b/packages/ui/src/forms/Submit/index.tsx index 0ae36d3f8..92e91c238 100644 --- a/packages/ui/src/forms/Submit/index.tsx +++ b/packages/ui/src/forms/Submit/index.tsx @@ -4,7 +4,7 @@ import React, { forwardRef } from 'react' import type { Props } from '../../elements/Button/types.js' import { Button } from '../../elements/Button/index.js' -import { useForm, useFormProcessing } from '../Form/context.js' +import { useForm, useFormInitializing, useFormProcessing } from '../Form/context.js' import './index.scss' const baseClass = 'form-submit' @@ -12,9 +12,10 @@ const baseClass = 'form-submit' export const FormSubmit = forwardRef((props, ref) => { const { type = 'submit', buttonId: id, children, disabled: disabledFromProps } = props const processing = useFormProcessing() + const initializing = useFormInitializing() const { disabled } = useForm() - const canSave = !(disabledFromProps || processing || disabled) + const canSave = !(disabledFromProps || initializing || processing || disabled) return (
diff --git a/packages/ui/src/forms/buildStateFromSchema/calculateDefaultValues/index.ts b/packages/ui/src/forms/buildStateFromSchema/calculateDefaultValues/index.ts index 228361199..0382705ad 100644 --- a/packages/ui/src/forms/buildStateFromSchema/calculateDefaultValues/index.ts +++ b/packages/ui/src/forms/buildStateFromSchema/calculateDefaultValues/index.ts @@ -1,4 +1,5 @@ -import type { Data, Field as FieldSchema, PayloadRequestWithData } from 'payload/types' +import type { User } from 'payload/auth' +import type { Data, Field as FieldSchema } from 'payload/types' import { iterateFields } from './iterateFields.js' @@ -6,17 +7,25 @@ type Args = { data: Data fields: FieldSchema[] id?: number | string - req: PayloadRequestWithData + locale: string | undefined siblingData: Data + user: User } -export const calculateDefaultValues = async ({ id, data, fields, req }: Args): Promise => { +export const calculateDefaultValues = async ({ + id, + data, + fields, + locale, + user, +}: Args): Promise => { await iterateFields({ id, data, fields, - req, + locale, siblingData: data, + user, }) return data diff --git a/packages/ui/src/forms/buildStateFromSchema/calculateDefaultValues/iterateFields.ts b/packages/ui/src/forms/buildStateFromSchema/calculateDefaultValues/iterateFields.ts index 8294c4b8a..c3bc1c095 100644 --- a/packages/ui/src/forms/buildStateFromSchema/calculateDefaultValues/iterateFields.ts +++ b/packages/ui/src/forms/buildStateFromSchema/calculateDefaultValues/iterateFields.ts @@ -1,4 +1,5 @@ -import type { Data, Field, PayloadRequestWithData, TabAsField } from 'payload/types' +import type { User } from 'payload/auth' +import type { Data, Field, TabAsField } from 'payload/types' import { defaultValuePromise } from './promise.js' @@ -6,16 +7,18 @@ type Args = { data: T fields: (Field | TabAsField)[] id?: number | string - req: PayloadRequestWithData + locale: string | undefined siblingData: Data + user: User } export const iterateFields = async ({ id, data, fields, - req, + locale, siblingData, + user, }: Args): Promise => { const promises = [] fields.forEach((field) => { @@ -24,8 +27,9 @@ export const iterateFields = async ({ id, data, field, - req, + locale, siblingData, + user, }), ) }) diff --git a/packages/ui/src/forms/buildStateFromSchema/calculateDefaultValues/promise.ts b/packages/ui/src/forms/buildStateFromSchema/calculateDefaultValues/promise.ts index fbae14a39..14f8021f6 100644 --- a/packages/ui/src/forms/buildStateFromSchema/calculateDefaultValues/promise.ts +++ b/packages/ui/src/forms/buildStateFromSchema/calculateDefaultValues/promise.ts @@ -1,12 +1,7 @@ +import type { User } from 'payload/auth' import type { Data } from 'payload/types' -import { - type Field, - type PayloadRequestWithData, - type TabAsField, - fieldAffectsData, - tabHasName, -} from 'payload/types' +import { type Field, type TabAsField, fieldAffectsData, tabHasName } from 'payload/types' import { getDefaultValue } from 'payload/utilities' import { iterateFields } from './iterateFields.js' @@ -15,8 +10,9 @@ type Args = { data: T field: Field | TabAsField id?: number | string - req: PayloadRequestWithData + locale: string | undefined siblingData: Data + user: User } // TODO: Make this works for rich text subfields @@ -24,8 +20,9 @@ export const defaultValuePromise = async ({ id, data, field, - req, + locale, siblingData, + user, }: Args): Promise => { if (fieldAffectsData(field)) { if ( @@ -34,8 +31,8 @@ export const defaultValuePromise = async ({ ) { siblingData[field.name] = await getDefaultValue({ defaultValue: field.defaultValue, - locale: req.locale, - user: req.user, + locale, + user, value: siblingData[field.name], }) } @@ -52,8 +49,9 @@ export const defaultValuePromise = async ({ id, data, fields: field.fields, - req, + locale, siblingData: groupData, + user, }) break @@ -70,8 +68,9 @@ export const defaultValuePromise = async ({ id, data, fields: field.fields, - req, + locale, siblingData: row, + user, }), ) }) @@ -97,8 +96,9 @@ export const defaultValuePromise = async ({ id, data, fields: block.fields, - req, + locale, siblingData: row, + user, }), ) } @@ -115,8 +115,9 @@ export const defaultValuePromise = async ({ id, data, fields: field.fields, - req, + locale, siblingData, + user, }) break @@ -136,8 +137,9 @@ export const defaultValuePromise = async ({ id, data, fields: field.fields, - req, + locale, siblingData: tabSiblingData, + user, }) break @@ -148,8 +150,9 @@ export const defaultValuePromise = async ({ id, data, fields: field.tabs.map((tab) => ({ ...tab, type: 'tab' })), - req, + locale, siblingData, + user, }) break diff --git a/packages/ui/src/forms/buildStateFromSchema/index.tsx b/packages/ui/src/forms/buildStateFromSchema/index.tsx index 62e4b9204..2522d095c 100644 --- a/packages/ui/src/forms/buildStateFromSchema/index.tsx +++ b/packages/ui/src/forms/buildStateFromSchema/index.tsx @@ -41,8 +41,9 @@ export const buildStateFromSchema = async (args: Args): Promise => { id, data: fullData, fields: fieldSchema, - req, + locale: req.locale, siblingData: fullData, + user: req.user, }) await iterateFields({ diff --git a/packages/ui/src/forms/useField/index.tsx b/packages/ui/src/forms/useField/index.tsx index 0183b6252..513a279a4 100644 --- a/packages/ui/src/forms/useField/index.tsx +++ b/packages/ui/src/forms/useField/index.tsx @@ -16,6 +16,7 @@ import { useFieldProps } from '../FieldPropsProvider/index.js' import { useForm, useFormFields, + useFormInitializing, useFormModified, useFormProcessing, useFormSubmitted, @@ -36,6 +37,7 @@ export const useField = (options: Options): FieldType => { const submitted = useFormSubmitted() const processing = useFormProcessing() + const initializing = useFormInitializing() const { user } = useAuth() const { id } = useDocumentInfo() const operation = useOperation() @@ -108,6 +110,7 @@ export const useField = (options: Options): FieldType => { errorMessage: field?.errorMessage, errorPaths: field?.errorPaths || [], filterOptions, + formInitializing: initializing, formProcessing: processing, formSubmitted: submitted, initialValue, @@ -137,6 +140,7 @@ export const useField = (options: Options): FieldType => { readOnly, permissions, filterOptions, + initializing, ], ) diff --git a/packages/ui/src/forms/useField/types.ts b/packages/ui/src/forms/useField/types.ts index 899898216..c0b597790 100644 --- a/packages/ui/src/forms/useField/types.ts +++ b/packages/ui/src/forms/useField/types.ts @@ -14,6 +14,7 @@ export type FieldType = { errorMessage?: string errorPaths?: string[] filterOptions?: FilterOptionsResult + formInitializing: boolean formProcessing: boolean formSubmitted: boolean initialValue?: T diff --git a/packages/ui/src/providers/DocumentInfo/index.tsx b/packages/ui/src/providers/DocumentInfo/index.tsx index f332d1f7b..59f773034 100644 --- a/packages/ui/src/providers/DocumentInfo/index.tsx +++ b/packages/ui/src/providers/DocumentInfo/index.tsx @@ -9,7 +9,6 @@ import React, { createContext, useCallback, useContext, useEffect, useRef, useSt import type { DocumentInfoContext, DocumentInfoProps } from './types.js' -import { LoadingOverlay } from '../../elements/Loading/index.js' import { formatDocTitle } from '../../utilities/formatDocTitle.js' import { getFormState } from '../../utilities/getFormState.js' import { hasSavePermission as getHasSavePermission } from '../../utilities/hasSavePermission.js' @@ -39,29 +38,12 @@ export const DocumentInfoProvider: React.FC< globalSlug, hasPublishPermission: hasPublishPermissionFromProps, hasSavePermission: hasSavePermissionFromProps, + initialData: initialDataFromProps, + initialState: initialStateFromProps, onLoadError, onSave: onSaveFromProps, } = props - const [isLoading, setIsLoading] = useState(false) - const [isError, setIsError] = useState(false) - const [documentTitle, setDocumentTitle] = useState('') - const [data, setData] = useState() - const [initialState, setInitialState] = useState() - const [publishedDoc, setPublishedDoc] = useState(null) - const [versions, setVersions] = useState>>(null) - const [docPermissions, setDocPermissions] = useState(null) - const [hasSavePermission, setHasSavePermission] = useState(null) - const [hasPublishPermission, setHasPublishPermission] = useState(null) - const hasInitializedDocPermissions = useRef(false) - const [unpublishedVersions, setUnpublishedVersions] = - useState>>(null) - - const { getPreference, setPreference } = usePreferences() - const { i18n } = useTranslation() - const { permissions } = useAuth() - const { code: locale } = useLocale() - const { admin: { dateFormat }, collections, @@ -73,6 +55,43 @@ export const DocumentInfoProvider: React.FC< const collectionConfig = collections.find((c) => c.slug === collectionSlug) const globalConfig = globals.find((g) => g.slug === globalSlug) const docConfig = collectionConfig || globalConfig + + const { i18n } = useTranslation() + + const [documentTitle, setDocumentTitle] = useState(() => { + if (!initialDataFromProps) return '' + + return formatDocTitle({ + collectionConfig, + data: { ...initialDataFromProps, id }, + dateFormat, + fallback: id?.toString(), + globalConfig, + i18n, + }) + }) + + const [isLoading, setIsLoading] = useState(false) + const [isError, setIsError] = useState(false) + const [data, setData] = useState(initialDataFromProps) + const [initialState, setInitialState] = useState(initialStateFromProps) + const [publishedDoc, setPublishedDoc] = useState(null) + const [versions, setVersions] = useState>>(null) + const [docPermissions, setDocPermissions] = useState(docPermissionsFromProps) + const [hasSavePermission, setHasSavePermission] = useState(hasSavePermissionFromProps) + const [hasPublishPermission, setHasPublishPermission] = useState( + hasPublishPermissionFromProps, + ) + const isInitializing = initialState === undefined || data === undefined + const hasInitializedDocPermissions = useRef(false) + const [unpublishedVersions, setUnpublishedVersions] = + useState>>(null) + + const { getPreference, setPreference } = usePreferences() + const { permissions } = useAuth() + const { code: locale } = useLocale() + const prevLocale = useRef(locale) + const versionsConfig = docConfig?.versions const baseURL = `${serverURL}${api}` @@ -296,7 +315,7 @@ export const DocumentInfoProvider: React.FC< ) } }, - [serverURL, api, permissions, i18n.language, locale, collectionSlug, globalSlug, isEditing], + [serverURL, api, permissions, i18n.language, locale, collectionSlug, globalSlug], ) const getDocPreferences = useCallback(() => { @@ -372,47 +391,67 @@ export const DocumentInfoProvider: React.FC< useEffect(() => { const abortController = new AbortController() + const localeChanged = locale !== prevLocale.current - const getInitialState = async () => { - setIsError(false) - setIsLoading(true) + if ( + initialStateFromProps === undefined || + initialDataFromProps === undefined || + localeChanged + ) { + if (localeChanged) prevLocale.current = locale - try { - const result = await getFormState({ - apiRoute: api, - body: { - id, - collectionSlug, - globalSlug, - locale, - operation, - schemaPath: collectionSlug || globalSlug, - }, - onError: onLoadError, - serverURL, - signal: abortController.signal, - }) + const getInitialState = async () => { + setIsError(false) + setIsLoading(true) - setData(reduceFieldsToValues(result, true)) - setInitialState(result) - } catch (err) { - if (!abortController.signal.aborted) { - if (typeof onLoadError === 'function') { - void onLoadError() + try { + const result = await getFormState({ + apiRoute: api, + body: { + id, + collectionSlug, + globalSlug, + locale, + operation, + schemaPath: collectionSlug || globalSlug, + }, + onError: onLoadError, + serverURL, + signal: abortController.signal, + }) + + setData(reduceFieldsToValues(result, true)) + setInitialState(result) + } catch (err) { + if (!abortController.signal.aborted) { + if (typeof onLoadError === 'function') { + void onLoadError() + } + setIsError(true) + setIsLoading(false) } - setIsError(true) - setIsLoading(false) } + setIsLoading(false) } - setIsLoading(false) - } - void getInitialState() + void getInitialState() + } return () => { abortController.abort() } - }, [api, operation, collectionSlug, serverURL, id, globalSlug, locale, onLoadError]) + }, [ + api, + operation, + collectionSlug, + serverURL, + id, + globalSlug, + locale, + onLoadError, + initialDataFromProps, + initialStateFromProps, + ]) useEffect(() => { void getVersions() @@ -445,10 +484,6 @@ export const DocumentInfoProvider: React.FC< hasPublishPermission === null ) { await getDocPermissions(data) - } else { - setDocPermissions(docPermissions) - setHasSavePermission(hasSavePermission) - setHasPublishPermission(hasPublishPermission) } } @@ -469,10 +504,6 @@ export const DocumentInfoProvider: React.FC< if (isError) notFound() - if (!initialState || isLoading) { - return - } - const value: DocumentInfoContext = { ...props, docConfig, @@ -484,6 +515,8 @@ export const DocumentInfoProvider: React.FC< hasSavePermission, initialData: data, initialState, + isInitializing, + isLoading, onSave, publishedDoc, setDocFieldPreferences, diff --git a/packages/ui/src/providers/DocumentInfo/types.ts b/packages/ui/src/providers/DocumentInfo/types.ts index 755c3198e..4843a04a1 100644 --- a/packages/ui/src/providers/DocumentInfo/types.ts +++ b/packages/ui/src/providers/DocumentInfo/types.ts @@ -29,6 +29,8 @@ export type DocumentInfoProps = { hasPublishPermission?: boolean hasSavePermission?: boolean id: null | number | string + initialData?: Data + initialState?: FormState isEditing?: boolean onLoadError?: (data?: any) => Promise | void onSave?: (data: Data) => Promise | void @@ -41,6 +43,8 @@ export type DocumentInfoContext = DocumentInfoProps & { getVersions: () => Promise initialData: Data initialState?: FormState + isInitializing: boolean + isLoading: boolean preferencesKey?: string publishedDoc?: TypeWithID & TypeWithTimestamps & { _status?: string } setDocFieldPreferences: ( diff --git a/packages/ui/src/providers/Root/index.tsx b/packages/ui/src/providers/Root/index.tsx index 16cdcb8fd..664d9f052 100644 --- a/packages/ui/src/providers/Root/index.tsx +++ b/packages/ui/src/providers/Root/index.tsx @@ -1,6 +1,6 @@ 'use client' import type { I18nClient, Language } from '@payloadcms/translations' -import type { ClientConfig } from 'payload/types' +import type { ClientConfig, LanguageOptions } from 'payload/types' import * as facelessUIImport from '@faceless-ui/modal' import * as facelessUIImport3 from '@faceless-ui/scroll-info' @@ -10,7 +10,6 @@ import { Slide, ToastContainer } from 'react-toastify' import type { ComponentMap } from '../ComponentMap/buildComponentMap/types.js' import type { Theme } from '../Theme/index.js' -import type { LanguageOptions } from '../Translation/index.js' import { LoadingOverlayProvider } from '../../elements/LoadingOverlay/index.js' import { NavProvider } from '../../elements/Nav/context.js' diff --git a/packages/ui/src/providers/Translation/index.tsx b/packages/ui/src/providers/Translation/index.tsx index 3c6e9bf3a..fb1a6d11b 100644 --- a/packages/ui/src/providers/Translation/index.tsx +++ b/packages/ui/src/providers/Translation/index.tsx @@ -7,7 +7,7 @@ import type { TFunction, } from '@payloadcms/translations' import type { Locale } from 'date-fns' -import type { ClientConfig } from 'payload/types' +import type { ClientConfig, LanguageOptions } from 'payload/types' import { t } from '@payloadcms/translations' import { importDateFNSLocale } from '@payloadcms/translations' @@ -16,11 +16,6 @@ import React, { createContext, useContext, useEffect, useState } from 'react' import { useRouteCache } from '../RouteCache/index.js' -export type LanguageOptions = { - label: string - value: string -}[] - type ContextType< TAdditionalTranslations = {}, TAdditionalClientTranslationKeys extends string = never, diff --git a/packages/ui/src/utilities/getFormState.ts b/packages/ui/src/utilities/getFormState.ts index 34e679d3b..288da62f8 100644 --- a/packages/ui/src/utilities/getFormState.ts +++ b/packages/ui/src/utilities/getFormState.ts @@ -8,14 +8,16 @@ export const getFormState = async (args: { onError?: (data?: any) => Promise | void serverURL: SanitizedConfig['serverURL'] signal?: AbortSignal + token?: string }): Promise => { - const { apiRoute, body, onError, serverURL, signal } = args + const { apiRoute, body, onError, serverURL, signal, token } = args const res = await fetch(`${serverURL}${apiRoute}/form-state`, { body: JSON.stringify(body), credentials: 'include', headers: { 'Content-Type': 'application/json', + ...(token ? { Authorization: `JWT ${token}` } : {}), }, method: 'POST', signal, diff --git a/packages/ui/src/utilities/reduceFieldsToValues.ts b/packages/ui/src/utilities/reduceFieldsToValues.ts index 0d88d9b2a..113deb422 100644 --- a/packages/ui/src/utilities/reduceFieldsToValues.ts +++ b/packages/ui/src/utilities/reduceFieldsToValues.ts @@ -16,6 +16,8 @@ export const reduceFieldsToValues = ( ): Data => { let data = {} + if (!fields) return data + Object.keys(fields).forEach((key) => { if (ignoreDisableFormData === true || !fields[key]?.disableFormData) { data[key] = fields[key]?.value diff --git a/test/access-control/e2e.spec.ts b/test/access-control/e2e.spec.ts index 137d2e364..d31ac4cef 100644 --- a/test/access-control/e2e.spec.ts +++ b/test/access-control/e2e.spec.ts @@ -170,12 +170,12 @@ describe('access control', () => { test('should not have list url', async () => { await page.goto(restrictedUrl.list) - await expect(page.locator('.unauthorized')).toBeVisible() + await expect(page.locator('.not-found')).toBeVisible() }) test('should not have create url', async () => { await page.goto(restrictedUrl.create) - await expect(page.locator('.unauthorized')).toBeVisible() + await expect(page.locator('.not-found')).toBeVisible() }) test('should not have access to existing doc', async () => { @@ -321,13 +321,12 @@ describe('access control', () => { name: 'unrestricted-123', }, }) - await page.goto(unrestrictedURL.edit(unrestrictedDoc.id.toString())) - + const field = page.locator('#field-userRestrictedDocs') + await expect(field.locator('input')).toBeEnabled() const addDocButton = page.locator( '#userRestrictedDocs-add-new button.relationship-add-new__add-button.doc-drawer__toggler', ) - await addDocButton.click() const documentDrawer = page.locator('[id^=doc-drawer_user-restricted-collection_1_]') await expect(documentDrawer).toBeVisible() diff --git a/test/admin/components/FieldDescription/index.tsx b/test/admin/components/FieldDescription/index.tsx index fad5b340d..74bca4b67 100644 --- a/test/admin/components/FieldDescription/index.tsx +++ b/test/admin/components/FieldDescription/index.tsx @@ -7,7 +7,8 @@ import React from 'react' export const FieldDescriptionComponent: DescriptionComponent = () => { const { path } = useFieldProps() - const { value } = useFormFields(([fields]) => fields[path]) + const field = useFormFields(([fields]) => (fields && fields?.[path]) || null) + const { value } = field || {} return (
diff --git a/test/admin/components/views/CustomView/index.client.tsx b/test/admin/components/views/CustomView/index.client.tsx index 485b55482..8bf7b4e52 100644 --- a/test/admin/components/views/CustomView/index.client.tsx +++ b/test/admin/components/views/CustomView/index.client.tsx @@ -23,16 +23,15 @@ export const ClientForm: React.FC = () => { > - Submit ) } const CustomPassword: React.FC = () => { - const confirmPassword = useFormFields(([fields]) => { - return fields['confirm-password'] - }) + const confirmPassword = useFormFields( + ([fields]) => (fields && fields?.['confirm-password']) || null, + ) const confirmValue = confirmPassword.value diff --git a/test/admin/e2e/2/e2e.spec.ts b/test/admin/e2e/2/e2e.spec.ts index 0d4cfc5da..509a51228 100644 --- a/test/admin/e2e/2/e2e.spec.ts +++ b/test/admin/e2e/2/e2e.spec.ts @@ -114,7 +114,7 @@ describe('admin2', () => { // prefill search with "a" from the query param await page.goto(`${postsUrl.list}?search=dennis`) - await page.waitForURL(`${postsUrl.list}?search=dennis`) + await page.waitForURL(new RegExp(`${postsUrl.list}\\?search=dennis`)) // input should be filled out, list should filter await expect(page.locator('.search-filter__input')).toHaveValue('dennis') @@ -624,7 +624,7 @@ describe('admin2', () => { test('should delete many', async () => { await page.goto(postsUrl.list) - await page.waitForURL(postsUrl.list) + await page.waitForURL(new RegExp(postsUrl.list)) // delete should not appear without selection await expect(page.locator('#confirm-delete')).toHaveCount(0) // select one row diff --git a/test/auth/e2e.spec.ts b/test/auth/e2e.spec.ts index 4f51bf4ba..861db5e07 100644 --- a/test/auth/e2e.spec.ts +++ b/test/auth/e2e.spec.ts @@ -119,22 +119,18 @@ describe('auth', () => { await page.locator('#change-password').click() await page.locator('#field-password').fill('password') await page.locator('#field-confirm-password').fill('password') - await saveDocAndAssert(page) - await expect(page.locator('#field-email')).toHaveValue(emailBeforeSave) }) test('should have up-to-date user in `useAuth` hook', async () => { await page.goto(url.account) - + await page.waitForURL(url.account) await expect(page.locator('#users-api-result')).toHaveText('Hello, world!') await expect(page.locator('#use-auth-result')).toHaveText('Hello, world!') - const field = page.locator('#field-custom') await field.fill('Goodbye, world!') await saveDocAndAssert(page) - await expect(page.locator('#users-api-result')).toHaveText('Goodbye, world!') await expect(page.locator('#use-auth-result')).toHaveText('Goodbye, world!') }) diff --git a/test/fields-relationship/e2e.spec.ts b/test/fields-relationship/e2e.spec.ts index 7df9e37ef..ee2060445 100644 --- a/test/fields-relationship/e2e.spec.ts +++ b/test/fields-relationship/e2e.spec.ts @@ -18,6 +18,7 @@ import type { import { ensureAutoLoginAndCompilationIsDone, initPageConsoleErrorCatch, + openCreateDocDrawer, openDocControls, openDocDrawer, saveDocAndAssert, @@ -141,19 +142,13 @@ describe('fields - relationship', () => { test('should create relationship', async () => { await page.goto(url.create) - const field = page.locator('#field-relationship') - + await expect(field.locator('input')).toBeEnabled() await field.click({ delay: 100 }) - const options = page.locator('.rs__option') - await expect(options).toHaveCount(2) // two docs - - // Select a relationship await options.nth(0).click() await expect(field).toContainText(relationOneDoc.id) - await saveDocAndAssert(page) }) @@ -186,30 +181,20 @@ describe('fields - relationship', () => { test('should create hasMany relationship', async () => { await page.goto(url.create) - const field = page.locator('#field-relationshipHasMany') + await expect(field.locator('input')).toBeEnabled() await field.click({ delay: 100 }) - const options = page.locator('.rs__option') - await expect(options).toHaveCount(2) // Two relationship options - const values = page.locator('#field-relationshipHasMany .relationship--multi-value-label__text') - - // Add one relationship await options.locator(`text=${relationOneDoc.id}`).click() await expect(values).toHaveText([relationOneDoc.id]) await expect(values).not.toHaveText([anotherRelationOneDoc.id]) - - // Add second relationship await field.click({ delay: 100 }) await options.locator(`text=${anotherRelationOneDoc.id}`).click() await expect(values).toHaveText([relationOneDoc.id, anotherRelationOneDoc.id]) - - // No options left await field.locator('.rs__input').click({ delay: 100 }) await expect(page.locator('.rs__menu')).toHaveText('No options') - await saveDocAndAssert(page) await wait(200) await expect(values).toHaveText([relationOneDoc.id, anotherRelationOneDoc.id]) @@ -257,49 +242,30 @@ describe('fields - relationship', () => { async function runFilterOptionsTest(fieldName: string) { await page.reload() await page.goto(url.edit(docWithExistingRelations.id)) - - // fill the first relation field const field = page.locator('#field-relationship') - + await expect(field.locator('input')).toBeEnabled() await field.click({ delay: 100 }) const options = page.locator('.rs__option') - await options.nth(0).click() await expect(field).toContainText(relationOneDoc.id) - - // then verify that the filtered field's options match let filteredField = page.locator(`#field-${fieldName} .react-select`) await filteredField.click({ delay: 100 }) let filteredOptions = filteredField.locator('.rs__option') await expect(filteredOptions).toHaveCount(1) // one doc await filteredOptions.nth(0).click() await expect(filteredField).toContainText(relationOneDoc.id) - - // change the first relation field await field.click({ delay: 100 }) await options.nth(1).click() await expect(field).toContainText(anotherRelationOneDoc.id) - - // Need to wait form state to come back - // before clicking save - await wait(2000) - - // Now, save the document. This should fail, as the filitered field doesn't match the selected relationship value + await wait(2000) // Need to wait form state to come back before clicking save await page.locator('#action-save').click() await expect(page.locator('.Toastify')).toContainText(`is invalid: ${fieldName}`) - - // then verify that the filtered field's options match filteredField = page.locator(`#field-${fieldName} .react-select`) - await filteredField.click({ delay: 100 }) - filteredOptions = filteredField.locator('.rs__option') - await expect(filteredOptions).toHaveCount(2) // two options because the currently selected option is still there await filteredOptions.nth(1).click() await expect(filteredField).toContainText(anotherRelationOneDoc.id) - - // Now, saving the document should succeed await saveDocAndAssert(page) } @@ -433,30 +399,17 @@ describe('fields - relationship', () => { test('should open document drawer and append newly created docs onto the parent field', async () => { await page.goto(url.edit(docWithExistingRelations.id)) - - const field = page.locator('#field-relationshipHasMany') - - // open the document drawer - const addNewButton = field.locator( - 'button.relationship-add-new__add-button.doc-drawer__toggler', - ) - await addNewButton.click() + await openCreateDocDrawer(page, '#field-relationshipHasMany') const documentDrawer = page.locator('[id^=doc-drawer_relation-one_1_]') await expect(documentDrawer).toBeVisible() - - // fill in the field and save the document, keep the drawer open for further testing const drawerField = documentDrawer.locator('#field-name') await drawerField.fill('Newly created document') const saveButton = documentDrawer.locator('#action-save') await saveButton.click() await expect(page.locator('.Toastify')).toContainText('successfully') - - // count the number of values in the field to ensure only one was added await expect( page.locator('#field-relationshipHasMany .value-container .rs__multi-value'), ).toHaveCount(1) - - // save the same document again to ensure the relationship field doesn't receive duplicative values await drawerField.fill('Updated document') await saveButton.click() await expect(page.locator('.Toastify')).toContainText('Updated successfully') @@ -469,12 +422,9 @@ describe('fields - relationship', () => { describe('existing relationships', () => { test('should highlight existing relationship', async () => { await page.goto(url.edit(docWithExistingRelations.id)) - const field = page.locator('#field-relationship') - - // Check dropdown options + await expect(field.locator('input')).toBeEnabled() await field.click({ delay: 100 }) - await expect(page.locator('.rs__option--is-selected')).toHaveCount(1) await expect(page.locator('.rs__option--is-selected')).toHaveText(relationOneDoc.id) }) diff --git a/test/fields/collections/Relationship/e2e.spec.ts b/test/fields/collections/Relationship/e2e.spec.ts index 93a3e2eeb..be3a19e91 100644 --- a/test/fields/collections/Relationship/e2e.spec.ts +++ b/test/fields/collections/Relationship/e2e.spec.ts @@ -12,7 +12,7 @@ import { ensureAutoLoginAndCompilationIsDone, exactText, initPageConsoleErrorCatch, - openDocDrawer, + openCreateDocDrawer, saveDocAndAssert, saveDocHotkeyAndAssert, } from '../../../helpers.js' @@ -77,26 +77,20 @@ describe('relationship', () => { test('should create inline relationship within field with many relations', async () => { await page.goto(url.create) - - await openDocDrawer(page, '#relationship-add-new .relationship-add-new__add-button') - + await openCreateDocDrawer(page, '#field-relationship') await page .locator('#field-relationship .relationship-add-new__relation-button--text-fields') .click() - const textField = page.locator('.drawer__content #field-text') + await expect(textField).toBeEnabled() const textValue = 'hello' - await textField.fill(textValue) - await page.locator('[id^=doc-drawer_text-fields_1_] #action-save').click() await expect(page.locator('.Toastify')).toContainText('successfully') await page.locator('[id^=close-drawer__doc-drawer_text-fields_1_]').click() - await expect( page.locator('#field-relationship .relationship--single-value__text'), ).toContainText(textValue) - await page.locator('#action-save').click() await expect(page.locator('.Toastify')).toContainText('successfully') }) @@ -105,7 +99,7 @@ describe('relationship', () => { await page.goto(url.create) await page.waitForURL(`**/${url.create}`) // Open first modal - await openDocDrawer(page, '#relationToSelf-add-new .relationship-add-new__add-button') + await openCreateDocDrawer(page, '#field-relationToSelf') // Fill first modal's required relationship field await page.locator('[id^=doc-drawer_relationship-fields_1_] #field-relationship').click() @@ -115,11 +109,10 @@ describe('relationship', () => { ) .click() - // Open second modal - await openDocDrawer( - page, + const secondModalButton = page.locator( '[id^=doc-drawer_relationship-fields_1_] #relationToSelf-add-new button', ) + await secondModalButton.click() // Fill second modal's required relationship field await page.locator('[id^=doc-drawer_relationship-fields_2_] #field-relationship').click() @@ -249,7 +242,7 @@ describe('relationship', () => { await page.goto(url.create) await page.waitForURL(`**/${url.create}`) // First fill out the relationship field, as it's required - await openDocDrawer(page, '#relationship-add-new .relationship-add-new__add-button') + await openCreateDocDrawer(page, '#field-relationship') await page .locator('#field-relationship .relationship-add-new__relation-button--text-fields') .click() @@ -264,7 +257,7 @@ describe('relationship', () => { // Create a new doc for the `relationshipHasMany` field await expect.poll(() => page.url(), { timeout: POLL_TOPASS_TIMEOUT }).not.toContain('create') - await openDocDrawer(page, '#field-relationshipHasMany .relationship-add-new__add-button') + await openCreateDocDrawer(page, '#field-relationshipHasMany') const value = 'Hello, world!' await page.locator('.drawer__content #field-text').fill(value) @@ -313,7 +306,7 @@ describe('relationship', () => { test('should save using hotkey in edit document drawer', async () => { await page.goto(url.create) // First fill out the relationship field, as it's required - await openDocDrawer(page, '#relationship-add-new .relationship-add-new__add-button') + await openCreateDocDrawer(page, '#field-relationship') await page.locator('#field-relationship .value-container').click() await wait(500) // Select "Seeded text document" relationship @@ -354,7 +347,7 @@ describe('relationship', () => { test.skip('should bypass min rows validation when no rows present and field is not required', async () => { await page.goto(url.create) // First fill out the relationship field, as it's required - await openDocDrawer(page, '#relationship-add-new .relationship-add-new__add-button') + await openCreateDocDrawer(page, '#field-relationship') await page.locator('#field-relationship .value-container').click() await page.getByText('Seeded text document', { exact: true }).click() @@ -366,7 +359,7 @@ describe('relationship', () => { await page.goto(url.create) await page.waitForURL(url.create) // First fill out the relationship field, as it's required - await openDocDrawer(page, '#relationship-add-new .relationship-add-new__add-button') + await openCreateDocDrawer(page, '#field-relationship') await page.locator('#field-relationship .value-container').click() await page.getByText('Seeded text document', { exact: true }).click() @@ -425,7 +418,7 @@ describe('relationship', () => { await createRelationshipFieldDoc({ value: textDoc.id, relationTo: 'text-fields' }) await page.goto(url.list) - await page.waitForURL(url.list) + await page.waitForURL(new RegExp(url.list)) await wait(400) await page.locator('.list-controls__toggle-columns').click() @@ -439,6 +432,7 @@ describe('relationship', () => { await wait(400) const conditionField = page.locator('.condition__field') + await expect(conditionField.locator('input')).toBeEnabled() await conditionField.click() await wait(400) @@ -447,6 +441,7 @@ describe('relationship', () => { await wait(400) const operatorField = page.locator('.condition__operator') + await expect(operatorField.locator('input')).toBeEnabled() await operatorField.click() await wait(400) @@ -455,6 +450,7 @@ describe('relationship', () => { await wait(400) const valueField = page.locator('.condition__value') + await expect(valueField.locator('input')).toBeEnabled() await valueField.click() await wait(400) diff --git a/test/fields/collections/RichText/e2e.spec.ts b/test/fields/collections/RichText/e2e.spec.ts index 4f93ceb6d..689b9908d 100644 --- a/test/fields/collections/RichText/e2e.spec.ts +++ b/test/fields/collections/RichText/e2e.spec.ts @@ -183,8 +183,6 @@ describe('Rich Text', () => { test('should not create new url link when read only', async () => { await navigateToRichTextFields() - - // Attempt to open link popup const modalTrigger = page.locator('.rich-text--read-only .rich-text__toolbar button .link') await expect(modalTrigger).toBeDisabled() }) @@ -421,19 +419,14 @@ describe('Rich Text', () => { }) test('should not take value from previous block', async () => { await navigateToRichTextFields() - - // check first block value - const textField = page.locator('#field-blocks__0__text') - await expect(textField).toHaveValue('Regular text') - - // remove the first block + await page.locator('#field-blocks').scrollIntoViewIfNeeded() + await expect(page.locator('#field-blocks__0__text')).toBeVisible() + await expect(page.locator('#field-blocks__0__text')).toHaveValue('Regular text') const editBlock = page.locator('#blocks-row-0 .popup-button') await editBlock.click() const removeButton = page.locator('#blocks-row-0').getByRole('button', { name: 'Remove' }) await expect(removeButton).toBeVisible() await removeButton.click() - - // check new first block value const richTextField = page.locator('#field-blocks__0__text') const richTextValue = await richTextField.innerText() expect(richTextValue).toContain('Rich text') diff --git a/test/fields/e2e.spec.ts b/test/fields/e2e.spec.ts index 90d8df697..6223fab90 100644 --- a/test/fields/e2e.spec.ts +++ b/test/fields/e2e.spec.ts @@ -146,12 +146,13 @@ describe('fields', () => { test('should create', async () => { const input = '{"foo": "bar"}' - await page.goto(url.create) - const json = page.locator('.json-field .inputarea') - await json.fill(input) - - await saveDocAndAssert(page, '.form-submit button') + await page.waitForURL(url.create) + await expect(() => expect(page.locator('.json-field .code-editor')).toBeVisible()).toPass({ + timeout: POLL_TOPASS_TIMEOUT, + }) + await page.locator('.json-field .inputarea').fill(input) + await saveDocAndAssert(page) await expect(page.locator('.json-field')).toContainText('"foo": "bar"') }) }) @@ -256,13 +257,15 @@ describe('fields', () => { test('should have disabled admin sorting', async () => { await page.goto(url.create) - const field = page.locator('#field-disableSort .array-actions__action-chevron') + const field = page.locator('#field-disableSort > div > div > .array-actions__action-chevron') expect(await field.count()).toEqual(0) }) test('the drag handle should be hidden', async () => { await page.goto(url.create) - const field = page.locator('#field-disableSort .collapsible__drag') + const field = page.locator( + '#field-disableSort > .blocks-field__rows > div > div > .collapsible__drag', + ) expect(await field.count()).toEqual(0) }) }) @@ -275,13 +278,15 @@ describe('fields', () => { test('should have disabled admin sorting', async () => { await page.goto(url.create) - const field = page.locator('#field-disableSort .array-actions__action-chevron') + const field = page.locator('#field-disableSort > div > div > .array-actions__action-chevron') expect(await field.count()).toEqual(0) }) test('the drag handle should be hidden', async () => { await page.goto(url.create) - const field = page.locator('#field-disableSort .collapsible__drag') + const field = page.locator( + '#field-disableSort > .blocks-field__rows > div > div > .collapsible__drag', + ) expect(await field.count()).toEqual(0) }) }) diff --git a/test/helpers.ts b/test/helpers.ts index fdbb8a3b3..feb24b2f0 100644 --- a/test/helpers.ts +++ b/test/helpers.ts @@ -75,6 +75,10 @@ export async function ensureAutoLoginAndCompilationIsDone({ await page.goto(adminURL) await page.waitForURL(adminURL) + await expect(() => expect(page.locator('.template-default')).toBeVisible()).toPass({ + timeout: POLL_TOPASS_TIMEOUT, + }) + await expect(() => expect(page.url()).not.toContain(`${adminRoute}${loginRoute}`)).toPass({ timeout: POLL_TOPASS_TIMEOUT, }) @@ -85,7 +89,6 @@ export async function ensureAutoLoginAndCompilationIsDone({ timeout: POLL_TOPASS_TIMEOUT, }) - // Check if hero is there await expect(page.locator('.dashboard__label').first()).toBeVisible() } @@ -200,6 +203,16 @@ export async function openDocDrawer(page: Page, selector: string): Promise await wait(500) // wait for drawer form state to initialize } +export async function openCreateDocDrawer(page: Page, fieldSelector: string): Promise { + await wait(500) // wait for parent form state to initialize + const relationshipField = page.locator(fieldSelector) + await expect(relationshipField.locator('input')).toBeEnabled() + const addNewButton = relationshipField.locator('.relationship-add-new__add-button') + await expect(addNewButton).toBeVisible() + await addNewButton.click() + await wait(500) // wait for drawer form state to initialize +} + export async function closeNav(page: Page): Promise { if (!(await page.locator('.template-default.template-default--nav-open').isVisible())) return await page.locator('.nav-toggler >> visible=true').click() diff --git a/test/localization/e2e.spec.ts b/test/localization/e2e.spec.ts index 31bf66fdd..e4cc3f69c 100644 --- a/test/localization/e2e.spec.ts +++ b/test/localization/e2e.spec.ts @@ -123,27 +123,15 @@ describe('Localization', () => { test('create arabic post, add english', async () => { await page.goto(url.create) - const newLocale = 'ar' - - // Change to Arabic await changeLocale(page, newLocale) - await fillValues({ description, title: arabicTitle }) await saveDocAndAssert(page) - - // Change back to English await changeLocale(page, defaultLocale) - - // Localized field should not be populated await expect(page.locator('#field-title')).toBeEmpty() await expect(page.locator('#field-description')).toHaveValue(description) - - // Add English - await fillValues({ description, title }) await saveDocAndAssert(page) - await expect(page.locator('#field-title')).toHaveValue(title) await expect(page.locator('#field-description')).toHaveValue(description) }) @@ -175,56 +163,45 @@ describe('Localization', () => { await page.goto(url.edit(id)) await page.waitForURL(`**${url.edit(id)}`) await openDocControls(page) - - // duplicate document await page.locator('#action-duplicate').click() await expect(page.locator('.Toastify')).toContainText('successfully') await expect.poll(() => page.url(), { timeout: POLL_TOPASS_TIMEOUT }).not.toContain(id) - - // check fields await expect(page.locator('#field-title')).toHaveValue(englishTitle) await changeLocale(page, spanishLocale) - + await expect(page.locator('#field-title')).toBeEnabled() await expect(page.locator('#field-title')).toHaveValue(spanishTitle) - + await expect(page.locator('#field-localizedCheckbox')).toBeEnabled() + await page.reload() // TODO: remove this line, the checkbox _is not_ checked, but Playwright is unable to detect it without a reload for some reason await expect(page.locator('#field-localizedCheckbox')).not.toBeChecked() }) test('should duplicate localized checkbox correctly', async () => { await page.goto(url.create) await page.waitForURL(url.create) - await changeLocale(page, defaultLocale) await fillValues({ description, title: englishTitle }) + await expect(page.locator('#field-localizedCheckbox')).toBeEnabled() await page.locator('#field-localizedCheckbox').click() - await page.locator('#action-save').click() - // wait for navigation to update route await expect.poll(() => page.url(), { timeout: POLL_TOPASS_TIMEOUT }).not.toContain('create') const collectionUrl = page.url() - // ensure spanish is not checked await changeLocale(page, spanishLocale) - + await expect(page.locator('#field-localizedCheckbox')).toBeEnabled() + await page.reload() // TODO: remove this line, the checkbox _is not_ checked, but Playwright is unable to detect it without a reload for some reason await expect(page.locator('#field-localizedCheckbox')).not.toBeChecked() - - // duplicate doc await changeLocale(page, defaultLocale) await openDocControls(page) await page.locator('#action-duplicate').click() - - // wait for navigation to update route await expect .poll(() => page.url(), { timeout: POLL_TOPASS_TIMEOUT }) .not.toContain(collectionUrl) - - // finally change locale to spanish await changeLocale(page, spanishLocale) - + await expect(page.locator('#field-localizedCheckbox')).toBeEnabled() + await page.reload() // TODO: remove this line, the checkbox _is not_ checked, but Playwright is unable to detect it without a reload for some reason await expect(page.locator('#field-localizedCheckbox')).not.toBeChecked() }) test('should duplicate even if missing some localized data', async () => { - // create a localized required doc await page.goto(urlWithRequiredLocalizedFields.create) await changeLocale(page, defaultLocale) await page.locator('#field-title').fill(englishTitle) @@ -233,21 +210,12 @@ describe('Localization', () => { await page.fill('#field-layout__0__text', 'test') await expect(page.locator('#field-layout__0__text')).toHaveValue('test') await saveDocAndAssert(page) - const originalID = await page.locator('.id-label').innerText() - - // duplicate await openDocControls(page) await page.locator('#action-duplicate').click() await expect(page.locator('.id-label')).not.toContainText(originalID) - - // verify that the locale did copy await expect(page.locator('#field-title')).toHaveValue(englishTitle) - - // await the success toast await expect(page.locator('.Toastify')).toContainText('successfully duplicated') - - // expect that the document has a new id await expect(page.locator('.id-label')).not.toContainText(originalID) }) }) diff --git a/test/plugin-form-builder/e2e.spec.ts b/test/plugin-form-builder/e2e.spec.ts index e96fdfec0..1af13e00c 100644 --- a/test/plugin-form-builder/e2e.spec.ts +++ b/test/plugin-form-builder/e2e.spec.ts @@ -107,9 +107,6 @@ test.describe('Form Builder', () => { }) test('can create form submission', async () => { - await page.goto(submissionsUrl.list) - await page.waitForURL(submissionsUrl.list) - const { docs } = await payload.find({ collection: 'forms', }) diff --git a/test/uploads/e2e.spec.ts b/test/uploads/e2e.spec.ts index 5be19bd98..debec00f8 100644 --- a/test/uploads/e2e.spec.ts +++ b/test/uploads/e2e.spec.ts @@ -254,7 +254,7 @@ describe('uploads', () => { ) }) - test('Should render adminThumbnail when using a function', async () => { + test('should render adminThumbnail when using a function', async () => { await page.reload() // Flakey test, it likely has to do with the test that comes before it. Trace viewer is not helpful when it fails. await page.goto(adminThumbnailFunctionURL.list) await page.waitForURL(adminThumbnailFunctionURL.list) @@ -267,7 +267,7 @@ describe('uploads', () => { ) }) - test('Should render adminThumbnail when using a specific size', async () => { + test('should render adminThumbnail when using a specific size', async () => { await page.goto(adminThumbnailSizeURL.list) await page.waitForURL(adminThumbnailSizeURL.list) @@ -280,7 +280,7 @@ describe('uploads', () => { await expect(audioUploadImage).toBeVisible() }) - test('Should detect correct mimeType', async () => { + test('should detect correct mimeType', async () => { await page.goto(mediaURL.create) await page.waitForURL(mediaURL.create) await page.setInputFiles('input[type="file"]', path.resolve(dirname, './image.png')) diff --git a/test/versions/e2e.spec.ts b/test/versions/e2e.spec.ts index 763fc8a8f..af0789b04 100644 --- a/test/versions/e2e.spec.ts +++ b/test/versions/e2e.spec.ts @@ -26,6 +26,7 @@ import type { Page } from '@playwright/test' import { expect, test } from '@playwright/test' import path from 'path' +import { wait } from 'payload/utilities' import { fileURLToPath } from 'url' import type { PayloadTestSDK } from '../helpers/sdk/index.js' @@ -162,31 +163,19 @@ describe('versions', () => { const title = 'autosave title' const description = 'autosave description' await page.goto(autosaveURL.create) - - // fill the fields + // gets redirected from /create to /slug/id due to autosave + await page.waitForURL(new RegExp(`${autosaveURL.edit('')}`)) + await wait(500) + await expect(page.locator('#field-title')).toBeEnabled() await page.locator('#field-title').fill(title) + await expect(page.locator('#field-description')).toBeEnabled() await page.locator('#field-description').fill(description) - - // wait for autosave await waitForAutoSaveToRunAndComplete(page) - - // go to list await page.goto(autosaveURL.list) - - // expect the status to be draft await expect(findTableCell(page, '_status', title)).toContainText('Draft') - - // select the row - // await page.locator('.row-1 .select-row__checkbox').click() await selectTableRow(page, title) - - // click the publish many await page.locator('.publish-many__toggle').click() - - // confirm the dialog await page.locator('#confirm-publish').click() - - // expect the status to be published await expect(findTableCell(page, '_status', title)).toContainText('Published') }) @@ -278,21 +267,19 @@ describe('versions', () => { test('collection — tab displays proper number of versions', async () => { await page.goto(url.list) - const linkToDoc = page .locator('tbody tr .cell-title a', { hasText: exactText('Title With Many Versions 11'), }) .first() - expect(linkToDoc).toBeTruthy() await linkToDoc.click() - const versionsTab = page.locator('.doc-tab', { hasText: 'Versions', }) await versionsTab.waitFor({ state: 'visible' }) - + const versionsPill = versionsTab.locator('.doc-tab__count--has-count') + await versionsPill.waitFor({ state: 'visible' }) const versionCount = await versionsTab.locator('.doc-tab__count').first().textContent() expect(versionCount).toBe('11') }) @@ -322,32 +309,21 @@ describe('versions', () => { test('should restore version with correct data', async () => { await page.goto(url.create) await page.waitForURL(url.create) - - // publish a doc await page.locator('#field-title').fill('v1') await page.locator('#field-description').fill('hello') await saveDocAndAssert(page) - - // save a draft await page.locator('#field-title').fill('v2') await saveDocAndAssert(page, '#action-save-draft') - - // go to versions list view const savedDocURL = page.url() await page.goto(`${savedDocURL}/versions`) - await page.waitForURL(`${savedDocURL}/versions`) - - // select the first version (row 2) + await page.waitForURL(new RegExp(`${savedDocURL}/versions`)) const row2 = page.locator('tbody .row-2') const versionID = await row2.locator('.cell-id').textContent() await page.goto(`${savedDocURL}/versions/${versionID}`) - await page.waitForURL(`${savedDocURL}/versions/${versionID}`) - - // restore doc + await page.waitForURL(new RegExp(`${savedDocURL}/versions/${versionID}`)) await page.locator('.pill.restore-version').click() await page.locator('button:has-text("Confirm")').click() - await page.waitForURL(savedDocURL) - + await page.waitForURL(new RegExp(savedDocURL)) await expect(page.locator('#field-title')).toHaveValue('v1') }) @@ -385,16 +361,12 @@ describe('versions', () => { test('global - should autosave', async () => { const url = new AdminUrlUtil(serverURL, autoSaveGlobalSlug) - // fill out global title and wait for autosave await page.goto(url.global(autoSaveGlobalSlug)) await page.waitForURL(`**/${autoSaveGlobalSlug}`) const titleField = page.locator('#field-title') - await titleField.fill('global title') await waitForAutoSaveToRunAndComplete(page) await expect(titleField).toHaveValue('global title') - - // refresh the page and ensure value autosaved await page.goto(url.global(autoSaveGlobalSlug)) await expect(page.locator('#field-title')).toHaveValue('global title') }) @@ -405,41 +377,25 @@ describe('versions', () => { const englishTitle = 'english title' const spanishTitle = 'spanish title' const newDescription = 'new description' - await page.goto(autosaveURL.create) // gets redirected from /create to /slug/id due to autosave - await page.waitForURL(`${autosaveURL.list}/**`) - await expect(() => expect(page.url()).not.toContain(`/create`)).toPass({ - timeout: POLL_TOPASS_TIMEOUT, - }) + await page.waitForURL(new RegExp(`${autosaveURL.edit('')}`)) + await wait(500) const titleField = page.locator('#field-title') - const descriptionField = page.locator('#field-description') - - // fill out en doc + await expect(titleField).toBeEnabled() await titleField.fill(englishTitle) + const descriptionField = page.locator('#field-description') + await expect(descriptionField).toBeEnabled() await descriptionField.fill('description') await waitForAutoSaveToRunAndComplete(page) - - // change locale to spanish await changeLocale(page, es) - // set localized title field await titleField.fill(spanishTitle) await waitForAutoSaveToRunAndComplete(page) - - // change locale back to en await changeLocale(page, en) - // verify en loads its own title await expect(titleField).toHaveValue(englishTitle) - // change non-localized description field await descriptionField.fill(newDescription) await waitForAutoSaveToRunAndComplete(page) - - // change locale to spanish await changeLocale(page, es) - - // reload page in spanish - // title should not be english title - // description should be new description await page.reload() await expect(titleField).toHaveValue(spanishTitle) await expect(descriptionField).toHaveValue(newDescription) @@ -487,41 +443,30 @@ describe('versions', () => { }) test('collection — autosave should only update the current document', async () => { - // create and save first doc await page.goto(autosaveURL.create) - // Should redirect from /create to /[collectionslug]/[new id] due to auto-save - await page.waitForURL(`${autosaveURL.list}/**`) - await expect(() => expect(page.url()).not.toContain(`/create`)).toPass({ - timeout: POLL_TOPASS_TIMEOUT, - }) // Make sure this doesnt match for list view and /create view, but ONLY for the ID edit view - + // gets redirected from /create to /slug/id due to autosave + await page.waitForURL(new RegExp(`${autosaveURL.edit('')}`)) + await wait(500) + await expect(page.locator('#field-title')).toBeEnabled() await page.locator('#field-title').fill('first post title') + await expect(page.locator('#field-description')).toBeEnabled() await page.locator('#field-description').fill('first post description') await saveDocAndAssert(page) await waitForAutoSaveToComplete(page) // Make sure nothing is auto-saving before next steps - - // create and save second doc await page.goto(autosaveURL.create) - // Should redirect from /create to /[collectionslug]/[new id] due to auto-save - await page.waitForURL(`${autosaveURL.list}/**`) - await expect(() => expect(page.url()).not.toContain(`/create`)).toPass({ - timeout: POLL_TOPASS_TIMEOUT, - }) // Make sure this doesnt match for list view and /create view, but only for the ID edit view - + // gets redirected from /create to /slug/id due to autosave + await page.waitForURL(new RegExp(`${autosaveURL.edit('')}`)) await waitForAutoSaveToComplete(page) // Make sure nothing is auto-saving before next steps - + await wait(500) + await expect(page.locator('#field-title')).toBeEnabled() await page.locator('#field-title').fill('second post title') + await expect(page.locator('#field-description')).toBeEnabled() await page.locator('#field-description').fill('second post description') - // publish changes await saveDocAndAssert(page) await waitForAutoSaveToComplete(page) // Make sure nothing is auto-saving before next steps - - // update second doc and wait for autosave await page.locator('#field-title').fill('updated second post title') await page.locator('#field-description').fill('updated second post description') await waitForAutoSaveToRunAndComplete(page) - - // verify that the first doc is unchanged await page.goto(autosaveURL.list) const secondRowLink = page.locator('tbody tr:nth-child(2) .cell-title a') const docURL = await secondRowLink.getAttribute('href')