@byline/host-tanstack-start 4.14.1 → 4.16.0

package/src/admin-shell/chrome/admin-menu-drawer.module.css

@@ -103,9 +103,15 @@
   width: 24px;
 }
 
+/* A real line-height, not 0. Zero leaves every line box with no height, which
+   a single-line label survives — the flex row centres it anyway — but a label
+   long enough to wrap does not: both lines land in the same place and render
+   on top of each other. "Scheduled Publications" is the first label in this
+   menu long enough to reach that. Non-compact rows have no fixed height, so
+   the row simply grows to fit a second line. */
 .nav ul :global(li.menu-item .label),
 :global(.byline-admin-menu-drawer) ul :global(li.menu-item .label) {
-  line-height: 0;
+  line-height: 1.2;
 }
 
 .nav ul :global(li.menu-item.compact .label),

package/src/admin-shell/chrome/admin-menu-drawer.tsx

@@ -13,9 +13,13 @@ import { ADMIN_ACTIVITY_ABILITIES } from '@byline/admin/admin-activity'
 import { ADMIN_PERMISSIONS_ABILITIES } from '@byline/admin/admin-permissions'
 import { ADMIN_ROLES_ABILITIES } from '@byline/admin/admin-roles'
 import { ADMIN_USERS_ABILITIES } from '@byline/admin/admin-users'
+import { ANALYTICS_ABILITIES } from '@byline/admin/analytics'
+import { collectionAbilityKey, getAdminConfig } from '@byline/core'
 import { useTranslation } from '@byline/i18n/react'
 import {
   ActivityIcon,
+  AnalyticsIcon,
+  CalendarIcon,
   HomeIcon,
   RolesIcon,
   SettingsSlidersIcon,
@@ -75,7 +79,13 @@ function MenuItem({ to, label, icon, pathname, compact }: MenuItemProps) {
   )
 }
 
-export function AdminMenuDrawer(): React.JSX.Element | null {
+export function AdminMenuDrawer({
+  analyticsEnabled = false,
+  scheduledPublicationEnabled = false,
+}: {
+  analyticsEnabled?: boolean
+  scheduledPublicationEnabled?: boolean
+}): React.JSX.Element | null {
   const pathname = useRouterState({ select: (s) => s.location.pathname })
   const { mobile, drawerOpen, closeDrawer } = useAdminMenu()
   const { t } = useTranslation('byline-admin')
@@ -90,6 +100,14 @@ export function AdminMenuDrawer(): React.JSX.Element | null {
   const canReadRoles = has(ADMIN_ROLES_ABILITIES.read)
   const canReadPermissions = has(ADMIN_PERMISSIONS_ABILITIES.read)
   const canReadActivity = has(ADMIN_ACTIVITY_ABILITIES.read)
+  const canReadAnalytics = analyticsEnabled && has(ANALYTICS_ABILITIES.read)
+  const canSeeScheduledPublications =
+    scheduledPublicationEnabled &&
+    getAdminConfig().collections.some(
+      (collection) =>
+        has(collectionAbilityKey(collection.path, 'changeStatus')) &&
+        has(collectionAbilityKey(collection.path, 'publish'))
+    )
   const showAdminSection = canReadUsers || canReadRoles || canReadPermissions || canReadActivity
 
   const handlers = useSwipeable({
@@ -130,6 +148,24 @@ export function AdminMenuDrawer(): React.JSX.Element | null {
             pathname={pathname}
             compact={compact}
           />
+          {canSeeScheduledPublications && (
+            <MenuItem
+              to={getAdminRoutePath('scheduled-publications')}
+              label={t('chrome.menu.scheduledPublications')}
+              icon={<CalendarIcon width="18px" height="18px" />}
+              pathname={pathname}
+              compact={compact}
+            />
+          )}
+          {canReadAnalytics && (
+            <MenuItem
+              to={getAdminRoutePath('analytics')}
+              label={t('chrome.menu.analytics')}
+              icon={<AnalyticsIcon width="20px" height="20px" />}
+              pathname={pathname}
+              compact={compact}
+            />
+          )}
           {showAdminSection && (
             <>
               <li className="menu-separator" />

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

@@ -10,7 +10,12 @@ import { useState } from 'react'
 
 import { FormRenderer } from '@byline/admin/react'
 import type { CollectionAdminConfig, CollectionDefinition } from '@byline/core'
-import { getDefaultStatus, getWorkflowStatuses } from '@byline/core'
+import {
+  getDefaultStatus,
+  getWorkflow,
+  getWorkflowStatuses,
+  validateStatusTransition,
+} from '@byline/core'
 import type { AnyCollectionSchemaTypes } from '@byline/core/zod-schemas'
 import { useTranslation } from '@byline/i18n/react'
 import { Container, Section, useToastManager } from '@byline/ui/react'
@@ -18,11 +23,14 @@ import { Container, Section, useToastManager } from '@byline/ui/react'
 import { getAdminRoutePath } from '../../routes/admin-path.js'
 import { clearListReturnState } from '../../routes/list-return-storage.js'
 import {
+  cancelCollectionDocumentScheduledPublish,
+  confirmCollectionDocumentScheduledPublish,
   copyDocumentToLocale,
   deleteDocument,
   deleteDocumentLocale,
   duplicateCollectionDocument,
   hasDeleteSideEffectFailures,
+  scheduleCollectionDocumentPublish,
   unpublishDocument,
   updateCollectionDocumentSystemFields,
   updateCollectionDocumentWithPatches,
@@ -31,6 +39,7 @@ import {
 import { useNavigate } from '../chrome/loose-router.js'
 import { useTanStackNavigationGuard } from './tanstack-navigation-guard.js'
 import { ViewMenu } from './view-menu.js'
+import type { SerializedDocumentPublishSchedule } from '../../server-fns/collections/index.js'
 import type { ContentLocaleOption } from './view-menu.js'
 
 type EditState = {
@@ -76,6 +85,30 @@ export const EditView = ({
     currentIndex !== -1 && currentIndex < workflowStatuses.length - 1
       ? workflowStatuses[currentIndex + 1]
       : undefined
+  const scheduledPublicationEnabled =
+    // biome-ignore lint/suspicious/noExplicitAny: host-only loader metadata
+    (initialData as any)?._scheduledPublicationEnabled === true
+  const canSchedulePublication =
+    // biome-ignore lint/suspicious/noExplicitAny: host-only loader metadata
+    (initialData as any)?._canSchedulePublication === true
+  // biome-ignore lint/suspicious/noExplicitAny: host-only loader metadata
+  const scheduledPublication = ((initialData as any)?._scheduledPublish ??
+    null) as SerializedDocumentPublishSchedule | null
+  const publishTransitionValid =
+    currentStatus !== 'published' &&
+    getWorkflowStatuses(collectionDefinition).length > 1 &&
+    validateStatusTransition(getWorkflow(collectionDefinition), currentStatus, 'published').valid
+  const canArmSchedule =
+    scheduledPublicationEnabled && canSchedulePublication && publishTransitionValid
+
+  const notifyScheduleSuspended = () => {
+    if (scheduledPublication?.state !== 'armed') return
+    toastManager.add({
+      title: t('scheduledPublication.toast.suspendedTitle'),
+      description: t('scheduledPublication.toast.suspendedDescription'),
+      data: { intent: 'warning', iconType: 'warning', icon: true, close: true },
+    })
+  }
 
   const handleLocaleChange = (newLocale: string) => {
     navigate({
@@ -127,6 +160,96 @@ export const EditView = ({
     }
   }
 
+  const reloadDocument = () => {
+    navigate({
+      to: getAdminRoutePath('collections', '$collection', '$id'),
+      params: { collection: path, id: String(initialData.id) },
+      search: (prev: Record<string, unknown>) => ({ ...prev }),
+    })
+  }
+
+  const handleSchedulePublication = async ({ publishAt }: { publishAt: string }) => {
+    try {
+      await scheduleCollectionDocumentPublish({
+        data: {
+          collection: path,
+          id: String(initialData.id),
+          publishAt,
+          expectedVersionId: String(initialData.versionId),
+        },
+      })
+      toastManager.add({
+        title: t('scheduledPublication.toast.scheduledTitle'),
+        description: t('scheduledPublication.toast.scheduledDescription'),
+        data: { intent: 'success', iconType: 'success', icon: true, close: true },
+      })
+      reloadDocument()
+    } catch (err) {
+      toastManager.add({
+        title: t('scheduledPublication.toast.failedTitle'),
+        description: (err as Error).message,
+        data: { intent: 'danger', iconType: 'danger', icon: true, close: true },
+      })
+      throw err
+    }
+  }
+
+  const handleConfirmScheduledPublication = async () => {
+    try {
+      await confirmCollectionDocumentScheduledPublish({
+        data: {
+          collection: path,
+          id: String(initialData.id),
+          expectedVersionId: String(initialData.versionId),
+        },
+      })
+      toastManager.add({
+        title: t('scheduledPublication.toast.confirmedTitle'),
+        description: t('scheduledPublication.toast.confirmedDescription'),
+        data: { intent: 'success', iconType: 'success', icon: true, close: true },
+      })
+      reloadDocument()
+    } catch (err) {
+      toastManager.add({
+        title: t('scheduledPublication.toast.failedTitle'),
+        description: (err as Error).message,
+        data: { intent: 'danger', iconType: 'danger', icon: true, close: true },
+      })
+      throw err
+    }
+  }
+
+  const handleCancelScheduledPublication = async () => {
+    try {
+      const result = await cancelCollectionDocumentScheduledPublish({
+        data: { collection: path, id: String(initialData.id) },
+      })
+      const cancelled = result.status === 'cancelled'
+      toastManager.add({
+        title: cancelled
+          ? t('scheduledPublication.toast.cancelledTitle')
+          : t('scheduledPublication.toast.cancelLostTitle'),
+        description: cancelled
+          ? t('scheduledPublication.toast.cancelledDescription')
+          : t('scheduledPublication.toast.cancelLostDescription'),
+        data: {
+          intent: cancelled ? 'success' : 'warning',
+          iconType: cancelled ? 'success' : 'warning',
+          icon: true,
+          close: true,
+        },
+      })
+      reloadDocument()
+    } catch (err) {
+      toastManager.add({
+        title: t('scheduledPublication.toast.failedTitle'),
+        description: (err as Error).message,
+        data: { intent: 'danger', iconType: 'danger', icon: true, close: true },
+      })
+      throw err
+    }
+  }
+
   // Published version metadata — attached by getCollectionDocument when a
   // published version exists behind the current draft.
   // biome-ignore lint/suspicious/noExplicitAny: storage shape
@@ -269,6 +392,7 @@ export const EditView = ({
           close: true,
         },
       })
+      notifyScheduleSuspended()
       setEditState({
         status: 'success',
         message: t('collections.edit.copiedSuccessMessage', {
@@ -327,6 +451,7 @@ export const EditView = ({
           close: true,
         },
       })
+      notifyScheduleSuspended()
       setEditState({ status: 'success', message: description })
       // The deleted locale may be the one being viewed — land on the default
       // locale (which always survives) so the loader re-fetches a valid view.
@@ -457,6 +582,10 @@ export const EditView = ({
         })
       }
 
+      if (contentDirty && scheduledPublication?.state === 'armed') {
+        notifyScheduleSuspended()
+      }
+
       const description = t('collections.edit.updatedDescription', { label: singularLower })
       toastManager.add({
         title: t('collections.edit.updateTitle', { label: singular }),
@@ -531,6 +660,16 @@ export const EditView = ({
           }
           onStatusChange={handleStatusChange}
           onUnpublish={publishedVersion ? handleUnpublish : undefined}
+          scheduledPublication={scheduledPublication}
+          onSchedulePublication={canArmSchedule ? handleSchedulePublication : undefined}
+          onConfirmScheduledPublication={
+            canArmSchedule && scheduledPublication?.state === 'needs_reconfirm'
+              ? handleConfirmScheduledPublication
+              : undefined
+          }
+          onCancelScheduledPublication={
+            scheduledPublication != null ? handleCancelScheduledPublication : undefined
+          }
           onDelete={handleDelete}
           onDuplicate={handleDuplicate}
           onCopyToLocale={handleCopyToLocale}

package/src/admin-shell/scheduled-publications/list.module.css

@@ -0,0 +1,105 @@
+.head {
+  margin-bottom: var(--spacing-16);
+}
+
+.title {
+  margin-bottom: var(--spacing-4);
+}
+
+.intro {
+  margin: 0;
+  color: var(--gray-500);
+}
+
+.health {
+  margin-bottom: var(--spacing-16);
+}
+
+/* Filters and pagination are separate jobs and used at different moments, so
+   they sit at opposite ends of one row rather than running together — the
+   pager previously read as a third filter control. */
+.controls {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: flex-end;
+  justify-content: space-between;
+  gap: var(--spacing-16);
+  margin-bottom: var(--spacing-4);
+}
+
+.filters-help {
+  margin: 0 0 var(--spacing-16);
+  color: var(--gray-500);
+  font-size: var(--font-size-sm);
+}
+
+.filters {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: flex-end;
+  gap: var(--spacing-12);
+}
+
+.filter {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-4);
+  min-width: 12rem;
+}
+
+.filter-authorizer :global(.byline-input-wrapper) {
+  min-width: 22rem;
+}
+
+/* Sits on the control baseline, not the label baseline, so the buttons line up
+   with the inputs rather than floating against their labels. */
+.filter-actions {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-8);
+  padding-bottom: 0.1rem;
+}
+
+.tableWrap {
+  margin-top: 0.75rem;
+  overflow-x: auto;
+}
+
+.collection,
+.zone,
+.error {
+  display: block;
+  margin-top: var(--spacing-4);
+  color: var(--gray-500);
+  font-size: var(--font-size-xs);
+}
+
+.instant {
+  white-space: nowrap;
+}
+
+/* The whole point of this column is offboarding — an operator pastes an
+   account id in and compares. Tabular figures make mismatches visible. */
+.authorizer {
+  font-family: var(--font-family-mono, monospace);
+  font-size: var(--font-size-xs);
+  overflow-wrap: anywhere;
+}
+
+.error {
+  max-width: 24rem;
+  color: var(--red-600);
+  white-space: normal;
+}
+
+.empty {
+  padding: var(--spacing-32) 0;
+  color: var(--gray-500);
+  text-align: center;
+}
+
+.pagerBottom {
+  display: flex;
+  justify-content: flex-end;
+  margin-top: var(--spacing-16);
+}

package/src/admin-shell/scheduled-publications/list.tsx

@@ -0,0 +1,292 @@
+'use client'
+
+/**
+ * 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 { useMemo, useState } from 'react'
+import { useRouterState } from '@tanstack/react-router'
+
+import { deriveScheduledPublicationState } from '@byline/admin/react'
+import { useTranslation } from '@byline/i18n/react'
+import {
+  Alert,
+  Badge,
+  Button,
+  Container,
+  Section,
+  Select,
+  Table,
+  useToastManager,
+} from '@byline/ui/react'
+import cx from 'clsx'
+
+import { getAdminRoutePath } from '../../routes/admin-path.js'
+import { cancelCollectionDocumentScheduledPublish } from '../../server-fns/collections/index.js'
+import { Link, useNavigate } from '../chrome/loose-router.js'
+import { RouterPager } from '../chrome/router-pager.js'
+import styles from './list.module.css'
+import type { ScheduledPublicationListResponse } from '../../server-fns/collections/index.js'
+
+/**
+ * Badge intent per state. Armed is informational; the two states that mean
+ * automatic publication is not going to happen unaided are warnings.
+ */
+const STATE_INTENT = {
+  none: 'noeffect',
+  armed: 'info',
+  needs_reconfirm: 'warning',
+  overdue: 'warning',
+} as const
+
+export function ScheduledPublicationsView({ data }: { data: ScheduledPublicationListResponse }) {
+  const { t, locale } = useTranslation('byline-admin')
+  // One clock reading for the whole render, so every row's armed/overdue
+  // boundary is decided against the same instant.
+  const now = Date.now()
+  const timeZone = useMemo(() => Intl.DateTimeFormat().resolvedOptions().timeZone || 'UTC', [])
+  const instantFormat = useMemo(
+    () => new Intl.DateTimeFormat(locale, { dateStyle: 'medium', timeStyle: 'short', timeZone }),
+    [locale, timeZone]
+  )
+  const navigate = useNavigate()
+  const toastManager = useToastManager()
+  const location = useRouterState({ select: (state) => state.location })
+  const search = location.search as {
+    state?: 'armed' | 'needs_reconfirm'
+    page?: number
+  }
+  const [cancelling, setCancelling] = useState<string | null>(null)
+
+  const applySearch = (patch: Record<string, unknown>) => {
+    navigate({
+      to: getAdminRoutePath('scheduled-publications'),
+      search: { ...(location.search as Record<string, unknown>), ...patch, page: undefined },
+    })
+  }
+
+  const cancel = async (collection: string, documentId: string) => {
+    setCancelling(documentId)
+    try {
+      const result = await cancelCollectionDocumentScheduledPublish({
+        data: { collection, id: documentId },
+      })
+      const cancelled = result.status === 'cancelled'
+      toastManager.add({
+        title: cancelled
+          ? t('scheduledPublication.toast.cancelledTitle')
+          : t('scheduledPublication.toast.cancelLostTitle'),
+        description: cancelled
+          ? t('scheduledPublication.toast.cancelledDescription')
+          : t('scheduledPublication.toast.cancelLostDescription'),
+        data: {
+          intent: cancelled ? 'success' : 'warning',
+          iconType: cancelled ? 'success' : 'warning',
+          icon: true,
+          close: true,
+        },
+      })
+      navigate({
+        to: getAdminRoutePath('scheduled-publications'),
+        search: location.search as Record<string, unknown>,
+      })
+    } catch (error) {
+      toastManager.add({
+        title: t('scheduledPublication.toast.failedTitle'),
+        description: (error as Error).message,
+        data: { intent: 'danger', iconType: 'danger', icon: true, close: true },
+      })
+    } finally {
+      setCancelling(null)
+    }
+  }
+
+  const unhealthy = data.runtime.health?.status !== 'healthy'
+
+  return (
+    <Section>
+      <Container>
+        <div className={cx('byline-scheduled-list-head', styles.head)}>
+          <h1 className={styles.title}>{t('scheduledPublication.list.title')}</h1>
+          <p className={styles.intro}>{t('scheduledPublication.list.intro')}</p>
+        </div>
+
+        {unhealthy && (
+          <Alert
+            className={styles.health}
+            intent="warning"
+            icon={true}
+            close={false}
+            title={t('scheduledPublication.list.schedulerWarningTitle')}
+          >
+            {t('scheduledPublication.list.schedulerWarningBody', {
+              status: data.runtime.health?.status ?? 'not_started',
+            })}
+          </Alert>
+        )}
+
+        <div className={styles.controls}>
+          <div className={styles.filters}>
+            <div className={styles.filter}>
+              <Select<string>
+                id="scheduled-publication-state"
+                name="scheduled-publication-state"
+                ariaLabel={t('scheduledPublication.list.filters.state')}
+                size="sm"
+                value={search.state ?? '_all'}
+                items={[
+                  { value: '_all', label: t('scheduledPublication.list.filters.allStates') },
+                  { value: 'armed', label: t('scheduledPublication.list.states.armed') },
+                  {
+                    value: 'needs_reconfirm',
+                    label: t('scheduledPublication.list.states.needsReconfirm'),
+                  },
+                ]}
+                onValueChange={(value) =>
+                  applySearch({ state: value === '_all' ? undefined : value })
+                }
+              />
+            </div>
+          </div>
+          <RouterPager
+            page={data.meta.page}
+            count={data.meta.totalPages}
+            showFirstButton
+            showLastButton
+            componentName="scheduledPublicationsPagerTop"
+            aria-label={t('scheduledPublication.list.pagerAriaLabel')}
+          />
+        </div>
+
+        {data.schedules.length === 0 ? (
+          <p className={styles.empty}>{t('scheduledPublication.list.empty')}</p>
+        ) : (
+          <Table.Container className={styles.tableWrap}>
+            <Table>
+              <Table.Header>
+                <Table.Row>
+                  <Table.HeadingCell scope="col">
+                    {t('scheduledPublication.list.columns.document')}
+                  </Table.HeadingCell>
+                  <Table.HeadingCell scope="col">
+                    {t('scheduledPublication.list.columns.publishAt')}
+                  </Table.HeadingCell>
+                  <Table.HeadingCell scope="col">
+                    {t('scheduledPublication.list.columns.state')}
+                  </Table.HeadingCell>
+                  <Table.HeadingCell scope="col">
+                    {t('scheduledPublication.list.columns.authorizer')}
+                  </Table.HeadingCell>
+                  <Table.HeadingCell scope="col">
+                    {t('scheduledPublication.list.columns.attempt')}
+                  </Table.HeadingCell>
+                  <Table.HeadingCell scope="col">
+                    {t('scheduledPublication.list.columns.actions')}
+                  </Table.HeadingCell>
+                </Table.Row>
+              </Table.Header>
+              <Table.Body>
+                {data.schedules.map((schedule) => {
+                  // Same derivation the document editor uses, so a row here and
+                  // the document it links to can never disagree about whether a
+                  // schedule has gone overdue.
+                  const state = deriveScheduledPublicationState(
+                    schedule,
+                    { canSchedule: false, canConfirm: false, canCancel: true },
+                    now
+                  )
+                  const publishAt = new Date(schedule.publishAt)
+                  return (
+                    <Table.Row key={schedule.documentId}>
+                      <Table.Cell>
+                        <Link
+                          to={getAdminRoutePath('collections', '$collection', '$id')}
+                          params={{
+                            collection: schedule.collectionPath,
+                            id: schedule.documentId,
+                          }}
+                        >
+                          {schedule.documentPath || schedule.documentId}
+                        </Link>
+                        <span className={styles.collection}>{schedule.collectionLabel}</span>
+                      </Table.Cell>
+                      <Table.Cell>
+                        <time className={styles.instant} dateTime={publishAt.toISOString()}>
+                          {instantFormat.format(publishAt)}
+                        </time>
+                        <span className={styles.zone}>{timeZone}</span>
+                      </Table.Cell>
+                      <Table.Cell>
+                        <Badge intent={STATE_INTENT[state.kind]}>
+                          {state.kind === 'needs_reconfirm'
+                            ? t('scheduledPublication.list.states.needsReconfirm')
+                            : state.kind === 'overdue'
+                              ? t('scheduledPublication.list.states.overdue')
+                              : t('scheduledPublication.list.states.armed')}
+                        </Badge>
+                      </Table.Cell>
+                      <Table.Cell>
+                        {schedule.lastAuthorizedByName != null ? (
+                          <span>{schedule.lastAuthorizedByName}</span>
+                        ) : schedule.lastAuthorizedBy != null ? (
+                          // The account is gone — the schedule outlives it by
+                          // design — so the id is all there is left to identify
+                          // who authorized this.
+                          <span
+                            className={styles.authorizer}
+                            title={t('scheduledPublication.list.authorizerMissing')}
+                          >
+                            {schedule.lastAuthorizedBy}
+                          </span>
+                        ) : (
+                          <span>—</span>
+                        )}
+                      </Table.Cell>
+                      <Table.Cell>
+                        <span>{schedule.attemptCount}</span>
+                        {schedule.lastError != null && (
+                          <span className={styles.error}>{schedule.lastError}</span>
+                        )}
+                      </Table.Cell>
+                      <Table.Cell>
+                        <Button
+                          size="xs"
+                          type="button"
+                          intent="danger"
+                          disabled={cancelling === schedule.documentId}
+                          // The column header already says Actions and the row
+                          // is a schedule, so the short label carries here —
+                          // unlike the editor's menu, where "Cancel schedule"
+                          // has to distinguish itself from cancelling an edit.
+                          aria-label={t('scheduledPublication.actions.cancel')}
+                          onClick={() => cancel(schedule.collectionPath, schedule.documentId)}
+                        >
+                          {t('common.actions.cancel')}
+                        </Button>
+                      </Table.Cell>
+                    </Table.Row>
+                  )
+                })}
+              </Table.Body>
+            </Table>
+          </Table.Container>
+        )}
+
+        <div className={styles.pagerBottom}>
+          <RouterPager
+            page={data.meta.page}
+            count={data.meta.totalPages}
+            showFirstButton
+            showLastButton
+            componentName="scheduledPublicationsPagerBottom"
+            aria-label={t('scheduledPublication.list.pagerAriaLabel')}
+          />
+        </div>
+      </Container>
+    </Section>
+  )
+}