Hide unavailable page links to non-admin users in settings and header (#4524)

* Filter unavailable menu items in SettingsWrapper

* Don't show Alert Destination in header to users

client/app/components/SettingsWrapper.jsx

@@ -17,11 +17,13 @@ function wrapSettingsTab(options, WrappedComponent) {
           <PageHeader title="Settings" />
           <div className="bg-white tiled">
             <Menu selectedKeys={[activeItem && activeItem.title]} selectable={false} mode="horizontal">
-              {settingsMenu.items.map(item => (
-                <Menu.Item key={item.title}>
-                  <a href={item.path}>{item.title}</a>
-                </Menu.Item>
-              ))}
+              {settingsMenu.items
+                .filter(item => item.isAvailable())
+                .map(item => (
+                  <Menu.Item key={item.title}>
+                    <a href={item.path}>{item.title}</a>
+                  </Menu.Item>
+                ))}
             </Menu>
             <div className="p-15">
               <div>

client/app/components/app-header/AppHeader.jsx

@@ -134,7 +134,7 @@ function DesktopNavbar() {
                       <a href="query_snippets">Query Snippets</a>
                     </Menu.Item>
                   )}
-                  {currentUser.hasPermission("list_users") && (
+                  {currentUser.isAdmin && (
                     <Menu.Item key="destinations">
                       <a href="destinations">Alert Destinations</a>
                     </Menu.Item>

client/app/services/settingsMenu.js

@@ -1,4 +1,5 @@
 import { isFunction, extend, omit, sortBy, find } from "lodash";
+import { currentUser } from "@/services/auth";
 
 class SettingsMenuItem {
   constructor(menuItem) {
@@ -11,6 +12,10 @@ class SettingsMenuItem {
   isActive(path) {
     return path.startsWith(this.pathPrefix);
   }
+
+  isAvailable() {
+    return this.permission === undefined || currentUser.hasPermission(this.permission);
+  }
 }
 
 class SettingsMenu {