tabshift/payload
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

chore: overhauls admin navigation (#3339)

Browse Source
This commit is contained in:
Jacob Fletcher
2023-09-15 17:33:28 -04:00
committed by GitHub
parent 055c65f229
commit 85c8e4dc65
107 changed files with 1871 additions and 1740 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
test/admin/components/routes/CustomDefault/index.tsx
View File

@@ -1,10 +1,9 @@
import React, { useEffect } from 'react'
import { Redirect } from 'react-router-dom'
import type { AdminView } from '../../../../../packages/payload/src/config/types'
import type { CustomAdminView } from '../../../../../packages/payload/src/config/types'
import Button from '../../../../../packages/payload/src/admin/components/elements/Button'
import Eyebrow from '../../../../../packages/payload/src/admin/components/elements/Eyebrow'
import { useStepNav } from '../../../../../packages/payload/src/admin/components/elements/StepNav'
// As this is the demo project, we import our dependencies from the `src` directory.
import DefaultTemplate from '../../../../../packages/payload/src/admin/components/templates/Default'
@@ -18,7 +17,7 @@ import Meta from '../../../../../packages/payload/src/admin/components/utilities
// import { useStepNav } from 'payload/components/hooks';
// import { useConfig, Meta } from 'payload/components/utilities';
const CustomDefaultRoute: AdminView = ({ canAccessAdmin, user }) => {
const CustomDefaultRoute: CustomAdminView = ({ canAccessAdmin, user }) => {
const {
routes: { admin: adminRoute },
} = useConfig()
@@ -48,11 +47,10 @@ const CustomDefaultRoute: AdminView = ({ canAccessAdmin, user }) => {
keywords="Custom React Components, Payload, CMS"
title="Custom Route with Default Template"
/>
<Eyebrow />
<div
style={{
paddingRight: 'var(--gutter-h)',
paddingLeft: 'var(--gutter-h)',
paddingRight: 'var(--gutter-h)',
}}
>
<h1>Custom Route</h1>

2
test/admin/components/views/CustomEdit/index.tsx
View File

@@ -2,7 +2,6 @@ import React, { Fragment, useEffect } from 'react'
import { Redirect, useParams } from 'react-router-dom'
import Button from '../../../../../packages/payload/src/admin/components/elements/Button'
import Eyebrow from '../../../../../packages/payload/src/admin/components/elements/Eyebrow'
import { useStepNav } from '../../../../../packages/payload/src/admin/components/elements/StepNav'
import { useConfig } from '../../../../../packages/payload/src/admin/components/utilities/Config'
import { type CustomAdminView } from '../../../../../packages/payload/src/config/types'
@@ -48,7 +47,6 @@ const CustomEditView: CustomAdminView = ({ canAccessAdmin, collection, global, u
return (
<Fragment>
<Eyebrow />
<div
style={{
paddingLeft: 'var(--gutter-h)',

2
test/admin/components/views/CustomVersions/index.tsx
View File

@@ -2,7 +2,6 @@ import React, { Fragment, useEffect } from 'react'
import { Redirect, useParams } from 'react-router-dom'
import Button from '../../../../../packages/payload/src/admin/components/elements/Button'
import Eyebrow from '../../../../../packages/payload/src/admin/components/elements/Eyebrow'
import { useStepNav } from '../../../../../packages/payload/src/admin/components/elements/StepNav'
import { useConfig } from '../../../../../packages/payload/src/admin/components/utilities/Config'
import { type CustomAdminView } from '../../../../../packages/payload/src/config/types'
@@ -45,7 +44,6 @@ const CustomVersionsView: CustomAdminView = ({ canAccessAdmin, collection, globa
return (
<Fragment>
<Eyebrow />
<div
style={{
paddingLeft: 'var(--gutter-h)',

2
test/admin/components/views/CustomView/index.tsx
View File

@@ -2,7 +2,6 @@ import React, { Fragment, useEffect } from 'react'
import { useParams } from 'react-router-dom'
import Button from '../../../../../packages/payload/src/admin/components/elements/Button'
import Eyebrow from '../../../../../packages/payload/src/admin/components/elements/Eyebrow'
import { useStepNav } from '../../../../../packages/payload/src/admin/components/elements/StepNav'
import { useConfig } from '../../../../../packages/payload/src/admin/components/utilities/Config'
import { type CustomAdminView } from '../../../../../packages/payload/src/config/types'
@@ -42,7 +41,6 @@ const CustomView: CustomAdminView = ({ collection, global }) => {
return (
<Fragment>
<Eyebrow />
<div
style={{
paddingLeft: 'var(--gutter-h)',

41
test/admin/config.ts
View File

@@ -60,10 +60,16 @@ export default buildConfigWithDefaults({
},
},
},
localization: {
locales: ['en', 'es'],
},
collections: [
{
slug: 'users',
auth: true,
admin: {
useAsTitle: 'email',
},
fields: [],
},
{
@@ -80,30 +86,20 @@ export default buildConfigWithDefaults({
},
{
slug,
labels: {
singular: {
en: 'Post en',
es: 'Post es',
},
plural: {
en: 'Posts en',
es: 'Posts es',
},
},
admin: {
description: { en: 'Description en', es: 'Description es' },
description: 'Description',
listSearchableFields: ['title', 'description', 'number'],
group: { en: 'One', es: 'Una' },
group: 'One',
useAsTitle: 'title',
defaultColumns: ['id', 'number', 'title', 'description', 'demoUIField'],
preview: () => 'https://payloadcms.com',
},
versions: {
drafts: true,
},
fields: [
{
name: 'title',
label: {
en: 'Title en',
es: 'Title es',
},
type: 'text',
},
{
@@ -124,7 +120,7 @@ export default buildConfigWithDefaults({
{
type: 'ui',
name: 'demoUIField',
label: { en: 'Demo UI Field', de: 'Demo UI Field de' },
label: 'Demo UI Field',
admin: {
components: {
Field: DemoUIFieldField,
@@ -179,7 +175,7 @@ export default buildConfigWithDefaults({
{
slug: 'group-one-collection-ones',
admin: {
group: { en: 'One', es: 'Una' },
group: 'One',
},
fields: [
{
@@ -191,7 +187,7 @@ export default buildConfigWithDefaults({
{
slug: 'group-one-collection-twos',
admin: {
group: { en: 'One', es: 'Una' },
group: 'One',
},
fields: [
{
@@ -249,13 +245,12 @@ export default buildConfigWithDefaults({
},
{
slug: globalSlug,
label: {
en: 'Global en',
es: 'Global es',
},
admin: {
group: 'Group',
},
versions: {
drafts: true,
},
fields: [
{
name: 'title',

54
test/admin/e2e.spec.ts
View File

@@ -8,7 +8,7 @@ import type { Post } from './config'
import payload from '../../packages/payload/src'
import { mapAsync } from '../../packages/payload/src/utilities/mapAsync'
import wait from '../../packages/payload/src/utilities/wait'
import { openMainMenu, saveDocAndAssert, saveDocHotkeyAndAssert } from '../helpers'
import { openDocControls, openMainMenu, saveDocAndAssert, saveDocHotkeyAndAssert } from '../helpers'
import { AdminUrlUtil } from '../helpers/adminUrlUtil'
import { initPayloadE2E } from '../helpers/configHelpers'
import { globalSlug, slug } from './shared'
@@ -192,9 +192,10 @@ describe('admin', () => {
test('should delete existing', async () => {
const { id, title } = await createPost()
await page.goto(url.edit(id))
await openDocControls(page)
await page.locator('#action-delete').click()
await page.locator('#confirm-delete').click()
await expect(page.locator(`text=Post en "${title}" successfully deleted.`)).toBeVisible()
await expect(page.locator(`text=Post "${title}" successfully deleted.`)).toBeVisible()
expect(page.url()).toContain(url.list)
})
@@ -212,7 +213,7 @@ describe('admin', () => {
await page.locator('#confirm-delete').click()
await expect(page.locator('.Toastify__toast--success')).toHaveText(
'Deleted 3 Posts en successfully.',
'Deleted 3 Posts successfully.',
)
await expect(page.locator('.collection-list__no-results')).toBeVisible()
})
@@ -229,9 +230,9 @@ describe('admin', () => {
await page.locator('.edit-many__toggle').click()
await page.locator('.field-select .rs__control').click()
const options = page.locator('.rs__option')
const titleOption = options.locator('text=Title en')
const titleOption = options.locator('text=Title')
await expect(titleOption).toHaveText('Title en')
await expect(titleOption).toHaveText('Title')
await titleOption.click()
const titleInput = page.locator('#field-title')
@@ -240,9 +241,9 @@ describe('admin', () => {
await titleInput.fill(bulkTitle)
await page.locator('.form-submit button[type="submit"]').click()
await page.locator('.form-submit button[type="submit"].edit-many__publish').click()
await expect(page.locator('.Toastify__toast--success')).toContainText(
'Updated 3 Posts en successfully.',
'Updated 3 Posts successfully.',
)
await expect(page.locator('.row-1 .cell-title')).toContainText(bulkTitle)
await expect(page.locator('.row-2 .cell-title')).toContainText(bulkTitle)
@@ -409,7 +410,7 @@ describe('admin', () => {
await createPost({ title: 'post2' })
await page.goto(`${url.list}?limit=10&page=1&where[or][0][and][0][title][equals]=post1`)
await expect(page.locator('.react-select--single-value').first()).toContainText('Title en')
await expect(page.locator('.react-select--single-value').first()).toContainText('Title')
await expect(page.locator(tableRowLocator)).toHaveCount(1)
})
@@ -419,7 +420,7 @@ describe('admin', () => {
// [title][equals]=post1 should be getting transformed into a valid where[or][0][and][0][title][equals]=post1
await page.goto(`${url.list}?limit=10&page=1&where[title][equals]=post1`)
await expect(page.locator('.react-select--single-value').first()).toContainText('Title en')
await expect(page.locator('.react-select--single-value').first()).toContainText('Title')
await expect(page.locator(tableRowLocator)).toHaveCount(1)
})
@@ -547,11 +548,11 @@ describe('admin', () => {
'[id^=list-drawer_1_] .list-drawer__select-collection.react-select',
)
// select the "Post en" collection
// select the "Post" collection
await collectionSelector.click()
await page
.locator(
'[id^=list-drawer_1_] .list-drawer__select-collection.react-select .rs__option >> text="Post en"',
'[id^=list-drawer_1_] .list-drawer__select-collection.react-select .rs__option >> text="Post"',
)
.click()
@@ -596,11 +597,11 @@ describe('admin', () => {
)
.click()
// select the "Post en" collection
// select the "Post" collection
await collectionSelector.click()
await page
.locator(
'[id^=list-drawer_1_] .list-drawer__select-collection.react-select .rs__option >> text="Post en"',
'[id^=list-drawer_1_] .list-drawer__select-collection.react-select .rs__option >> text="Post"',
)
.click()
@@ -628,11 +629,11 @@ describe('admin', () => {
.first(),
).not.toHaveClass('column-selector__column--active')
// select the "Post en" collection again
// select the "Post" collection again
await collectionSelector.click()
await page
.locator(
'[id^=list-drawer_1_] .list-drawer__select-collection.react-select .rs__option >> text="Post en"',
'[id^=list-drawer_1_] .list-drawer__select-collection.react-select .rs__option >> text="Post"',
)
.click()
@@ -762,13 +763,13 @@ describe('admin', () => {
await page.goto(url.list)
// collection label
await expect(page.locator('#nav-posts')).toContainText('Posts en')
await expect(page.locator('#nav-posts')).toContainText('Posts')
// global label
await expect(page.locator('#nav-global-global')).toContainText('Global en')
await expect(page.locator('#nav-global-global')).toContainText('Global')
// view description
await expect(page.locator('.view-description')).toContainText('Description en')
await expect(page.locator('.view-description')).toContainText('Description')
})
test('should display translated field titles', async () => {
@@ -776,23 +777,18 @@ describe('admin', () => {
// column controls
await page.locator('.list-controls__toggle-columns').click()
await expect(page.locator('.column-selector__column >> text=Title en')).toHaveText(
'Title en',
)
await expect(page.locator('.column-selector__column >> text=Title')).toHaveText('Title')
// filters
await page.locator('.list-controls__toggle-where').click()
await page.locator('.where-builder__add-first-filter').click()
await page.locator('.condition__field .rs__control').click()
const options = page.locator('.rs__option')
await expect(options.locator('text=Title en')).toHaveText('Title en')
await expect(options.locator('text=Title')).toHaveText('Title')
// list columns
await expect(page.locator('#heading-title .sort-column__label')).toHaveText('Title en')
await expect(page.locator('.search-filter input')).toHaveAttribute(
'placeholder',
/(Title en)/,
)
await expect(page.locator('#heading-title .sort-column__label')).toHaveText('Title')
await expect(page.locator('.search-filter input')).toHaveAttribute('placeholder', /(Title)/)
})
test('should use fallback language on field titles', async () => {
@@ -806,9 +802,7 @@ describe('admin', () => {
await page.goto(url.list)
await page.locator('.list-controls__toggle-columns').click()
// expecting the label to fall back to english as default fallbackLng
await expect(page.locator('.column-selector__column >> text=Title en')).toHaveText(
'Title en',
)
await expect(page.locator('.column-selector__column >> text=Title')).toHaveText('Title')
})
})
})