From 0ae575824324ccaa7dc23b332be4df2ec19f60fb Mon Sep 17 00:00:00 2001
From: Michael Myers <michael.myers@goteleport.com>
Date: Mon, 2 Dec 2024 12:09:39 -0600
Subject: [PATCH] Update new tooltip text

---
 web/packages/teleport/src/Users/Users.tsx | 44 ++++++++++++++++++++---
 1 file changed, 40 insertions(+), 4 deletions(-)

diff --git a/web/packages/teleport/src/Users/Users.tsx b/web/packages/teleport/src/Users/Users.tsx
index a87e3fe9f5f1d..16c007045752c 100644
--- 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,32 @@ 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.
+                      </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