Disable Enroll New Integration button on missing permissions

This will disable to Enroll New Integration button if the user does not have the required permissions. It also updates the MissingPermissionsTooltip to handle cases where a list of permissions represents "one of these" required permissions scenarios instead of "all of these".
gravitational · Dec 12, 2024 · 3eaedeb · 3eaedeb
1 parent 2c82b83
commit 3eaedeb
Show file tree

Hide file tree

Showing 4 changed files with 54 additions and 18 deletions.
diff --git a/web/packages/shared/components/MissingPermissionsTooltip/MissingPermissionsTooltip.tsx b/web/packages/shared/components/MissingPermissionsTooltip/MissingPermissionsTooltip.tsx
@@ -20,14 +20,22 @@ import { Box, Text, Flex } from 'design';
 
 export const MissingPermissionsTooltip = ({
   missingPermissions,
+  requiresAll = true,
 }: {
   missingPermissions: string[];
+  requiresAll?: boolean;
 }) => {
   return (
     <Box>
       <Text mb={1}>You do not have all of the required permissions.</Text>
       <Box mb={1}>
-        <Text bold>Missing permissions:</Text>
+        {requiresAll ? (
+          <Text bold>Missing permissions:</Text>
+        ) : (
+          <Text bold>
+            You must have at least one of these role permissions:
+          </Text>
+        )}
         <Flex gap={2}>
           {missingPermissions.map(perm => (
             <Text key={perm}>{perm}</Text>

diff --git a/web/packages/teleport/src/Integrations/Integrations.tsx b/web/packages/teleport/src/Integrations/Integrations.tsx
@@ -41,7 +41,6 @@ export function Integrations() {
   const { attempt, run } = useAttempt('processing');
 
   const ctx = useTeleport();
-  const canCreateIntegrations = ctx.storeUser.getIntegrationsAccess().create;
 
   useEffect(() => {
     // TODO(lisa): handle paginating as a follow up polish.
@@ -82,7 +81,14 @@ export function Integrations() {
       <FeatureBox>
         <FeatureHeader>
           <FeatureHeaderTitle>Integrations</FeatureHeaderTitle>
-          <IntegrationsAddButton canCreate={canCreateIntegrations} />
+          <IntegrationsAddButton
+            requiredPermissions={[
+              {
+                value: ctx.storeUser.getIntegrationsAccess().create,
+                label: 'integration.create',
+              },
+            ]}
+          />
         </FeatureHeader>
         {attempt.status === 'failed' && <Alert children={attempt.statusText} />}
         {attempt.status === 'processing' && (

diff --git a/web/packages/teleport/src/Integrations/IntegrationsAddButton.tsx b/web/packages/teleport/src/Integrations/IntegrationsAddButton.tsx
@@ -19,26 +19,48 @@
 import React from 'react';
 import { Link } from 'react-router-dom';
 import { Button } from 'design';
+import { HoverTooltip } from 'design/Tooltip';
+import { MissingPermissionsTooltip } from 'shared/components/MissingPermissionsTooltip';
 
 import cfg from 'teleport/config';
 
 export function IntegrationsAddButton({
-  canCreate = false,
+  requiredPermissions,
 }: {
-  canCreate: boolean;
+  requiredPermissions: { value: boolean; label: string }[];
 }) {
+  const canCreateIntegrations = requiredPermissions.some(v => v.value);
+  const missingPermissions = requiredPermissions
+    .filter(perm => !perm.value)
+    .map(perm => perm.label);
+
   return (
-    <Button
-      intent="primary"
-      fill="border"
-      as={Link}
-      ml="auto"
-      width="240px"
-      disabled={!canCreate}
-      to={cfg.getIntegrationEnrollRoute()}
-      title={canCreate ? '' : 'You do not have access to add new integrations'}
+    <HoverTooltip
+      tipContent={
+        canCreateIntegrations ? null : (
+          <MissingPermissionsTooltip
+            requiresAll={false}
+            missingPermissions={missingPermissions}
+          />
+        )
+      }
     >
-      Enroll New Integration
-    </Button>
+      <Button
+        intent="primary"
+        fill="border"
+        as={Link}
+        ml="auto"
+        width="240px"
+        disabled={!canCreateIntegrations}
+        to={cfg.getIntegrationEnrollRoute()}
+        title={
+          canCreateIntegrations
+            ? ''
+            : 'You do not have access to add new integrations'
+        }
+      >
+        Enroll New Integration
+      </Button>
+    </HoverTooltip>
   );
 }
diff --git a/web/packages/teleport/src/features.tsx b/web/packages/teleport/src/features.tsx
@@ -434,8 +434,8 @@ export class FeatureIntegrations implements TeleportFeature {
   category = NavigationCategory.Management;
   section = ManagementSection.Access;
 
-  hasAccess(flags: FeatureFlags) {
-    return flags.integrations;
+  hasAccess() {
+    return true;
   }
 
   route = {