DEVPROD-10205: Create onboarding tutorial #590

minnakt · 2025-01-27T01:23:07Z

Description

This PR adds the onboarding tutorial. Heavily referenced from preexisting Cloud work 🙏

Backdrop was my idea though... let me know if you don't like it

Assumptions

The user views a project that has activated tasks in the first build variant. It's hard to place a guide cue on the task box if that's not the case.

Note that older projects literally have no tasks on their waterfall due to the task collection TTL. 😅

Screenshots

I wasn't sure how the restart walkthrough functionality should look on the UI, I just put a button there for now. I can talk to Will about it.

Screen.Recording.2025-01-26.at.8.17.21.PM.mov

Testing

Cypress tests
Jest tests

sophstad

Really nice approach! Thank u mms 🫶

sophstad · 2025-01-27T15:45:03Z

apps/spruce/src/components/WalkthroughGuideCue/index.tsx

+  const currentStepRef = useRef<HTMLElement | null>(null);
+
+  // Exposes a function via the ref to restart the walkthrough.
+  useImperativeHandle(ref, () => ({


sophstad · 2025-01-27T15:56:32Z

apps/spruce/src/pages/waterfall/constants.ts

+  {
+    title: "New Layout",
+    description:
+      "We've changed the Project Health page to a new layout for increased information density. Columns are commits, rows are build variants, and tasks are box icons.",


Switch order for consistency. Also maybe "squares" instead of "box icons"?

Suggested change

"We've changed the Project Health page to a new layout for increased information density. Columns are commits, rows are build variants, and tasks are box icons.",

"We've changed the Project Health page to a new layout for increased information density. Columns are commits, rows are build variants, and squares are tasks.",

sophstad · 2025-01-27T15:58:16Z

apps/spruce/src/components/TaskStatusIconLegend/index.tsx

@@ -91,7 +94,7 @@ export const TaskStatusIconLegend: React.FC = () => {
  useOnClickOutside([buttonRef, popoverRef], () => setOpen(false));

  return (
-    <div>
+    <div {...legendProps}>


Would it be possible to open the legend when the guide cue is here? May crowd the page too much but just an idea. It feels awk that the button is not clickable.

ok turns out it wasn't that hard to do this i just had to strategically put some walkthrough steps in a different order

but the task legend one looked awkward (because the legend just gets eclipsed by the guide cue) so i left it out 👀 i added it to other elements!

sophstad · 2025-01-27T15:59:56Z

apps/spruce/src/pages/waterfall/constants.ts

+  {
+    title: "Pin Build Variants",
+    description:
+      "Pin your favorite build variants at the top to help with debugging and monitoring workflows.",


"Favorite" feels like a strong word... I ❤️ Shared Library Enterprise RHEL 8

Suggested change

"Pin your favorite build variants at the top to help with debugging and monitoring workflows.",

"Pin variants to the top of the page to help with debugging and monitoring common workflows.",

sophstad · 2025-01-27T16:01:24Z

apps/spruce/src/components/WalkthroughGuideCue/index.tsx

+        currentStep={currentStepIdx + 1}
+        data-cy="walkthrough-guide-cue"
+        numberOfSteps={walkthroughSteps.length}
+        onDismiss={() => {


I dismissed the walkthrough without finishing it, but when I reloaded the page it started again which feels aggressive.

i wasn't able to replicate,,, let me know if you're still seeing 🥺

sophstad · 2025-01-27T16:02:46Z

apps/spruce/src/pages/waterfall/constants.ts

+  {
+    title: "Summary View",
+    description:
+      "Introducing an alternative to the charts — view a summary of the task statuses for any given run.",


Suggested change

"Introducing an alternative to the charts — view a summary of the task statuses for any given run.",

"An alternative to project health charts — view a summary of task statuses for any given run.",

sophstad · 2025-01-27T16:10:49Z

apps/spruce/src/pages/waterfall/constants.ts

+    description:
+      "Introducing an alternative to the charts — view a summary of the task statuses for any given run.",
+    targetId: "summary-view",
+  },


Might we add a cue for the "Search by git hash" feature? I think users called it out as harder to find in UAT, and ... menus can get buried easily.

sophstad · 2025-01-27T16:40:21Z

apps/spruce/src/pages/waterfall/WaterfallGrid.tsx

+  let firstActiveTaskId = "";
+  for (let i = 0; i < buildVariants[0]?.builds?.length; i++) {
+    const { builds } = buildVariants[0];
+    if (builds[i].tasks.length > 0) {
+      firstActiveTaskId = builds[i].tasks[0].id;
+      break;
+    }
+  }
+


Would it perhaps make more sense to calculate this in the BuildRow component if isFirstBuild is true?

sophstad · 2025-01-27T18:45:17Z

apps/spruce/src/pages/waterfall/constants.ts

+  {
+    title: "New Layout",
+    description:
+      "We've changed the Project Health page to a new layout for increased information density. Columns are commits, rows are build variants, and tasks are box icons.",


Also, I think it makes sense to not imply we're changing the project health page. This is a new page, no need to mention it.

Suggested change

"We've changed the Project Health page to a new layout for increased information density. Columns are commits, rows are build variants, and tasks are box icons.",

"We've introduced a new layout for increased information density. Columns are commits, rows are build variants, and tasks are box icons.",

sophstad · 2025-01-28T14:57:17Z

apps/spruce/src/pages/waterfall/constants.ts

+  {
+    title: "Search by Git Hash",
+    description:
+      "Explore other filtering options in the menu, such as searching by git hash.",


Kinda a hacky change, but I think worth it: if we shorten the guide text here, then the cue changes orientation and the menu is visible!

Suggested change

"Explore other filtering options in the menu, such as searching by git hash.",

"Explore other filtering options in the menu.",

oops idk how i missed that 🫣

sophstad · 2025-01-28T15:01:38Z

apps/spruce/src/components/WalkthroughGuideCue/index.tsx

+    if (nextStep.shouldClick) {
+      nextTargetElement.click();
+    }


This works so well 👏

sophstad · 2025-01-28T15:03:41Z

apps/spruce/src/pages/waterfall/index.tsx

+            <Button
+              data-cy="restart-walkthrough-button"
+              onClick={() => guideCueRef.current?.restart()}
+              size={ButtonSize.XSmall}
+            >
+              Restart walkthrough
+            </Button>


Hrmmmm I would love to show this button and launch the walkthrough only once the beta period starts. Is that doable now or is it dependent on some of the other tix?

i think it might be simpler if i merge it on friday or monday...? 🤔 im on deploy so i can wait for whatever dependencies and deploy next week if that makes sense

Make sense to me! We can throw a do-not-merge label on here

sophstad

😍

sophstad · 2025-01-28T20:54:21Z

apps/spruce/src/pages/waterfall/index.tsx

+            <Button
+              data-cy="restart-walkthrough-button"
+              onClick={() => guideCueRef.current?.restart()}
+              size={ButtonSize.XSmall}
+            >
+              Restart walkthrough
+            </Button>


Make sense to me! We can throw a do-not-merge label on here

minnakt added 5 commits January 24, 2025 13:14

Codegen

902d6b3

DEVPROD-10205: Create onboarding tutorial

ce4417b

Add backdrop and restart functionality

91825a4

Add tests

2917d12

Use variables

877f308

minnakt added the spruce label Jan 27, 2025

minnakt added 5 commits January 26, 2025 20:36

More variables yippee

ec91efa

Update snapshots

ded2236

Set cookie in tests

ad6d875

Fix test

51f1f20

Fix test actually this time

9b30aa9

minnakt marked this pull request as ready for review January 27, 2025 14:48

minnakt requested a review from a team as a code owner January 27, 2025 14:48

sophstad requested changes Jan 27, 2025

View reviewed changes

minnakt added 3 commits January 27, 2025 11:59

Merge branch 'main' into DEVPROD-10205

b40c376

Update copy of walkthrough elements

a1077e4

Calculate firstActiveTaskId inside BuildRow

a3099e0

sophstad reviewed Jan 27, 2025

View reviewed changes

minnakt added 4 commits January 27, 2025 14:19

Update copy

8f3862f

Enable clicking

9e50f81

Oops updated the wrong file

ee382b9

Update test to include new step

750aa84

minnakt requested a review from sophstad January 27, 2025 22:41

sophstad reviewed Jan 28, 2025

View reviewed changes

minnakt added 2 commits January 28, 2025 10:26

Merge branch 'main' into DEVPROD-10205

435a46e

Shorten copy

5cc99b6

minnakt requested a review from sophstad January 28, 2025 18:40

sophstad approved these changes Jan 28, 2025

View reviewed changes

minnakt added the do not merge label Jan 28, 2025

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

DEVPROD-10205: Create onboarding tutorial #590

DEVPROD-10205: Create onboarding tutorial #590

minnakt commented Jan 27, 2025 •

edited

Loading

sophstad left a comment

sophstad Jan 27, 2025

sophstad Jan 27, 2025

sophstad Jan 27, 2025

minnakt Jan 27, 2025

sophstad Jan 27, 2025

sophstad Jan 27, 2025

minnakt Jan 27, 2025

sophstad Jan 27, 2025

sophstad Jan 27, 2025

sophstad Jan 27, 2025

sophstad Jan 27, 2025

sophstad Jan 28, 2025

minnakt Jan 28, 2025

sophstad Jan 28, 2025

sophstad Jan 28, 2025

minnakt Jan 28, 2025

sophstad Jan 28, 2025

sophstad left a comment

sophstad Jan 28, 2025

	"We've changed the Project Health page to a new layout for increased information density. Columns are commits, rows are build variants, and tasks are box icons.",
	"We've changed the Project Health page to a new layout for increased information density. Columns are commits, rows are build variants, and squares are tasks.",

	"Pin your favorite build variants at the top to help with debugging and monitoring workflows.",
	"Pin variants to the top of the page to help with debugging and monitoring common workflows.",

	"Introducing an alternative to the charts — view a summary of the task statuses for any given run.",
	"An alternative to project health charts — view a summary of task statuses for any given run.",

	"We've changed the Project Health page to a new layout for increased information density. Columns are commits, rows are build variants, and tasks are box icons.",
	"We've introduced a new layout for increased information density. Columns are commits, rows are build variants, and tasks are box icons.",

	"Explore other filtering options in the menu, such as searching by git hash.",
	"Explore other filtering options in the menu.",

DEVPROD-10205: Create onboarding tutorial #590

Are you sure you want to change the base?

DEVPROD-10205: Create onboarding tutorial #590

Conversation

minnakt commented Jan 27, 2025 • edited Loading

Description

Assumptions

Screenshots

Testing

sophstad left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

sophstad left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

minnakt commented Jan 27, 2025 •

edited

Loading