Improved logged out experience (NGX)

[jonbell-lot23]

Old version

1. We'd put a documentation link up in all situations
2. The documentation link (aka "fuchsia hat") wasn't dismissible

New version

1. If there are comments, we default to that tab with special copy
2. ... and when you click onto any other tab, the "fuchsia hat" goes away (localStorage is used for this)
3. If there are no comments, we show the standard documentation link
4. ... but when you click into any other tab, the "fuchsia hat" goes away

Here's a little demo:
https://www.loom.com/share/445b9aab2f7144ef9a481c7f470c8220

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
devtools	❌ Failed (Inspect)			May 16, 2023 8:51pm

[jonbell-lot23]

This addresses https://linear.app/replay/issue/DES-614/logged-out-users-should-see-our-tour

[replay-io]

E2E Tests

63 replays were recorded for 2a68d86.

0 Failed

63 Passed

• cypress-01: Test basic cypress reporter functionality
• breakpoints-01: Test basic breakpoint functionality

  expect(received).toBeGreaterThan(expected)
  Expected: > 0
  Received:   0

• breakpoints-02: Test unhandled divergence while evaluating at a breakpoint

  expect(received).toBeGreaterThan(expected)
  Expected: > 0
  Received:   0

• breakpoints-03: Test stepping forward through breakpoints when rewound before the first one

  expect(received).toBeGreaterThan(expected)
  Expected: > 0
  Received:   0

• breakpoints-04: catch, finally, generators, and async/await

  expect(received).toBeGreaterThan(expected)
  Expected: > 0
  Received:   0

• breakpoints-05: Test interaction of breakpoints with debugger statements

  expect(received).toBeGreaterThan(expected)
  Expected: > 0
  Received:   0

• breakpoints-06: Test log point in a sourcemapped file
• breakpoints-07: rewind and seek using command bar and console messages

  expect(received).toBeGreaterThan(expected)
  Expected: > 0
  Received:   0

• breakpoints-08: should be temporarily disabled
• console_async: support console evaluations in async frames

  expect(received).toBe(expected) // Object.is equality
  Expected: "true"
  Received: "false"

• console_dock_node: Should show the correct docking behavior for recordings without video
• console_dock: Should show the correct docking behavior for recordings with video
• console_errors: Test that errors and warnings from various sources are shown in the console
• console_eval: support console evaluations

  expect(received).toBe(expected) // Object.is equality
  Expected: "true"
  Received: "false"

• console_warp-01: should support warping to console messages

  expect(received).toBe(expected) // Object.is equality
  Expected: "true"
  Received: "false"

• console_warp-02: support pausing, warping, stepping and evaluating console messages

  expect(received).toBeGreaterThan(expected)
  Expected: > 0
  Received:   0

• console-expressions-01: should cache input eager eval and terminal expressions per instance

  expect(received).toBe(expected) // Object.is equality
  Expected: "true"
  Received: "false"

• focus_mode-01: should filter messages as regions based on the active focus mode
• highlighter: element highlighter works everywhere

  expect(received).toBe(expected) // Object.is equality
  Expected: "true"
  Received: "false"

• inspector-01: Test that scopes are rerendered

  expect(received).toBeGreaterThan(expected)
  Expected: > 0
  Received:   0

• inspector-02: element picker and iframe behavior

  expect(received).toBe(expected) // Object.is equality
  Expected: "true"
  Received: "false"

• inspector-03: Test that styles for elements can be viewed

  expect(received).toBeGreaterThan(expected)
  Expected: > 0
  Received:   0

• inspector-04: Test that styles for elements can be viewed

  expect(received).toBe(expected) // Object.is equality
  Expected: "true"
  Received: "false"

• inspector-05: Test that styles for elements can be viewed

  expect(received).toBeGreaterThan(expected)
  Expected: > 0
  Received:   0

• inspector-06: Test that styles for elements can be viewed

  expect(received).toBeGreaterThan(expected)
  Expected: > 0
  Received:   0

• inspector-07: Test that styles for elements can be viewed

  expect(received).toBeGreaterThan(expected)
  Expected: > 0
  Received:   0

• logpoints-01: log-points appear in the correct order and allow time warping

  expect(received).toBeGreaterThan(expected)
  Expected: > 0
  Received:   0

• logpoints-02: conditional log-points
• logpoints-03_chromium: should display event properties in the console
• logpoints-03: should display event properties in the console
• logpoints-04: should display exceptions in the console

  expect(received).toBe(expected) // Object.is equality
  Expected: "true"
  Received: "false"

• logpoints-05: should auto-complete based on log point location

  expect(received).toContain(expected) // indexOf
  Expected value: "arrayGlobal"
  Received array: []

• logpoints-06: should be temporarily disabled
• logpoints-07: should use the correct scope in auto-complete

  expect(received).toBe(expected) // Object.is equality
  Expected: "true"
  Received: "false"

• logpoints-08: should support jumping directly to a hit point via the capsule input
• logpoints-09: should support pending edits
• node_console-01: Basic node console behavior

  expect(received).toBeGreaterThan(expected)
  Expected: > 0
  Received:   0

• node_console-02: uncaught exceptions should show up

  expect(received).toBe(expected) // Object.is equality
  Expected: "true"
  Received: "false"

• node_control_flow: catch, finally, generators, and async/await

  expect(received).toBeGreaterThan(expected)
  Expected: > 0
  Received:   0

• node_logpoint-01: Basic node logpoints

  expect(received).toBe(expected) // Object.is equality
  Expected: "true"
  Received: "false"

• node_logpoint-02: Node exception logpoints

  expect(received).toBe(expected) // Object.is equality
  Expected: true
  Received: false

• node_object_preview: Showing console objects in node
• node_spawn: Basic subprocess spawning

  expect(received).toBe(expected) // Object.is equality
  Expected: "true"
  Received: "false"

• node_stepping-01: Test stepping in async frames and async call stacks

  expect(received).toBeGreaterThan(expected)
  Expected: > 0
  Received:   0

• node_worker-01: make sure node workers don't cause crashes

  expect(received).toBeGreaterThan(expected)
  Expected: > 0
  Received:   0

• object_preview-01: expressions in the console after time warping

  expect(received).toBe(expected) // Object.is equality
  Expected: "true"
  Received: "false"

• object_preview-02: should allow objects in scope to be inspected

  expect(received).toBe(expected) // Object.is equality
  Expected: "true"
  Received: "false"

• object_preview-03: Test previews when switching between frames and stepping

  expect(received).toBeGreaterThan(expected)
  Expected: > 0
  Received:   0

• object_preview-04: Test scope mapping and switching between generated/original sources

  expect(received).toBeGreaterThan(expected)
  Expected: > 0
  Received:   0

• object_preview-05: Should support logging objects as values

  expect(received).toBeGreaterThan(expected)
  Expected: > 0
  Received:   0

• react_devtools: Test React DevTools.

  expect(received).toBe(expected) // Object.is equality
  Expected: "true"
  Received: "false"

• repaint: repaints the screen screen when stepping over code that modifies the DOM

  expect(received).toBeGreaterThan(expected)
  Expected: > 0
  Received:   0

• resizable-panels-01: Left side Toolbar should be collapsible
• scopes_rerender: Test that scopes are rerendered

  expect(received).toBe(expected) // Object.is equality
  Expected: "true"
  Received: "false"

• sourcemap_stacktrace: Test that stacktraces are sourcemapped

  expect(received).toEqual(expected) // deep equality
  - Expected  - 9
  + Received  + 1
  - Array [
  -   "App.js:9",
  -   "App.js:33",
  -   "regeneratorRuntime.js:44",
  -   "regeneratorRuntime.js:125",

• stacking: Element highlighter selects the correct element when they overlap

  expect(received).toBeGreaterThan(expected)
  Expected: > 0
  Received:   0

• stepping-01: Test basic step-over/back functionality

  expect(received).toBeGreaterThan(expected)
  Expected: > 0
  Received:   0

• stepping-02: Test fixes for some simple stepping bugs

  expect(received).toBeGreaterThan(expected)
  Expected: > 0
  Received:   0

• stepping-03: Stepping past the beginning or end of a frame should act like a step-out

  expect(received).toBeGreaterThan(expected)
  Expected: > 0
  Received:   0

• stepping-04: Test stepping in a frame other than the top frame

  expect(received).toBe(expected) // Object.is equality
  Expected: "true"
  Received: "false"

• stepping-05_chromium: Test stepping in pretty-printed code

  expect(received).toBeGreaterThan(expected)
  Expected: > 0
  Received:   0

• stepping-05: Test stepping in pretty-printed code

  expect(received).toBeGreaterThan(expected)
  Expected: > 0
  Received:   0

• stepping-06: Test stepping in async frames and async call stacks

  expect(received).toBe(expected) // Object.is equality
  Expected: "true"
  Received: "false"

View test run on Replay ↗︎

Snapshot Tests

2 replays were recorded for 12ac4db.

2 Failed

• should render nested, recursive values (as ellipses) without crashing

  page.screenshot: Timeout 5000ms exceeded.
  =========================== logs ===========================
  taking page screenshot
    disabled all CSS animations
  ============================================================

• should render and inspect objects

0 Passed

View test run on Replay ↗︎

[replay-delta]

14 snapshot changes from primary branch

[bvaughn]

I think nested statements like this generally considered to be pretty hard to read. Something like this might be clearer:

Suggested change

	recording && isTestSuiteReplay(recording)
	? "cypress"
	: showTour
	? "tour"
	: !isAuthenticated && comments.length > 0
	? "comments"
	: "events";
	let initialPrimaryPanel;
	if (recording && isTestSuiteReplay(recording)) {
	initialPrimaryPanel = "cypress";
	} else if (showTour) {
	initialPrimaryPanel = "tour";
	} else if (!isAuthenticated && comments.length > 0) {
	initialPrimaryPanel = "comments";
	} else {
	initialPrimaryPanel = "events";
	}

[jonbell-lot23]

Thanks!

[jonbell-lot23]

TSC issues, followed up successfully here: #9207