[dashboard] Re-implement default IDE switch for new dashboard

Author: jankeromnes

components/dashboard/public/images/theia.svg

@@ -14,7 +14,7 @@ const Notifications = React.lazy(() => import('./settings/Notifications'));
 const Plans = React.lazy(() => import('./settings/Plans'));
 const EnvironmentVariables = React.lazy(() => import('./settings/EnvironmentVariables'));
 const GitIntegrations = React.lazy(() => import('./settings/GitIntegrations'));
-const DefaultIDE = React.lazy(() => import('./settings/DefaultIDE'));
+const Preferences = React.lazy(() => import('./settings/Preferences'));
 
 function Loading() {
     return (<h3>Loading...</h3>);
@@ -73,7 +73,7 @@ function App() {
                                 <Route path="/plans" exact component={Plans} />
                                 <Route path="/variables" exact component={EnvironmentVariables} />
                                 <Route path="/integrations" exact component={GitIntegrations} />
-                                <Route path="/default-ide" exact component={DefaultIDE} />
+                                <Route path="/preferences" exact component={Preferences} />
                             </React.Fragment>
                         )}
                     </Switch>

components/dashboard/public/images/vscode.svg

@@ -0,0 +1,19 @@
+export interface OptionCardProps {
+    title: string;
+    selected: boolean;
+    className?: string;
+    onClick: () => void;
+    children?: React.ReactNode;
+}
+
+function OptionCard(props: OptionCardProps) {
+    return <div className={`rounded-xl px-4 py-3 flex flex-col group border-2 ${props.selected ? 'border-green-600' : 'border-gray-300 hover:border-gray-400'} ${props.className || ''}`} onClick={props.onClick}>
+        <div className="flex items-center">
+            <p className={`w-full text-base font-semibold ${props.selected ? 'text-green-600' : 'text-gray-300 group-hover:text-gray-400'}`}>{props.title}</p>
+            <input type="radio" checked={props.selected} />
+        </div>
+        {props.children}
+    </div>;
+}
+
+export default OptionCard;

components/dashboard/src/App.tsx

@@ -0,0 +1,36 @@
+import { useContext, useState } from "react";
+import OptionCard from "../components/OptionCard";
+import { SettingsPage } from "../components/SettingsPage";
+import { UserContext } from "../user-context";
+import settingsMenu from "./settings-menu";
+
+export default function Preferences() {
+    const { user } = useContext(UserContext);
+    const [ defaultIde, setDefaultIde ] = useState<string>(user?.additionalData?.ideSettings?.defaultIde || 'code');
+
+    return <div>
+        <SettingsPage title='Preferences' subtitle='Configure your Default IDE for all workspaces.' menuEntries={settingsMenu}>
+            <h3>Default IDE</h3>
+            <p className="text-base">Gitpod is using Code as the default IDE.</p>
+            <div className="mt-4 space-x-4 flex">
+                <OptionCard className="w-36 h-40" title="VS Code" selected={defaultIde === 'code'} onClick={()=>setDefaultIde('code')}>
+                    <div className="flex-grow flex justify-center align-center">
+                        <img className="w-16" src="/images/vscode.svg"/>
+                    </div>
+                </OptionCard>
+                <OptionCard className="w-36 h-40" title="Theia" selected={defaultIde === 'theia'} onClick={()=>setDefaultIde('theia')}>
+                    <div className="flex-grow flex justify-center align-center">
+                        <img className="w-16" src="/images/theia.svg"/>
+                    </div>
+                </OptionCard>
+                <OptionCard className="w-36 h-40" title="Custom" selected={!['code', 'theia'].includes(defaultIde)} onClick={()=>setDefaultIde('')}></OptionCard>
+            </div>
+            <div className="mt-4">
+                <label className={['code', 'theia'].includes(defaultIde) ? 'opacity-0' : 'opacity-100'}>
+                    <p className="text-base text-gray-600 font-bold leading-5">Custom IDE image name</p>
+                    <input className="w-80 mt-1" type="text" />
+                </label>
+            </div>
+        </SettingsPage>
+    </div>;
+}

components/dashboard/src/components/OptionCard.tsx

@@ -20,7 +20,7 @@ export default [
         link: '/integrations'
     },
     {
-        title: 'Default IDE',
-        link: '/default-ide'
+        title: 'Preferences',
+        link: '/preferences'
     },
 ];