[v17] Web: fix pointer events disabling hover badges on integration t…

…iles (#48685) * Web: fix pointer events disabling hover badges on integration tiles * Add hover badge test * Increase z-index of styled react-select
gravitational · Nov 8, 2024 · de5d8ac · de5d8ac
1 parent 076cc93
commit de5d8ac
Show file tree

Hide file tree

Showing 3 changed files with 16 additions and 8 deletions.
diff --git 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 =>

diff --git 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 () => {

diff --git a/web/packages/teleport/src/Integrations/Enroll/common.tsx b/web/packages/teleport/src/Integrations/Enroll/common.tsx
@@ -35,22 +35,20 @@ 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 `
     opacity: ${props.disabled ? '0.45' : '1'};
     &:hover {
       background-color: ${props.theme.colors.buttons.secondary.hover};
     }
-    pointer-events: ${pointerEvents};
     `;
-  }}
+  }};
 `;
 
 export const NoCodeIntegrationDescription = () => (