From ae878518894d344d1c102ff144ad2a1a9c9a1de6 Mon Sep 17 00:00:00 2001
From: Michael Ficocelli <ficocemt@gmail.com>
Date: Thu, 31 Aug 2023 20:31:48 -0400
Subject: [PATCH] Improve pagination for Active Scripts page (#763)

---
 .../ActiveScripts/ServerAccordionContent.tsx  | 24 +++++----
 src/ui/ActiveScripts/ServerAccordions.tsx     | 52 ++++++++++++-------
 2 files changed, 47 insertions(+), 29 deletions(-)

diff --git a/src/ui/ActiveScripts/ServerAccordionContent.tsx b/src/ui/ActiveScripts/ServerAccordionContent.tsx
index fc1508dcc..df167dedb 100644
--- a/src/ui/ActiveScripts/ServerAccordionContent.tsx
+++ b/src/ui/ActiveScripts/ServerAccordionContent.tsx
@@ -25,16 +25,20 @@ export function ServerAccordionContent(props: IProps): React.ReactElement {
 
   return (
     <>
-      <TablePagination
-        rowsPerPageOptions={[10, 15, 20, 100]}
-        component="div"
-        count={props.workerScripts.length}
-        rowsPerPage={rowsPerPage}
-        page={page}
-        onPageChange={handleChangePage}
-        onRowsPerPageChange={handleChangeRowsPerPage}
-        ActionsComponent={TablePaginationActionsAll}
-      />
+      {props.workerScripts.length > 10 ? (
+        <TablePagination
+          rowsPerPageOptions={[10, 15, 20, 100]}
+          component="div"
+          count={props.workerScripts.length}
+          rowsPerPage={rowsPerPage}
+          page={page}
+          onPageChange={handleChangePage}
+          onRowsPerPageChange={handleChangeRowsPerPage}
+          ActionsComponent={TablePaginationActionsAll}
+        />
+      ) : (
+        ""
+      )}
       <List dense disablePadding>
         {props.workerScripts.slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage).map((ws) => (
           <WorkerScriptAccordion key={`${ws.pid}`} workerScript={ws} />
diff --git a/src/ui/ActiveScripts/ServerAccordions.tsx b/src/ui/ActiveScripts/ServerAccordions.tsx
index 25f030c6d..e06de5147 100644
--- a/src/ui/ActiveScripts/ServerAccordions.tsx
+++ b/src/ui/ActiveScripts/ServerAccordions.tsx
@@ -9,6 +9,7 @@ import { ServerAccordion } from "./ServerAccordion";
 import TextField from "@mui/material/TextField";
 import List from "@mui/material/List";
 import TablePagination from "@mui/material/TablePagination";
+import Grid from "@mui/material/Grid";
 import { WorkerScript } from "../../Netscript/WorkerScript";
 import { GetServer } from "../../Server/AllServers";
 import { BaseServer } from "../../Server/BaseServer";
@@ -88,25 +89,38 @@ export function ServerAccordions(props: IProps): React.ReactElement {
 
   return (
     <>
-      <TextField
-        value={filter}
-        onChange={handleFilterChange}
-        autoFocus
-        InputProps={{
-          startAdornment: <SearchIcon />,
-          spellCheck: false,
-        }}
-      />
-      <TablePagination
-        rowsPerPageOptions={[10, 15, 20, 100]}
-        component="div"
-        count={filtered.length}
-        rowsPerPage={rowsPerPage}
-        page={page}
-        onPageChange={handleChangePage}
-        onRowsPerPageChange={handleChangeRowsPerPage}
-        ActionsComponent={TablePaginationActionsAll}
-      />
+      <Grid container>
+        <Grid item xs={4}>
+          <TextField
+            value={filter}
+            onChange={handleFilterChange}
+            autoFocus
+            InputProps={{
+              startAdornment: <SearchIcon />,
+              spellCheck: false,
+            }}
+            style={{
+              paddingTop: "8px",
+            }}
+          />
+        </Grid>
+        <Grid item xs={8}>
+          {filtered.length > 10 ? (
+            <TablePagination
+              rowsPerPageOptions={[10, 15, 20, 100]}
+              component="div"
+              count={filtered.length}
+              rowsPerPage={rowsPerPage}
+              page={page}
+              onPageChange={handleChangePage}
+              onRowsPerPageChange={handleChangeRowsPerPage}
+              ActionsComponent={TablePaginationActionsAll}
+            />
+          ) : (
+            ""
+          )}
+        </Grid>
+      </Grid>
       <List dense={true}>
         {filtered.slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage).map((data) => {
           return (