summaryrefslogtreecommitdiff
path: root/opendc-web/opendc-web-ui/src/components/projects/NewProject.js
diff options
context:
space:
mode:
authorFabian Mastenbroek <mail.fabianm@gmail.com>2021-07-16 10:32:57 +0200
committerGitHub <noreply@github.com>2021-07-16 10:32:57 +0200
commitdb1d2c2f8c18850dedf34b5d690b6cd6a1d1f6b5 (patch)
tree263a6f9741c5ca0dd64ecf3f7f07b580331aec9d /opendc-web/opendc-web-ui/src/components/projects/NewProject.js
parent1a2416043f0b877f570e89da74e0d0a4aff1d8ae (diff)
parent803e13b32cf0ff8b496649fb0a4d6e32400e98a4 (diff)
merge: Add PatternFly 4 web interface (#161)
This pull requests adds the new web interface based on the PatternFly 4 design framework. This framework enables us to develop more quickly the interfaces necessary in OpenDC. * Remove the OpenDC landing page from the web interface module * Add support for the PatternFly 4 framework in Next.js * Relax topology schema requirements * Migrate UI components to PatternFly 4
Diffstat (limited to 'opendc-web/opendc-web-ui/src/components/projects/NewProject.js')
-rw-r--r--opendc-web/opendc-web-ui/src/components/projects/NewProject.js39
1 files changed, 39 insertions, 0 deletions
diff --git a/opendc-web/opendc-web-ui/src/components/projects/NewProject.js b/opendc-web/opendc-web-ui/src/components/projects/NewProject.js
new file mode 100644
index 00000000..4f5d79cf
--- /dev/null
+++ b/opendc-web/opendc-web-ui/src/components/projects/NewProject.js
@@ -0,0 +1,39 @@
+import React, { useState } from 'react'
+import TextInputModal from '../../components/modals/TextInputModal'
+import { Button } from '@patternfly/react-core'
+import { useMutation } from 'react-query'
+import { PlusIcon } from '@patternfly/react-icons'
+import { buttonContainer } from './NewProject.module.scss'
+
+/**
+ * A container for creating a new project.
+ */
+const NewProject = () => {
+ const [isVisible, setVisible] = useState(false)
+ const { mutate: addProject } = useMutation('addProject')
+
+ const onSubmit = (name) => {
+ if (name) {
+ addProject({ name })
+ }
+ setVisible(false)
+ }
+
+ return (
+ <>
+ <div className={buttonContainer}>
+ <Button
+ icon={<PlusIcon />}
+ color="primary"
+ className="pf-u-float-right"
+ onClick={() => setVisible(true)}
+ >
+ New Project
+ </Button>
+ </div>
+ <TextInputModal title="New Project" label="Project name" isOpen={isVisible} callback={onSubmit} />
+ </>
+ )
+}
+
+export default NewProject