From dcdf499c702d5d9f7c86644ac059f425f676dcde Mon Sep 17 00:00:00 2001 From: Lisa Kim Date: Thu, 14 Nov 2024 18:16:43 -0800 Subject: [PATCH] [v15] Web: fix pointer events disabling hover badges on integration tiles (#48687) * Web: fix pointer events disabling hover badges on integration tiles * Add hover badge test * Increase z-index of styled react-select * Update snaps --- .../RequestCheckout.story.test.tsx.snap | 2 ++ .../__snapshots__/FormPassword.test.tsx.snap | 2 ++ web/packages/shared/components/Select/Select.tsx | 1 + .../Audit/__snapshots__/Audit.story.test.tsx.snap | 1 + .../Integrations/Enroll/IntegrationTiles.test.tsx | 13 +++++++++++-- .../teleport/src/Integrations/Enroll/common.tsx | 10 ++++------ .../__snapshots__/Recordings.story.test.tsx.snap | 1 + .../__snapshots__/FormLogin.story.test.tsx.snap | 4 ++++ .../ReAuthenticate.story.test.tsx.snap | 2 ++ 9 files changed, 28 insertions(+), 8 deletions(-) diff --git a/web/packages/shared/components/AccessRequests/NewRequest/RequestCheckout/__snapshots__/RequestCheckout.story.test.tsx.snap b/web/packages/shared/components/AccessRequests/NewRequest/RequestCheckout/__snapshots__/RequestCheckout.story.test.tsx.snap index ff54a86f6e2db..1b79d6a3a0a5a 100644 --- a/web/packages/shared/components/AccessRequests/NewRequest/RequestCheckout/__snapshots__/RequestCheckout.story.test.tsx.snap +++ b/web/packages/shared/components/AccessRequests/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 index d831820409fee..07e6e127e9275 100644 --- 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 index 4435434809cd7..a42e238855f72 100644 --- 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 index ceab16c807499..453a28a471aec 100644 --- 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 index 55dec704ced74..309550a23aaa9 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 () => { ); - 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 index f505638ca434e..4815ca38c91c0 100644 --- a/web/packages/teleport/src/Integrations/Enroll/common.tsx +++ b/web/packages/teleport/src/Integrations/Enroll/common.tsx @@ -31,12 +31,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 ` @@ -44,9 +43,8 @@ export const IntegrationTile = styled(Flex)` &: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 index 247844e7c9e79..c651a790c5253 100644 --- 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 index 8c966078ee866..f12d18f445b40 100644 --- 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/web/packages/teleport/src/components/ReAuthenticate/__snapshots__/ReAuthenticate.story.test.tsx.snap b/web/packages/teleport/src/components/ReAuthenticate/__snapshots__/ReAuthenticate.story.test.tsx.snap index 61138dd76f2db..29a137da1569a 100644 --- a/web/packages/teleport/src/components/ReAuthenticate/__snapshots__/ReAuthenticate.story.test.tsx.snap +++ b/web/packages/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);