[dashboard] v2 initial commit

Author: svenefftinge

components/dashboard/.gitignore

@@ -1,7 +1,9 @@
-# See https://help.github.com/ignore-files/ for more about ignoring files.
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
 
 # dependencies
 /node_modules
+/.pnp
+.pnp.js
 
 # testing
 /coverage
@@ -19,9 +21,3 @@
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
-
-lib
-dist
-
-/public/libs/*
-!/public/libs/.keep

components/dashboard/BUILD.yaml

@@ -2,7 +2,7 @@ packages:
   - name: app
     type: yarn
     srcs:
-      - "public/images/**"
+      - "public/**"
       - "src/**/*.ts"
       - "src/**/*.tsx"
       - "src/**/*.css"
@@ -11,9 +11,7 @@ packages:
       - "ee/src/**/*.css"
       - "typings/**"
       - package.json
-      - postinstall.js
-      - webpack.config.js
-      - webpack.entrypoints.js
+      - tailwind.config.js
       - tsconfig.json
     deps:
       - components/gitpod-protocol:lib

components/dashboard/README.md

@@ -1,12 +1,31 @@
-# Gitpod Workspaces
+# Dashboard Redesign POC
 
-The workspaces page provides a UI for the gitpod server.
+The dashboard is written in TypeScript and React. For styling it uses TailwindCSS which is a bit nicer than inlining CSS as it supports pseudo classes and a is a little more abstract/reusable.
 
-## How to use
+The App.tsx is the entry point for the SPA and it uses React-Router to register all pages. 
 
-Install it and run:
+```ts
+    <Switch>
+        <Route path="/" exact component={Workspaces} />
+        <Route path="/profile" exact component={Profile} />
+        <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="/default-ide" exact component={DefaultIDE} />
+    </Switch>
+```
+Pages are loaded lazily using `React.lazy` so that not everything needs to be loaded up-front but only when needed:
 
-```bash
-yarn install
-yarn start
-```
+```ts
+const Notifications = React.lazy(() => import('./account/Notifications'));
+const Profile = React.lazy(() => import('./account/Profile'));
+const Subscriptions = React.lazy(() => import('./account/Subscriptions'));
+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'));
+```
+
+Global state is passed through `React.Context`.