@byline/host-tanstack-start 3.9.0 → 3.10.1

package/src/admin-shell/collections/history.tsx

@@ -9,7 +9,7 @@
 import { Fragment, lazy, Suspense, useState } from 'react'
 import { useParams, useRouterState } from '@tanstack/react-router'
 
-import { renderFormatted, StatusBadge } from '@byline/admin/react'
+import { AdminTabs, renderFormatted, StatusBadge } from '@byline/admin/react'
 import { useBylineAdminServices } from '@byline/admin/services'
 import type { CollectionAdminConfig, CollectionDefinition, WorkflowStatus } from '@byline/core'
 import type { AnyCollectionSchemaTypes } from '@byline/core/zod-schemas'
@@ -30,6 +30,7 @@ import { Link, useNavigate } from '../chrome/loose-router.js'
 import { RouterPager } from '../chrome/router-pager.js'
 import { TableHeadingCellSortable } from '../chrome/th-sortable.js'
 import { formatNumber } from '../chrome/utils.js'
+import { type DocumentHistoryData, DocumentHistoryView } from './document-history.js'
 import styles from './history.module.css'
 import { RestoreVersionModal } from './restore-version-modal.js'
 import { ViewMenu } from './view-menu.js'
@@ -110,6 +111,7 @@ export const HistoryView = ({
   collectionDefinition,
   adminConfig,
   data,
+  auditLog,
   workflowStatuses,
   currentDocument,
   contentLocales,
@@ -125,6 +127,12 @@ export const HistoryView = ({
      */
     actors?: Record<string, { label: string }>
   }
+  /**
+   * Document-grain audit log for the "Document history" tab (docs/AUDIT.md —
+   * Workstream 3): the non-versioned path / available-locales / status
+   * changes and the deletion event, with admin-resolved actor labels.
+   */
+  auditLog?: DocumentHistoryData
   workflowStatuses?: WorkflowStatus[]
   currentDocument?: Record<string, unknown> | null
   contentLocales: ReadonlyArray<ContentLocaleOption>
@@ -144,6 +152,10 @@ export const HistoryView = ({
   const titleFieldName = collectionDefinition.useAsTitle
   const location = useRouterState({ select: (s) => s.location })
   const locale = (location.search as { locale?: string }).locale
+  // Which sub-view is active (docs/AUDIT.md — W3). Absent / anything but
+  // 'document' → the content version stream.
+  const activeTab =
+    (location.search as { tab?: string }).tab === 'document' ? 'document' : 'versions'
   const [selectedVersion, setSelectedVersion] = useState<{
     versionId: string
     label: string
@@ -158,6 +170,23 @@ export const HistoryView = ({
       ? (currentDocument.versionId as string)
       : null
 
+  function handleTabChange(name: string): void {
+    // Switching tabs resets pagination; 'versions' (the default) drops the
+    // `tab` param entirely to keep the URL clean.
+    const params = structuredClone(location.search)
+    delete params.page
+    if (name === 'document') {
+      params.tab = 'document'
+    } else {
+      delete params.tab
+    }
+    navigate({
+      to: '/admin/collections/$collection/$id/history' as never,
+      params: { collection, id } as never,
+      search: params,
+    })
+  }
+
   function handleOnPageSizeChange(value: string | null): void {
     if (typeof value !== 'string' || value.length === 0) return
     const params = structuredClone(location.search)
@@ -177,7 +206,9 @@ export const HistoryView = ({
           <div className={cx('byline-coll-history-head', styles.head)}>
             <h2 className={cx('byline-coll-history-title', styles.title)}>
               {t('collections.history.title', { label: labels.singular })}{' '}
-              <Stats total={data?.meta.total} />
+              <Stats
+                total={activeTab === 'document' ? (auditLog?.meta.total ?? 0) : data?.meta.total}
+              />
             </h2>
             <ViewMenu
               collection={collection}
@@ -188,293 +219,312 @@ export const HistoryView = ({
               defaultContentLocale={defaultContentLocale}
             />
           </div>
+          <AdminTabs
+            tabs={[
+              { name: 'versions', label: t('collections.history.tabs.versions') },
+              { name: 'document', label: t('collections.history.tabs.document') },
+            ]}
+            activeTab={activeTab}
+            onChange={handleTabChange}
+            className={cx('byline-coll-history-tabs', styles.tabs)}
+          />
         </Container>
       </Section>
-      <Section>
-        <Container>
-          <div className={cx('byline-coll-history-options', styles.options)}>
-            <RouterPager
-              page={data?.meta.page}
-              count={data?.meta.totalPages}
-              showFirstButton
-              showLastButton
-              componentName="pagerTop"
-              aria-label={t('collections.list.pagerTopAriaLabel')}
-            />
-          </div>
-          <Table.Container className={cx('byline-coll-history-table-wrap', styles.tableWrap)}>
-            <Table>
-              <Table.Header>
-                <Table.Row>
-                  <th
-                    scope="col"
-                    className={cx('byline-coll-history-col-version', styles.colVersion)}
-                  />
-                  {columns.flatMap((column) => {
-                    const cell = (
-                      <TableHeadingCellSortable
-                        key={String(column.fieldName)}
-                        fieldName={String(column.fieldName)}
-                        label={column.label}
-                        sortable={column.sortable}
-                        scope="col"
-                        align={column.align}
-                        className={column.className}
-                      />
-                    )
-                    if (titleFieldName != null && column.fieldName === titleFieldName) {
-                      return [
-                        cell,
-                        <th
-                          key="__restore"
+      {activeTab === 'document' && (
+        <DocumentHistoryView
+          data={
+            auditLog ?? { entries: [], meta: { total: 0, page: 1, pageSize: 0, totalPages: 0 } }
+          }
+        />
+      )}
+
+      {activeTab !== 'document' && (
+        <Section>
+          <Container>
+            <div className={cx('byline-coll-history-options', styles.options)}>
+              <RouterPager
+                page={data?.meta.page}
+                count={data?.meta.totalPages}
+                showFirstButton
+                showLastButton
+                componentName="pagerTop"
+                aria-label={t('collections.list.pagerTopAriaLabel')}
+              />
+            </div>
+            <Table.Container className={cx('byline-coll-history-table-wrap', styles.tableWrap)}>
+              <Table>
+                <Table.Header>
+                  <Table.Row>
+                    <th
+                      scope="col"
+                      className={cx('byline-coll-history-col-version', styles.colVersion)}
+                    />
+                    {columns.flatMap((column) => {
+                      const cell = (
+                        <TableHeadingCellSortable
+                          key={String(column.fieldName)}
+                          fieldName={String(column.fieldName)}
+                          label={column.label}
+                          sortable={column.sortable}
                           scope="col"
-                          className={cx('byline-coll-history-col-restore', styles.colRestore)}
-                        />,
-                      ]
-                    }
-                    return [cell]
-                  })}
-                </Table.Row>
-              </Table.Header>
+                          align={column.align}
+                          className={column.className}
+                        />
+                      )
+                      if (titleFieldName != null && column.fieldName === titleFieldName) {
+                        return [
+                          cell,
+                          <th
+                            key="__restore"
+                            scope="col"
+                            className={cx('byline-coll-history-col-restore', styles.colRestore)}
+                          />,
+                        ]
+                      }
+                      return [cell]
+                    })}
+                  </Table.Row>
+                </Table.Header>
 
-              <Table.Body>
-                {data?.docs?.map((document, rowIndex) => {
-                  const versionId = document.versionId
-                  const { total, page, pageSize, desc } = data.meta
-                  const versionNumber = desc
-                    ? total - (page - 1) * pageSize - rowIndex
-                    : (page - 1) * pageSize + rowIndex + 1
-                  // Audit strip (docs/AUDIT.md — W1): who created this
-                  // version, via which action. A present-but-unresolved id
-                  // is a deleted user; an absent id is a row written before
-                  // audit wiring or an internal-tooling write.
-                  const actorLabel = document.createdBy
-                    ? (data.actors?.[document.createdBy]?.label ??
-                      t('collections.history.audit.formerUser'))
-                    : t('collections.history.audit.unknown')
-                  const actionKey = document.eventType
-                    ? AUDIT_ACTION_KEYS[document.eventType]
-                    : undefined
-                  const actionLabel = actionKey ? t(actionKey) : (document.eventType ?? '')
-                  // The strip starts on the second column — an empty spacer
-                  // cell sits under the version-number column, then one cell
-                  // spans the data columns plus the restore cell appended
-                  // after the identity column when present.
-                  const auditColSpan =
-                    columns.length +
-                    (titleFieldName != null && columns.some((c) => c.fieldName === titleFieldName)
-                      ? 1
-                      : 0)
-                  return (
-                    <Fragment key={versionId ?? document.id}>
-                      <Table.Row className={cx('byline-coll-history-row', styles.historyRow)}>
-                        <Table.Cell
-                          className={cx('byline-coll-history-version-cell', styles.versionCell)}
-                        >
-                          {versionId && currentDocument ? (
-                            <IconButton
-                              size="xs"
-                              variant="outlined"
-                              intent="noeffect"
-                              aria-label={t('collections.history.compareAriaLabel')}
-                              title={t('collections.history.compareTitle')}
-                              className={cx(
-                                'byline-coll-history-version-button',
-                                styles.versionButton
-                              )}
-                              onClick={() =>
-                                setSelectedVersion({
-                                  versionId,
-                                  label: new Date(document.createdAt).toLocaleString(),
-                                })
-                              }
-                            >
-                              {versionNumber}
-                            </IconButton>
-                          ) : null}
-                        </Table.Cell>
-                        {columns.flatMap((column) => {
-                          const dataCell = (
-                            <Table.Cell
-                              key={String(column.fieldName)}
-                              className={cx({
-                                'byline-coll-history-cell-right': column.align === 'right',
-                                [styles.cellRight]: column.align === 'right',
-                                'byline-coll-history-cell-center': column.align === 'center',
-                                [styles.cellCenter]: column.align === 'center',
-                              })}
-                            >
-                              {titleFieldName != null && column.fieldName === titleFieldName ? (
-                                versionId && currentDocument ? (
-                                  <button
-                                    type="button"
-                                    className={cx(
-                                      'byline-coll-history-title-button',
-                                      styles.titleButton
-                                    )}
-                                    onClick={() =>
-                                      setSelectedVersion({
-                                        versionId,
-                                        label: new Date(document.createdAt).toLocaleString(),
-                                      })
-                                    }
-                                  >
-                                    {column.formatter
-                                      ? renderFormatted(
-                                          getColumnValue(document, column.fieldName as string),
-                                          document,
-                                          column.formatter
-                                        )
-                                      : resolveDisplayValue(
-                                          getColumnValue(document, column.fieldName as string),
-                                          locale,
-                                          defaultContentLocale
-                                        ) || '------'}
-                                  </button>
-                                ) : (
-                                  <Link
-                                    to={'/admin/collections/$collection/$id' as never}
-                                    params={{
-                                      collection,
-                                      id: document.id,
-                                    }}
-                                  >
-                                    {column.formatter
-                                      ? renderFormatted(
-                                          getColumnValue(document, column.fieldName as string),
-                                          document,
-                                          column.formatter
-                                        )
-                                      : resolveDisplayValue(
-                                          getColumnValue(document, column.fieldName as string),
-                                          locale,
-                                          defaultContentLocale
-                                        ) || '------'}
-                                  </Link>
-                                )
-                              ) : column.formatter ? (
-                                renderFormatted(
-                                  getColumnValue(document, column.fieldName as string),
-                                  document,
-                                  column.formatter
-                                )
-                              ) : column.fieldName === 'status' && workflowStatuses ? (
-                                <StatusBadge
-                                  status={document.status}
-                                  workflowStatuses={workflowStatuses}
-                                />
-                              ) : (
-                                resolveDisplayValue(
-                                  getColumnValue(document, column.fieldName as string),
-                                  locale,
-                                  defaultContentLocale
-                                ) || ''
-                              )}
-                            </Table.Cell>
-                          )
-                          if (titleFieldName != null && column.fieldName === titleFieldName) {
-                            return [
-                              dataCell,
-                              <Table.Cell
-                                key="__restore"
+                <Table.Body>
+                  {data?.docs?.map((document, rowIndex) => {
+                    const versionId = document.versionId
+                    const { total, page, pageSize, desc } = data.meta
+                    const versionNumber = desc
+                      ? total - (page - 1) * pageSize - rowIndex
+                      : (page - 1) * pageSize + rowIndex + 1
+                    // Audit strip (docs/AUDIT.md — W1): who created this
+                    // version, via which action. A present-but-unresolved id
+                    // is a deleted user; an absent id is a row written before
+                    // audit wiring or an internal-tooling write.
+                    const actorLabel = document.createdBy
+                      ? (data.actors?.[document.createdBy]?.label ??
+                        t('collections.history.audit.formerUser'))
+                      : t('collections.history.audit.unknown')
+                    const actionKey = document.eventType
+                      ? AUDIT_ACTION_KEYS[document.eventType]
+                      : undefined
+                    const actionLabel = actionKey ? t(actionKey) : (document.eventType ?? '')
+                    // The strip starts on the second column — an empty spacer
+                    // cell sits under the version-number column, then one cell
+                    // spans the data columns plus the restore cell appended
+                    // after the identity column when present.
+                    const auditColSpan =
+                      columns.length +
+                      (titleFieldName != null && columns.some((c) => c.fieldName === titleFieldName)
+                        ? 1
+                        : 0)
+                    return (
+                      <Fragment key={versionId ?? document.id}>
+                        <Table.Row className={cx('byline-coll-history-row', styles.historyRow)}>
+                          <Table.Cell
+                            className={cx('byline-coll-history-version-cell', styles.versionCell)}
+                          >
+                            {versionId && currentDocument ? (
+                              <IconButton
+                                size="xs"
+                                variant="outlined"
+                                intent="noeffect"
+                                aria-label={t('collections.history.compareAriaLabel')}
+                                title={t('collections.history.compareTitle')}
                                 className={cx(
-                                  'byline-coll-history-restore-cell',
-                                  styles.restoreCell
+                                  'byline-coll-history-version-button',
+                                  styles.versionButton
                                 )}
+                                onClick={() =>
+                                  setSelectedVersion({
+                                    versionId,
+                                    label: new Date(document.createdAt).toLocaleString(),
+                                  })
+                                }
                               >
-                                {versionId && versionId !== currentVersionId ? (
-                                  <Button
-                                    type="button"
-                                    variant="outlined"
-                                    size="xs"
-                                    intent="noeffect"
-                                    onClick={() =>
-                                      setRestoreTarget({
-                                        versionId,
-                                        label: new Date(document.createdAt).toLocaleString(),
-                                        versionNumber,
-                                      })
-                                    }
-                                    className={cx(
-                                      'byline-coll-history-restore-button',
-                                      styles.restoreButton
-                                    )}
-                                    title={t('collections.history.restoreButtonTitle')}
-                                  >
-                                    {t('collections.history.restoreButton')}
-                                  </Button>
-                                ) : null}
-                              </Table.Cell>,
-                            ]
-                          }
-                          return [dataCell]
-                        })}
-                      </Table.Row>
-                      <Table.Row
-                        className={cx('byline-coll-history-audit-row', styles.auditRow)}
-                        aria-label={t('collections.history.audit.createdBy', {
-                          label: actorLabel,
-                        })}
-                      >
-                        <Table.Cell
-                          className={cx(
-                            'byline-coll-history-audit-spacer-cell',
-                            styles.auditSpacerCell
-                          )}
-                        />
-                        <Table.Cell
-                          colSpan={auditColSpan}
-                          className={cx('byline-coll-history-audit-cell', styles.auditCell)}
+                                {versionNumber}
+                              </IconButton>
+                            ) : null}
+                          </Table.Cell>
+                          {columns.flatMap((column) => {
+                            const dataCell = (
+                              <Table.Cell
+                                key={String(column.fieldName)}
+                                className={cx({
+                                  'byline-coll-history-cell-right': column.align === 'right',
+                                  [styles.cellRight]: column.align === 'right',
+                                  'byline-coll-history-cell-center': column.align === 'center',
+                                  [styles.cellCenter]: column.align === 'center',
+                                })}
+                              >
+                                {titleFieldName != null && column.fieldName === titleFieldName ? (
+                                  versionId && currentDocument ? (
+                                    <button
+                                      type="button"
+                                      className={cx(
+                                        'byline-coll-history-title-button',
+                                        styles.titleButton
+                                      )}
+                                      onClick={() =>
+                                        setSelectedVersion({
+                                          versionId,
+                                          label: new Date(document.createdAt).toLocaleString(),
+                                        })
+                                      }
+                                    >
+                                      {column.formatter
+                                        ? renderFormatted(
+                                            getColumnValue(document, column.fieldName as string),
+                                            document,
+                                            column.formatter
+                                          )
+                                        : resolveDisplayValue(
+                                            getColumnValue(document, column.fieldName as string),
+                                            locale,
+                                            defaultContentLocale
+                                          ) || '------'}
+                                    </button>
+                                  ) : (
+                                    <Link
+                                      to={'/admin/collections/$collection/$id' as never}
+                                      params={{
+                                        collection,
+                                        id: document.id,
+                                      }}
+                                    >
+                                      {column.formatter
+                                        ? renderFormatted(
+                                            getColumnValue(document, column.fieldName as string),
+                                            document,
+                                            column.formatter
+                                          )
+                                        : resolveDisplayValue(
+                                            getColumnValue(document, column.fieldName as string),
+                                            locale,
+                                            defaultContentLocale
+                                          ) || '------'}
+                                    </Link>
+                                  )
+                                ) : column.formatter ? (
+                                  renderFormatted(
+                                    getColumnValue(document, column.fieldName as string),
+                                    document,
+                                    column.formatter
+                                  )
+                                ) : column.fieldName === 'status' && workflowStatuses ? (
+                                  <StatusBadge
+                                    status={document.status}
+                                    workflowStatuses={workflowStatuses}
+                                  />
+                                ) : (
+                                  resolveDisplayValue(
+                                    getColumnValue(document, column.fieldName as string),
+                                    locale,
+                                    defaultContentLocale
+                                  ) || ''
+                                )}
+                              </Table.Cell>
+                            )
+                            if (titleFieldName != null && column.fieldName === titleFieldName) {
+                              return [
+                                dataCell,
+                                <Table.Cell
+                                  key="__restore"
+                                  className={cx(
+                                    'byline-coll-history-restore-cell',
+                                    styles.restoreCell
+                                  )}
+                                >
+                                  {versionId && versionId !== currentVersionId ? (
+                                    <Button
+                                      type="button"
+                                      variant="outlined"
+                                      size="xs"
+                                      intent="noeffect"
+                                      onClick={() =>
+                                        setRestoreTarget({
+                                          versionId,
+                                          label: new Date(document.createdAt).toLocaleString(),
+                                          versionNumber,
+                                        })
+                                      }
+                                      className={cx(
+                                        'byline-coll-history-restore-button',
+                                        styles.restoreButton
+                                      )}
+                                      title={t('collections.history.restoreButtonTitle')}
+                                    >
+                                      {t('collections.history.restoreButton')}
+                                    </Button>
+                                  ) : null}
+                                </Table.Cell>,
+                              ]
+                            }
+                            return [dataCell]
+                          })}
+                        </Table.Row>
+                        <Table.Row
+                          className={cx('byline-coll-history-audit-row', styles.auditRow)}
+                          aria-label={t('collections.history.audit.createdBy', {
+                            label: actorLabel,
+                          })}
                         >
-                          <span className={cx('byline-coll-history-audit', styles.audit)}>
-                            {actionLabel}
-                            {' · '}
-                            {t('collections.history.audit.createdBy', { label: actorLabel })}
-                            {' · '}
-                            {new Date(document.createdAt).toLocaleString()}
-                          </span>
-                        </Table.Cell>
-                      </Table.Row>
-                    </Fragment>
-                  )
-                })}
-              </Table.Body>
-            </Table>
-            {padRows(6 - (data?.docs?.length ?? 0))}
-          </Table.Container>
-          <div
-            className={cx(
-              'byline-coll-history-options byline-coll-history-options-bottom',
-              styles.options,
-              styles.optionsBottom
-            )}
-          >
-            <Select<string>
-              containerClassName={cx('byline-coll-history-page-size', styles.pageSize)}
-              id="page_size"
-              name="page_size"
-              size="sm"
-              defaultValue="15"
-              items={[
-                { value: '15', label: '15' },
-                { value: '30', label: '30' },
-                { value: '50', label: '50' },
-                { value: '100', label: '100' },
-              ]}
-              onValueChange={handleOnPageSizeChange}
-            />
-            <RouterPager
-              smoothScrollToTop={true}
-              page={data?.meta.page}
-              count={data?.meta.totalPages}
-              showFirstButton
-              showLastButton
-              componentName="pagerBottom"
-              aria-label={t('collections.list.pagerBottomAriaLabel')}
-            />
-          </div>
-        </Container>
-      </Section>
+                          <Table.Cell
+                            className={cx(
+                              'byline-coll-history-audit-spacer-cell',
+                              styles.auditSpacerCell
+                            )}
+                          />
+                          <Table.Cell
+                            colSpan={auditColSpan}
+                            className={cx('byline-coll-history-audit-cell', styles.auditCell)}
+                          >
+                            <span className={cx('byline-coll-history-audit', styles.audit)}>
+                              {actionLabel}
+                              {' · '}
+                              {t('collections.history.audit.createdBy', { label: actorLabel })}
+                              {' · '}
+                              {new Date(document.createdAt).toLocaleString()}
+                            </span>
+                          </Table.Cell>
+                        </Table.Row>
+                      </Fragment>
+                    )
+                  })}
+                </Table.Body>
+              </Table>
+              {padRows(6 - (data?.docs?.length ?? 0))}
+            </Table.Container>
+            <div
+              className={cx(
+                'byline-coll-history-options byline-coll-history-options-bottom',
+                styles.options,
+                styles.optionsBottom
+              )}
+            >
+              <Select<string>
+                containerClassName={cx('byline-coll-history-page-size', styles.pageSize)}
+                id="page_size"
+                name="page_size"
+                size="sm"
+                defaultValue="15"
+                items={[
+                  { value: '15', label: '15' },
+                  { value: '30', label: '30' },
+                  { value: '50', label: '50' },
+                  { value: '100', label: '100' },
+                ]}
+                onValueChange={handleOnPageSizeChange}
+              />
+              <RouterPager
+                smoothScrollToTop={true}
+                page={data?.meta.page}
+                count={data?.meta.totalPages}
+                showFirstButton
+                showLastButton
+                componentName="pagerBottom"
+                aria-label={t('collections.list.pagerBottomAriaLabel')}
+              />
+            </div>
+          </Container>
+        </Section>
+      )}
 
       {selectedVersion && currentDocument && (
         <Suspense fallback={null}>