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

feat: renames revisions to versions

Browse Source
This commit is contained in:
James
2021-12-28 19:41:36 -05:00
parent fdc6aeb47a
commit 3a71afbd37
91 changed files with 603 additions and 494 deletions
Download Patch File Download Diff File Expand all files Collapse all files

40
src/admin/components/Routes.tsx
View File

@@ -9,8 +9,8 @@ import { requests } from '../api';
import Loading from './elements/Loading';
import StayLoggedIn from './modals/StayLoggedIn';
import Unlicensed from './views/Unlicensed';
import Revisions from './views/Revisions';
import Revision from './views/Revision';
import Versions from './views/Versions';
import Version from './views/Version';
const Dashboard = lazy(() => import('./views/Dashboard'));
const ForgotPassword = lazy(() => import('./views/ForgotPassword'));
@@ -204,16 +204,16 @@ const Routes = () => {
/>,
];
if (collection.revisions) {
if (collection.versions) {
routesToReturn.push(
<Route
key={`${collection.slug}-revisions`}
path={`${match.url}/collections/${collection.slug}/:id/revisions`}
key={`${collection.slug}-versions`}
path={`${match.url}/collections/${collection.slug}/:id/versions`}
exact
render={(routeProps) => {
if (permissions?.collections?.[collection.slug]?.readRevisions?.permission) {
if (permissions?.collections?.[collection.slug]?.readVersions?.permission) {
return (
<Revisions
<Versions
{...routeProps}
collection={collection}
/>
@@ -227,13 +227,13 @@ const Routes = () => {
routesToReturn.push(
<Route
key={`${collection.slug}-view-revision`}
path={`${match.url}/collections/${collection.slug}/:id/revisions/:revisionID`}
key={`${collection.slug}-view-version`}
path={`${match.url}/collections/${collection.slug}/:id/versions/:versionID`}
exact
render={(routeProps) => {
if (permissions?.collections?.[collection.slug]?.readRevisions?.permission) {
if (permissions?.collections?.[collection.slug]?.readVersions?.permission) {
return (
<Revision
<Version
{...routeProps}
collection={collection}
/>
@@ -271,16 +271,16 @@ const Routes = () => {
/>,
];
if (global.revisions) {
if (global.versions) {
routesToReturn.push(
<Route
key={`${global.slug}-revisions`}
path={`${match.url}/globals/${global.slug}/revisions`}
key={`${global.slug}-versions`}
path={`${match.url}/globals/${global.slug}/versions`}
exact
render={(routeProps) => {
if (permissions?.globals?.[global.slug]?.readRevisions?.permission) {
if (permissions?.globals?.[global.slug]?.readVersions?.permission) {
return (
<Revisions
<Versions
{...routeProps}
global={global}
/>
@@ -293,13 +293,13 @@ const Routes = () => {
);
routesToReturn.push(
<Route
key={`${global.slug}-view-revision`}
path={`${match.url}/globals/${global.slug}/revisions/:revisionID`}
key={`${global.slug}-view-version`}
path={`${match.url}/globals/${global.slug}/versions/:versionID`}
exact
render={(routeProps) => {
if (permissions?.globals?.[global.slug]?.readRevisions?.permission) {
if (permissions?.globals?.[global.slug]?.readVersions?.permission) {
return (
<Revision
<Version
{...routeProps}
global={global}
/>

2
src/admin/components/elements/RevisionsCount/index.scss → src/admin/components/elements/VersionsCount/index.scss
View File

@@ -1,6 +1,6 @@
@import '../../../scss/styles.scss';
.revisions-count__button {
.versions-count__button {
font-weight: 600;
&:hover {

24
src/admin/components/elements/RevisionsCount/index.tsx → src/admin/components/elements/VersionsCount/index.tsx
View File

@@ -6,14 +6,14 @@ import { Props } from './types';
import './index.scss';
const baseClass = 'revisions-count';
const baseClass = 'versions-count';
const Revisions: React.FC<Props> = ({ collection, global, id, submissionCount }) => {
const Versions: React.FC<Props> = ({ collection, global, id, submissionCount }) => {
const { serverURL, routes: { admin, api } } = useConfig();
let initialParams;
let fetchURL: string;
let revisionsURL: string;
let versionsURL: string;
if (collection) {
initialParams = {
@@ -24,13 +24,13 @@ const Revisions: React.FC<Props> = ({ collection, global, id, submissionCount })
},
};
fetchURL = `${serverURL}${api}/${collection.slug}/revisions`;
revisionsURL = `${admin}/collections/${collection.slug}/${id}/revisions`;
fetchURL = `${serverURL}${api}/${collection.slug}/versions`;
versionsURL = `${admin}/collections/${collection.slug}/${id}/versions`;
}
if (global) {
fetchURL = `${serverURL}${api}/globals/${global.slug}/revisions`;
revisionsURL = `${admin}/globals/${global.slug}/revisions`;
fetchURL = `${serverURL}${api}/globals/${global.slug}/versions`;
versionsURL = `${admin}/globals/${global.slug}/versions`;
}
const [{ data, isLoading }, { setParams }] = usePayloadAPI(fetchURL, {
@@ -58,7 +58,7 @@ const Revisions: React.FC<Props> = ({ collection, global, id, submissionCount })
<React.Fragment>
{data.docs.length === 0 && (
<React.Fragment>
No revisions found
No versions found
</React.Fragment>
)}
{data?.docs?.length > 0 && (
@@ -67,11 +67,11 @@ const Revisions: React.FC<Props> = ({ collection, global, id, submissionCount })
className={`${baseClass}__button`}
buttonStyle="none"
el="link"
to={revisionsURL}
to={versionsURL}
>
{data.totalDocs}
{' '}
revision
version
{data.totalDocs > 1 && 's'}
{' '}
found
@@ -82,10 +82,10 @@ const Revisions: React.FC<Props> = ({ collection, global, id, submissionCount })
)}
{isLoading && (
<React.Fragment>
Loading revisions...
Loading versions...
</React.Fragment>
)}
</div>
);
};
export default Revisions;
export default Versions;

0
src/admin/components/elements/RevisionsCount/types.ts → src/admin/components/elements/VersionsCount/types.ts
View File

10
src/admin/components/views/Global/Default.tsx
View File

@@ -10,7 +10,7 @@ import CopyToClipboard from '../../elements/CopyToClipboard';
import Meta from '../../utilities/Meta';
import fieldTypes from '../../forms/field-types';
import LeaveWithoutSaving from '../../modals/LeaveWithoutSaving';
import RevisionsCount from '../../elements/RevisionsCount';
import VersionsCount from '../../elements/VersionsCount';
import { Props } from './types';
import './index.scss';
@@ -27,7 +27,7 @@ const DefaultGlobalView: React.FC<Props> = (props) => {
const {
fields,
preview,
revisions,
versions,
label,
admin: {
description,
@@ -101,10 +101,10 @@ const DefaultGlobalView: React.FC<Props> = (props) => {
</div>
{data && (
<ul className={`${baseClass}__meta`}>
{revisions && (
{versions && (
<li>
<div className={`${baseClass}__label`}>Revisions</div>
<RevisionsCount
<div className={`${baseClass}__label`}>Versions</div>
<VersionsCount
submissionCount={submissionCount}
global={global}
/>

2
src/admin/components/views/Revision/Compare/index.scss → src/admin/components/views/Version/Compare/index.scss
View File

@@ -1,6 +1,6 @@
@import '../../../../scss/styles.scss';
.compare-revision {
.compare-version {
&__error-loading {
border: 1px solid $color-red;
min-height: base(2);

10
src/admin/components/views/Revision/Compare/index.tsx → src/admin/components/views/Version/Compare/index.tsx
View File

@@ -9,7 +9,7 @@ import { publishedVersionOption } from '../shared';
import './index.scss';
const baseClass = 'compare-revision';
const baseClass = 'compare-version';
const maxResultsPerRequest = 10;
@@ -17,7 +17,7 @@ const baseOptions = [
publishedVersionOption,
];
const CompareRevision: React.FC<Props> = (props) => {
const CompareVersion: React.FC<Props> = (props) => {
const { onChange, value, baseURL, parentID } = props;
const {
@@ -81,12 +81,12 @@ const CompareRevision: React.FC<Props> = (props) => {
return (
<div className={classes}>
<div className={`${baseClass}__label`}>
Compare revision against:
Compare version against:
</div>
{!errorLoading && (
<ReactSelect
isSearchable={false}
placeholder="Select a revision to compare"
placeholder="Select a version to compare"
onChange={onChange}
onMenuScrollToBottom={() => {
getResults({ lastLoadedPage: lastLoadedPage + 1 });
@@ -104,4 +104,4 @@ const CompareRevision: React.FC<Props> = (props) => {
);
};
export default CompareRevision;
export default CompareVersion;

0
src/admin/components/views/Revision/Compare/types.ts → src/admin/components/views/Version/Compare/types.ts
View File

0
src/admin/components/views/Revision/RenderFieldsToDiff/Label/index.scss → src/admin/components/views/Version/RenderFieldsToDiff/Label/index.scss
View File

0
src/admin/components/views/Revision/RenderFieldsToDiff/Label/index.tsx → src/admin/components/views/Version/RenderFieldsToDiff/Label/index.tsx
View File

0
src/admin/components/views/Revision/RenderFieldsToDiff/fields/Iterable/index.scss → src/admin/components/views/Version/RenderFieldsToDiff/fields/Iterable/index.scss
View File

18
src/admin/components/views/Revision/RenderFieldsToDiff/fields/Iterable/index.tsx → src/admin/components/views/Version/RenderFieldsToDiff/fields/Iterable/index.tsx
View File

@@ -10,7 +10,7 @@ import './index.scss';
const baseClass = 'iterable-diff';
const Iterable: React.FC<Props & { field: ArrayField | BlockField }> = ({
revision,
version,
comparison,
permissions,
field,
@@ -18,9 +18,9 @@ const Iterable: React.FC<Props & { field: ArrayField | BlockField }> = ({
locales,
fieldComponents,
}) => {
const revisionRowCount = Array.isArray(revision) ? revision.length : 0;
const versionRowCount = Array.isArray(version) ? version.length : 0;
const comparisonRowCount = Array.isArray(comparison) ? comparison.length : 0;
const maxRows = Math.max(revisionRowCount, comparisonRowCount);
const maxRows = Math.max(versionRowCount, comparisonRowCount);
return (
<div className={baseClass}>
@@ -35,7 +35,7 @@ const Iterable: React.FC<Props & { field: ArrayField | BlockField }> = ({
{maxRows > 0 && (
<React.Fragment>
{Array.from(Array(maxRows).keys()).map((row, i) => {
const revisionRow = revision?.[i] || {};
const versionRow = version?.[i] || {};
const comparisonRow = comparison?.[i] || {};
let subFields: Field[] = [];
@@ -51,19 +51,19 @@ const Iterable: React.FC<Props & { field: ArrayField | BlockField }> = ({
},
];
if (revisionRow?.blockType === comparisonRow?.blockType) {
const matchedBlock = field.blocks.find((block) => block.slug === revisionRow?.blockType) || { fields: [] };
if (versionRow?.blockType === comparisonRow?.blockType) {
const matchedBlock = field.blocks.find((block) => block.slug === versionRow?.blockType) || { fields: [] };
subFields = [
...subFields,
...matchedBlock.fields,
];
} else {
const matchedRevisionBlock = field.blocks.find((block) => block.slug === revisionRow?.blockType) || { fields: [] };
const matchedVersionBlock = field.blocks.find((block) => block.slug === versionRow?.blockType) || { fields: [] };
const matchedComparisonBlock = field.blocks.find((block) => block.slug === comparisonRow?.blockType) || { fields: [] };
subFields = getUniqueListBy<Field>([
...subFields,
...matchedRevisionBlock.fields,
...matchedVersionBlock.fields,
...matchedComparisonBlock.fields,
], 'name');
}
@@ -76,7 +76,7 @@ const Iterable: React.FC<Props & { field: ArrayField | BlockField }> = ({
>
<RenderFieldsToDiff
locales={locales}
revision={revisionRow}
version={versionRow}
comparison={comparisonRow}
fieldPermissions={permissions}
fields={subFields.filter((subField) => !(fieldAffectsData(subField) && subField.name === 'id'))}

0
src/admin/components/views/Revision/RenderFieldsToDiff/fields/Nested/index.scss → src/admin/components/views/Version/RenderFieldsToDiff/fields/Nested/index.scss
View File

4
src/admin/components/views/Revision/RenderFieldsToDiff/fields/Nested/index.tsx → src/admin/components/views/Version/RenderFieldsToDiff/fields/Nested/index.tsx
View File

@@ -9,7 +9,7 @@ import './index.scss';
const baseClass = 'nested-diff';
const Nested: React.FC<Props & { field: FieldWithSubFields}> = ({
revision,
version,
comparison,
permissions,
field,
@@ -34,7 +34,7 @@ const Nested: React.FC<Props & { field: FieldWithSubFields}> = ({
>
<RenderFieldsToDiff
locales={locales}
revision={revision}
version={version}
comparison={comparison}
fieldPermissions={permissions}
fields={field.fields}

0
src/admin/components/views/Revision/RenderFieldsToDiff/fields/Relationship/index.scss → src/admin/components/views/Version/RenderFieldsToDiff/fields/Relationship/index.scss
View File

12
src/admin/components/views/Revision/RenderFieldsToDiff/fields/Relationship/index.tsx → src/admin/components/views/Version/RenderFieldsToDiff/fields/Relationship/index.tsx
View File

@@ -57,22 +57,22 @@ const generateLabelFromValue = (
return valueToReturn;
};
const Relationship: React.FC<Props & { field: RelationshipField}> = ({ field, revision, comparison }) => {
const Relationship: React.FC<Props & { field: RelationshipField}> = ({ field, version, comparison }) => {
const { collections } = useConfig();
const locale = useLocale();
let placeholder = '';
if (revision === comparison) placeholder = '[no value]';
if (version === comparison) placeholder = '[no value]';
let revisionToRender = revision;
let versionToRender = version;
let comparisonToRender = comparison;
if (field.hasMany) {
if (Array.isArray(revision)) revisionToRender = revision.map((val) => generateLabelFromValue(collections, field, locale, val)).join(', ');
if (Array.isArray(version)) versionToRender = version.map((val) => generateLabelFromValue(collections, field, locale, val)).join(', ');
if (Array.isArray(comparison)) comparisonToRender = comparison.map((val) => generateLabelFromValue(collections, field, locale, val)).join(', ');
} else {
revisionToRender = generateLabelFromValue(collections, field, locale, revision);
versionToRender = generateLabelFromValue(collections, field, locale, version);
comparisonToRender = generateLabelFromValue(collections, field, locale, comparison);
}
@@ -85,7 +85,7 @@ const Relationship: React.FC<Props & { field: RelationshipField}> = ({ field, re
{field.label}
</Label>
<ReactDiffViewer
oldValue={typeof revisionToRender !== 'undefined' ? String(revisionToRender) : placeholder}
oldValue={typeof versionToRender !== 'undefined' ? String(versionToRender) : placeholder}
newValue={typeof comparisonToRender !== 'undefined' ? String(comparisonToRender) : placeholder}
splitView
hideLineNumbers

0
src/admin/components/views/Revision/RenderFieldsToDiff/fields/Text/index.scss → src/admin/components/views/Version/RenderFieldsToDiff/fields/Text/index.scss
View File

10
src/admin/components/views/Revision/RenderFieldsToDiff/fields/Text/index.tsx → src/admin/components/views/Version/RenderFieldsToDiff/fields/Text/index.tsx
View File

@@ -7,16 +7,16 @@ import './index.scss';
const baseClass = 'text-diff';
const Text: React.FC<Props> = ({ field, locale, revision, comparison, isRichText = false }) => {
const Text: React.FC<Props> = ({ field, locale, version, comparison, isRichText = false }) => {
let placeholder = '';
if (revision === comparison) placeholder = '[no value]';
if (version === comparison) placeholder = '[no value]';
let revisionToRender = revision;
let versionToRender = version;
let comparisonToRender = comparison;
if (isRichText) {
if (typeof revision === 'object') revisionToRender = JSON.stringify(revision, null, 2);
if (typeof version === 'object') versionToRender = JSON.stringify(version, null, 2);
if (typeof comparison === 'object') comparisonToRender = JSON.stringify(comparison, null, 2);
}
@@ -30,7 +30,7 @@ const Text: React.FC<Props> = ({ field, locale, revision, comparison, isRichText
{field.label}
</Label>
<ReactDiffViewer
oldValue={typeof revisionToRender !== 'undefined' ? String(revisionToRender) : placeholder}
oldValue={typeof versionToRender !== 'undefined' ? String(versionToRender) : placeholder}
newValue={typeof comparisonToRender !== 'undefined' ? String(comparisonToRender) : placeholder}
splitView
hideLineNumbers

0
src/admin/components/views/Revision/RenderFieldsToDiff/fields/Text/richTextToHTML.ts → src/admin/components/views/Version/RenderFieldsToDiff/fields/Text/richTextToHTML.ts
View File

0
src/admin/components/views/Revision/RenderFieldsToDiff/fields/Text/stringifyRichText.ts → src/admin/components/views/Version/RenderFieldsToDiff/fields/Text/stringifyRichText.ts
View File

0
src/admin/components/views/Revision/RenderFieldsToDiff/fields/index.tsx → src/admin/components/views/Version/RenderFieldsToDiff/fields/index.tsx
View File

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

@@ -5,7 +5,7 @@ export type FieldComponents = Record<string, React.FC<Props>>
export type Props = {
fieldComponents: FieldComponents
revision: any
version: any
comparison: any
field: any
permissions?: Record<string, FieldPermissions>

0
src/admin/components/views/Revision/RenderFieldsToDiff/index.scss → src/admin/components/views/Version/RenderFieldsToDiff/index.scss
View File

12
src/admin/components/views/Revision/RenderFieldsToDiff/index.tsx → src/admin/components/views/Version/RenderFieldsToDiff/index.tsx
View File

@@ -11,7 +11,7 @@ const RenderFieldsToDiff: React.FC<Props> = ({
fields,
fieldComponents,
fieldPermissions,
revision,
version,
comparison,
locales,
}) => (
@@ -23,7 +23,7 @@ const RenderFieldsToDiff: React.FC<Props> = ({
if (Component) {
if (fieldAffectsData(field)) {
const revisionValue = revision[field.name];
const versionValue = version?.[field.name];
const comparisonValue = comparison?.[field.name];
const hasPermission = fieldPermissions?.[field.name]?.read?.permission;
const subFieldPermissions = fieldPermissions?.[field.name]?.fields;
@@ -37,7 +37,7 @@ const RenderFieldsToDiff: React.FC<Props> = ({
key={i}
>
{locales.map((locale) => {
const revisionLocaleValue = revisionValue?.[locale];
const versionLocaleValue = versionValue?.[locale];
const comparisonLocaleValue = comparisonValue?.[locale];
return (
<div
@@ -50,7 +50,7 @@ const RenderFieldsToDiff: React.FC<Props> = ({
locales={locales}
field={field}
fieldComponents={fieldComponents}
revision={revisionLocaleValue}
version={versionLocaleValue}
comparison={comparisonLocaleValue}
permissions={subFieldPermissions}
isRichText={isRichText}
@@ -72,7 +72,7 @@ const RenderFieldsToDiff: React.FC<Props> = ({
locales={locales}
field={field}
fieldComponents={fieldComponents}
revision={revisionValue}
version={versionValue}
comparison={comparisonValue}
permissions={subFieldPermissions}
isRichText={isRichText}
@@ -90,7 +90,7 @@ const RenderFieldsToDiff: React.FC<Props> = ({
disableGutter
field={field}
fieldComponents={fieldComponents}
revision={revision}
version={version}
comparison={comparison}
permissions={fieldPermissions}
/>

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

@@ -6,7 +6,7 @@ export type Props = {
fields: Field[]
fieldComponents: FieldComponents,
fieldPermissions: Record<string, FieldPermissions>
revision: Record<string, any>
version: Record<string, any>
comparison: Record<string, any>
locales: string[]
}

2
src/admin/components/views/Revision/Restore/index.scss → src/admin/components/views/Version/Restore/index.scss
View File

@@ -1,6 +1,6 @@
@import '../../../../scss/styles.scss';
.restore-revision {
.restore-version {
cursor: pointer;
&__modal {

20
src/admin/components/views/Revision/Restore/index.tsx → src/admin/components/views/Version/Restore/index.tsx
View File

@@ -9,10 +9,10 @@ import { requests } from '../../../../api';
import './index.scss';
const baseClass = 'restore-revision';
const modalSlug = 'restore-revision';
const baseClass = 'restore-version';
const modalSlug = 'restore-version';
const Restore: React.FC<Props> = ({ collection, global, className, revisionID, originalDocID, revisionDate }) => {
const Restore: React.FC<Props> = ({ collection, global, className, versionID, originalDocID, versionDate }) => {
const { serverURL, routes: { api, admin } } = useConfig();
const history = useHistory();
const { toggle } = useModal();
@@ -23,15 +23,15 @@ const Restore: React.FC<Props> = ({ collection, global, className, revisionID, o
let restoreMessage: string;
if (collection) {
fetchURL = `${fetchURL}/${collection.slug}/revisions/${revisionID}`;
fetchURL = `${fetchURL}/${collection.slug}/versions/${versionID}`;
redirectURL = `${admin}/collections/${collection.slug}/${originalDocID}`;
restoreMessage = `You are about to restore this ${collection.labels.singular} document to the state that it was in on ${revisionDate}.`;
restoreMessage = `You are about to restore this ${collection.labels.singular} document to the state that it was in on ${versionDate}.`;
}
if (global) {
fetchURL = `${fetchURL}/globals/${global.slug}/revisions/${revisionID}`;
fetchURL = `${fetchURL}/globals/${global.slug}/versions/${versionID}`;
redirectURL = `${admin}/globals/${global.slug}`;
restoreMessage = `You are about to restore the global ${global.label} to the state that it was in on ${revisionDate}.`;
restoreMessage = `You are about to restore the global ${global.label} to the state that it was in on ${versionDate}.`;
}
const handleRestore = useCallback(async () => {
@@ -44,7 +44,7 @@ const Restore: React.FC<Props> = ({ collection, global, className, revisionID, o
toast.success(json.message);
history.push(redirectURL);
} else {
toast.error('There was a problem while restoring this revision.');
toast.error('There was a problem while restoring this version.');
}
}, [history, fetchURL, redirectURL]);
@@ -54,14 +54,14 @@ const Restore: React.FC<Props> = ({ collection, global, className, revisionID, o
onClick={() => toggle(modalSlug)}
className={[baseClass, className].filter(Boolean).join(' ')}
>
Restore this revision
Restore this version
</Pill>
<Modal
slug={modalSlug}
className={`${baseClass}__modal`}
>
<MinimalTemplate>
<h1>Confirm revision restoration</h1>
<h1>Confirm version restoration</h1>
<p>{restoreMessage}</p>
<Button
buttonStyle="secondary"

4
src/admin/components/views/Revision/Restore/types.ts → src/admin/components/views/Version/Restore/types.ts
View File

@@ -5,7 +5,7 @@ export type Props = {
collection?: SanitizedCollectionConfig
global?: SanitizedGlobalConfig
className?: string
revisionID: string
versionID: string
originalDocID: string
revisionDate: string
versionDate: string
}

2
src/admin/components/views/Revision/SelectLocales/index.scss → src/admin/components/views/Version/SelectLocales/index.scss
View File

@@ -1,6 +1,6 @@
@import '../../../../scss/styles.scss';
.select-revision-locales {
.select-version-locales {
flex-grow: 1;
&__label {

2
src/admin/components/views/Revision/SelectLocales/index.tsx → src/admin/components/views/Version/SelectLocales/index.tsx
View File

@@ -4,7 +4,7 @@ import { Props } from './types';
import './index.scss';
const baseClass = 'select-revision-locales';
const baseClass = 'select-version-locales';
const SelectLocales: React.FC<Props> = ({ onChange, value, options }) => (
<div className={baseClass}>

0
src/admin/components/views/Revision/SelectLocales/types.ts → src/admin/components/views/Version/SelectLocales/types.ts
View File

52
src/admin/components/views/Revision/Revision.tsx → src/admin/components/views/Version/Version.tsx
View File

@@ -9,7 +9,7 @@ import { useStepNav } from '../../elements/StepNav';
import { StepNavItem } from '../../elements/StepNav/types';
import Meta from '../../utilities/Meta';
import { LocaleOption, CompareOption, Props } from './types';
import CompareRevision from './Compare';
import CompareVersion from './Compare';
import { publishedVersionOption } from './shared';
import Restore from './Restore';
import SelectLocales from './SelectLocales';
@@ -21,19 +21,19 @@ import { FieldPermissions } from '../../../../auth';
import './index.scss';
const baseClass = 'view-revision';
const baseClass = 'view-version';
const RevisionView: React.FC<Props> = ({ collection, global }) => {
const VersionView: React.FC<Props> = ({ collection, global }) => {
const { serverURL, routes: { admin, api }, admin: { dateFormat }, localization } = useConfig();
const { setStepNav } = useStepNav();
const { params: { id, revisionID } } = useRouteMatch<{ id?: string, revisionID: string }>();
const { params: { id, versionID } } = useRouteMatch<{ id?: string, versionID: string }>();
const [compareValue, setCompareValue] = useState<CompareOption>(publishedVersionOption);
const [localeOptions] = useState<LocaleOption[]>(() => (localization?.locales ? localization.locales.map((locale) => ({ label: locale, value: locale })) : []));
const [locales, setLocales] = useState<LocaleOption[]>(localeOptions);
const { permissions } = useAuth();
let originalDocFetchURL: string;
let revisionFetchURL: string;
let versionFetchURL: string;
let entityLabel: string;
let fields: Field[];
let fieldPermissions: Record<string, FieldPermissions>;
@@ -44,8 +44,8 @@ const RevisionView: React.FC<Props> = ({ collection, global }) => {
if (collection) {
({ slug } = collection);
originalDocFetchURL = `${serverURL}${api}/${slug}/${id}`;
revisionFetchURL = `${serverURL}${api}/${slug}/revisions/${revisionID}`;
compareBaseURL = `${serverURL}${api}/${slug}/revisions`;
versionFetchURL = `${serverURL}${api}/${slug}/versions/${versionID}`;
compareBaseURL = `${serverURL}${api}/${slug}/versions`;
entityLabel = collection.labels.singular;
parentID = id;
fields = collection.fields;
@@ -55,8 +55,8 @@ const RevisionView: React.FC<Props> = ({ collection, global }) => {
if (global) {
({ slug } = global);
originalDocFetchURL = `${serverURL}${api}/globals/${slug}`;
revisionFetchURL = `${serverURL}${api}/globals/${slug}/revisions/${revisionID}`;
compareBaseURL = `${serverURL}${api}/globals/${slug}/revisions`;
versionFetchURL = `${serverURL}${api}/globals/${slug}/versions/${versionID}`;
compareBaseURL = `${serverURL}${api}/globals/${slug}/versions`;
entityLabel = global.label;
fields = global.fields;
fieldPermissions = permissions.globals[global.slug].fields;
@@ -65,7 +65,7 @@ const RevisionView: React.FC<Props> = ({ collection, global }) => {
const useAsTitle = collection?.admin?.useAsTitle || 'id';
const compareFetchURL = compareValue?.value === 'published' ? originalDocFetchURL : `${compareBaseURL}/${compareValue.value}`;
const [{ data: doc, isLoading }] = usePayloadAPI(revisionFetchURL, { initialParams: { locale: '*', depth: 1 } });
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 } });
@@ -83,8 +83,8 @@ const RevisionView: React.FC<Props> = ({ collection, global }) => {
url: `${admin}/collections/${collection.slug}/${id}`,
},
{
label: 'Revisions',
url: `${admin}/collections/${collection.slug}/${id}/revisions`,
label: 'Versions',
url: `${admin}/collections/${collection.slug}/${id}/versions`,
},
{
label: doc?.createdAt ? format(new Date(doc.createdAt), dateFormat) : '',
@@ -99,8 +99,8 @@ const RevisionView: React.FC<Props> = ({ collection, global }) => {
label: global.label,
},
{
label: 'Revisions',
url: `${admin}/globals/${global.slug}/revisions`,
label: 'Versions',
url: `${admin}/globals/${global.slug}/versions`,
},
{
label: doc?.createdAt ? format(new Date(doc.createdAt), dateFormat) : '',
@@ -116,13 +116,13 @@ const RevisionView: React.FC<Props> = ({ collection, global }) => {
const formattedCreatedAt = doc?.createdAt ? format(new Date(doc.createdAt), dateFormat) : '';
if (collection) {
metaTitle = `Revision - ${formattedCreatedAt} - ${doc[useAsTitle]} - ${entityLabel}`;
metaDesc = `Viewing revision for the ${entityLabel} ${doc[useAsTitle]}`;
metaTitle = `Version - ${formattedCreatedAt} - ${doc[useAsTitle]} - ${entityLabel}`;
metaDesc = `Viewing version for the ${entityLabel} ${doc[useAsTitle]}`;
}
if (global) {
metaTitle = `Revision - ${formattedCreatedAt} - ${entityLabel}`;
metaDesc = `Viewing revision for the global ${entityLabel}`;
metaTitle = `Version - ${formattedCreatedAt} - ${entityLabel}`;
metaDesc = `Viewing version for the global ${entityLabel}`;
}
return (
@@ -133,7 +133,7 @@ const RevisionView: React.FC<Props> = ({ collection, global }) => {
/>
<Eyebrow />
<div className={`${baseClass}__wrap`}>
<div className={`${baseClass}__intro`}>Revision created on:</div>
<div className={`${baseClass}__intro`}>Version created on:</div>
<header className={`${baseClass}__header`}>
<h2>
{formattedCreatedAt}
@@ -143,8 +143,8 @@ const RevisionView: React.FC<Props> = ({ collection, global }) => {
collection={collection}
global={global}
originalDocID={id}
revisionID={revisionID}
revisionDate={formattedCreatedAt}
versionID={versionID}
versionDate={formattedCreatedAt}
/>
</header>
<div className={`${baseClass}__controls`}>
@@ -155,7 +155,7 @@ const RevisionView: React.FC<Props> = ({ collection, global }) => {
value={locales}
/>
)}
<CompareRevision
<CompareVersion
baseURL={compareBaseURL}
parentID={parentID}
value={compareValue}
@@ -165,14 +165,14 @@ const RevisionView: React.FC<Props> = ({ collection, global }) => {
{isLoading && (
<Loading />
)}
{doc?.revision && (
{doc?.version && (
<RenderFieldsToDiff
locales={locales.map((locale) => locale.value)}
fields={fields}
fieldComponents={fieldComponents}
fieldPermissions={fieldPermissions}
revision={doc?.revision}
comparison={compareValue?.value === 'published' ? compareDoc : compareDoc?.revision}
version={doc?.version}
comparison={compareValue?.value === 'published' ? compareDoc : compareDoc?.version}
/>
)}
</div>
@@ -180,4 +180,4 @@ const RevisionView: React.FC<Props> = ({ collection, global }) => {
);
};
export default RevisionView;
export default VersionView;

2
src/admin/components/views/Revision/index.scss → src/admin/components/views/Version/index.scss
View File

@@ -1,6 +1,6 @@
@import '../../../scss/styles.scss';
.view-revision {
.view-version {
width: 100%;
margin-bottom: base(2);

8
src/admin/components/views/Revision/index.tsx → src/admin/components/views/Version/index.tsx
View File

@@ -2,12 +2,12 @@ import React, { Suspense, lazy } from 'react';
import Loading from '../../elements/Loading';
import { Props } from './types';
const RevisionView = lazy(() => import('./Revision'));
const VersionView = lazy(() => import('./Version'));
const Revision: React.FC<Props> = (props) => (
const Version: React.FC<Props> = (props) => (
<Suspense fallback={<Loading />}>
<RevisionView {...props} />
<VersionView {...props} />
</Suspense>
);
export default Revision;
export default Version;

0
src/admin/components/views/Revision/shared.ts → src/admin/components/views/Version/shared.ts
View File

0
src/admin/components/views/Revision/types.ts → src/admin/components/views/Version/types.ts
View File

6
src/admin/components/views/Revisions/columns.tsx → src/admin/components/views/Versions/columns.tsx
View File

@@ -20,8 +20,8 @@ const CreatedAtCell: React.FC<CreatedAtCellProps> = ({ collection, global, id, d
let to: string;
if (collection) to = `${admin}/collections/${collection.slug}/${docID}/revisions/${id}`;
if (global) to = `${admin}/globals/${global.slug}/revisions/${id}`;
if (collection) to = `${admin}/collections/${collection.slug}/${docID}/versions/${id}`;
if (global) to = `${admin}/globals/${global.slug}/versions/${id}`;
return (
<Link to={to}>
@@ -61,7 +61,7 @@ export const getColumns = (collection: SanitizedCollectionConfig, global: Saniti
components: {
Heading: (
<SortColumn
label="Revision ID"
label="Version ID"
disable
name="id"
/>

2
src/admin/components/views/Revisions/index.scss → src/admin/components/views/Versions/index.scss
View File

@@ -1,6 +1,6 @@
@import '../../../scss/styles.scss';
.revisions {
.versions {
width: 100%;
margin-bottom: base(2);

54
src/admin/components/views/Revisions/index.tsx → src/admin/components/views/Versions/index.tsx
View File

@@ -17,9 +17,9 @@ import { useSearchParams } from '../../utilities/SearchParams';
import './index.scss';
const baseClass = 'revisions';
const baseClass = 'versions';
const Revisions: React.FC<Props> = ({ collection, global }) => {
const Versions: React.FC<Props> = ({ collection, global }) => {
const { serverURL, routes: { admin, api } } = useConfig();
const { setStepNav } = useStepNav();
const { params: { id } } = useRouteMatch<{ id: string }>();
@@ -45,7 +45,7 @@ const Revisions: React.FC<Props> = ({ collection, global }) => {
const useAsTitle = collection?.admin?.useAsTitle || 'id';
const [{ data: doc }] = usePayloadAPI(docURL);
const [{ data: revisionsData, isLoading: isLoadingRevisions }, { setParams }] = usePayloadAPI(fetchURL);
const [{ data: versionsData, isLoading: isLoadingVersions }, { setParams }] = usePayloadAPI(fetchURL);
useEffect(() => {
let nav: StepNavItem[] = [];
@@ -61,7 +61,7 @@ const Revisions: React.FC<Props> = ({ collection, global }) => {
url: `${admin}/collections/${collection.slug}/${id}`,
},
{
label: 'Revisions',
label: 'Versions',
},
];
}
@@ -73,7 +73,7 @@ const Revisions: React.FC<Props> = ({ collection, global }) => {
label: global.label,
},
{
label: 'Revisions',
label: 'Versions',
},
];
}
@@ -96,7 +96,7 @@ const Revisions: React.FC<Props> = ({ collection, global }) => {
let fetchURLToSet: string;
if (collection) {
fetchURLToSet = `${serverURL}${api}/${collection.slug}/revisions`;
fetchURLToSet = `${serverURL}${api}/${collection.slug}/versions`;
params.where = {
parent: {
equals: id,
@@ -105,7 +105,7 @@ const Revisions: React.FC<Props> = ({ collection, global }) => {
}
if (global) {
fetchURLToSet = `${serverURL}${api}/globals/${global.slug}/revisions`;
fetchURLToSet = `${serverURL}${api}/globals/${global.slug}/versions`;
}
// Performance enhancement
@@ -123,14 +123,14 @@ const Revisions: React.FC<Props> = ({ collection, global }) => {
let metaTitle: string;
if (collection) {
metaTitle = `Revisions - ${doc[useAsTitle]} - ${entityLabel}`;
metaDesc = `Viewing revisions for the ${entityLabel} ${doc[useAsTitle]}`;
metaTitle = `Versions - ${doc[useAsTitle]} - ${entityLabel}`;
metaDesc = `Viewing versions for the ${entityLabel} ${doc[useAsTitle]}`;
heading = doc?.[useAsTitle];
}
if (global) {
metaTitle = `Revisions - ${entityLabel}`;
metaDesc = `Viewing revisions for the global ${entityLabel}`;
metaTitle = `Versions - ${entityLabel}`;
metaDesc = `Viewing versions for the global ${entityLabel}`;
heading = entityLabel;
useIDLabel = false;
}
@@ -144,7 +144,7 @@ const Revisions: React.FC<Props> = ({ collection, global }) => {
<Eyebrow />
<div className={`${baseClass}__wrap`}>
<header className={`${baseClass}__header`}>
<div className={`${baseClass}__intro`}>Showing revisions for:</div>
<div className={`${baseClass}__intro`}>Showing versions for:</div>
{useIDLabel && (
<IDLabel id={doc?.id} />
)}
@@ -154,36 +154,36 @@ const Revisions: React.FC<Props> = ({ collection, global }) => {
</h1>
)}
</header>
{isLoadingRevisions && (
{isLoadingVersions && (
<Loading />
)}
{revisionsData?.docs && (
{versionsData?.docs && (
<React.Fragment>
<Table
data={revisionsData?.docs}
data={versionsData?.docs}
columns={tableColumns}
/>
<div className={`${baseClass}__page-controls`}>
<Paginator
limit={revisionsData.limit}
totalPages={revisionsData.totalPages}
page={revisionsData.page}
hasPrevPage={revisionsData.hasPrevPage}
hasNextPage={revisionsData.hasNextPage}
prevPage={revisionsData.prevPage}
nextPage={revisionsData.nextPage}
limit={versionsData.limit}
totalPages={versionsData.totalPages}
page={versionsData.page}
hasPrevPage={versionsData.hasPrevPage}
hasNextPage={versionsData.hasNextPage}
prevPage={versionsData.prevPage}
nextPage={versionsData.nextPage}
numberOfNeighbors={1}
/>
{revisionsData?.totalDocs > 0 && (
{versionsData?.totalDocs > 0 && (
<React.Fragment>
<div className={`${baseClass}__page-info`}>
{(revisionsData.page * revisionsData.limit) - (revisionsData.limit - 1)}
{(versionsData.page * versionsData.limit) - (versionsData.limit - 1)}
-
{revisionsData.totalPages > 1 && revisionsData.totalPages !== revisionsData.page ? (revisionsData.limit * revisionsData.page) : revisionsData.totalDocs}
{versionsData.totalPages > 1 && versionsData.totalPages !== versionsData.page ? (versionsData.limit * versionsData.page) : versionsData.totalDocs}
{' '}
of
{' '}
{revisionsData.totalDocs}
{versionsData.totalDocs}
</div>
<PerPage
limits={collection?.admin?.pagination?.limits}
@@ -199,4 +199,4 @@ const Revisions: React.FC<Props> = ({ collection, global }) => {
);
};
export default Revisions;
export default Versions;

0
src/admin/components/views/Revisions/types.ts → src/admin/components/views/Versions/types.ts
View File

32
src/admin/components/views/collections/Edit/Autosave/index.tsx Normal file
View File

@@ -0,0 +1,32 @@
import React, { useEffect, useState } from 'react';
import { SanitizedCollectionConfig } from '../../../../../../collections/config/types';
import { useWatchForm, useFormModified } from '../../../../forms/Form/context';
const Autosave: React.FC<{ collection: SanitizedCollectionConfig}> = ({ collection }) => {
const { submit, fields } = useWatchForm();
const modified = useFormModified();
const [lastSaved, setLastSaved] = useState(() => {
const date = new Date();
date.setSeconds(date.getSeconds() - 2);
return date.getTime();
});
const interval = collection.versions.drafts && collection.versions.drafts.autosave ? collection.versions.drafts.autosave.interval : 5;
useEffect(() => {
const lastSavedDate = new Date(lastSaved);
lastSavedDate.setSeconds(lastSavedDate.getSeconds() + interval);
const timeToSaveAgain = lastSavedDate.getTime();
if (Date.now() >= timeToSaveAgain && modified) {
setTimeout(() => {
console.log('Autosaving');
}, 1000);
setLastSaved(new Date().getTime());
}
}, [modified, fields, interval, lastSaved]);
return null;
};
export default Autosave;

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

@@ -16,9 +16,10 @@ import fieldTypes from '../../../forms/field-types';
import RenderTitle from '../../../elements/RenderTitle';
import LeaveWithoutSaving from '../../../modals/LeaveWithoutSaving';
import Auth from './Auth';
import RevisionsCount from '../../../elements/RevisionsCount';
import VersionsCount from '../../../elements/VersionsCount';
import Upload from './Upload';
import { Props } from './types';
import Autosave from './Autosave';
import './index.scss';
@@ -51,7 +52,7 @@ const DefaultEditView: React.FC<Props> = (props) => {
preview,
hideAPIURL,
},
revisions,
versions,
timestamps,
auth,
upload,
@@ -158,6 +159,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}
/>
)} */}
<RenderFields
operation={isEditing ? 'update' : 'create'}
readOnly={!hasSavePermission}
@@ -189,10 +198,10 @@ const DefaultEditView: React.FC<Props> = (props) => {
<div className={`${baseClass}__label`}>ID</div>
<div>{id}</div>
</li>
{revisions && (
{versions && (
<li>
<div className={`${baseClass}__label`}>Revisions</div>
<RevisionsCount
<div className={`${baseClass}__label`}>Versions</div>
<VersionsCount
submissionCount={submissionCount}
collection={collection}
id={id}
@@ -223,6 +232,9 @@ const DefaultEditView: React.FC<Props> = (props) => {
</div>
</div>
</div>
{(collection.versions?.drafts && collection.versions.drafts.autosave && hasSavePermission) && (
<Autosave collection={collection} />
)}
</Form>
</div>
);

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

@@ -1,4 +1,4 @@
import React, { useState, useEffect } from 'react';
import React, { useState, useEffect, useCallback } from 'react';
import { Redirect, useRouteMatch, useHistory, useLocation } from 'react-router-dom';
import { useConfig, useAuth } from '@payloadcms/config-provider';
import { useStepNav } from '../../../elements/StepNav';
@@ -43,7 +43,7 @@ const EditView: React.FC<IndexProps> = (props) => {
const [initialState, setInitialState] = useState({});
const { permissions } = useAuth();
const onSave = async (json) => {
const onSave = useCallback(async (json: any, version = false) => {
if (!isEditing) {
history.push(`${admin}/collections/${collection.slug}/${json?.doc?.id}`);
} else {
@@ -57,7 +57,7 @@ const EditView: React.FC<IndexProps> = (props) => {
},
});
}
};
}, [admin, collection, fields, history, isEditing]);
const [{ data, isLoading, isError }] = usePayloadAPI(
(isEditing ? `${serverURL}${api}/${slug}/${id}` : null),