[DNA-23591]: Disable creation of Alerts

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("list_alerts");
+  const canCreateAlert = currentUser.hasPermission("create_alert");
 
   return (
     <nav className="desktop-navbar">

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: (

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)
 
             // force view mode if can't edit
             if (!canEdit) {
@@ -242,11 +242,11 @@ class Alert extends React.Component {
     return (
       <div className="alert-page">
         <div className="container">
-          {mode === MODES.NEW && <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} />
           )}
-          {mode === MODES.EDIT && <AlertEdit cancel={this.cancel} {...commonProps} />}
+          {mode === MODES.EDIT && currentUser.hasPermission("create_alert") && <AlertEdit cancel={this.cancel} {...commonProps} />}
         </div>
       </div>
     );

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

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 */}
@@ -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,7 +196,7 @@ 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" />
@@ -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>

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>

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_alert") ? (
                 <Link.Button block type="primary" href="alerts/new">
                   <i className="fa fa-plus m-r-5" aria-hidden="true" />
                   New Alert