summaryrefslogtreecommitdiff
path: root/opendc-web/opendc-web-ui/src/containers/projects
diff options
context:
space:
mode:
authorFabian Mastenbroek <mail.fabianm@gmail.com>2021-05-18 20:34:13 +0200
committerGitHub <noreply@github.com>2021-05-18 20:34:13 +0200
commit56bd2ef6b0583fee1dd2da5dceaf57feb07649c9 (patch)
tree6d4cfbc44c97cd3ec1e30aa977cd08f404b41b0d /opendc-web/opendc-web-ui/src/containers/projects
parent02776c958a3254735b2be7d9fb1627f75e7f80cd (diff)
parentce95cfdf803043e66e2279d0f76c6bfc64e7864e (diff)
Migrate to Auth0 as Identity Provider
This pull request removes the hard dependency on Google for authenticating users and migrates to Auth0 as Identity Provider for OpenDC. This has as benefit that we can authenticate users without having to manage user data ourselves and do not have a dependency on Google accounts anymore. - Frontend cleanup: - Use CSS modules everywhere to encapsulate the styling of React components. - Perform all communication in the frontend via the REST API (as opposed to WebSockets). The original approach was aimed at collaborative editing, but made normal operations harder to implement and debug. If we want to implement collaborative editing in the future, we can expose only a small WebSocket API specifically for collaborative editing. - Move to FontAwesome 5 (using the official React libraries) - Use Reactstrap where possible. Previously, we mixed raw Bootstrap classes with Reactstrap, which is confusing. - Reduce the scope of the Redux state. Some state in the frontend application can be kept locally and does not need to be managed by Redux. - Migrate from Create React App (CRA) to Next.js since it allows us to pre-render multiple pages as well as opt-in to Server Side Rendering. - Remove the Google login and use Auth0 for authentication now. - Use Node 16 - Backend cleanup: - Remove Socket.IO endpoint from backend, since it is not needed by the frontend anymore. Removing it reduces the attack surface of OpenDC as well as the maintenance efforts. - Use Auth0 JWT token for authorizing API accesses - Refactor API endpoints to use Flask Restful as opposed to our custom in-house routing logic. Previously, this was needed to support the Socket.IO endpoint, but increases maintenance effort. - Expose Swagger UI from API - Use Python 3.9 and uwsgi to host Flask application - Actualize OpenAPI schema and update to version 3.0. **Breaking API Changes** * This pull request removes the users collection from the database table. Instead, we now use the user identifier passed by Auth0 to identify the data that belongs to a user.
Diffstat (limited to 'opendc-web/opendc-web-ui/src/containers/projects')
-rw-r--r--opendc-web/opendc-web-ui/src/containers/projects/FilterLink.js13
-rw-r--r--opendc-web/opendc-web-ui/src/containers/projects/NewProjectButtonContainer.js11
-rw-r--r--opendc-web/opendc-web-ui/src/containers/projects/NewProjectContainer.js35
-rw-r--r--opendc-web/opendc-web-ui/src/containers/projects/ProjectActions.js2
-rw-r--r--opendc-web/opendc-web-ui/src/containers/projects/ProjectListContainer.js34
-rw-r--r--opendc-web/opendc-web-ui/src/containers/projects/VisibleProjectAuthList.js32
6 files changed, 70 insertions, 57 deletions
diff --git a/opendc-web/opendc-web-ui/src/containers/projects/FilterLink.js b/opendc-web/opendc-web-ui/src/containers/projects/FilterLink.js
deleted file mode 100644
index 26f95c55..00000000
--- a/opendc-web/opendc-web-ui/src/containers/projects/FilterLink.js
+++ /dev/null
@@ -1,13 +0,0 @@
-import React from 'react'
-import { useDispatch, useSelector } from 'react-redux'
-import { setAuthVisibilityFilter } from '../../actions/projects'
-import FilterButton from '../../components/projects/FilterButton'
-
-const FilterLink = (props) => {
- const active = useSelector((state) => state.projectList.authVisibilityFilter === props.filter)
- const dispatch = useDispatch()
-
- return <FilterButton {...props} onClick={() => dispatch(setAuthVisibilityFilter(props.filter))} active={active} />
-}
-
-export default FilterLink
diff --git a/opendc-web/opendc-web-ui/src/containers/projects/NewProjectButtonContainer.js b/opendc-web/opendc-web-ui/src/containers/projects/NewProjectButtonContainer.js
deleted file mode 100644
index b8f6fef5..00000000
--- a/opendc-web/opendc-web-ui/src/containers/projects/NewProjectButtonContainer.js
+++ /dev/null
@@ -1,11 +0,0 @@
-import React from 'react'
-import { useDispatch } from 'react-redux'
-import { openNewProjectModal } from '../../actions/modals/projects'
-import NewProjectButtonComponent from '../../components/projects/NewProjectButtonComponent'
-
-const NewProjectButtonContainer = (props) => {
- const dispatch = useDispatch()
- return <NewProjectButtonComponent {...props} onClick={() => dispatch(openNewProjectModal())} />
-}
-
-export default NewProjectButtonContainer
diff --git a/opendc-web/opendc-web-ui/src/containers/projects/NewProjectContainer.js b/opendc-web/opendc-web-ui/src/containers/projects/NewProjectContainer.js
new file mode 100644
index 00000000..e03b5c07
--- /dev/null
+++ b/opendc-web/opendc-web-ui/src/containers/projects/NewProjectContainer.js
@@ -0,0 +1,35 @@
+import React, { useState } from 'react'
+import { useDispatch } from 'react-redux'
+import { addProject } from '../../redux/actions/projects'
+import TextInputModal from '../../components/modals/TextInputModal'
+import { Button } from 'reactstrap'
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+import { faPlus } from '@fortawesome/free-solid-svg-icons'
+
+/**
+ * A container for creating a new project.
+ */
+const NewProjectContainer = () => {
+ const [isVisible, setVisible] = useState(false)
+ const dispatch = useDispatch()
+ const callback = (text) => {
+ if (text) {
+ dispatch(addProject(text))
+ }
+ setVisible(false)
+ }
+
+ return (
+ <>
+ <div className="bottom-btn-container">
+ <Button color="primary" className="float-right" onClick={() => setVisible(true)}>
+ <FontAwesomeIcon icon={faPlus} className="mr-2" />
+ New Project
+ </Button>
+ </div>
+ <TextInputModal title="New Project" label="Project title" show={isVisible} callback={callback} />
+ </>
+ )
+}
+
+export default NewProjectContainer
diff --git a/opendc-web/opendc-web-ui/src/containers/projects/ProjectActions.js b/opendc-web/opendc-web-ui/src/containers/projects/ProjectActions.js
index a13034e9..bdb422dc 100644
--- a/opendc-web/opendc-web-ui/src/containers/projects/ProjectActions.js
+++ b/opendc-web/opendc-web-ui/src/containers/projects/ProjectActions.js
@@ -1,6 +1,6 @@
import React from 'react'
import { useDispatch } from 'react-redux'
-import { deleteProject } from '../../actions/projects'
+import { deleteProject } from '../../redux/actions/projects'
import ProjectActionButtons from '../../components/projects/ProjectActionButtons'
const ProjectActions = (props) => {
diff --git a/opendc-web/opendc-web-ui/src/containers/projects/ProjectListContainer.js b/opendc-web/opendc-web-ui/src/containers/projects/ProjectListContainer.js
new file mode 100644
index 00000000..6632a8b5
--- /dev/null
+++ b/opendc-web/opendc-web-ui/src/containers/projects/ProjectListContainer.js
@@ -0,0 +1,34 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import ProjectList from '../../components/projects/ProjectList'
+import { useAuth } from '../../auth'
+import { useProjects } from '../../data/project'
+
+const getVisibleProjects = (projects, filter, userId) => {
+ switch (filter) {
+ case 'SHOW_ALL':
+ return projects
+ case 'SHOW_OWN':
+ return projects.filter((project) =>
+ project.authorizations.some((a) => a.userId === userId && a.level === 'OWN')
+ )
+ case 'SHOW_SHARED':
+ return projects.filter((project) =>
+ project.authorizations.some((a) => a.userId === userId && a.level !== 'OWN')
+ )
+ default:
+ return projects
+ }
+}
+
+const ProjectListContainer = ({ filter }) => {
+ const { user } = useAuth()
+ const projects = useProjects()
+ return <ProjectList projects={getVisibleProjects(projects, filter, user?.sub)} />
+}
+
+ProjectListContainer.propTypes = {
+ filter: PropTypes.string.isRequired,
+}
+
+export default ProjectListContainer
diff --git a/opendc-web/opendc-web-ui/src/containers/projects/VisibleProjectAuthList.js b/opendc-web/opendc-web-ui/src/containers/projects/VisibleProjectAuthList.js
deleted file mode 100644
index b869775c..00000000
--- a/opendc-web/opendc-web-ui/src/containers/projects/VisibleProjectAuthList.js
+++ /dev/null
@@ -1,32 +0,0 @@
-import React from 'react'
-import { useSelector } from 'react-redux'
-import ProjectList from '../../components/projects/ProjectAuthList'
-
-const getVisibleProjectAuths = (projectAuths, filter) => {
- switch (filter) {
- case 'SHOW_ALL':
- return projectAuths
- case 'SHOW_OWN':
- return projectAuths.filter((projectAuth) => projectAuth.authorizationLevel === 'OWN')
- case 'SHOW_SHARED':
- return projectAuths.filter((projectAuth) => projectAuth.authorizationLevel !== 'OWN')
- default:
- return projectAuths
- }
-}
-
-const VisibleProjectAuthList = (props) => {
- const authorizations = useSelector((state) => {
- const denormalizedAuthorizations = state.projectList.authorizationsOfCurrentUser.map((authorizationIds) => {
- const authorization = state.objects.authorization[authorizationIds]
- authorization.user = state.objects.user[authorization.userId]
- authorization.project = state.objects.project[authorization.projectId]
- return authorization
- })
-
- return getVisibleProjectAuths(denormalizedAuthorizations, state.projectList.authVisibilityFilter)
- })
- return <ProjectList {...props} authorizations={authorizations} />
-}
-
-export default VisibleProjectAuthList