Update new tooltip text

gravitational · Dec 2, 2024 · 681639f · 681639f
1 parent 14d6430
commit 681639f
Showing 1 changed file with 41 additions and 4 deletions.
diff --git a/web/packages/teleport/src/Users/Users.tsx b/web/packages/teleport/src/Users/Users.tsx
@@ -17,7 +17,7 @@
  */
 
 import React from 'react';
-import { Indicator, Box, Alert, Button, Link } from 'design';
+import { Indicator, Text, Flex, Box, Alert, Button, Link } from 'design';
 import { HoverTooltip } from 'shared/components/ToolTip';
 
 import {
@@ -62,6 +62,20 @@ export function Users(props: State) {
     EmailPasswordReset,
     onEmailPasswordResetClose,
   } = props;
+
+  const requiredPermissions = Object.entries(usersAcl)
+    .map(([key, value]) => {
+      if (key === 'edit') {
+        return { value, label: 'update' };
+      }
+      if (key === 'create') {
+        return { value, label: 'create' };
+      }
+    })
+    .filter(Boolean);
+
+  const isMissingPermissions = requiredPermissions.some(v => !v.value);
+
   return (
     <FeatureBox>
       <FeatureHeader justifyContent="space-between">
@@ -70,10 +84,33 @@ export function Users(props: State) {
           <>
             {!InviteCollaborators && (
               <HoverTooltip
+                position="bottom"
                 tipContent={
-                  usersAcl.edit
-                    ? ''
-                    : 'You do not have permission to edit users.'
+                  !isMissingPermissions ? (
+                    ''
+                  ) : (
+                    <Box>
+                      {/* TODO (avatus): extract this into a new "missing permissions" component. This will
+                          require us to change the internals of HoverTooltip to allow more arbitrary styling of the popover.
+                      */}
+                      <Text mb={1}>
+                        You do not have all of the required permissions to
+                        create a new user.
+                      </Text>
+                      <Box mb={1}>
+                        <Text bold>You are missing permissions:</Text>
+                        <Flex gap={2}>
+                          {requiredPermissions
+                            .filter(perm => !perm.value)
+                            .map(perm => (
+                              <Text
+                                key={perm.label}
+                              >{`users.${perm.label}`}</Text>
+                            ))}
+                        </Flex>
+                      </Box>
+                    </Box>
+                  )
                 }
               >
                 <Button