Restore beta label for the desktop editor settings

[gtsiolis]

Description

Following the changes in #7653, this will restore beta label for the desktop editor settings. Cc @mustard-mh

See also relevant discussion (internal).

How to test

1. Go to /preferences
2. Notice there's a beta label next to Desktop Editor settings.

Screenshots

BEFORE	AFTER

Release Notes

NONE

[codecov]

Codecov Report

Merging #7775 (ab448a0) into main (c3bcf63) will decrease coverage by 1.25%.
The diff coverage is n/a.

@@            Coverage Diff             @@
##             main    #7775      +/-   ##
==========================================
- Coverage   11.54%   10.28%   -1.26%     
==========================================
  Files          20       18       -2     
  Lines        1169     1001     -168     
==========================================
- Hits          135      103      -32     
+ Misses       1031      897     -134     
+ Partials        3        1       -2     

Flag	Coverage Δ
components-gitpod-cli-app	10.28% <ø> (ø)
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/auth.go
components/local-app/pkg/auth/pkce.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 c3bcf63...ab448a0. Read the comment docs.

[roboquat]

LGTM label has been added.

Git tree hash: d92f52cd6dbdfecdfb62da53f36c94d1047a34f1

[jankeromnes]

Also looks good to me, many thanks for fixing this!

See quick note about the ineffective self-center flex class FYI.

/approve

[jankeromnes]

Note: self-center is a flex related class (stands for align-self: center). It has no effect here, because the parent <h3> is not a flex container (i.e. it doesn't have the flex class, so it's using the default layout, where align-self doesn't exist / has no effect).

I think that's why the label is a little low (vertically). To fix it, you could make the <h3> a flex (also, it's generally preferable to center all the items in the flex with a items-center class on the parent, as opposed to centering each item separately using self-center on the children):

Suggested change

	<h3 className="mt-12">Desktop Editor <PillLabel type="warn" className="font-semibold mt-2 py-0.5 px-2 self-center">Beta</PillLabel></h3>
	<h3 className="mt-12 flex items-center">Desktop Editor <PillLabel type="warn" className="font-semibold mt-2 py-0.5 px-2">Beta</PillLabel></h3>

[gtsiolis]

Thanks for the insights, @jankeromnes! FWIW, I blindly copied the label component a couple of lines below but definitely worth fixing this alignement.

gitpod/components/dashboard/src/settings/Preferences.tsx

Line 171 in 0e1109f

<h3 className="mt-12">Dotfiles <PillLabel type="warn" className="font-semibold mt-2 py-0.5 px-2 self-center">Beta</PillLabel></h3>

I think that's why the label is a little low (vertically).

Thanks for noticing this! Makes me feel a little less crazy. 🧡

[jankeromnes]

/approve no-issue

[roboquat]

[APPROVALNOTIFIER] This PR is APPROVED

This pull-request has been approved by: iQQBot, jankeromnes

Associated issue requirement bypassed by: jankeromnes

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 [jankeromnes]

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