From a883fa78ec8eeb99f4a6b12ec115fd9e2a584e93 Mon Sep 17 00:00:00 2001 From: Lukas Harbarth Date: Mon, 21 Oct 2024 13:13:04 +0200 Subject: [PATCH 1/7] test(ObjectPage): fix flaky test --- .github/workflows/test.yml | 1 + packages/main/src/components/ObjectPage/ObjectPage.cy.tsx | 4 ++-- 2 files changed, 3 insertions(+), 2 deletions(-) diff --git a/.github/workflows/test.yml b/.github/workflows/test.yml index f9e6171449f..947d3486951 100644 --- a/.github/workflows/test.yml +++ b/.github/workflows/test.yml @@ -21,6 +21,7 @@ jobs: - main/src/components - main/src/internal - compat + - main/src/components/ObjectPage react: ['18', '19'] fail-fast: false steps: diff --git a/packages/main/src/components/ObjectPage/ObjectPage.cy.tsx b/packages/main/src/components/ObjectPage/ObjectPage.cy.tsx index 197cb989e7e..a0d8ead855c 100644 --- a/packages/main/src/components/ObjectPage/ObjectPage.cy.tsx +++ b/packages/main/src/components/ObjectPage/ObjectPage.cy.tsx @@ -256,7 +256,7 @@ describe('ObjectPage', () => { cy.findByText('ObjectPageHeader').should('be.visible'); }); - it('scroll to sections - default mode', () => { + it.only('scroll to sections - default mode', () => { document.body.style.margin = '0px'; cy.mount( @@ -324,7 +324,7 @@ describe('ObjectPage', () => { cy.findByTestId('footer').should('be.visible'); }); - it('scroll to sections - tab mode', () => { + it.only('scroll to sections - tab mode', () => { document.body.style.margin = '0px'; cy.mount( Date: Mon, 21 Oct 2024 13:21:23 +0200 Subject: [PATCH 2/7] wip --- packages/main/src/components/ObjectPageSubSection/index.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/main/src/components/ObjectPageSubSection/index.tsx b/packages/main/src/components/ObjectPageSubSection/index.tsx index 023198d99c9..db1dfd28d96 100644 --- a/packages/main/src/components/ObjectPageSubSection/index.tsx +++ b/packages/main/src/components/ObjectPageSubSection/index.tsx @@ -95,7 +95,7 @@ const ObjectPageSubSection = forwardRef {titleText} From 9b82e2978ae3388b8a6ba31f742c21edaee0ca5f Mon Sep 17 00:00:00 2001 From: Lukas Harbarth Date: Mon, 21 Oct 2024 13:25:25 +0200 Subject: [PATCH 3/7] wip --- .../components/ObjectPage/ObjectPage.cy.tsx | 72 +++++++++---------- 1 file changed, 36 insertions(+), 36 deletions(-) diff --git a/packages/main/src/components/ObjectPage/ObjectPage.cy.tsx b/packages/main/src/components/ObjectPage/ObjectPage.cy.tsx index a0d8ead855c..e65c2e709d8 100644 --- a/packages/main/src/components/ObjectPage/ObjectPage.cy.tsx +++ b/packages/main/src/components/ObjectPage/ObjectPage.cy.tsx @@ -286,42 +286,42 @@ describe('ObjectPage', () => { cy.realPress('Enter'); cy.findByText('Job Relationship').should('be.visible'); - cy.mount( - - {OPContent} - - ); - - cy.findByText('Employment').should('not.be.visible'); - cy.findByText('Test').should('be.visible'); - cy.findByTestId('footer').should('be.visible'); - - // Select Employment tab - cy.get('[ui5-tabcontainer]').findUi5TabByText('Goals').click(); - cy.get('[ui5-tabcontainer]').realPress('ArrowRight'); - cy.get('[ui5-tabcontainer]').realPress('ArrowRight'); - cy.get('[ui5-tabcontainer]').realPress('ArrowRight'); - cy.get('[ui5-tabcontainer]').realPress('Enter'); - - cy.wait(200); - //fallback click - cy.get('[ui5-tabcontainer]').findUi5TabByText('Employment').click(); - cy.findByTestId('footer').should('be.visible'); - cy.findByText('Employment').should('be.visible'); - - cy.get('[ui5-tabcontainer]').findUi5TabByText('Goals').click(); - cy.findByText('Test').should('be.visible'); - cy.findByTestId('footer').should('be.visible'); - - cy.get('[ui5-tabcontainer]').findUi5TabByText('Employment').focus(); - cy.realPress('ArrowDown'); - cy.wait(500); - cy.realPress('ArrowDown'); - cy.realPress('ArrowDown'); - cy.realPress('Enter'); - cy.findByText('Job Relationship').should('be.visible'); - - cy.findByTestId('footer').should('be.visible'); + // cy.mount( + // + // {OPContent} + // + // ); + // + // cy.findByText('Employment').should('not.be.visible'); + // cy.findByText('Test').should('be.visible'); + // cy.findByTestId('footer').should('be.visible'); + // + // // Select Employment tab + // cy.get('[ui5-tabcontainer]').findUi5TabByText('Goals').click(); + // cy.get('[ui5-tabcontainer]').realPress('ArrowRight'); + // cy.get('[ui5-tabcontainer]').realPress('ArrowRight'); + // cy.get('[ui5-tabcontainer]').realPress('ArrowRight'); + // cy.get('[ui5-tabcontainer]').realPress('Enter'); + // + // cy.wait(200); + // //fallback click + // cy.get('[ui5-tabcontainer]').findUi5TabByText('Employment').click(); + // cy.findByTestId('footer').should('be.visible'); + // cy.findByText('Employment').should('be.visible'); + // + // cy.get('[ui5-tabcontainer]').findUi5TabByText('Goals').click(); + // cy.findByText('Test').should('be.visible'); + // cy.findByTestId('footer').should('be.visible'); + // + // cy.get('[ui5-tabcontainer]').findUi5TabByText('Employment').focus(); + // cy.realPress('ArrowDown'); + // cy.wait(500); + // cy.realPress('ArrowDown'); + // cy.realPress('ArrowDown'); + // cy.realPress('Enter'); + // cy.findByText('Job Relationship').should('be.visible'); + // + // cy.findByTestId('footer').should('be.visible'); }); it.only('scroll to sections - tab mode', () => { From 404dfe6a02067a02507ede9ffe2d419aebe772e1 Mon Sep 17 00:00:00 2001 From: Lukas Harbarth Date: Tue, 22 Oct 2024 10:54:39 +0200 Subject: [PATCH 4/7] wip --- packages/main/src/components/ObjectPage/index.tsx | 10 +++++++++- 1 file changed, 9 insertions(+), 1 deletion(-) diff --git a/packages/main/src/components/ObjectPage/index.tsx b/packages/main/src/components/ObjectPage/index.tsx index 937a783b8bb..6349a52df60 100644 --- a/packages/main/src/components/ObjectPage/index.tsx +++ b/packages/main/src/components/ObjectPage/index.tsx @@ -334,8 +334,16 @@ const ObjectPage = forwardRef((props, ref TAB_CONTAINER_HEADER_HEIGHT + (headerPinned && !headerCollapsed ? headerContentHeight : 0) + 'px'; + section.focus(); - section.scrollIntoView({ behavior: 'smooth' }); + // in iframes, scroll-behavior: smooth doesn't fully scroll + if (window && window.self !== window.top) { + objectPageRef.current.style.scrollBehavior = 'auto'; + section.scrollIntoView(); + objectPageRef.current.style.scrollBehavior = ''; + } else { + section.scrollIntoView({ behavior: 'smooth' }); + } section.style.scrollMarginBlockStart = '0px'; } }; From 9f2e1e2d2fb6025d73672eee6c8ddefdb3b83417 Mon Sep 17 00:00:00 2001 From: Lukas Harbarth Date: Tue, 22 Oct 2024 11:06:06 +0200 Subject: [PATCH 5/7] wip --- packages/main/src/components/ObjectPage/ObjectPage.cy.tsx | 6 +++--- packages/main/src/components/ObjectPage/ObjectPage.mdx | 3 +++ packages/main/src/components/ObjectPage/index.tsx | 2 +- 3 files changed, 7 insertions(+), 4 deletions(-) diff --git a/packages/main/src/components/ObjectPage/ObjectPage.cy.tsx b/packages/main/src/components/ObjectPage/ObjectPage.cy.tsx index e65c2e709d8..2c69e051c11 100644 --- a/packages/main/src/components/ObjectPage/ObjectPage.cy.tsx +++ b/packages/main/src/components/ObjectPage/ObjectPage.cy.tsx @@ -259,7 +259,7 @@ describe('ObjectPage', () => { it.only('scroll to sections - default mode', () => { document.body.style.margin = '0px'; cy.mount( - + {OPContent} ); @@ -331,7 +331,7 @@ describe('ObjectPage', () => { titleArea={DPTitle} headerArea={DPContent} mode={ObjectPageMode.IconTabBar} - style={{ height: '100vh' }} + style={{ height: '100vh', scrollBehavior: 'auto' }} > {OPContent} @@ -361,7 +361,7 @@ describe('ObjectPage', () => { headerArea={DPContent} footerArea={Footer} mode={ObjectPageMode.IconTabBar} - style={{ height: '100vh' }} + style={{ height: '100vh', scrollBehavior: 'auto' }} > {OPContent} diff --git a/packages/main/src/components/ObjectPage/ObjectPage.mdx b/packages/main/src/components/ObjectPage/ObjectPage.mdx index b0cdd81ef7e..cf764cc1658 100644 --- a/packages/main/src/components/ObjectPage/ObjectPage.mdx +++ b/packages/main/src/components/ObjectPage/ObjectPage.mdx @@ -7,11 +7,14 @@ import { ObjectPageHeader } from '../ObjectPageHeader'; import { ObjectPageSection } from '../ObjectPageSection'; import { ObjectPageSubSection } from '../ObjectPageSubSection'; import { CodeBlock } from '@sb/components/DomRefTable'; +import { MessageStrip } from '@ui5/webcomponents-react'; + + ## Example diff --git a/packages/main/src/components/ObjectPage/index.tsx b/packages/main/src/components/ObjectPage/index.tsx index 6349a52df60..0b23c64ca0c 100644 --- a/packages/main/src/components/ObjectPage/index.tsx +++ b/packages/main/src/components/ObjectPage/index.tsx @@ -342,7 +342,7 @@ const ObjectPage = forwardRef((props, ref section.scrollIntoView(); objectPageRef.current.style.scrollBehavior = ''; } else { - section.scrollIntoView({ behavior: 'smooth' }); + section.scrollIntoView(); } section.style.scrollMarginBlockStart = '0px'; } From 083291d966c301148f0564bf04911fac58ad7ff5 Mon Sep 17 00:00:00 2001 From: Lukas Harbarth Date: Tue, 22 Oct 2024 11:20:22 +0200 Subject: [PATCH 6/7] fix(ObjectPge): support section selection in iframe --- .github/workflows/test.yml | 1 - .../components/ObjectPage/ObjectPage.cy.tsx | 81 ++++++++++--------- .../src/components/ObjectPage/ObjectPage.mdx | 2 +- .../components/ObjectPageSubSection/index.tsx | 2 +- 4 files changed, 45 insertions(+), 41 deletions(-) diff --git a/.github/workflows/test.yml b/.github/workflows/test.yml index 947d3486951..f9e6171449f 100644 --- a/.github/workflows/test.yml +++ b/.github/workflows/test.yml @@ -21,7 +21,6 @@ jobs: - main/src/components - main/src/internal - compat - - main/src/components/ObjectPage react: ['18', '19'] fail-fast: false steps: diff --git a/packages/main/src/components/ObjectPage/ObjectPage.cy.tsx b/packages/main/src/components/ObjectPage/ObjectPage.cy.tsx index 2c69e051c11..9346e351627 100644 --- a/packages/main/src/components/ObjectPage/ObjectPage.cy.tsx +++ b/packages/main/src/components/ObjectPage/ObjectPage.cy.tsx @@ -256,7 +256,7 @@ describe('ObjectPage', () => { cy.findByText('ObjectPageHeader').should('be.visible'); }); - it.only('scroll to sections - default mode', () => { + it('scroll to sections - default mode', () => { document.body.style.margin = '0px'; cy.mount( @@ -286,45 +286,50 @@ describe('ObjectPage', () => { cy.realPress('Enter'); cy.findByText('Job Relationship').should('be.visible'); - // cy.mount( - // - // {OPContent} - // - // ); - // - // cy.findByText('Employment').should('not.be.visible'); - // cy.findByText('Test').should('be.visible'); - // cy.findByTestId('footer').should('be.visible'); - // - // // Select Employment tab - // cy.get('[ui5-tabcontainer]').findUi5TabByText('Goals').click(); - // cy.get('[ui5-tabcontainer]').realPress('ArrowRight'); - // cy.get('[ui5-tabcontainer]').realPress('ArrowRight'); - // cy.get('[ui5-tabcontainer]').realPress('ArrowRight'); - // cy.get('[ui5-tabcontainer]').realPress('Enter'); - // - // cy.wait(200); - // //fallback click - // cy.get('[ui5-tabcontainer]').findUi5TabByText('Employment').click(); - // cy.findByTestId('footer').should('be.visible'); - // cy.findByText('Employment').should('be.visible'); - // - // cy.get('[ui5-tabcontainer]').findUi5TabByText('Goals').click(); - // cy.findByText('Test').should('be.visible'); - // cy.findByTestId('footer').should('be.visible'); - // - // cy.get('[ui5-tabcontainer]').findUi5TabByText('Employment').focus(); - // cy.realPress('ArrowDown'); - // cy.wait(500); - // cy.realPress('ArrowDown'); - // cy.realPress('ArrowDown'); - // cy.realPress('Enter'); - // cy.findByText('Job Relationship').should('be.visible'); - // - // cy.findByTestId('footer').should('be.visible'); + cy.mount( + + {OPContent} + + ); + + cy.findByText('Employment').should('not.be.visible'); + cy.findByText('Test').should('be.visible'); + cy.findByTestId('footer').should('be.visible'); + + // Select Employment tab + cy.get('[ui5-tabcontainer]').findUi5TabByText('Goals').click(); + cy.get('[ui5-tabcontainer]').realPress('ArrowRight'); + cy.get('[ui5-tabcontainer]').realPress('ArrowRight'); + cy.get('[ui5-tabcontainer]').realPress('ArrowRight'); + cy.get('[ui5-tabcontainer]').realPress('Enter'); + + cy.wait(200); + //fallback click + cy.get('[ui5-tabcontainer]').findUi5TabByText('Employment').click(); + cy.findByTestId('footer').should('be.visible'); + cy.findByText('Employment').should('be.visible'); + + cy.get('[ui5-tabcontainer]').findUi5TabByText('Goals').click(); + cy.findByText('Test').should('be.visible'); + cy.findByTestId('footer').should('be.visible'); + + cy.get('[ui5-tabcontainer]').findUi5TabByText('Employment').focus(); + cy.realPress('ArrowDown'); + cy.wait(500); + cy.realPress('ArrowDown'); + cy.realPress('ArrowDown'); + cy.realPress('Enter'); + cy.findByText('Job Relationship').should('be.visible'); + + cy.findByTestId('footer').should('be.visible'); }); - it.only('scroll to sections - tab mode', () => { + it('scroll to sections - tab mode', () => { document.body.style.margin = '0px'; cy.mount( - + ## Example diff --git a/packages/main/src/components/ObjectPageSubSection/index.tsx b/packages/main/src/components/ObjectPageSubSection/index.tsx index db1dfd28d96..023198d99c9 100644 --- a/packages/main/src/components/ObjectPageSubSection/index.tsx +++ b/packages/main/src/components/ObjectPageSubSection/index.tsx @@ -95,7 +95,7 @@ const ObjectPageSubSection = forwardRef {titleText} From d0d502ad696ee4bcc2c4ca77ba3095dba3d744be Mon Sep 17 00:00:00 2001 From: Lukas Harbarth Date: Tue, 22 Oct 2024 11:28:27 +0200 Subject: [PATCH 7/7] refactor smooth scroll logic --- .../components/ObjectPage/ObjectPage.module.css | 3 +++ packages/main/src/components/ObjectPage/index.tsx | 15 +++++---------- 2 files changed, 8 insertions(+), 10 deletions(-) diff --git a/packages/main/src/components/ObjectPage/ObjectPage.module.css b/packages/main/src/components/ObjectPage/ObjectPage.module.css index f916d6998e5..02a04e192ef 100644 --- a/packages/main/src/components/ObjectPage/ObjectPage.module.css +++ b/packages/main/src/components/ObjectPage/ObjectPage.module.css @@ -16,6 +16,9 @@ overflow-x: hidden; overflow-y: auto; scroll-behavior: smooth; + &[data-in-iframe='true'] { + scroll-behavior: auto; + } section[id*='ObjectPageSection-'] > div[role='heading'] { display: none; } diff --git a/packages/main/src/components/ObjectPage/index.tsx b/packages/main/src/components/ObjectPage/index.tsx index 0b23c64ca0c..d5bf1a8eb9f 100644 --- a/packages/main/src/components/ObjectPage/index.tsx +++ b/packages/main/src/components/ObjectPage/index.tsx @@ -334,16 +334,10 @@ const ObjectPage = forwardRef((props, ref TAB_CONTAINER_HEADER_HEIGHT + (headerPinned && !headerCollapsed ? headerContentHeight : 0) + 'px'; - - section.focus(); - // in iframes, scroll-behavior: smooth doesn't fully scroll - if (window && window.self !== window.top) { - objectPageRef.current.style.scrollBehavior = 'auto'; - section.scrollIntoView(); - objectPageRef.current.style.scrollBehavior = ''; - } else { - section.scrollIntoView(); + if (isSubSection) { + section.focus(); } + section.scrollIntoView(); section.style.scrollMarginBlockStart = '0px'; } }; @@ -353,7 +347,7 @@ const ObjectPage = forwardRef((props, ref return; } if (firstSectionId === sectionId) { - objectPageRef.current?.scrollTo({ top: 0, behavior: 'smooth' }); + objectPageRef.current?.scrollTo({ top: 0 }); } else { scrollToSectionById(sectionId); } @@ -737,6 +731,7 @@ const ObjectPage = forwardRef((props, ref style={objectPageStyles} ref={componentRef} onScroll={onObjectPageScroll} + data-in-iframe={window && window.self !== window.top} {...propsWithoutOmitted} >