[frontend] Allow for unsupported files to be deleted too

Author: luizribeiro

frontend/src/components/FileDetailsDialog.tsx

@@ -1,3 +1,4 @@
+import Box from "@material-ui/core/Box";
 import Button from "@material-ui/core/Button";
 import CircularProgress from "@material-ui/core/CircularProgress";
 import Dialog, { DialogProps } from "@material-ui/core/Dialog";
@@ -108,6 +109,7 @@ const FileDetailsWithAPI = withAPI(FileDetails);
 export default function FileDetailsDialog(
   props: {
     filename: string;
+    canBePrinted: boolean;
     path: string;
     onCancel: () => void;
     onPrint: () => void;
@@ -125,6 +127,25 @@ export default function FileDetailsDialog(
     props.onDelete();
   };
 
+  let fileDetails: React.ReactElement;
+  if (props.canBePrinted) {
+    fileDetails = (
+      <FileDetailsWithAPI filename={props.filename} path={props.path} />
+    );
+  } else {
+    fileDetails = (
+      <Box
+        display="flex"
+        width={350}
+        height={80}
+        alignItems="center"
+        justifyContent="center"
+      >
+        <Typography>This file cannot be printed.</Typography>
+      </Box>
+    );
+  }
+
   return (
     <Dialog {...props}>
       <DialogTitle className={classes.dialogTitle} disableTypography>
@@ -158,13 +179,17 @@ export default function FileDetailsDialog(
         </Dialog>
       </DialogTitle>
       <DialogContent style={{ padding: 0 }} dividers>
-        <FileDetailsWithAPI filename={props.filename} path={props.path} />
+        {fileDetails}
       </DialogContent>
       <DialogActions>
         <Button onClick={props.onCancel} color="primary">
           Cancel
         </Button>
-        <Button onClick={props.onPrint} color="primary">
+        <Button
+          onClick={props.onPrint}
+          color="primary"
+          disabled={!props.canBePrinted}
+        >
           Print
         </Button>
       </DialogActions>

frontend/src/components/FileList.tsx

@@ -57,7 +57,7 @@ function FileListItem({
   onDelete: () => void;
 }): React.ReactElement {
   const [open, setOpen] = React.useState(false);
-  const handleClickOpen = () => file.can_be_printed && setOpen(true);
+  const handleClickOpen = () => setOpen(true);
   const handleClose = () => setOpen(false);
 
   const printTime = file.print_time_secs
@@ -67,18 +67,15 @@ function FileListItem({
   const api = useAPI();
   return (
     <React.Fragment>
-      <ListItem
-        button
-        key={file.filename}
-        onClick={file.can_be_printed ? handleClickOpen : undefined}
-      >
+      <ListItem button key={file.filename} onClick={handleClickOpen}>
         <ListItemIcon>
           {file.can_be_printed ? <LayersIcon /> : <InsertDriveFileIcon />}
         </ListItemIcon>
         <ListItemText primary={file.filename} secondary={printTime} />
       </ListItem>
       <FileDetailsDialog
         filename={file.filename}
+        canBePrinted={file.can_be_printed}
         path={file.path}
         onCancel={handleClose}
         onClose={handleClose}

frontend/src/components/stories/FileDetailsDialog.stories.tsx

@@ -38,6 +38,7 @@ const Template: Story = (_args) => {
       <Button onClick={handleClickOpen}>Open</Button>
       <FileDetailsDialog
         filename="stairs.ctb"
+        canBePrinted={true}
         path="stairs.ctb"
         onCancel={handleClose}
         onClose={handleClose}
@@ -73,6 +74,7 @@ export const Loading = (): React.ReactElement => {
       <Button onClick={handleClickOpen}>Open</Button>
       <FileDetailsDialog
         filename="stairs.ctb"
+        canBePrinted={true}
         path="stairs.ctb"
         onCancel={handleClose}
         onClose={handleClose}
@@ -87,3 +89,32 @@ export const Loading = (): React.ReactElement => {
     </div>
   );
 };
+
+export const UnprintableFile = (): React.ReactElement => {
+  const [open, setOpen] = React.useState(false);
+
+  const handleClickOpen = () => {
+    setOpen(true);
+  };
+
+  const handleClose = () => {
+    setOpen(false);
+  };
+
+  return (
+    <div>
+      <Button onClick={handleClickOpen}>Open</Button>
+      <FileDetailsDialog
+        filename="some_file.txt"
+        canBePrinted={false}
+        path="some_file.txt"
+        onCancel={handleClose}
+        onClose={handleClose}
+        onPrint={handleClose}
+        onDelete={handleClose}
+        open={open}
+        scroll="paper"
+      />
+    </div>
+  );
+};