Gate ServicePulse UI on user permissions

src/Frontend/src/App.vue

@@ -8,20 +8,21 @@ import LicenseNotifications from "@/components/LicenseNotifications.vue";
 import BackendChecksNotifications from "@/components/BackendChecksNotifications.vue";
 import { storeToRefs } from "pinia";
 import { useAuthStore } from "@/stores/AuthStore";
-import { useUserPermissionsStore } from "@/stores/UserPermissionsStore";
-import { useEnvironmentAndVersionsStore } from "@/stores/EnvironmentAndVersionsStore";
+import { useAllowedRoutes } from "@/composables/useAllowedRoutes";
 
 const authStore = useAuthStore();
 const route = useRoute();
 const { isAuthenticated, authEnabled } = storeToRefs(authStore);
 
-const permissionsStore = useUserPermissionsStore();
-const environmentStore = useEnvironmentAndVersionsStore();
+// Load the allowed-route manifest (my/routes) once authenticated, so the nav and other
+// UI can gate on it. Fail-safe: a missing/old endpoint just leaves the manifest unloaded
+// and the UI fails open.
+const { fetchManifest } = useAllowedRoutes();
 watch(
-  [authEnabled, isAuthenticated, () => environmentStore.environment.supportsUserPermissions],
-  ([enabled, authenticated, supported]) => {
-    if (enabled && authenticated && supported) {
-      permissionsStore.refresh();
+  [authEnabled, isAuthenticated],
+  ([enabled, authenticated]) => {
+    if (enabled && authenticated) {
+      fetchManifest();
     }
   },
   { immediate: true }

src/Frontend/src/assets/main.css

@@ -353,6 +353,7 @@ input.check-label {
 .btn-toolbar > .btn,
 .btn-toolbar > .btn-group,
 .btn-toolbar > .input-group,
+.btn-toolbar > .permission-gate,
 .action-btns .btn {
   margin-left: 0;
   margin-right: 5px;

src/Frontend/src/components/OnOffSwitch.vue

@@ -1,15 +1,19 @@
 <script setup lang="ts">
-defineProps<{
-  id: string;
-  value: boolean | null;
-}>();
+withDefaults(
+  defineProps<{
+    id: string;
+    value: boolean | null;
+    disabled?: boolean;
+  }>(),
+  { disabled: false }
+);
 
 const emit = defineEmits<{ toggle: [] }>();
 </script>
 
 <template>
-  <div class="onoffswitch">
-    <input type="checkbox" :id="`onoffswitch${id}`" :name="`onoffswitch${id}`" :aria-label="`onoffswitch${id}`" class="onoffswitch-checkbox" @click="emit('toggle')" :checked="value ?? false" />
+  <div class="onoffswitch" :class="{ disabled }">
+    <input type="checkbox" :id="`onoffswitch${id}`" :name="`onoffswitch${id}`" :aria-label="`onoffswitch${id}`" class="onoffswitch-checkbox" :disabled="disabled" @click="emit('toggle')" :checked="value ?? false" />
     <label class="onoffswitch-label" :for="`onoffswitch${id}`" role="switch" :aria-checked="value ?? false" :aria-label="id">
       <span class="onoffswitch-inner"></span>
       <span class="onoffswitch-switch"></span>
@@ -27,6 +31,13 @@ const emit = defineEmits<{ toggle: [] }>();
   width: 76px;
 }
 
+/* Disabled: dim it and let pointer events pass through to a wrapping PermissionGate so its
+   tooltip shows. The native :disabled on the checkbox already prevents toggling. */
+.onoffswitch.disabled {
+  opacity: 0.65;
+  pointer-events: none;
+}
+
 .onoffswitch-checkbox {
   display: none;
 }

src/Frontend/src/components/PageHeader.vue

@@ -15,30 +15,36 @@ import AuditMenuItem from "./audit/AuditMenuItem.vue";
 import monitoringClient from "@/components/monitoring/monitoringClient";
 import UserProfileMenuItem from "@/components/UserProfileMenuItem.vue";
 import { useAuthStore } from "@/stores/AuthStore";
-import usePermissionGate from "@/composables/usePermissionGate";
+import { useAllowedRoutes } from "@/composables/useAllowedRoutes";
+import { ApiRoutes } from "@/composables/apiRoutes";
 import { storeToRefs } from "pinia";
 
 const isMonitoringEnabled = monitoringClient.isMonitoringEnabled;
 
 const authStore = useAuthStore();
 const { authEnabled, isAuthenticated } = storeToRefs(authStore);
 
-const { has } = usePermissionGate();
+const { canCall, ready } = useAllowedRoutes();
 
+// Each item gates on the specific route ServiceControl enforces for that area.
+// Gate-on-ready: render nothing until permissions are known, so items never appear and
+// then disappear. canCall() fails open, so auth-disabled / failed-load shows everything.
 // prettier-ignore
-const menuItems = computed(
-  () => [
-  DashboardMenuItem,
-  ...(has("failed_messages_read") ? [HeartbeatsMenuItem] : []),
-  ...(isMonitoringEnabled && has("monitoring_read") ? [MonitoringMenuItem] : []),
-  ...(has("auditing_read") ? [AuditMenuItem] : []),
-  ...(has("failed_messages_read") ? [FailedMessagesMenuItem] : []),
-  ...(has("failed_messages_read") ? [CustomChecksMenuItem] : []),
-  ...(has("failed_messages_read") ? [EventsMenuItem] : []),
-  ...(has("admin_read") ? [ThroughputMenuItem] : []),
-  ConfigurationMenuItem,
-  FeedbackButton,
-]);
+const menuItems = computed(() => {
+  if (!ready.value) return [];
+  return [
+    DashboardMenuItem,
+    ...(canCall(ApiRoutes.viewHeartbeats) ? [HeartbeatsMenuItem] : []),
+    ...(isMonitoringEnabled && canCall(ApiRoutes.viewMonitoredEndpoints) ? [MonitoringMenuItem] : []),
+    ...(canCall(ApiRoutes.viewAuditMessages) ? [AuditMenuItem] : []),
+    ...(canCall(ApiRoutes.viewFailedMessages) ? [FailedMessagesMenuItem] : []),
+    ...(canCall(ApiRoutes.viewCustomChecks) ? [CustomChecksMenuItem] : []),
+    ...(canCall(ApiRoutes.viewEventLog) ? [EventsMenuItem] : []),
+    ...(canCall(ApiRoutes.viewThroughput) ? [ThroughputMenuItem] : []),
+    ConfigurationMenuItem,
+    FeedbackButton,
+  ];
+});
 </script>
 
 <template>

src/Frontend/src/components/PermissionGate.spec.ts

@@ -0,0 +1,25 @@
+import { render } from "@testing-library/vue";
+import { describe, test, expect } from "vitest";
+import PermissionGate from "@/components/PermissionGate.vue";
+
+function mountGate(allowed: boolean) {
+  return render(PermissionGate, {
+    props: { allowed, reason: "You don't have permission" },
+    slots: { default: '<button class="btn">Do it</button>' },
+    global: { directives: { tippy: () => {} } },
+  });
+}
+
+describe("PermissionGate", () => {
+  test("renders the slot and marks the wrapper denied when not allowed", () => {
+    const { container, getByText } = mountGate(false);
+    expect(getByText("Do it")).toBeTruthy();
+    expect(container.querySelector(".permission-gate.denied")).not.toBeNull();
+  });
+
+  test("does not mark the wrapper denied when allowed", () => {
+    const { container } = mountGate(true);
+    expect(container.querySelector(".permission-gate")).not.toBeNull();
+    expect(container.querySelector(".permission-gate.denied")).toBeNull();
+  });
+});

src/Frontend/src/components/PermissionGate.vue

@@ -0,0 +1,45 @@
+<script setup lang="ts">
+// Wraps an action (button or link) so that, when the current user is not allowed to use it,
+// it stays visible but reads as disabled and shows a tooltip explaining why, instead of
+// silently failing server-side.
+//
+// The consumer still disables the inner control (so it gets the native disabled state and
+// any other disable conditions still apply); this wrapper adds the tooltip, lets pointer
+// events reach the wrapper so the tooltip shows even over a disabled button, and tidies the
+// disabled look of link-style buttons.
+interface Props {
+  allowed: boolean;
+  reason?: string;
+}
+withDefaults(defineProps<Props>(), { reason: "" });
+</script>
+
+<template>
+  <span class="permission-gate" :class="{ denied: !allowed }" v-tippy="!allowed ? reason : ''">
+    <slot />
+  </span>
+</template>
+
+<style scoped>
+.permission-gate {
+  display: inline-flex;
+}
+
+.permission-gate.denied {
+  cursor: not-allowed;
+}
+
+/* Let pointer events reach the wrapper so its tooltip shows even though the button is disabled. */
+.permission-gate.denied :deep(.btn) {
+  pointer-events: none;
+}
+
+/* A permission-disabled link should read as disabled: gray, without the default button box. */
+.permission-gate.denied :deep(.btn-link),
+.permission-gate.denied :deep(.btn-link .button-text) {
+  color: #6c757d;
+  opacity: 1;
+  background-color: transparent;
+  border-color: transparent;
+}
+</style>

src/Frontend/src/components/configuration/HealthCheckNotifications.vue

@@ -9,12 +9,16 @@ import type UpdateEmailNotificationsSettingsRequest from "@/resources/UpdateEmai
 import OnOffSwitch from "../OnOffSwitch.vue";
 import FAIcon from "@/components/FAIcon.vue";
 import ActionButton from "@/components/ActionButton.vue";
+import PermissionGate from "@/components/PermissionGate.vue";
 import { faCheck, faEdit, faEnvelope, faExclamationTriangle } from "@fortawesome/free-solid-svg-icons";
 import { useHealthChecksStore } from "@/stores/HealthChecksStore";
 import { storeToRefs } from "pinia";
 
 const healthChecksStore = useHealthChecksStore();
-const { emailNotifications } = storeToRefs(healthChecksStore);
+const { emailNotifications, canManageNotifications, canTestNotifications } = storeToRefs(healthChecksStore);
+
+const manageDeniedTooltip = "You don't have permission to manage notifications.";
+const testDeniedTooltip = "You don't have permission to send test notifications.";
 
 const emailTestSuccessful = ref<boolean | null>(null);
 const emailTestInProgress = ref<boolean | null>(null);
@@ -77,7 +81,9 @@ onMounted(async () => {
                 <div class="col-12 no-side-padding">
                   <div class="row">
                     <div class="col-auto">
-                      <OnOffSwitch id="emailNotifications" @toggle="toggleEmailNotifications" :value="emailNotifications.enabled" />
+                      <PermissionGate :allowed="canManageNotifications" :reason="manageDeniedTooltip">
+                        <OnOffSwitch id="emailNotifications" @toggle="toggleEmailNotifications" :value="emailNotifications.enabled" :disabled="!canManageNotifications" />
+                      </PermissionGate>
                       <div>
                         <span class="connection-test connection-failed">
                           <template v-if="emailToggleSuccessful === false"> <FAIcon :icon="faExclamationTriangle" /> Update failed </template>
@@ -89,10 +95,14 @@ onMounted(async () => {
                         <div class="col-12">
                           <p class="lead">Email notifications</p>
                           <p class="endpoint-metadata">
-                            <ActionButton variant="link" size="sm" :icon="faEdit" @click="editEmailNotifications">Configure</ActionButton>
+                            <PermissionGate :allowed="canManageNotifications" :reason="manageDeniedTooltip">
+                              <ActionButton variant="link" size="sm" :icon="faEdit" :disabled="!canManageNotifications" @click="editEmailNotifications">Configure</ActionButton>
+                            </PermissionGate>
                           </p>
                           <p class="endpoint-metadata">
-                            <ActionButton variant="link" size="sm" :icon="faEnvelope" @click="testEmailNotifications" :disabled="!!emailTestInProgress">Send test notification</ActionButton>
+                            <PermissionGate :allowed="canTestNotifications" :reason="testDeniedTooltip">
+                              <ActionButton variant="link" size="sm" :icon="faEnvelope" :disabled="!!emailTestInProgress || !canTestNotifications" @click="testEmailNotifications">Send test notification</ActionButton>
+                            </PermissionGate>
                             <span class="connection-test connection-testing">
                               <template v-if="emailTestInProgress">
                                 <i class="glyphicon glyphicon-refresh rotate"></i>

src/Frontend/src/components/configuration/RetryRedirects.vue

@@ -11,11 +11,16 @@ import type Redirect from "@/resources/Redirect";
 import RetryRedirectEdit, { type RetryRedirect } from "@/components/configuration/RetryRedirectEdit.vue";
 import FAIcon from "@/components/FAIcon.vue";
 import ActionButton from "@/components/ActionButton.vue";
+import PermissionGate from "@/components/PermissionGate.vue";
 import { faClock } from "@fortawesome/free-regular-svg-icons";
 import { useRedirectsStore } from "@/stores/RedirectsStore";
 import LoadingSpinner from "../LoadingSpinner.vue";
+import { storeToRefs } from "pinia";
 
 const redirectsStore = useRedirectsStore();
+const { canManageRedirects } = storeToRefs(redirectsStore);
+// Creating, modifying and ending redirects all manage redirects.
+const redirectsDeniedTooltip = "You don't have permission to manage redirects.";
 
 const loadingData = ref(true);
 const redirects = redirectsStore.redirects;
@@ -131,7 +136,9 @@ onMounted(async () => {
           <div class="row">
             <div class="col-sm-12">
               <div class="btn-toolbar">
-                <ActionButton @click="createRedirect"><i class="fa pa-redirect-source pa-redirect-small"></i> Create Redirect</ActionButton>
+                <PermissionGate :allowed="canManageRedirects" :reason="redirectsDeniedTooltip">
+                  <ActionButton @click="createRedirect" :disabled="!canManageRedirects"><i class="fa pa-redirect-source pa-redirect-small"></i> Create Redirect</ActionButton>
+                </PermissionGate>
                 <span></span>
               </div>
             </div>
@@ -163,8 +170,12 @@ onMounted(async () => {
                     <div class="row">
                       <div class="col-sm-12">
                         <p class="small">
-                          <ActionButton variant="link" size="sm" @click="deleteRedirect(redirect)">End Redirect</ActionButton>
-                          <ActionButton variant="link" size="sm" @click="editRedirect(redirect)">Modify Redirect</ActionButton>
+                          <PermissionGate :allowed="canManageRedirects" :reason="redirectsDeniedTooltip">
+                            <ActionButton variant="link" size="sm" :disabled="!canManageRedirects" @click="deleteRedirect(redirect)">End Redirect</ActionButton>
+                          </PermissionGate>
+                          <PermissionGate :allowed="canManageRedirects" :reason="redirectsDeniedTooltip">
+                            <ActionButton variant="link" size="sm" :disabled="!canManageRedirects" @click="editRedirect(redirect)">Modify Redirect</ActionButton>
+                          </PermissionGate>
                         </p>
                       </div>
                     </div>