Improved design

jsx/src/components/GroupEdit/GroupEdit.jsx

@@ -5,7 +5,6 @@ import PropTypes from "prop-types";
 import GroupSelect from "../GroupSelect/GroupSelect";
 import DynamicTable from "../DynamicTable/DynamicTable";
 
-
 function hasDuplicates(array) {
   var valuesSoFar = Object.create(null);
   for (var i = 0; i < array.length; ++i) {
@@ -18,8 +17,6 @@ function hasDuplicates(array) {
   return false;
 }
 
-
-
 const GroupEdit = (props) => {
   var [selected, setSelected] = useState([]),
     [changed, setChanged] = useState(false),
@@ -77,11 +74,13 @@ const GroupEdit = (props) => {
           setChanged(true);
         }}
       />
-      <div className="container">
       <div className="row">
+        <div className="col-md-10 col-md-offset-1 col-lg-8 col-lg-offset-2">
           <div className="alert alert-info">Manage group properties</div>
         </div>
       </div>
+      <div className="row">
+        <div className="col-md-10 col-md-offset-1 col-lg-8 col-lg-offset-2">
           <DynamicTable
             current_propobject={group_data.properties}
             setProp={setProp}
@@ -90,6 +89,9 @@ const GroupEdit = (props) => {
             setChanged={setChanged}
             //Add keys
           />
+        </div>
+      </div>
+
       <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">
@@ -120,21 +122,23 @@ const GroupEdit = (props) => {
                   removeFromGroup(removed_users, group_data.name)
                 );
               if (hasDuplicates(propkeys) == true) {
-                error.textContent = "Duplicate key found!"
-                error.style.color = "red"
+                error.textContent = "Duplicate key found!";
+                error.style.color = "red";
               } else {
-                error.textContent = ""
-                propkeys.forEach((key, i) => propobject[key] = propvalues[i]);
+                error.textContent = "";
+                propkeys.forEach((key, i) => (propobject[key] = propvalues[i]));
               }
-              if (propobject != group_data.properties && hasDuplicates(propkeys)== false) {
-                promiseQueue.push(
-                  updateProp(propobject, group_data.name)
-                );
+              if (
+                propobject != group_data.properties &&
+                hasDuplicates(propkeys) == false
+              ) {
+                promiseQueue.push(updateProp(propobject, group_data.name));
               }
               Promise.all(promiseQueue)
                 .then(() => {
-                  updateGroups(0, limit)
-                    .then((data) => dispatchPageUpdate(data, 0)); 
+                  updateGroups(0, limit).then((data) =>
+                    dispatchPageUpdate(data, 0)
+                  );
                 })
                 .catch((err) => console.log(err));
             }}

jupyterhub/apihandlers/base.py

@@ -298,7 +298,7 @@ class APIHandler(BaseHandler):
             'name': group.name,
             'roles': [r.name for r in group.roles],
             'users': [u.name for u in group.users],
-            'properties': group.properties
+            'properties': group.properties,
         }
         access_map = {
             'read:groups': {'kind', 'name', 'users', 'properties'},

jupyterhub/apihandlers/groups.py

@@ -180,6 +180,7 @@ class GroupUsersAPIHandler(_GroupAPIHandler):
         self.db.commit()
         self.write(json.dumps(self.group_model(group)))
 
+
 class GroupPropertiesAPIHandler(_GroupAPIHandler):
     """Modify a group's properties"""
 
@@ -195,6 +196,7 @@ class GroupPropertiesAPIHandler(_GroupAPIHandler):
         self.db.commit()
         self.write(json.dumps(self.group_model(group)))
 
+
 default_handlers = [
     (r"/api/groups", GroupListAPIHandler),
     (r"/api/groups/([^/]+)", GroupAPIHandler),

jupyterhub/tests/test_api.py

@@ -1613,8 +1613,20 @@ async def test_groups_list(app):
     r.raise_for_status()
     reply = r.json()
     assert reply == [
-        {'kind': 'group', 'name': 'alphaflight', 'users': [], 'roles': [], 'properties': {}},
-        {'kind': 'group', 'name': 'betaflight', 'users': [], 'roles': [],'properties': {}},
+        {
+            'kind': 'group',
+            'name': 'alphaflight',
+            'users': [],
+            'roles': [],
+            'properties': {},
+        },
+        {
+            'kind': 'group',
+            'name': 'betaflight',
+            'users': [],
+            'roles': [],
+            'properties': {},
+        },
     ]
 
     # Test offset for pagination
@@ -1622,7 +1634,15 @@ async def test_groups_list(app):
     r.raise_for_status()
     reply = r.json()
     assert r.status_code == 200
-    assert reply == [{'kind': 'group', 'name': 'betaflight', 'users': [], 'roles': [],'properties': {}}]
+    assert reply == [
+        {
+            'kind': 'group',
+            'name': 'betaflight',
+            'users': [],
+            'roles': [],
+            'properties': {},
+        }
+    ]
 
     r = await api_request(app, "groups?offset=10")
     r.raise_for_status()
@@ -1634,13 +1654,29 @@ async def test_groups_list(app):
     r.raise_for_status()
     reply = r.json()
     assert r.status_code == 200
-    assert reply == [{'kind': 'group', 'name': 'alphaflight', 'users': [], 'roles': [],'properties': {}}]
+    assert reply == [
+        {
+            'kind': 'group',
+            'name': 'alphaflight',
+            'users': [],
+            'roles': [],
+            'properties': {},
+        }
+    ]
 
     # 0 is rounded up to 1
     r = await api_request(app, "groups?limit=0")
     r.raise_for_status()
     reply = r.json()
-    assert reply == [{'kind': 'group', 'name': 'alphaflight', 'users': [], 'roles': [],'properties': {}}]
+    assert reply == [
+        {
+            'kind': 'group',
+            'name': 'alphaflight',
+            'users': [],
+            'roles': [],
+            'properties': {},
+        }
+    ]
 
 
 @mark.group
@@ -1769,6 +1805,8 @@ async def test_group_add_delete_users(app):
 
     group = orm.Group.find(db, name='alphaflight')
     assert sorted(u.name for u in group.users) == sorted(names[2:])
+
+
 @mark.group
 async def test_group_add_properties(app):
     db = app.db
@@ -1789,10 +1827,10 @@ async def test_group_add_properties(app):
     r.raise_for_status()
     group = orm.Group.find(db, name='alphaflight')
 
-    
-    assert sorted([k for k in group.properties]) == sorted([k for k in properties_object])
-    assert sorted([group.properties[k] for k in group.properties]) == sorted([properties_object[k] for k in properties_object])
-    
+    assert sorted(k for k in group.properties) == sorted(k for k in properties_object)
+    assert sorted(group.properties[k] for k in group.properties) == sorted(
+        properties_object[k] for k in properties_object
+    )
 
 
 # -----------------