Skip to content

Commit

Permalink
[dashboard] update preferences page for desktop IDE's
Browse files Browse the repository at this point in the history
Co-authored-by: George Tsiolis <[email protected]>
Co-authored-by: Jan Keromnes <[email protected]>
  • Loading branch information
3 people committed Jan 20, 2022
1 parent bb80946 commit 2086988
Show file tree
Hide file tree
Showing 3 changed files with 73 additions and 87 deletions.
1 change: 1 addition & 0 deletions components/dashboard/src/icons/IDENone.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
1 change: 1 addition & 0 deletions components/dashboard/src/icons/IDENoneDark.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
158 changes: 71 additions & 87 deletions components/dashboard/src/settings/Preferences.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,6 @@

import { IDEOption, IDEOptions } from "@gitpod/gitpod-protocol/lib/ide-protocol";
import { useContext, useEffect, useState } from "react";
import CheckBox from "../components/CheckBox";
import InfoBox from "../components/InfoBox";
import { PageWithSubMenu } from "../components/PageWithSubMenu";
import PillLabel from "../components/PillLabel";
Expand All @@ -16,73 +15,60 @@ import { getGitpodService } from "../service/service";
import { ThemeContext } from "../theme-context";
import { UserContext } from "../user-context";
import settingsMenu from "./settings-menu";
import IDENone from '../icons/IDENone.svg';
import IDENoneDark from '../icons/IDENoneDark.svg';

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

const DesktopNoneId = "none";
const DesktopNone: IDEOption = {
"image": "",
"logo": IDENone,
"orderKey": "-1",
"title": "None",
"type": "desktop"
};

export default function Preferences() {
const { user } = useContext(UserContext);
const { setIsDark } = useContext(ThemeContext);

const [defaultIde, setDefaultIde] = useState<string>(user?.additionalData?.ideSettings?.defaultIde || "");
const actuallySetDefaultIde = async (value: string) => {
const additionalData = user?.additionalData || {};
const settings = additionalData.ideSettings || {};
settings.defaultIde = value;
const { setIsDark, isDark } = useContext(ThemeContext);

const updateUserIDEInfo = async (defaultDesktopIde: string, defaultIde: string) => {
const useDesktopIde = defaultDesktopIde !== DesktopNoneId;
const additionalData = user?.additionalData ?? {};
const settings = additionalData.ideSettings ?? {};
settings.useDesktopIde = useDesktopIde;
settings.defaultIde = defaultIde;
settings.defaultDesktopIde = defaultDesktopIde;
additionalData.ideSettings = settings;
getGitpodService().server.trackEvent({
event: "ide_configuration_changed",
properties: {
useDesktopIde,
defaultIde: value,
defaultIde,
defaultDesktopIde: useDesktopIde ? defaultDesktopIde : undefined
},
});
}).then().catch(console.error);
await getGitpodService().server.updateLoggedInUser({ additionalData });
}

const [defaultIde, setDefaultIde] = useState<string>(user?.additionalData?.ideSettings?.defaultIde || "");
const actuallySetDefaultIde = async (value: string) => {
await updateUserIDEInfo(defaultDesktopIde, value);
setDefaultIde(value);
}

const [defaultDesktopIde, setDefaultDesktopIde] = useState<string>(user?.additionalData?.ideSettings?.defaultDesktopIde || "");
const actuallySetDefaultDesktopIde = async (value: string) => {
const additionalData = user?.additionalData || {};
const settings = additionalData.ideSettings || {};
settings.defaultDesktopIde = value;
additionalData.ideSettings = settings;
getGitpodService().server.trackEvent({
event: "ide_configuration_changed",
properties: {
useDesktopIde,
defaultIde,
defaultDesktopIde: value
},
});
await getGitpodService().server.updateLoggedInUser({ additionalData });
await updateUserIDEInfo(value, defaultIde);
setDefaultDesktopIde(value);
}

const [useDesktopIde, setUseDesktopIde] = useState<boolean>(user?.additionalData?.ideSettings?.useDesktopIde || false);
const actuallySetUseDesktopIde = async (value: boolean) => {
const additionalData = user?.additionalData || {};
const settings = additionalData.ideSettings || {};
settings.useDesktopIde = value;
// Make sure that default desktop IDE is set even when the user did not explicitly select one.
settings.defaultDesktopIde = defaultDesktopIde;
additionalData.ideSettings = settings;
getGitpodService().server.trackEvent({
event: "ide_configuration_changed",
properties: {
useDesktopIde: value,
defaultIde,
defaultDesktopIde: value ? defaultDesktopIde : undefined
},
});
await getGitpodService().server.updateLoggedInUser({ additionalData });
setUseDesktopIde(value);
}

const [ideOptions, setIdeOptions] = useState<IDEOptions | undefined>(undefined);
useEffect(() => {
(async () => {
const ideopts = await getGitpodService().server.getIDEOptions();
ideopts.options[DesktopNoneId] = DesktopNone;
setIdeOptions(ideopts);
if (!(defaultIde)) {
setDefaultIde(ideopts.defaultIde);
Expand Down Expand Up @@ -117,51 +103,48 @@ export default function Preferences() {

return <div>
<PageWithSubMenu subMenu={settingsMenu} title='Preferences' subtitle='Configure user preferences.'>
{ideOptions && browserIdeOptions && <>
<h3>Editor</h3>
<p className="text-base text-gray-500 dark:text-gray-400">Choose which IDE you want to use.</p>
<div className="my-4 space-x-4 flex">
{
browserIdeOptions.map(([id, option]) => {
const selected = defaultIde === id;
const onSelect = () => actuallySetDefaultIde(id);
return renderIdeOption(option, selected, onSelect);
})
}
</div>
{ideOptions.options[defaultIde].notes &&
<InfoBox className="my-5 max-w-2xl"><ul>
{ideOptions.options[defaultIde].notes?.map((x, idx) => <li className={idx > 0 ? "mt-2" : ""}>{x}</li>)}
</ul></InfoBox>
}
{desktopIdeOptions && desktopIdeOptions.length > 0 && <>
<div className="mt-4 space-x-4 flex">
<CheckBox
title={<div>Open in Desktop IDE <PillLabel type="warn" className="font-semibold mt-2 py-0.5 px-2 self-center">Beta</PillLabel></div>}
desc="Choose whether you would like to open your workspace in a desktop IDE instead."
checked={useDesktopIde}
onChange={(evt) => actuallySetUseDesktopIde(evt.target.checked)} />
{ideOptions && <>
{browserIdeOptions && <>
<h3>Browser Editor</h3>
<p className="text-base text-gray-500 dark:text-gray-400">Choose the default editor for opening workspaces in the browser.</p>
<div className="my-4 gap-4 flex flex-wrap">
{
browserIdeOptions.map(([id, option]) => {
const selected = defaultIde === id;
const onSelect = () => actuallySetDefaultIde(id);
return renderIdeOption(option, selected, onSelect);
})
}
</div>
{useDesktopIde && <>
<div className="my-4 space-x-4 flex">
{
desktopIdeOptions.map(([id, option]) => {
const selected = defaultDesktopIde === id;
const onSelect = () => actuallySetDefaultDesktopIde(id);
return renderIdeOption(option, selected, onSelect);
})
}
</div>

{ideOptions.options[defaultDesktopIde].notes &&
<InfoBox className="my-5 max-w-2xl"><ul>
{ideOptions.options[defaultDesktopIde].notes?.map((x, idx) => <li className={idx > 0 ? "mt-2" : ""}>{x}</li>)}
</ul></InfoBox>
{ideOptions.options[defaultIde]?.notes &&
<InfoBox className="my-5 max-w-2xl"><ul>
{ideOptions.options[defaultIde].notes?.map((x, idx) => <li className={idx > 0 ? "mt-2" : ""}>{x}</li>)}
</ul></InfoBox>
}
</>}
{desktopIdeOptions && <>
<h3 className="mt-12">Desktop Editor</h3>
<p className="text-base text-gray-500 dark:text-gray-400">Optionally, choose the default desktop editor for opening workspaces.</p>
<div className="my-4 gap-4 flex flex-wrap">
{
desktopIdeOptions.map(([id, option]) => {
let selected = defaultDesktopIde === id;
const onSelect = () => actuallySetDefaultDesktopIde(id);
if (id === DesktopNoneId) {
option.logo = isDark ? IDENoneDark : IDENone
}
return renderIdeOption(option, selected, onSelect);
})
}
<p className="text-left w-full text-gray-500">
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>
</p>
</>}
</div>
{ideOptions.options[defaultDesktopIde]?.notes &&
<InfoBox className="my-5 max-w-2xl"><ul>
{ideOptions.options[defaultDesktopIde].notes?.map((x, idx) => <li className={idx > 0 ? "mt-2" : ""}>{x}</li>)}
</ul></InfoBox>
}
<p className="text-left w-full text-gray-500">
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>
</p>
</>}
</>}
<h3 className="mt-12">Theme</h3>
Expand Down Expand Up @@ -201,6 +184,7 @@ export default function Preferences() {
}

function orderedIdeOptions(ideOptions: IDEOptions, type: "browser" | "desktop") {
// TODO: Maybe convert orderKey to number before sort?
return Object.entries(ideOptions.options)
.filter(([_, x]) => x.type === type && !x.hidden)
.sort((a, b) => {
Expand All @@ -216,7 +200,7 @@ function renderIdeOption(option: IDEOption, selected: boolean, onSelect: () => v
<img className="w-16 filter-grayscale self-center"
src={option.logo} alt="logo" />
</div>
{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> : <></>}
{option.label ? <div className={`font-semibold text-sm ${selected ? 'text-green-500' : 'text-gray-500 dark:text-gray-400'} uppercase mt-2 px-3 py-1 self-center`}>{option.label}</div> : <></>}
</SelectableCard>;

if (option.tooltip) {
Expand Down

0 comments on commit 2086988

Please sign in to comment.