ref(quick-start): Add task completion animation #82523

priscilawebdev · 2024-12-23T14:38:07Z

closes https://github.com/getsentry/projects/issues/337

Preview

Screen.Recording.2024-12-23.at.15.54.57.mov

Note
Maybe we want to add a delay when skipping the last task in the group? 🤔

priscilawebdev · 2024-12-23T14:42:50Z

@ale-cota @evanpurkhiser what do you think of the animation?

codecov · 2024-12-23T14:45:09Z

❌ 3 Tests Failed:

Tests completed	Failed	Passed	Skipped
8423	3	8420	0

View the top 3 failed tests by shortest run time

NewSidebar if first group completed, second group should be expanded by default

Stack Traces | 0.061s run time

TestingLibraryElementError: Unable to find an element with the text: Setup Tracing. This could be because the text is broken up by multiple elements. In this case, you can provide a function for your text matcher to make your matcher more flexible.

Ignored nodes: comments, script, style
...
    at Object.getElementError (.../sentry/sentry/node_modules/@.../dom/dist/config.js:37:19)
    at .../sentry/sentry/node_modules/@.../dom/dist/query-helpers.js:76:38
    at .../sentry/sentry/node_modules/@.../dom/dist/query-helpers.js:52:17
    at .../sentry/sentry/node_modules/@.../dom/dist/query-helpers.js:95:19
    at Object.<anonymous> (.../components/onboardingWizard/newSidebar.spec.tsx:101:40)
    at Promise.then.completed (.../sentry/sentry/node_modules/jest-circus/build/utils.js:298:28)
    at new Promise (<anonymous>)
    at callAsyncCircusFn (.../sentry/sentry/node_modules/jest-circus/build/utils.js:231:10)
    at _callCircusTest (.../sentry/sentry/node_modules/jest-circus/build/run.js:316:40)
    at runNextTicks (node:internal/process/task_queues:65:5)
    at listOnTimeout (node:internal/timers:555:9)
    at processTimers (node:internal/timers:529:7)
    at _runTest (.../sentry/sentry/node_modules/jest-circus/build/run.js:252:3)
    at _runTestsForDescribeBlock (.../sentry/sentry/node_modules/jest-circus/build/run.js:126:9)
    at _runTestsForDescribeBlock (.../sentry/sentry/node_modules/jest-circus/build/run.js:121:9)
    at run (.../sentry/sentry/node_modules/jest-circus/build/run.js:71:3)
    at runAndTransformResultsToJestFormat (.../sentry/sentry/node_modules/jest-circus/build/legacy-code-todo-rewrite/jestAdapterInit.js:122:21)
    at jestAdapter (.../sentry/sentry/node_modules/jest-circus/build/legacy-code-todo-rewrite/jestAdapter.js:79:19)
    at runTestInternal (.../sentry/sentry/node_modules/jest-runner/build/runTest.js:367:16)
    at runTest (.../sentry/sentry/node_modules/jest-runner/build/runTest.js:444:34)
    at Object.worker (.../sentry/sentry/node_modules/jest-runner/build/testWorker.js:106:12)

NewSidebar show skipable confirmation when skipping a task

Stack Traces | 0.536s run time

TestingLibraryElementError: Unable to find an accessible element with the role "button" and name "Dismiss Skip"

Here are the accessible roles:

  dialog:

  Name "":
  ...

  --------------------------------------------------
  button:

  Name "Getting Started 0 out of 2 tasks completed":
  ...

  Name "Collapse":
  ...

  Name "Create your first project Select your platform and install the Sentry SDK":
  ...

  Name "Send your first error Throw an error in your app":
  ...

  Name "Beyond the Basics 0 out of 1 task completed":
  ...

  Name "Collapse":
  ...

  Name "Setup Tracing Capture your first transaction":
  ...

  Name "Skip Task":
  ...

  --------------------------------------------------
  presentation:

  Name "":
  ...

  Name "":
  ...

  Name "":
  ...

  Name "":
  ...

  Name "":
  ...

  Name "":
  ...

  Name "":
  ...

  Name "":
  ...

  --------------------------------------------------
  img:

  Name "":
  ...

  Name "":
  ...

  Name "":
  ...

  --------------------------------------------------
  strong:

  Name "":
  ...

  Name "":
  ...

  Name "":
  ...

  Name "":
  ...

  Name "":
  ...

  --------------------------------------------------
  paragraph:

  Name "":
  ...

  Name "":
  ...

  Name "":
  ...

  Name "":
  ...

  Name "":
  ...

  --------------------------------------------------
  separator:

  Name "":
  ...

  Name "":
  ...

  --------------------------------------------------
  list:

  Name "":
  ...

  Name "":
  ...

  --------------------------------------------------
  listitem:

  Name "":
  ...

  Name "":
  ...

  Name "":
  ...

  --------------------------------------------------

Ignored nodes: comments, script, style
...
    at Object.getElementError (.../sentry/sentry/node_modules/@.../dom/dist/config.js:37:19)
    at .../sentry/sentry/node_modules/@.../dom/dist/query-helpers.js:76:38
    at .../sentry/sentry/node_modules/@.../dom/dist/query-helpers.js:52:17
    at .../sentry/sentry/node_modules/@.../dom/dist/query-helpers.js:95:19
    at Object.<anonymous> (.../components/onboardingWizard/newSidebar.spec.tsx:171:70)
    at runNextTicks (node:internal/process/task_queues:65:5)
    at listOnTimeout (node:internal/timers:555:9)
    at processTimers (node:internal/timers:529:7)

Onboarding Status panel is collapsed and has pending tasks to be seen

Stack Traces | 1.08s run time

Error: expect(jest.fn()).toHaveBeenCalled()

Expected number of calls: >= 1
Received number of calls:    0

Ignored nodes: comments, script, style
...
    at .../components/sidebar/newOnboardingStatus.spec.tsx:71:83
    at runWithExpensiveErrorDiagnosticsDisabled (.../sentry/sentry/node_modules/@.../dom/dist/config.js:47:12)
    at checkCallback (.../sentry/sentry/node_modules/@.../dom/dist/wait-for.js:124:77)
    at checkRealTimersCallback (.../sentry/sentry/node_modules/@.../dom/dist/wait-for.js:118:16)
    at Timeout.task [as _onTimeout] (.../sentry/sentry/node_modules/jsdom/lib/jsdom/browser/Window.js:520:19)
    at listOnTimeout (node:internal/timers:594:17)
    at processTimers (node:internal/timers:529:7)

To view more test analytics, go to the Test Analytics Dashboard
📢 Thoughts on this report? Let us know!

evanpurkhiser · 2024-12-23T14:45:57Z

Feels a bit slow

vgrozdanic · 2024-12-23T14:51:35Z

static/app/components/onboardingWizard/newSidebar.tsx

+/**
+ * How long (in ms) to delay before beginning to mark tasks complete
+ */
+const INITIAL_MARK_COMPLETE_TIMEOUT = 600;


nit: Should we maybe make this smaller, it seems pretty slow in the video you have shared, i am not sure if users will wait and keep attention that long at the tasks list?

yes the same feedback I got from Evan... I will set 450 and see if it improves

I think the speed of the animation itself also feels slow. Like the actual motion. I would expect them to switch around a bit snappier. We had animation on these before right?

yes we did have but I find the animation not very smooth/natural. do you prefer that?

Screen.Recording.2024-12-23.at.16.34.03.mov

I actually think this feels better. Snappier animation generally makes the app feel a little bit "faster" if that makes sense

vgrozdanic · 2024-12-23T14:53:01Z

static/app/components/onboardingWizard/newSidebar.tsx

+        .map(task => task.task);
+
+      for (const task of unseenTasks) {
+        updateOnboardingTask(api, organization, {task, completionSeen: true});


is there no way to have only 1 api call?

no we have to update the backend

ref(quick-start): Add task completion animation

f24ce4f

github-actions bot added the Scope: Frontend Automatically applied to PRs that change frontend components label Dec 23, 2024

Merge branch 'master' into priscila/ref/quick-start/add-animation

51f0195

priscilawebdev marked this pull request as ready for review December 23, 2024 14:41

priscilawebdev requested a review from a team December 23, 2024 14:42

vercel bot deployed to Preview December 23, 2024 14:45 View deployment

vgrozdanic reviewed Dec 23, 2024

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

ref(quick-start): Add task completion animation #82523

ref(quick-start): Add task completion animation #82523

priscilawebdev commented Dec 23, 2024 •

edited

Loading

priscilawebdev commented Dec 23, 2024

codecov bot commented Dec 23, 2024 •

edited

Loading

evanpurkhiser commented Dec 23, 2024

vgrozdanic Dec 23, 2024

priscilawebdev Dec 23, 2024

evanpurkhiser Dec 23, 2024

priscilawebdev Dec 23, 2024

evanpurkhiser Dec 23, 2024

vgrozdanic Dec 23, 2024 •

edited

Loading

priscilawebdev Dec 23, 2024

ref(quick-start): Add task completion animation #82523

Are you sure you want to change the base?

ref(quick-start): Add task completion animation #82523

Conversation

priscilawebdev commented Dec 23, 2024 • edited Loading

priscilawebdev commented Dec 23, 2024

codecov bot commented Dec 23, 2024 • edited Loading

❌ 3 Tests Failed:

evanpurkhiser commented Dec 23, 2024

vgrozdanic Dec 23, 2024

Choose a reason for hiding this comment

priscilawebdev Dec 23, 2024

Choose a reason for hiding this comment

evanpurkhiser Dec 23, 2024

Choose a reason for hiding this comment

priscilawebdev Dec 23, 2024

Choose a reason for hiding this comment

evanpurkhiser Dec 23, 2024

Choose a reason for hiding this comment

vgrozdanic Dec 23, 2024 • edited Loading

Choose a reason for hiding this comment

priscilawebdev Dec 23, 2024

Choose a reason for hiding this comment

priscilawebdev commented Dec 23, 2024 •

edited

Loading

codecov bot commented Dec 23, 2024 •

edited

Loading

vgrozdanic Dec 23, 2024 •

edited

Loading