[v16] Disable Enroll New Integration button on missing permissions

Backport #50173

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>

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.
@@ -80,9 +79,16 @@ export function Integrations() {
   return (
     <>
       <FeatureBox>
-        <FeatureHeader>
+        <FeatureHeader justifyContent="space-between">
           <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' && (

web/packages/teleport/src/Integrations/IntegrationsAddButton.test.tsx

@@ -0,0 +1,54 @@
+/**
+ * Teleport
+ * Copyright (C) 2024 Gravitational, Inc.
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ */
+
+import { MemoryRouter } from 'react-router';
+import { render, screen } from 'design/utils/testing';
+
+import { IntegrationsAddButton } from './IntegrationsAddButton';
+
+test('is disables if all permissions are missing', async () => {
+  render(
+    <MemoryRouter>
+      <IntegrationsAddButton
+        requiredPermissions={[
+          { value: false, label: 'permissions.1' },
+          { value: false, label: 'permissions.2' },
+        ]}
+      />
+    </MemoryRouter>
+  );
+
+  expect(
+    screen.getByTitle('You do not have access to add new integrations')
+  ).toBeInTheDocument();
+});
+
+test('is enabled if at least one permission is true', async () => {
+  render(
+    <MemoryRouter>
+      <IntegrationsAddButton
+        requiredPermissions={[
+          { value: false, label: 'permissions.1' },
+          { value: true, label: 'permissions.2' },
+        ]}
+      />
+    </MemoryRouter>
+  );
+
+  expect(screen.getByText('Enroll New Integration')).toBeEnabled();
+});

web/packages/teleport/src/Integrations/IntegrationsAddButton.tsx

@@ -18,25 +18,49 @@
 
 import React from 'react';
 import { Link } from 'react-router-dom';
-import { ButtonPrimary } from 'design';
+import { Button } from 'design';
+import { HoverTooltip } from 'shared/components/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 (
-    <ButtonPrimary
-      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
-    </ButtonPrimary>
+      <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>
   );
 }

web/packages/teleport/src/features.tsx

@@ -221,7 +221,12 @@ export class FeatureBots implements TeleportFeature {
     component: Bots,
   };
 
-  hasAccess() {
+  hasAccess(flags: FeatureFlags) {
+    // if feature hiding is enabled, only show
+    // if the user has access
+    if (cfg.hideInaccessibleFeatures) {
+      return flags.listBots;
+    }
     return true;
   }
 
@@ -388,7 +393,12 @@ export class FeatureIntegrations implements TeleportFeature {
   section = ManagementSection.Access;
 
   hasAccess(flags: FeatureFlags) {
-    return flags.integrations;
+    // if feature hiding is enabled, only show
+    // if the user has access
+    if (cfg.hideInaccessibleFeatures) {
+      return flags.integrations;
+    }
+    return true;
   }
 
   route = {