From 4d077dd69a09a1e1f305709f9b040f18dd71aa96 Mon Sep 17 00:00:00 2001
From: Tom Forbes <tom.forbes@theguardian.com>
Date: Mon, 7 Oct 2024 09:07:48 +0100
Subject: [PATCH] Tooltip on banner design archive button

---
 .../bannerDesigns/StickyTopBar.tsx            | 74 ++++++++++---------
 1 file changed, 40 insertions(+), 34 deletions(-)

diff --git a/public/src/components/channelManagement/bannerDesigns/StickyTopBar.tsx b/public/src/components/channelManagement/bannerDesigns/StickyTopBar.tsx
index 729b7a62..bcf4ee7a 100644
--- 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"