Improve GroupEdit, username input with validation and alerts

jsx/src/components/GroupSelect/GroupSelect.jsx

@@ -0,0 +1,107 @@
+import React, { useState } from "react";
+import PropTypes from "prop-types";
+import "./group-select.css";
+
+const GroupSelect = (props) => {
+  var { onChange, validateUser, users } = props;
+
+  var [selected, setSelected] = useState(users);
+  var [username, setUsername] = useState("");
+  var [error, setError] = useState(null);
+
+  if (!users) return null;
+
+  return (
+    <div className="row">
+      {error != null ? (
+        <div className="col-md-10 col-md-offset-1 col-lg-8 col-lg-offset-2 text-left">
+          <div className="alert alert-danger">{error}</div>
+        </div>
+      ) : (
+        <></>
+      )}
+      <div className="col-md-10 col-md-offset-1 col-lg-8 col-lg-offset-2 text-left">
+        <div className="input-group">
+          <input
+            type="text"
+            className="form-control"
+            placeholder="Add by username"
+            value={username}
+            onChange={(e) => {
+              setUsername(e.target.value);
+            }}
+          />
+          <span className="input-group-btn">
+            <button
+              className="btn btn-default"
+              type="button"
+              onClick={() => {
+                // check user exists then
+                validateUser(username).then((exists) => {
+                  if (exists && !selected.includes(username)) {
+                    let updated_selection = selected.concat([username]);
+                    onChange(updated_selection, users);
+                    setUsername("");
+                    setSelected(updated_selection);
+                    if (error != null) setError(null);
+                  } else if (!exists) {
+                    setError(`"${username}" is not a valid JupyterHub user.`);
+                  }
+                });
+              }}
+            >
+              Add user
+            </button>
+          </span>
+        </div>
+      </div>
+      <div className="col-md-10 col-md-offset-1 col-lg-8 col-lg-offset-2 text-left">
+        <div className="users-container">
+          <hr></hr>
+          <div>
+            {selected.map((e, i) => (
+              <div
+                key={"selected" + i}
+                className="item selected"
+                onClick={() => {
+                  let updated_selection = selected
+                    .slice(0, i)
+                    .concat(selected.slice(i + 1));
+                  onChange(updated_selection, users);
+                  setSelected(updated_selection);
+                }}
+              >
+                {e}
+              </div>
+            ))}
+            {users.map((e, i) =>
+              selected.includes(e) ? undefined : (
+                <div
+                  key={"unselected" + i}
+                  className="item unselected"
+                  onClick={() => {
+                    let updated_selection = selected.concat([e]);
+                    onChange(updated_selection, users);
+                    setSelected(updated_selection);
+                  }}
+                >
+                  {e}
+                </div>
+              )
+            )}
+          </div>
+        </div>
+        <br></br>
+        <br></br>
+      </div>
+    </div>
+  );
+};
+
+GroupSelect.propTypes = {
+  onChange: PropTypes.func,
+  validateUser: PropTypes.func,
+  users: PropTypes.array,
+};
+
+export default GroupSelect;