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
73
|
import PropTypes from 'prop-types'
import React from 'react'
import Link from 'next/link'
import { Project, Status } from '../../shapes'
import { Table, TableBody, TableHeader } from '@patternfly/react-table'
import { parseAndFormatDateTime } from '../../util/date-time'
import { AUTH_DESCRIPTION_MAP, AUTH_ICON_MAP } from '../../util/authorizations'
import TableEmptyState from '../util/TableEmptyState'
const ProjectTable = ({ status, projects, onDelete, isFiltering }) => {
const columns = ['Project name', 'Last edited', 'Access Rights']
const rows =
projects.length > 0
? projects.map((project) => {
const Icon = AUTH_ICON_MAP[project.role]
return [
{
title: <Link href={`/projects/${project.id}`}>{project.name}</Link>,
},
parseAndFormatDateTime(project.updatedAt),
{
title: (
<>
<Icon className="pf-u-mr-md" key="auth" /> {AUTH_DESCRIPTION_MAP[project.role]}
</>
),
},
]
})
: [
{
heightAuto: true,
cells: [
{
props: { colSpan: 3 },
title: (
<TableEmptyState
status={status}
loadingTitle="Loading Projects"
isFiltering={isFiltering}
/>
),
},
],
},
]
const actions =
projects.length > 0
? [
{
title: 'Delete Project',
onClick: (_, rowId) => onDelete(projects[rowId]),
},
]
: []
return (
<Table aria-label="Project List" variant="compact" cells={columns} rows={rows} actions={actions}>
<TableHeader />
<TableBody />
</Table>
)
}
ProjectTable.propTypes = {
status: Status.isRequired,
isFiltering: PropTypes.bool,
projects: PropTypes.arrayOf(Project).isRequired,
onDelete: PropTypes.func,
}
export default ProjectTable
|
