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

Dashboard: Telemetry Opt In Banner #4374

Merged
merged 34 commits into from Sep 10, 2020
Merged

Conversation

dmmulroy
Copy link
Contributor

@dmmulroy dmmulroy commented Sep 7, 2020

Summary

This adds an opt in banner for telemetry tracking that will display until the user either closes it or interacts with the telemetry opt in checkbox on the Edit Settings page/view. It will be visible on all top level views using the PageHeader shared component with the exception of the Edit Settings page/view.

Relevant Technical Choices

  • I wrote a useTelemetryOptIn hook so as not to duplicate logic between the banner and settings page.
  • I created a container component for the banner in the same file so we would not have to add bunch of telemetry props to the PageHeader component and end up editing all of our top level views.
  • I added the @testing-library/user-events dependency to circumvent the following issue: onChange is called when checkbox is disabled testing-library/react-testing-library#275
  • I added a MockApiProvider and renderWithProvider utils to make view integration tests easier.

User-facing changes

  • This adds a banner to the top of the page of both My Stories and Explore Templates that allows the user to opt in or close. Once closed or opted in on the Editor Settings page, the banner should not display again. In addition, when opting in using the banner the title should change to Your selection has been updated. Thank you for helping to improve the editor!.

banner

Testing Instructions

  • Verify that the unit and karma tests pass
  • Verify that the banner does not reappear after closing it
  • Verify that opting in using the banner changes the title header to Your selection has been updated. Thank you for helping to improve the editor. and unchecking it reverts it back.

#4226

@github-actions
Copy link
Contributor

github-actions bot commented Sep 7, 2020

Size Change: +2.65 kB (0%)

Total Size: 1.25 MB

Filename Size Change
assets/css/edit-story.css 909 B +613 B (67%) 🆘
assets/css/stories-dashboard.css 939 B +611 B (65%) 🆘
assets/js/stories-dashboard.js 590 kB +1.42 kB (0%)
ℹ️ View Unchanged
Filename Size Change
assets/css/web-stories-embed-block.css 515 B 0 B
assets/js/chunk-web-stories-template-0-********************.js 10.2 kB 0 B
assets/js/chunk-web-stories-template-1-********************.js 10.3 kB 0 B
assets/js/chunk-web-stories-template-2-********************.js 10 kB 0 B
assets/js/chunk-web-stories-template-3-********************.js 10.5 kB +1 B
assets/js/chunk-web-stories-template-4-********************.js 10.6 kB -1 B
assets/js/chunk-web-stories-template-5-********************.js 6.86 kB 0 B
assets/js/chunk-web-stories-template-6-********************.js 9.91 kB 0 B
assets/js/chunk-web-stories-template-7-********************.js 9.78 kB 0 B
assets/js/chunk-web-stories-textset-0-********************.js 1.25 kB 0 B
assets/js/edit-story.js 499 kB +2 B (0%)
assets/js/web-stories-activation-notice.js 63.6 kB 0 B
assets/js/web-stories-embed-block.js 17.4 kB 0 B

compressed-size-action

if (
bannerPreviouslyClosed || // The banner has been closed before
currentPath === APP_ROUTES.EDITOR_SETTINGS || // The user is on the settings page
!dataIsLoaded || // currentUser is not loaded yet
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is good to not show the banner prematurely if the user data hasn't come in yet.

@carloskelly13
Copy link
Contributor

Tests and functionality works. I think if we want to tie the dismissal of the banner to the user's persisted state over localStorage in the API then that would be a nice follow on evolution.

Also tested the Settings page too and that works well.

@codecov
Copy link

codecov bot commented Sep 8, 2020

Codecov Report

Merging #4374 into main will decrease coverage by 0.03%.
The diff coverage is 96.29%.

Impacted file tree graph

@@            Coverage Diff             @@
##             main    #4374      +/-   ##
==========================================
- Coverage   83.47%   83.43%   -0.04%     
==========================================
  Files         862      864       +2     
  Lines       15118    15165      +47     
==========================================
+ Hits        12619    12653      +34     
- Misses       2499     2512      +13     
Flag Coverage Δ
#karmatests 71.94% <96.22%> (-0.01%) ⬇️
#unittests 66.48% <84.90%> (+0.07%) ⬆️

Flags with carried forward coverage won't be shown. Click here to find out more.

Impacted Files Coverage Δ
...sets/src/dashboard/app/views/shared/pageHeading.js 100.00% <ø> (ø)
assets/src/dashboard/constants/index.js 100.00% <ø> (ø)
...rc/dashboard/app/views/shared/useTelemetryOptIn.js 92.30% <92.30%> (ø)
assets/src/dashboard/app/index.js 100.00% <100.00%> (ø)
...ts/src/dashboard/app/views/editorSettings/index.js 48.10% <100.00%> (+0.66%) ⬆️
.../src/dashboard/app/views/shared/telemetryBanner.js 100.00% <100.00%> (ø)
...ts/src/dashboard/components/pageStructure/index.js 90.90% <100.00%> (ø)
includes/Tracking.php 92.59% <100.00%> (+3.70%) ⬆️
assets/src/edit-story/utils/url.js 25.00% <0.00%> (-50.00%) ⬇️
...ets/src/edit-story/components/panels/link/index.js 81.03% <0.00%> (-10.35%) ⬇️
... and 3 more

Copy link
Contributor

@BrittanyIRL BrittanyIRL left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This works great! I know this is already moved to QA but I wanted to look anyway, sorry for the late review. Few teeny tiny nits if you feel like it, i'm not worried about them at all. I love the clean up you did for this, thank you for doing that.

@@ -0,0 +1,41 @@
/*
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

nit: typo on this file name (telemetyBanner) - missing the r

assets/src/dashboard/app/views/shared/telemetryBanner.js Outdated Show resolved Hide resolved
@swissspidy
Copy link
Collaborator

Note: I implemented ef06bf4 without knowing about #4423. Feel free to report if you wanna keep it separated.

Copy link
Contributor

@BrittanyIRL BrittanyIRL left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Re-tested this locally with all the updates to verify changes. Everything still looks good, Pascal's adds that eliminated the need for my other PR look great. All tests still pass locally.

Comment on lines +115 to +118
if (canManageSettings) {
fetchSettings();
}
}, [fetchSettings, canManageSettings]);
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

👍

@swissspidy swissspidy linked an issue Sep 10, 2020 that may be closed by this pull request
@swissspidy swissspidy merged commit 37abd15 into main Sep 10, 2020
@swissspidy swissspidy deleted the feature/4226-telemetry-banner branch September 10, 2020 17:12
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Group: Dashboard Group: Telemetry Type: Enhancement New feature or improvement of an existing feature
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Telemetry: Add banner for user opt-in
4 participants