[dashboard] add modal_dismiss tracking event

[mustard-mh]

Description

Add modal_dismiss tracking event to clarify how and where this modal dismiss.

• manner: how this modal dismiss, value can be one of esc enter x
• specify: specify a key if having the same title and window.location
• title: title of , that needs to do with TODO in this PR

Need preview PR to be merged first

• [dashboard] add location for ide_configuration_changed track event #10131

Tracking Plan

Related Issue(s)

Fixed #9790

How to test

Go to segment to check if modal_dismiss event sent correctly.

1. Go to /workspaces press enter after IDE select modal display, see if modal_dismiss data like

{
  userId: 'a5ef63c4-53fb-4554-ad4b-4b985349e4ee',
  event: 'modal_dismiss',
  properties: {
    manner: 'enter',
    path: '/workspaces',
    specify: 'workspace_list',
    title: 'Select Editor'
  }
}

2. Reset ideSettings of user (or delete user and re-create one), go with /#github.com/gitpod-io/template-sveltejs and press esc to see if modal_dismiss data manner=esc specify=workspace_start

The tests above are checking for specify of IDE select modal. We can test more manner in /variables to easily create a modal here

Release Notes

NONE

Documentation

• /werft analytics=segment|TEZnsG4QbLSxLfHfNieLYGF4cDwyFWoe

[mustard-mh]

/werft run

👍 started the job as gitpod-build-hw-modal-track.6
(with .werft/ from main)

[mustard-mh]

@iQQBot Could you help review/test this?

[geropl]

/werft run

👍 started the job as gitpod-build-hw-modal-track.8
(with .werft/ from main)

[geropl]

build error:

Validating configuration
STDERR: Error: error loading config: error unmarshaling JSON: while decoding JSON: json: unknown field "usage"

@mustard-mh This requires a rebase

[geropl]

@mustard-mh I tested, and it seems to work as expected.

But I noticed that it does not seem to pick up modal dismisses when I regularly click the button.
Is that by intention? 🤔
If yes: Wouldn't it be easier for later analysis to capture modal_closure with maner: esc | enter | x | accept instead, to cover all ways a user can "escape" a modal?

[geropl]

Approving because the code looks good and works.

/hold in case you want to react on this comment

[mustard-mh]

@mustard-mh I tested, and it seems to work as expected.

But I noticed that it does not seem to pick up modal dismisses when I regularly click the button. Is that by intention? 🤔 If yes: Wouldn't it be easier for later analysis to capture modal_closure with maner: esc | enter | x | accept instead, to cover all ways a user can "escape" a modal?

👍 Good point, I will go with it. cc @loujaybee

[mustard-mh]

👍 Good point, I will go with it. cc @loujaybee

@geropl @loujaybee Sometimes when we click on buttons that don't necessarily make the modal disappear. For example, if we need to wait for the result of a request, and the request fails, the modal does not disappear, but waits for the user to make a second click.

So we could probably provide a common method in Modal.tsx to export instead of directly adding?

Or maybe just go with this PR, and make changes in the future if needed?

[geropl]

Or maybe just go with this PR, and make changes in the future if needed?

@mustard-mh Fine with me! Just wanted to bring it up in case it's "quick and easy". 👍

[mustard-mh]

/unhold