Improve GroupEdit, username input with validation and alerts

jsx/src/components/GroupEdit/GroupEdit.jsx

@@ -1,10 +1,11 @@
 import React, { useState } from "react";
+import regeneratorRuntime from "regenerator-runtime";
 import { useSelector, useDispatch } from "react-redux";
 import { compose, withProps } from "recompose";
 import { Link } from "react-router-dom";
 import PropTypes from "prop-types";
 import { jhapiRequest } from "../../util/jhapiUtil";
-import Multiselect from "../Multiselect/Multiselect";
+import GroupSelect from "../GroupSelect/GroupSelect";
 
 const GroupEdit = (props) => {
   var [selected, setSelected] = useState([]),
@@ -30,6 +31,7 @@ const GroupEdit = (props) => {
     removeFromGroup,
     deleteGroup,
     updateGroups,
+    findUser,
     history,
     location,
   } = props;
@@ -49,16 +51,22 @@ const GroupEdit = (props) => {
         <div className="col-md-10 col-md-offset-1 col-lg-8 col-lg-offset-2">
           <h3>Editing Group {group_data.name}</h3>
           <br></br>
-          <div className="alert alert-info">Select group members</div>
-          <Multiselect
-            options={user_data.map((e) => e.name)}
-            value={group_data.users}
-            onChange={(selection, options) => {
-              setSelected(selection);
-              setChanged(true);
-            }}
-          />
-          <br></br>
+          <div className="alert alert-info">Manage group members</div>
+        </div>
+      </div>
+      <GroupSelect
+        users={group_data.users}
+        validateUser={async (username) => {
+          let user = await findUser(username);
+          return user.status > 200 ? false : true;
+        }}
+        onChange={(selection) => {
+          setSelected(selection);
+          setChanged(true);
+        }}
+      />
+      <div className="row">
+        <div className="col-md-10 col-md-offset-1 col-lg-8 col-lg-offset-2">
           <button id="return" className="btn btn-light">
             <Link to="/groups">Back</Link>
           </button>
@@ -142,6 +150,7 @@ GroupEdit.propTypes = {
   removeFromGroup: PropTypes.func,
   deleteGroup: PropTypes.func,
   updateGroups: PropTypes.func,
+  findUser: PropTypes.func,
 };
 
 export default GroupEdit;

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;

jsx/src/components/GroupSelect/group-select.css

@@ -0,0 +1,40 @@
+@import url(../../style/root.css);
+
+.users-container {
+  width: 100%;
+  position: relative;
+  padding: 5px;
+  overflow-x: scroll;
+}
+
+.users-container div {
+  display: inline-block;
+}
+
+.users-container .item {
+  padding: 3px;
+  padding-left: 6px;
+  padding-right: 6px;
+  border-radius: 3px;
+  font-size: 14px;
+  margin-left: 4px;
+  margin-right: 4px;
+  transition: 30ms ease-in all;
+  cursor: pointer;
+  user-select: none;
+  border: solid 1px #dfdfdf;
+}
+
+.users-container .item.unselected {
+  background-color: #f7f7f7;
+  color: #777;
+}
+
+.users-container .item.selected {
+  background-color: orange;
+  color: white;
+}
+
+.users-container .item:hover {
+  opacity: 0.7;
+}

jsx/src/util/withAPI.js

@@ -32,6 +32,7 @@ const withAPI = withProps((props) => ({
       admin,
     }),
   deleteUser: (username) => jhapiRequest("/users/" + username, "DELETE"),
+  findUser: (username) => jhapiRequest("/users/" + username, "GET"),
   failRegexEvent: () =>
     alert(
       "Cannot change username - either contains special characters or is too short."