From 9382a1469a54f175691a621877c8b86428cf2e67 Mon Sep 17 00:00:00 2001
From: Lisa Kim <lisa@goteleport.com>
Date: Thu, 7 Nov 2024 14:48:01 -0800
Subject: [PATCH 1/3] Web: fix pointer events disabling hover badges on
 integration tiles

---
 .../teleport/src/Integrations/Enroll/common.tsx        | 10 ++++------
 1 file changed, 4 insertions(+), 6 deletions(-)

diff --git a/web/packages/teleport/src/Integrations/Enroll/common.tsx b/web/packages/teleport/src/Integrations/Enroll/common.tsx
index 821e85c221773..d319aa07f83e2 100644
--- a/web/packages/teleport/src/Integrations/Enroll/common.tsx
+++ b/web/packages/teleport/src/Integrations/Enroll/common.tsx
@@ -35,12 +35,11 @@ export const IntegrationTile = styled(Flex)<{
   width: 170px;
   background-color: ${({ theme }) => theme.colors.buttons.secondary.default};
   text-align: center;
-  cursor: pointer;
-
+  cursor: ${({ disabled, $exists }) =>
+    disabled || $exists ? 'default' : 'pointer'};
   ${props => {
-    const pointerEvents = props.disabled || props.$exists ? 'none' : 'auto';
     if (props.$exists) {
-      return { pointerEvents };
+      return;
     }
 
     return `
@@ -48,9 +47,8 @@ export const IntegrationTile = styled(Flex)<{
     &:hover {
       background-color: ${props.theme.colors.buttons.secondary.hover};
     }
-    pointer-events: ${pointerEvents};
     `;
-  }}
+  }};
 `;
 
 export const NoCodeIntegrationDescription = () => (

From 3748e817ee9394a2ae6cfe157a080b920ff6079c Mon Sep 17 00:00:00 2001
From: Lisa Kim <lisa@goteleport.com>
Date: Thu, 7 Nov 2024 15:05:39 -0800
Subject: [PATCH 2/3] Add hover badge test

---
 .../Integrations/Enroll/IntegrationTiles.test.tsx   | 13 +++++++++++--
 1 file changed, 11 insertions(+), 2 deletions(-)

diff --git a/web/packages/teleport/src/Integrations/Enroll/IntegrationTiles.test.tsx b/web/packages/teleport/src/Integrations/Enroll/IntegrationTiles.test.tsx
index 8bc08a493bbcc..73c55b0b06eb9 100644
--- a/web/packages/teleport/src/Integrations/Enroll/IntegrationTiles.test.tsx
+++ b/web/packages/teleport/src/Integrations/Enroll/IntegrationTiles.test.tsx
@@ -18,7 +18,7 @@
 
 import React from 'react';
 import { MemoryRouter } from 'react-router';
-import { render, screen } from 'design/utils/testing';
+import { render, screen, userEvent } from 'design/utils/testing';
 
 import cfg from 'teleport/config';
 
@@ -51,8 +51,10 @@ test('render disabled', async () => {
     </MemoryRouter>
   );
 
-  expect(screen.getByText(/lacking permission/i)).toBeInTheDocument();
   expect(screen.queryByRole('link')).not.toBeInTheDocument();
+  expect(
+    screen.queryByText(/request additional permissions/i)
+  ).not.toBeInTheDocument();
 
   const tile = screen.getByTestId('tile-aws-oidc');
   expect(tile).not.toHaveAttribute('href');
@@ -61,6 +63,13 @@ test('render disabled', async () => {
   // so "toBeDisabled" interprets it as false.
   // eslint-disable-next-line jest-dom/prefer-enabled-disabled
   expect(tile).toHaveAttribute('disabled');
+
+  // Disabled states have badges on them. Test it renders on hover.
+  const badge = screen.getByText(/lacking permission/i);
+  await userEvent.hover(badge);
+  expect(
+    screen.getByText(/request additional permissions/i)
+  ).toBeInTheDocument();
 });
 
 test('dont render External Audit Storage for enterprise unless it is cloud', async () => {

From c9b74d04ee0ab4ad3c50d4380286f9968a2ec239 Mon Sep 17 00:00:00 2001
From: Lisa Kim <lisa@goteleport.com>
Date: Thu, 7 Nov 2024 18:47:57 -0800
Subject: [PATCH 3/3] Increase z-index of styled react-select

---
 web/packages/shared/components/Select/Select.tsx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/web/packages/shared/components/Select/Select.tsx b/web/packages/shared/components/Select/Select.tsx
index 8a14974e2c303..2f86a5d87a0cf 100644
--- a/web/packages/shared/components/Select/Select.tsx
+++ b/web/packages/shared/components/Select/Select.tsx
@@ -395,6 +395,7 @@ const StyledSelect = styled.div<{
     }
   }
   .react-select__menu {
+    z-index: 10;
     margin-top: 0px;
     // If the component is on an elevated platform (such as a dialog), use a lighter background.
     background-color: ${props =>