Skip to content

Commit d837cf9

Browse files
author
Andrea Falzetti
committed
feat: ide awareness during onboarding
1 parent a60b913 commit d837cf9

File tree

3 files changed

+355
-180
lines changed

3 files changed

+355
-180
lines changed

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

Lines changed: 87 additions & 157 deletions
Original file line numberDiff line numberDiff line change
@@ -4,22 +4,23 @@
44
* See License-AGPL.txt in the project root for license information.
55
*/
66

7-
import { IDEOption, IDEOptions } from "@gitpod/gitpod-protocol/lib/ide-protocol";
8-
import { useContext, useEffect, useState } from "react";
9-
import InfoBox from "../components/InfoBox";
7+
// import { IDEOption, IDEOptions } from "@gitpod/gitpod-protocol/lib/ide-protocol";
8+
import { useContext, useState } from "react";
9+
// import InfoBox from "../components/InfoBox";
1010
import { PageWithSubMenu } from "../components/PageWithSubMenu";
1111
import PillLabel from "../components/PillLabel";
1212
import SelectableCard from "../components/SelectableCard";
13-
import SelectableCardSolid from "../components/SelectableCardSolid";
14-
import Tooltip from "../components/Tooltip";
13+
// import SelectableCardSolid from "../components/SelectableCardSolid";
14+
// import Tooltip from "../components/Tooltip";
1515
import { getGitpodService } from "../service/service";
1616
import { ThemeContext } from "../theme-context";
1717
import { UserContext } from "../user-context";
1818
import getSettingsMenu from "./settings-menu";
1919
import { trackEvent } from "../Analytics";
2020
import { PaymentContext } from "../payment-context";
21-
import CheckBox from "../components/CheckBox";
21+
// import CheckBox from "../components/CheckBox";
2222
import { IDESettings } from "@gitpod/gitpod-protocol";
23+
import SelectIDE from "./SelectIDE";
2324

2425
type Theme = "light" | "dark" | "system";
2526

@@ -55,51 +56,51 @@ export default function Preferences() {
5556
};
5657
migrationIDESettings();
5758

58-
const updateUserIDEInfo = async (selectedIde: string, useLatestVersion: boolean) => {
59-
const additionalData = user?.additionalData ?? {};
60-
const settings = additionalData.ideSettings ?? {};
61-
settings.settingVersion = "2.0";
62-
settings.defaultIde = selectedIde;
63-
settings.useLatestVersion = useLatestVersion;
64-
additionalData.ideSettings = settings;
65-
getGitpodService()
66-
.server.trackEvent({
67-
event: "ide_configuration_changed",
68-
properties: settings,
69-
})
70-
.then()
71-
.catch(console.error);
72-
await getGitpodService().server.updateLoggedInUser({ additionalData });
73-
};
59+
// const updateUserIDEInfo = async (selectedIde: string, useLatestVersion: boolean) => {
60+
// const additionalData = user?.additionalData ?? {};
61+
// const settings = additionalData.ideSettings ?? {};
62+
// settings.settingVersion = "2.0";
63+
// settings.defaultIde = selectedIde;
64+
// settings.useLatestVersion = useLatestVersion;
65+
// additionalData.ideSettings = settings;
66+
// getGitpodService()
67+
// .server.trackEvent({
68+
// event: "ide_configuration_changed",
69+
// properties: settings,
70+
// })
71+
// .then()
72+
// .catch(console.error);
73+
// await getGitpodService().server.updateLoggedInUser({ additionalData });
74+
// };
7475

75-
const [defaultIde, setDefaultIde] = useState<string>(user?.additionalData?.ideSettings?.defaultIde || "");
76-
const actuallySetDefaultIde = async (value: string) => {
77-
await updateUserIDEInfo(value, useLatestVersion);
78-
setDefaultIde(value);
79-
};
76+
// const [defaultIde, setDefaultIde] = useState<string>(user?.additionalData?.ideSettings?.defaultIde || "");
77+
// const actuallySetDefaultIde = async (value: string) => {
78+
// await updateUserIDEInfo(value, useLatestVersion);
79+
// setDefaultIde(value);
80+
// };
8081

81-
const [useLatestVersion, setUseLatestVersion] = useState<boolean>(
82-
user?.additionalData?.ideSettings?.useLatestVersion ?? false,
83-
);
84-
const actuallySetUseLatestVersion = async (value: boolean) => {
85-
await updateUserIDEInfo(defaultIde, value);
86-
setUseLatestVersion(value);
87-
};
82+
// const [useLatestVersion, setUseLatestVersion] = useState<boolean>(
83+
// user?.additionalData?.ideSettings?.useLatestVersion ?? false,
84+
// );
85+
// const actuallySetUseLatestVersion = async (value: boolean) => {
86+
// await updateUserIDEInfo(defaultIde, value);
87+
// setUseLatestVersion(value);
88+
// };
8889

89-
const [ideOptions, setIdeOptions] = useState<IDEOptions | undefined>(undefined);
90-
useEffect(() => {
91-
(async () => {
92-
const ideopts = await getGitpodService().server.getIDEOptions();
93-
// TODO: Compatible with ide-config not deployed, need revert after ide-config deployed
94-
delete ideopts.options["code-latest"];
95-
delete ideopts.options["code-desktop-insiders"];
90+
// const [ideOptions, setIdeOptions] = useState<IDEOptions | undefined>(undefined);
91+
// useEffect(() => {
92+
// (async () => {
93+
// const ideopts = await getGitpodService().server.getIDEOptions();
94+
// // TODO: Compatible with ide-config not deployed, need revert after ide-config deployed
95+
// delete ideopts.options["code-latest"];
96+
// delete ideopts.options["code-desktop-insiders"];
9697

97-
setIdeOptions(ideopts);
98-
if (!defaultIde || ideopts.options[defaultIde] == null) {
99-
setDefaultIde(ideopts.defaultIde);
100-
}
101-
})();
102-
}, []);
98+
// setIdeOptions(ideopts);
99+
// if (!defaultIde || ideopts.options[defaultIde] == null) {
100+
// setDefaultIde(ideopts.defaultIde);
101+
// }
102+
// })();
103+
// }, []);
103104

104105
const [theme, setTheme] = useState<Theme>(localStorage.theme || "system");
105106
const actuallySetTheme = (theme: Theme) => {
@@ -115,7 +116,7 @@ export default function Preferences() {
115116
setTheme(theme);
116117
};
117118

118-
const allIdeOptions = ideOptions && orderedIdeOptions(ideOptions);
119+
// const allIdeOptions = ideOptions && orderedIdeOptions(ideOptions);
119120

120121
const [dotfileRepo, setDotfileRepo] = useState<string>(user?.additionalData?.dotfileRepo || "");
121122
const actuallySetDotfileRepo = async (value: string) => {
@@ -136,80 +137,9 @@ export default function Preferences() {
136137
title="Preferences"
137138
subtitle="Configure user preferences."
138139
>
139-
{ideOptions && (
140-
<>
141-
{allIdeOptions && (
142-
<>
143-
<h3>Editor</h3>
144-
<p className="text-base text-gray-500 dark:text-gray-400">
145-
Choose the editor for opening workspaces.
146-
</p>
147-
<div className="my-4 gap-4 flex flex-wrap max-w-2xl">
148-
{allIdeOptions.map(([id, option]) => {
149-
const selected = defaultIde === id;
150-
const onSelect = () => actuallySetDefaultIde(id);
151-
return renderIdeOption(option, selected, onSelect);
152-
})}
153-
</div>
154-
{ideOptions.options[defaultIde]?.notes && (
155-
<InfoBox className="my-5 max-w-2xl">
156-
<ul>
157-
{ideOptions.options[defaultIde].notes?.map((x, idx) => (
158-
<li className={idx > 0 ? "mt-2" : ""}>{x}</li>
159-
))}
160-
</ul>
161-
</InfoBox>
162-
)}
163-
<p className="text-left w-full text-gray-500">
164-
The <strong>JetBrains desktop IDEs</strong> are currently in beta.{" "}
165-
<a
166-
href="https://github.com/gitpod-io/gitpod/issues/6576"
167-
target="gitpod-feedback-issue"
168-
rel="noopener"
169-
className="gp-link"
170-
>
171-
Send feedback
172-
</a>{" "}
173-
·{" "}
174-
<a
175-
href="https://www.gitpod.io/docs/integrations/jetbrains"
176-
target="_blank"
177-
rel="noopener noreferrer"
178-
className="gp-link"
179-
>
180-
Documentation
181-
</a>
182-
</p>
183-
</>
184-
)}
185-
<CheckBox
186-
title="Latest Release (Unstable)"
187-
desc={
188-
<span>
189-
Use the latest version for each editor.{" "}
190-
<a
191-
className="gp-link"
192-
target="_blank"
193-
href="https://code.visualstudio.com/blogs/2016/02/01/introducing_insiders_build"
194-
>
195-
Insiders
196-
</a>{" "}
197-
for VS Code,{" "}
198-
<a
199-
className="gp-link"
200-
target="_blank"
201-
href="https://www.jetbrains.com/resources/eap/"
202-
>
203-
EAP
204-
</a>{" "}
205-
for JetBrains IDEs.
206-
</span>
207-
}
208-
checked={useLatestVersion}
209-
onChange={(e) => actuallySetUseLatestVersion(e.target.checked)}
210-
/>
211-
</>
212-
)}
140+
<h3>Editor</h3>
141+
<p className="text-base text-gray-500 dark:text-gray-400">Choose the editor for opening workspaces.</p>
142+
<SelectIDE />
213143
<h3 className="mt-12">Theme</h3>
214144
<p className="text-base text-gray-500 dark:text-gray-400">Early bird or night owl? Choose your side.</p>
215145
<div className="mt-4 space-x-4 flex">
@@ -295,40 +225,40 @@ export default function Preferences() {
295225
);
296226
}
297227

298-
function orderedIdeOptions(ideOptions: IDEOptions) {
299-
// TODO: Maybe convert orderKey to number before sort?
300-
return Object.entries(ideOptions.options)
301-
.filter(([_, x]) => !x.hidden)
302-
.sort((a, b) => {
303-
const keyA = a[1].orderKey || a[0];
304-
const keyB = b[1].orderKey || b[0];
305-
return keyA.localeCompare(keyB);
306-
});
307-
}
228+
// function orderedIdeOptions(ideOptions: IDEOptions) {
229+
// // TODO: Maybe convert orderKey to number before sort?
230+
// return Object.entries(ideOptions.options)
231+
// .filter(([_, x]) => !x.hidden)
232+
// .sort((a, b) => {
233+
// const keyA = a[1].orderKey || a[0];
234+
// const keyB = b[1].orderKey || b[0];
235+
// return keyA.localeCompare(keyB);
236+
// });
237+
// }
308238

309-
function renderIdeOption(option: IDEOption, selected: boolean, onSelect: () => void): JSX.Element {
310-
const label = option.type === "desktop" ? "" : option.type;
311-
const card = (
312-
<SelectableCardSolid className="w-36 h-40" title={option.title} selected={selected} onClick={onSelect}>
313-
<div className="flex justify-center mt-3">
314-
<img className="w-16 filter-grayscale self-center" src={option.logo} alt="logo" />
315-
</div>
316-
{label ? (
317-
<div
318-
className={`font-semibold text-sm ${
319-
selected ? "text-gray-100 dark:text-gray-600" : "text-gray-600 dark:text-gray-500"
320-
} uppercase mt-2 px-3 py-1 self-center`}
321-
>
322-
{label}
323-
</div>
324-
) : (
325-
<></>
326-
)}
327-
</SelectableCardSolid>
328-
);
239+
// function renderIdeOption(option: IDEOption, selected: boolean, onSelect: () => void): JSX.Element {
240+
// const label = option.type === "desktop" ? "" : option.type;
241+
// const card = (
242+
// <SelectableCardSolid className="w-36 h-40" title={option.title} selected={selected} onClick={onSelect}>
243+
// <div className="flex justify-center mt-3">
244+
// <img className="w-16 filter-grayscale self-center" src={option.logo} alt="logo" />
245+
// </div>
246+
// {label ? (
247+
// <div
248+
// className={`font-semibold text-sm ${
249+
// selected ? "text-gray-100 dark:text-gray-600" : "text-gray-600 dark:text-gray-500"
250+
// } uppercase mt-2 px-3 py-1 self-center`}
251+
// >
252+
// {label}
253+
// </div>
254+
// ) : (
255+
// <></>
256+
// )}
257+
// </SelectableCardSolid>
258+
// );
329259

330-
if (option.tooltip) {
331-
return <Tooltip content={option.tooltip}>{card}</Tooltip>;
332-
}
333-
return card;
334-
}
260+
// if (option.tooltip) {
261+
// return <Tooltip content={option.tooltip}>{card}</Tooltip>;
262+
// }
263+
// return card;
264+
// }

0 commit comments

Comments
 (0)