From 5e5ab63b280eb446db4090733cd3ad2e97d02018 Mon Sep 17 00:00:00 2001
From: Fabian Mastenbroek <mail.fabianm@gmail.com>
Date: Mon, 19 Jul 2021 15:47:23 +0200
Subject: refactor(ui): Restructure components per page

This change updates the source structure of the OpenDC frontend to
follow the page structure.
---
 .../topologies/sidebar/machine/UnitAddComponent.js | 42 ++++++++++++++++++++++
 1 file changed, 42 insertions(+)
 create mode 100644 opendc-web/opendc-web-ui/src/components/topologies/sidebar/machine/UnitAddComponent.js

(limited to 'opendc-web/opendc-web-ui/src/components/topologies/sidebar/machine/UnitAddComponent.js')

diff --git a/opendc-web/opendc-web-ui/src/components/topologies/sidebar/machine/UnitAddComponent.js b/opendc-web/opendc-web-ui/src/components/topologies/sidebar/machine/UnitAddComponent.js
new file mode 100644
index 00000000..88591208
--- /dev/null
+++ b/opendc-web/opendc-web-ui/src/components/topologies/sidebar/machine/UnitAddComponent.js
@@ -0,0 +1,42 @@
+import PropTypes from 'prop-types'
+import React, { useState } from 'react'
+import { Button, InputGroup, Select, SelectOption, SelectVariant } from '@patternfly/react-core'
+import PlusIcon from '@patternfly/react-icons/dist/js/icons/plus-icon'
+
+function UnitAddComponent({ units, onAdd }) {
+    const [isOpen, setOpen] = useState(false)
+    const [selected, setSelected] = useState(null)
+
+    return (
+        <InputGroup>
+            <Select
+                variant={SelectVariant.single}
+                placeholderText="Select a unit"
+                aria-label="Select Unit"
+                onToggle={() => setOpen(!isOpen)}
+                isOpen={isOpen}
+                onSelect={(_, selection) => {
+                    setSelected(selection)
+                    setOpen(false)
+                }}
+                selections={selected}
+            >
+                {units.map((unit) => (
+                    <SelectOption value={unit._id} key={unit._id}>
+                        {unit.name}
+                    </SelectOption>
+                ))}
+            </Select>
+            <Button icon={<PlusIcon />} variant="control" onClick={() => onAdd(selected)}>
+                Add
+            </Button>
+        </InputGroup>
+    )
+}
+
+UnitAddComponent.propTypes = {
+    units: PropTypes.array.isRequired,
+    onAdd: PropTypes.func.isRequired,
+}
+
+export default UnitAddComponent
-- 
cgit v1.2.3