Confirmation for stop with visual feedback on request for Job List, Job Detail

src/components/confirm-buttons.tsx

@@ -0,0 +1,72 @@
+import { Box, Button, Chip, IconButton, SvgIconTypeMap } from '@mui/material';
+import React, { useState } from 'react';
+import { useTranslator } from '../hooks';
+import CloseIcon from '@mui/icons-material/Close';
+import { OverridableComponent } from '@mui/material/OverridableComponent';
+
+export function ConfirmButton(props: {
+ onConfirm: () => void;
+ confirmationText: string;
+ icon:
+ | JSX.Element
+ | (OverridableComponent<SvgIconTypeMap<unknown, 'svg'>> & {
+ muiName: string;
+ });
+ name?: string | undefined;
+ remainAfterConfirmation?: boolean;
+ remainText?: string;
+}): JSX.Element | null {
+ const [clicked, setClicked] = useState(false);
+ const [confirmed, setConfirmed] = useState(false);
+
+ return (
+ <Box sx={{ width: '6em' }}>
+ {clicked ? (
+ props.remainAfterConfirmation && confirmed ? (
+ <Chip label={props.remainText} />
+ ) : (
+ <Button
+ variant="contained"
+ color="error"
+ title={props.name}
+ onClick={_ => {
+ props.onConfirm();
+ if (props.remainAfterConfirmation) {
+ setConfirmed(true);
+ }
+ }}
+ onBlur={_ => setClicked(false)}
+ style={{ visibility: clicked ? 'visible' : 'hidden' }}
+ autoFocus
+ >
+ {props.confirmationText}
+ </Button>
+ )
+ ) : (
+ <IconButton title={props.name} onClick={_ => setClicked(true)}>
+ {props.icon}
+ </IconButton>
+ )}
+ </Box>
+ );
+}
+
+export function ConfirmDeleteButton(props: {
+ clickHandler: () => void;
+ name?: string;
+}): JSX.Element | null {
+ const trans = useTranslator('jupyterlab');
+
+ const buttonTitle = props.name
+ ? trans.__('Delete "%1"', props.name)
+ : trans.__('Delete job');
+
+ return (
+ <ConfirmButton
+ name={buttonTitle}
+ onConfirm={props.clickHandler}
+ confirmationText={trans.__('Delete')}
+ icon={<CloseIcon fontSize="small" />}
+ />
+ );
+}

src/components/confirm-dialog-buttons.tsx

@@ -0,0 +1,105 @@
+import React, { useState } from 'react';
+
+import {
+ Button,
+ Dialog,
+ DialogTitle,
+ DialogContent,
+ DialogContentText,
+ DialogActions,
+ useTheme
+} from '@mui/material';
+import { useTranslator } from '../hooks';
+
+export const ConfirmDialogButton = (props: {
+ onConfirm: () => Promise<void>;
+ title: string;
+ dialogText: string;
+ dialogConfirmText: string;
+ variant?: 'text' | 'contained' | 'outlined';
+ errorColor?: boolean;
+ pendingConfirmText?: string;
+}): JSX.Element => {
+ const [open, setOpen] = useState(false);
+
+ const trans = useTranslator('jupyterlab');
+ const theme = useTheme();
+
+ const handleClose = () => {
+ setOpen(false);
+ };
+
+ return (
+ <>
+ <Button
+ variant={props.variant ?? 'contained'}
+ color={props.errorColor ? 'error' : 'primary'}
+ onClick={_ => setOpen(true)}
+ >
+ {props.title}
+ </Button>
+ <Dialog open={open} onClose={handleClose}>
+ <DialogTitle>{props.title}</DialogTitle>
+ <DialogContent>
+ <DialogContentText>{props.dialogText}</DialogContentText>
+ </DialogContent>
+ <DialogActions>
+ <Button
+ variant="contained"
+ sx={{ backgroundColor: theme.palette.grey[600] }}
+ onClick={handleClose}
+ autoFocus
+ >
+ {trans.__('Cancel')}
+ </Button>
+ <Button
+ variant="contained"
+ color="error"
+ onClick={async _ => {
+ handleClose();
+ await props.onConfirm();
+ }}
+ >
+ {props.dialogConfirmText}
+ </Button>
+ </DialogActions>
+ </Dialog>
+ </>
+ );
+};
+
+export const ConfirmDialogDeleteButton = (props: {
+ handleDelete: () => Promise<void>;
+ title: string;
+ dialogText: string;
+}): JSX.Element => {
+ const trans = useTranslator('jupyterlab');
+ return (
+ <ConfirmDialogButton
+ onConfirm={props.handleDelete}
+ title={props.title}
+ dialogText={props.dialogText}
+ dialogConfirmText={trans.__('Delete')}
+ pendingConfirmText={trans.__('Deleting')}
+ errorColor
+ />
+ );
+};
+
+export const ConfirmDialogStopButton = (props: {
+ handleStop: () => Promise<void>;
+ title: string;
+ dialogText: string;
+}): JSX.Element => {
+ const trans = useTranslator('jupyterlab');
+ return (
+ <ConfirmDialogButton
+ onConfirm={props.handleStop}
+ title={props.title}
+ dialogText={props.dialogText}
+ dialogConfirmText={trans.__('Stop')}
+ pendingConfirmText={trans.__('Stopping')}
+ variant="outlined"
+ />
+ );
+};

src/components/job-definition-row.tsx

@@ -15,7 +15,7 @@ import TableCell from '@mui/material/TableCell';
 import { Scheduler, SchedulerService } from '../handler';
 import { useTranslator } from '../hooks';
 import { TranslationBundle } from '@jupyterlab/translation';
-import { ConfirmDeleteIcon } from './confirm-delete-icon';
+import { ConfirmDeleteButton } from './confirm-buttons';
 
 function CreatedAt(props: {
  job: Scheduler.IDescribeJobDefinition;
@@ -117,7 +117,7 @@ export function buildJobDefinitionRow(
  forceReload();
  }}
  />
- <ConfirmDeleteIcon
+ <ConfirmDeleteButton
  name={jobDef.name}
  clickHandler={async () => {
  await ss.deleteJobDefinition(jobDef.job_definition_id);

src/components/job-row.tsx

@@ -1,19 +1,15 @@
 import React, { useState } from 'react';
 
 import { JupyterFrontEnd } from '@jupyterlab/application';
-
-import DownloadIcon from '@mui/icons-material/Download';
-import StopIcon from '@mui/icons-material/Stop';
-import IconButton from '@mui/material/IconButton';
-import { Stack, TableCell, TableRow } from '@mui/material';
-
-import { ConfirmDeleteIcon } from './confirm-delete-icon';
+import { ConfirmDeleteButton, ConfirmButton } from './confirm-buttons';
 import { JobFileLink } from './job-file-link';
-
 import { CommandIDs } from '..';
 import { Scheduler } from '../handler';
 import { useTranslator } from '../hooks';
 import { ICreateJobModel } from '../model';
+import DownloadIcon from '@mui/icons-material/Download';
+import StopIcon from '@mui/icons-material/Stop';
+import { IconButton, Stack, TableCell, TableRow } from '@mui/material';
 
 function StopButton(props: {
  job: Scheduler.IDescribeJob;
@@ -28,9 +24,14 @@ function StopButton(props: {
  <div
  style={props.job.status !== 'IN_PROGRESS' ? { visibility: 'hidden' } : {}}
  >
- <IconButton onClick={props.clickHandler} title={buttonTitle}>
- <StopIcon fontSize="small" />
- </IconButton>
+ <ConfirmButton
+ name={buttonTitle}
+ onConfirm={props.clickHandler}
+ confirmationText={trans.__('Stop')}
+ icon={<StopIcon fontSize="small" />}
+ remainAfterConfirmation
+ remainText={trans.__('Stopping')}
+ />
  </div>
  );
 }
@@ -117,15 +118,7 @@ export function buildJobRow(
  <Timestamp job={job} />,
  translateStatus(job.status),
  <Stack spacing={1} direction="row">
- <StopButton
- job={job}
- clickHandler={() =>
- app.commands.execute(CommandIDs.stopJob, {
- id: job.job_id
- })
- }
- />
- <ConfirmDeleteIcon
+ <ConfirmDeleteButton
  name={job.name}
  clickHandler={() => {
  // optimistic delete for now, no verification on whether the delete
@@ -136,6 +129,14 @@ export function buildJobRow(
  deleteRow(job.job_id);
  }}
  />
+ <StopButton
+ job={job}
+ clickHandler={() =>
+ app.commands.execute(CommandIDs.stopJob, {
+ id: job.job_id
+ })
+ }
+ />
  </Stack>
  ];
 

src/mainviews/detail-view/job-definition.tsx

@@ -13,7 +13,7 @@ import { ListJobsTable } from '../list-jobs';
 import { Scheduler as SchedulerTokens } from '../../tokens';
 
 import { Button, Card, CardContent, FormLabel, Stack } from '@mui/material';
-import { ConfirmDeleteButton } from '../../components/confirm-delete-button';
+import { ConfirmDialogDeleteButton } from '../../components/confirm-dialog-buttons';
 import { JupyterFrontEnd } from '@jupyterlab/application';
 import {
  ILabeledValueProps,
@@ -97,10 +97,10 @@ export function JobDefinition(props: IJobDefinitionProps): JSX.Element {
  >
  {trans.__('Edit Job Definition')}
  </Button>
- <ConfirmDeleteButton
+ <ConfirmDialogDeleteButton
  handleDelete={handleDeleteJobDefinition}
  title={trans.__('Delete Job Definition')}
- text={trans.__(
+ dialogText={trans.__(
  'Are you sure that you want to delete this job definition?'
  )}
  />