Move Commands Panel to ServerSchedulesPage

src/components/etke.cc/CurrentlyRunningCommand.tsx

@@ -0,0 +1,37 @@
+import { Stack, Tooltip, Typography, Box, Link } from "@mui/material";
+import { useStore } from "react-admin";
+
+import { ServerProcessResponse } from "../../synapse/dataProvider";
+import { getTimeSince } from "../../utils/date";
+
+const CurrentlyRunningCommand = () => {
+  const [serverProcess, setServerProcess] = useStore<ServerProcessResponse>("serverProcess", {
+    command: "",
+    locked_at: "",
+  });
+  const { command, locked_at } = serverProcess;
+
+  if (!command || !locked_at) {
+    return null;
+  }
+
+  return (
+    <Stack spacing={1} direction="row" alignItems="center">
+      <Box sx={{ display: "flex", alignItems: "center", gap: 1 }}>
+        <Typography variant="h5">Currently running:</Typography>
+        <Typography variant="h5" color="text.secondary">
+          <Link href={"https://etke.cc/help/extras/scheduler/#" + command} target="_blank">
+            {command}
+          </Link>
+          <Tooltip title={locked_at.toString()}>
+            <Typography component="span" color="text.secondary" sx={{ display: "inline-block", ml: 1 }}>
+              (started {getTimeSince(locked_at)} ago)
+            </Typography>
+          </Tooltip>
+        </Typography>
+      </Box>
+    </Stack>
+  );
+};
+
+export default CurrentlyRunningCommand;

src/components/etke.cc/ServerCommandsPanel.tsx

@@ -10,10 +10,12 @@ import {
   Alert,
   TextField,
   Box,
+  Link,
+  Typography,
 } from "@mui/material";
 import { useEffect, useState } from "react";
 import { Button, Loading, useDataProvider, useCreatePath, useStore } from "react-admin";
-import { Link } from "react-router-dom";
+import { Link as RouterLink } from "react-router-dom";
 
 import { useAppContext } from "../../Context";
 import { useServerCommands } from "./hooks/useServerCommands";
@@ -94,7 +96,8 @@ const ServerCommandsPanel = () => {
     results.push(
       <Box key="notification-link">
         Expect your result in the{" "}
-        <Link to={createPath({ resource: "server_notifications", type: "list" })}>Notifications</Link> page soon.
+        <RouterLink to={createPath({ resource: "server_notifications", type: "list" })}>Notifications</RouterLink> page
+        soon.
       </Box>
     );
 
@@ -125,20 +128,16 @@ const ServerCommandsPanel = () => {
 
   return (
     <>
-      <h2>Server Commands</h2>
+      <Typography variant="h4">Server Commands</Typography>
       <TableContainer component={Paper}>
         <Table sx={{ minWidth: 450 }} size="small" aria-label="simple table">
           <TableHead>
             <TableRow>
               <TableCell>
                 Command
-                <Button
-                  size="small"
-                  startIcon={<HelpCenter />}
-                  title="Help"
-                  href="https://etke.cc/help/extras/scheduler/#commands"
-                  target="_blank"
-                />
+                <Link href="https://etke.cc/help/extras/scheduler/#commands" target="_blank">
+                  <Button size="small" startIcon={<HelpCenter />} title="Help" />
+                </Link>
               </TableCell>
               <TableCell>Description</TableCell>
               <TableCell></TableCell>
@@ -151,13 +150,9 @@ const ServerCommandsPanel = () => {
                   <Box>
                     {renderIcon(icon)}
                     {command}
-                    <Button
-                      size="small"
-                      startIcon={<HelpCenter />}
-                      title={command + " help"}
-                      href={"https://etke.cc/help/extras/scheduler/#" + command}
-                      target="_blank"
-                    />{" "}
+                    <Link href={"https://etke.cc/help/extras/scheduler/#" + command} target="_blank">
+                      <Button size="small" startIcon={<HelpCenter />} title={command + " help"} />
+                    </Link>
                   </Box>
                 </TableCell>
                 <TableCell>{description}</TableCell>

src/components/etke.cc/ServerStatusPage.tsx

@@ -4,6 +4,7 @@ import EngineeringIcon from "@mui/icons-material/Engineering";
 import { Alert, Box, Stack, Typography, Paper, Link, Chip, Divider, Tooltip, ChipProps } from "@mui/material";
 import { useStore } from "ra-core";
 
+import CurrentlyRunningCommand from "./CurrentlyRunningCommand";
 import ServerCommandsPanel from "./ServerCommandsPanel";
 import { ServerProcessResponse, ServerStatusComponent, ServerStatusResponse } from "../../synapse/dataProvider";
 import { getTimeSince } from "../../utils/date";
@@ -85,28 +86,13 @@ const ServerStatusPage = () => {
           {host}
         </Typography>
       </Stack>
-      {command && locked_at && (
-        <Stack spacing={1} direction="row" alignItems="center">
-          <Box sx={{ display: "flex", alignItems: "center", gap: 1 }}>
-            <Typography variant="h5">Currently running:</Typography>
-            <Typography variant="h5" color="text.secondary">
-              <Link href={"https://etke.cc/help/extras/scheduler/#" + command} target="_blank">
-                {command}
-              </Link>
-              <Tooltip title={locked_at.toString()}>
-                <Typography component="span" color="text.secondary" sx={{ display: "inline-block", ml: 1 }}>
-                  (started {getTimeSince(locked_at)} ago)
-                </Typography>
-              </Tooltip>
-            </Typography>
-          </Box>
-        </Stack>
-      )}
+
+      <CurrentlyRunningCommand />
 
       <ServerCommandsPanel />
 
       <Alert severity="info">
-        <Typography variant="body" sx={{ px: 2 }}>
+        <Typography variant="body1" sx={{ px: 2 }}>
           This is a{" "}
           <Link href="https://etke.cc/services/monitoring/" target="_blank">
             monitoring report

src/components/etke.cc/schedules/components/ServerSchedulesPage.tsx

@@ -5,10 +5,18 @@ import { Stack } from "@mui/material";
 
 import RecurringCommandsList from "./recurring/RecurringCommandsList";
 import ScheduledCommandsList from "./scheduled/ScheduledCommandsList";
-
+import CurrentlyRunningCommand from "../../CurrentlyRunningCommand";
+import ServerCommandsPanel from "../../ServerCommandsPanel";
 const ServerSchedulesPage = () => {
   return (
     <Stack spacing={3} mt={3}>
+      <Stack spacing={1} direction="column">
+        <CurrentlyRunningCommand />
+        <ServerCommandsPanel />
+      </Stack>
+
+      <Divider sx={{ my: 4, borderWidth: 1 }} />
+
       <Stack spacing={1} direction="column">
         <Box sx={{ display: "flex", alignItems: "center", gap: 1 }}>
           <Typography variant="h4">Server Schedules</Typography>

src/components/etke.cc/schedules/components/recurring/RecurringCommandEdit.tsx

@@ -146,7 +146,7 @@ const RecurringCommandEdit = () => {
         <CardContent>
           {command && (
             <Alert severity="info">
-              <Typography variant="body" sx={{ px: 2 }}>
+              <Typography variant="body1" sx={{ px: 2 }}>
                 You can find more details about the command{" "}
                 <Link href={`https://etke.cc/help/extras/scheduler/#${command.command}`} target="_blank">
                   here

src/components/etke.cc/schedules/components/scheduled/ScheduledCommandEdit.tsx

@@ -99,7 +99,7 @@ const ScheduledCommandEdit = () => {
       <Card>
         <CardHeader title={pageTitle} />
         {command && (
-          <Typography variant="body" sx={{ px: 2 }}>
+          <Typography variant="body1" sx={{ px: 2 }}>
             You can find more details about the command{" "}
             <Link href={`https://etke.cc/help/extras/scheduler/#${command.command}`} target="_blank">
               here

src/components/etke.cc/schedules/components/scheduled/ScheduledCommandShow.tsx

@@ -60,7 +60,7 @@ const ScheduledCommandShow = () => {
           <CardContent>
             {command && (
               <Alert severity="info">
-                <Typography variant="body" sx={{ px: 2 }}>
+                <Typography variant="body1" sx={{ px: 2 }}>
                   You can find more details about the command{" "}
                   <Link href={`https://etke.cc/help/extras/scheduler/#${command.command}`} target="_blank">
                     here

src/pages/LoginPage.test.tsx

@@ -36,7 +36,14 @@ describe("LoginForm", () => {
   it("renders with single restricted homeserver", () => {
     render(
       <BrowserRouter>
-        <AppContext.Provider value={{ restrictBaseUrl: "https://matrix.example.com", asManagedUsers: [], menu: [] }}>
+        <AppContext.Provider
+          value={{
+            restrictBaseUrl: "https://matrix.example.com",
+            asManagedUsers: [],
+            menu: [],
+            corsCredentials: "include",
+          }}
+        >
           <AdminContext i18nProvider={i18nProvider}>
             <LoginPage />
           </AdminContext>
@@ -62,6 +69,7 @@ describe("LoginForm", () => {
           restrictBaseUrl: ["https://matrix.example.com", "https://matrix.example.org"],
           asManagedUsers: [],
           menu: [],
+          corsCredentials: "include",
         }}
       >
         <AdminContext i18nProvider={i18nProvider}>

src/synapse/authProvider.test.ts

@@ -34,8 +34,8 @@ describe("authProvider", () => {
         headers: new Headers({
           Accept: "application/json",
           "Content-Type": "application/json",
+          credentials: "same-origin",
         }),
-        credentials: "same-origin",
         method: "POST",
       });
       expect(localStorage.getItem("base_url")).toEqual("http://example.com");
@@ -66,8 +66,8 @@ describe("authProvider", () => {
       headers: new Headers({
         Accept: "application/json",
         "Content-Type": "application/json",
+        credentials: "same-origin",
       }),
-      credentials: "same-origin",
       method: "POST",
     });
     expect(localStorage.getItem("base_url")).toEqual("https://example.com");
@@ -87,10 +87,11 @@ describe("authProvider", () => {
       expect(fetch).toHaveBeenCalledWith("example.com/_matrix/client/v3/logout", {
         headers: new Headers({
           Accept: "application/json",
+          "Content-Type": "application/json",
           Authorization: "Bearer foo",
+          credentials: "same-origin",
         }),
         method: "POST",
-        credentials: "same-origin",
         user: { authenticated: true, token: "Bearer foo" },
       });
       expect(localStorage.getItem("access_token")).toBeNull();

src/synapse/authProvider.ts

@@ -23,7 +23,11 @@ const authProvider: AuthProvider = {
     console.log("login ");
     let options: Options = {
       method: "POST",
-      credentials: GetConfig().corsCredentials,
+      headers: new Headers({
+        Accept: "application/json",
+        "Content-Type": "application/json",
+        credentials: GetConfig().corsCredentials as RequestCredentials,
+      }),
       body: JSON.stringify(
         Object.assign(
           {
@@ -150,7 +154,11 @@ const authProvider: AuthProvider = {
 
     const options: Options = {
       method: "POST",
-      credentials: GetConfig().corsCredentials,
+      headers: new Headers({
+        Accept: "application/json",
+        "Content-Type": "application/json",
+        credentials: GetConfig().corsCredentials as RequestCredentials,
+      }),
       user: {
         authenticated: true,
         token: `Bearer ${access_token}`,