Onboarding [VR-Approval-CLI] To upload baseline screenshots #28294

Devjoyti-Barman · 2023-06-22T10:12:42Z

Previous Behavior

We used to upload baseline screenshots with old version of vr-approval-cli.

New Behavior

In this PR, we will use the new vr-approval-cli to upload the baseline screenshots.

Related Issue(s)

Fixes #

fabricteam · 2023-06-22T10:21:51Z

Perf Analysis (`@fluentui/react-components`)

No significant results to display.

All results

Scenario	Render type	Master Ticks	PR Ticks	Iterations
Avatar	mount	609	593	5000
Button	mount	288	292	5000
Field	mount	1032	1038	5000
FluentProvider	mount	637	640	5000
FluentProviderWithTheme	mount	73	80	10
FluentProviderWithTheme	virtual-rerender	66	68	10
FluentProviderWithTheme	virtual-rerender-with-unmount	74	71	10
InfoButton	mount	12	11	5000
MakeStyles	mount	848	845	50000
Persona	mount	1619	1595	5000
SpinButton	mount	1339	1337	5000

size-auditor · 2023-06-22T10:24:04Z

Asset size changes

Size Auditor did not detect a change in bundle size for any component!

Baseline commit: 302d94b596b3a81797b5c3207fcc13366d326e93 (build)

codesandbox-ci · 2023-06-22T10:24:46Z

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 9e01350:

Sandbox	Source
@fluentui/react 8 starter	Configuration
@fluentui/react-components 9 starter	Configuration

fabricteam · 2023-06-22T10:26:42Z

Perf Analysis (`@fluentui/react-northstar`)

Perf tests with no regressions

Scenario	Current PR Ticks	Baseline Ticks	Ratio
ButtonMinimalPerf.default	94	83	1.13:1
PortalMinimalPerf.default	89	81	1.1:1
ChatWithPopoverPerf.default	199	185	1.08:1
RefMinimalPerf.default	115	106	1.08:1
CarouselMinimalPerf.default	268	250	1.07:1
TableMinimalPerf.default	249	232	1.07:1
VideoMinimalPerf.default	449	420	1.07:1
AttachmentSlotsPerf.default	660	629	1.05:1
LoaderMinimalPerf.default	192	182	1.05:1
TreeMinimalPerf.default	482	460	1.05:1
AnimationMinimalPerf.default	301	289	1.04:1
ChatMinimalPerf.default	441	426	1.04:1
LabelMinimalPerf.default	226	217	1.04:1
RadioGroupMinimalPerf.default	266	255	1.04:1
StatusMinimalPerf.default	413	397	1.04:1
TextMinimalPerf.default	201	193	1.04:1
ToolbarMinimalPerf.default	545	523	1.04:1
DividerMinimalPerf.default	210	204	1.03:1
GridMinimalPerf.default	196	190	1.03:1
InputMinimalPerf.default	551	536	1.03:1
BoxMinimalPerf.default	192	188	1.02:1
ButtonOverridesMissPerf.default	656	642	1.02:1
FlexMinimalPerf.default	160	157	1.02:1
ListNestedPerf.default	318	311	1.02:1
ProviderMinimalPerf.default	197	193	1.02:1
ReactionMinimalPerf.default	214	209	1.02:1
TableManyItemsPerf.default	1127	1105	1.02:1
CardMinimalPerf.default	309	307	1.01:1
DatepickerMinimalPerf.default	3502	3477	1.01:1
DropdownManyItemsPerf.default	384	380	1.01:1
EmbedMinimalPerf.default	1897	1874	1.01:1
ListMinimalPerf.default	306	302	1.01:1
MenuButtonMinimalPerf.default	962	956	1.01:1
RosterPerf.default	1531	1520	1.01:1
CustomToolbarPrototype.default	1476	1456	1.01:1
HeaderMinimalPerf.default	209	209	1:1
HeaderSlotsPerf.default	478	479	1:1
ImageMinimalPerf.default	226	225	1:1
ItemLayoutMinimalPerf.default	709	712	1:1
MenuMinimalPerf.default	492	490	1:1
ProviderMergeThemesPerf.default	663	662	1:1
SegmentMinimalPerf.default	199	199	1:1
SplitButtonMinimalPerf.default	2227	2225	1:1
TooltipMinimalPerf.default	1240	1242	1:1
AccordionMinimalPerf.default	79	80	0.99:1
ButtonSlotsPerf.default	314	318	0.99:1
ChatDuplicateMessagesPerf.default	152	153	0.99:1
DropdownMinimalPerf.default	1415	1428	0.99:1
ListWith60ListItems.default	365	370	0.99:1
PopupMinimalPerf.default	340	345	0.99:1
TextAreaMinimalPerf.default	282	286	0.99:1
TreeWith60ListItems.default	88	89	0.99:1
AttachmentMinimalPerf.default	81	83	0.98:1
CheckboxMinimalPerf.default	1109	1136	0.98:1
ListCommonPerf.default	394	403	0.98:1
SliderMinimalPerf.default	746	759	0.98:1
DialogMinimalPerf.default	430	445	0.97:1
LayoutMinimalPerf.default	200	207	0.97:1
AlertMinimalPerf.default	152	158	0.96:1
IconMinimalPerf.default	378	394	0.96:1
FormMinimalPerf.default	207	218	0.95:1
SkeletonMinimalPerf.default	201	212	0.95:1
AvatarMinimalPerf.default	100	110	0.91:1

fabricteam · 2023-06-22T10:28:54Z

📊 Bundle size report

Unchanged fixtures

Package & Exports	Size (minified/GZIP)
`global-context` createContext	`510 B` `330 B`
`global-context` createContextSelector	`537 B` `342 B`
`priority-overflow` createOverflowManager	`4.248 kB` `1.671 kB`
`react-accordion` Accordion (including children components)	`88.26 kB` `26.718 kB`
`react-alert` Alert	`82.565 kB` `21.726 kB`
`react-avatar` Avatar	`47.713 kB` `14.513 kB`
`react-avatar` AvatarGroup	`15.695 kB` `6.314 kB`
`react-avatar` AvatarGroupItem	`63.889 kB` `18.993 kB`
`react-badge` Badge	`23.604 kB` `7.272 kB`
`react-badge` CounterBadge	`24.506 kB` `7.574 kB`
`react-badge` PresenceBadge	`22.227 kB` `7.881 kB`
`react-button` Button	`36.792 kB` `9.472 kB`
`react-button` CompoundButton	`43.946 kB` `10.952 kB`
`react-button` MenuButton	`40.978 kB` `10.669 kB`
`react-button` SplitButton	`49.211 kB` `12.232 kB`
`react-button` ToggleButton	`55.074 kB` `11.368 kB`
`react-card` Card - All	`89.33 kB` `25.271 kB`
`react-card` Card	`83.778 kB` `23.685 kB`
`react-card` CardFooter	`9.24 kB` `3.907 kB`
`react-card` CardHeader	`11.622 kB` `4.729 kB`
`react-card` CardPreview	`10.048 kB` `4.254 kB`
`react-checkbox` Checkbox	`33.198 kB` `10.718 kB`
`react-combobox` Combobox (including child components)	`87.15 kB` `28.117 kB`
`react-combobox` Dropdown (including child components)	`85.553 kB` `27.716 kB`
`react-components` react-components: Button, FluentProvider & webLightTheme	`65.175 kB` `17.915 kB`
`react-components` react-components: Accordion, Button, FluentProvider, Image, Menu, Popover	`210.657 kB` `58.768 kB`
`react-components` react-components: FluentProvider & webLightTheme	`36.409 kB` `12.003 kB`
`react-datepicker-compat` DatePicker Compat	`222.076 kB` `59.138 kB`
`react-dialog` Dialog (including children components)	`92.736 kB` `27.579 kB`
`react-divider` Divider	`17.49 kB` `6.364 kB`
`react-field` Field	`18.148 kB` `6.97 kB`
`react-image` Image	`11.561 kB` `4.637 kB`
`react-infobutton` InfoButton	`131.312 kB` `40.301 kB`
`react-infobutton` InfoLabel	`134.776 kB` `41.369 kB`
`react-input` Input	`24.232 kB` `7.781 kB`
`react-label` Label	`10.186 kB` `4.253 kB`
`react-link` Link	`12.782 kB` `5.247 kB`
`react-menu` Menu (including children components)	`132.65 kB` `40.603 kB`
`react-menu` Menu (including selectable components)	`135.414 kB` `41.094 kB`
`react-overflow` hooks only	`12.505 kB` `4.626 kB`
`react-persona` Persona	`55.267 kB` `16.525 kB`
`react-popover` Popover	`119.902 kB` `36.885 kB`
`react-portal` Portal	`11.935 kB` `4.421 kB`
`react-portal-compat` PortalCompatProvider	`6.473 kB` `2.196 kB`
`react-positioning` usePositioning	`24.249 kB` `8.856 kB`
`react-progress` ProgressBar	`13.941 kB` `5.498 kB`
`react-provider` FluentProvider	`18.129 kB` `6.73 kB`
`react-radio` Radio	`26.991 kB` `8.626 kB`
`react-radio` RadioGroup	`11.376 kB` `4.763 kB`
`react-select` Select	`24.929 kB` `8.713 kB`
`react-slider` Slider	`34.87 kB` `11.178 kB`
`react-spinbutton` SpinButton	`33.73 kB` `10.337 kB`
`react-spinner` Spinner	`21.376 kB` `7.029 kB`
`react-switch` Switch	`29.485 kB` `9.228 kB`
`react-table` DataGrid	`158.251 kB` `43.262 kB`
`react-table` Table (Primitives only)	`44.666 kB` `12.442 kB`
`react-table` Table as DataGrid	`132.365 kB` `33.849 kB`
`react-table` Table (Selection only)	`77.993 kB` `19.245 kB`
`react-table` Table (Sort only)	`76.978 kB` `18.973 kB`
`react-tags` InteractionTag	`28.378 kB` `8.549 kB`
`react-tags` Tag	`23.735 kB` `8.018 kB`
`react-tags` TagGroup	`69.142 kB` `20.294 kB`
`react-text` Text - Default	`12.574 kB` `4.982 kB`
`react-text` Text - Wrappers	`15.726 kB` `5.302 kB`
`react-textarea` Textarea	`27.703 kB` `9.126 kB`
`react-theme` Single theme token import	`69 B` `89 B`
`react-theme` Teams: all themes	`31.987 kB` `6.85 kB`
`react-theme` Teams: Light theme	`18.121 kB` `5.194 kB`
`react-toast` Toast (including Toaster)	`78.365 kB` `23.67 kB`
`react-tooltip` Tooltip	`47.44 kB` `16.645 kB`
`react-utilities` SSRProvider	`180 B` `159 B`

_{🤖 This report was generated against 302d94b596b3a81797b5c3207fcc13366d326e93}

fabricteam · 2023-06-22T10:32:51Z

🕵 FluentUI-v0 No visual regressions between this PR and main

fabricteam · 2023-06-22T10:34:05Z

🕵 fluentuiv9 No visual regressions between this PR and main

fabricteam · 2023-06-22T10:34:50Z

Perf Analysis (`@fluentui/react`)

No significant results to display.

All results

Scenario	Render type	Master Ticks	PR Ticks	Iterations
BaseButton	mount	628	597	5000
Breadcrumb	mount	1658	1675	1000
Checkbox	mount	1690	1676	5000
CheckboxBase	mount	1483	1460	5000
ChoiceGroup	mount	2916	2857	5000
ComboBox	mount	640	627	1000
CommandBar	mount	6164	6086	1000
ContextualMenu	mount	11947	11968	1000
DefaultButton	mount	746	737	5000
DetailsRow	mount	2150	2137	5000
DetailsRowFast	mount	2175	2231	5000
DetailsRowNoStyles	mount	1982	2015	5000
Dialog	mount	2592	2842	1000
DocumentCardTitle	mount	217	221	1000
Dropdown	mount	1953	1965	5000
FocusTrapZone	mount	1154	1120	5000
FocusZone	mount	1059	1052	5000
GroupedList	mount	40830	41072	2
GroupedList	virtual-rerender	19656	19766	2
GroupedList	virtual-rerender-with-unmount	50459	49631	2
GroupedListV2	mount	220	227	2
GroupedListV2	virtual-rerender	206	205	2
GroupedListV2	virtual-rerender-with-unmount	232	228	2
IconButton	mount	1086	1065	5000
Label	mount	333	325	5000
Layer	mount	2687	2720	5000
Link	mount	386	383	5000
MenuButton	mount	914	929	5000
MessageBar	mount	21295	21323	5000
Nav	mount	1916	1928	1000
OverflowSet	mount	768	737	5000
Panel	mount	1747	1759	1000
Persona	mount	737	741	1000
Pivot	mount	843	865	1000
PrimaryButton	mount	824	837	5000
Rating	mount	4514	4616	5000
SearchBox	mount	871	893	5000
Shimmer	mount	1867	1852	5000
Slider	mount	1311	1336	5000
SpinButton	mount	2852	2827	5000
Spinner	mount	378	386	5000
SplitButton	mount	1771	1843	5000
Stack	mount	410	412	5000
StackWithIntrinsicChildren	mount	853	849	5000
StackWithTextChildren	mount	2568	2582	5000
SwatchColorPicker	mount	5917	6040	5000
TagPicker	mount	1389	1438	5000
Text	mount	367	367	5000
TextField	mount	902	914	5000
ThemeProvider	mount	834	820	5000
ThemeProvider	virtual-rerender	580	569	5000
ThemeProvider	virtual-rerender-with-unmount	1248	1294	5000
Toggle	mount	585	591	5000
buttonNative	mount	185	187	5000

fabricteam · 2023-06-22T12:49:38Z

🕵 fluentuiv8 No visual regressions between this PR and main

download-vr-cli.yml

azure-pipelines.vrt-baseline.yml

TristanWatanabe · 2023-07-05T14:34:13Z

/azp run Fluent UI React - PR and CI

azure-pipelines · 2023-07-05T14:34:25Z

Azure Pipelines successfully started running 1 pipeline(s).

…r-approval-cli

TristanWatanabe · 2023-07-06T14:26:20Z

/azp run Fluent UI React - PR and CI

azure-pipelines · 2023-07-06T14:26:37Z

Azure Pipelines successfully started running 1 pipeline(s).

Devjoyti-Barman · 2023-07-06T15:29:03Z

/azp run Fluent UI React - PR and CI

azure-pipelines · 2023-07-06T15:29:09Z

Commenter does not have sufficient privileges for PR 28294 in repo microsoft/fluentui

TristanWatanabe · 2023-07-07T14:52:17Z

/azp run Fluent UI React - PR and CI

azure-pipelines · 2023-07-07T14:52:28Z

Azure Pipelines successfully started running 1 pipeline(s).

piyush-2712 · 2023-07-12T14:38:44Z

approved

* master: (105 commits) fix(react-card): use resolved slot instead of raw prop object (microsoft#28517) applying package updates Expose virtualize index/length for casual use (microsoft#28450) applying package updates chore: update projects to use `*` for inner workspace dependencies (microsoft#28426) Update react-components/react-portal README.md (microsoft#28520) [2 of N] Changes for Making first render cycle faster and fixing test cases (microsoft#27721) applying package updates docs(react-search): Add README, description, best practices (microsoft#28507) Fix contrast issues in V8 Fluent2 Dark Theme (microsoft#28486) [VR-Approval-Cli] Fixed the Bug & Added the pipelineID (microsoft#28506) [Onboarding] Generalized VR-Approval-Cli (microsoft#28255) Onboarding [VR-Approval-CLI] To upload baseline screenshots (microsoft#28294) feat: migrate private v9 react packages to new preview versioning scheme (microsoft#28474) applying package updates applying package updates chore: openItems property added to TreeOpenChangeData + minor internal improvements (microsoft#28491) Fix Virtualizers 'start buffer' overflow (microsoft#28437) docs(v0 migration): add note about nested popups (microsoft#28480) chore: move slots back to TreeItem and creates slot context (microsoft#28492) ...

Devjoyti-Barman added 2 commits June 22, 2023 09:54

Added the vr-approval-cli download file

9ed04dc

Moved the VR-Approval-Cli to upload baseline screenshots

3bb74ea

Devjoyti-Barman requested a review from a team as a code owner June 22, 2023 10:12

msft-fluent-ui-bot assigned ValentinaKozlova Jun 22, 2023

Devjoyti-Barman marked this pull request as draft June 22, 2023 10:12

ValentinaKozlova removed their assignment Jun 22, 2023

Devjoyti-Barman added 2 commits June 22, 2023 12:08

removed unused config

97962b2

removed the slash from screenshotDirectory

9b67284

TristanWatanabe reviewed Jun 23, 2023

View reviewed changes

download-vr-cli.yml Outdated Show resolved Hide resolved

TristanWatanabe reviewed Jun 23, 2023

View reviewed changes

azure-pipelines.vrt-baseline.yml Outdated Show resolved Hide resolved

Devjoyti-Barman added 2 commits July 3, 2023 17:28

move the clientId and apURL to pipeline variable

df95fa9

bump up the vr-approval-cli version

7dca905

Devjoyti-Barman marked this pull request as ready for review July 5, 2023 07:07

Merge branch 'master' into user/debarman/onboarding/baseline-upload/v…

4cb7d7b

…r-approval-cli

TristanWatanabe approved these changes Jul 6, 2023

View reviewed changes

Added the prettier

9e01350

piyush-2712 approved these changes Jul 12, 2023

View reviewed changes

TristanWatanabe merged commit f954a29 into microsoft:master Jul 12, 2023

Hotell mentioned this pull request Jul 18, 2024

ci(vrt): install vr-app as part of standard yarn install and remedy necessary duplication #32048

Merged

Onboarding [VR-Approval-CLI] To upload baseline screenshots #28294

Onboarding [VR-Approval-CLI] To upload baseline screenshots #28294

Uh oh!

Conversation

Devjoyti-Barman commented Jun 22, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Previous Behavior

New Behavior

Related Issue(s)

Uh oh!

fabricteam commented Jun 22, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Perf Analysis (@fluentui/react-components)

Uh oh!

size-auditor bot commented Jun 22, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Asset size changes

Uh oh!

codesandbox-ci bot commented Jun 22, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

fabricteam commented Jun 22, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Perf Analysis (@fluentui/react-northstar)

Uh oh!

fabricteam commented Jun 22, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

📊 Bundle size report

Uh oh!

fabricteam commented Jun 22, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

🕵 FluentUI-v0 No visual regressions between this PR and main

Uh oh!

fabricteam commented Jun 22, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

🕵 fluentuiv9 No visual regressions between this PR and main

Uh oh!

fabricteam commented Jun 22, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Perf Analysis (@fluentui/react)

Uh oh!

fabricteam commented Jun 22, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

🕵 fluentuiv8 No visual regressions between this PR and main

Uh oh!

Uh oh!

Uh oh!

TristanWatanabe commented Jul 5, 2023

Uh oh!

azure-pipelines bot commented Jul 5, 2023

Uh oh!

TristanWatanabe commented Jul 6, 2023

Uh oh!

azure-pipelines bot commented Jul 6, 2023

Uh oh!

Devjoyti-Barman commented Jul 6, 2023

Uh oh!

azure-pipelines bot commented Jul 6, 2023

Uh oh!

TristanWatanabe commented Jul 7, 2023

Uh oh!

azure-pipelines bot commented Jul 7, 2023

Uh oh!

piyush-2712 commented Jul 12, 2023

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

5 participants

Devjoyti-Barman commented Jun 22, 2023 •

edited

Loading

fabricteam commented Jun 22, 2023 •

edited

Loading

Perf Analysis (`@fluentui/react-components`)

size-auditor bot commented Jun 22, 2023 •

edited

Loading

codesandbox-ci bot commented Jun 22, 2023 •

edited

Loading

fabricteam commented Jun 22, 2023 •

edited

Loading

Perf Analysis (`@fluentui/react-northstar`)

fabricteam commented Jun 22, 2023 •

edited

Loading

fabricteam commented Jun 22, 2023 •

edited

Loading

fabricteam commented Jun 22, 2023 •

edited

Loading

fabricteam commented Jun 22, 2023 •

edited

Loading

Perf Analysis (`@fluentui/react`)

fabricteam commented Jun 22, 2023 •

edited

Loading