Skip to content

feat(replays): Updated player control tooltips and icons#36516

Merged
ryan953 merged 10 commits intogetsentry:masterfrom
thisdot:feat/replays/36477-player-icons
Jul 13, 2022
Merged

feat(replays): Updated player control tooltips and icons#36516
ryan953 merged 10 commits intogetsentry:masterfrom
thisdot:feat/replays/36477-player-icons

Conversation

@danecando
Copy link
Copy Markdown
Contributor

@danecando danecando commented Jul 11, 2022

Changes

  • Updates tooltip names and aria-labels for replay player controls
  • Makes use of new Rewind10, Expand, and Contract icons in the player controls

Screen Shot 2022-07-13 at 12 26 23 PM

Closes #36527
Closes #36477

Legal Boilerplate

Look, I get it. The entity doing business as "Sentry" was incorporated in the State of Delaware in 2015 as Functional Software, Inc. and is gonna need some rights from me in order to utilize my contributions in this here PR. So here's the deal: I retain all rights, title and interest in and to my contributions, and by keeping this boilerplate intact I confirm that Sentry can use, modify, copy, and redistribute my contributions, under Sentry's choice of terms.

@danecando danecando requested a review from a team July 11, 2022 15:39
@danecando danecando requested a review from a team as a code owner July 11, 2022 15:39
@github-actions github-actions bot added the Scope: Frontend Automatically applied to PRs that change frontend components label Jul 11, 2022
@danecando danecando changed the title feat: Updated player control icons feat(replays): Updated player control icons Jul 11, 2022
@danecando danecando marked this pull request as draft July 12, 2022 13:46
Since some of these icons already exist, I prefixed each one with 'Replayer' to indicate that they are for the Replay Player component
@danecando danecando marked this pull request as ready for review July 12, 2022 14:28
@danecando
Copy link
Copy Markdown
Contributor Author

danecando commented Jul 12, 2022

Added all the new player icons that are used as a set. If we don't love them I can revert back to just the new icons and remove the prefix. Looking at the play and next icons they look pretty similar to me.

@ryan953 ryan953 requested a review from Jesse-Box July 12, 2022 16:53
@danecando
Copy link
Copy Markdown
Contributor Author

danecando commented Jul 12, 2022

After chatting with Jesse I will be pulling out all the new icons. Someone will add the few that are accepted for now in a separate PR. Might just make this a PR for the labels.

@danecando danecando changed the title feat(replays): Updated player control icons feat(replays): Updated player control tooltips Jul 12, 2022
@ryan953 ryan953 added the Trigger: getsentry tests Once code is reviewed: apply label to PR to trigger getsentry tests label Jul 12, 2022
@ryan953
Copy link
Copy Markdown
Member

ryan953 commented Jul 12, 2022

all the conflicts with #36483

@github-actions github-actions bot removed the Trigger: getsentry tests Once code is reviewed: apply label to PR to trigger getsentry tests label Jul 12, 2022
@ryan953 ryan953 enabled auto-merge (squash) July 13, 2022 02:21
@ryan953 ryan953 self-assigned this Jul 13, 2022
@ryan953 ryan953 added the Trigger: getsentry tests Once code is reviewed: apply label to PR to trigger getsentry tests label Jul 13, 2022
@ryan953 ryan953 removed their assignment Jul 13, 2022
@ryan953 ryan953 disabled auto-merge July 13, 2022 02:22
icon={<IconRefresh size="sm" />}
onClick={() => setCurrentTime(currentTime - 10 * SECOND)}
aria-label={t('Go back 10 seconds')}
aria-label={t('Rewind 10 seconds')}
Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

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

should this be Rewind 10s like the title above?

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

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

I get your point from a tidiness perspective for sure. I was trying to make the aria-labels as clear as possible imagining if I was using a screen reader myself. I also think the content from the tooltips could be understood just fine but I think these would be a little clearer.

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

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

ok, sounds good.

}
}}
aria-label={t('Jump to next event')}
aria-label={t('Fast-forward to next breadcrumb')}
Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

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

Should this be Next breadcrumb like the title text above?

Copy link
Copy Markdown
Contributor Author

@danecando danecando Jul 13, 2022

Choose a reason for hiding this comment

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

Same comment as above. I think this one is a little less clear of what the action is. 'Next breadcrumb'

@github-actions github-actions bot removed the Trigger: getsentry tests Once code is reviewed: apply label to PR to trigger getsentry tests label Jul 13, 2022
@danecando danecando changed the title feat(replays): Updated player control tooltips feat(replays): Updated player control tooltips and icons Jul 13, 2022
@ryan953 ryan953 added the Trigger: getsentry tests Once code is reviewed: apply label to PR to trigger getsentry tests label Jul 13, 2022
@ryan953 ryan953 enabled auto-merge (squash) July 13, 2022 16:26
auto-merge was automatically disabled July 13, 2022 16:32

Head branch was pushed to by a user without write access

@github-actions github-actions bot removed the Trigger: getsentry tests Once code is reviewed: apply label to PR to trigger getsentry tests label Jul 13, 2022
@ryan953 ryan953 added the Trigger: getsentry tests Once code is reviewed: apply label to PR to trigger getsentry tests label Jul 13, 2022
@ryan953 ryan953 enabled auto-merge (squash) July 13, 2022 16:38
@ryan953 ryan953 disabled auto-merge July 13, 2022 16:38
@ryan953 ryan953 enabled auto-merge (squash) July 13, 2022 16:39
@ryan953 ryan953 merged commit f5ebe9b into getsentry:master Jul 13, 2022
vpandiarajan20 pushed a commit that referenced this pull request Jul 14, 2022
Updates tooltip names and aria-labels for replay player controls & makes use of new `Rewind10`, `Expand`, and `Contract` icons in the player controls.

Closes #36527
Closes #36477
vpandiarajan20 added a commit that referenced this pull request Jul 18, 2022
* feat(integrations): 1st Iteration Frontend

Made a page to create SentryFunctions

* style(integrations): route family fix & remove redundant code

replaced function call with anonymous function
created family for sentry function routes, to prevent confusion with integrations

* [skip ci] gitbot test

* [skip ci] gitbot test 2

* [skip ci] gitbot test

* [skip ci] gitbot test 2

* [skip ci] gitbot test 3

* [skip ci] gitbot test 4

* [skip ci] gitbot test 5

* ref: convert legacy compat.map serialize calls to listcomps (#36532)

* fix(selectedEnvs): fix eslint deps (#36577)

* fix(selectedEnvs): fix deps

* fix(environmentpagefilters): fix typo

* feat(team-roles) Add Team Roles to organizationTeams (#35667)

* ref(team-roles) Rename methods for org-level roles (#36497)

* ref(team-roles) Move OrganizationTeamMemberDetailsEndpoint (#36549)

* feat(replays): adds compact mode for player control bar (#36483)

Changes
- Adds resize observer to player control bar
- Adds compactLevel state for possible multi breakpoints
- Updates player control UI when compact is set

Note
We might not actually need breakpoints. I think it's good to go as is as we have and should have a min width for the sidebar

Closes #36272

* ref(sdk): Bump python to sdk 1.7 (#36575)

Bump the sdk again.

Refs #36502
Refs #36539

Co-authored-by: Neel Shah <neelshah.sa@gmail.com>

* fix(hybrid-cloud): Fix org slugify on saving new instances of Organization (#36604)

* feat(dashboard-filters): Update endpoint to save filters (#36462)

Exposes project, environment, start, end, range, and filters as keys
in the dashboard detail API. Only releases is supported as a field in
filters.

* ref(projectconfig): Do not sample metrics for v2 (#36612)

There are not many of these, sampling might distort results.

* fix: replace usage of global functions in Lua with locals (#34416)

* feat(sampling): Remove transaction and user id condition (#36613)

* feat(dyn-sampling): Add BE validation for uniform rules [TET-191] (#36607)

* feat(dyn-sampling): Add BE validation for uniform rules [TET-191]

Adds validation that ensures uniform sampling rule
cannot be deleted, no multiple uniform rules can
co-exist and unifrom rule is always in the last position

* fix(projectconfig): Give the build task debounce key a short TTL (#36514)

The TTL of the debounce key is made to match the hard timeout of the
celery task.  This ensures that a debounce key can not live longer
than the task can, and thus no sticky debounce key occurs when a task
times out.  Because the schedule time is ignored this could result in
unnecessary duplicate tasks, however if a task already took this long
it probably wasn't going to succeed anyway.

Secondly this sets a global expiry time for the task itself, an
expired task will stay in RabbitMQ but the Celery worker will ack it
without running the task.  This ensures that if workers are shut down
during incidents or similar previous tasks will not be consuming
computation resources.

INGEST-1441
INGEST-1442

* ref(sampling): Add more analytic code for sampling - [TET-173] (#36513)

* feat(profiling): split table from renderer (#36471)

* feat(profiling): split table from renderer

* ref(flamegraph): noopColor -> noopDuration

* fix(flamegraph): add helper import

* feat(profiling): always display frame table (#36482)

* feat(profiling): always display frame table

* feat(profiling): allow table to be positioned to left, bottom or right side of the chart. (#36523)

* feat(profiling): add layout to preferences

* feat(profiling): position table left and right

* fix(flamegraph): root

* ref(profiling): improve terminology (#36593)

* ref(framestack): rename tableRoot to referenceRoot

* ref(framestack): rename roots

* ref(framestack): rename roots in test

* ref(framestack): final rename

* feat(profiling): use new layout icons (#36596)

* fix(perf): Fix asset measurements sending NaN/null (#36609)

The nullish coalescing wasn't wrapped in parens so it was ambiguous. This should fix this specific case happening again, but we should also look into why the transfer sizes aren't even defined, which was unexpected.

* feat(ui): Add 'ui' as a span breakdown (#36515)

* feat(ui): Add 'ui' as a span breakdown

This will add 'ui' as another span breakdown in the transaction summary. It will help show the percentage time spent in UI for mobile and frontend projects.

* feat(sampling): Format and round sample rates [TET-211] (#36617)

* ref(ci): Bump timeout of acceptance jobs (#36618)

I've hit this more than once with one of the acceptance jobs, thus, needing to re-run in order to trigger Visual Snapshots.

* fix(api) Fix a 500 when updating project rule history (#36590)

Fixes SENTRY-SHD

* fix(discover): events endpoint default rate limit if missing org and cant check feature flag (#36614)

Return the default rate limit if we cant get the org. Eventually we will remove the feature flag and always return the custom events rate limit so this edge case can no longer happen.

* tests(discover): Improve stability of events geo tests (#36619)

When using a timestamp 1 minute in the past for test events, the end timestamp
on the query can sometimes be equal due to the timestamp fuzzing logic. Since we
use a less than (<) condition for the end timestamp, the query will return no
result in this situation leading to a flakey test. This aims to improve the
stability of the test by storing the event further in the past so it won't
collide with the end timestamp on the query.

* feat(db): Add support for JSON in pickle field (#36350)

* added contract expand and rewind icons (#36598)

* feat(sampling): Handle empty current series (#36620)

* feat(replays): Sidebar Left Layout (#36429)

Adds an additional option for the layout param that positions that sidebar on the left side

Use `?l_page=sidebar_left` in the url to enable the new arrangement.

Fixes #36410

* feat(replays): Updated player control tooltips and icons (#36516)

Updates tooltip names and aria-labels for replay player controls & makes use of new `Rewind10`, `Expand`, and `Contract` icons in the player controls.

Closes #36527
Closes #36477

* fix(ui): Sentry Apps: Vertical CircularIndicator and capitalize (#36576)

For instance, when loading the Linear app, the circular indicator would not line up with the text.

You can see this working by running `yarn dev-ui` (sign in with a non-SSO org) and load this page:
https://localhost:7999/settings/sentry-ecosystem/sentry-apps/linear/

This also capitalizes the name of the app when the installing/uninstalling apps.

Fixes Jira ticket: API-1173

* feat(mep): Remove `entity_key` and `time_col` from `BaseEntitySubscription` (#36460)

This removes `entity_key` and the derived `time_col` from the entity subscription classes. I'm doing
this so that we can have an entity subscription that will be able to produce a query for any of the
metric entities (count, sets, etc) without having to manually define it. This allows us to use
`QueryBuilder` to determine the entity instead of having to parse the aggregates ourselves.

We can then use `QueryBuilder` to fetch the entities in place of these previously hardcoded values.

* fix(ui): Clear TimeRangeSelector input value on select and close (#36595)

* feat(mep): Move `type` to `SnubaQuery` (#36490)

It turns out that we need `type` at a lower level than the alert. This allows us to determine which
entity a `SnubaQuery` is associated with, since we need to know both the type and dataset to
determine it.

* fix(alert): Don't collapse alert when clicking on expanded content (#36592)

* fix(alert): Don't collapse alert when clicking on expanded content

* fix(alert): Fix test

* ref(alert): Fix internal paddings

* feat(msteams): Add default installation_type for new integrations (#36534)

* ref(ci): search-syntax fixture changes trigger frontend + backend (#36606)

* feat(mep): Backfill and mark `SnubaQuery.type` as not null (#36493)

Modified version of the backfill from `AlertRule.type`. Test is commented out because of a bug with
migration tests when rolling back not null columns.

* ref(storybook): Use Hovercard for storybook icons (#36430)

* test(ui): Convert admin views to RTL (#36628)

* feat(replays): Iterate on Breadcrumb styles  (#36396)

Added new styles to the breadcrumb component which highlights in a better way when the user is on its event.

Closes #36112

* fix(selectAllNotice): Use Alert component, not alertStyles (#36627)

* fix(workflow): Remove issue-alerts-targeting feature backend (#36164)

* feat(migration): MsTeams backfill default installation type (#36536)

* ref: don't use deprecated yield_fixture (#36633)

* ref(tests) Try disabling internal error collection (#35596)

* ref(tests) Try disabling internal error collection

I've noticed that when tests have problems our test output gets
cluttered with timeouts from the python SDK trying to submit errors back
to a host that doesn't exist or isn't responding.

My hope is that by disabling the internal project key we can skip all of
that and have faster, less noisy tests.

* Fix tests.

* See if mutating settings will fix these tests in CI

* Close docker clients after using them

I was getting a few unclosed stream errors locally, and closing
docker clients has helped resolve that.

* feat(mep): Restructure how we determine entity subscription for alerts (#36605)

Previously we mapped a specific `EntityKey` to all `EntitySubscription` classes. As part of
introducing metric based performance alerts, we want to have the `EntitySubscription` determine the
specific entity that the subscription will run on. This allows us to automatically determine the
correct entity for metric based alerts without having to duplicate logic that parses
aggregates/datasets/etc.

* ref: fix pip/wheel flipflop by using the pinned versions (#36636)

* ref: add pytest-xdist to development requirements (#36630)

* ref: replace legacy compat.map with list comprehensions in integrations (#36642)

* feat(hybrid-cloud): Adjust CORS for customer domains (#36639)

* ref: replace legacy compat.map with list comprehensions in similarity (#36643)

* Revert "ref: fix pip/wheel flipflop by using the pinned versions (#36636)" (#36648)

This reverts commit 6d08d30.

* feat(active-release): Active Release Notification Email redesign (#36425)

* add option for passed initials to get_letter_avatar

* add platform to project in debug mail

* everything else

* filter context keys

* remove id

* add changes to email

* add users_seen to context

* fix test

* fix test

* update text email

* fix test

* fix(ui): Fix expand and collapse button not working - issue error warning (#36616)

* test: upgrade responses to latest (#36597)

* feat(dashboard): dashboard widget builder only allow cm on supported functions (#36570)

updates widget builder yaxis and column function arg dropdown to only show custom measurements when supported by the function

* fix(test): Use correct url prefix for minidump test (#36635)

* feat(mep): Generic metric dataset (#36623)

- This properly switches the metric query builder over to the generic metrics dataset
- This currently means that local metrics data will no longer work
- This makes a bit of a TODO to come back and rename the
  Dataset.Metrics to Dataset.PerformanceMetrics
- Also defaulting to Metrics for now as the default dataset to get tests
  passing, but will likely make it PerformanceMetrics instead in the
  long run
- This also changes the hack to only happen when on the
  PerformanceMetrics dataset

* tests(discover): Improve stability of eventsv2 tests (#36641)

Same motivation as #36619, this aims to improve the stability of the eventsv2
tests by moving the event timestamps further in the past.

* test(ui): Convert issue sync list to RTL (#36656)

* test(ui): Convert issue diff to RTL (#36657)

* test(ui): Convert ignore to RTL (#36662)

* test(ui): Convert global modal to RTL (#36659)

* test(ui): Convert stream group to RTL (#36654)

* test(ui): Remove mixed emotion modal and rtl modal (#36658)

* test(ui): Convert feature tour modal RTL (#36660)

* test(ui): Convert repository row to RTL (#36655)

* test(ui): Convert toggle raw event to RTL (#36652)

* fix(trace-view): Left pad root span id (#36671)

The root span id is stored as an UInt64 in ClickHouse. And when querying, it is
converted to a hex string using a naive base 10 to base 16 conversion. This
conversion does not take into account that some smaller values need to be left
padded with 0s in order to have a length of 16. So sometimes, the parent span
ids returned from snuba does not match the span ids retrieved from nodestore.

* test(ui): Convert platform picker to RTL (#36640)

* fix(dashboards): Wrap customMeasurementsProvider fetchCustomMeasurements in feature flag (#36673)

wraps fetchCustomMeasurements request in feature flag.

* feat(vitals): vitals alert project data (#36546)

This PR modifies the endpoint for organization web vitals which will be used in an upcoming A/B test:

Adds information about the number of events that have LCP, FCP, cold start, and warm start at an organization level. The UI will use those counts to determine if we have enough data for an organization to warrant showing the notification (min 100 for the relevant category)
Adds project level data for the projects a user has access to. This is needed for organizations who cannot select multiple projects at a time. When we send the user to the web vitals page, we will need to pick a project the user has access to. We can do that by finding the project which has the most relevant transactions for the category we are picking

* feat(eslint): Disable eslint rule to restrict withRouter imports for existing components (#36629)

* fix(mep): Make sure we pass organization id when creating query builder (#36685)

Missed passing this in a few places

Fixes SENTRY-VET

* fix(release-notification): bypass digest for release notifications  (#36684)

* dont digest for ActiveReleaseAlertNotifications

* cleaner branched logic

* ref: use actions/setup-python directly (sentry) (#36687)

* test(ui): Convert range slider to RTL (#36646)

* ref(msteams): Use message builder for help, installation and identity messages (#36495)

Move the JSON blobs for help, installation and identity related messages to a message builder hierarchy like the one we use for Slack. Currently, all the cards that we use for the Microsoft Teams notifications are in the form of JSON blobs in sentry/integrations/msteams/card_builder.py. This is not good for maintainability and there is lot of code duplication.

* feat(ui): Add multiple checkbox component (#36645)

* feat(ui): Add multiple checkbox component

* Add storybook

* Change text location

* ref: colorize pytest output in CI by default (#36690)

* Revert "Revert "ref: fix pip/wheel flipflop by using the pinned versions (#36636)" (#36648)" (#36691)

This reverts commit 096dc6d.

* test(ui): Convert resolve to RTL (#36676)

* feat(mep): Add `PerformanceMetricsEntitySubscription` for use with MEP alerts (#36653)

This adds `PerformanceMetricsEntitySubscription` for performance alerts. This allows us to create
performance alerts against either the existing transactions datast, or the new generic metrics
dataset. This isn't in use yet, we'll plug this into the API in a follow-up.

* tests(mep): Add missing tests for entity subscription helper functions (#36689)

I missed adding tests to `get_entity_subscription_from_snuba_query` and
`get_entity_key_from_snuba_query` when I added them. Including here.

* feat(integrations): Endpoint for SentryFunctions creation page (#36557)

* feat(integrations): Dummy endpoint for SentryFunctions creation page

* fix(integrations): Changed file type, fix url

Changed text file to py file
Changed url for sentry functions backend to be more in line with current style

* fix(integrations): made api private

* feat(integrations): new table

* fix(integrations): debugging in process

* some refactoring

* fix(integrations): add imports to inits

* feat(integrations): Added feature flag and tests for Sentry Functions

* feat(integrations): remove null fill from author element in SentryFunction

* add TODO

* style(lint): Auto commit lint changes

* test(integrations): Add test to make sure the SentryFunction is being created and serialized properly

* style(integrations): remove extraneous comments

* ref(integrations): remove extraneous custom manager

Co-authored-by: Stephen Cefali <scefali@sentry.io>
Co-authored-by: getsantry[bot] <66042841+getsantry[bot]@users.noreply.github.com>

* Revert "style(integrations): route family fix & remove redundant code"

This reverts commit 831997e.

* feat(integrations): hid sentry functions with feature flag

* fix(integrations): making text machine readable

* fix(integrations): small typo

* feat(integrations): added onSubmitSuccess, onSubmitError

Co-authored-by: Joshua Li <joshuarli98@gmail.com>
Co-authored-by: anthony sottile <103459774+asottile-sentry@users.noreply.github.com>
Co-authored-by: Jonas <jonas@badalic.com>
Co-authored-by: Danny Lee <dlee@sentry.io>
Co-authored-by: Dane Grant <danecando@gmail.com>
Co-authored-by: Kev <6111995+k-fish@users.noreply.github.com>
Co-authored-by: Neel Shah <neelshah.sa@gmail.com>
Co-authored-by: Alberto Leal <mail4alberto@gmail.com>
Co-authored-by: Nar Saynorath <nar.saynorath@sentry.io>
Co-authored-by: Floris Bruynooghe <flub@sentry.io>
Co-authored-by: Hugh Cole-Baker <hugh.cole-baker@aiven.io>
Co-authored-by: Matej Minar <matej.minar@sentry.io>
Co-authored-by: Ahmed Etefy <ahmed.etefy12@gmail.com>
Co-authored-by: Priscila Oliveira <priscila.oliveira@sentry.io>
Co-authored-by: Armen Zambrano G <armenzg@sentry.io>
Co-authored-by: Mark Story <mark@mark-story.com>
Co-authored-by: edwardgou-sentry <83961295+edwardgou-sentry@users.noreply.github.com>
Co-authored-by: Tony Xiao <txiao@sentry.io>
Co-authored-by: Armin Ronacher <armin.ronacher@active-4.com>
Co-authored-by: Dora <dora.l.chan@gmail.com>
Co-authored-by: Dan Fuller <dfuller@sentry.io>
Co-authored-by: Malachi Willey <malwilley@gmail.com>
Co-authored-by: Vu Luong <vuluongj20@gmail.com>
Co-authored-by: NisanthanNanthakumar <nisanthan.nanthakumar@sentry.io>
Co-authored-by: Evan Purkhiser <evanpurkhiser@gmail.com>
Co-authored-by: Scott Cooper <scttcper@gmail.com>
Co-authored-by: Jesus Padron <jesuspadron4497@gmail.com>
Co-authored-by: Taylan Gocmen <taylangocmen@users.noreply.github.com>
Co-authored-by: Markus Unterwaditzer <markus-honeypot@unterwaditzer.net>
Co-authored-by: William Mak <william@wmak.io>
Co-authored-by: Stephen Cefali <scefali@sentry.io>
Co-authored-by: Gilbert Szeto <gilbert.szeto@sentry.io>
Co-authored-by: Varun Venkatesh <varun.venkatesh@sentry.io>
Co-authored-by: Zhixing Zhang <me@neoto.xin>
Co-authored-by: getsantry[bot] <66042841+getsantry[bot]@users.noreply.github.com>
@github-actions github-actions bot locked and limited conversation to collaborators Jul 29, 2022
@chadwhitacre chadwhitacre removed the Trigger: getsentry tests Once code is reviewed: apply label to PR to trigger getsentry tests label Mar 16, 2023
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.

Labels

Scope: Frontend Automatically applied to PRs that change frontend components

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Update replay player tooltips with what's in figma Replace player icons with new updated versions

4 participants