merge: Integrate v2.1 progress into public repository

This pull request integrates the changes planned for the v2.1 release of
OpenDC into the public Github repository in order to sync the progress
of both repositories.

1 files changed, 76 insertions, 0 deletions

diff --git a/opendc-web/opendc-web-ui/src/components/projects/ProjectTable.js b/opendc-web/opendc-web-ui/src/components/projects/ProjectTable.js
new file mode 100644
index 00000000..a7290259
--- /dev/null
+++ b/opendc-web/opendc-web-ui/src/components/projects/ProjectTable.js
@@ -0,0 +1,76 @@
+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 { useAuth } from '../../auth'
+import TableEmptyState from '../util/TableEmptyState'
+
+const ProjectTable = ({ status, projects, onDelete, isFiltering }) => {
+    const { user } = useAuth()
+    const columns = ['Project name', 'Last edited', 'Access Rights']
+    const rows =
+        projects.length > 0
+            ? projects.map((project) => {
+                  const { level } = project.authorizations.find((auth) => auth.userId === user.sub)
+                  const Icon = AUTH_ICON_MAP[level]
+                  return [
+                      {
+                          title: <Link href={`/projects/${project._id}`}>{project.name}</Link>,
+                      },
+                      parseAndFormatDateTime(project.datetimeLastEdited),
+                      {
+                          title: (
+                              <>
+                                  <Icon className="pf-u-mr-md" key="auth" /> {AUTH_DESCRIPTION_MAP[level]}
+                              </>
+                          ),
+                      },
+                  ]
+              })
+            : [
+                  {
+                      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