@byline/host-tanstack-start 2.5.1 → 2.6.0

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

@@ -8,10 +8,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 type { AnyCollectionSchemaTypes } from '@byline/core/zod-schemas'
-import { Container, FormRenderer, Section, useToastManager } from '@byline/ui/react'
+import { useTranslation } from '@byline/i18n/react'
+import { Container, Section, useToastManager } from '@byline/ui/react'
 
 import {
   copyDocumentToLocale,
@@ -47,12 +49,15 @@ export const EditView = ({
   defaultContentLocale: string
 }) => {
   const toastManager = useToastManager()
+  const { t } = useTranslation('byline-admin')
   const [_editState, setEditState] = useState<EditState>({
     status: 'idle',
     message: '',
   })
   const navigate = useNavigate()
   const { labels, path, fields } = collectionDefinition
+  const singular = labels.singular
+  const singularLower = singular.toLowerCase()
 
   // Compute the next forward workflow status for the status button.
   const workflowStatuses = getWorkflowStatuses(collectionDefinition)
@@ -77,9 +82,10 @@ export const EditView = ({
       await updateDocumentStatus({
         data: { collection: path, id: String(initialData.id), status },
       })
+      const description = t('collections.edit.statusChangedDescription', { status })
       toastManager.add({
-        title: `${labels.singular} Status Update`,
-        description: `Status changed to "${status}"`,
+        title: t('collections.edit.statusUpdateTitle', { label: singular }),
+        description,
         data: {
           intent: 'success',
           iconType: 'success',
@@ -87,10 +93,7 @@ export const EditView = ({
           close: true,
         },
       })
-      setEditState({
-        status: 'success',
-        message: `Status changed to "${status}"`,
-      })
+      setEditState({ status: 'success', message: description })
       // Refresh the page to reflect the new status.
       navigate({
         to: '/admin/collections/$collection/$id' as never,
@@ -99,9 +102,12 @@ export const EditView = ({
       })
     } catch (err) {
       console.error('Status change error:', err)
+      const description = t('collections.edit.statusChangeFailedDescription', {
+        message: (err as Error).message,
+      })
       toastManager.add({
-        title: `${labels.singular} Status Update`,
-        description: `Failed to change status: ${(err as Error).message}`,
+        title: t('collections.edit.statusUpdateTitle', { label: singular }),
+        description,
         data: {
           intent: 'danger',
           iconType: 'danger',
@@ -109,10 +115,7 @@ export const EditView = ({
           close: true,
         },
       })
-      setEditState({
-        status: 'failed',
-        message: `Failed to change status: ${(err as Error).message}`,
-      })
+      setEditState({ status: 'failed', message: description })
     }
   }
 
@@ -131,9 +134,10 @@ export const EditView = ({
   const handleUnpublish = async () => {
     try {
       await unpublishDocument({ data: { collection: path, id: String(initialData.id) } })
+      const description = t('collections.edit.unpublishedDescription')
       toastManager.add({
-        title: `${labels.singular} Unpublish`,
-        description: 'Published version has been taken offline.',
+        title: t('collections.edit.unpublishTitle', { label: singular }),
+        description,
         data: {
           intent: 'success',
           iconType: 'success',
@@ -141,10 +145,7 @@ export const EditView = ({
           close: true,
         },
       })
-      setEditState({
-        status: 'success',
-        message: 'Published version has been taken offline.',
-      })
+      setEditState({ status: 'success', message: description })
       navigate({
         to: '/admin/collections/$collection/$id' as never,
         params: { collection: path, id: String(initialData.id) },
@@ -152,9 +153,12 @@ export const EditView = ({
       })
     } catch (err) {
       console.error('Unpublish error:', err)
+      const description = t('collections.edit.unpublishFailedDescription', {
+        message: (err as Error).message,
+      })
       toastManager.add({
-        title: `${labels.singular} Unpublish`,
-        description: `Failed to unpublish: ${(err as Error).message}`,
+        title: t('collections.edit.unpublishTitle', { label: singular }),
+        description,
         data: {
           intent: 'danger',
           iconType: 'danger',
@@ -162,10 +166,7 @@ export const EditView = ({
           close: true,
         },
       })
-      setEditState({
-        status: 'failed',
-        message: `Failed to unpublish: ${(err as Error).message}`,
-      })
+      setEditState({ status: 'failed', message: description })
     }
   }
 
@@ -174,11 +175,12 @@ export const EditView = ({
       const result = await duplicateCollectionDocument({
         data: { collection: path, id: String(initialData.id) },
       })
+      const description = result.pathRetried
+        ? t('collections.edit.duplicatedAutoPathDescription', { path: result.newPath })
+        : t('collections.edit.duplicatedPathDescription', { path: result.newPath })
       toastManager.add({
-        title: `${labels.singular} Duplicated`,
-        description: result.pathRetried
-          ? `Created with auto-generated path "${result.newPath}" (the preferred slug was already in use).`
-          : `Created with path "${result.newPath}". Update the title and path in the new document.`,
+        title: t('collections.edit.duplicatedTitle', { label: singular }),
+        description,
         data: {
           intent: 'success',
           iconType: 'success',
@@ -188,7 +190,7 @@ export const EditView = ({
       })
       setEditState({
         status: 'success',
-        message: `${labels.singular} duplicated.`,
+        message: t('collections.edit.duplicatedSuccessMessage', { label: singular }),
       })
       // Navigate to the new document's edit view.
       navigate({
@@ -197,9 +199,12 @@ export const EditView = ({
       })
     } catch (err) {
       console.error('Duplicate error:', err)
+      const description = t('collections.edit.duplicateFailedDescription', {
+        message: (err as Error).message,
+      })
       toastManager.add({
-        title: `${labels.singular} Duplicate`,
-        description: `Failed to duplicate: ${(err as Error).message}`,
+        title: t('collections.edit.duplicateTitle', { label: singular }),
+        description,
         data: {
           intent: 'danger',
           iconType: 'danger',
@@ -207,10 +212,7 @@ export const EditView = ({
           close: true,
         },
       })
-      setEditState({
-        status: 'failed',
-        message: `Failed to duplicate: ${(err as Error).message}`,
-      })
+      setEditState({ status: 'failed', message: description })
     }
   }
 
@@ -235,12 +237,20 @@ export const EditView = ({
         contentLocales.find((l) => l.code === result.sourceLocale)?.label ?? result.sourceLocale
       const targetLabel =
         contentLocales.find((l) => l.code === result.targetLocale)?.label ?? result.targetLocale
+      const description =
+        result.fieldsUpdated > 0
+          ? t('collections.edit.copiedFieldsDescription', {
+              count: result.fieldsUpdated,
+              source: sourceLabel,
+              target: targetLabel,
+            })
+          : t('collections.edit.copiedNoFieldsDescription', {
+              source: sourceLabel,
+              target: targetLabel,
+            })
       toastManager.add({
-        title: `${labels.singular} Copy to Locale`,
-        description:
-          result.fieldsUpdated > 0
-            ? `Copied ${result.fieldsUpdated} field${result.fieldsUpdated === 1 ? '' : 's'} from ${sourceLabel} to ${targetLabel}.`
-            : `No fields needed copying from ${sourceLabel} to ${targetLabel} under the current rule.`,
+        title: t('collections.edit.copyToLocaleTitle', { label: singular }),
+        description,
         data: {
           intent: 'success',
           iconType: 'success',
@@ -250,7 +260,10 @@ export const EditView = ({
       })
       setEditState({
         status: 'success',
-        message: `Copied ${sourceLabel} → ${targetLabel}.`,
+        message: t('collections.edit.copiedSuccessMessage', {
+          source: sourceLabel,
+          target: targetLabel,
+        }),
       })
       // Switch the form to the target locale so the editor sees the
       // copied content immediately.
@@ -261,9 +274,12 @@ export const EditView = ({
       })
     } catch (err) {
       console.error('Copy to locale error:', err)
+      const description = t('collections.edit.copyFailedDescription', {
+        message: (err as Error).message,
+      })
       toastManager.add({
-        title: `${labels.singular} Copy to Locale`,
-        description: `Failed to copy: ${(err as Error).message}`,
+        title: t('collections.edit.copyToLocaleTitle', { label: singular }),
+        description,
         data: {
           intent: 'danger',
           iconType: 'danger',
@@ -271,19 +287,17 @@ export const EditView = ({
           close: true,
         },
       })
-      setEditState({
-        status: 'failed',
-        message: `Failed to copy: ${(err as Error).message}`,
-      })
+      setEditState({ status: 'failed', message: description })
     }
   }
 
   const handleDelete = async () => {
     try {
       await deleteDocument({ data: { collection: path, id: String(initialData.id) } })
+      const description = t('collections.edit.deletedDescription', { label: singular })
       toastManager.add({
-        title: `${labels.singular} Deletion`,
-        description: `${labels.singular} has been deleted.`,
+        title: t('collections.edit.deleteTitle', { label: singular }),
+        description,
         data: {
           intent: 'success',
           iconType: 'success',
@@ -291,10 +305,7 @@ export const EditView = ({
           close: true,
         },
       })
-      setEditState({
-        status: 'success',
-        message: `${labels.singular} has been deleted.`,
-      })
+      setEditState({ status: 'success', message: description })
       // Navigate back to the collection list after deletion.
       navigate({
         to: '/admin/collections/$collection' as never,
@@ -302,9 +313,12 @@ export const EditView = ({
       })
     } catch (err) {
       console.error('Delete error:', err)
+      const description = t('collections.edit.deleteFailedDescription', {
+        message: (err as Error).message,
+      })
       toastManager.add({
-        title: `${labels.singular} Deletion`,
-        description: `Failed to delete: ${(err as Error).message}`,
+        title: t('collections.edit.deleteTitle', { label: singular }),
+        description,
         data: {
           intent: 'danger',
           iconType: 'danger',
@@ -312,10 +326,7 @@ export const EditView = ({
           close: true,
         },
       })
-      setEditState({
-        status: 'failed',
-        message: `Failed to delete: ${(err as Error).message}`,
-      })
+      setEditState({ status: 'failed', message: description })
     }
   }
 
@@ -342,9 +353,10 @@ export const EditView = ({
         },
       })
 
+      const description = t('collections.edit.updatedDescription', { label: singularLower })
       toastManager.add({
-        title: `${labels.singular} Update`,
-        description: `Successfully updated ${labels.singular.toLowerCase()}`,
+        title: t('collections.edit.updateTitle', { label: singular }),
+        description,
         data: {
           intent: 'success',
           iconType: 'success',
@@ -353,10 +365,7 @@ export const EditView = ({
         },
       })
 
-      setEditState({
-        status: 'success',
-        message: `Successfully updated ${labels.singular.toLowerCase()}`,
-      })
+      setEditState({ status: 'success', message: description })
 
       // 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
@@ -368,9 +377,10 @@ export const EditView = ({
       })
     } catch (err) {
       console.error('Network error:', err)
+      const description = t('collections.edit.updateFailedDescription', { label: singularLower })
       toastManager.add({
-        title: `${labels.singular} Update`,
-        description: `An error occurred while updating ${labels.singular.toLowerCase()}`,
+        title: t('collections.edit.updateTitle', { label: singular }),
+        description,
         data: {
           intent: 'danger',
           iconType: 'danger',
@@ -379,10 +389,7 @@ export const EditView = ({
         },
       })
 
-      setEditState({
-        status: 'failed',
-        message: `An error occurred while updating ${labels.singular.toLowerCase()}`,
-      })
+      setEditState({ status: 'failed', message: description })
     }
   }
 

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

@@ -9,19 +9,19 @@
 import { lazy, Suspense, useState } from 'react'
 import { useParams, useRouterState } from '@tanstack/react-router'
 
+import { 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'
+import { useTranslation } from '@byline/i18n/react'
 import {
   Button,
   CloseIcon,
   Container,
   IconButton,
   Modal,
-  renderFormatted,
   Section,
   Select,
-  StatusBadge,
   Table,
 } from '@byline/ui/react'
 import cx from 'classnames'
@@ -48,7 +48,7 @@ function getColumnValue(document: any, fieldName: string): any {
 
 // Lazy-load DiffModal because react-diff-viewer-continued uses a web worker
 // bundle that cannot be resolved by Node during SSR.
-const DiffModal = lazy(() => import('@byline/ui/react').then((m) => ({ default: m.DiffModal })))
+const DiffModal = lazy(() => import('@byline/admin/react').then((m) => ({ default: m.DiffModal })))
 
 /**
  * Safely extract a displayable string from a field value that may be a plain
@@ -116,6 +116,7 @@ export const HistoryView = ({
   })
   const navigate = useNavigate()
   const { getCollectionDocumentVersion } = useBylineAdminServices()
+  const { t } = useTranslation('byline-admin')
   const columns = adminConfig?.columns || []
   const { labels } = collectionDefinition
   const location = useRouterState({ select: (s) => s.location })
@@ -152,7 +153,8 @@ export const HistoryView = ({
         <Container>
           <div className={cx('byline-coll-history-head', styles.head)}>
             <h2 className={cx('byline-coll-history-title', styles.title)}>
-              {labels.singular} History <Stats total={data?.meta.total} />
+              {t('collections.history.title', { label: labels.singular })}{' '}
+              <Stats total={data?.meta.total} />
             </h2>
             <ViewMenu
               collection={collection}
@@ -174,7 +176,7 @@ export const HistoryView = ({
               showFirstButton
               showLastButton
               componentName="pagerTop"
-              aria-label="Top Pager"
+              aria-label={t('collections.list.pagerTopAriaLabel')}
             />
           </div>
           <Table.Container className={cx('byline-coll-history-table-wrap', styles.tableWrap)}>
@@ -229,8 +231,8 @@ export const HistoryView = ({
                             size="xs"
                             variant="outlined"
                             intent="noeffect"
-                            aria-label="Compare this version with the current version"
-                            title="Compare with current"
+                            aria-label={t('collections.history.compareAriaLabel')}
+                            title={t('collections.history.compareTitle')}
                             className={cx(
                               'byline-coll-history-version-button',
                               styles.versionButton
@@ -349,9 +351,9 @@ export const HistoryView = ({
                                     'byline-coll-history-restore-button',
                                     styles.restoreButton
                                   )}
-                                  title="Restore this version as the current draft"
+                                  title={t('collections.history.restoreButtonTitle')}
                                 >
-                                  Restore
+                                  {t('collections.history.restoreButton')}
                                 </Button>
                               ) : null}
                             </Table.Cell>,
@@ -394,7 +396,7 @@ export const HistoryView = ({
               showFirstButton
               showLastButton
               componentName="pagerBottom"
-              aria-label="Bottom Pager"
+              aria-label={t('collections.list.pagerBottomAriaLabel')}
             />
           </div>
         </Container>
@@ -425,8 +427,12 @@ export const HistoryView = ({
           <Modal.Header
             className={cx('byline-coll-history-restore-modal-head', styles.restoreModalHead)}
           >
-            <h3 className="m-0">Restore version</h3>
-            <IconButton aria-label="Close" size="xs" onClick={() => setRestoreTarget(null)}>
+            <h3 className="m-0">{t('collections.history.restoreModalTitle')}</h3>
+            <IconButton
+              aria-label={t('common.actions.close')}
+              size="xs"
+              onClick={() => setRestoreTarget(null)}
+            >
               <CloseIcon width="14px" height="14px" svgClassName="white-icon" />
             </IconButton>
           </Modal.Header>

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

@@ -9,19 +9,20 @@
 import { useEffect, useMemo, useState } from 'react'
 import { useRouter, useRouterState } from '@tanstack/react-router'
 
+import { renderFormatted, StatusBadge } from '@byline/admin/react'
 import type { ColumnDefinition, WorkflowStatus } from '@byline/core'
 import type { AnyCollectionSchemaTypes } from '@byline/core/zod-schemas'
+import type { UseTranslationReturn } from '@byline/i18n/react'
+import { useTranslation } from '@byline/i18n/react'
 import {
   Container,
   GripperVerticalIcon,
   IconButton,
   LoaderRing,
   PlusIcon,
-  renderFormatted,
   Search,
   Section,
   Select,
-  StatusBadge,
   Table,
   useToastManager,
 } from '@byline/ui/react'
@@ -108,10 +109,12 @@ function padRows(value: number) {
 function SortableTableRow({
   id,
   disabled,
+  t,
   children,
 }: {
   id: string
   disabled: boolean
+  t: UseTranslationReturn['t']
   children: React.ReactNode
 }) {
   const { setNodeRef, attributes, listeners, transform, transition, isDragging } = useSortable({
@@ -132,7 +135,9 @@ function SortableTableRow({
           type="button"
           className={cx('byline-coll-list-drag-handle', styles.dragHandle)}
           aria-label={
-            disabled ? 'Drag disabled while filters or search are active' : 'Drag to reorder'
+            disabled
+              ? t('collections.list.dragDisabledAriaLabel')
+              : t('collections.list.dragHandleAriaLabel')
           }
           disabled={disabled}
           {...attributes}
@@ -166,6 +171,7 @@ export const ListView = ({
   const navigate = useNavigate()
   const router = useRouter()
   const toastManager = useToastManager()
+  const { t } = useTranslation('byline-admin')
   const location = useRouterState({ select: (s) => s.location })
 
   // Local mirror of the loader docs so drag-and-drop can paint the new
@@ -229,8 +235,8 @@ export const ListView = ({
     } catch (_err) {
       setLocalDocs(previousDocs)
       toastManager.add({
-        title: 'Could not save the new order',
-        description: 'Please try again.',
+        title: t('collections.list.reorderFailedToast'),
+        description: t('collections.list.reorderFailedDescription'),
         data: { intent: 'danger', iconType: 'danger', icon: true, close: true },
       })
     } finally {
@@ -244,10 +250,10 @@ export const ListView = ({
   // exceeded" inside SelectRoot after navigations that cause a re-render).
   const statusItems = useMemo(
     () => [
-      { value: '_all', label: 'All' },
+      { value: '_all', label: t('collections.list.statusFilterAll') },
       ...(workflowStatuses?.map((ws) => ({ value: ws.name, label: ws.label ?? ws.name })) ?? []),
     ],
-    [workflowStatuses]
+    [workflowStatuses, t]
   )
 
   const handleOnSearch = (query: string): void => {
@@ -311,7 +317,7 @@ export const ListView = ({
           </h1>
           <Stats total={data?.meta.total} />
           <IconButton
-            aria-label="Create New"
+            aria-label={t('collections.list.createAriaLabel')}
             render={
               <Link
                 to={'/admin/collections/$collection/create' as never}
@@ -327,7 +333,7 @@ export const ListView = ({
             onSearch={handleOnSearch}
             onClear={handleOnClear}
             inputSize="sm"
-            placeholder="Search"
+            placeholder={t('collections.list.searchPlaceholder')}
             className={cx('byline-coll-list-search', styles.search)}
           />
 
@@ -348,7 +354,7 @@ export const ListView = ({
             showFirstButton
             showLastButton
             componentName="pagerTop"
-            aria-label="Top Pager"
+            aria-label={t('collections.list.pagerTopAriaLabel')}
           />
         </div>
         <Table.Container className={cx('byline-coll-list-table-wrap', styles.tableWrap)}>
@@ -388,8 +394,8 @@ export const ListView = ({
                               search: params,
                             })
                           }}
-                          aria-label="Sort by manual order"
-                          title="Sort by manual order"
+                          aria-label={t('collections.list.sortManualOrderAriaLabel')}
+                          title={t('collections.list.sortManualOrderAriaLabel')}
                         >
                           <SortAscendingIcon />
                         </button>
@@ -412,7 +418,12 @@ export const ListView = ({
 
                   <Table.Body>
                     {localDocs.map((document) => (
-                      <SortableTableRow key={document.id} id={document.id} disabled={!dragEnabled}>
+                      <SortableTableRow
+                        key={document.id}
+                        id={document.id}
+                        disabled={!dragEnabled}
+                        t={t}
+                      >
                         {columns.map((column) => (
                           <Table.Cell
                             key={String(column.fieldName)}
@@ -567,7 +578,7 @@ export const ListView = ({
             showFirstButton
             showLastButton
             componentName="pagerBottom"
-            aria-label="Bottom Pager"
+            aria-label={t('collections.list.pagerBottomAriaLabel')}
           />
         </div>
       </Container>

package/src/admin-shell/collections/preview-link.tsx

@@ -18,11 +18,15 @@
  *      `window.location.assign(url)`.
  *
  * The preview URL comes from `CollectionAdminConfig.preview.url(doc, ctx)`
- * when configured; otherwise it falls back to the conventional
- * `/${collectionPath}/${doc.path}`. When the configured `url(...)` returns
- * `null` (missing slug, missing required relation, etc.), the icon is
- * not rendered at all — there is no public URL meaningful for this
- * document yet, so offering a preview link would just lead to a 404.
+ * when configured; otherwise it falls back through the schema's
+ * `CollectionDefinition.buildDocumentPath` (the single source of truth
+ * the richtext embed walker also reads) and finally to the conventional
+ * `/${collectionPath}/${doc.path}`. When the configured `url(...)`
+ * returns `null` (missing slug, missing required relation, etc.), the
+ * icon is not rendered at all — there is no public URL meaningful for
+ * this document yet, so offering a preview link would just lead to a
+ * 404. Hosts that need a locale prefix, query string, or other request-
+ * scoped composition still write their own `preview.url`.
  *
  * The component does not load the document itself. Callers pass the
  * already-loaded `doc` from their route loader. The edit-view loader
@@ -42,10 +46,14 @@
 import { useState } from 'react'
 
 import type { CollectionAdminConfig, PreviewDocument } from '@byline/core'
+import { useTranslation } from '@byline/i18n/react'
 import { ExternalLinkIcon, IconButton, useToastManager } from '@byline/ui/react'
 import cx from 'classnames'
 
 import { enablePreviewModeFn } from '../../server-fns/preview/index.js'
+import { resolvePreviewUrl } from './resolve-preview-url.js'
+
+export { resolvePreviewUrl } from './resolve-preview-url.js'
 
 export interface PreviewLinkProps {
   /** Collection path (e.g. `'news'`, `'pages'`). */
@@ -60,30 +68,6 @@ export interface PreviewLinkProps {
   className?: string
 }
 
-/**
- * Resolve the preview URL for a doc against an admin config. Exported so
- * other surfaces (list-row preview links in the future) can share the
- * same fallback logic.
- *
- * Returns:
- *   - `string`  → URL to open
- *   - `null`    → no preview URL meaningful for this doc; hide affordance
- */
-export function resolvePreviewUrl(
-  doc: PreviewDocument,
-  collectionPath: string,
-  adminConfig: CollectionAdminConfig | undefined,
-  locale: string | undefined
-): string | null {
-  if (adminConfig?.preview) {
-    return adminConfig.preview.url(doc, { locale })
-  }
-  // Default convention: collection lives at `/${collectionPath}/${path}`.
-  // Returns null when the doc has no path yet (unsaved, awaiting slug).
-  if (!doc.path) return null
-  return `/${collectionPath}/${doc.path}`
-}
-
 export const PreviewLink = ({
   collectionPath,
   doc,
@@ -92,6 +76,7 @@ export const PreviewLink = ({
   className,
 }: PreviewLinkProps) => {
   const toastManager = useToastManager()
+  const { t } = useTranslation('byline-admin')
   const [busy, setBusy] = useState(false)
 
   const url = resolvePreviewUrl(doc, collectionPath, adminConfig, locale)
@@ -108,8 +93,10 @@ export const PreviewLink = ({
       window.location.assign(url)
     } catch (err) {
       toastManager.add({
-        title: 'Preview',
-        description: `Could not enable preview mode: ${(err as Error).message}`,
+        title: t('collections.preview.toastTitle'),
+        description: t('collections.preview.failedDescription', {
+          message: (err as Error).message,
+        }),
         data: {
           intent: 'danger',
           iconType: 'danger',
@@ -129,8 +116,8 @@ export const PreviewLink = ({
       variant="text"
       disabled={busy}
       onClick={handleClick}
-      aria-label="Open preview"
-      title="Preview"
+      aria-label={t('collections.preview.openAriaLabel')}
+      title={t('collections.preview.title')}
     >
       <ExternalLinkIcon width="20px" height="20px" className="byline-preview-link-icon" />
     </IconButton>