Add screener workflows by ralucapelin · Pull Request #24106 · microsoft/fluentui

ralucapelin · 2022-07-27T12:19:39Z

Current Behavior

Screener checks are run automatically through an Azure pipeline when a new PR is opened.

Azure pipelines does not allow manual triggering of pipelines so the screener checks are run even though it may not be the case for them to be run for one specific PR.

More resources are used without the ability run manually trigger screener checks, which are both expensive and time-consuming.

New Behavior

Screener checks can be run manually using two GitHub Actions workflows;

There are two workflows that contribute to running the screener checks:

screener-build.yaml => exports environment variables and storybooks as artifacts for the second workflow;
screener-run.yaml => uses the artifacts uploaded by the former workflow to upload the screener tests to the Azure blob storage and perform the actual tests.

In order to download the up-to-date artifacts, the screener-run.yaml is triggered by the completion of the screener-build.yaml, and the screener-build.yaml will be triggered by the workflow_dispatch event, which allows the workflow to be triggered manually either by using the GitHub UI:

or by using the GitHub REST API.[1]

[1] https://docs.github.com/en/rest/actions/workflows#create-a-workflow-dispatch-event

Note: environment variables export is a temporary solution

Related Issue(s)

Addresses #23903

codesandbox-ci · 2022-07-27T12:26:55Z

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 356967f:

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

size-auditor · 2022-07-27T12:33:37Z

Asset size changes

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

Baseline commit: a0d25e46c3e8514a2f6a1509412678ce6e8badaa (build)

fabricteam · 2022-07-27T12:35:29Z

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

No significant results to display.

All results

Scenario	Render type	Master Ticks	PR Ticks	Iterations
Avatar	mount	1263	1271	5000
Button	mount	878	889	5000
FluentProvider	mount	1484	1484	5000
FluentProviderWithTheme	mount	580	567	10
FluentProviderWithTheme	virtual-rerender	533	531	10
FluentProviderWithTheme	virtual-rerender-with-unmount	576	562	10
MakeStyles	mount	1983	2006	50000
SpinButton	mount	2424	2438	5000

fabricteam · 2022-07-27T12:39:27Z

📊 Bundle size report

Unchanged fixtures

Package & Exports	Size (minified/GZIP)
`global-context` createContext	`533 B` `341 B`
`global-context` createContextSelector	`554 B` `348 B`
`priority-overflow` createOverflowManager	`2.936 kB` `1.212 kB`
`react-accordion` Accordion (including children components)	`78.972 kB` `24.012 kB`
`react-alert` Alert	`82.123 kB` `20.499 kB`
`react-avatar` Avatar	`48.533 kB` `13.78 kB`
`react-avatar` AvatarGroup	`138.314 kB` `40.998 kB`
`react-avatar` AvatarGroupItem	`68.248 kB` `19.109 kB`
`react-badge` Badge	`22.494 kB` `7.157 kB`
`react-badge` CounterBadge	`23.397 kB` `7.449 kB`
`react-badge` PresenceBadge	`23.947 kB` `7.022 kB`
`react-button` Button	`35.716 kB` `9.503 kB`
`react-button` CompoundButton	`42.789 kB` `10.738 kB`
`react-button` MenuButton	`38.334 kB` `10.368 kB`
`react-button` SplitButton	`45.667 kB` `11.715 kB`
`react-button` ToggleButton	`50.941 kB` `10.924 kB`
`react-card` Card - All	`67.014 kB` `19.206 kB`
`react-card` Card	`62.696 kB` `18.126 kB`
`react-card` CardFooter	`8.461 kB` `3.555 kB`
`react-card` CardHeader	`9.504 kB` `3.896 kB`
`react-card` CardPreview	`8.562 kB` `3.61 kB`
`react-combobox` Combobox (including child components)	`74.425 kB` `23.999 kB`
`react-combobox` Dropdown (including child components)	`73.938 kB` `23.991 kB`
`react-components` react-components: Accordion, Button, FluentProvider, Image, Menu, Popover	`190.54 kB` `52.487 kB`
`react-components` react-components: FluentProvider & webLightTheme	`32.036 kB` `10.577 kB`
`react-dialog` Dialog (including children components)	`83.707 kB` `25.013 kB`
`react-divider` Divider	`16.321 kB` `5.837 kB`
`react-image` Image	`10.68 kB` `4.215 kB`
`react-input` Input	`23.554 kB` `7.644 kB`
`react-label` Label	`9.238 kB` `3.815 kB`
`react-link` Link	`12.082 kB` `4.88 kB`
`react-menu` Menu (including children components)	`117.801 kB` `35.808 kB`
`react-menu` Menu (including selectable components)	`121 kB` `36.288 kB`
`react-overflow` hooks only	`10.839 kB` `4.146 kB`
`react-popover` Popover	`105.483 kB` `32.077 kB`
`react-portal` Portal	`9.844 kB` `3.677 kB`
`react-positioning` usePositioning	`23.854 kB` `8.299 kB`
`react-provider` FluentProvider	`14.913 kB` `5.658 kB`
`react-radio` Radio	`30.481 kB` `10.406 kB`
`react-radio` RadioGroup	`14.319 kB` `5.711 kB`
`react-select` Select	`20.746 kB` `7.299 kB`
`react-slider` Slider	`26.136 kB` `8.387 kB`
`react-spinbutton` SpinButton	`44.227 kB` `12.492 kB`
`react-spinner` Spinner	`19.932 kB` `6.363 kB`
`react-switch` Switch	`26.951 kB` `8.688 kB`
`react-text` Text - Default	`11.572 kB` `4.537 kB`
`react-text` Text - Wrappers	`14.882 kB` `4.977 kB`
`react-textarea` Textarea	`23.078 kB` `7.707 kB`
`react-theme` Single theme token import	`69 B` `89 B`
`react-theme` Teams: all themes	`28.995 kB` `6.215 kB`
`react-theme` Teams: Light theme	`16.973 kB` `4.86 kB`
`react-tooltip` Tooltip	`44.853 kB` `15.406 kB`
`react-utilities` SSRProvider	`189 B` `161 B`

_{🤖 This report was generated against a0d25e46c3e8514a2f6a1509412678ce6e8badaa}

fabricteam · 2022-07-27T12:43:40Z

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

Perf tests with no regressions

Scenario	Current PR Ticks	Baseline Ticks	Ratio
AccordionMinimalPerf.default	127	116	1.09:1
TreeWith60ListItems.default	137	126	1.09:1
CarouselMinimalPerf.default	409	378	1.08:1
ChatDuplicateMessagesPerf.default	249	231	1.08:1
SkeletonMinimalPerf.default	291	278	1.05:1
IconMinimalPerf.default	517	492	1.05:1
BoxMinimalPerf.default	282	272	1.04:1
ButtonSlotsPerf.default	465	445	1.04:1
RefMinimalPerf.default	197	189	1.04:1
ChatMinimalPerf.default	624	607	1.03:1
GridMinimalPerf.default	283	274	1.03:1
ListNestedPerf.default	458	446	1.03:1
ListWith60ListItems.default	509	495	1.03:1
MenuMinimalPerf.default	715	694	1.03:1
RosterPerf.default	936	912	1.03:1
ReactionMinimalPerf.default	311	303	1.03:1
SegmentMinimalPerf.default	286	279	1.03:1
VideoMinimalPerf.default	548	530	1.03:1
ButtonMinimalPerf.default	134	131	1.02:1
DividerMinimalPerf.default	291	286	1.02:1
FlexMinimalPerf.default	238	234	1.02:1
HeaderMinimalPerf.default	302	296	1.02:1
LayoutMinimalPerf.default	295	288	1.02:1
ListMinimalPerf.default	429	422	1.02:1
PopupMinimalPerf.default	529	517	1.02:1
ToolbarMinimalPerf.default	803	791	1.02:1
TooltipMinimalPerf.default	946	927	1.02:1
TreeMinimalPerf.default	672	660	1.02:1
AttachmentSlotsPerf.default	915	902	1.01:1
AvatarMinimalPerf.default	155	153	1.01:1
CardMinimalPerf.default	462	457	1.01:1
CheckboxMinimalPerf.default	2244	2230	1.01:1
DropdownMinimalPerf.default	2647	2618	1.01:1
EmbedMinimalPerf.default	3457	3417	1.01:1
FormMinimalPerf.default	332	328	1.01:1
ImageMinimalPerf.default	298	295	1.01:1
InputMinimalPerf.default	1078	1070	1.01:1
MenuButtonMinimalPerf.default	1416	1401	1.01:1
ProviderMergeThemesPerf.default	1054	1048	1.01:1
ProviderMinimalPerf.default	336	333	1.01:1
SliderMinimalPerf.default	1434	1426	1.01:1
TableMinimalPerf.default	322	320	1.01:1
TextMinimalPerf.default	285	283	1.01:1
AnimationMinimalPerf.default	459	461	1:1
ButtonOverridesMissPerf.default	1246	1243	1:1
DialogMinimalPerf.default	637	639	1:1
DropdownManyItemsPerf.default	563	561	1:1
ItemLayoutMinimalPerf.default	982	986	1:1
LoaderMinimalPerf.default	567	566	1:1
RadioGroupMinimalPerf.default	364	364	1:1
SplitButtonMinimalPerf.default	3691	3679	1:1
TableManyItemsPerf.default	1596	1592	1:1
LabelMinimalPerf.default	316	319	0.99:1
PortalMinimalPerf.default	141	142	0.99:1
AttachmentMinimalPerf.default	121	123	0.98:1
DatepickerMinimalPerf.default	4674	4754	0.98:1
HeaderSlotsPerf.default	606	618	0.98:1
ListCommonPerf.default	520	528	0.98:1
StatusMinimalPerf.default	554	567	0.98:1
TextAreaMinimalPerf.default	396	406	0.98:1
CustomToolbarPrototype.default	2270	2307	0.98:1
AlertMinimalPerf.default	218	224	0.97:1
ChatWithPopoverPerf.default	305	313	0.97:1

fabricteam · 2022-07-27T12:53:25Z

Perf Analysis (`@fluentui/react`)

No significant results to display.

All results

Scenario	Render type	Master Ticks	PR Ticks	Iterations
BaseButton	mount	792	809	5000
Breadcrumb	mount	2332	2342	1000
Checkbox	mount	2224	2230	5000
CheckboxBase	mount	1955	1952	5000
ChoiceGroup	mount	4094	4073	5000
ComboBox	mount	850	846	1000
CommandBar	mount	9183	9082	1000
ContextualMenu	mount	10101	10162	1000
DefaultButton	mount	986	997	5000
DetailsRow	mount	3355	3322	5000
DetailsRowFast	mount	3388	3249	5000
DetailsRowNoStyles	mount	3169	3145	5000
Dialog	mount	2456	2451	1000
DocumentCardTitle	mount	144	132	1000
Dropdown	mount	2877	2887	5000
FocusTrapZone	mount	1634	1637	5000
FocusZone	mount	1551	1611	5000
IconButton	mount	1512	1528	5000
Label	mount	309	303	5000
Layer	mount	2770	2719	5000
Link	mount	418	403	5000
MenuButton	mount	1272	1296	5000
MessageBar	mount	1852	1833	5000
Nav	mount	2865	2864	1000
OverflowSet	mount	960	949	5000
Panel	mount	1901	1912	1000
Persona	mount	875	877	1000
Pivot	mount	1247	1240	1000
PrimaryButton	mount	1124	1128	5000
Rating	mount	6674	6680	5000
SearchBox	mount	1153	1117	5000
Shimmer	mount	2135	2162	5000
Slider	mount	1656	1681	5000
SpinButton	mount	4386	4372	5000
Spinner	mount	374	365	5000
SplitButton	mount	2790	2761	5000
Stack	mount	448	443	5000
StackWithIntrinsicChildren	mount	2014	1998	5000
StackWithTextChildren	mount	4545	4517	5000
SwatchColorPicker	mount	10057	10060	5000
TagPicker	mount	2345	2323	5000
TeachingBubble	mount	80567	80675	5000
Text	mount	368	358	5000
TextField	mount	1222	1208	5000
ThemeProvider	mount	1030	1038	5000
ThemeProvider	virtual-rerender	588	578	5000
ThemeProvider	virtual-rerender-with-unmount	1532	1538	5000
Toggle	mount	695	694	5000
buttonNative	mount	117	122	5000

.github/workflows/screener-run.yml

azure-pipelines.yml

scripts/screener/screener.runner.ts

.github/workflows/screener-run.yml

Co-authored-by: ling1726 <lingfangao@hotmail.com>

Hotell · 2022-07-28T12:47:26Z

Azure pipelines screener check jobs do not exist anymore.

Not sure if that;s true as this PR doesn't contain removal of those from azure-pipelines.yml

scripts/screener/screener.runner.ts

.github/workflows/screener-run.yml

Hotell · 2022-07-28T12:40:20Z

.github/workflows/screener-build.yml

+          echo "SHELLOPTS $SHELLOPTS" ;\
+
+      - name: yarn
+        run: ./yarn-ci.sh


can we install dependencies only once ? with this workflows it will happen 3x2=6 times. not sure if it will be cached, if yes disregard.

Each job is run by a different runner so that the jobs within the same workflow can run in parallel, so dependencies in this case (where jobs do not depend on each other) cannot share dependencies between them.

gotcha.

additional question: can't we have a job as pre-requirement for all this parallel ones that would install those deps ?

There are composite actions [1] that allow re-using the same steps for multiple jobs, they would still need to be used as a step in each job and may require some additional approvals since a composite action is not part of the approved actions from the GitHub marketplace as far as I understand.

[1] https://github.blog/changelog/2021-08-25-github-actions-reduce-duplication-with-action-composition/

.github/workflows/screener-build.yml

…ft/fluentui into screenerChecksTransition

ralucapelin · 2022-07-28T13:50:13Z

Azure pipelines screener check jobs do not exist anymore.

Not sure if that;s true as this PR doesn't contain removal of those from azure-pipelines.yml

That's correct, the jobs removal will be done in a follow-up PR when the workflows will be enabled as well

Hotell · 2022-07-29T08:05:17Z

Azure pipelines screener check jobs do not exist anymore.

Not sure if that;s true as this PR doesn't contain removal of those from azure-pipelines.yml

That's correct, the jobs removal will be done in a follow-up PR when the workflows will be enabled as well

let's remove it from PR description then to not confuse folks. ty

Add screener workflows

090e9f1

msft-fluent-ui-bot assigned TristanWatanabe Jul 27, 2022

Remove screener jobs from pipeline

a9a8f47

Additional documentation

924bbd2

msft-fluent-ui-bot added the Area: Build System label Jul 27, 2022

Add checkout action option

8974b12

ling1726 reviewed Jul 27, 2022

View reviewed changes

.github/workflows/screener-run.yml Outdated Show resolved Hide resolved

ling1726 reviewed Jul 27, 2022

View reviewed changes

.github/workflows/screener-run.yml Outdated Show resolved Hide resolved

Make changes suggested in PR review

2a371d0

ling1726 reviewed Jul 28, 2022

View reviewed changes

.github/workflows/screener-run.yml Outdated Show resolved Hide resolved

Add change suggested by review

8ea283b

ling1726 reviewed Jul 28, 2022

View reviewed changes

azure-pipelines.yml Show resolved Hide resolved

ling1726 reviewed Jul 28, 2022

View reviewed changes

scripts/screener/screener.runner.ts Outdated Show resolved Hide resolved

Raluca Pelin added 2 commits July 28, 2022 11:18

Restore pipeline from master branch

8cd922d

Restore fetch path from master branch

1cc9223

ralucapelin marked this pull request as ready for review July 28, 2022 09:38

ralucapelin requested a review from a team as a code owner July 28, 2022 09:38

ling1726 reviewed Jul 28, 2022

View reviewed changes

.github/workflows/screener-run.yml Outdated Show resolved Hide resolved

Update step name

9304e1d

Co-authored-by: ling1726 <lingfangao@hotmail.com>

ling1726 requested a review from Hotell July 28, 2022 12:40

Hotell reviewed Jul 28, 2022

View reviewed changes

Hotell mentioned this pull request Jul 28, 2022

[Feature]: Enable screener checks to run from the screener proxy #23903

Closed

4 tasks

Make changes proposed in review

05814f9

Merge branch 'screenerChecksTransition' of https://github.com/microso…

ebc5667

…ft/fluentui into screenerChecksTransition

Fix typo for environment variable value

356967f

ralucapelin mentioned this pull request Aug 1, 2022

Screener cleanup #24170

Closed

ling1726 approved these changes Aug 2, 2022

View reviewed changes

ralucapelin merged commit 4057e29 into master Aug 2, 2022

ralucapelin deleted the screenerChecksTransition branch August 2, 2022 08:19

ralucapelin mentioned this pull request Aug 2, 2022

Enable screener workflows #24178

Merged

Conversation

ralucapelin commented Jul 27, 2022 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Current Behavior

New Behavior

Related Issue(s)

Uh oh!

codesandbox-ci bot commented Jul 27, 2022 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

size-auditor bot commented Jul 27, 2022 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Asset size changes

Uh oh!

fabricteam commented Jul 27, 2022 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Perf Analysis (@fluentui/react-components)

Uh oh!

fabricteam commented Jul 27, 2022 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

📊 Bundle size report

Uh oh!

fabricteam commented Jul 27, 2022 • 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 Jul 27, 2022 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Perf Analysis (@fluentui/react)

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Hotell commented Jul 28, 2022

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Hotell Jul 28, 2022

Choose a reason for hiding this comment

Uh oh!

ralucapelin Jul 28, 2022

Choose a reason for hiding this comment

Uh oh!

Hotell Jul 29, 2022

Choose a reason for hiding this comment

Uh oh!

ralucapelin Jul 29, 2022

Choose a reason for hiding this comment

Uh oh!

Uh oh!

ralucapelin commented Jul 28, 2022

Uh oh!

Hotell commented Jul 29, 2022

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

6 participants

ralucapelin commented Jul 27, 2022 •

edited

Loading

codesandbox-ci bot commented Jul 27, 2022 •

edited

Loading

size-auditor bot commented Jul 27, 2022 •

edited

Loading

fabricteam commented Jul 27, 2022 •

edited

Loading

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

fabricteam commented Jul 27, 2022 •

edited

Loading

fabricteam commented Jul 27, 2022 •

edited

Loading

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

fabricteam commented Jul 27, 2022 •

edited

Loading

Perf Analysis (`@fluentui/react`)