[dashboard] update preferences page for desktop IDE's

[mustard-mh]

Description

update preferences page for desktop IDE's. Link to Figma design

Related Issue(s)

Fixes #7568

How to test

1. Page display like Figma said
2. Socket trace event works like before

Release Notes

NONE

Documentation

[mustard-mh]

/hold

[akosyakov]

@mustard-mh btw you can convert a PR to draft while working on it

[codecov]

Codecov Report

Merging #7653 (ae57609) into main (bb80946) will decrease coverage by 1.25%.
The diff coverage is n/a.

❗ Current head ae57609 differs from pull request most recent head 63e3024. Consider uploading reports for the commit 63e3024 to get more accurate results

@@            Coverage Diff             @@
##             main    #7653      +/-   ##
==========================================
- Coverage   11.63%   10.38%   -1.26%     
==========================================
  Files          20       18       -2     
  Lines        1160      992     -168     
==========================================
- Hits          135      103      -32     
+ Misses       1022      888     -134     
+ Partials        3        1       -2     

Flag	Coverage Δ
components-gitpod-cli-app	10.38% <ø> (ø)
components-local-app-app-darwin-amd64	?
components-local-app-app-darwin-arm64	?
components-local-app-app-linux-amd64	?
components-local-app-app-linux-arm64	?
components-local-app-app-windows-386	?
components-local-app-app-windows-amd64	?
components-local-app-app-windows-arm64	?

Flags with carried forward coverage won't be shown. Click here to find out more.

Impacted Files	Coverage Δ
components/local-app/pkg/auth/pkce.go
components/local-app/pkg/auth/auth.go

---

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update bb80946...63e3024. Read the comment docs.

[gtsiolis]

Hey @mustard-mh!

1️⃣ You've probably seen this already but accessing the /preferences page returns the following error in the console log:

react-dom.production.min.js:216 TypeError: Cannot read properties of undefined (reading 'notes')
    at v (24.e57804ef.chunk.js:1:7317)
    at sa (13.5eb9767c.chunk.js:2:454896)
    at Ha (13.5eb9767c.chunk.js:2:464463)
    at $s (13.5eb9767c.chunk.js:2:508187)
    at Tu (13.5eb9767c.chunk.js:2:494437)
    at Cu (13.5eb9767c.chunk.js:2:494365)
    at Ru (13.5eb9767c.chunk.js:2:494228)
    at yu (13.5eb9767c.chunk.js:2:491194)
    at 13.5eb9767c.chunk.js:2:440688
    at t.unstable_runWithPriority (13.5eb9767c.chunk.js:2:517925)
cs @ react-dom.production.min.js:216
Preferences.tsx:168 Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'notes')
    at v (24.e57804ef.chunk.js:1:7317)
    at sa (13.5eb9767c.chunk.js:2:454896)
    at Ha (13.5eb9767c.chunk.js:2:464463)
    at $s (13.5eb9767c.chunk.js:2:508187)
    at Tu (13.5eb9767c.chunk.js:2:494437)
    at Cu (13.5eb9767c.chunk.js:2:494365)
    at Ru (13.5eb9767c.chunk.js:2:494228)
    at yu (13.5eb9767c.chunk.js:2:491194)
    at 13.5eb9767c.chunk.js:2:440688
    at t.unstable_runWithPriority (13.5eb9767c.chunk.js:2:517925)

2️⃣ See also #7653 (comment) and relevant docs[1][2] for draft PRs, which is probably something we could add in our handbook under How we develop (internal). Cc @akosyakov

[mustard-mh]

Fixed @gtsiolis

[gtsiolis]

Thanks, @mustard-mh!

Looking at this now! 👀

[gtsiolis]

Thanks, @mustard-mh! 🔮

Left some minor non-blocking comments below, regarding UX and copy changes.

I'd defer to @loujaybee for deciding what to ship in this iteration. 🏓

Approving to unblock merging but holding to let @loujaybee decide on the minor suggestions below.

/hold

[roboquat]

LGTM label has been added.

Git tree hash: 1a4879c500ee2aa318a00fc6ac765e52a97b6ab2

[jankeromnes]

Many thanks @mustard-mh for improving the IDE selection code! 🙏

I read the code and the improvements look very good to me overall. 👍 Still, I had a few questions/suggestions, which I added in-line.

Could you please take a look at my comments, and let me know if you agree or disagree with them?

Also, the preview environment seems broken, so I couldn't test this PR, but that's okay since @gtsiolis has already done that. ✅

[mustard-mh]

Also wondering if there has any formatter for dashboard? @jankeromnes

[jankeromnes]

Also wondering if there has any formatter for dashboard? @jankeromnes

Good question. I think when you do F1 > Format Document, it does something (maybe with Prettier?) but I'm not sure where this is configured.

[jankeromnes]

Many thanks for making all these fixes so quickly! 🙏

The code now looks good to me, so I'll approve it.

However, I've noticed a few small problems on second read, so I've added a few more comments and I'll add a hold on this PR so that it doesn't get merged automatically. Please take a look at my comments, and decide whether to address them or not.

Alternatively, if this PR is time-critical, please feel free to remove/cancel the hold, so that this PR gets merged, and to open follow-up issues to address my comments later.

/lgtm
/hold

[roboquat]

LGTM label has been added.

Git tree hash: cfb362e2a950c4a9af750fd3d28b9bf191d0f624

[mustard-mh]

Also wondering if there has any formatter for dashboard? @jankeromnes

Good question. I think when you do F1 > Format Document, it does something (maybe with Prettier?) but I'm not sure where this is configured.

I think it's better to put some lint or format config in dashboard
For me, in this project, I often forget convert let to const, add ; in the trailing and some incorrectly indent 😅

[akosyakov]

@mustard-mh don't forget to unhold if you think it is good to go

[mustard-mh]

/unhold

[akosyakov]

/lgtm

[roboquat]

LGTM label has been added.

Git tree hash: 0106c07905f15ef03b9b8c82bea54a113a33784e

[roboquat]

[APPROVALNOTIFIER] This PR is APPROVED

This pull-request has been approved by: akosyakov, gtsiolis, jankeromnes

Associated issue: #7568

The full list of commands accepted by this bot can be found here.

The pull request process is described here

Needs approval from an approver in each of these files:

• components/dashboard/OWNERS [gtsiolis,jankeromnes]

Approvers can indicate their approval by writing /approve in a comment
Approvers can cancel approval by writing /approve cancel in a comment