Show tooltips on buttons for missing permissions

Syslifters · Jan 14, 2025 · d877f49 · d877f49
1 parent d19c5c4
commit d877f49
Show file tree

Hide file tree

Showing 8 changed files with 82 additions and 29 deletions.
diff --git a/packages/frontend/src/components/Design/CreateDesignDialog.vue b/packages/frontend/src/components/Design/CreateDesignDialog.vue
@@ -1,11 +1,13 @@
 <template>
   <s-dialog v-model="dialogVisible">
     <template #activator="{ props: dialogProps }">
-      <btn-create 
-        :loading="actionInProgress"
-        :disabled="!canCreate"
-        v-bind="dialogProps"
-      />
+      <permission-info :value="canCreate" :permission-name="props.projectTypeScope === ProjectTypeScope.GLOBAL ? 'Designer' : undefined">
+        <btn-create 
+          :loading="actionInProgress"
+          :disabled="!canCreate"
+          v-bind="dialogProps"
+        />
+      </permission-info>
     </template>
     <template #title>New Design</template>
 

diff --git a/packages/frontend/src/components/Design/ImportDesignDialog.vue b/packages/frontend/src/components/Design/ImportDesignDialog.vue
@@ -1,9 +1,11 @@
 <template>
-  <btn-import 
-    ref="importBtnRef"
-    :import="performImport" 
-    :disabled="!canImport"
-  />
+  <permission-info :value="canImport" :permission-name="props.projectTypeScope === ProjectTypeScope.GLOBAL ? 'Designer' : undefined">
+    <btn-import 
+      ref="importBtnRef"
+      :import="performImport" 
+      :disabled="!canImport"
+    />
+  </permission-info>
 </template>
 
 <script setup lang="ts">

diff --git a/packages/frontend/src/components/UserInfoForm.vue b/packages/frontend/src/components/UserInfoForm.vue
@@ -171,7 +171,9 @@
           :error-messages="errors?.is_superuser || []"
           :disabled="!canEditSuperuserPermissions"
           density="compact"
-        />
+        >
+          <template #label><permission-info :value="canEditSuperuserPermissions" permission-name="Superuser">Superuser</permission-info></template>
+        </s-checkbox>
         <s-checkbox
           v-if="user.is_system_user"
           :model-value="user.is_system_user"

diff --git a/packages/frontend/src/layouts/default.vue b/packages/frontend/src/layouts/default.vue
@@ -91,18 +91,19 @@
 
           <v-list-item 
             to="/users/" 
-            title="Users" 
             data-testid="users-tab"
             prepend-icon="mdi-account-multiple" 
             :active="route.path.startsWith('/users') && !route.path.startsWith('/users/self')"
             :disabled="!auth.permissions.value.user_manager" 
-          />
+          >
+            <template #title><permission-info :value="auth.permissions.value.user_manager" permission-name="User Manager">Users</permission-info></template>
+          </v-list-item>
           <v-list-item
             to="/backups/"
             prepend-icon="mdi-tools"
             :disabled="!auth.permissions.value.view_backup"
           >
-            <template #title><pro-info>Backups</pro-info></template>
+            <template #title><pro-info><permission-info :value="auth.permissions.value.view_backup || !apiSettings.isProfessionalLicense" permission-name="Superuser">Backups</permission-info></pro-info></template>
           </v-list-item>
           <license-info-menu-item />
         </template>

diff --git a/packages/frontend/src/pages/projects/[projectId]/reporting/findings/[findingId]/index.vue b/packages/frontend/src/pages/projects/[projectId]/reporting/findings/[findingId]/index.vue
@@ -5,9 +5,10 @@
         <v-list-item
           :to="{path: '/templates/fromfinding/', query: {project: project.id, finding: finding.id}}"
           prepend-icon="mdi-view-compact"
-          title="Save as template"
           :disabled="!auth.permissions.value.template_editor"
-        />
+        >
+          <template #title><permission-info :value="auth.permissions.value.template_editor" permission-name="Template Editor">Save as template</permission-info></template>
+        </v-list-item>
         <btn-copy 
           :copy="performCopy"
           :disabled="project.readonly"

diff --git a/packages/frontend/src/pages/projects/index.vue b/packages/frontend/src/pages/projects/index.vue
@@ -11,8 +11,12 @@
     >
       <template #title>Projects</template>
       <template #actions>
-        <btn-create to="/projects/new/" :disabled="!auth.permissions.value.create_projects" />
-        <btn-import ref="importBtn" :import="performImport" :disabled="!auth.permissions.value.import_projects" />
+        <permission-info :value="auth.permissions.value.create_projects">
+          <btn-create to="/projects/new/" :disabled="!auth.permissions.value.create_projects" />
+        </permission-info>
+        <permission-info :value="auth.permissions.value.import_projects">
+          <btn-import ref="importBtn" :import="performImport" :disabled="!auth.permissions.value.import_projects" />
+        </permission-info>
       </template>
       <template #tabs>
         <v-tab :to="{path: '/projects/', query: route.query}" exact prepend-icon="mdi-file-document" text="Active" />

diff --git a/packages/frontend/src/pages/templates/index.vue b/packages/frontend/src/pages/templates/index.vue
@@ -43,17 +43,21 @@
         </v-row>
       </template>
       <template #actions>
-        <btn-create 
-          @click="performCreate"
-          :disabled="!auth.permissions.value.template_editor"
-          :loading="performCreateInProgress"
-        />
-        <btn-import 
-          ref="importBtnRef"
-          data-testid="import-templates"
-          :import="performImport"
-          :disabled="!auth.permissions.value.template_editor"
-        />
+        <permission-info :value="auth.permissions.value.template_editor" permission-name="Template Editor">
+          <btn-create 
+            @click="performCreate"
+            :disabled="!auth.permissions.value.template_editor"
+            :loading="performCreateInProgress"
+          />
+        </permission-info>
+        <permission-info :value="auth.permissions.value.template_editor" permission-name="Template Editor">
+          <btn-import 
+            ref="importBtnRef"
+            data-testid="import-templates"
+            :import="performImport"
+            :disabled="!auth.permissions.value.template_editor"
+          />
+        </permission-info>
       </template>
       <template #item="{item}: {item: FindingTemplate}">
         <template-list-item

diff --git a/packages/nuxt-base-layer/src/components/PermissionInfo.vue b/packages/nuxt-base-layer/src/components/PermissionInfo.vue
@@ -0,0 +1,37 @@
+<template>
+  <span v-if="!props.value" class="permission-info" @click.prevent>
+    <slot />
+    <s-tooltip activator="parent" :text="text" />
+  </span>
+  <span v-else><slot /></span>
+</template>
+
+<script setup lang="ts">
+const props = defineProps<{
+  value: boolean;
+  text?: string;
+  permissionName?: string;
+}>();
+
+const auth = useAuth();
+const apiSettings = useApiSettings();
+
+const text = computed(() => {
+  if (props.text) {
+    return props.text;
+  } else if (auth.permissions.value.superuser && !auth.permissions.value.admin && apiSettings.isProfessionalLicense) {
+    return 'Superuser permissions not enabled';
+  } else if (props.permissionName) {
+    return `Permission required: ${props.permissionName}`;
+  } else {
+    return 'No permission to perform this action';
+  }
+});
+
+</script>
+
+<style lang="scss" scoped>
+.permission-info {
+  pointer-events: auto;
+}
+</style>