feat(ui): connect account controls and processing navigation

job-tracker-ui/src/views/AdminProcessingPage.tsx

@@ -46,8 +46,16 @@ export default function AdminProcessingPage() {
   const [updated, setUpdated] = useState<string | null>(null);
   const [copy, setCopy] = useState<'copied' | 'failed' | null>(null);
   const detailHeading = useRef<HTMLHeadingElement>(null);
+  const filtersBody = useRef<HTMLFormElement>(null);
+  const resultsBody = useRef<HTMLDivElement>(null);
   const focusDetail = useRef(false);
 
+  useEffect(() => {
+    if (!detail || !focusDetail.current || identity !== getAuthUserKey() || isSessionInvalidated()) return;
+    focusDetail.current = false;
+    detailHeading.current?.focus();
+  }, [detail, identity]);
+
   useEffect(() => {
     const changed = () => {
       setListing(null); setDetail(null); setEvents([]); select(null); setBefore(null);
@@ -103,10 +111,6 @@ export default function AdminProcessingPage() {
           if (next.length) cursor = next[next.length - 1].id;
         } else setEvents([]);
         setUpdated(new Date().toISOString()); setError(null);
-        if (focusDetail.current && detailResponse) {
-          focusDetail.current = false;
-          requestAnimationFrame(() => { if (current()) detailHeading.current?.focus(); });
-        }
       } catch (cause) {
         if (!current() || request.signal.aborted) return;
         request.abort();
@@ -144,12 +148,13 @@ export default function AdminProcessingPage() {
     </Stack>
     {error ? <Alert severity="error" action={error === 'unavailable' ? <Button onClick={() => setRefresh(value => value + 1)}>{t('retry')}</Button> : undefined}>{t(error === 'denied' ? 'processingDenied' : error === 'invalid' ? 'processingInvalidFilters' : 'processingLoadFailed')}</Alert> : null}
     {busy && !visibleListing ? <Typography role="status">{t('loading')}</Typography> : null}
-    <Box component="form" onSubmit={event => { event.preventDefault(); resetSelection(); setPage(1); setFilters({ ...inputs, owner: inputs.owner.trim() }); }}>
+    <Box component="form" ref={filtersBody} tabIndex={-1} aria-label={t('processingFilters')} sx={{ scrollMarginTop: { xs: '9rem', sm: '6rem' } }} onSubmit={event => { event.preventDefault(); resetSelection(); setPage(1); setFilters({ ...inputs, owner: inputs.owner.trim() }); }}>
+      <Button type="button" disabled={!visibleListing} onClick={() => { resultsBody.current?.focus({ preventScroll: true }); resultsBody.current?.scrollIntoView({ block: 'start' }); }}>{t('processingJumpResults')}</Button>
       <Stack direction="row" useFlexGap flexWrap="wrap" spacing={2}>
-        <TextField select label={t('processingStatus')} value={inputs.status} onChange={event => setInputs(value => ({ ...value, status: event.target.value }))} slotProps={{ select: { native: true } }}>
+        <TextField select label={t('processingStatus')} value={inputs.status} onChange={event => setInputs(value => ({ ...value, status: event.target.value }))} slotProps={{ select: { native: true }, inputLabel: { shrink: true } }}>
           <option value="">{t('processingAll')}</option>{Object.keys(statuses).map(value => <option key={value} value={value}>{state(value)}</option>)}
         </TextField>
-        <TextField select label={t('processingTask')} value={inputs.taskType} onChange={event => setInputs(value => ({ ...value, taskType: event.target.value }))} slotProps={{ select: { native: true } }}>
+        <TextField select label={t('processingTask')} value={inputs.taskType} onChange={event => setInputs(value => ({ ...value, taskType: event.target.value }))} slotProps={{ select: { native: true }, inputLabel: { shrink: true } }}>
           <option value="">{t('processingAll')}</option>{Object.keys(tasks).map(value => <option key={value} value={value}>{t(tasks[value])}</option>)}<option value="other">{t('processingOther')}</option>
         </TextField>
         <TextField label={t('processingOwnerFilter')} value={inputs.owner} onChange={event => setInputs(value => ({ ...value, owner: event.target.value }))} slotProps={{ htmlInput: { maxLength: 255 } }} sx={{ flex: '1 1 14rem', minWidth: 0 }} />
@@ -157,10 +162,10 @@ export default function AdminProcessingPage() {
         <TextField type="number" label={t('processingApplicationId')} value={inputs.jobId} onChange={event => setInputs(value => ({ ...value, jobId: event.target.value }))} slotProps={{ htmlInput: { min: 1, max: 2147483647 } }} />
         <TextField type="date" label={t('processingCreatedFrom')} value={inputs.createdFrom} onChange={event => setInputs(value => ({ ...value, createdFrom: event.target.value }))} slotProps={{ inputLabel: { shrink: true } }} />
         <TextField type="date" label={t('processingCreatedBefore')} value={inputs.createdBefore} onChange={event => setInputs(value => ({ ...value, createdBefore: event.target.value }))} slotProps={{ inputLabel: { shrink: true } }} />
-        <TextField select label={t('processingWorkerFilter')} value={inputs.worker} onChange={event => setInputs(value => ({ ...value, worker: event.target.value }))} slotProps={{ select: { native: true } }}>
+        <TextField select label={t('processingWorkerFilter')} value={inputs.worker} onChange={event => setInputs(value => ({ ...value, worker: event.target.value }))} slotProps={{ select: { native: true }, inputLabel: { shrink: true } }}>
           <option value="">{t('processingAll')}</option>{['document', 'ai', 'untracked'].map(value => <option key={value} value={value}>{worker(value)}</option>)}
         </TextField>
-        <TextField select label={t('processingFailureCode')} value={inputs.failureCode} onChange={event => setInputs(value => ({ ...value, failureCode: event.target.value }))} slotProps={{ select: { native: true } }}>
+        <TextField select label={t('processingFailureCode')} value={inputs.failureCode} onChange={event => setInputs(value => ({ ...value, failureCode: event.target.value }))} slotProps={{ select: { native: true }, inputLabel: { shrink: true } }}>
           <option value="">{t('processingAll')}</option>{failureCodes.map(value => <option key={value} value={value}>{value}</option>)}
         </TextField>
         <Button type="submit" variant="outlined">{t('processingApplyFilters')}</Button>
@@ -169,12 +174,14 @@ export default function AdminProcessingPage() {
     {visibleListing ? <>
       <Stack direction="row" useFlexGap flexWrap="wrap" spacing={1}>{Object.entries(visibleListing.counts).map(([key, count]) => <Chip key={key} label={`${state(key)}: ${count}`} />)}</Stack>
       <PageSection title={t('processingJobs')} surface>
+        <Box ref={resultsBody} tabIndex={-1} role="group" aria-label={t('processingResults')} sx={{ minWidth: 0, scrollMarginTop: { xs: '9rem', sm: '6rem' } }}>
+        <Button onClick={() => { filtersBody.current?.focus({ preventScroll: true }); filtersBody.current?.scrollIntoView({ block: 'start' }); }}>{t('processingReturnFilters')}</Button>
         {!visibleListing.items.length ? <Typography>{t('processingNoJobs')}</Typography> : <TableContainer tabIndex={0} role="group" aria-label={t('processingJobs')} sx={{ overflowX: 'auto', maxWidth: '100%' }}>
-          <Table aria-label={t('processingJobs')} sx={{ minWidth: 800 }}><TableHead><TableRow>{['processingTask', 'processingOwner', 'processingStatus', 'processingWorker', 'processingCreated', 'processingElapsed'].map(key => <TableCell key={key}>{t(key as TranslationKey)}</TableCell>)}</TableRow></TableHead>
+          <Table aria-label={t('processingJobs')} sx={{ minWidth: 800, '& th:last-child, & td:last-child': { minWidth: 96 } }}><TableHead><TableRow>{['processingTask', 'processingOwner', 'processingStatus', 'processingWorker', 'processingCreated', 'processingElapsed'].map(key => <TableCell key={key}>{t(key as TranslationKey)}</TableCell>)}</TableRow></TableHead>
             <TableBody>{visibleListing.items.map(item => <TableRow key={item.id} selected={selected === item.id}>
               <TableCell component="th" scope="row"><Button aria-label={t('processingViewDetails', { id: item.id })} onClick={() => { setDetail(null); setEvents([]); setBefore(null); setCopy(null); focusDetail.current = true; select(item.id); }}>{t(tasks[item.taskType] ?? 'processingOther')}</Button><Typography variant="caption" display="block">{item.job?.title ?? item.document?.name ?? item.id.slice(0, 8)}</Typography></TableCell>
               <TableCell><Button onClick={() => { const next = { ...filters, owner: item.owner.id }; setInputs(next); setFilters(next); setPage(1); resetSelection(); }}>{item.owner.name ?? item.owner.email ?? item.owner.id}</Button><Typography variant="caption" display="block">{item.owner.email}</Typography></TableCell>
-              <TableCell>{state(item.status)}<Typography variant="caption" display="block">{stage(item.stage)}</Typography>{item.failureCode && ['failed', 'waiting_for_retry', 'waiting_for_external_fallback'].includes(item.status) ? <Chip size="small" color="warning" label={failure(item.failureCode)} /> : null}</TableCell>
+              <TableCell>{state(item.status)}<Typography variant="caption" display="block">{stage(item.stage)}</Typography>{item.failureCode && ['failed', 'waiting_for_retry', 'waiting_for_external_fallback'].includes(item.status) ? <Chip size="small" color="warning" label={failure(item.failureCode)} sx={{ height: 'auto', maxWidth: '100%', '& .MuiChip-label': { whiteSpace: 'normal', py: 0.25 } }} /> : null}</TableCell>
               <TableCell>{worker(item.worker)}<Typography variant="caption" display="block">{t(item.workerEnabled ? 'processingEnabled' : 'processingDisabled')}</Typography></TableCell>
               <TableCell><time dateTime={item.createdAtUtc}>{date(item.createdAtUtc)}</time></TableCell>
               <TableCell>{t('processingDuration', { count: Math.round(item.durationSeconds) })}</TableCell>
@@ -185,6 +192,7 @@ export default function AdminProcessingPage() {
           <Typography>{t('processingPage', { page, total: Math.max(1, Math.min(1000, Math.ceil(visibleListing.total / 25))) })}</Typography>
           <Button disabled={page >= 1000 || page * 25 >= visibleListing.total || busy} onClick={() => { resetSelection(); setPage(value => value + 1); }}>{t('processingNext')}</Button>
         </Stack>
+        </Box>
       </PageSection>
       <Box component="details"><Box component="summary" sx={{ p: 1, cursor: 'pointer' }}>{t('processingWorkerFlags')}</Box>
         <Typography variant="body2">{t('processingWorkerFlagsHelp')}</Typography><Typography variant="body2">{t('processingAiDescription')}</Typography>