fix: incorrectly looking for schema paths when upload is not enabled (#9146)

### What?
![CleanShot 2024-11-12 at 12 17
56](https://github.com/user-attachments/assets/74b906a3-7e76-4ee9-8b18-bd24dd7fca82)

### Why?
Should not be attaching fields that it does not need.

### How?
Conditionally render slate upload drawer like we do with the toggler.
This commit is contained in:
Jarrod Flesch
2024-11-12 14:02:08 -05:00
committed by GitHub
parent 280448dd02
commit a3ebf51d6e
3 changed files with 44 additions and 62 deletions

View File

@@ -154,6 +154,7 @@ const UploadElementComponent: React.FC<{ enabledCollectionSlugs?: string[] }> =
</div> </div>
<div className={`${baseClass}__actions`}> <div className={`${baseClass}__actions`}>
{Boolean(customFieldsMap) && ( {Boolean(customFieldsMap) && (
<>
<DrawerToggler <DrawerToggler
className={`${baseClass}__upload-drawer-toggler`} className={`${baseClass}__upload-drawer-toggler`}
disabled={fieldProps?.field?.admin?.readOnly} disabled={fieldProps?.field?.admin?.readOnly}
@@ -170,6 +171,10 @@ const UploadElementComponent: React.FC<{ enabledCollectionSlugs?: string[] }> =
tooltip={t('fields:editRelationship')} tooltip={t('fields:editRelationship')}
/> />
</DrawerToggler> </DrawerToggler>
<UploadDrawer
{...{ drawerSlug, element, fieldProps, relatedCollection, schemaPath }}
/>
</>
)} )}
<ListDrawerToggler <ListDrawerToggler
className={`${baseClass}__list-drawer-toggler`} className={`${baseClass}__list-drawer-toggler`}
@@ -211,7 +216,6 @@ const UploadElementComponent: React.FC<{ enabledCollectionSlugs?: string[] }> =
{children} {children}
{value?.id && <DocumentDrawer onSave={updateUpload} />} {value?.id && <DocumentDrawer onSave={updateUpload} />}
<ListDrawer onSelect={swapUpload} /> <ListDrawer onSelect={swapUpload} />
<UploadDrawer {...{ drawerSlug, element, fieldProps, relatedCollection, schemaPath }} />
</div> </div>
) )
} }

View File

@@ -156,11 +156,11 @@ export const EditMany: React.FC<EditManyProps> = (props) => {
} }
void getInitialState() void getInitialState()
}
return () => { return () => {
abortAndIgnore(controller) abortAndIgnore(controller)
} }
}
}, [apiRoute, hasInitializedState, serverURL, slug, getFormState, user, collectionPermissions]) }, [apiRoute, hasInitializedState, serverURL, slug, getFormState, user, collectionPermissions])
const onChange: FormProps['onChange'][0] = useCallback( const onChange: FormProps['onChange'][0] = useCallback(
@@ -186,7 +186,9 @@ export const EditMany: React.FC<EditManyProps> = (props) => {
) )
useEffect(() => { useEffect(() => {
return () => {
abortAndIgnore(formStateAbortControllerRef.current) abortAndIgnore(formStateAbortControllerRef.current)
}
}, []) }, [])
if (selectAll === SelectAllStatus.None || !hasUpdatePermission) { if (selectAll === SelectAllStatus.None || !hasUpdatePermission) {

View File

@@ -1,6 +1,6 @@
'use client' 'use client'
import type { ClientCollectionConfig, StaticDescription } from 'payload' import type { ClientCollectionConfig } from 'payload'
import { getTranslation } from '@payloadcms/translations' import { getTranslation } from '@payloadcms/translations'
import LinkImport from 'next/link.js' import LinkImport from 'next/link.js'
@@ -24,7 +24,6 @@ import { Pagination } from '../../elements/Pagination/index.js'
import { PerPage } from '../../elements/PerPage/index.js' import { PerPage } from '../../elements/PerPage/index.js'
import { PublishMany } from '../../elements/PublishMany/index.js' import { PublishMany } from '../../elements/PublishMany/index.js'
import { RenderCustomComponent } from '../../elements/RenderCustomComponent/index.js' import { RenderCustomComponent } from '../../elements/RenderCustomComponent/index.js'
import { StaggeredShimmers } from '../../elements/ShimmerEffect/index.js'
import { useStepNav } from '../../elements/StepNav/index.js' import { useStepNav } from '../../elements/StepNav/index.js'
import { RelationshipProvider } from '../../elements/Table/RelationshipProvider/index.js' import { RelationshipProvider } from '../../elements/Table/RelationshipProvider/index.js'
import { TableColumnsProvider } from '../../elements/TableColumns/index.js' import { TableColumnsProvider } from '../../elements/TableColumns/index.js'
@@ -35,7 +34,6 @@ import { useConfig } from '../../providers/Config/index.js'
import { useEditDepth } from '../../providers/EditDepth/index.js' import { useEditDepth } from '../../providers/EditDepth/index.js'
import { useListQuery } from '../../providers/ListQuery/index.js' import { useListQuery } from '../../providers/ListQuery/index.js'
import { SelectionProvider } from '../../providers/Selection/index.js' import { SelectionProvider } from '../../providers/Selection/index.js'
import { useServerFunctions } from '../../providers/ServerFunctions/index.js'
import { useTranslation } from '../../providers/Translation/index.js' import { useTranslation } from '../../providers/Translation/index.js'
import { useWindowInfo } from '../../providers/WindowInfo/index.js' import { useWindowInfo } from '../../providers/WindowInfo/index.js'
import './index.scss' import './index.scss'
@@ -98,8 +96,6 @@ export const DefaultListView: React.FC<ListViewClientProps> = (props) => {
} }
}, [InitialTable]) }, [InitialTable])
const payloadServerAction = useServerFunctions()
const { user } = useAuth() const { user } = useAuth()
const { getEntityConfig } = useConfig() const { getEntityConfig } = useConfig()
@@ -136,30 +132,18 @@ export const DefaultListView: React.FC<ListViewClientProps> = (props) => {
breakpoints: { s: smallBreak }, breakpoints: { s: smallBreak },
} = useWindowInfo() } = useWindowInfo()
useEffect(() => { const docs = React.useMemo(() => {
if (!collectionConfig) {
const getNewConfig = async () => {
// @ts-expect-error eslint-disable-next-line
const res = (await payloadServerAction('render-config', {
collectionSlug,
languageCode: i18n.language,
})) as any as ClientCollectionConfig
}
void getNewConfig()
}
}, [payloadServerAction, collectionConfig, collectionSlug, data, i18n])
let docs = data.docs || []
if (isUploadCollection) { if (isUploadCollection) {
docs = docs?.map((doc) => { return data.docs.map((doc) => {
return { return {
...doc, ...doc,
filesize: formatFilesize(doc.filesize), filesize: formatFilesize(doc.filesize),
} }
}) })
} else {
return data.docs
} }
}, [data.docs, isUploadCollection])
const openBulkUpload = React.useCallback(() => { const openBulkUpload = React.useCallback(() => {
setCollectionSlug(collectionSlug) setCollectionSlug(collectionSlug)
@@ -182,14 +166,14 @@ export const DefaultListView: React.FC<ListViewClientProps> = (props) => {
<TableColumnsProvider <TableColumnsProvider
collectionSlug={collectionSlug} collectionSlug={collectionSlug}
columnState={columnState} columnState={columnState}
docs={data.docs} docs={docs}
enableRowSelections={enableRowSelections} enableRowSelections={enableRowSelections}
listPreferences={listPreferences} listPreferences={listPreferences}
preferenceKey={preferenceKey} preferenceKey={preferenceKey}
setTable={setTable} setTable={setTable}
> >
<div className={`${baseClass} ${baseClass}--${collectionSlug}`}> <div className={`${baseClass} ${baseClass}--${collectionSlug}`}>
<SelectionProvider docs={data.docs} totalDocs={data.totalDocs} user={user}> <SelectionProvider docs={docs} totalDocs={data.totalDocs} user={user}>
{BeforeList} {BeforeList}
<Gutter className={`${baseClass}__wrap`}> <Gutter className={`${baseClass}__wrap`}>
<ListHeader <ListHeader
@@ -221,16 +205,8 @@ export const DefaultListView: React.FC<ListViewClientProps> = (props) => {
renderedFilters={renderedFilters} renderedFilters={renderedFilters}
/> />
{BeforeListTable} {BeforeListTable}
{!data.docs && ( {docs.length > 0 && <RelationshipProvider>{Table}</RelationshipProvider>}
<StaggeredShimmers {docs.length === 0 && (
className={[`${baseClass}__shimmer`, `${baseClass}__shimmer--rows`].join(' ')}
count={6}
/>
)}
{data.docs && data.docs.length > 0 && (
<RelationshipProvider>{Table}</RelationshipProvider>
)}
{data.docs && data.docs.length === 0 && (
<div className={`${baseClass}__no-results`}> <div className={`${baseClass}__no-results`}>
<p> <p>
{i18n.t('general:noResults', { label: getTranslation(labels?.plural, i18n) })} {i18n.t('general:noResults', { label: getTranslation(labels?.plural, i18n) })}
@@ -255,7 +231,7 @@ export const DefaultListView: React.FC<ListViewClientProps> = (props) => {
</div> </div>
)} )}
{AfterListTable} {AfterListTable}
{data.docs && data.docs.length > 0 && ( {docs.length > 0 && (
<div className={`${baseClass}__page-controls`}> <div className={`${baseClass}__page-controls`}>
<Pagination <Pagination
hasNextPage={data.hasNextPage} hasNextPage={data.hasNextPage}
@@ -268,7 +244,7 @@ export const DefaultListView: React.FC<ListViewClientProps> = (props) => {
prevPage={data.prevPage} prevPage={data.prevPage}
totalPages={data.totalPages} totalPages={data.totalPages}
/> />
{data?.totalDocs > 0 && ( {data.totalDocs > 0 && (
<Fragment> <Fragment>
<div className={`${baseClass}__page-info`}> <div className={`${baseClass}__page-info`}>
{data.page * data.limit - (data.limit - 1)}- {data.page * data.limit - (data.limit - 1)}-