Merge branch 'feature/mongodb-migration' of github.com:atlarge-research/opendc-dev into feature/mongodb-migration

7 files changed, 171 insertions, 0 deletions

diff --git a/frontend/src/components/projects/FilterButton.js b/frontend/src/components/projects/FilterButton.js
new file mode 100644
index 00000000..664f9b46
--- /dev/null
+++ b/frontend/src/components/projects/FilterButton.js
@@ -0,0 +1,24 @@
+import classNames from 'classnames'
+import PropTypes from 'prop-types'
+import React from 'react'
+
+const FilterButton = ({ active, children, onClick }) => (
+    <button
+        className={classNames('btn btn-secondary', { active: active })}
+        onClick={() => {
+            if (!active) {
+                onClick()
+            }
+        }}
+    >
+        {children}
+    </button>
+)
+
+FilterButton.propTypes = {
+    active: PropTypes.bool.isRequired,
+    children: PropTypes.node.isRequired,
+    onClick: PropTypes.func.isRequired,
+}
+
+export default FilterButton
diff --git a/frontend/src/components/projects/FilterPanel.js b/frontend/src/components/projects/FilterPanel.js
new file mode 100644
index 00000000..0970f573
--- /dev/null
+++ b/frontend/src/components/projects/FilterPanel.js
@@ -0,0 +1,13 @@
+import React from 'react'
+import FilterLink from '../../containers/projects/FilterLink'
+import './FilterPanel.css'
+
+const FilterPanel = () => (
+    <div className="btn-group filter-panel mb-2">
+        <FilterLink filter="SHOW_ALL">All Projects</FilterLink>
+        <FilterLink filter="SHOW_OWN">My Projects</FilterLink>
+        <FilterLink filter="SHOW_SHARED">Shared with me</FilterLink>
+    </div>
+)
+
+export default FilterPanel
diff --git a/frontend/src/components/projects/FilterPanel.sass b/frontend/src/components/projects/FilterPanel.sass
new file mode 100644
index 00000000..f71cf6c8
--- /dev/null
+++ b/frontend/src/components/projects/FilterPanel.sass
@@ -0,0 +1,5 @@
+.filter-panel
+    display: flex
+
+    button
+        flex: 1 !important
diff --git a/frontend/src/components/projects/NewProjectButtonComponent.js b/frontend/src/components/projects/NewProjectButtonComponent.js
new file mode 100644
index 00000000..3ddef5e5
--- /dev/null
+++ b/frontend/src/components/projects/NewProjectButtonComponent.js
@@ -0,0 +1,17 @@
+import PropTypes from 'prop-types'
+import React from 'react'
+
+const NewProjectButtonComponent = ({ onClick }) => (
+    <div className="bottom-btn-container">
+        <div className="btn btn-primary float-right" onClick={onClick}>
+            <span className="fa fa-plus mr-2"/>
+            New Project
+        </div>
+    </div>
+)
+
+NewProjectButtonComponent.propTypes = {
+    onClick: PropTypes.func.isRequired,
+}
+
+export default NewProjectButtonComponent
diff --git a/frontend/src/components/projects/ProjectActionButtons.js b/frontend/src/components/projects/ProjectActionButtons.js
new file mode 100644
index 00000000..456dd6b6
--- /dev/null
+++ b/frontend/src/components/projects/ProjectActionButtons.js
@@ -0,0 +1,37 @@
+import PropTypes from 'prop-types'
+import React from 'react'
+import { Link } from 'react-router-dom'
+
+const ProjectActionButtons = ({ projectId, onViewUsers, onDelete }) => (
+    <td className="text-right">
+        <Link
+            to={'/projects/' + projectId}
+            className="btn btn-outline-primary btn-sm mr-2"
+            title="Open this project"
+        >
+            <span className="fa fa-play"/>
+        </Link>
+        <div
+            className="btn btn-outline-success btn-sm disabled mr-2"
+            title="View and edit collaborators (not supported currently)"
+            onClick={() => onViewUsers(projectId)}
+        >
+            <span className="fa fa-users"/>
+        </div>
+        <div
+            className="btn btn-outline-danger btn-sm"
+            title="Delete this project"
+            onClick={() => onDelete(projectId)}
+        >
+            <span className="fa fa-trash"/>
+        </div>
+    </td>
+)
+
+ProjectActionButtons.propTypes = {
+    projectId: PropTypes.string.isRequired,
+    onViewUsers: PropTypes.func,
+    onDelete: PropTypes.func,
+}
+
+export default ProjectActionButtons
diff --git a/frontend/src/components/projects/ProjectAuthList.js b/frontend/src/components/projects/ProjectAuthList.js
new file mode 100644
index 00000000..5a2c6695
--- /dev/null
+++ b/frontend/src/components/projects/ProjectAuthList.js
@@ -0,0 +1,43 @@
+import PropTypes from 'prop-types'
+import React from 'react'
+import Shapes from '../../shapes/index'
+import ProjectAuthRow from './ProjectAuthRow'
+
+const ProjectAuthList = ({ authorizations }) => {
+    return (
+        <div className="vertically-expanding-container">
+            {authorizations.length === 0 ? (
+                <div className="alert alert-info">
+                    <span className="info-icon fa fa-question-circle mr-2"/>
+                    <strong>No projects here yet...</strong> Add some with the 'New
+                    Project' button!
+                </div>
+            ) : (
+                <table className="table table-striped">
+                    <thead>
+                    <tr>
+                        <th>Project name</th>
+                        <th>Last edited</th>
+                        <th>Access rights</th>
+                        <th/>
+                    </tr>
+                    </thead>
+                    <tbody>
+                    {authorizations.map(authorization => (
+                        <ProjectAuthRow
+                            projectAuth={authorization}
+                            key={authorization.project._id}
+                        />
+                    ))}
+                    </tbody>
+                </table>
+            )}
+        </div>
+    )
+}
+
+ProjectAuthList.propTypes = {
+    authorizations: PropTypes.arrayOf(Shapes.Authorization).isRequired,
+}
+
+export default ProjectAuthList
diff --git a/frontend/src/components/projects/ProjectAuthRow.js b/frontend/src/components/projects/ProjectAuthRow.js
new file mode 100644
index 00000000..be9de6e0
--- /dev/null
+++ b/frontend/src/components/projects/ProjectAuthRow.js
@@ -0,0 +1,32 @@
+import classNames from 'classnames'
+import React from 'react'
+import ProjectActions from '../../containers/projects/ProjectActions'
+import Shapes from '../../shapes/index'
+import { AUTH_DESCRIPTION_MAP, AUTH_ICON_MAP } from '../../util/authorizations'
+import { parseAndFormatDateTime } from '../../util/date-time'
+
+const ProjectAuthRow = ({ projectAuth }) => (
+    <tr>
+        <td className="pt-3">{projectAuth.project.name}</td>
+        <td className="pt-3">
+            {parseAndFormatDateTime(projectAuth.project.datetimeLastEdited)}
+        </td>
+        <td className="pt-3">
+      <span
+          className={classNames(
+              'fa',
+              'fa-' + AUTH_ICON_MAP[projectAuth.authorizationLevel],
+              'mr-2',
+          )}
+      />
+            {AUTH_DESCRIPTION_MAP[projectAuth.authorizationLevel]}
+        </td>
+        <ProjectActions projectId={projectAuth.project._id}/>
+    </tr>
+)
+
+ProjectAuthRow.propTypes = {
+    projectAuth: Shapes.Authorization.isRequired,
+}
+
+export default ProjectAuthRow