From ff8f7102de81bffa57447ca4f71d05be44f02739 Mon Sep 17 00:00:00 2001
From: SamraHanifCareem <samra.hanif@careem.com>
Date: Mon, 14 Apr 2025 17:00:41 -0400
Subject: [PATCH 1/5] feat: Disable creation and edit alerts

---
 .../ApplicationArea/ApplicationLayout/DesktopNavbar.jsx       | 4 ++--
 client/app/pages/alert/Alert.jsx                              | 4 ++--
 client/app/pages/alerts/AlertsList.jsx                        | 2 +-
 3 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/client/app/components/ApplicationArea/ApplicationLayout/DesktopNavbar.jsx b/client/app/components/ApplicationArea/ApplicationLayout/DesktopNavbar.jsx
index a1550f60..7913bd38 100644
--- a/client/app/components/ApplicationArea/ApplicationLayout/DesktopNavbar.jsx
+++ b/client/app/components/ApplicationArea/ApplicationLayout/DesktopNavbar.jsx
@@ -56,7 +56,7 @@ function useNavbarActiveState() {
         currentRoute.id
       ),
       dataSources: includes(["DataSources.List"], currentRoute.id),
-      alerts: includes(["Alerts.List", "Alerts.New", "Alerts.View", "Alerts.Edit"], currentRoute.id),
+      alerts: includes(["Alerts.List", "Alerts.New", "Alerts.View"], currentRoute.id),
     }),
     [currentRoute.id]
   );
@@ -69,7 +69,7 @@ export default function DesktopNavbar() {
 
   const canCreateQuery = currentUser.hasPermission("create_query");
   const canCreateDashboard = currentUser.hasPermission("create_dashboard");
-  const canCreateAlert = currentUser.hasPermission("list_alerts");
+  const canCreateAlert = currentUser.hasPermission("create_alerts");
 
   return (
     <nav className="desktop-navbar">
diff --git a/client/app/pages/alert/Alert.jsx b/client/app/pages/alert/Alert.jsx
index e54ebcb0..ac6672de 100644
--- a/client/app/pages/alert/Alert.jsx
+++ b/client/app/pages/alert/Alert.jsx
@@ -42,7 +42,7 @@ class Alert extends React.Component {
   static defaultProps = {
     mode: null,
     alertId: null,
-    onError: () => {},
+    onError: () => { },
   };
 
   _isMounted = false;
@@ -77,7 +77,7 @@ class Alert extends React.Component {
       AlertService.get({ id: alertId })
         .then(alert => {
           if (this._isMounted) {
-            const canEdit = currentUser.canEdit(alert);
+            const canEdit = currentUser.canEdit(alert) && currentUser.hasPermission("create_alerts")
 
             // force view mode if can't edit
             if (!canEdit) {
diff --git a/client/app/pages/alerts/AlertsList.jsx b/client/app/pages/alerts/AlertsList.jsx
index d4101d82..9fa5a085 100644
--- a/client/app/pages/alerts/AlertsList.jsx
+++ b/client/app/pages/alerts/AlertsList.jsx
@@ -86,7 +86,7 @@ class AlertsList extends React.Component {
           <PageHeader
             title={controller.params.pageTitle}
             actions={
-              currentUser.hasPermission("list_alerts") ? (
+              currentUser.hasPermission("create_alerts") ? (
                 <Link.Button block type="primary" href="alerts/new">
                   <i className="fa fa-plus m-r-5" aria-hidden="true" />
                   New Alert

From bcba94e5566d3c543ef51f57c62d18e73a9b3cbc Mon Sep 17 00:00:00 2001
From: SamraHanifCareem <samra.hanif@careem.com>
Date: Mon, 14 Apr 2025 17:36:16 -0400
Subject: [PATCH 2/5] feat: disabling edit permission setting and remove create
 first alert

---
 .../ApplicationLayout/DesktopNavbar.jsx              |  2 +-
 client/app/components/empty-state/EmptyState.jsx     | 12 ------------
 client/app/pages/alert/Alert.jsx                     |  5 +++--
 3 files changed, 4 insertions(+), 15 deletions(-)

diff --git a/client/app/components/ApplicationArea/ApplicationLayout/DesktopNavbar.jsx b/client/app/components/ApplicationArea/ApplicationLayout/DesktopNavbar.jsx
index 7913bd38..eb55c8b9 100644
--- a/client/app/components/ApplicationArea/ApplicationLayout/DesktopNavbar.jsx
+++ b/client/app/components/ApplicationArea/ApplicationLayout/DesktopNavbar.jsx
@@ -56,7 +56,7 @@ function useNavbarActiveState() {
         currentRoute.id
       ),
       dataSources: includes(["DataSources.List"], currentRoute.id),
-      alerts: includes(["Alerts.List", "Alerts.New", "Alerts.View"], currentRoute.id),
+      alerts: includes(["Alerts.List", "Alerts.New", "Alerts.View", "Alerts.Edit"], currentRoute.id),
     }),
     [currentRoute.id]
   );
diff --git a/client/app/components/empty-state/EmptyState.jsx b/client/app/components/empty-state/EmptyState.jsx
index 49f21b07..70a14596 100644
--- a/client/app/components/empty-state/EmptyState.jsx
+++ b/client/app/components/empty-state/EmptyState.jsx
@@ -142,18 +142,6 @@ function EmptyState({
         />
       ),
     },
-    {
-      key: "alerts",
-      node: (
-        <Step
-          key="alerts"
-          show={isAvailable.alert}
-          completed={isCompleted.alert}
-          url="alerts/new"
-          urlText="Create your first Alert"
-        />
-      ),
-    },
     {
       key: "users",
       node: (
diff --git a/client/app/pages/alert/Alert.jsx b/client/app/pages/alert/Alert.jsx
index ac6672de..e8517a25 100644
--- a/client/app/pages/alert/Alert.jsx
+++ b/client/app/pages/alert/Alert.jsx
@@ -77,7 +77,8 @@ class Alert extends React.Component {
       AlertService.get({ id: alertId })
         .then(alert => {
           if (this._isMounted) {
-            const canEdit = currentUser.canEdit(alert) && currentUser.hasPermission("create_alerts")
+            const canEdit = currentUser.canEdit(alert)
+            // const canEdit = currentUser.canEdit(alert) && currentUser.hasPermission("create_alerts")
 
             // force view mode if can't edit
             if (!canEdit) {
@@ -242,7 +243,7 @@ class Alert extends React.Component {
     return (
       <div className="alert-page">
         <div className="container">
-          {mode === MODES.NEW && <AlertNew {...commonProps} />}
+          {mode === MODES.NEW && currentUser.hasPermission("create_alerts") && <AlertNew {...commonProps} />}
           {mode === MODES.VIEW && (
             <AlertView canEdit={canEdit} onEdit={this.edit} muted={muted} unmute={this.unmute} {...commonProps} />
           )}

From 14d3fc149361722cfeab6630bbae49b6e6866f89 Mon Sep 17 00:00:00 2001
From: SamraHanifCareem <samra.hanif@careem.com>
Date: Mon, 14 Apr 2025 17:46:58 -0400
Subject: [PATCH 3/5] feat: removed s from create_alerts permission for
 consistency

---
 .../ApplicationArea/ApplicationLayout/DesktopNavbar.jsx       | 2 +-
 client/app/pages/alert/Alert.jsx                              | 4 ++--
 client/app/pages/alerts/AlertsList.jsx                        | 2 +-
 3 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/client/app/components/ApplicationArea/ApplicationLayout/DesktopNavbar.jsx b/client/app/components/ApplicationArea/ApplicationLayout/DesktopNavbar.jsx
index eb55c8b9..b9fb112e 100644
--- a/client/app/components/ApplicationArea/ApplicationLayout/DesktopNavbar.jsx
+++ b/client/app/components/ApplicationArea/ApplicationLayout/DesktopNavbar.jsx
@@ -69,7 +69,7 @@ export default function DesktopNavbar() {
 
   const canCreateQuery = currentUser.hasPermission("create_query");
   const canCreateDashboard = currentUser.hasPermission("create_dashboard");
-  const canCreateAlert = currentUser.hasPermission("create_alerts");
+  const canCreateAlert = currentUser.hasPermission("create_alert");
 
   return (
     <nav className="desktop-navbar">
diff --git a/client/app/pages/alert/Alert.jsx b/client/app/pages/alert/Alert.jsx
index e8517a25..b80425ed 100644
--- a/client/app/pages/alert/Alert.jsx
+++ b/client/app/pages/alert/Alert.jsx
@@ -78,7 +78,7 @@ class Alert extends React.Component {
         .then(alert => {
           if (this._isMounted) {
             const canEdit = currentUser.canEdit(alert)
-            // const canEdit = currentUser.canEdit(alert) && currentUser.hasPermission("create_alerts")
+            // const canEdit = currentUser.canEdit(alert) && currentUser.hasPermission("create_alert")
 
             // force view mode if can't edit
             if (!canEdit) {
@@ -243,7 +243,7 @@ class Alert extends React.Component {
     return (
       <div className="alert-page">
         <div className="container">
-          {mode === MODES.NEW && currentUser.hasPermission("create_alerts") && <AlertNew {...commonProps} />}
+          {mode === MODES.NEW && currentUser.hasPermission("create_alert") && <AlertNew {...commonProps} />}
           {mode === MODES.VIEW && (
             <AlertView canEdit={canEdit} onEdit={this.edit} muted={muted} unmute={this.unmute} {...commonProps} />
           )}
diff --git a/client/app/pages/alerts/AlertsList.jsx b/client/app/pages/alerts/AlertsList.jsx
index 9fa5a085..bbcad683 100644
--- a/client/app/pages/alerts/AlertsList.jsx
+++ b/client/app/pages/alerts/AlertsList.jsx
@@ -86,7 +86,7 @@ class AlertsList extends React.Component {
           <PageHeader
             title={controller.params.pageTitle}
             actions={
-              currentUser.hasPermission("create_alerts") ? (
+              currentUser.hasPermission("create_alert") ? (
                 <Link.Button block type="primary" href="alerts/new">
                   <i className="fa fa-plus m-r-5" aria-hidden="true" />
                   New Alert

From f255fb9920a6b7a9caf5edb52c290cb34ca53976 Mon Sep 17 00:00:00 2001
From: SamraHanifCareem <samra.hanif@careem.com>
Date: Wed, 16 Apr 2025 12:18:23 -0400
Subject: [PATCH 4/5] feat: hiding edit controls other than delete in view only
 mode

---
 client/app/pages/alert/Alert.jsx                        | 3 +--
 client/app/pages/alert/AlertView.jsx                    | 7 ++++---
 client/app/pages/alert/components/AlertDestinations.jsx | 6 +++---
 client/app/pages/alert/components/MenuButton.jsx        | 5 +++--
 4 files changed, 11 insertions(+), 10 deletions(-)

diff --git a/client/app/pages/alert/Alert.jsx b/client/app/pages/alert/Alert.jsx
index b80425ed..500dbee0 100644
--- a/client/app/pages/alert/Alert.jsx
+++ b/client/app/pages/alert/Alert.jsx
@@ -78,7 +78,6 @@ class Alert extends React.Component {
         .then(alert => {
           if (this._isMounted) {
             const canEdit = currentUser.canEdit(alert)
-            // const canEdit = currentUser.canEdit(alert) && currentUser.hasPermission("create_alert")
 
             // force view mode if can't edit
             if (!canEdit) {
@@ -247,7 +246,7 @@ class Alert extends React.Component {
           {mode === MODES.VIEW && (
             <AlertView canEdit={canEdit} onEdit={this.edit} muted={muted} unmute={this.unmute} {...commonProps} />
           )}
-          {mode === MODES.EDIT && <AlertEdit cancel={this.cancel} {...commonProps} />}
+          {mode === MODES.EDIT && currentUser.hasPermission("create_alert") && <AlertEdit cancel={this.cancel} {...commonProps} />}
         </div>
       </div>
     );
diff --git a/client/app/pages/alert/AlertView.jsx b/client/app/pages/alert/AlertView.jsx
index 0bf98d9b..67d15070 100644
--- a/client/app/pages/alert/AlertView.jsx
+++ b/client/app/pages/alert/AlertView.jsx
@@ -20,6 +20,7 @@ import AlertDestinations from "./components/AlertDestinations";
 import HorizontalFormItem from "./components/HorizontalFormItem";
 import { STATE_CLASS } from "../alerts/AlertsList";
 import DynamicComponent from "@/components/DynamicComponent";
+import { currentUser } from "@/services/auth";
 
 function AlertState({ state, lastTriggered }) {
   return (
@@ -69,10 +70,10 @@ 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 })}>
+            {currentUser.hasPermission("create_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>
+            </Button>}
             {menuButton}
           </Tooltip>
         </Title>
@@ -118,7 +119,7 @@ export default class AlertView extends React.Component {
                     <>
                       Notifications for this alert will not be sent.
                       <br />
-                      {canEdit && (
+                      {canEdit && currentUser.hasPermission("create_alert") && (
                         <>
                           To restore notifications click
                           <Button
diff --git a/client/app/pages/alert/components/AlertDestinations.jsx b/client/app/pages/alert/components/AlertDestinations.jsx
index 0bb22787..a463da5c 100644
--- a/client/app/pages/alert/components/AlertDestinations.jsx
+++ b/client/app/pages/alert/components/AlertDestinations.jsx
@@ -187,7 +187,7 @@ export default class AlertDestinations extends React.Component {
 
     return (
       <div className="alert-destinations" data-test="AlertDestinations">
-        <Tooltip title='Click to add an existing "Alert Destination"' mouseEnterDelay={0.5}>
+        {currentUser.hasPermission("create_alert") && <Tooltip title='Click to add an existing "Alert Destination"' mouseEnterDelay={0.5}>
           <Button
             data-test="ShowAddAlertSubDialog"
             type="primary"
@@ -196,13 +196,13 @@ export default class AlertDestinations extends React.Component {
             onClick={this.showAddAlertSubDialog}>
             <i className="fa fa-plus f-12 m-r-5" aria-hidden="true" /> Add
           </Button>
-        </Tooltip>
+        </Tooltip>}
         <ul>
           <li className="destination-wrapper">
             <i className="destination-icon fa fa-envelope" aria-hidden="true" />
             <span className="flex-fill">{currentUser.email}</span>
             <EmailSettingsWarning className="destination-warning" featureName="alert emails" mode="icon" />
-            {!mailSettingsMissing && (
+            {!mailSettingsMissing && currentUser.hasPermission("create_alert") && (
               <Switch
                 size="small"
                 className="toggle-button"
diff --git a/client/app/pages/alert/components/MenuButton.jsx b/client/app/pages/alert/components/MenuButton.jsx
index ce1a0b83..e026c40c 100644
--- a/client/app/pages/alert/components/MenuButton.jsx
+++ b/client/app/pages/alert/components/MenuButton.jsx
@@ -10,6 +10,7 @@ import Button from "antd/lib/button";
 import LoadingOutlinedIcon from "@ant-design/icons/LoadingOutlined";
 import EllipsisOutlinedIcon from "@ant-design/icons/EllipsisOutlined";
 import PlainButton from "@/components/PlainButton";
+import { currentUser } from "@/services/auth";
 
 export default function MenuButton({ doDelete, canEdit, mute, unmute, muted }) {
   const [loading, setLoading] = useState(false);
@@ -45,13 +46,13 @@ export default function MenuButton({ doDelete, canEdit, mute, unmute, muted }) {
       placement="bottomRight"
       overlay={
         <Menu>
-          <Menu.Item>
+          {currentUser.hasPermission("create_alert") && <Menu.Item>
             {muted ? (
               <PlainButton onClick={() => execute(unmute)}>Unmute Notifications</PlainButton>
             ) : (
               <PlainButton onClick={() => execute(mute)}>Mute Notifications</PlainButton>
             )}
-          </Menu.Item>
+          </Menu.Item>}
           <Menu.Item>
             <PlainButton onClick={confirmDelete}>Delete</PlainButton>
           </Menu.Item>

From fd6c74a70369f6bc0cdbbc172a6df33884992e26 Mon Sep 17 00:00:00 2001
From: SamraHanifCareem <samra.hanif@careem.com>
Date: Wed, 16 Apr 2025 13:18:29 -0400
Subject: [PATCH 5/5] fix: enabled switch in disabled state and removed cross
 icon in destination

---
 client/app/pages/alert/components/AlertDestinations.jsx | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/client/app/pages/alert/components/AlertDestinations.jsx b/client/app/pages/alert/components/AlertDestinations.jsx
index a463da5c..10d752c4 100644
--- a/client/app/pages/alert/components/AlertDestinations.jsx
+++ b/client/app/pages/alert/components/AlertDestinations.jsx
@@ -45,7 +45,7 @@ function ListItem({ destination: { name, type }, user, unsubscribe }) {
       {type === "email" && (
         <EmailSettingsWarning className="destination-warning" featureName="alert emails" mode="icon" />
       )}
-      {canUnsubscribe && (
+      {canUnsubscribe && currentUser.hasPermission("create_alert") && (
         <Tooltip title="Remove" mouseEnterDelay={0.5}>
           <PlainButton className="remove-button" onClick={unsubscribe}>
             {/* TODO: lacks visual feedback */}
@@ -202,7 +202,7 @@ export default class AlertDestinations extends React.Component {
             <i className="destination-icon fa fa-envelope" aria-hidden="true" />
             <span className="flex-fill">{currentUser.email}</span>
             <EmailSettingsWarning className="destination-warning" featureName="alert emails" mode="icon" />
-            {!mailSettingsMissing && currentUser.hasPermission("create_alert") && (
+            {!mailSettingsMissing && (
               <Switch
                 size="small"
                 className="toggle-button"
@@ -210,6 +210,7 @@ export default class AlertDestinations extends React.Component {
                 loading={!subs}
                 onChange={() => this.onUserEmailToggle(currentUserEmailSub)}
                 data-test="UserEmailToggle"
+                disabled={!currentUser.hasPermission("create_alert")}
               />
             )}
           </li>