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

View File

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

View File

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