@byline/host-tanstack-start 0.9.3

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

@@ -0,0 +1,319 @@
+/**
+ * This Source Code is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/.
+ *
+ * Copyright (c) Infonomic Company Limited
+ */
+
+import { useState } from 'react'
+
+import type { CollectionAdminConfig, CollectionDefinition } from '@byline/core'
+import { getDefaultStatus, getWorkflowStatuses } from '@byline/core'
+import type { AnyCollectionSchemaTypes } from '@byline/core/zod-schemas'
+import { FormRenderer } from '@byline/ui'
+import { Container, Section, useToastManager } from '@infonomic/uikit/react'
+
+import {
+  deleteDocument,
+  unpublishDocument,
+  updateCollectionDocumentWithPatches,
+  updateDocumentStatus,
+} from '../../server-fns/collections/index.js'
+import { useNavigate } from '../chrome/loose-router.js'
+import { useTanStackNavigationGuard } from './tanstack-navigation-guard.js'
+import { ViewMenu } from './view-menu.js'
+import type { ContentLocaleOption } from './view-menu.js'
+
+type EditState = {
+  status: 'success' | 'failed' | 'busy' | 'idle'
+  message: string
+}
+
+export const EditView = ({
+  collectionDefinition,
+  adminConfig,
+  initialData,
+  locale,
+  contentLocales,
+  defaultContentLocale,
+}: {
+  collectionDefinition: CollectionDefinition
+  adminConfig?: CollectionAdminConfig
+  initialData: AnyCollectionSchemaTypes['UpdateType']
+  locale?: string
+  contentLocales: ReadonlyArray<ContentLocaleOption>
+  defaultContentLocale: string
+}) => {
+  const toastManager = useToastManager()
+  const [_editState, setEditState] = useState<EditState>({
+    status: 'idle',
+    message: '',
+  })
+  const navigate = useNavigate()
+  const { labels, path, fields } = collectionDefinition
+
+  // Compute the next forward workflow status for the status button.
+  const workflowStatuses = getWorkflowStatuses(collectionDefinition)
+  // biome-ignore lint/suspicious/noExplicitAny: storage shape
+  const currentStatus = (initialData as any)?.status ?? getDefaultStatus(collectionDefinition)
+  const currentIndex = workflowStatuses.findIndex((s) => s.name === currentStatus)
+  const nextStatus =
+    currentIndex !== -1 && currentIndex < workflowStatuses.length - 1
+      ? workflowStatuses[currentIndex + 1]
+      : undefined
+
+  const handleLocaleChange = (newLocale: string) => {
+    navigate({
+      to: '/admin/collections/$collection/$id' as never,
+      params: { collection: path, id: String(initialData.id) },
+      search: { locale: newLocale },
+    })
+  }
+
+  const handleStatusChange = async (status: string) => {
+    try {
+      await updateDocumentStatus({
+        data: { collection: path, id: String(initialData.id), status },
+      })
+      toastManager.add({
+        title: `${labels.singular} Status Update`,
+        description: `Status changed to "${status}"`,
+        data: {
+          intent: 'success',
+          iconType: 'success',
+          icon: true,
+          close: true,
+        },
+      })
+      setEditState({
+        status: 'success',
+        message: `Status changed to "${status}"`,
+      })
+      // Refresh the page to reflect the new status.
+      navigate({
+        to: '/admin/collections/$collection/$id' as never,
+        params: { collection: path, id: String(initialData.id) },
+        search: (prev: Record<string, unknown>) => ({ ...prev }),
+      })
+    } catch (err) {
+      console.error('Status change error:', err)
+      toastManager.add({
+        title: `${labels.singular} Status Update`,
+        description: `Failed to change status: ${(err as Error).message}`,
+        data: {
+          intent: 'danger',
+          iconType: 'danger',
+          icon: true,
+          close: true,
+        },
+      })
+      setEditState({
+        status: 'failed',
+        message: `Failed to change status: ${(err as Error).message}`,
+      })
+    }
+  }
+
+  // Published version metadata — attached by getCollectionDocument when a
+  // published version exists behind the current draft.
+  // biome-ignore lint/suspicious/noExplicitAny: storage shape
+  const publishedVersion = (initialData as any)?._publishedVersion ?? null
+
+  const handleUnpublish = async () => {
+    try {
+      await unpublishDocument({ data: { collection: path, id: String(initialData.id) } })
+      toastManager.add({
+        title: `${labels.singular} Unpublish`,
+        description: 'Published version has been taken offline.',
+        data: {
+          intent: 'success',
+          iconType: 'success',
+          icon: true,
+          close: true,
+        },
+      })
+      setEditState({
+        status: 'success',
+        message: 'Published version has been taken offline.',
+      })
+      navigate({
+        to: '/admin/collections/$collection/$id' as never,
+        params: { collection: path, id: String(initialData.id) },
+        search: (prev: Record<string, unknown>) => ({ ...prev }),
+      })
+    } catch (err) {
+      console.error('Unpublish error:', err)
+      toastManager.add({
+        title: `${labels.singular} Unpublish`,
+        description: `Failed to unpublish: ${(err as Error).message}`,
+        data: {
+          intent: 'danger',
+          iconType: 'danger',
+          icon: true,
+          close: true,
+        },
+      })
+      setEditState({
+        status: 'failed',
+        message: `Failed to unpublish: ${(err as Error).message}`,
+      })
+    }
+  }
+
+  const handleDelete = async () => {
+    try {
+      await deleteDocument({ data: { collection: path, id: String(initialData.id) } })
+      toastManager.add({
+        title: `${labels.singular} Deletion`,
+        description: `${labels.singular} has been deleted.`,
+        data: {
+          intent: 'success',
+          iconType: 'success',
+          icon: true,
+          close: true,
+        },
+      })
+      setEditState({
+        status: 'success',
+        message: `${labels.singular} has been deleted.`,
+      })
+      // Navigate back to the collection list after deletion.
+      navigate({
+        to: '/admin/collections/$collection' as never,
+        params: { collection: path },
+      })
+    } catch (err) {
+      console.error('Delete error:', err)
+      toastManager.add({
+        title: `${labels.singular} Deletion`,
+        description: `Failed to delete: ${(err as Error).message}`,
+        data: {
+          intent: 'danger',
+          iconType: 'danger',
+          icon: true,
+          close: true,
+        },
+      })
+      setEditState({
+        status: 'failed',
+        message: `Failed to delete: ${(err as Error).message}`,
+      })
+    }
+  }
+
+  const handleSubmit = async ({
+    data: _data,
+    patches,
+    systemPath,
+  }: {
+    // biome-ignore lint/suspicious/noExplicitAny: data is collection-specific
+    data: any
+    // biome-ignore lint/suspicious/noExplicitAny: patches list shape
+    patches: any[]
+    systemPath?: string | null
+  }) => {
+    try {
+      await updateCollectionDocumentWithPatches({
+        data: {
+          collection: path,
+          id: String(initialData.id),
+          patches,
+          versionId: initialData.versionId as string | undefined,
+          locale,
+          ...(systemPath ? { path: systemPath } : {}),
+        },
+      })
+
+      toastManager.add({
+        title: `${labels.singular} Update`,
+        description: `Successfully updated ${labels.singular.toLowerCase()}`,
+        data: {
+          intent: 'success',
+          iconType: 'success',
+          icon: true,
+          close: true,
+        },
+      })
+
+      setEditState({
+        status: 'success',
+        message: `Successfully updated ${labels.singular.toLowerCase()}`,
+      })
+
+      // Re-navigate to the same route so the loader re-fetches the document.
+      // The new version will have a fresh version ID, draft status, and
+      // updated publishedVersion metadata.
+      navigate({
+        to: '/admin/collections/$collection/$id' as never,
+        params: { collection: path, id: String(initialData.id) },
+        search: (prev: Record<string, unknown>) => ({ ...prev }),
+      })
+    } catch (err) {
+      console.error('Network error:', err)
+      toastManager.add({
+        title: `${labels.singular} Update`,
+        description: `An error occurred while updating ${labels.singular.toLowerCase()}`,
+        data: {
+          intent: 'danger',
+          iconType: 'danger',
+          icon: true,
+          close: true,
+        },
+      })
+
+      setEditState({
+        status: 'failed',
+        message: `An error occurred while updating ${labels.singular.toLowerCase()}`,
+      })
+    }
+  }
+
+  return (
+    <Section>
+      <Container>
+        <FormRenderer
+          mode="edit"
+          fields={fields}
+          onSubmit={handleSubmit}
+          initialData={initialData}
+          adminConfig={adminConfig}
+          useAsTitle={collectionDefinition.useAsTitle}
+          useAsPath={collectionDefinition.useAsPath}
+          headingLabel={labels.singular}
+          initialLocale={locale}
+          onLocaleChange={handleLocaleChange}
+          useNavigationGuard={useTanStackNavigationGuard}
+          headerSlot={
+            <ViewMenu
+              collection={path}
+              documentId={String(initialData.id)}
+              activeView="edit"
+              locale={locale}
+              contentLocales={contentLocales}
+              defaultContentLocale={defaultContentLocale}
+              adminConfig={adminConfig}
+              // initialData is the loaded ClientDocument-shaped record (id +
+              // path + status + fields) — exactly what PreviewDocument needs.
+              // biome-ignore lint/suspicious/noExplicitAny: storage shape
+              doc={initialData as any}
+            />
+          }
+          onStatusChange={handleStatusChange}
+          onUnpublish={publishedVersion ? handleUnpublish : undefined}
+          onDelete={handleDelete}
+          publishedVersion={publishedVersion}
+          nextStatus={nextStatus}
+          workflowStatuses={workflowStatuses}
+          onCancel={() =>
+            navigate({
+              to: '/admin/collections/$collection' as never,
+              params: { collection: path },
+            })
+          }
+          collectionPath={path}
+        />
+      </Container>
+    </Section>
+  )
+}

package/src/admin-shell/collections/history.module.css

@@ -0,0 +1,156 @@
+/**
+ * HistoryView — list of past versions for a collection document.
+ *
+ * Override handles:
+ *   .byline-coll-history-head     — title + view-menu row
+ *   .byline-coll-history-title    — section heading with inline stats
+ *   .byline-coll-history-stats    — version-count badge
+ *   .byline-coll-history-options  — top pager bar
+ *   .byline-coll-history-table-wrap — table container
+ *   .byline-coll-history-cell-right — right-aligned cell
+ *   .byline-coll-history-cell-center — center-aligned cell
+ *   .byline-coll-history-pad-row  — filler rows
+ *   .byline-coll-history-version-button — number-stamped version button
+ *   .byline-coll-history-title-button   — clickable title cell button
+ *   .byline-coll-history-page-size — page-size select alignment
+ */
+
+.head,
+:global(.byline-coll-history-head) {
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-start;
+  margin-bottom: 0.5rem;
+}
+
+@media (min-width: 40rem) {
+  .head,
+  :global(.byline-coll-history-head) {
+    flex-direction: row;
+    justify-content: space-between;
+  }
+}
+
+.title,
+:global(.byline-coll-history-title) {
+  margin-bottom: 0.5rem;
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+.stats,
+:global(.byline-coll-history-stats) {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-right: auto;
+  margin-bottom: -4px;
+  height: 28px;
+  min-width: 28px;
+  padding: 5px 6px;
+  white-space: nowrap;
+  font-size: 0.875rem;
+  line-height: 0;
+  background-color: var(--gray-25);
+  border: var(--border-width-thin) var(--border-style-solid) var(--gray-200);
+  border-radius: 0.375rem;
+}
+
+:is([data-theme="dark"], :global(.dark)) .stats,
+:is([data-theme="dark"], :global(.dark)) :global(.byline-coll-history-stats) {
+  background-color: var(--canvas-700);
+}
+
+.options,
+:global(.byline-coll-history-options) {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+  margin-top: 0.75rem;
+  margin-bottom: 0.75rem;
+  align-items: flex-start;
+}
+
+@media (min-width: 40rem) {
+  .options,
+  :global(.byline-coll-history-options) {
+    flex-direction: row;
+    align-items: center;
+  }
+}
+
+.optionsBottom,
+:global(.byline-coll-history-options-bottom) {
+  margin-top: 0;
+  margin-bottom: 1.25rem;
+}
+
+.tableWrap,
+:global(.byline-coll-history-table-wrap) {
+  margin-top: 0.5rem;
+  margin-bottom: 0.75rem;
+}
+
+.cellRight,
+:global(.byline-coll-history-cell-right) {
+  text-align: right;
+}
+
+.cellCenter,
+:global(.byline-coll-history-cell-center) {
+  text-align: center;
+}
+
+.padRow,
+:global(.byline-coll-history-pad-row) {
+  height: 32px;
+  border: 0;
+}
+
+.versionCell,
+:global(.byline-coll-history-version-cell) {
+  text-align: left;
+}
+
+.colVersion,
+:global(.byline-coll-history-col-version) {
+  width: 1%;
+}
+
+.versionButton,
+:global(.byline-coll-history-version-button) {
+  font-size: 0.75rem;
+  font-family: var(--font-family-mono);
+  font-variant-numeric: tabular-nums;
+}
+
+.titleButton,
+:global(.byline-coll-history-title-button) {
+  text-align: left;
+  text-decoration: underline;
+  text-underline-offset: 2px;
+  cursor: pointer;
+  background: transparent;
+  border: 0;
+  padding: 0;
+  font: inherit;
+  color: inherit;
+}
+
+.titleButton:hover,
+:global(.byline-coll-history-title-button:hover) {
+  opacity: 0.75;
+}
+
+.pageSize,
+:global(.byline-coll-history-page-size) {
+  /* fallback */
+}
+
+@media (min-width: 40rem) {
+  .pageSize,
+  :global(.byline-coll-history-page-size) {
+    margin-left: auto;
+  }
+}