Skip to content

Commit

Permalink
[dashboard] update preferences page for desktop IDE's
Browse files Browse the repository at this point in the history
  • Loading branch information
@mustard-mh
mustard-mh committed Jan 18, 2022
1 parent bb80946 commit 2f56afd
Showing 1 changed file with 57 additions and 45 deletions.
102 changes: 57 additions & 45 deletions components/dashboard/src/settings/Preferences.tsx
View file
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 @@ -19,6 +18,15 @@ import settingsMenu from "./settings-menu";

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

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

export default function Preferences() {
const { user } = useContext(UserContext);
const { setIsDark } = useContext(ThemeContext);
Expand All @@ -43,6 +51,10 @@ export default function Preferences() {

const [defaultDesktopIde, setDefaultDesktopIde] = useState<string>(user?.additionalData?.ideSettings?.defaultDesktopIde || "");
const actuallySetDefaultDesktopIde = async (value: string) => {
actuallySetUseDesktopIde(value !== DesktopNoneId)
if (value === DesktopNoneId) {
return
}
const additionalData = user?.additionalData || {};
const settings = additionalData.ideSettings || {};
settings.defaultDesktopIde = value;
Expand Down Expand Up @@ -83,6 +95,7 @@ export default function Preferences() {
useEffect(() => {
(async () => {
const ideopts = await getGitpodService().server.getIDEOptions();
ideopts.options[DesktopNoneId] = DesktopNone;
setIdeOptions(ideopts);
if (!(defaultIde)) {
setDefaultIde(ideopts.defaultIde);
Expand Down Expand Up @@ -118,50 +131,44 @@ 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)} />
{browserIdeOptions && <>
<h3>Default Browser 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 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">Default Desktop Editor</h3>
<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>
<div className="my-4 gap-4 flex flex-wrap">
{
desktopIdeOptions.map(([id, option]) => {
const selected = defaultDesktopIde === id;
const onSelect = () => actuallySetDefaultDesktopIde(id);
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 +208,7 @@ export default function Preferences() {
}

function orderedIdeOptions(ideOptions: IDEOptions, type: "browser" | "desktop") {
// TODO: Maybe convert orderKey to number
return Object.entries(ideOptions.options)
.filter(([_, x]) => x.type === type && !x.hidden)
.sort((a, b) => {
Expand All @@ -213,8 +221,12 @@ function orderedIdeOptions(ideOptions: IDEOptions, type: "browser" | "desktop")
function renderIdeOption(option: IDEOption, selected: boolean, onSelect: () => void): JSX.Element {
const card = <SelectableCard className="w-36 h-40" title={option.title} selected={selected} onClick={onSelect}>
<div className="flex justify-center mt-3">
<img className="w-16 filter-grayscale self-center"
src={option.logo} alt="logo" />
<div className="w-16 h-16 text-center">
{option.logo && option.logo.length > 0 && <>
<img className="w-16 filter-grayscale self-center"
src={option.logo} alt="logo" />
</>}
</div>
</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> : <></>}
</SelectableCard>;
Expand Down

0 comments on commit 2f56afd

Please sign in to comment.