Skip to content

Commit c04648b

Browse files
mustard-mhmustard-mh
committed
[dashboard] update preferences page for desktop IDE's
1 parent bb80946 commit c04648b

File tree

1 file changed

+61
-45
lines changed

1 file changed

+61
-45
lines changed

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

Lines changed: 61 additions & 45 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,6 @@
66

77
import { IDEOption, IDEOptions } from "@gitpod/gitpod-protocol/lib/ide-protocol";
88
import { useContext, useEffect, useState } from "react";
9-
import CheckBox from "../components/CheckBox";
109
import InfoBox from "../components/InfoBox";
1110
import { PageWithSubMenu } from "../components/PageWithSubMenu";
1211
import PillLabel from "../components/PillLabel";
@@ -19,6 +18,15 @@ import settingsMenu from "./settings-menu";
1918

2019
type Theme = 'light' | 'dark' | 'system';
2120

21+
const DesktopNoneId = "none"
22+
const DesktopNone: IDEOption = {
23+
"image": "",
24+
"logo": "",
25+
"orderKey": "-1",
26+
"title": "None",
27+
"type": "desktop"
28+
}
29+
2230
export default function Preferences() {
2331
const { user } = useContext(UserContext);
2432
const { setIsDark } = useContext(ThemeContext);
@@ -43,6 +51,10 @@ export default function Preferences() {
4351

4452
const [defaultDesktopIde, setDefaultDesktopIde] = useState<string>(user?.additionalData?.ideSettings?.defaultDesktopIde || "");
4553
const actuallySetDefaultDesktopIde = async (value: string) => {
54+
actuallySetUseDesktopIde(value !== DesktopNoneId)
55+
if (value === DesktopNoneId) {
56+
return
57+
}
4658
const additionalData = user?.additionalData || {};
4759
const settings = additionalData.ideSettings || {};
4860
settings.defaultDesktopIde = value;
@@ -83,6 +95,7 @@ export default function Preferences() {
8395
useEffect(() => {
8496
(async () => {
8597
const ideopts = await getGitpodService().server.getIDEOptions();
98+
ideopts.options[DesktopNoneId] = DesktopNone;
8699
setIdeOptions(ideopts);
87100
if (!(defaultIde)) {
88101
setDefaultIde(ideopts.defaultIde);
@@ -118,50 +131,48 @@ export default function Preferences() {
118131
return <div>
119132
<PageWithSubMenu subMenu={settingsMenu} title='Preferences' subtitle='Configure user preferences.'>
120133
{ideOptions && browserIdeOptions && <>
121-
<h3>Editor</h3>
122-
<p className="text-base text-gray-500 dark:text-gray-400">Choose which IDE you want to use.</p>
123-
<div className="my-4 space-x-4 flex">
124-
{
125-
browserIdeOptions.map(([id, option]) => {
126-
const selected = defaultIde === id;
127-
const onSelect = () => actuallySetDefaultIde(id);
128-
return renderIdeOption(option, selected, onSelect);
129-
})
130-
}
131-
</div>
132-
{ideOptions.options[defaultIde].notes &&
133-
<InfoBox className="my-5 max-w-2xl"><ul>
134-
{ideOptions.options[defaultIde].notes?.map((x, idx) => <li className={idx > 0 ? "mt-2" : ""}>{x}</li>)}
135-
</ul></InfoBox>
136-
}
137-
{desktopIdeOptions && desktopIdeOptions.length > 0 && <>
138-
<div className="mt-4 space-x-4 flex">
139-
<CheckBox
140-
title={<div>Open in Desktop IDE <PillLabel type="warn" className="font-semibold mt-2 py-0.5 px-2 self-center">Beta</PillLabel></div>}
141-
desc="Choose whether you would like to open your workspace in a desktop IDE instead."
142-
checked={useDesktopIde}
143-
onChange={(evt) => actuallySetUseDesktopIde(evt.target.checked)} />
134+
{browserIdeOptions && <>
135+
<h3>Default Browser Editor</h3>
136+
<p className="text-base text-gray-500 dark:text-gray-400">Choose which IDE you want to use.</p>
137+
<div className="my-4 gap-4 flex flex-wrap">
138+
{
139+
browserIdeOptions.map(([id, option]) => {
140+
const selected = defaultIde === id;
141+
const onSelect = () => actuallySetDefaultIde(id);
142+
return renderIdeOption(option, selected, onSelect);
143+
})
144+
}
144145
</div>
145-
{useDesktopIde && <>
146-
<div className="my-4 space-x-4 flex">
147-
{
148-
desktopIdeOptions.map(([id, option]) => {
149-
const selected = defaultDesktopIde === id;
150-
const onSelect = () => actuallySetDefaultDesktopIde(id);
151-
return renderIdeOption(option, selected, onSelect);
152-
})
153-
}
154-
</div>
155-
156-
{ideOptions.options[defaultDesktopIde].notes &&
157-
<InfoBox className="my-5 max-w-2xl"><ul>
158-
{ideOptions.options[defaultDesktopIde].notes?.map((x, idx) => <li className={idx > 0 ? "mt-2" : ""}>{x}</li>)}
159-
</ul></InfoBox>
146+
{ideOptions.options[defaultIde].notes &&
147+
<InfoBox className="my-5 max-w-2xl"><ul>
148+
{ideOptions.options[defaultIde].notes?.map((x, idx) => <li className={idx > 0 ? "mt-2" : ""}>{x}</li>)}
149+
</ul></InfoBox>
150+
}
151+
</>}
152+
{desktopIdeOptions && <>
153+
<h3 className="mt-12">Default Desktop Editor</h3>
154+
<p className="text-base text-gray-500 dark:text-gray-400">Open new workspaces with your preferred choice of desktop editor. Whilst using a desktop editor,<br />you can also work concurrently via the browser editor.</p>
155+
<div className="my-4 gap-4 flex flex-wrap">
156+
{
157+
desktopIdeOptions.map(([id, option]) => {
158+
let selected = useDesktopIde && defaultDesktopIde === id;
159+
let onSelect = () => actuallySetDefaultDesktopIde(id);
160+
if (id === DesktopNoneId) {
161+
selected = !useDesktopIde
162+
onSelect = () => actuallySetUseDesktopIde(false)
163+
}
164+
return renderIdeOption(option, selected, onSelect);
165+
})
160166
}
161-
<p className="text-left w-full text-gray-500">
162-
The <strong>JetBrains desktop IDEs</strong> are currently in beta. <a href="https://github.com/gitpod-io/gitpod/issues/6576" target="gitpod-feedback-issue" rel="noopener" className="gp-link">Send feedback</a> · <a href="https://www.gitpod.io/docs/integrations/jetbrains" target="_blank" rel="noopener noreferrer" className="gp-link">Documentation</a>
163-
</p>
164-
</>}
167+
</div>
168+
{ideOptions.options[defaultDesktopIde].notes &&
169+
<InfoBox className="my-5 max-w-2xl"><ul>
170+
{ideOptions.options[defaultDesktopIde].notes?.map((x, idx) => <li className={idx > 0 ? "mt-2" : ""}>{x}</li>)}
171+
</ul></InfoBox>
172+
}
173+
<p className="text-left w-full text-gray-500">
174+
The <strong>JetBrains desktop IDEs</strong> are currently in beta. <a href="https://github.com/gitpod-io/gitpod/issues/6576" target="gitpod-feedback-issue" rel="noopener" className="gp-link">Send feedback</a> · <a href="https://www.gitpod.io/docs/integrations/jetbrains" target="_blank" rel="noopener noreferrer" className="gp-link">Documentation</a>
175+
</p>
165176
</>}
166177
</>}
167178
<h3 className="mt-12">Theme</h3>
@@ -201,6 +212,7 @@ export default function Preferences() {
201212
}
202213

203214
function orderedIdeOptions(ideOptions: IDEOptions, type: "browser" | "desktop") {
215+
// TODO: Maybe convert orderKey to number
204216
return Object.entries(ideOptions.options)
205217
.filter(([_, x]) => x.type === type && !x.hidden)
206218
.sort((a, b) => {
@@ -213,8 +225,12 @@ function orderedIdeOptions(ideOptions: IDEOptions, type: "browser" | "desktop")
213225
function renderIdeOption(option: IDEOption, selected: boolean, onSelect: () => void): JSX.Element {
214226
const card = <SelectableCard className="w-36 h-40" title={option.title} selected={selected} onClick={onSelect}>
215227
<div className="flex justify-center mt-3">
216-
<img className="w-16 filter-grayscale self-center"
217-
src={option.logo} alt="logo" />
228+
<div className="w-16 h-16 text-center">
229+
{option.logo && option.logo.length > 0 && <>
230+
<img className="w-16 filter-grayscale self-center"
231+
src={option.logo} alt="logo" />
232+
</>}
233+
</div>
218234
</div>
219235
{option.label ? <div className={`font-semibold text-sm ${selected ? 'text-green-500' : 'text-gray-500 dark:text-gray-400'} uppercase mt-2 ml-2 px-3 py-1 self-center`}>{option.label}</div> : <></>}
220236
</SelectableCard>;

0 commit comments

Comments
 (0)