[dashboard] Merge Account and Settings pages into a single sub-menu, …

…align names with UX spec
gitpod-io · Mar 16, 2021 · 768bea8 · 768bea8
1 parent eda11c2
commit 768bea8
Show file tree

Hide file tree

Showing 12 changed files with 50 additions and 71 deletions.
diff --git a/components/dashboard/src/App.tsx b/components/dashboard/src/App.tsx
@@ -9,13 +9,12 @@ import { Login } from './Login';
 import { UserContext } from './user-context';
 import { gitpodService } from './service/service';
 
-const Notifications = React.lazy(() => import('./account/Notifications'));
-const Profile = React.lazy(() => import('./account/Profile'));
-const Subscriptions = React.lazy(() => import('./account/Subscriptions'));
+const Account = React.lazy(() => import('./settings/Account'));
+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 EnvVars = React.lazy(() => import('./settings/EnvVars'));
-const FeaturePreview = React.lazy(() => import('./settings/FeaturePreview'));
-const GitIntegration = React.lazy(() => import('./settings/GitIntegration'));
 
 function Loading() {
     return (<h3>Loading...</h3>);
@@ -70,12 +69,11 @@ function App() {
                             <React.Fragment>
                                 <Route path={["/", "/workspaces"]} exact render={
                                     () => <Workspaces gitpodService={gitpodService} />} />
-                                <Route path="/profile" exact component={Profile} />
+                                <Route path="/account" exact component={Account} />
                                 <Route path="/notifications" exact component={Notifications} />
-                                <Route path="/subscriptions" exact component={Subscriptions} />
-                                <Route path="/env-vars" exact component={EnvVars} />
-                                <Route path="/git-integration" exact component={GitIntegration} />
-                                <Route path="/feature-preview" exact component={FeaturePreview} />
+                                <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} />
                             </React.Fragment>
                         )}
@@ -94,11 +92,11 @@ const renderMenu = () => (
     <Menu left={[
         {
             title: 'Workspaces',
-            link: '/'
+            link: '/workspaces'
         },
         {
             title: 'Settings',
-            link: '/profile'
+            link: '/account'
         },
     ]}
         right={[

diff --git a/components/dashboard/src/account/Subscriptions.tsx b/components/dashboard/src/account/Subscriptions.tsx
diff --git a/components/dashboard/src/account/account-menu.ts b/components/dashboard/src/account/account-menu.ts
diff --git a/components/dashboard/src/components/Menu.tsx b/components/dashboard/src/components/Menu.tsx
@@ -57,7 +57,7 @@ function Menu(props: { left: Entry[], right: Entry[] }) {
                         {props.right.map(MenuItem)}
                     </ul>
                 </nav>
-                <Link className="lg:ml-4 flex items-center justify-start lg:mb-0 mb-4 pointer-cursor m-l-auto rounded-full border-2 hover:border-gray-400 p-0.5" to="/profile">
+                <Link className="lg:ml-4 flex items-center justify-start lg:mb-0 mb-4 pointer-cursor m-l-auto rounded-full border-2 hover:border-gray-400 p-0.5" to="/account">
                     <img className="rounded-full w-6 h-6"
                         src={user?.avatarUrl || ''} alt={user?.name || 'Anonymous'} />
                 </Link>

diff --git a/components/dashboard/src/account/Profile.tsx → ...onents/dashboard/src/settings/Account.tsx b/components/dashboard/src/account/Profile.tsx → ...onents/dashboard/src/settings/Account.tsx
@@ -3,9 +3,9 @@ import { useContext, useState } from "react";
 import Modal from "../components/Modal";
 import { SettingsPage } from "../components/SettingsPage";
 import { UserContext } from "../user-context";
-import accountMenu from "./account-menu";
+import settingsMenu from "./settings-menu";
 
-export default function Profile() {
+export default function Account() {
     const { user } = useContext(UserContext);
 
     const [modal, setModal] = useState(false);
@@ -20,7 +20,7 @@ export default function Profile() {
             </div>
         </Modal>
 
-        <SettingsPage title='Account' subtitle='Profile details' menuEntries={accountMenu}>
+        <SettingsPage title='Account' subtitle='Profile details' menuEntries={settingsMenu}>
             <h3>Personal Information</h3>
             <div className="flex flex-col lg:flex-row">
                 <div className="pb-6">

diff --git a/components/dashboard/src/settings/DefaultIDE.tsx b/components/dashboard/src/settings/DefaultIDE.tsx
@@ -3,7 +3,7 @@ import settingsMenu from './settings-menu';
 
 export default function DefaultIDE() {
     return <div>
-        <SettingsPage title='Settings' subtitle='Configure your default IDE' menuEntries={settingsMenu}>
+        <SettingsPage title='Default IDE' subtitle='Configure your default IDE' menuEntries={settingsMenu}>
             <div className="lg:px-28 px-10 flex pt-10">
                 Default IDE
             </div>

diff --git a/...onents/dashboard/src/settings/EnvVars.tsx → ...ard/src/settings/EnvironmentVariables.tsx b/...onents/dashboard/src/settings/EnvVars.tsx → ...ard/src/settings/EnvironmentVariables.tsx
@@ -3,9 +3,9 @@ import settingsMenu from './settings-menu';
 
 export default function EnvVars() {
     return <div>
-        <SettingsPage title='Settings' subtitle='Configure environment variables for your workspaces' menuEntries={settingsMenu}>
+        <SettingsPage title='Environment Variables' subtitle='Configure environment variables for your workspaces' menuEntries={settingsMenu}>
             <div className="lg:px-28 px-10 flex pt-10">
-                Env Vars
+                Environment Variables
             </div>
         </SettingsPage>
     </div>;

diff --git a/components/dashboard/src/settings/FeaturePreview.tsx b/components/dashboard/src/settings/FeaturePreview.tsx
diff --git a/...dashboard/src/settings/GitIntegration.tsx → ...ashboard/src/settings/GitIntegrations.tsx b/...dashboard/src/settings/GitIntegration.tsx → ...ashboard/src/settings/GitIntegrations.tsx
@@ -1,9 +1,9 @@
 import { SettingsPage } from "../components/SettingsPage";
 import settingsMenu from './settings-menu';
 
-export default function GitIntegration() {
+export default function GitIntegrations() {
     return <div>
-        <SettingsPage title='Settings' subtitle='Manage integration with your Git hosters' menuEntries={settingsMenu}>
+        <SettingsPage title='Git Integrations' subtitle='Manage integration with your Git hosters' menuEntries={settingsMenu}>
             <div className="lg:px-28 px-10 flex pt-10">
                 Git Hoster Access Control
             </div>

diff --git a/...s/dashboard/src/account/Notifications.tsx → .../dashboard/src/settings/Notifications.tsx b/...s/dashboard/src/account/Notifications.tsx → .../dashboard/src/settings/Notifications.tsx
@@ -1,11 +1,11 @@
 import { SettingsPage } from "../components/SettingsPage";
-import accountMenu from "./account-menu";
+import settingsMenu from "./settings-menu";
 
 export default function Notifications() {
     return <div>
-        <SettingsPage title='Account' subtitle='Notifications' menuEntries={accountMenu}>
+        <SettingsPage title='Notifications' subtitle='Email notification preferences' menuEntries={settingsMenu}>
             <div className="lg:px-28 px-10 flex pt-10">
-                Usage
+                Notifications
             </div>
         </SettingsPage>
     </div>;

diff --git a/components/dashboard/src/settings/Plans.tsx b/components/dashboard/src/settings/Plans.tsx
@@ -0,0 +1,13 @@
+import { SettingsPage } from "../components/SettingsPage";
+import settingsMenu from "./settings-menu";
+
+export default function Plans() {
+    return <div>
+        <SettingsPage title='Plans' subtitle='Plans and Usage' menuEntries={settingsMenu} >
+            <div className="lg:px-28 px-10 flex pt-10">
+                Plans
+            </div>
+        </SettingsPage>
+    </div>;
+}
+
diff --git a/components/dashboard/src/settings/settings-menu.ts b/components/dashboard/src/settings/settings-menu.ts
@@ -1,15 +1,23 @@
 export default [
     {
-        title: 'Environment Variables',
-        link: '/env-vars'
+        title: 'Account',
+        link: '/account'
     },
     {
-        title: 'Git Integration',
-        link: '/git-integration'
+        title: 'Notifications',
+        link: '/notifications'
     },
     {
-        title: 'Feature Preview',
-        link: '/feature-preview'
+        title: 'Plans',
+        link: '/plans'
+    },
+    {
+        title: 'Variables',
+        link: '/variables'
+    },
+    {
+        title: 'Integrations',
+        link: '/integrations'
     },
     {
         title: 'Default IDE',