feat(jobs): pagination and sorting

package.json

@@ -30,6 +30,7 @@
     "postcss": "8.4.38",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
+    "react-virtuoso": "^4.7.10",
     "server-only": "^0.0.1",
     "sharp": "^0.33.3",
     "swr": "^2.2.5"

src/components/applications/LoginForm.tsx

@@ -29,7 +29,7 @@ import { useSearchParamsUtils } from "@/hooks/searchParamsUtils";
 export function LoginForm() {
   const theme = useMUITheme();
   const router = useRouter();
-  const { data, error, isLoading } = useMetadata();
+  const { metadata, error, isLoading } = useMetadata();
   const [selectedVO, setSelectedVO] = useState<string | null>(null);
   const [selectedGroup, setSelectedGroup] = useState<string | null>(null);
   const { configuration, setConfiguration } = useOIDCContext();
@@ -58,16 +58,19 @@ export function LoginForm() {
   }, [getParam, isAuthenticated, router]);
 
   // Get default group
-  const getDefaultGroup = (data: Metadata | undefined, vo: string): string => {
-    if (!data) {
+  const getDefaultGroup = (
+    metadata: Metadata | undefined,
+    vo: string,
+  ): string => {
+    if (!metadata) {
       return "";
     }
 
-    const defaultGroup = data.virtual_organizations[vo]?.default_group;
+    const defaultGroup = metadata.virtual_organizations[vo]?.default_group;
     if (defaultGroup) {
       return defaultGroup;
     } else {
-      const groupKeys = Object.keys(data.virtual_organizations[vo].groups);
+      const groupKeys = Object.keys(metadata.virtual_organizations[vo].groups);
       return groupKeys.length > 0 ? groupKeys[0] : "";
     }
   };
@@ -79,7 +82,7 @@ export function LoginForm() {
   ) => {
     if (newValue) {
       setSelectedVO(newValue);
-      setSelectedGroup(getDefaultGroup(data, newValue));
+      setSelectedGroup(getDefaultGroup(metadata, newValue));
     }
   };
 
@@ -106,16 +109,17 @@ export function LoginForm() {
   if (error) {
     return <div>An error occurred while fetching metadata.</div>;
   }
-  if (!data) {
+  if (!metadata) {
     return <div>No metadata found.</div>;
   }
 
   // Is there only one VO?
-  const singleVO = data && Object.keys(data.virtual_organizations).length === 1;
+  const singleVO =
+    metadata && Object.keys(metadata.virtual_organizations).length === 1;
   if (singleVO && !selectedVO) {
-    setSelectedVO(Object.keys(data.virtual_organizations)[0]);
+    setSelectedVO(Object.keys(metadata.virtual_organizations)[0]);
     setSelectedGroup(
-      getDefaultGroup(data, Object.keys(data.virtual_organizations)[0]),
+      getDefaultGroup(metadata, Object.keys(metadata.virtual_organizations)[0]),
     );
   }
 
@@ -157,7 +161,7 @@ export function LoginForm() {
             </Typography>
           ) : (
             <Autocomplete
-              options={Object.keys(data.virtual_organizations)}
+              options={Object.keys(metadata.virtual_organizations)}
               getOptionLabel={(option) => option}
               renderInput={(params) => (
                 <TextField
@@ -185,14 +189,14 @@ export function LoginForm() {
                   name={selectedVO}
                   value={
                     selectedGroup ||
-                    data.virtual_organizations[selectedVO].default_group
+                    metadata.virtual_organizations[selectedVO].default_group
                   }
                   label="Select a Group"
                   onChange={handleGroupChange}
                   data-testid="select-group"
                 >
                   {Object.keys(
-                    data.virtual_organizations[selectedVO].groups,
+                    metadata.virtual_organizations[selectedVO].groups,
                   ).map((groupKey) => (
                     <MenuItem key={groupKey} value={groupKey}>
                       {groupKey}
@@ -223,7 +227,7 @@ export function LoginForm() {
                 sx={{ paddingTop: "5%", color: "gray", textAlign: "center" }}
               >
                 Need help?{" "}
-                {data.virtual_organizations[selectedVO].support.message}
+                {metadata.virtual_organizations[selectedVO].support.message}
               </Typography>
             </Box>
           )}

src/components/layout/Dashboard.tsx

@@ -97,7 +97,7 @@ export default function Dashboard(props: DashboardProps) {
         </Box>
         <Box
           component="main"
-          sx={{ pt: 10, px: 3, width: { sm: `calc(100% - ${drawerWidth}px)` } }}
+          sx={{ pt: 7, width: { sm: `calc(100% - ${drawerWidth}px)` } }}
         >
           {props.children}
         </Box>

src/components/ui/ApplicationHeader.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { Stack, Typography } from "@mui/material";
+import { Stack, Typography, useMediaQuery, useTheme } from "@mui/material";
 import { useApplicationTitle } from "@/hooks/application";
 
 /**
@@ -8,10 +8,17 @@ import { useApplicationTitle } from "@/hooks/application";
  * @returns the application header
  */
 export default function ApplicationHeader({ type }: { type: string }) {
+  const theme = useTheme();
+  const isMobile = useMediaQuery(theme.breakpoints.down("sm"));
   const appTitle = useApplicationTitle();
+
   return (
     <header>
-      <Stack spacing={2} direction={"row"} alignItems={"end"}>
+      <Stack
+        spacing={2}
+        direction={isMobile ? "column" : "row"}
+        alignItems={isMobile ? "start" : "end"}
+      >
         {appTitle && (
           <Typography
             color="text.primary"