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

…iles (#48687) * Web: fix pointer events disabling hover badges on integration tiles * Add hover badge test * Increase z-index of styled react-select * Update snaps
gravitational · Nov 15, 2024 · dcdf499 · dcdf499
1 parent 813835a
commit dcdf499
Show file tree

Hide file tree

Showing 9 changed files with 28 additions and 8 deletions.
diff --git a/...cessRequests/NewRequest/RequestCheckout/__snapshots__/RequestCheckout.story.test.tsx.snap b/...cessRequests/NewRequest/RequestCheckout/__snapshots__/RequestCheckout.story.test.tsx.snap
@@ -513,6 +513,7 @@ exports[`failed state 1`] = `
 }
 
 .c36 .react-select__menu {
+  z-index: 10;
   margin-top: 0px;
   background-color: #344179;
   box-shadow: 0px 5px 5px -3px rgba(0,0,0,0.2),0px 8px 10px 1px rgba(0,0,0,0.14),0px 3px 14px 2px rgba(0,0,0,0.12);
@@ -1965,6 +1966,7 @@ exports[`loaded state 1`] = `
 }
 
 .c43 .react-select__menu {
+  z-index: 10;
   margin-top: 0px;
   background-color: #344179;
   box-shadow: 0px 5px 5px -3px rgba(0,0,0,0.2),0px 8px 10px 1px rgba(0,0,0,0.14),0px 3px 14px 2px rgba(0,0,0,0.12);

diff --git a/web/packages/shared/components/FormPassword/__snapshots__/FormPassword.test.tsx.snap b/web/packages/shared/components/FormPassword/__snapshots__/FormPassword.test.tsx.snap
@@ -259,6 +259,7 @@ exports[`auth2faType "on" should render form with hardware key as first option i
 }
 
 .c7 .react-select__menu {
+  z-index: 10;
   margin-top: 0px;
   background-color: #344179;
   box-shadow: 0px 5px 5px -3px rgba(0,0,0,0.2),0px 8px 10px 1px rgba(0,0,0,0.14),0px 3px 14px 2px rgba(0,0,0,0.12);
@@ -702,6 +703,7 @@ exports[`auth2faType "optional" should render form with hardware key as first op
 }
 
 .c7 .react-select__menu {
+  z-index: 10;
   margin-top: 0px;
   background-color: #344179;
   box-shadow: 0px 5px 5px -3px rgba(0,0,0,0.2),0px 8px 10px 1px rgba(0,0,0,0.14),0px 3px 14px 2px rgba(0,0,0,0.12);

diff --git a/web/packages/shared/components/Select/Select.tsx b/web/packages/shared/components/Select/Select.tsx
@@ -231,6 +231,7 @@ export 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/Audit/__snapshots__/Audit.story.test.tsx.snap b/web/packages/teleport/src/Audit/__snapshots__/Audit.story.test.tsx.snap
@@ -13599,6 +13599,7 @@ exports[`loaded audit log screen 1`] = `
 }
 
 .c9 .react-select__menu {
+  z-index: 10;
   margin-top: 0px;
   background-color: #344179;
   box-shadow: 0px 5px 5px -3px rgba(0,0,0,0.2),0px 8px 10px 1px rgba(0,0,0,0.14),0px 3px 14px 2px rgba(0,0,0,0.12);

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
@@ -31,22 +31,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 = () => (

diff --git a/web/packages/teleport/src/Recordings/__snapshots__/Recordings.story.test.tsx.snap b/web/packages/teleport/src/Recordings/__snapshots__/Recordings.story.test.tsx.snap
@@ -217,6 +217,7 @@ exports[`rendering of Session Recordings 1`] = `
 }
 
 .c9 .react-select__menu {
+  z-index: 10;
   margin-top: 0px;
   background-color: #344179;
   box-shadow: 0px 5px 5px -3px rgba(0,0,0,0.2),0px 8px 10px 1px rgba(0,0,0,0.14),0px 3px 14px 2px rgba(0,0,0,0.12);

diff --git a/web/packages/teleport/src/components/FormLogin/__snapshots__/FormLogin.story.test.tsx.snap b/web/packages/teleport/src/components/FormLogin/__snapshots__/FormLogin.story.test.tsx.snap
@@ -632,6 +632,7 @@ exports[`auth2faType: optional rendering 1`] = `
 }
 
 .c16 .react-select__menu {
+  z-index: 10;
   margin-top: 0px;
   background-color: #344179;
   box-shadow: 0px 5px 5px -3px rgba(0,0,0,0.2),0px 8px 10px 1px rgba(0,0,0,0.14),0px 3px 14px 2px rgba(0,0,0,0.12);
@@ -1178,6 +1179,7 @@ exports[`auth2faType: otp rendering 1`] = `
 }
 
 .c16 .react-select__menu {
+  z-index: 10;
   margin-top: 0px;
   background-color: #344179;
   box-shadow: 0px 5px 5px -3px rgba(0,0,0,0.2),0px 8px 10px 1px rgba(0,0,0,0.14),0px 3px 14px 2px rgba(0,0,0,0.12);
@@ -1737,6 +1739,7 @@ exports[`auth2faType: webauthn rendering 1`] = `
 }
 
 .c16 .react-select__menu {
+  z-index: 10;
   margin-top: 0px;
   background-color: #344179;
   box-shadow: 0px 5px 5px -3px rgba(0,0,0,0.2),0px 8px 10px 1px rgba(0,0,0,0.14),0px 3px 14px 2px rgba(0,0,0,0.12);
@@ -2357,6 +2360,7 @@ exports[`cloud auth2faType: on rendering 1`] = `
 }
 
 .c21 .react-select__menu {
+  z-index: 10;
   margin-top: 0px;
   background-color: #344179;
   box-shadow: 0px 5px 5px -3px rgba(0,0,0,0.2),0px 8px 10px 1px rgba(0,0,0,0.14),0px 3px 14px 2px rgba(0,0,0,0.12);

diff --git a/...s/teleport/src/components/ReAuthenticate/__snapshots__/ReAuthenticate.story.test.tsx.snap b/...s/teleport/src/components/ReAuthenticate/__snapshots__/ReAuthenticate.story.test.tsx.snap
@@ -355,6 +355,7 @@ exports[`render failed state for re-authentication dialog 1`] = `
 }
 
 .c15 .react-select__menu {
+  z-index: 10;
   margin-top: 0px;
   background-color: #4A5688;
   box-shadow: 0px 5px 5px -3px rgba(0,0,0,0.2),0px 8px 10px 1px rgba(0,0,0,0.14),0px 3px 14px 2px rgba(0,0,0,0.12);
@@ -867,6 +868,7 @@ exports[`render re-authentication dialog 1`] = `
 }
 
 .c14 .react-select__menu {
+  z-index: 10;
   margin-top: 0px;
   background-color: #4A5688;
   box-shadow: 0px 5px 5px -3px rgba(0,0,0,0.2),0px 8px 10px 1px rgba(0,0,0,0.14),0px 3px 14px 2px rgba(0,0,0,0.12);