[dashboard] Redesign of dashboard

chart/config/proxy/lib.locations.conf

@@ -44,18 +44,18 @@ location / {
 
     proxy_pass http://dashboard$request_uri;
 
-    # # Page Not Found
-    # Let's redirect the browser agent to the web app, if no resources are found in the locations specified here.
-    # 
-    # This is derived from the issue https://github.com/gitpod-io/gitpod/issues/2659, which
-    # was appearently caused by Twitter's link shortening. So, if the leading www is missing
-    # in the URL by accident, we will redirect to the web on 404 – Not Found.
-    error_page 404 @error_404_dashboard;
-}
-
-location @error_404_dashboard {
-    return 302 https://www.${PROXY_DOMAIN}$request_uri;
-}
+    # # # Page Not Found
+    # # Let's redirect the browser agent to the web app, if no resources are found in the locations specified here.
+    # # 
+    # # This is derived from the issue https://github.com/gitpod-io/gitpod/issues/2659, which
+    # # was appearently caused by Twitter's link shortening. So, if the leading www is missing
+    # # in the URL by accident, we will redirect to the web on 404 – Not Found.
+    # error_page 404 @error_404_dashboard;
+}
+
+# location @error_404_dashboard {
+#     return 302 https://www.${PROXY_DOMAIN}$request_uri;
+# }
 
 ##### Authentication
 # GitHub authentication callback endpoint does not like CORS headers

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

@@ -1,58 +1,24 @@
 packages:
   - name: app
-    type: yarn
-    srcs:
-      - "public/images/**"
-      - "src/**/*.ts"
-      - "src/**/*.tsx"
-      - "src/**/*.css"
-      - "ee/src/**/*.ts"
-      - "ee/src/**/*.tsx"
-      - "ee/src/**/*.css"
-      - "typings/**"
-      - package.json
-      - postinstall.js
-      - webpack.config.js
-      - webpack.entrypoints.js
-      - tsconfig.json
-    deps:
-      - components/gitpod-protocol:lib
-    argdeps:
-      - removeSources
-    env:
-      - REMOVE_SOURCES=${removeSources}
-    config:
-      commands:
-        build: ["yarn", "build-app"]
-      yarnLock: ${coreYarnLockBase}/yarn.lock
-      dontTest: true
-  - name: lib
     type: yarn
     srcs:
       - "public/**"
-      - "ee/public/**"
-      - "src/**/*.ts"
-      - "src/**/*.tsx"
+      - "build/**"
+      - "src/**/*.ts*"
       - "src/**/*.css"
-      - "ee/src/**/*.ts"
-      - "ee/src/**/*.tsx"
-      - "ee/src/**/*.css"
+      - "src/**/*.svg"
       - "typings/**"
       - package.json
-      - postinstall.js
-      - webpack.config.js
-      - webpack.entrypoints.js
-      - tsconfig.json
-      - tsconfig.lib.json
+      - tailwind.config.js
+      - tsconfig.*
     deps:
       - components/gitpod-protocol:lib
     config:
-      packaging: library
       commands:
-        build: ["yarn", "build-lib"]
+        build: ["yarn", "build"]
       yarnLock: ${coreYarnLockBase}/yarn.lock
-      tsconfig: tsconfig.lib.json
       dontTest: true
+      packaging: archive
   - name: static
     type: generic
     srcs:
@@ -78,9 +44,9 @@ scripts:
     script: |-
       trap "kill 0" EXIT
       export NODE_OPTIONS='--max-old-space-size=3192'
-      yarn run webpack-dev-server --mode=development &
+      yarn start &
 
       telepresence --swap-deployment dashboard \
                    --method inject-tcp \
-                   --expose 13001:80 \
-                   --run socat TCP-LISTEN:13001,reuseaddr,fork TCP:localhost:3001
+                   --expose 13000:80 \
+                   --run socat TCP-LISTEN:13000,reuseaddr,fork TCP:localhost:3000

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`.

components/dashboard/conf/conf.d/server-80.conf

@@ -8,5 +8,6 @@ server {
 
     location / {
         root /www/data/dashboard;
+        try_files $uri $uri/ /index.html;
     }
 }