feat(ui): updates version status UI to be more informative (#6661)

## Description

Improves the status pill in the version archive and version comparison
views.

- [X] I have read and understand the
[CONTRIBUTING.md](https://github.com/payloadcms/payload/blob/main/CONTRIBUTING.md)
document in this repository.

## Type of change

- [X] New feature (non-breaking change which adds functionality)

## Checklist:

- [X] Existing test suite passes locally with my changes

Author: jessrynkar

packages/next/src/views/Version/Default/SetStepNav.tsx

@@ -16,17 +16,7 @@ export const SetStepNav: React.FC<{
   globalConfig?: ClientGlobalConfig
   globalSlug?: string
   id?: number | string
-  mostRecentDoc: any
-}> = ({
-  id,
-  collectionConfig,
-  collectionSlug,
-  doc,
-  fieldMap,
-  globalConfig,
-  globalSlug,
-  mostRecentDoc,
-}) => {
+}> = ({ id, collectionConfig, collectionSlug, doc, fieldMap, globalConfig, globalSlug }) => {
   const config = useConfig()
   const { setStepNav } = useStepNav()
   const { i18n, t } = useTranslation()
@@ -45,26 +35,27 @@ export const SetStepNav: React.FC<{
 
       const useAsTitle = collectionConfig?.admin?.useAsTitle || 'id'
       const pluralLabel = collectionConfig?.labels?.plural
+      const formattedDoc = doc.version ? doc.version : doc
 
-      if (mostRecentDoc) {
+      if (formattedDoc) {
         if (useAsTitle !== 'id') {
           const titleField = fieldMap.find((f) => {
             const { isFieldAffectingData } = f
             const fieldName = 'name' in f ? f.name : undefined
             return Boolean(isFieldAffectingData && fieldName === useAsTitle)
           })
 
-          if (titleField && mostRecentDoc[useAsTitle]) {
+          if (titleField && formattedDoc[useAsTitle]) {
             if (titleField.localized) {
-              docLabel = mostRecentDoc[useAsTitle]?.[locale.code]
+              docLabel = formattedDoc[useAsTitle]?.[locale.code]
             } else {
-              docLabel = mostRecentDoc[useAsTitle]
+              docLabel = formattedDoc[useAsTitle]
             }
           } else {
             docLabel = `[${t('general:untitled')}]`
           }
         } else {
-          docLabel = mostRecentDoc.id
+          docLabel = doc.id
         }
       }
 
@@ -114,7 +105,6 @@ export const SetStepNav: React.FC<{
     collectionSlug,
     globalSlug,
     doc,
-    mostRecentDoc,
     id,
     locale,
     t,

packages/next/src/views/Version/Default/index.tsx

@@ -20,7 +20,6 @@ import RenderFieldsToDiff from '../RenderFieldsToDiff/index.js'
 import Restore from '../Restore/index.js'
 import { SelectComparison } from '../SelectComparison/index.js'
 import { SelectLocales } from '../SelectLocales/index.js'
-import { mostRecentVersionOption } from '../shared.js'
 import { SetStepNav } from './SetStepNav.js'
 import './index.scss'
 
@@ -30,9 +29,9 @@ export const DefaultVersionView: React.FC<DefaultVersionsViewProps> = ({
   doc,
   docPermissions,
   initialComparisonDoc,
+  latestDraftVersion,
+  latestPublishedVersion,
   localeOptions,
-  mostRecentDoc,
-  publishedDoc,
   versionID,
 }) => {
   const config = useConfig()
@@ -53,7 +52,8 @@ export const DefaultVersionView: React.FC<DefaultVersionsViewProps> = ({
   const [globalConfig] = useState(() => config.globals.find((global) => global.slug === globalSlug))
 
   const [locales, setLocales] = useState<OptionObject[]>(localeOptions)
-  const [compareValue, setCompareValue] = useState<CompareOption>(mostRecentVersionOption)
+
+  const [compareValue, setCompareValue] = useState<CompareOption>()
 
   const {
     admin: { dateFormat },
@@ -62,34 +62,22 @@ export const DefaultVersionView: React.FC<DefaultVersionsViewProps> = ({
     serverURL,
   } = config
 
-  const formattedCreatedAt = doc?.createdAt
-    ? formatDate({ date: doc.createdAt, i18n, pattern: dateFormat })
+  const versionCreatedAt = doc?.updatedAt
+    ? formatDate({ date: doc.updatedAt, i18n, pattern: dateFormat })
     : ''
 
-  const originalDocFetchURL = `${serverURL}${apiRoute}/${globalSlug ? 'globals/' : ''}${
-    collectionSlug || globalSlug
-  }${collectionSlug ? `/${id}` : ''}`
-
   const compareBaseURL = `${serverURL}${apiRoute}/${globalSlug ? 'globals/' : ''}${
     collectionSlug || globalSlug
   }/versions`
 
-  const compareFetchURL =
-    compareValue?.value === 'mostRecent' || compareValue?.value === 'published'
-      ? originalDocFetchURL
-      : `${compareBaseURL}/${compareValue.value}`
+  const compareFetchURL = compareValue?.value && `${compareBaseURL}/${compareValue.value}`
 
   const [{ data: currentComparisonDoc }] = usePayloadAPI(compareFetchURL, {
     initialData: initialComparisonDoc,
     initialParams: { depth: 1, draft: 'true', locale: '*' },
   })
 
-  const comparison =
-    compareValue?.value === 'mostRecent'
-      ? mostRecentDoc
-      : compareValue?.value === 'published'
-        ? publishedDoc
-        : currentComparisonDoc?.version // the `version` key is only present on `versions` documents
+  const comparison = compareValue?.value && currentComparisonDoc?.version // the `version` key is only present on `versions` documents
 
   const canUpdate = docPermissions?.update?.permission
 
@@ -104,7 +92,6 @@ export const DefaultVersionView: React.FC<DefaultVersionsViewProps> = ({
         globalConfig={globalConfig}
         globalSlug={globalSlug}
         id={id}
-        mostRecentDoc={mostRecentDoc}
       />
       <Gutter className={`${baseClass}__wrap`}>
         <div className={`${baseClass}__header-wrap`}>
@@ -114,15 +101,15 @@ export const DefaultVersionView: React.FC<DefaultVersionsViewProps> = ({
             })}
           </p>
           <header className={`${baseClass}__header`}>
-            <h2>{formattedCreatedAt}</h2>
+            <h2>{versionCreatedAt}</h2>
             {canUpdate && (
               <Restore
                 className={`${baseClass}__restore`}
                 collectionSlug={collectionSlug}
                 globalSlug={globalSlug}
                 label={collectionConfig?.labels.singular || globalConfig?.label}
                 originalDocID={id}
-                versionDate={formattedCreatedAt}
+                versionDate={versionCreatedAt}
                 versionID={versionID}
               />
             )}
@@ -131,9 +118,10 @@ export const DefaultVersionView: React.FC<DefaultVersionsViewProps> = ({
         <div className={`${baseClass}__controls`}>
           <SelectComparison
             baseURL={compareBaseURL}
+            latestDraftVersion={latestDraftVersion}
+            latestPublishedVersion={latestPublishedVersion}
             onChange={setCompareValue}
             parentID={id}
-            publishedDoc={publishedDoc}
             value={compareValue}
             versionID={versionID}
           />

packages/next/src/views/Version/Default/types.ts

@@ -1,7 +1,7 @@
 import type { CollectionPermission, Document, GlobalPermission, OptionObject } from 'payload'
 
 export type CompareOption = {
-  label: string
+  label: React.ReactNode | string
   options?: CompareOption[]
   relationTo?: string
   value: string
@@ -11,8 +11,8 @@ export type DefaultVersionsViewProps = {
   doc: Document
   docPermissions: CollectionPermission | GlobalPermission
   initialComparisonDoc: Document
+  latestDraftVersion?: string
+  latestPublishedVersion?: string
   localeOptions: OptionObject[]
-  mostRecentDoc: Document
-  publishedDoc: Document
   versionID?: string
 }

packages/next/src/views/Version/SelectComparison/index.tsx

@@ -1,37 +1,44 @@
 'use client'
+
 import type { PaginatedDocs, Where } from 'payload'
 
-import {
-  ReactSelect,
-  fieldBaseClass,
-  useConfig,
-  useDocumentInfo,
-  useTranslation,
-} from '@payloadcms/ui'
+import { ReactSelect, fieldBaseClass, useConfig, useTranslation } from '@payloadcms/ui'
 import { formatDate } from '@payloadcms/ui/shared'
 import * as qs from 'qs-esm'
 import React, { useCallback, useEffect, useState } from 'react'
 
 import type { Props } from './types.js'
 
-import { mostRecentVersionOption, publishedVersionOption } from '../shared.js'
+import { renderPill } from '../../Versions/cells/AutosaveCell/index.js'
 import './index.scss'
 
 const baseClass = 'compare-version'
 
 const maxResultsPerRequest = 10
 
-const baseOptions = [mostRecentVersionOption]
+const baseOptions = []
 
 export const SelectComparison: React.FC<Props> = (props) => {
-  const { baseURL, onChange, parentID, publishedDoc, value, versionID } = props
+  const {
+    baseURL,
+    latestDraftVersion,
+    latestPublishedVersion,
+    onChange,
+    parentID,
+    value,
+    versionID,
+  } = props
 
   const {
     admin: { dateFormat },
   } = useConfig()
 
-  const { docConfig } = useDocumentInfo()
-  const [options, setOptions] = useState(baseOptions)
+  const [options, setOptions] = useState<
+    {
+      label: React.ReactNode | string
+      value: string
+    }[]
+  >(baseOptions)
   const [lastLoadedPage, setLastLoadedPage] = useState(1)
   const [errorLoading, setErrorLoading] = useState('')
   const { i18n, t } = useTranslation()
@@ -58,14 +65,6 @@ export const SelectComparison: React.FC<Props> = (props) => {
         },
       }
 
-      if (docConfig.versions?.drafts) {
-        query.where.and.push({
-          latest: {
-            not_equals: true,
-          },
-        })
-      }
-
       if (parentID) {
         query.where.and.push({
           parent: {
@@ -85,14 +84,41 @@ export const SelectComparison: React.FC<Props> = (props) => {
 
       if (response.ok) {
         const data: PaginatedDocs = await response.json()
+
         if (data.docs.length > 0) {
-          setOptions((existingOptions) => [
-            ...existingOptions,
-            ...data.docs.map((doc) => ({
-              label: formatDate({ date: doc.updatedAt, i18n, pattern: dateFormat }),
+          const versionInfo = {
+            draft: {
+              currentLabel: t('version:currentDraft'),
+              latestVersion: latestDraftVersion,
+              pillStyle: undefined,
+              previousLabel: t('version:draft'),
+            },
+            published: {
+              currentLabel: t('version:currentPublishedVersion'),
+              latestVersion: latestPublishedVersion,
+              pillStyle: 'success',
+              previousLabel: t('version:previouslyPublished'),
+            },
+          }
+
+          const additionalOptions = data.docs.map((doc) => {
+            const status = doc.version._status
+            const { currentLabel, latestVersion, pillStyle, previousLabel } =
+              versionInfo[status] || {}
+
+            return {
+              label: (
+                <div>
+                  {formatDate({ date: doc.updatedAt, i18n, pattern: dateFormat })}
+                  &nbsp;&nbsp;
+                  {renderPill(doc, latestVersion, currentLabel, previousLabel, pillStyle)}
+                </div>
+              ),
               value: doc.id,
-            })),
-          ])
+            }
+          })
+
+          setOptions((existingOptions) => [...existingOptions, ...additionalOptions])
 
           if (!data.hasNextPage) {
             loadedAllOptionsRef.current = true
@@ -103,13 +129,23 @@ export const SelectComparison: React.FC<Props> = (props) => {
         setErrorLoading(t('error:unspecific'))
       }
     },
-    [dateFormat, baseURL, parentID, versionID, t, i18n, docConfig.versions?.drafts],
+    [dateFormat, baseURL, parentID, versionID, t, i18n, latestDraftVersion, latestPublishedVersion],
   )
 
   useEffect(() => {
     void getResults({ lastLoadedPage: 1 })
   }, [getResults])
 
+  const filteredOptions = options.filter(
+    (option, index, self) => self.findIndex((t) => t.value === option.value) === index,
+  )
+
+  useEffect(() => {
+    if (filteredOptions.length > 0 && !value) {
+      onChange(filteredOptions[0])
+    }
+  }, [filteredOptions, value, onChange])
+
   return (
     <div
       className={[fieldBaseClass, baseClass, errorLoading && 'error-loading']
@@ -125,10 +161,7 @@ export const SelectComparison: React.FC<Props> = (props) => {
           onMenuScrollToBottom={() => {
             void getResults({ lastLoadedPage: lastLoadedPage + 1 })
           }}
-          options={[
-            ...(publishedDoc?._status === 'published' ? [publishedVersionOption] : []),
-            ...options,
-          ]}
+          options={filteredOptions}
           placeholder={t('version:selectVersionToCompare')}
           value={value}
         />

packages/next/src/views/Version/SelectComparison/types.ts

@@ -4,9 +4,10 @@ import type { CompareOption } from '../Default/types.js'
 
 export type Props = {
   baseURL: string
+  latestDraftVersion?: string
+  latestPublishedVersion?: string
   onChange: (val: CompareOption) => void
   parentID?: number | string
-  publishedDoc: any
   value: CompareOption
   versionID: string
 }