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

feat: tests & autosave improvements

Browse Source
This commit is contained in:
James
2021-12-30 16:37:49 -05:00
parent e910d8938f
commit 7220ff7a8a
24 changed files with 169 additions and 101 deletions
Download Patch File Download Diff File Expand all files Collapse all files

33
src/admin/components/elements/Pill/index.scss
View File

@@ -11,6 +11,7 @@
border-radius: $style-radius-s;
padding: 0 base(.25);
padding-left: base(.0875 + .25);
cursor: default;
&:active,
&:focus {
@@ -37,12 +38,14 @@
}
&--style-light {
&:hover {
background: lighten($color-light-gray, 3%);
}
&.pill--has-action {
&:hover {
background: lighten($color-light-gray, 3%);
}
&:active {
background: lighten($color-light-gray, 5%);
&:active {
background: lighten($color-light-gray, 5%);
}
}
}
@@ -51,6 +54,14 @@
color: $color-dark-gray;
}
&--style-warning {
background: $color-yellow;
}
&--style-success {
background: $color-green;
}
&--style-dark {
background: $color-dark-gray;
color: white;
@@ -59,12 +70,14 @@
@include color-svg(white);
}
&:hover {
background: lighten($color-dark-gray, 3%);
}
&.pill--has-action {
&:hover {
background: lighten($color-dark-gray, 3%);
}
&:active {
background: lighten($color-dark-gray, 5%);
&:active {
background: lighten($color-dark-gray, 5%);
}
}
}
}

2
src/admin/components/elements/Pill/types.ts
View File

@@ -4,7 +4,7 @@ export type Props = {
icon?: React.ReactNode,
alignIcon?: 'left' | 'right',
onClick?: () => void,
pillStyle?: 'light' | 'dark' | 'light-gray',
pillStyle?: 'light' | 'dark' | 'light-gray' | 'warning' | 'success',
}
export type RenderedTypeProps = {

4
src/admin/components/views/Version/Compare/index.tsx
View File

@@ -5,7 +5,7 @@ import format from 'date-fns/format';
import { Props } from './types';
import ReactSelect from '../../../elements/ReactSelect';
import { PaginatedDocs } from '../../../../../mongoose/types';
import { publishedVersionOption } from '../shared';
import { mostRecentVersionOption } from '../shared';
import './index.scss';
@@ -14,7 +14,7 @@ const baseClass = 'compare-version';
const maxResultsPerRequest = 10;
const baseOptions = [
publishedVersionOption,
mostRecentVersionOption,
];
const CompareVersion: React.FC<Props> = (props) => {

6
src/admin/components/views/Version/RenderFieldsToDiff/fields/Text/index.tsx
View File

@@ -1,5 +1,5 @@
import React from 'react';
import ReactDiffViewer from 'react-diff-viewer';
import ReactDiffViewer, { DiffMethod } from 'react-diff-viewer';
import Label from '../../Label';
import { Props } from '../types';
@@ -7,7 +7,7 @@ import './index.scss';
const baseClass = 'text-diff';
const Text: React.FC<Props> = ({ field, locale, version, comparison, isRichText = false }) => {
const Text: React.FC<Props> = ({ field, locale, version, comparison, isRichText = false, diffMethod }) => {
let placeholder = '';
if (version === comparison) placeholder = '[no value]';
@@ -20,7 +20,6 @@ const Text: React.FC<Props> = ({ field, locale, version, comparison, isRichText
if (typeof comparison === 'object') comparisonToRender = JSON.stringify(comparison, null, 2);
}
return (
<div className={baseClass}>
<Label>
@@ -30,6 +29,7 @@ const Text: React.FC<Props> = ({ field, locale, version, comparison, isRichText
{field.label}
</Label>
<ReactDiffViewer
compareMethod={DiffMethod[diffMethod]}
oldValue={typeof versionToRender !== 'undefined' ? String(versionToRender) : placeholder}
newValue={typeof comparisonToRender !== 'undefined' ? String(comparisonToRender) : placeholder}
splitView

6
src/admin/components/views/Version/RenderFieldsToDiff/fields/diffMethods.ts Normal file
View File

@@ -0,0 +1,6 @@
export const diffMethods = {
select: 'WORDS_WITH_SPACE',
relationship: 'WORDS_WITH_SPACE',
upload: 'WORDS_WITH_SPACE',
radio: 'WORDS_WITH_SPACE',
};

2
src/admin/components/views/Version/RenderFieldsToDiff/fields/types.ts
View File

@@ -1,9 +1,11 @@
import React from 'react';
import { DiffMethod } from 'react-diff-viewer';
import { FieldPermissions } from '../../../../../../auth';
export type FieldComponents = Record<string, React.FC<Props>>
export type Props = {
diffMethod?: DiffMethod
fieldComponents: FieldComponents
version: any
comparison: any

5
src/admin/components/views/Version/RenderFieldsToDiff/index.tsx
View File

@@ -1,9 +1,11 @@
import React from 'react';
import { DiffMethod } from 'react-diff-viewer';
import { Props } from './types';
import { fieldAffectsData, fieldHasSubFields } from '../../../../../fields/config/types';
import Nested from './fields/Nested';
import './index.scss';
import { diffMethods } from './fields/diffMethods';
const baseClass = 'render-field-diffs';
@@ -20,6 +22,7 @@ const RenderFieldsToDiff: React.FC<Props> = ({
const Component = fieldComponents[field.type];
const isRichText = field.type === 'richText';
const diffMethod: DiffMethod = diffMethods[field.type] || 'CHARS';
if (Component) {
if (fieldAffectsData(field)) {
@@ -46,6 +49,7 @@ const RenderFieldsToDiff: React.FC<Props> = ({
>
<div className={`${baseClass}__locale-value`}>
<Component
diffMethod={diffMethod}
locale={locale}
locales={locales}
field={field}
@@ -69,6 +73,7 @@ const RenderFieldsToDiff: React.FC<Props> = ({
key={i}
>
<Component
diffMethod={diffMethod}
locales={locales}
field={field}
fieldComponents={fieldComponents}

13
src/admin/components/views/Version/Version.tsx
View File

@@ -10,7 +10,7 @@ import { StepNavItem } from '../../elements/StepNav/types';
import Meta from '../../utilities/Meta';
import { LocaleOption, CompareOption, Props } from './types';
import CompareVersion from './Compare';
import { publishedVersionOption } from './shared';
import { mostRecentVersionOption } from './shared';
import Restore from './Restore';
import SelectLocales from './SelectLocales';
import RenderFieldsToDiff from './RenderFieldsToDiff';
@@ -27,7 +27,7 @@ const VersionView: React.FC<Props> = ({ collection, global }) => {
const { serverURL, routes: { admin, api }, admin: { dateFormat }, localization } = useConfig();
const { setStepNav } = useStepNav();
const { params: { id, versionID } } = useRouteMatch<{ id?: string, versionID: string }>();
const [compareValue, setCompareValue] = useState<CompareOption>(publishedVersionOption);
const [compareValue, setCompareValue] = useState<CompareOption>(mostRecentVersionOption);
const [localeOptions] = useState<LocaleOption[]>(() => (localization?.locales ? localization.locales.map((locale) => ({ label: locale, value: locale })) : []));
const [locales, setLocales] = useState<LocaleOption[]>(localeOptions);
const { permissions } = useAuth();
@@ -63,11 +63,12 @@ const VersionView: React.FC<Props> = ({ collection, global }) => {
}
const useAsTitle = collection?.admin?.useAsTitle || 'id';
const compareFetchURL = compareValue?.value === 'published' ? originalDocFetchURL : `${compareBaseURL}/${compareValue.value}`;
const compareFetchURL = compareValue?.value === 'mostRecent' ? originalDocFetchURL : `${compareBaseURL}/${compareValue.value}`;
const [{ data: doc, isLoading }] = usePayloadAPI(versionFetchURL, { initialParams: { locale: '*', depth: 1 } });
const [{ data: originalDoc }] = usePayloadAPI(originalDocFetchURL, { initialParams: { depth: 1 } });
const [{ data: compareDoc }] = usePayloadAPI(compareFetchURL, { initialParams: { locale: '*', depth: 1 } });
const [{ data: originalDoc }] = usePayloadAPI(originalDocFetchURL, { initialParams: { depth: 1, draft: 'true' } });
const [{ data: compareDoc }] = usePayloadAPI(compareFetchURL, { initialParams: { locale: '*', depth: 1, draft: 'true' } });
useEffect(() => {
let nav: StepNavItem[] = [];
@@ -186,7 +187,7 @@ const VersionView: React.FC<Props> = ({ collection, global }) => {
fieldComponents={fieldComponents}
fieldPermissions={fieldPermissions}
version={doc?.version}
comparison={compareValue?.value === 'published' ? compareDoc : compareDoc?.version}
comparison={compareValue?.value === 'mostRecent' ? compareDoc : compareDoc?.version}
/>
)}
</div>

6
src/admin/components/views/Version/shared.ts
View File

@@ -1,4 +1,4 @@
export const publishedVersionOption = {
label: 'Most recently published',
value: 'published',
export const mostRecentVersionOption = {
label: 'Most recent',
value: 'mostRecent',
};

14
src/admin/components/views/Versions/columns.tsx
View File

@@ -39,12 +39,12 @@ const TextCell: React.FC = ({ children }) => (
export const getColumns = (collection: SanitizedCollectionConfig, global: SanitizedGlobalConfig): Column[] => [
{
accessor: 'createdAt',
accessor: 'updatedAt',
components: {
Heading: (
<SortColumn
label="Created At"
name="createdAt"
label="Updated At"
name="updatedAt"
/>
),
renderCell: (row, data) => (
@@ -83,10 +83,10 @@ export const getColumns = (collection: SanitizedCollectionConfig, global: Saniti
renderCell: (row, data) => (
<TextCell>
{row?.autosave && (
<Pill>
Autosave
</Pill>
)}
<Pill>
Autosave
</Pill>
)}
</TextCell>
),
},

2
src/admin/components/views/Versions/index.tsx
View File

@@ -44,7 +44,7 @@ const Versions: React.FC<Props> = ({ collection, global }) => {
}
const useAsTitle = collection?.admin?.useAsTitle || 'id';
const [{ data: doc }] = usePayloadAPI(docURL);
const [{ data: doc }] = usePayloadAPI(docURL, { initialParams: { draft: 'true' } });
const [{ data: versionsData, isLoading: isLoadingVersions }, { setParams }] = usePayloadAPI(fetchURL);
useEffect(() => {

10
src/admin/components/views/collections/Edit/Default.tsx
View File

@@ -20,6 +20,8 @@ import VersionsCount from '../../../elements/VersionsCount';
import Upload from './Upload';
import { Props } from './types';
import Autosave from '../../../elements/Autosave';
import Select from '../../../forms/field-types/Select';
import { statuses } from '../../../../../versions/baseFields';
import './index.scss';
@@ -159,6 +161,14 @@ const DefaultEditView: React.FC<Props> = (props) => {
{!isLoading && (
<React.Fragment>
<div className={`${baseClass}__sidebar-fields`}>
{collection.versions?.drafts && (
<Select
label="Status"
path="_status"
name="_status"
options={statuses}
/>
)}
{(collection.versions?.drafts && collection.versions.drafts.autosave && hasSavePermission) && (
<Autosave
updatedAt={data.updatedAt}

2
src/admin/components/views/collections/Edit/index.tsx
View File

@@ -119,7 +119,7 @@ const EditView: React.FC<IndexProps> = (props) => {
const collectionPermissions = permissions?.collections?.[slug];
const apiURL = `${serverURL}${api}/${slug}/${id}${collection.versions.drafts ? '?draft=true' : ''}`;
const action = `${serverURL}${api}/${slug}${isEditing ? `/${id}` : ''}?locale=${locale}&depth=0&fallback-locale=null&draft=true`;
const action = `${serverURL}${api}/${slug}${isEditing ? `/${id}` : ''}?locale=${locale}&depth=0&fallback-locale=null`;
const hasSavePermission = (isEditing && collectionPermissions?.update?.permission) || (!isEditing && collectionPermissions?.create?.permission);
return (