[dashboard] Simplify SettingsPage component by folding the SubMenu back into it

Author: jankeromnes

components/dashboard/src/components/SettingsPage.tsx

@@ -1,9 +1,8 @@
 import { User } from "@gitpod/gitpod-protocol";
 import { useContext, useState } from "react";
 import Modal from "../components/Modal";
-import { SettingsPage } from "../components/SettingsPage";
 import { UserContext } from "../user-context";
-import settingsMenu from "./settings-menu";
+import { SettingsPage } from "./SettingsPage";
 
 export default function Account() {
     const { user } = useContext(UserContext);
@@ -20,7 +19,7 @@ export default function Account() {
             </div>
         </Modal>
 
-        <SettingsPage title='Account' subtitle='Profile details' menuEntries={settingsMenu}>
+        <SettingsPage title='Account' subtitle='Profile details'>
             <h3>Profile</h3>
             <div className="flex flex-col lg:flex-row">
                 <div>

components/dashboard/src/components/SubMenu.tsx

@@ -1,9 +1,8 @@
-import { SettingsPage } from "../components/SettingsPage";
-import settingsMenu from './settings-menu';
+import { SettingsPage } from "./SettingsPage";
 
 export default function EnvVars() {
     return <div>
-        <SettingsPage title='Environment Variables' subtitle='Configure environment variables for your workspaces' menuEntries={settingsMenu}>
+        <SettingsPage title='Environment Variables' subtitle='Configure environment variables for your workspaces'>
             <h3>Environment Variables</h3>
         </SettingsPage>
     </div>;

components/dashboard/src/settings/Account.tsx

@@ -1,9 +1,8 @@
-import { SettingsPage } from "../components/SettingsPage";
-import settingsMenu from './settings-menu';
+import { SettingsPage } from "./SettingsPage";
 
 export default function GitIntegrations() {
     return <div>
-        <SettingsPage title='Git Integrations' subtitle='Manage integration with your Git hosters' menuEntries={settingsMenu}>
+        <SettingsPage title='Git Integrations' subtitle='Manage integration with your Git hosters'>
             <h3>Git Hoster Access Control</h3>
         </SettingsPage>
     </div>;

components/dashboard/src/settings/EnvironmentVariables.tsx

@@ -1,9 +1,8 @@
-import { SettingsPage } from "../components/SettingsPage";
-import settingsMenu from "./settings-menu";
+import { SettingsPage } from "./SettingsPage";
 
 export default function Notifications() {
     return <div>
-        <SettingsPage title='Notifications' subtitle='Email notification preferences' menuEntries={settingsMenu}>
+        <SettingsPage title='Notifications' subtitle='Email notification preferences'>
             <h3>Notifications</h3>
         </SettingsPage>
     </div>;

components/dashboard/src/settings/GitIntegrations.tsx

@@ -1,9 +1,8 @@
-import { SettingsPage } from "../components/SettingsPage";
-import settingsMenu from "./settings-menu";
+import { SettingsPage } from "./SettingsPage";
 
 export default function Plans() {
     return <div>
-        <SettingsPage title='Plans' subtitle='Plans and Usage' menuEntries={settingsMenu} >
+        <SettingsPage title='Plans' subtitle='Plans and Usage'>
             <h3>Plans</h3>
         </SettingsPage>
     </div>;

components/dashboard/src/settings/Notifications.tsx

@@ -1,15 +1,14 @@
 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";
+import { SettingsPage } from "./SettingsPage";
 
 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}>
+        <SettingsPage title='Preferences' subtitle='Configure your Default IDE for all workspaces.'>
             <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">

components/dashboard/src/settings/Plans.tsx

@@ -0,0 +1,37 @@
+import { Link } from "react-router-dom";
+import Header from '../components/Header';
+import settingsMenu from "./settings-menu";
+
+export interface Props {
+    title: string;
+    subtitle: string;
+    children: React.ReactNode;
+}
+
+export function SettingsPage(p: Props) {
+    return <div>
+        <Header title={p.title} subtitle={p.subtitle}/>
+        <div className='lg:px-28 px-10 flex pt-9'>
+            <div>
+                <ul className="flex flex-col text-sm text-gray-500 pt-4 lg:pt-0 w-48 space-y-2">
+                    {settingsMenu.map(e => {
+                        let classes = "flex block py-2 font-sm px-4 rounded-md";
+                        if (e.link.toLowerCase() === window.location.pathname) {
+                            classes += " bg-gray-800 text-gray-50";
+                        } else {
+                            classes += " hover:bg-gray-100";
+                        }
+                        return <Link to={e.link} key={e.title}>
+                            <li className={classes}>
+                                {e.title}
+                            </li>
+                        </Link>;
+                    })}
+                </ul>
+            </div>
+            <div className='ml-32 w-full pt-1'>
+                {p.children}
+            </div>
+        </div>
+    </div>;
+}

components/dashboard/src/settings/Preferences.tsx

@@ -2,9 +2,9 @@ import React, { Suspense } from "react";
 import { CreateWorkspaceMode, WorkspaceCreationResult } from "@gitpod/gitpod-protocol";
 import { ErrorCodes } from "@gitpod/gitpod-protocol/lib/messaging/error";
 import Modal from "../components/Modal";
-import { StartPage, StartPhase } from "../components/StartPage";
-import StartWorkspace from "./StartWorkspace";
 import { getGitpodService } from "../service/service";
+import { StartPage, StartPhase } from "./StartPage";
+import StartWorkspace from "./StartWorkspace";
 
 const WorkspaceLogs = React.lazy(() => import('./WorkspaceLogs'));
 

components/dashboard/src/settings/SettingsPage.tsx

@@ -1,8 +1,8 @@
 import React from "react";
 import { DisposableCollection, WorkspaceInstance } from "@gitpod/gitpod-protocol";
 import { GitpodHostUrl } from "@gitpod/gitpod-protocol/lib/util/gitpod-host-url";
-import { StartPage, StartPhase } from "../components/StartPage";
 import { getGitpodService } from "../service/service";
+import { StartPage, StartPhase } from "./StartPage";
 
 export interface StartWorkspaceProps {
   workspaceId: string;