From c85975c4d4e5bb75a88968d1e009d2c484476c38 Mon Sep 17 00:00:00 2001 From: Mathieu Suen Date: Tue, 28 Mar 2023 14:13:11 +0200 Subject: [PATCH] SONAR-18892 Fix leading stacked location in source viewer --- .../PermissionTemplatesApp-it.tsx.snap | 4 ++-- .../common/DocumentationTooltip.tsx | 1 + .../js/components/common/LocationIndex.css | 4 ---- .../__tests__/DocumentationTooltip-test.tsx | 15 ++++++++----- .../main/js/components/controls/Tooltip.tsx | 2 +- .../controls/__tests__/Tooltip-test.tsx | 17 -------------- .../__snapshots__/Tooltip-test.tsx.snap | 22 ++++++++++--------- 7 files changed, 26 insertions(+), 39 deletions(-) diff --git a/server/sonar-web/src/main/js/apps/permission-templates/components/__tests__/__snapshots__/PermissionTemplatesApp-it.tsx.snap b/server/sonar-web/src/main/js/apps/permission-templates/components/__tests__/__snapshots__/PermissionTemplatesApp-it.tsx.snap index eebb77c2e35..e05b7037600 100644 --- a/server/sonar-web/src/main/js/apps/permission-templates/components/__tests__/__snapshots__/PermissionTemplatesApp-it.tsx.snap +++ b/server/sonar-web/src/main/js/apps/permission-templates/components/__tests__/__snapshots__/PermissionTemplatesApp-it.tsx.snap @@ -14,7 +14,7 @@ exports[`rendering should render the list of templates: Permission Template 1: u exports[`rendering should render the list of templates: Permission Template 2: admin 1`] = `"0 user(s)0 group(s)"`; -exports[`rendering should render the list of templates: Permission Template 2: codeviewer 1`] = `"permission_templates.project_creatorspermission_templates.project_creators.explanationpermission_templates.project_creators.explanation0 user(s)0 group(s)"`; +exports[`rendering should render the list of templates: Permission Template 2: codeviewer 1`] = `"permission_templates.project_creatorspermission_templates.project_creators.explanation0 user(s)0 group(s)"`; exports[`rendering should render the list of templates: Permission Template 2: issueadmin 1`] = `"0 user(s)0 group(s)"`; @@ -22,4 +22,4 @@ exports[`rendering should render the list of templates: Permission Template 2: s exports[`rendering should render the list of templates: Permission Template 2: securityhotspotadmin 1`] = `"0 user(s)0 group(s)"`; -exports[`rendering should render the list of templates: Permission Template 2: user 1`] = `"permission_templates.project_creatorspermission_templates.project_creators.explanationpermission_templates.project_creators.explanation0 user(s)0 group(s)"`; +exports[`rendering should render the list of templates: Permission Template 2: user 1`] = `"permission_templates.project_creatorspermission_templates.project_creators.explanation0 user(s)0 group(s)"`; diff --git a/server/sonar-web/src/main/js/components/common/DocumentationTooltip.tsx b/server/sonar-web/src/main/js/components/common/DocumentationTooltip.tsx index cd75a88aa40..3bbde1f91da 100644 --- a/server/sonar-web/src/main/js/components/common/DocumentationTooltip.tsx +++ b/server/sonar-web/src/main/js/components/common/DocumentationTooltip.tsx @@ -56,6 +56,7 @@ export default function DocumentationTooltip(props: DocumentationTooltipProps) { return; } if (event.target === last(linksRef.current)) { + event.preventDefault(); nextSelectableNode.current?.focus(); return; } diff --git a/server/sonar-web/src/main/js/components/common/LocationIndex.css b/server/sonar-web/src/main/js/components/common/LocationIndex.css index 74619a1f523..c587a86ecd7 100644 --- a/server/sonar-web/src/main/js/components/common/LocationIndex.css +++ b/server/sonar-web/src/main/js/components/common/LocationIndex.css @@ -46,10 +46,6 @@ margin-left: 0; } -.location-index.is-leading:not(:first-child) { - margin-left: -22px; -} - .location-index[tabindex] { cursor: pointer; } diff --git a/server/sonar-web/src/main/js/components/common/__tests__/DocumentationTooltip-test.tsx b/server/sonar-web/src/main/js/components/common/__tests__/DocumentationTooltip-test.tsx index cfb21c7bf12..197fd1c97b4 100644 --- a/server/sonar-web/src/main/js/components/common/__tests__/DocumentationTooltip-test.tsx +++ b/server/sonar-web/src/main/js/components/common/__tests__/DocumentationTooltip-test.tsx @@ -29,6 +29,7 @@ const ui = { body: byRole('body'), beforeLink: byRole('link', { name: 'Interactive element before' }), helpIcon: byTestId('help-tooltip-activator'), + helpLink: byRole('link', { name: 'Icon' }), linkInTooltip: byRole('link', { name: 'Label' }), linkInTooltip2: byRole('link', { name: 'opens_in_new_window Label2' }), afterLink: byRole('link', { name: 'Interactive element after' }), @@ -43,19 +44,19 @@ it('should correctly navigate through TAB', async () => { await user.tab(); expect(ui.helpIcon.get()).toHaveFocus(); await user.tab(); - expect(ui.linkInTooltip.getAll().at(1)).toHaveFocus(); + expect(ui.linkInTooltip.get()).toHaveFocus(); await user.tab(); - expect(ui.linkInTooltip2.getAll().at(1)).toHaveFocus(); + expect(ui.linkInTooltip2.get()).toHaveFocus(); // Looks like RTL tab event ignores any custom focuses during the events phase, // unless preventDefault is specified await user.tab(); + expect(ui.helpIcon.get()).toHaveFocus(); await user.tab({ shift: true }); - expect(await ui.afterLink.find()).toHaveFocus(); await user.tab({ shift: true }); await user.tab(); await user.tab(); await user.tab({ shift: true }); - expect(await ui.afterLink.find()).toHaveFocus(); + expect(await ui.beforeLink.find()).toHaveFocus(); }); function renderDocumentationTooltip(props: Partial = {}) { @@ -81,7 +82,11 @@ function renderDocumentationTooltip(props: Partial = }, ]} {...props} - /> + > + + Icon + + Interactive element after diff --git a/server/sonar-web/src/main/js/components/controls/Tooltip.tsx b/server/sonar-web/src/main/js/components/controls/Tooltip.tsx index 0aeaad34b41..eeff7ebe1a7 100644 --- a/server/sonar-web/src/main/js/components/controls/Tooltip.tsx +++ b/server/sonar-web/src/main/js/components/controls/Tooltip.tsx @@ -430,7 +430,7 @@ export class TooltipInner extends React.Component { // can mess up buttons that need a tooltip). 'aria-describedby': this.id, })} - {!isVisible && this.renderOverlay()} + {!isVisible && {this.renderOverlay()}} {isVisible && ( diff --git a/server/sonar-web/src/main/js/components/controls/__tests__/Tooltip-test.tsx b/server/sonar-web/src/main/js/components/controls/__tests__/Tooltip-test.tsx index 97004fe4117..d8d5347a709 100644 --- a/server/sonar-web/src/main/js/components/controls/__tests__/Tooltip-test.tsx +++ b/server/sonar-web/src/main/js/components/controls/__tests__/Tooltip-test.tsx @@ -66,40 +66,23 @@ it('should open & close', () => { wrapper.find('#tooltip').simulate('pointerenter'); jest.runOnlyPendingTimers(); wrapper.update(); - expect(wrapper.find('TooltipPortal').exists()).toBe(true); expect(onShow).toHaveBeenCalled(); wrapper.find('#tooltip').simulate('pointerleave'); jest.runOnlyPendingTimers(); wrapper.update(); - expect(wrapper.find('TooltipPortal').exists()).toBe(false); expect(onHide).toHaveBeenCalled(); onShow.mockReset(); onHide.mockReset(); wrapper.find('#tooltip').simulate('focus'); - expect(wrapper.find('TooltipPortal').exists()).toBe(true); expect(onShow).toHaveBeenCalled(); wrapper.find('#tooltip').simulate('blur'); - expect(wrapper.find('TooltipPortal').exists()).toBe(false); expect(onHide).toHaveBeenCalled(); }); -it('should not open when pointer goes away quickly', () => { - const onShow = jest.fn(); - const onHide = jest.fn(); - const wrapper = shallowRenderTooltipInner({ onHide, onShow }); - - wrapper.find('#tooltip').simulate('pointerenter'); - wrapper.find('#tooltip').simulate('pointerleave'); - jest.runOnlyPendingTimers(); - wrapper.update(); - - expect(wrapper.find('TooltipPortal').exists()).toBe(false); -}); - it('should not render tooltip without overlay', () => { const wrapper = shallowRenderTooltip(); expect(wrapper.type()).toBe('div'); diff --git a/server/sonar-web/src/main/js/components/controls/__tests__/__snapshots__/Tooltip-test.tsx.snap b/server/sonar-web/src/main/js/components/controls/__tests__/__snapshots__/Tooltip-test.tsx.snap index ce84e743745..6cbc3a5b5c8 100644 --- a/server/sonar-web/src/main/js/components/controls/__tests__/__snapshots__/Tooltip-test.tsx.snap +++ b/server/sonar-web/src/main/js/components/controls/__tests__/__snapshots__/Tooltip-test.tsx.snap @@ -22,16 +22,18 @@ exports[`should render 1`] = ` onPointerEnter={[Function]} onPointerLeave={[Function]} /> - + + + `; -- 2.39.5