Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Fix propagation of items and groups props from DetailsList through GroupedList #15321

Merged
merged 5 commits into from
Oct 1, 2020

Conversation

ThomasMichon
Copy link
Member

Description of changes

Fixed an issue in the recent rework to use getDerivedStateFromProps in the GroupedList component: the new function was inadvertently checking new input props values against themselves rather than the previous state. This issue is now fixed, and the DetailsList input state now propagates correctly through GroupedList.

Added some unit tests for DetailsList explicitly in order to validate that re-rendering a DetailsList with new inputs for items or groups properly updates for each type of transition.

Focus areas to test

Validate DetailsList when changing the items or groups props. Added a unit test explicitly for this.

@msft-github-bot
Copy link
Contributor

Thanks for submitting this change, but due to work currently in progress to prepare master for our version 8 beta release, we're asking contributors to either wait a couple weeks to submit changes (if it's not urgent) or submit to the new 7.0 branch (if it's urgent). See #15222 for more details. Thank you for your contribution and understanding!

@codesandbox-ci
Copy link

codesandbox-ci bot commented Sep 30, 2020

This pull request is automatically built and testable in CodeSandbox.

To see build info of the built libraries, click here or the icon next to each commit SHA.

Latest deployment of this branch, based on commit 88190ce:

Sandbox Source
Fluent UI Button Configuration
microsoft/fluentui: codesandbox-react-template Configuration
microsoft/fluentui: codesandbox-react-next-template Configuration
microsoft/fluentui: codesandbox-react-northstar-template Configuration

@size-auditor
Copy link

size-auditor bot commented Sep 30, 2020

Asset size changes

⚠️ Insufficient baseline data to detect size changes

Unable to find bundle size details for Baseline commit: f4b052d

Possible causes

  • The baseline build f4b052d is broken
  • The Size Auditor run for the baseline build f4b052d was not triggered

Recommendations

  • Please merge your branch for this Pull request with the latest master build and commit your changes once again

@msft-github-bot
Copy link
Contributor

Perf Analysis

No significant results to display.

All results

Scenario Render type 7.0 Ticks PR Ticks Iterations Status
Avatar mount 795 808 5000
BaseButton mount 890 890 5000
Breadcrumb mount 41383 40816 5000
ButtonNext mount 568 580 5000
Checkbox mount 1558 1506 5000
CheckboxBase mount 1277 1276 5000
ChoiceGroup mount 4907 4902 5000
ComboBox mount 924 914 1000
CommandBar mount 7521 7521 1000
ContextualMenu mount 13201 13259 1000
DefaultButton mount 1089 1085 5000
DetailsRow mount 3528 3595 5000
DetailsRowFast mount 3564 3688 5000
DetailsRowNoStyles mount 3405 3387 5000
Dialog mount 1453 1503 1000
DocumentCardTitle mount 1839 1818 1000
Dropdown mount 2513 2516 5000
FocusTrapZone mount 1721 1708 5000
FocusZone mount 1805 1760 5000
IconButton mount 1712 1689 5000
Label mount 337 331 5000
Layer mount 1883 1915 5000
Link mount 442 446 5000
MenuButton mount 1417 1451 5000
MessageBar mount 2065 2048 5000
Nav mount 3186 3189 1000
OverflowSet mount 1446 1376 5000
Panel mount 1440 1396 1000
Persona mount 806 829 1000
Pivot mount 1431 1393 1000
PrimaryButton mount 1260 1250 5000
Rating mount 7443 7429 5000
SearchBox mount 1237 1226 5000
Shimmer mount 2493 2463 5000
Slider mount 1425 1453 5000
SpinButton mount 4774 4930 5000
Spinner mount 412 413 5000
SplitButton mount 3065 3092 5000
Stack mount 499 498 5000
StackWithIntrinsicChildren mount 1815 1850 5000
StackWithTextChildren mount 4852 4803 5000
SwatchColorPicker mount 10054 10182 5000
TagPicker mount 2762 2750 5000
TeachingBubble mount 49688 49229 5000
Text mount 407 423 5000
TextField mount 1346 1351 5000
ThemeProvider mount 3108 3054 5000
ThemeProvider virtual-rerender 604 591 5000
Toggle mount 852 814 5000
button mount 124 119 5000

Perf Analysis (Fluent)

Perf comparison
Status Scenario Fluent TPI Fabric TPI Ratio Iterations Ticks
🎯 Avatar.Fluent 0.44 0.48 0.92:1 2000 884
🦄 Button.Fluent 0.12 0.19 0.63:1 5000 588
🔧 Checkbox.Fluent 0.62 0.34 1.82:1 1000 615
🎯 Dialog.Fluent 0.16 0.22 0.73:1 5000 811
🔧 Dropdown.Fluent 2.89 0.46 6.28:1 1000 2894
🔧 Icon.Fluent 0.14 0.06 2.33:1 5000 714
🎯 Image.Fluent 0.08 0.11 0.73:1 5000 392
🔧 Slider.Fluent 1.57 0.36 4.36:1 1000 1568
🔧 Text.Fluent 0.07 0.03 2.33:1 5000 354
🦄 Tooltip.Fluent 0.11 15.85 0.01:1 5000 573

🔧 Needs work     🎯 On target     🦄 Amazing

Perf tests with no regressions
Scenario Current PR Ticks Baseline Ticks Ratio
AccordionMinimalPerf.default 165 0 Infinity:1
AlertMinimalPerf.default 321 0 Infinity:1
AnimationMinimalPerf.default 430 0 Infinity:1
AttachmentMinimalPerf.default 154 0 Infinity:1
AvatarMinimalPerf.default 490 0 Infinity:1
BoxMinimalPerf.default 376 0 Infinity:1
ButtonMinimalPerf.default 189 0 Infinity:1
ButtonOverridesMissPerf.default 1651 0 Infinity:1
ButtonSlotsPerf.default 608 0 Infinity:1
ButtonUseCssPerf.default 842 0 Infinity:1
ButtonUseCssNestingPerf.default 1085 0 Infinity:1
CardMinimalPerf.default 574 0 Infinity:1
ChatMinimalPerf.default 615 0 Infinity:1
CheckboxMinimalPerf.default 2922 0 Infinity:1
DialogMinimalPerf.default 798 0 Infinity:1
DropdownManyItemsPerf.default 751 0 Infinity:1
EmbedMinimalPerf.default 1937 0 Infinity:1
FlexMinimalPerf.default 305 0 Infinity:1
GridMinimalPerf.default 364 0 Infinity:1
HeaderMinimalPerf.default 384 0 Infinity:1
HeaderSlotsPerf.default 830 0 Infinity:1
InputMinimalPerf.default 1298 0 Infinity:1
ItemLayoutMinimalPerf.default 1296 0 Infinity:1
LabelMinimalPerf.default 447 0 Infinity:1
ListCommonPerf.default 639 0 Infinity:1
ListMinimalPerf.default 500 0 Infinity:1
ListWith60ListItems.default 971 0 Infinity:1
LoaderMinimalPerf.default 755 0 Infinity:1
MenuMinimalPerf.default 893 0 Infinity:1
MenuButtonMinimalPerf.default 1636 0 Infinity:1
PopupMinimalPerf.default 747 0 Infinity:1
PortalMinimalPerf.default 160 0 Infinity:1
RadioGroupMinimalPerf.default 438 0 Infinity:1
RefMinimalPerf.default 240 0 Infinity:1
SkeletonMinimalPerf.default 427 0 Infinity:1
SliderMinimalPerf.default 1585 0 Infinity:1
StatusMinimalPerf.default 737 0 Infinity:1
IconMinimalPerf.default 680 0 Infinity:1
TableManyItemsPerf.default 2144 0 Infinity:1
TableMinimalPerf.default 434 0 Infinity:1
TextMinimalPerf.default 361 0 Infinity:1
TextAreaMinimalPerf.default 510 0 Infinity:1
CustomToolbarPrototype.default 3824 0 Infinity:1
ToolbarMinimalPerf.default 968 0 Infinity:1
TooltipMinimalPerf.default 799 0 Infinity:1
TreeMinimalPerf.default 872 0 Infinity:1
TreeWith60ListItems.default 213 0 Infinity:1
VideoMinimalPerf.default 628 0 Infinity:1
Avatar.Fluent 884 0 Infinity:1
Button.Fluent 588 0 Infinity:1
Checkbox.Fluent 615 0 Infinity:1
Dialog.Fluent 811 0 Infinity:1
Dropdown.Fluent 2894 0 Infinity:1
Image.Fluent 392 0 Infinity:1
Slider.Fluent 1568 0 Infinity:1
Text.Fluent 354 0 Infinity:1
Tooltip.Fluent 573 0 Infinity:1
SplitButtonMinimalPerf.default 3720 1 3720:1
DropdownMinimalPerf.default 2934 1 2934:1
ProviderMergeThemesPerf.default 2072 1 2072:1
AttachmentSlotsPerf.default 1173 1 1173:1
ProviderMinimalPerf.default 993 1 993:1
Icon.Fluent 714 1 714:1
ListNestedPerf.default 584 1 584:1
ChatWithPopoverPerf.default 482 1 482:1
FormMinimalPerf.default 454 1 454:1
CarouselMinimalPerf.default 451 1 451:1
LayoutMinimalPerf.default 432 1 432:1
ReactionMinimalPerf.default 428 1 428:1
ChatDuplicateMessagesPerf.default 419 1 419:1
DividerMinimalPerf.default 382 1 382:1
ImageMinimalPerf.default 380 1 380:1
SegmentMinimalPerf.default 374 1 374:1

@ecraig12345 ecraig12345 added the needs cherry-pick Temporary label for PRs which may need to be cherry-picked to master label Sep 30, 2020
@msft-github-bot
Copy link
Contributor

Hello @ThomasMichon!

Because this pull request has the AutoMerge label, I will be glad to assist with helping to merge this pull request once all check-in policies pass.

Do note that I've been instructed to only help merge pull requests of this repository that have been opened for at least 8 hours, a condition that will be fulfilled in about 3 hours 20 minutes. No worries though, I will be back when the time is right! 😉

p.s. you can customize the way I help with merging this pull request, such as holding this pull request until a specific person approves. Simply @mention me (@msft-github-bot) and give me an instruction to get started! Learn more here.

@ThomasMichon ThomasMichon merged commit 93655f3 into microsoft:7.0 Oct 1, 2020
@msft-github-bot
Copy link
Contributor

🎉office-ui-fabric-react@v7.144.1 has been released which incorporates this pull request.:tada:

Handy links:

msft-github-bot pushed a commit that referenced this pull request Oct 20, 2020
…oupedList (#15605)

<!--
!!!!!!! IMPORTANT !!!!!!!

Due to work we're currently doing to prepare master branch for our version 8 beta release,
please hold-off submitting the PR until around October 12 if it's not urgent.
If it is urgent, please submit the PR targeting the 7.0 branch.

This change does not apply to react-northstar contributors.

See #15222 for more details. Sorry for the inconvenience and short notice.
-->

#### Pull request checklist

- [ ] Addresses an existing issue: Fixes #0000
- [x] Include a change request file using `$ yarn change`

#### Description of changes

_Cherry-pick of #15321._

_Original PR description:_

Fixed an issue in the recent rework to use `getDerivedStateFromProps` in the `GroupedList` component: the new function was inadvertently checking new input props values *against themselves* rather than the previous state. This issue is now fixed, and the `DetailsList` input state now propagates correctly through `GroupedList`.

Added some unit tests for `DetailsList` explicitly in order to validate that re-rendering a `DetailsList` with new inputs for `items` or `groups` properly updates for each type of transition.

#### Focus areas to test

Validate `DetailsList` when changing the `items` or `groups` props. Added a unit test explicitly for this.
SethDonohue pushed a commit to SethDonohue/fluentui that referenced this pull request Nov 2, 2020
…oupedList (microsoft#15605)

<!--
!!!!!!! IMPORTANT !!!!!!!

Due to work we're currently doing to prepare master branch for our version 8 beta release,
please hold-off submitting the PR until around October 12 if it's not urgent.
If it is urgent, please submit the PR targeting the 7.0 branch.

This change does not apply to react-northstar contributors.

See microsoft#15222 for more details. Sorry for the inconvenience and short notice.
-->

#### Pull request checklist

- [ ] Addresses an existing issue: Fixes #0000
- [x] Include a change request file using `$ yarn change`

#### Description of changes

_Cherry-pick of microsoft#15321._

_Original PR description:_

Fixed an issue in the recent rework to use `getDerivedStateFromProps` in the `GroupedList` component: the new function was inadvertently checking new input props values *against themselves* rather than the previous state. This issue is now fixed, and the `DetailsList` input state now propagates correctly through `GroupedList`.

Added some unit tests for `DetailsList` explicitly in order to validate that re-rendering a `DetailsList` with new inputs for `items` or `groups` properly updates for each type of transition.

#### Focus areas to test

Validate `DetailsList` when changing the `items` or `groups` props. Added a unit test explicitly for this.
@ecraig12345 ecraig12345 removed the needs cherry-pick Temporary label for PRs which may need to be cherry-picked to master label Jan 26, 2021
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

6 participants