Hide Accordion closed Sections instead of unmounting them #2149

supernova-at · 2020-02-07T17:44:35Z

Description

This PR hides accordion section contents that aren't open instead of not rendering them at all.
This saves components from mounting / unmounting on section open changes, but may overfetch (if a section is never opened, its contents may still make network calls).

This PR also sets all price adjustment accordion sections to closed initially, which is the intended UX.

Related Issue

Closes PWA-360.

Acceptance

Verification Stakeholders

Specification

Verification Steps

Go to the /cart page
Inspect element on the price adjustments Accordion
See that the contents of the sections that are closed still appear in the DOM, they're just hidden from the user

Screenshots / Screen Captures (if appropriate)

Checklist

I have updated the documentation accordingly, if necessary.
I have added tests to cover my changes, if necessary.

PWAStudioBot · 2020-02-07T17:50:48Z

	Messages
📖	Access a deployed version of this PR here. Make sure to wait for the "pwa-pull-request-deploy" job to complete.
📖	DangerCI Failures related to missing labels/description/linked issues/etc will persist until the next push or next nightly build run (assuming they are fixed).
📖	Associated JIRA tickets: PWA-360.

Generated by 🚫 dangerJS against 637fbbd

sirugh · 2020-02-07T18:50:55Z

<3 Perfect. Fix the tests and I'll approve :D

revanth0212

Nice optimization.

schensley

UX approved.

…rdion

…sent.

supernova-at · 2020-02-10T16:01:10Z

PR Updated:

Fixes merge conflicts

supernova-at · 2020-02-10T20:01:57Z

packages/venia-ui/lib/components/CartPage/PriceAdjustments/__tests__/priceAdjustments.spec.js

 jest.mock('../giftCardSection', () => 'GiftCardSection');
+jest.mock('../GiftOptions', () => 'GiftOptions');


Now that the children get rendered regardless of whether their section is open or not, we have to mock them all.

supernova-at · 2020-02-10T20:02:37Z

PR Updated:

Updates priceAdjustments unit tests and snapshots

dpatil-magento · 2020-02-10T21:11:03Z

@supernova-at Not sure how its related but as demo'ed happens only with this PR, works on develop

When try to sign-out from cart page, sign-out does not work and console has this error.

vendors.e2bb76dc931329fff8e3.js:1059 Uncaught (in promise) Error: Network error: Cannot read property 'include_gift_receipt' of undefined at new ApolloError (vendors.e2bb76dc931329fff8e3.js:1059) at vendors.e2bb76dc931329fff8e3.js:1142 at async Promise.all (index 6)

supernova-at · 2020-02-11T15:10:30Z

Hey @dpatil-magento I was able to reproduce that issue on develop so I have created a separate issue (PWA-368) for it and this one can be merged (since it didn't introduce the issue).

dpatil-magento

Approved latest commits.

supernova-at added 2 commits February 7, 2020 11:30

Hides section contents instead of unmounting them

d84bfa7

Fixes up tests. Closes all price adjustement sections by default.

47f4c33

m2-community-project bot added this to Ready for Review in Pull Request Progress Feb 7, 2020

supernova-at added the version: Patch This changeset includes backwards compatible bug fixes. label Feb 7, 2020

PWAStudioBot added the pkg:venia-ui label Feb 7, 2020

supernova-at changed the title ~~Supernova/360 accordion~~ Hide Accordion closed Sections instead of unmounting them Feb 7, 2020

Runs prettier

a4f5f99

revanth0212 previously approved these changes Feb 7, 2020

View reviewed changes

m2-community-project bot assigned revanth0212 Feb 7, 2020

m2-community-project bot moved this from Ready for Review to Reviewer Approved in Pull Request Progress Feb 7, 2020

m2-community-project bot added the Progress: approved label Feb 7, 2020

schensley previously approved these changes Feb 7, 2020

View reviewed changes

m2-community-project bot assigned schensley Feb 7, 2020

supernova-at added 2 commits February 10, 2020 09:58

Merge remote-tracking branch 'origin/develop' into supernova/360_acco…

2c6024d

…rdion

Updates priceAdjustments snapshot. All section children should be pre…

91ef9f3

…sent.

supernova-at dismissed stale reviews from schensley and revanth0212 via 91ef9f3 February 10, 2020 16:00

supernova-at and others added 4 commits February 10, 2020 11:08

Merge branch 'develop' into supernova/360_accordion

ffc80a9

Merge branch 'develop' into supernova/360_accordion

a782920

Merge branch 'develop' into supernova/360_accordion

710ed9e

Updates priceAdjustments unit test and snapshot

3ed75ef

supernova-at commented Feb 10, 2020

View reviewed changes

m2-community-project bot assigned supernova-at Feb 10, 2020

m2-community-project bot moved this from Reviewer Approved to Review in Progress in Pull Request Progress Feb 10, 2020

m2-community-project bot added Progress: review and removed Progress: approved labels Feb 10, 2020

Merge branch 'develop' into supernova/360_accordion

637fbbd

dpatil-magento approved these changes Feb 11, 2020

View reviewed changes

m2-community-project bot assigned dpatil-magento Feb 11, 2020

m2-community-project bot moved this from Review in Progress to Reviewer Approved in Pull Request Progress Feb 11, 2020

m2-community-project bot added Progress: approved and removed Progress: review labels Feb 11, 2020

dpatil-magento merged commit dbda97e into develop Feb 11, 2020

dpatil-magento deleted the supernova/360_accordion branch February 11, 2020 15:33

m2-community-project bot moved this from Reviewer Approved to Done in Pull Request Progress Feb 11, 2020

m2-community-project bot removed the Progress: approved label Feb 11, 2020

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Hide Accordion closed Sections instead of unmounting them #2149

Hide Accordion closed Sections instead of unmounting them #2149

supernova-at commented Feb 7, 2020 •

edited

PWAStudioBot commented Feb 7, 2020 •

edited

sirugh commented Feb 7, 2020

revanth0212 left a comment

schensley left a comment

supernova-at commented Feb 10, 2020

supernova-at Feb 10, 2020

supernova-at commented Feb 10, 2020

dpatil-magento commented Feb 10, 2020

supernova-at commented Feb 11, 2020 •

edited

dpatil-magento left a comment

		jest.mock('../giftCardSection', () => 'GiftCardSection');
		jest.mock('../GiftOptions', () => 'GiftOptions');

Hide Accordion closed Sections instead of unmounting them #2149

Hide Accordion closed Sections instead of unmounting them #2149

Conversation

supernova-at commented Feb 7, 2020 • edited

Description

Related Issue

Acceptance

Verification Stakeholders

Specification

Verification Steps

Screenshots / Screen Captures (if appropriate)

Checklist

PWAStudioBot commented Feb 7, 2020 • edited

sirugh commented Feb 7, 2020

revanth0212 left a comment

Choose a reason for hiding this comment

schensley left a comment

Choose a reason for hiding this comment

supernova-at commented Feb 10, 2020

supernova-at Feb 10, 2020

Choose a reason for hiding this comment

supernova-at commented Feb 10, 2020

dpatil-magento commented Feb 10, 2020

supernova-at commented Feb 11, 2020 • edited

dpatil-magento left a comment

Choose a reason for hiding this comment

supernova-at commented Feb 7, 2020 •

edited

PWAStudioBot commented Feb 7, 2020 •

edited

supernova-at commented Feb 11, 2020 •

edited