Revert "OCD-5103 System Maintenance Layout UI"

.gitignore

@@ -27,4 +27,3 @@ test/config/urls.js
 !.yarn/sdks
 !.yarn/versions
 dist/
-.github/copilot-instructions.md

src/app/components/jobs/system-job-types-view.jsx

@@ -1,35 +1,38 @@
 import React, { useEffect, useState } from 'react';
 import {
-  Box,
   Card,
   CardContent,
   CardHeader,
   IconButton,
-  Typography,
+  Paper,
+  Table,
+  TableBody,
+  TableCell,
+  TableContainer,
+  TableRow,
   makeStyles,
 } from '@material-ui/core';
 import PlayArrowIcon from '@material-ui/icons/PlayArrow';
 import { arrayOf, func } from 'prop-types';
 
-import { ChplSearchResultCard, ChplSortControls, ChplTooltip } from 'components/util';
-import { sortComparator } from 'components/util/sortable-headers';
+import { ChplSortableHeaders, sortComparator } from 'components/util/sortable-headers';
 import { job as jobType } from 'shared/prop-types';
 
-const sortOptions = [
-  { property: 'name', text: 'Job Name' },
+const headers = [
+  { property: 'name', text: 'Job Name', sortable: true },
+  { property: 'description', text: 'Description' },
+  { property: 'actions', text: 'Actions', invisible: true },
 ];
 
 const useStyles = makeStyles({
-  headerContainer: {
-    display: 'flex',
-    justifyContent: 'space-between',
-    alignItems: 'center',
-    padding: '16px',
+  container: {
+    maxHeight: '64vh',
   },
-  resultsContainer: {
-    display: 'flex',
-    gap: '8px',
-    alignItems: 'center',
+  firstColumn: {
+    position: 'sticky',
+    left: 0,
+    boxShadow: 'rgba(149, 157, 165, 0.1) 0px 4px 8px',
+    backgroundColor: '#fff',
   },
 });
 
@@ -45,58 +48,53 @@ function ChplSystemJobTypesView(props) {
       .sort(sortComparator('name')));
   }, []);
 
-  const handleTableSort = (property, orderDirection) => {
+  const handleTableSort = (event, property, orderDirection) => {
     const descending = orderDirection === 'desc';
-    setJobTypes((prev) => [...prev].sort(sortComparator(property, descending)));
+    const updated = jobTypes.sort(sortComparator(property, descending));
     setOrderBy(property);
     setOrder(orderDirection);
+    setJobTypes(updated);
   };
 
   return (
     <Card>
       <CardHeader title="Types of Jobs" />
       <CardContent>
-        <div className={classes.headerContainer}>
-          <div className={classes.resultsContainer}>
-            <Typography variant="subtitle2">Jobs:</Typography>
-            <Typography variant="body2">
-              {`(${jobTypes.length} Result${jobTypes.length !== 1 ? 's' : ''})`}
-            </Typography>
-          </div>
-          <ChplSortControls
-            sortOptions={sortOptions}
-            orderBy={orderBy}
-            order={order}
-            onSort={handleTableSort}
-          />
-        </div>
-        <Box style={{ maxHeight: 'calc(100vh - 400px)', overflow: 'auto', padding: '0 16px' }}>
-          { jobTypes.map((item) => (
-            <ChplSearchResultCard
-              key={item.name}
-              fieldGroups={[
-                [
-                  { label: 'Job Name', value: item.name, xs: 12, sm: 6 },
-                  { label: 'Description', value: item.description, xs: 12, sm: 5 },
-                ],
-              ]}
-              actions={
-                <ChplTooltip
-                  title="Schedule Job"
-                  placement="top"
-                >
-                  <IconButton
-                    onClick={() => dispatch({ action: 'schedule', payload: item })}
-                    color="primary"
-                    aria-label={`Schedule Job ${item.name}`}
-                  >
-                    <PlayArrowIcon />
-                  </IconButton>
-                </ChplTooltip>
-              }
+        <TableContainer className={classes.container} component={Paper}>
+          <Table
+            aria-label="Types of Jobs table"
+          >
+            <ChplSortableHeaders
+              headers={headers}
+              onTableSort={handleTableSort}
+              orderBy={orderBy}
+              order={order}
+              stickyHeader
             />
-          ))}
-        </Box>
+            <TableBody>
+              { jobTypes
+                .map((item) => (
+                  <TableRow key={item.name}>
+                    <TableCell className={classes.firstColumn}>
+                      { item.name }
+                    </TableCell>
+                    <TableCell>
+                      { item.description }
+                    </TableCell>
+                    <TableCell align="right">
+                      <IconButton
+                        onClick={() => dispatch({ action: 'schedule', payload: item })}
+                        color="primary"
+                        aria-label={`Schedule Job ${item.name}`}
+                      >
+                        <PlayArrowIcon />
+                      </IconButton>
+                    </TableCell>
+                  </TableRow>
+                ))}
+            </TableBody>
+          </Table>
+        </TableContainer>
       </CardContent>
     </Card>
   );

src/app/components/jobs/system-jobs.jsx

@@ -21,7 +21,7 @@ import {
   useFetchSystemTriggers,
   usePostOneTimeTrigger,
 } from 'api/jobs';
-import { UserContext } from 'shared/contexts';
+import { BreadcrumbContext, UserContext } from 'shared/contexts';
 
 const useStyles = makeStyles({
   container: {
@@ -32,6 +32,7 @@ const useStyles = makeStyles({
 });
 
 function ChplJobs() {
+  const { append, display, hide } = useContext(BreadcrumbContext);
   const { hasAnyRole } = useContext(UserContext);
   const jobTypeQuery = useFetchJobTypes();
   const systemQuery = useFetchSystemTriggers({ isAuthenticated: hasAnyRole(['chpl-admin']) });
@@ -44,6 +45,30 @@ function ChplJobs() {
   const classes = useStyles();
   let handleDispatch;
 
+  useEffect(() => {
+    append(
+      <Button
+        key="systemJobs.viewall.disabled"
+        depth={1}
+        variant="text"
+        disabled
+      >
+        System Jobs
+      </Button>,
+    );
+    append(
+      <Button
+        key="systemJobs.viewall"
+        depth={1}
+        variant="text"
+        onClick={() => handleDispatch({ action: 'close' })}
+      >
+        System Jobs
+      </Button>,
+    );
+    display('systemJobs.viewall.disabled');
+  }, []);
+
   useEffect(() => {
     if (jobTypeQuery.isLoading || !jobTypeQuery.isSuccess) { return; }
     setJobTypes(jobTypeQuery.data.filter((j) => j.group === 'systemJobs'));
@@ -61,13 +86,18 @@ function ChplJobs() {
     switch (action) {
       case 'close':
         setJob(undefined);
+        display('systemJobs.viewall.disabled');
+        hide('systemJobs.viewall');
+        hide('systemJobs.schedule.disabled');
         break;
       case 'delete':
         apiAction = deleteTrigger.mutate;
         message = payload.successMessage;
         break;
       case 'edit':
         setJob(payload);
+        display('systemJobs.viewall');
+        hide('systemJobs.viewall.disabled');
         break;
       case 'save':
         if (payload.group === 'systemJobs' && payload.runTime) {
@@ -94,6 +124,8 @@ function ChplJobs() {
       case 'schedule':
         if (payload.group === 'systemJobs') {
           setJob(payload);
+          display('systemJobs.viewall');
+          hide('systemJobs.viewall.disabled');
         }
         break;
         // no default
@@ -105,6 +137,8 @@ function ChplJobs() {
             variant: 'success',
           });
           setJob(undefined);
+          display('systemJobs.viewall.disabled');
+          hide('systemJobs.viewall');
         },
         onError: (error) => {
           const errorMessage = error.response.data?.error

src/app/components/jobs/system-trigger-create.jsx

@@ -15,6 +15,7 @@ import * as jsJoda from '@js-joda/core';
 
 import { ChplActionBar } from 'components/action-bar';
 import { ChplTextField } from 'components/util';
+import { BreadcrumbContext } from 'shared/contexts';
 import { job as jobType } from 'shared/prop-types';
 
 const useStyles = makeStyles({
@@ -33,10 +34,26 @@ const validationSchema = yup.object({
 
 function ChplSystemTriggerCreate(props) {
   const { job, dispatch } = props;
+  const { append, display, hide } = useContext(BreadcrumbContext);
   const classes = useStyles();
   let formik;
 
+  useEffect(() => {
+    append(
+      <Button
+        key="systemJobs.schedule.disabled"
+        depth={2}
+        variant="text"
+        disabled
+      >
+        Schedule
+      </Button>,
+    );
+    display('systemJobs.schedule.disabled');
+  }, []);
+
   const handleDispatch = (action) => {
+    hide('systemJobs.schedule.disabled');
     switch (action) {
       case 'cancel':
         dispatch({ action: 'close' });