feat: show job's return value in more convenient way \ hide data and …

…stacktrace behind accordions

packages/ui/src/components/AccordionJsonView/index.tsx

@@ -0,0 +1,31 @@
+import * as React from 'react';
+import Accordion from '@mui/material/Accordion';
+import AccordionSummary from '@mui/material/AccordionSummary';
+import AccordionDetails from '@mui/material/AccordionDetails';
+import Typography from '@mui/material/Typography';
+import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
+import SimpleJsonView from '../SimpleJsonView';
+
+type TProps = {
+  header: string;
+  textClassName?: string;
+  defaultExpanded?: boolean;
+};
+const AccordionJsonView: React.FC<TProps> = (props) => {
+  const { children, header, textClassName, defaultExpanded = true } = props;
+  return (
+    <div>
+      <Accordion defaultExpanded={defaultExpanded}>
+        <AccordionSummary expandIcon={<ExpandMoreIcon />}>
+          <Typography>{header}</Typography>
+        </AccordionSummary>
+        <AccordionDetails>
+          <SimpleJsonView className={textClassName}>{children}</SimpleJsonView>
+        </AccordionDetails>
+      </Accordion>
+    </div>
+  );
+};
+
+export default AccordionJsonView;
+

packages/ui/src/components/Settings/Preferences/index.tsx

@@ -10,31 +10,71 @@ export default function Preferences() {
     toggleConfirmDangerousActions,
     groupQueuesByPrefix,
     toggleGroupQueuesByPrefix,
+    expandJobData,
+    expandJobStackTrace,
+    expandJobReturnValue,
+    toggleExpandJobData,
+    toggleExpandJobStackTrace,
+    toggleExpandJobReturnValue,
   } = usePreferencesStore();
   return (
-    <div>
-      <FormControl margin="dense">
-        <FormControlLabel
-          control={
-            <Switch
-              checked={confirmDangerousActions}
-              onChange={toggleConfirmDangerousActions}
-            />
-          }
-          label="Confirm dangerous actions"
-        />
-      </FormControl>
-      <FormControl margin="dense">
-        <FormControlLabel
-          control={
-            <Switch
-              checked={groupQueuesByPrefix}
-              onChange={toggleGroupQueuesByPrefix}
-            />
-          }
-          label="Group queues by prefix"
-        />
-      </FormControl>
-    </div>
+    <>
+      <div>
+        <FormControl margin="dense">
+          <FormControlLabel
+            control={
+              <Switch
+                checked={confirmDangerousActions}
+                onChange={toggleConfirmDangerousActions}
+              />
+            }
+            label="Confirm dangerous actions"
+          />
+        </FormControl>
+        <FormControl margin="dense">
+          <FormControlLabel
+            control={
+              <Switch
+                checked={groupQueuesByPrefix}
+                onChange={toggleGroupQueuesByPrefix}
+              />
+            }
+            label="Group queues by prefix"
+          />
+        </FormControl>
+      </div>
+      <div>
+        <FormControl margin="dense">
+          <FormControlLabel
+            control={
+              <Switch checked={expandJobData} onChange={toggleExpandJobData} />
+            }
+            label="Expand job's data by default"
+          />
+        </FormControl>
+        <FormControl margin="dense">
+          <FormControlLabel
+            control={
+              <Switch
+                checked={expandJobReturnValue}
+                onChange={toggleExpandJobReturnValue}
+              />
+            }
+            label="Expand job's return value by default"
+          />
+        </FormControl>
+        <FormControl margin="dense">
+          <FormControlLabel
+            control={
+              <Switch
+                checked={expandJobStackTrace}
+                onChange={toggleExpandJobStackTrace}
+              />
+            }
+            label="Expand job's stacktrace return value by default"
+          />
+        </FormControl>
+      </div>
+    </>
   );
 }

packages/ui/src/screens/jobs/List/Job/index.tsx

@@ -6,11 +6,12 @@ import Actions from './Actions';
 import type { TJobProps } from './typings';
 import Checkbox from '@mui/material/Checkbox';
 import JobStatusChip from '@/components/JobStatusChip';
-import SimpleJsonView from '@/components/SimpleJsonView';
 import isempty from 'lodash/isEmpty';
 import makeStyles from '@mui/styles/makeStyles';
 import { useRemoveJobSelectionOnUnmount } from './hooks';
 import ms from 'ms';
+import AccordionJsonView from '@/components/AccordionJsonView';
+import { usePreferencesStore } from '@/stores/preferences';
 
 const useStyles = makeStyles((theme) => ({
   rowWithExtra: {
@@ -45,6 +46,7 @@ const Job = ({
   removeSelected,
   readonly,
 }: TJobProps) => {
+  const prefs = usePreferencesStore();
   const date = useFormatDateTime(job.timestamp);
   const cls = useStyles();
   useRemoveJobSelectionOnUnmount(job.id, isSelected, removeSelected);
@@ -53,7 +55,8 @@ const Job = ({
   );
   const hasData = !!job.data && job.data !== '{}';
   const hasStacktrace = !isempty(job.stacktrace);
-  const showExtra = hasData || hasStacktrace;
+  const hasReturnValue = !isempty(job.returnValue);
+  const showExtra = hasData || hasStacktrace || hasReturnValue;
   return (
     <>
       <TableRow className={showExtra ? cls.rowWithExtra : undefined}>
@@ -84,14 +87,36 @@ const Job = ({
           <TableCell className={cls.extraCell} colSpan={12}>
             <div
               className={
-                hasData && hasStacktrace ? cls.extraTwoCol : cls.extraOneCol
+                [hasData, hasStacktrace, hasReturnValue].filter(Boolean)
+                  .length > 1
+                  ? cls.extraTwoCol
+                  : cls.extraOneCol
               }
             >
-              {hasData && <SimpleJsonView>{job.data}</SimpleJsonView>}
+              {hasData && (
+                <AccordionJsonView
+                  defaultExpanded={prefs.expandJobData}
+                  header="Job Data"
+                >
+                  {job.data}
+                </AccordionJsonView>
+              )}
+              {hasReturnValue && (
+                <AccordionJsonView
+                  defaultExpanded={prefs.expandJobReturnValue}
+                  header="Return Value"
+                >
+                  {job.returnValue}
+                </AccordionJsonView>
+              )}
               {hasStacktrace && (
-                <SimpleJsonView className={cls.stacktrace}>
+                <AccordionJsonView
+                  defaultExpanded={prefs.expandJobStackTrace}
+                  textClassName={cls.stacktrace}
+                  header="Stacktrace"
+                >
                   {job.stacktrace.join('\n\n')}
-                </SimpleJsonView>
+                </AccordionJsonView>
               )}
             </div>
           </TableCell>

packages/ui/src/stores/preferences.ts

@@ -5,16 +5,25 @@ import { StorageConfig } from '@/config/storage';
 type TState = {
   confirmDangerousActions: boolean;
   groupQueuesByPrefix: boolean;
+  expandJobData: boolean;
+  expandJobReturnValue: boolean;
+  expandJobStackTrace: boolean;
 
   changeConfirmDangerousActions: (value: boolean) => void;
   toggleConfirmDangerousActions: () => void;
   toggleGroupQueuesByPrefix: () => void;
+  toggleExpandJobData: () => void;
+  toggleExpandJobReturnValue: () => void;
+  toggleExpandJobStackTrace: () => void;
 };
 export const usePreferencesStore = createStore<TState>(
   persist(
     (set) => ({
       confirmDangerousActions: true,
       groupQueuesByPrefix: false,
+      expandJobData: false,
+      expandJobReturnValue: false,
+      expandJobStackTrace: false,
 
       changeConfirmDangerousActions: (confirmDangerousActions) =>
         set({ confirmDangerousActions }),
@@ -26,10 +35,16 @@ export const usePreferencesStore = createStore<TState>(
         set((state) => ({
           groupQueuesByPrefix: !state.groupQueuesByPrefix,
         })),
+      toggleExpandJobData: () =>
+        set((state) => ({ expandJobData: !state.expandJobData })),
+      toggleExpandJobReturnValue: () =>
+        set((state) => ({ expandJobReturnValue: !state.expandJobReturnValue })),
+      toggleExpandJobStackTrace: () =>
+        set((state) => ({ expandJobStackTrace: !state.expandJobStackTrace })),
     }),
     {
       name: `${StorageConfig.persistNs}prefs`,
-      version: 2,
+      version: 3,
     }
   )
 );