feat: scaffold of individual Revision view

src/admin/components/Routes.tsx

@@ -10,6 +10,7 @@ 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';
 
 const Dashboard = lazy(() => import('./views/Dashboard'));
 const ForgotPassword = lazy(() => import('./views/ForgotPassword'));
@@ -202,7 +203,12 @@ const Routes = () => {
                                       exact
                                       render={(routeProps) => {
                                         if (permissions?.collections?.[collection.slug]?.readRevisions?.permission) {
-                                          return null;
+                                          return (
+                                            <Revision
+                                              {...routeProps}
+                                              collection={collection}
+                                            />
+                                          );
                                         }
 
                                         return <Unauthorized />;
@@ -263,7 +269,12 @@ const Routes = () => {
                                       exact
                                       render={(routeProps) => {
                                         if (permissions?.globals?.[global.slug]?.readRevisions?.permission) {
-                                          return null;
+                                          return (
+                                            <Revision
+                                              {...routeProps}
+                                              global={global}
+                                            />
+                                          );
                                         }
 
                                         return <Unauthorized />;

src/admin/components/elements/IDLabel/index.tsx

@@ -4,9 +4,10 @@ import './index.scss';
 
 const baseClass = 'id-label';
 
-const IDLabel: React.FC<{ id: string }> = ({ id }) => (
+const IDLabel: React.FC<{ id: string, prefix?: string }> = ({ id, prefix = 'ID:' }) => (
   <div className={baseClass}>
-    ID:&nbsp;&nbsp;
+    {prefix}
+    &nbsp;&nbsp;
     {id}
   </div>
 );

src/admin/components/elements/RevisionsCount/index.tsx

@@ -9,7 +9,7 @@ import './index.scss';
 const baseClass = 'revisions-count';
 
 const Revisions: React.FC<Props> = ({ collection, global, id, submissionCount }) => {
-  const { serverURL, routes: { admin } } = useConfig();
+  const { serverURL, routes: { admin, api } } = useConfig();
 
   let initialParams;
   let fetchURL: string;
@@ -24,12 +24,12 @@ const Revisions: React.FC<Props> = ({ collection, global, id, submissionCount })
       },
     };
 
-    fetchURL = `${serverURL}/api/${collection.slug}/revisions`;
+    fetchURL = `${serverURL}${api}/${collection.slug}/revisions`;
     revisionsURL = `${admin}/collections/${collection.slug}/${id}/revisions`;
   }
 
   if (global) {
-    fetchURL = `${serverURL}/api/globals/${global.slug}/revisions`;
+    fetchURL = `${serverURL}${api}/globals/${global.slug}/revisions`;
     revisionsURL = `${admin}/globals/${global.slug}/revisions`;
   }
 

src/admin/components/views/Revision/index.scss

@@ -0,0 +1,32 @@
+@import '../../../scss/styles.scss';
+
+.view-revision {
+  width: 100%;
+  margin-bottom: base(2);
+
+  &__wrap {
+    padding: base(3);
+    margin-right: base(2);
+    background: white;
+  }
+
+  &__header {
+    margin-bottom: $baseline;
+  }
+
+  &__intro {
+    margin-bottom: base(.5);
+  }
+
+  @include mid-break {
+    &__wrap {
+      padding: $baseline 0;
+      margin-right: 0;
+    }
+
+    &__header {
+      padding-left: $baseline;
+      padding-right: $baseline;
+    }
+  }
+}

src/admin/components/views/Revision/index.tsx

@@ -0,0 +1,127 @@
+import { useConfig } from '@payloadcms/config-provider';
+import React, { useEffect } from 'react';
+import { useRouteMatch } from 'react-router-dom';
+import format from 'date-fns/format';
+import usePayloadAPI from '../../../hooks/usePayloadAPI';
+import Eyebrow from '../../elements/Eyebrow';
+import Loading from '../../elements/Loading';
+import { useStepNav } from '../../elements/StepNav';
+import { StepNavItem } from '../../elements/StepNav/types';
+import Meta from '../../utilities/Meta';
+import { Props } from './types';
+import IDLabel from '../../elements/IDLabel';
+
+import './index.scss';
+
+const baseClass = 'view-revision';
+
+const ViewRevision: React.FC<Props> = ({ collection, global }) => {
+  const { serverURL, routes: { admin, api }, admin: { dateFormat } } = useConfig();
+  const { setStepNav } = useStepNav();
+  const { params: { id, revisionID } } = useRouteMatch<{ id?: string, revisionID: string }>();
+
+  let originalDocFetchURL: string;
+  let docFetchURL: string;
+  let entityLabel: string;
+  let slug: string;
+
+  if (collection) {
+    ({ slug } = collection);
+    originalDocFetchURL = `${serverURL}${api}/${slug}/${id}`;
+    docFetchURL = `${serverURL}${api}/${slug}/revisions/${revisionID}`;
+    entityLabel = collection.labels.singular;
+  }
+
+  if (global) {
+    ({ slug } = global);
+    docFetchURL = `${serverURL}${api}/globals/${slug}/revisions/${revisionID}`;
+    entityLabel = global.label;
+  }
+
+  const useAsTitle = collection?.admin?.useAsTitle || 'id';
+  const [{ data: doc, isLoading }] = usePayloadAPI(docFetchURL);
+  const [{ data: originalDoc }] = usePayloadAPI(originalDocFetchURL);
+
+  useEffect(() => {
+    let nav: StepNavItem[] = [];
+
+    if (collection) {
+      nav = [
+        {
+          url: `${admin}/collections/${collection.slug}`,
+          label: collection.labels.plural,
+        },
+        {
+          label: originalDoc ? originalDoc[useAsTitle] : '',
+          url: `${admin}/collections/${collection.slug}/${id}`,
+        },
+        {
+          label: 'Revisions',
+          url: `${admin}/collections/${collection.slug}/${id}/revisions`,
+        },
+        {
+          label: doc?.createdAt ? format(new Date(doc.createdAt), dateFormat) : '',
+        },
+      ];
+    }
+
+    if (global) {
+      nav = [
+        {
+          url: `${admin}/globals/${global.slug}`,
+          label: global.label,
+        },
+        {
+          label: 'Revisions',
+          url: `${admin}/globals/${global.slug}/revisions`,
+        },
+        {
+          label: doc?.createdAt ? format(new Date(doc.createdAt), dateFormat) : '',
+        },
+      ];
+    }
+
+    setStepNav(nav);
+  }, [setStepNav, collection, global, useAsTitle, dateFormat, doc, originalDoc, admin, id]);
+
+  let metaTitle: string;
+  let metaDesc: string;
+
+  if (collection) {
+    metaTitle = `Revision - ${doc?.createdAt ? format(new Date(doc.createdAt), dateFormat) : ''} - ${doc[useAsTitle]} - ${entityLabel}`;
+    metaDesc = `Viewing revision for the ${entityLabel} ${doc[useAsTitle]}`;
+  }
+
+  if (global) {
+    metaTitle = `Revision - ${doc?.createdAt ? format(new Date(doc.createdAt), dateFormat) : ''} - ${entityLabel}`;
+    metaDesc = `Viewing revision for the global ${entityLabel}`;
+  }
+
+  return (
+    <div className={baseClass}>
+      <Meta
+        title={metaTitle}
+        description={metaDesc}
+      />
+      <Eyebrow />
+      <div className={`${baseClass}__wrap`}>
+        <header className={`${baseClass}__header`}>
+          <IDLabel
+            id={doc?.id}
+            prefix="Revision"
+          />
+        </header>
+        {isLoading && (
+          <Loading />
+        )}
+        {doc?.revision && (
+          <React.Fragment>
+            hello
+          </React.Fragment>
+        )}
+      </div>
+    </div>
+  );
+};
+
+export default ViewRevision;

src/admin/components/views/Revision/types.ts

@@ -0,0 +1,7 @@
+import { SanitizedCollectionConfig } from '../../../../collections/config/types';
+import { SanitizedGlobalConfig } from '../../../../globals/config/types';
+
+export type Props = {
+  collection?: SanitizedCollectionConfig
+  global?: SanitizedGlobalConfig
+}

src/admin/components/views/Revisions/index.tsx

@@ -33,13 +33,13 @@ const Revisions: React.FC<Props> = ({ collection, global }) => {
 
   if (collection) {
     ({ slug } = collection);
-    docURL = `${serverURL}/api/${slug}/${id}`;
+    docURL = `${serverURL}${api}/${slug}/${id}`;
     entityLabel = collection.labels.singular;
   }
 
   if (global) {
     ({ slug } = global);
-    docURL = `${serverURL}/api/globals/${slug}`;
+    docURL = `${serverURL}${api}/globals/${slug}`;
     entityLabel = global.label;
   }
 
@@ -110,12 +110,16 @@ const Revisions: React.FC<Props> = ({ collection, global }) => {
 
   let heading: string;
   let metaDesc: string;
+  let metaTitle: string;
+
   if (collection) {
+    metaTitle = `Revisions - ${doc[useAsTitle]} - ${entityLabel}`;
     metaDesc = `Viewing revisions for the ${entityLabel} ${doc[useAsTitle]}`;
     heading = doc?.[useAsTitle];
   }
 
   if (global) {
+    metaTitle = `Revisions - ${entityLabel}`;
     metaDesc = `Viewing revisions for the global ${entityLabel}`;
     heading = entityLabel;
   }
@@ -123,9 +127,8 @@ const Revisions: React.FC<Props> = ({ collection, global }) => {
   return (
     <div className={baseClass}>
       <Meta
-        title={`Revisions - ${doc[useAsTitle]} - ${entityLabel}`}
+        title={metaTitle}
         description={metaDesc}
-        keywords={`Revisions, ${entityLabel}, Payload, CMS`}
       />
       <Eyebrow />
       <div className={`${baseClass}__wrap`}>