Update component and docs

src/components/QueueSelector/QueueSelector.js

@@ -1,16 +1,57 @@
 import React from "react";
 import PropTypes from "prop-types";
+import { TextField, Checkbox} from "@material-ui/core";
+import { Autocomplete } from "@material-ui/lab";
+import CheckBoxOutlineBlankIcon from '@material-ui/icons/CheckBoxOutlineBlank';
+import CheckBoxIcon from '@material-ui/icons/CheckBox';
 
-export default function QueueSelector(){
-    return (
-        QueueSelector
+export default function QueueSelector({ queues, selectedQueues, setSelectedQueues }) {
+    return(
+        <Autocomplete
+            options={queues}
+            onChange={(event, newValue) => {
+                setSelectedQueues(newValue)
+            }}
+            renderInput={(params) => {
+                return(
+                    <TextField
+                        {...params}
+                        placeholder={selectedQueues.length === 0 ? "Click to select queues." : ""}
+                    />
+                );
+            }}
+            getOptionLabel={(option) => `${option.name} (${option.number_of_items})`}
+            renderOption={(option, { selected }) => (
+                <>
+                    <Checkbox
+                        icon={<CheckBoxOutlineBlankIcon fontSize="small" />}
+                        checkedIcon={<CheckBoxIcon fontSize="small" />}
+                        style={{ marginRight: 8 }}
+                        checked={selected}
+                    />
+                    {`${option.name} (${option.number_of_items})`}
+                </>
+            )}
+            getOptionSelected={ (option, value) => option.name === value.name }
+            disableCloseOnSelect
+            autoComplete
+            disableListWrap
+            openOnFocus
+            fullWidth
+            multiple
+        />
     );
 };
 
 QueueSelector.propTypes = {
-
+    /** An array of objects with keys of name and number of items for each queue. */
+    "queues": PropTypes.array,
+    /** State variable to manage selected queues. */
+    "selectedQueues": PropTypes.array.isRequired,
+    /** Function to update state variable that manages selected queues. */
+    "setSelectedQueues": PropTypes.func.isRequired
 };
 
 QueueSelector.defaultProps = {
-
+    "queues": []
 };

src/components/QueueSelector/QueueSelector.md

@@ -1,11 +1,38 @@
-QueueSelector
+Allows the selection, removal and viewing of active queues. Its extends the [MUI Autocomplete component](https://material-ui.com/components/autocomplete/).
 
 ---
 ```jsx
+import React, { useState } from "react";
+import { Paper, makeStyles } from "@material-ui/core";
 import QueueSelector from "./QueueSelector";
 
-<QueueSelector />
+const [selectedQueues, setSelectedQueues] = useState([]);
+const queues = [
+    {
+        'name': 'bidc', 
+        'number_of_items': 5
+    }, 
+    {
+        'name': 'epics', 
+        'number_of_items': 6
+    }, 
+    {
+        'name': 'wang', 
+        'number_of_items': 13
+    }
+];
+
+const useStyles = makeStyles({
+    root: {
+        padding: "16px",
+    }
+});
+const classes = useStyles();
+
+<Paper classes={{ root: classes.root }}>
+    <QueueSelector queues={queues} selectedQueues={selectedQueues} setSelectedQueues={setSelectedQueues} />
+</Paper>
 ```
 ```jsx static
-<QueueSelector />
+<QueueSelector queues={queues} selectedQueues={selectedQueues} setSelectedQueues={setSelectedQueues} />
 ```