Merge pull request #634 from guardian/tf-design-archive-info

Tooltip on banner design archive button
guardian · Oct 7, 2024 · 20c20e3 · 20c20e3
2 parents a2d23a3 + 4d077dd
commit 20c20e3
Showing 1 changed file with 40 additions and 34 deletions.
diff --git a/public/src/components/channelManagement/bannerDesigns/StickyTopBar.tsx b/public/src/components/channelManagement/bannerDesigns/StickyTopBar.tsx
@@ -8,6 +8,7 @@ import {
   DialogContent,
   DialogContentText,
   DialogActions,
+  Tooltip,
 } from '@mui/material';
 import { makeStyles } from '@mui/styles';
 import EditIcon from '@mui/icons-material/Edit';
@@ -104,39 +105,44 @@ const StickyTopBar: React.FC<Props> = ({
     const [isOpen, open, close] = useOpenable();
 
     return (
-      <>
-        <Button
-          variant="outlined"
-          startIcon={<ArchiveIcon style={{ color: grey[700] }} />}
-          size="medium"
-          onClick={open}
-        >
-          {/* eslint-disable-next-line react/prop-types */}
-          <Typography className={classes.buttonText}>Archive banner design</Typography>
-        </Button>
-        <Dialog
-          open={isOpen}
-          onClose={close}
-          aria-labelledby="archive-dialog-title"
-          aria-describedby="archive-dialog-description"
-        >
-          <DialogTitle id="archive-dialog-title">Are you sure?</DialogTitle>
-          <DialogContent>
-            <DialogContentText id="archive-dialog-description">
-              Archiving this design will remove it from the banner design tool - you can only
-              restore with an engineer&apos;s help.
-            </DialogContentText>
-          </DialogContent>
-          <DialogActions>
-            <Button color="primary" onClick={close}>
-              Cancel
-            </Button>
-            <Button color="primary" onClick={() => onArchive(name)}>
-              Archive design
-            </Button>
-          </DialogActions>
-        </Dialog>
-      </>
+      <Tooltip
+        title={design.status !== 'Draft' ? 'Design must be in draft status before archiving' : ''}
+      >
+        <span>
+          <Button
+            variant="outlined"
+            startIcon={<ArchiveIcon style={{ color: grey[700] }} />}
+            size="medium"
+            onClick={open}
+            disabled={design.status !== 'Draft'}
+          >
+            {/* eslint-disable-next-line react/prop-types */}
+            <Typography className={classes.buttonText}>Archive banner design</Typography>
+          </Button>
+          <Dialog
+            open={isOpen}
+            onClose={close}
+            aria-labelledby="archive-dialog-title"
+            aria-describedby="archive-dialog-description"
+          >
+            <DialogTitle id="archive-dialog-title">Are you sure?</DialogTitle>
+            <DialogContent>
+              <DialogContentText id="archive-dialog-description">
+                Archiving this design will remove it from the banner design tool - you can only
+                restore with an engineer&apos;s help.
+              </DialogContentText>
+            </DialogContent>
+            <DialogActions>
+              <Button color="primary" onClick={close}>
+                Cancel
+              </Button>
+              <Button color="primary" onClick={() => onArchive(name)}>
+                Archive design
+              </Button>
+            </DialogActions>
+          </Dialog>
+        </span>
+      </Tooltip>
     );
   };
 
@@ -184,7 +190,7 @@ const StickyTopBar: React.FC<Props> = ({
           )}
           {userHasLock && (
             <>
-              {design.status === 'Draft' && <ArchiveButton />}
+              <ArchiveButton />
               <Button
                 variant="outlined"
                 size="medium"