Conditionally render tooltip for Edit alert button (#7054)

* Made Edit alert tooltip render conditionally
getredash · Jul 18, 2024 · 8fc4ce1 · 8fc4ce1
1 parent ebb0e2c
commit 8fc4ce1
Showing 1 changed file with 17 additions and 7 deletions.
diff --git a/client/app/pages/alert/AlertView.jsx b/client/app/pages/alert/AlertView.jsx
@@ -68,13 +68,23 @@ export default class AlertView extends React.Component {
       <>
         <Title name={name} alert={alert}>
           <DynamicComponent name="AlertView.HeaderExtra" alert={alert} />
-          <Tooltip title={canEdit ? "" : "You do not have sufficient permissions to edit this alert"}>
-            <Button type="default" onClick={canEdit ? onEdit : null} className={cx({ disabled: !canEdit })}>
-              <i className="fa fa-edit m-r-5" aria-hidden="true" />
-              Edit
-            </Button>
-            {menuButton}
-          </Tooltip>
+          {canEdit ? (
+            <>
+              <Button type="default" onClick={canEdit ? onEdit : null} className={cx({ disabled: !canEdit })}>
+                <i className="fa fa-edit m-r-5" aria-hidden="true" />
+                Edit
+              </Button>
+              {menuButton}
+            </>
+          ) : (
+            <Tooltip title="You do not have sufficient permissions to edit this alert">
+              <Button type="default" onClick={canEdit ? onEdit : null} className={cx({ disabled: !canEdit })}>
+                <i className="fa fa-edit m-r-5" aria-hidden="true" />
+                Edit
+              </Button>
+              {menuButton}
+            </Tooltip>
+          )}
         </Title>
         <div className="bg-white tiled p-20">
           <Grid.Row type="flex" gutter={16}>