All files / features / repositories RepositoriesPage.tsx

64.58% Statements 31/48
46.42% Branches 13/28
56.25% Functions 9/16
72.5% Lines 29/40

Press n or j to go to the next uncovered block, b, p or k for the previous block.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72        38x     102x         52x 4x   4x   26x           38x   20x 20x               102x                         102x             4x       102x         4x           102x 102x  
import { Outlet } from 'react-router-dom'
import { Page, DataTable, Crud } from '@/layers/L2R'
import type { PageConfig, ListConfig, CrudConfig } from '@/layers/interfaces'
import { formatRelativeTime } from '@/shared/utils/format'
import { REPOSITORY_FIELD_SET, REPOSITORY_FIELD_TYPES } from './repositoriesCrudConfig'
 
function RepoStatus({ status }: { status: unknown }) {
  if (status === 'connected') return <span>🟢 Connected</span>
  if (status === 'disconnected') return <span>🔴 Disconnected</span>
  return <span>⚪ Unknown</span>
}
 
export function RepositoriesPage() {
  const pageConfig: PageConfig = { title: 'Repositories' }
 
  const listConfig: ListConfig = {
    entityPath: 'repositories',
    prefix: 'repos',
    columns: [
      {
        field: 'name',
        label: 'Name',
        sortable: true,
        render: (row) => <a href={`#/repositories/${row.id}`}>{row.name as string}</a>,
      },
      {
        field: 'description',
        label: 'Description',
        sortable: true,
        render: (row) => (row.description ? String(row.description) : '\u2014'),
      },
      { field: 'url', label: 'URL', sortable: true },
      {
        field: 'status',
        label: 'Status',
        sortable: true,
        render: (row) => <RepoStatus status={row.status} />,
      },
      {
        field: 'last_checked_at',
        label: 'Last Checked',
        sortable: true,
        render: (row) => {
          const val = row.last_checked_at as string | null | undefined
          return val ? formatRelativeTime(val) : 'Never'
        },
      },
    ],
    sort: { field: 'name', order: 'asc' },
    createTarget: '/repositories/add',
    createLabel: '+ New Repository',
    rowTarget: '/repositories/:id',
  }
 
  const crudConfig: CrudConfig = {
    entityPath: 'repositories',
    fieldSet: REPOSITORY_FIELD_SET,
    fieldTypes: REPOSITORY_FIELD_TYPES,
    successTarget: '/repositories/:id',
    cancelTarget: '/repositories',
    title: 'Add New Repository',
  }
 
  return (
    <Page config={pageConfig}>
      <DataTable config={listConfig} />
      <Crud config={crudConfig} />
      <Outlet />
    </Page>
  )
}