Merge branch 'jupyterhub:main' into group_property_feature

2025-10-17 06:52:59 +00:00 · 2022-08-18 15:40:35 +02:00
parent d4532c64aa 71e86f3064
commit 516c394303
18 changed files with 202 additions and 131 deletions
--- a/jsx/src/components/EditUser/EditUser.jsx
+++ b/jsx/src/components/EditUser/EditUser.jsx
@@ -125,38 +125,12 @@ const EditUser = (props) => {
                    if (updatedUsername == "" && admin == has_admin) {
                      noChangeEvent();
                      return;
-                    } else if (updatedUsername != "") {
-                      if (
-                        updatedUsername.length > 2 &&
-                        /[!@#$%^&*(),.?":{}|<>]/g.test(updatedUsername) == false
-                      ) {
-                        editUser(
-                          username,
-                          updatedUsername != "" ? updatedUsername : username,
-                          admin
-                        )
-                          .then((data) => {
-                            data.status < 300
-                              ? updateUsers(0, limit)
-                                  .then((data) => dispatchPageChange(data, 0))
-                                  .then(() => history.push("/"))
-                                  .catch(() =>
-                                    setErrorAlert(
-                                      `Could not update users list.`
-                                    )
-                                  )
-                              : setErrorAlert(`Failed to edit user.`);
-                          })
-                          .catch(() => {
-                            setErrorAlert(`Failed to edit user.`);
-                          });
-                      } else {
-                        setErrorAlert(
-                          `Failed to edit user. Make sure the username does not contain special characters.`
-                        );
-                      }
                    } else {
-                      editUser(username, username, admin)
+                      editUser(
+                        username,
+                        updatedUsername != "" ? updatedUsername : username,
+                        admin
+                      )
                        .then((data) => {
                          data.status < 300
                            ? updateUsers(0, limit)
--- a/jsx/src/components/GroupEdit/GroupEdit.jsx
+++ b/jsx/src/components/GroupEdit/GroupEdit.jsx
@@ -154,7 +154,6 @@ const GroupEdit = (props) => {
                    : setErrorAlert(`Failed to edit group.`);
                })
                .catch(() => {
-                  console.log("outer");
                  setErrorAlert(`Failed to edit group.`);
                });
            }}
--- a/jsx/src/components/Groups/Groups.jsx
+++ b/jsx/src/components/Groups/Groups.jsx
@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useEffect, useState } from "react";
 import { useSelector, useDispatch } from "react-redux";
 import PropTypes from "prop-types";

@@ -6,23 +6,17 @@ import { Link } from "react-router-dom";
 import PaginationFooter from "../PaginationFooter/PaginationFooter";

 const Groups = (props) => {
-  var user_data = useSelector((state) => state.user_data),
-    groups_data = useSelector((state) => state.groups_data),
+  var groups_data = useSelector((state) => state.groups_data),
    groups_page = useSelector((state) => state.groups_page),
-    limit = useSelector((state) => state.limit),
-    dispatch = useDispatch(),
-    page = parseInt(new URLSearchParams(props.location.search).get("page"));
+    dispatch = useDispatch();

-  page = isNaN(page) ? 0 : page;
-  var slice = [page * limit, limit];
+  var [offset, setOffset] = useState(groups_page ? groups_page.offset : 0);
+  var limit = groups_page ? groups_page.limit : window.api_page_limit;
+  var total = groups_page ? groups_page.total : undefined;

  var { updateGroups, history } = props;

-  if (!groups_data || !user_data) {
-    return <div data-testid="no-show"></div>;
-  }
-
-  const dispatchPageChange = (data, page) => {
+  const dispatchPageUpdate = (data, page) => {
    dispatch({
      type: "GROUPS_PAGE",
      value: {
@@ -32,10 +26,14 @@ const Groups = (props) => {
    });
  };

-  if (groups_page != page) {
-    updateGroups(...slice).then((data) => {
-      dispatchPageChange(data, page);
-    });
+  useEffect(() => {
+    updateGroups(offset, limit).then((data) =>
+      dispatchPageUpdate(data.items, data._pagination)
+    );
+  }, [offset, limit]);
+
+  if (!groups_data || !groups_page) {
+    return <div data-testid="no-show"></div>;
  }

  return (
@@ -59,7 +57,6 @@ const Groups = (props) => {
                          pathname: "/group-edit",
                          state: {
                            group_data: e,
-                            user_data: user_data,
                          },
                        }}
                      >
@@ -74,11 +71,12 @@ const Groups = (props) => {
                )}
              </ul>
              <PaginationFooter
-                endpoint="/groups"
-                page={page}
+                offset={offset}
                limit={limit}
-                numOffset={slice[0]}
-                numElements={groups_data.length}
+                visible={groups_data.length}
+                total={total}
+                next={() => setOffset(offset + limit)}
+                prev={() => setOffset(offset >= limit ? offset - limit : 0)}
              />
            </div>
            <div className="panel-footer">
@@ -102,8 +100,6 @@ const Groups = (props) => {
 };

 Groups.propTypes = {
-  user_data: PropTypes.array,
-  groups_data: PropTypes.array,
  updateUsers: PropTypes.func,
  updateGroups: PropTypes.func,
  history: PropTypes.shape({
--- a/jsx/src/components/Groups/Groups.test.js
+++ b/jsx/src/components/Groups/Groups.test.js
@@ -1,7 +1,7 @@
 import React from "react";
 import "@testing-library/jest-dom";
 import { act } from "react-dom/test-utils";
-import { render, screen } from "@testing-library/react";
+import { render, screen, fireEvent } from "@testing-library/react";
 import { Provider, useDispatch, useSelector } from "react-redux";
 import { createStore } from "redux";
 import { HashRouter } from "react-router-dom";
@@ -28,13 +28,19 @@ var groupsJsx = (callbackSpy) => (
 );

 var mockAppState = () => ({
-  user_data: JSON.parse(
-    '[{"kind":"user","name":"foo","admin":true,"groups":[],"server":"/user/foo/","pending":null,"created":"2020-12-07T18:46:27.112695Z","last_activity":"2020-12-07T21:00:33.336354Z","servers":{"":{"name":"","last_activity":"2020-12-07T20:58:02.437408Z","started":"2020-12-07T20:58:01.508266Z","pending":null,"ready":true,"state":{"pid":28085},"url":"/user/foo/","user_options":{},"progress_url":"/hub/api/users/foo/server/progress"}}},{"kind":"user","name":"bar","admin":false,"groups":[],"server":null,"pending":null,"created":"2020-12-07T18:46:27.115528Z","last_activity":"2020-12-07T20:43:51.013613Z","servers":{}}]'
-  ),
  groups_data: JSON.parse(
    '[{"kind":"group","name":"testgroup","users":[]}, {"kind":"group","name":"testgroup2","users":["foo", "bar"]}]'
  ),
-  limit: 10,
+  groups_page: {
+    offset: 0,
+    limit: 2,
+    total: 4,
+    next: {
+      offset: 2,
+      limit: 2,
+      url: "http://localhost:8000/hub/api/groups?offset=2&limit=2",
+    },
+  },
 });

 beforeEach(() => {
@@ -88,3 +94,18 @@ test("Renders nothing if required data is not available", async () => {
  let noShow = screen.getByTestId("no-show");
  expect(noShow).toBeVisible();
 });
+
+test("Interacting with PaginationFooter causes state update and refresh via useEffect call", async () => {
+  let callbackSpy = mockAsync();
+
+  await act(async () => {
+    render(groupsJsx(callbackSpy));
+  });
+
+  expect(callbackSpy).toBeCalledWith(0, 2);
+
+  let next = screen.getByTestId("paginate-next");
+  fireEvent.click(next);
+
+  expect(callbackSpy).toHaveBeenCalledWith(2, 2);
+});
--- a/jsx/src/components/PaginationFooter/PaginationFooter.jsx
+++ b/jsx/src/components/PaginationFooter/PaginationFooter.jsx
@@ -1,33 +1,40 @@
 import React from "react";
-import { Link } from "react-router-dom";
 import PropTypes from "prop-types";

 import "./pagination-footer.css";

 const PaginationFooter = (props) => {
-  let { endpoint, page, limit, numOffset, numElements } = props;
+  let { offset, limit, visible, total, next, prev } = props;
  return (
    <div className="pagination-footer">
      <p>
-        Displaying {numOffset}-{numOffset + numElements}
+        Displaying {offset}-{offset + visible}
        <br></br>
        <br></br>
-        {page >= 1 ? (
+        {offset >= 1 ? (
          <button className="btn btn-sm btn-light spaced">
-            <Link to={`${endpoint}?page=${page - 1}`}>
-              <span className="active-pagination">Previous</span>
-            </Link>
+            <span
+              className="active-pagination"
+              data-testid="paginate-prev"
+              onClick={prev}
+            >
+              Previous
+            </span>
          </button>
        ) : (
          <button className="btn btn-sm btn-light spaced">
            <span className="inactive-pagination">Previous</span>
          </button>
        )}
-        {numElements >= limit ? (
+        {offset + visible < total ? (
          <button className="btn btn-sm btn-light spaced">
-            <Link to={`${endpoint}?page=${page + 1}`}>
-              <span className="active-pagination">Next</span>
-            </Link>
+            <span
+              className="active-pagination"
+              data-testid="paginate-next"
+              onClick={next}
+            >
+              Next
+            </span>
          </button>
        ) : (
          <button className="btn btn-sm btn-light spaced">
--- a/jsx/src/components/ServerDashboard/ServerDashboard.jsx
+++ b/jsx/src/components/ServerDashboard/ServerDashboard.jsx
@@ -1,6 +1,6 @@
-import React, { useState } from "react";
-import regeneratorRuntime from "regenerator-runtime";
+import React, { useEffect, useState } from "react";
 import { useSelector, useDispatch } from "react-redux";
+import { debounce } from "lodash";
 import PropTypes from "prop-types";

 import {
@@ -50,16 +50,15 @@ const ServerDashboard = (props) => {
  var [errorAlert, setErrorAlert] = useState(null);
  var [sortMethod, setSortMethod] = useState(null);
  var [disabledButtons, setDisabledButtons] = useState({});
-  const [collapseStates, setCollapseStates] = useState({});
+  var [collapseStates, setCollapseStates] = useState({});

  var user_data = useSelector((state) => state.user_data),
    user_page = useSelector((state) => state.user_page),
-    limit = useSelector((state) => state.limit),
-    name_filter = useSelector((state) => state.name_filter),
-    page = parseInt(new URLSearchParams(props.location.search).get("page"));
+    name_filter = useSelector((state) => state.name_filter);

-  page = isNaN(page) ? 0 : page;
-  var slice = [page * limit, limit, name_filter];
+  var [offset, setOffset] = useState(user_page ? user_page.offset : 0);
+  var limit = user_page ? user_page.limit : window.api_page_limit;
+  var total = user_page ? user_page.total : undefined;

  const dispatch = useDispatch();

@@ -84,21 +83,25 @@ const ServerDashboard = (props) => {
    });
  };

-  if (!user_data) {
+  useEffect(() => {
+    updateUsers(offset, limit, name_filter)
+      .then((data) =>
+        dispatchPageUpdate(data.items, data._pagination, name_filter)
+      )
+      .catch((err) => setErrorAlert("Failed to update user list."));
+  }, [offset, limit]);
+
+  if (!user_data || !user_page) {
    return <div data-testid="no-show"></div>;
  }

-  if (page != user_page) {
-    updateUsers(...slice).then((data) =>
-      dispatchPageUpdate(data, page, name_filter)
-    );
-  }
+  let page = offset / limit;
+  var slice = [offset, limit, name_filter];

-  var debounce = require("lodash.debounce");
  const handleSearch = debounce(async (event) => {
    // setNameFilter(event.target.value);
-    updateUsers(page * limit, limit, event.target.value).then((data) =>
-      dispatchPageUpdate(data, page, name_filter)
+    updateUsers(offset, limit, event.target.value).then((data) =>
+      dispatchPageUpdate(data.items, data._pagination, name_filter)
    );
  }, 300);

@@ -119,7 +122,11 @@ const ServerDashboard = (props) => {
              if (res.status < 300) {
                updateUsers(...slice)
                  .then((data) => {
-                    dispatchPageUpdate(data, page, name_filter);
+                    dispatchPageUpdate(
+                      data.items,
+                      data._pagination,
+                      name_filter
+                    );
                  })
                  .catch(() => {
                    setIsDisabled(false);
@@ -155,7 +162,11 @@ const ServerDashboard = (props) => {
              if (res.status < 300) {
                updateUsers(...slice)
                  .then((data) => {
-                    dispatchPageUpdate(data, page, name_filter);
+                    dispatchPageUpdate(
+                      data.items,
+                      data._pagination,
+                      name_filter
+                    );
                  })
                  .catch(() => {
                    setErrorAlert(`Failed to update users list.`);
@@ -457,7 +468,11 @@ const ServerDashboard = (props) => {
                      .then((res) => {
                        updateUsers(...slice)
                          .then((data) => {
-                            dispatchPageUpdate(data, page, name_filter);
+                            dispatchPageUpdate(
+                              data.items,
+                              data._pagination,
+                              name_filter
+                            );
                          })
                          .catch(() =>
                            setErrorAlert(`Failed to update users list.`)
@@ -493,7 +508,11 @@ const ServerDashboard = (props) => {
                      .then((res) => {
                        updateUsers(...slice)
                          .then((data) => {
-                            dispatchPageUpdate(data, page, name_filter);
+                            dispatchPageUpdate(
+                              data.items,
+                              data._pagination,
+                              name_filter
+                            );
                          })
                          .catch(() =>
                            setErrorAlert(`Failed to update users list.`)
@@ -521,11 +540,12 @@ const ServerDashboard = (props) => {
          </tbody>
        </table>
        <PaginationFooter
-          endpoint="/"
-          page={page}
+          offset={offset}
          limit={limit}
-          numOffset={slice[0]}
-          numElements={user_data.length}
+          visible={user_data.length}
+          total={total}
+          next={() => setOffset(offset + limit)}
+          prev={() => setOffset(offset - limit)}
        />
        <br></br>
      </div>
--- a/jsx/src/components/ServerDashboard/ServerDashboard.test.js
+++ b/jsx/src/components/ServerDashboard/ServerDashboard.test.js
@@ -46,6 +46,16 @@ var mockAppState = () => ({
  user_data: JSON.parse(
    '[{"kind":"user","name":"foo","admin":true,"groups":[],"server":"/user/foo/","pending":null,"created":"2020-12-07T18:46:27.112695Z","last_activity":"2020-12-07T21:00:33.336354Z","servers":{"":{"name":"","last_activity":"2020-12-07T20:58:02.437408Z","started":"2020-12-07T20:58:01.508266Z","pending":null,"ready":true,"state":{"pid":28085},"url":"/user/foo/","user_options":{},"progress_url":"/hub/api/users/foo/server/progress"}}},{"kind":"user","name":"bar","admin":false,"groups":[],"server":null,"pending":null,"created":"2020-12-07T18:46:27.115528Z","last_activity":"2020-12-07T20:43:51.013613Z","servers":{}}]'
  ),
+  user_page: {
+    offset: 0,
+    limit: 2,
+    total: 4,
+    next: {
+      offset: 2,
+      limit: 2,
+      url: "http://localhost:8000/hub/api/groups?offset=2&limit=2",
+    },
+  },
 });

 beforeEach(() => {
@@ -533,3 +543,18 @@ test("Search for user calls updateUsers with name filter", async () => {
  expect(mockUpdateUsers.mock.calls[2][2]).toEqual("ab");
  expect(mockUpdateUsers.mock.calls).toHaveLength(3);
 });
+
+test("Interacting with PaginationFooter causes state update and refresh via useEffect call", async () => {
+  let callbackSpy = mockAsync();
+
+  await act(async () => {
+    render(serverDashboardJsx(callbackSpy));
+  });
+
+  expect(callbackSpy).toBeCalledWith(0, 2, undefined);
+
+  let next = screen.getByTestId("paginate-next");
+  fireEvent.click(next);
+
+  expect(callbackSpy).toHaveBeenCalledWith(2, 2, undefined);
+});