Merge branch 'jupyterhub:main' into group_property_feature

2025-10-16 14:33:00 +00:00 · 2022-03-18 12:58:20 +01:00
parent 0643b8280e cb25d29b0b
commit e6c4ca1f25
46 changed files with 3558 additions and 2795 deletions
--- a/jsx/src/components/ServerDashboard/ServerDashboard.jsx
+++ b/jsx/src/components/ServerDashboard/ServerDashboard.jsx
@@ -1,8 +1,9 @@
 import React, { useState } from "react";
+import regeneratorRuntime from "regenerator-runtime";
 import { useSelector, useDispatch } from "react-redux";
 import PropTypes from "prop-types";

-import { Button } from "react-bootstrap";
+import { Button, Col, Row, FormControl } from "react-bootstrap";
 import { Link } from "react-router-dom";
 import { FaSort, FaSortUp, FaSortDown } from "react-icons/fa";

@@ -10,8 +11,8 @@ import "./server-dashboard.css";
 import { timeSince } from "../../util/timeSince";
 import PaginationFooter from "../PaginationFooter/PaginationFooter";

-const AccessServerButton = ({ userName, serverName }) => (
-  <a href={`/user/${userName}/${serverName || ""}`}>
+const AccessServerButton = ({ url }) => (
+  <a href={url || ""}>
    <button className="btn btn-primary btn-xs" style={{ marginRight: 20 }}>
      Access Server
    </button>
@@ -19,6 +20,7 @@ const AccessServerButton = ({ userName, serverName }) => (
 );

 const ServerDashboard = (props) => {
+  let base_url = window.base_url;
  // sort methods
  var usernameDesc = (e) => e.sort((a, b) => (a.name > b.name ? 1 : -1)),
    usernameAsc = (e) => e.sort((a, b) => (a.name < b.name ? 1 : -1)),
@@ -42,10 +44,11 @@ const ServerDashboard = (props) => {
  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"));

  page = isNaN(page) ? 0 : page;
-  var slice = [page * limit, limit];
+  var slice = [page * limit, limit, name_filter];

  const dispatch = useDispatch();

@@ -59,12 +62,13 @@ const ServerDashboard = (props) => {
    history,
  } = props;

-  var dispatchPageUpdate = (data, page) => {
+  var dispatchPageUpdate = (data, page, name_filter) => {
    dispatch({
      type: "USER_PAGE",
      value: {
        data: data,
        page: page,
+        name_filter: name_filter,
      },
    });
  };
@@ -74,9 +78,19 @@ const ServerDashboard = (props) => {
  }

  if (page != user_page) {
-    updateUsers(...slice).then((data) => dispatchPageUpdate(data, page));
+    updateUsers(...slice).then((data) =>
+      dispatchPageUpdate(data, page, 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)
+    );
+  }, 300);
+
  if (sortMethod != null) {
    user_data = sortMethod(user_data);
  }
@@ -94,7 +108,7 @@ const ServerDashboard = (props) => {
              if (res.status < 300) {
                updateUsers(...slice)
                  .then((data) => {
-                    dispatchPageUpdate(data, page);
+                    dispatchPageUpdate(data, page, name_filter);
                  })
                  .catch(() => {
                    setIsDisabled(false);
@@ -130,7 +144,7 @@ const ServerDashboard = (props) => {
              if (res.status < 300) {
                updateUsers(...slice)
                  .then((data) => {
-                    dispatchPageUpdate(data, page);
+                    dispatchPageUpdate(data, page, name_filter);
                  })
                  .catch(() => {
                    setErrorAlert(`Failed to update users list.`);
@@ -153,10 +167,9 @@ const ServerDashboard = (props) => {
    );
  };

-  const EditUserCell = ({ user, numServers, serverName }) => {
-    if (serverName) return null;
+  const EditUserCell = ({ user }) => {
    return (
-      <td rowspan={numServers}>
+      <td>
        <button
          className="btn btn-primary btn-xs"
          style={{ marginRight: 20 }}
@@ -176,6 +189,14 @@ const ServerDashboard = (props) => {
    );
  };

+  let servers = user_data.flatMap((user) => {
+    let userServers = Object.values({
+      "": user.server || {},
+      ...(user.servers || {}),
+    });
+    return userServers.map((server) => [user, server]);
+  });
+
  return (
    <div className="container" data-testid="container">
      {errorAlert != null ? (
@@ -196,10 +217,23 @@ const ServerDashboard = (props) => {
      ) : (
        <></>
      )}
-      <div className="manage-groups" style={{ float: "right", margin: "20px" }}>
-        <Link to="/groups">{"> Manage Groups"}</Link>
-      </div>
      <div className="server-dashboard-container">
+        <Row>
+          <Col md={4}>
+            <FormControl
+              type="text"
+              name="user_search"
+              placeholder="Search users"
+              aria-label="user-search"
+              value={name_filter}
+              onChange={handleSearch}
+            />
+          </Col>
+
+          <Col md="auto" style={{ float: "right", margin: 15 }}>
+            <Link to="/groups">{"> Manage Groups"}</Link>
+          </Col>
+        </Row>
        <table className="table table-striped table-bordered table-hover">
          <thead className="admin-table-head">
            <tr>
@@ -279,7 +313,7 @@ const ServerDashboard = (props) => {
                      .then((res) => {
                        updateUsers(...slice)
                          .then((data) => {
-                            dispatchPageUpdate(data, page);
+                            dispatchPageUpdate(data, page, name_filter);
                          })
                          .catch(() =>
                            setErrorAlert(`Failed to update users list.`)
@@ -315,7 +349,7 @@ const ServerDashboard = (props) => {
                      .then((res) => {
                        updateUsers(...slice)
                          .then((data) => {
-                            dispatchPageUpdate(data, page);
+                            dispatchPageUpdate(data, page, name_filter);
                          })
                          .catch(() =>
                            setErrorAlert(`Failed to update users list.`)
@@ -339,87 +373,62 @@ const ServerDashboard = (props) => {
                </Button>
              </td>
            </tr>
-            {user_data.flatMap((e, i) => {
-              let userServers = Object.values({
-                "": e.server,
-                ...(e.servers || {}),
-              });
-              return userServers.map((server) => {
-                server = { name: "", ...server };
-                return (
-                  <tr key={i + "row"} className="user-row">
-                    {!server.name && (
-                      <td
-                        data-testid="user-row-name"
-                        rowspan={userServers.length}
-                      >
-                        {e.name}
-                      </td>
-                    )}
-                    {!server.name && (
-                      <td
-                        data-testid="user-row-admin"
-                        rowspan={userServers.length}
-                      >
-                        {e.admin ? "admin" : ""}
-                      </td>
-                    )}
+            {servers.map(([user, server], i) => {
+              server.name = server.name || "";
+              return (
+                <tr key={i + "row"} className="user-row">
+                  <td data-testid="user-row-name">{user.name}</td>
+                  <td data-testid="user-row-admin">
+                    {user.admin ? "admin" : ""}
+                  </td>

-                    <td data-testid="user-row-server">
-                      {server.name ? (
-                        <p class="text-secondary">{server.name}</p>
-                      ) : (
-                        <p style={{ color: "lightgrey" }}>[MAIN]</p>
-                      )}
-                    </td>
-                    <td data-testid="user-row-last-activity">
-                      {server.last_activity
-                        ? timeSince(server.last_activity)
-                        : "Never"}
-                    </td>
-                    <td data-testid="user-row-server-activity">
-                      {server.started ? (
-                        // Stop Single-user server
-                        <>
-                          <StopServerButton
-                            serverName={server.name}
-                            userName={e.name}
-                          />
-                          <AccessServerButton
-                            serverName={server.name}
-                            userName={e.name}
-                          />
-                        </>
-                      ) : (
-                        // Start Single-user server
-                        <>
-                          <StartServerButton
-                            serverName={server.name}
-                            userName={e.name}
-                          />
-                          <a
-                            href={`/spawn/${e.name}${
-                              server.name && "/" + server.name
-                            }`}
+                  <td data-testid="user-row-server">
+                    {server.name ? (
+                      <p class="text-secondary">{server.name}</p>
+                    ) : (
+                      <p style={{ color: "lightgrey" }}>[MAIN]</p>
+                    )}
+                  </td>
+                  <td data-testid="user-row-last-activity">
+                    {server.last_activity
+                      ? timeSince(server.last_activity)
+                      : "Never"}
+                  </td>
+                  <td data-testid="user-row-server-activity">
+                    {server.started ? (
+                      // Stop Single-user server
+                      <>
+                        <StopServerButton
+                          serverName={server.name}
+                          userName={user.name}
+                        />
+                        <AccessServerButton url={server.url} />
+                      </>
+                    ) : (
+                      // Start Single-user server
+                      <>
+                        <StartServerButton
+                          serverName={server.name}
+                          userName={user.name}
+                        />
+                        <a
+                          href={`${base_url}spawn/${user.name}${
+                            server.name && "/" + server.name
+                          }`}
+                        >
+                          <button
+                            className="btn btn-secondary btn-xs"
+                            style={{ marginRight: 20 }}
                          >
-                            <button
-                              className="btn btn-secondary btn-xs"
-                              style={{ marginRight: 20 }}
-                            >
-                              Spawn Page
-                            </button>
-                          </a>
-                        </>
-                      )}
-                    </td>
-                    <EditUserCell
-                      user={e}
-                      numServers={userServers.length}
-                      serverName={server.name}
-                    />
-                  </tr>
-                );
-              });
+                            Spawn Page
+                          </button>
+                        </a>
+                      </>
+                    )}
+                  </td>
+                  <EditUserCell user={user} />
+                </tr>
+              );
            })}
          </tbody>
        </table>
--- a/jsx/src/components/ServerDashboard/ServerDashboard.test.js
+++ b/jsx/src/components/ServerDashboard/ServerDashboard.test.js
@@ -9,6 +9,9 @@ import { createStore } from "redux";
 import regeneratorRuntime from "regenerator-runtime";

 import ServerDashboard from "./ServerDashboard";
+import * as sinon from "sinon";
+
+let clock;

 jest.mock("react-redux", () => ({
  ...jest.requireActual("react-redux"),
@@ -45,6 +48,7 @@ var mockAppState = () => ({
 });

 beforeEach(() => {
+  clock = sinon.useFakeTimers();
  useSelector.mockImplementation((callback) => {
    return callback(mockAppState());
  });
@@ -52,6 +56,7 @@ beforeEach(() => {

 afterEach(() => {
  useSelector.mockClear();
+  clock.restore();
 });

 test("Renders", async () => {
@@ -435,3 +440,42 @@ test("Shows a UI error dialogue when stop user server returns an improper status

  expect(errorDialog).toBeVisible();
 });
+
+test("Search for user calls updateUsers with name filter", async () => {
+  let spy = mockAsync();
+  let mockUpdateUsers = jest.fn((offset, limit, name_filter) => {
+    return Promise.resolve([]);
+  });
+  await act(async () => {
+    render(
+      <Provider store={createStore(() => {}, {})}>
+        <HashRouter>
+          <Switch>
+            <ServerDashboard
+              updateUsers={mockUpdateUsers}
+              shutdownHub={spy}
+              startServer={spy}
+              stopServer={spy}
+              startAll={spy}
+              stopAll={spy}
+            />
+          </Switch>
+        </HashRouter>
+      </Provider>
+    );
+  });
+
+  let search = screen.getByLabelText("user-search");
+
+  fireEvent.change(search, { target: { value: "a" } });
+  clock.tick(400);
+  expect(mockUpdateUsers.mock.calls).toHaveLength(2);
+  expect(mockUpdateUsers.mock.calls[1][2]).toEqual("a");
+  expect(search.value).toEqual("a");
+
+  fireEvent.change(search, { target: { value: "ab" } });
+  clock.tick(400);
+  expect(mockUpdateUsers.mock.calls).toHaveLength(3);
+  expect(mockUpdateUsers.mock.calls[2][2]).toEqual("ab");
+  expect(search.value).toEqual("ab");
+});