From 208698843bcdca750d9ed69a8cec644b72a30f89 Mon Sep 17 00:00:00 2001 From: mustard Date: Wed, 19 Jan 2022 07:21:40 +0000 Subject: [PATCH] [dashboard] update preferences page for desktop IDE's Co-authored-by: George Tsiolis Co-authored-by: Jan Keromnes --- components/dashboard/src/icons/IDENone.svg | 1 + .../dashboard/src/icons/IDENoneDark.svg | 1 + .../dashboard/src/settings/Preferences.tsx | 158 ++++++++---------- 3 files changed, 73 insertions(+), 87 deletions(-) create mode 100644 components/dashboard/src/icons/IDENone.svg create mode 100644 components/dashboard/src/icons/IDENoneDark.svg diff --git a/components/dashboard/src/icons/IDENone.svg b/components/dashboard/src/icons/IDENone.svg new file mode 100644 index 00000000000000..c41b1e54a9585d --- /dev/null +++ b/components/dashboard/src/icons/IDENone.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/components/dashboard/src/icons/IDENoneDark.svg b/components/dashboard/src/icons/IDENoneDark.svg new file mode 100644 index 00000000000000..2e07475eb0c30a --- /dev/null +++ b/components/dashboard/src/icons/IDENoneDark.svg @@ -0,0 +1 @@ + diff --git a/components/dashboard/src/settings/Preferences.tsx b/components/dashboard/src/settings/Preferences.tsx index 3e1f2f8958f3ac..215b8c8e09640d 100644 --- a/components/dashboard/src/settings/Preferences.tsx +++ b/components/dashboard/src/settings/Preferences.tsx @@ -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"; @@ -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(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(user?.additionalData?.ideSettings?.defaultIde || ""); + const actuallySetDefaultIde = async (value: string) => { + await updateUserIDEInfo(defaultDesktopIde, value); setDefaultIde(value); } const [defaultDesktopIde, setDefaultDesktopIde] = useState(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(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(undefined); useEffect(() => { (async () => { const ideopts = await getGitpodService().server.getIDEOptions(); + ideopts.options[DesktopNoneId] = DesktopNone; setIdeOptions(ideopts); if (!(defaultIde)) { setDefaultIde(ideopts.defaultIde); @@ -117,51 +103,48 @@ export default function Preferences() { return
- {ideOptions && browserIdeOptions && <> -

Editor

-

Choose which IDE you want to use.

-
- { - browserIdeOptions.map(([id, option]) => { - const selected = defaultIde === id; - const onSelect = () => actuallySetDefaultIde(id); - return renderIdeOption(option, selected, onSelect); - }) - } -
- {ideOptions.options[defaultIde].notes && -
    - {ideOptions.options[defaultIde].notes?.map((x, idx) =>
  • 0 ? "mt-2" : ""}>{x}
    • )} -
- } - {desktopIdeOptions && desktopIdeOptions.length > 0 && <> -
- Open in Desktop IDE Beta
} - 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 && <> +

Browser Editor

+

Choose the default editor for opening workspaces in the browser.

+
+ { + browserIdeOptions.map(([id, option]) => { + const selected = defaultIde === id; + const onSelect = () => actuallySetDefaultIde(id); + return renderIdeOption(option, selected, onSelect); + }) + }
- {useDesktopIde && <> -
- { - desktopIdeOptions.map(([id, option]) => { - const selected = defaultDesktopIde === id; - const onSelect = () => actuallySetDefaultDesktopIde(id); - return renderIdeOption(option, selected, onSelect); - }) - } -
- - {ideOptions.options[defaultDesktopIde].notes && -
    - {ideOptions.options[defaultDesktopIde].notes?.map((x, idx) =>
  • 0 ? "mt-2" : ""}>{x}
    • )} -
+ {ideOptions.options[defaultIde]?.notes && +
    + {ideOptions.options[defaultIde].notes?.map((x, idx) =>
  • 0 ? "mt-2" : ""}>{x}
    • )} +
+ } + } + {desktopIdeOptions && <> +

Desktop Editor

+

Optionally, choose the default desktop editor for opening workspaces.

+
+ { + 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); + }) } -

- The JetBrains desktop IDEs are currently in beta. Send feedback · Documentation -

- } +
+ {ideOptions.options[defaultDesktopIde]?.notes && +
    + {ideOptions.options[defaultDesktopIde].notes?.map((x, idx) =>
  • 0 ? "mt-2" : ""}>{x}
    • )} +
+ } +

+ The JetBrains desktop IDEs are currently in beta. Send feedback · Documentation +

} }

Theme

@@ -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) => { @@ -216,7 +200,7 @@ function renderIdeOption(option: IDEOption, selected: boolean, onSelect: () => v logo
- {option.label ?
{option.label}
: <>} + {option.label ?
{option.label}
: <>} ; if (option.tooltip) {