[dashboard] What's New

Author: svenefftinge

components/dashboard/README.md

@@ -2,7 +2,7 @@
 
 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.
 
-The App.tsx is the entry point for the SPA and it uses React-Router to register all pages. 
+The `App.tsx` is the entry point for the SPA and it uses React-Router to register all pages. 
 
 ```ts
     <Switch>

components/dashboard/src/App.tsx

@@ -9,89 +9,100 @@ import Menu from './components/Menu';
 import { BrowserRouter } from "react-router-dom";
 import { Route, Switch } from "react-router";
 import { Workspaces } from './workspaces/Workspaces';
-import { CreateWorkspace } from './start/CreateWorkspace';
-import StartWorkspace from './start/StartWorkspace';
+
 import { Login } from './Login';
 import { UserContext } from './user-context';
 import { getGitpodService } from './service/service';
-import Header from './components/Header';
+import { shouldSeeWhatsNew, WhatsNew } from './WhatsNew';
 
 const Account = React.lazy(() => import(/* webpackPrefetch: true */ './settings/Account'));
 const Notifications = React.lazy(() => import(/* webpackPrefetch: true */ './settings/Notifications'));
 const Plans = React.lazy(() => import(/* webpackPrefetch: true */ './settings/Plans'));
 const EnvironmentVariables = React.lazy(() => import(/* webpackPrefetch: true */ './settings/EnvironmentVariables'));
 const Integrations = React.lazy(() => import(/* webpackPrefetch: true */ './settings/Integrations'));
 const Preferences = React.lazy(() => import(/* webpackPrefetch: true */ './settings/Preferences'));
+const StartWorkspace = React.lazy(() => import(/* webpackPrefetch: true */ './start/StartWorkspace'));
+const CreateWorkspace = React.lazy(() => import(/* webpackPrefetch: true */ './start/CreateWorkspace'));
 
 function Loading() {
     return <>
-        <Header title="" subtitle="" />
     </>;
 }
 
 function App() {
     const { user, setUser } = useContext(UserContext);
 
     const [loading, setLoading] = useState<boolean>(true);
+    const [isWhatsNewShown, setWhatsNewShown] = useState(false);
 
     useEffect(() => {
         (async () => {
             try {
-                setUser(await getGitpodService().server.getLoggedInUser());
+                const usr = await getGitpodService().server.getLoggedInUser()
+                setUser(usr);
             } catch (error) {
                 console.log(error);
             }
             setLoading(false);
         })();
     }, []);
-
-    if (!loading && !user) {
+    
+    if (loading) {
+        return <Loading />
+    }
+    if (!user) {
         return (<Login />)
     };
-
+    const shouldWhatsNewShown = shouldSeeWhatsNew(user)
+    if (shouldWhatsNewShown !== isWhatsNewShown) {
+        setWhatsNewShown(shouldWhatsNewShown);
+    }
+    
     window.addEventListener("hashchange", () => {
-      // Refresh on hash change if the path is '/' (new context URL)
-      if (window.location.pathname === '/') {
-        window.location.reload(true);
-      }
+        // Refresh on hash change if the path is '/' (new context URL)
+        if (window.location.pathname === '/') {
+            window.location.reload(true);
+        }
     }, false);
 
+    let toRender: React.ReactElement = <Route>
+        <div className="container">
+            {renderMenu()}
+            <Switch>
+                <Route path={["/", "/workspaces"]} exact render={
+                    () => <Workspaces />} />
+                <Route path={["/account", "/settings"]} exact component={Account} />
+                <Route path={["/integrations", "/access-control"]} exact component={Integrations} />
+                <Route path="/notifications" exact component={Notifications} />
+                <Route path="/plans" exact component={Plans} />
+                <Route path="/variables" exact component={EnvironmentVariables} />
+                <Route path="/preferences" exact component={Preferences} />
+            </Switch>
+        </div>
+    </Route>;
+
     const hash = getURLHash();
-    if (window.location.pathname === '/' && hash !== '') {
-      return <CreateWorkspace contextUrl={hash} />;
-    }
-    if (/\/start\/?/.test(window.location.pathname) && hash !== '') {
-      return <StartWorkspace workspaceId={hash} />;
+    const isCreation = window.location.pathname === '/' && hash !== '';
+    const isWsStart = /\/start\/?/.test(window.location.pathname) && hash !== '';
+    if (isWhatsNewShown) {
+        toRender = <WhatsNew visible={true} onClose={() => setWhatsNewShown(false)} />;
+    } else if (isCreation) {
+        toRender = <CreateWorkspace contextUrl={hash} />;
+    } else if (isWsStart) {
+        <StartWorkspace workspaceId={hash} />;
     }
 
     return (
         <BrowserRouter>
-            <div className="container">
-                {user && renderMenu()}
-
-                <Suspense fallback={<Loading />}>
-                    <Switch>
-                        {user && (
-                            <React.Fragment>
-                                <Route path={["/", "/workspaces"]} exact render={
-                                    () => <Workspaces />} />
-                                <Route path={["/account", "/settings"]} exact component={Account} />
-                                <Route path={["/integrations", "/access-control"]} exact component={Integrations} />
-                                <Route path="/notifications" exact component={Notifications} />
-                                <Route path="/plans" exact component={Plans} />
-                                <Route path="/variables" exact component={EnvironmentVariables} />
-                                <Route path="/preferences" exact component={Preferences} />
-                            </React.Fragment>
-                        )}
-                    </Switch>
-                </Suspense>
-            </div>
+            <Suspense fallback={<Loading />}>
+                {toRender}
+            </Suspense>
         </BrowserRouter>
     );
 }
 
-function getURLHash () {
-  return window.location.hash.replace(/^[#/]+/, '');
+function getURLHash() {
+    return window.location.hash.replace(/^[#/]+/, '');
 }
 
 const renderMenu = () => (

components/dashboard/src/WhatsNew.tsx

@@ -0,0 +1,75 @@
+/**
+ * Copyright (c) 2021 Gitpod GmbH. All rights reserved.
+ * Licensed under the GNU Affero General Public License (AGPL).
+ * See License-AGPL.txt in the project root for license information.
+ */
+
+import { User } from "@gitpod/gitpod-protocol";
+import { useContext } from "react";
+import Modal from "./components/Modal";
+import { getGitpodService } from "./service/service";
+import { UserContext } from "./user-context";
+
+const news = 'April-2021';
+export function shouldSeeWhatsNew(user: User): boolean {
+    const whatsNewSeen = user?.additionalData?.whatsNewSeen;
+    return user.creationDate <= '2021-04-08' && (!whatsNewSeen || !whatsNewSeen[news]);
+}
+
+export function WhatsNew(props: { visible: boolean, onClose: () => void }) {
+    const {user, setUser} = useContext(UserContext);
+    const internalClose = async (switchToCode?: boolean) => {
+        if (!user) {
+            return;
+        }
+        const additionalData = user.additionalData || {};
+        additionalData.whatsNewSeen = {
+            ...additionalData.whatsNewSeen,
+            [news]: new Date().toISOString()
+        }
+        if (switchToCode) {
+            const ideSettings = additionalData.ideSettings || {};
+            ideSettings.defaultIde = 'code';
+        }
+        await getGitpodService().server.updateLoggedInUser({
+            additionalData
+        });
+        setUser(user);
+        props.onClose();
+    } 
+    return <Modal visible={props.visible} onClose={internalClose}>
+        <h3 className="pb-4">What's New 🎁</h3>
+        <div className="border-t border-gray-200 -mx-6 px-6 py-4">
+            <p className="pb-2 text-gray-900 text-base font-medium">New Dashboard</p>
+            <p className="pb-2 text-gray-500 text-sm">We have made some layout changes on the dashboard to improve the overall user experience of the product.</p>
+        </div>
+        <div className="border-t border-b border-gray-200 -mx-6 px-6 py-4">
+            <p className="pb-2 text-gray-900 text-base font-medium">VS Code</p>
+            <p className="pb-4 text-gray-500 text-sm">We are changing the default IDE to VS Code.</p>
+            <ol className="pb-2 text-gray-500 text-sm list-outside list-decimal space-y-2">
+                <li className="ml-5">
+                    <div>
+                        <p className="text-gray-500 text-sm">We're preserving all <span className="font-bold">user settings and extensions</span>.</p>
+                        <p className="text-gray-400 text-sm">Extensions you have manually uploaded are not transfered. You'll need to search and install those extensions through the extension panel in VS Code.</p>
+                    </div>
+                </li>
+                <li className="ml-5">
+                    <div>
+                        <p className="text-gray-500 text-sm">We've reduced the number of <span className="font-bold">pre-installed extensions</span>.</p>
+                        <p className="text-gray-400 text-sm">The Theia-based editor included pre-installed extensions for the most popular programming languages which was convenienvt for starters but added additional bloat. You can now install any extensions you need and leave out those you don't.</p>
+                    </div>
+                </li>
+                <li className="ml-5">
+                    <div>
+                        <p className="text-gray-500 text-sm">You can still <span className="font-bold">switch the editor</span> to Theia.</p>
+                        <p className="text-gray-400 text-sm">In case you run into trouble with the new IDE, you can go to the settings and switch back to the Theia-based editor.</p>
+                    </div>
+                </li>
+            </ol>
+        </div>
+        <div className="flex justify-end mt-6">
+            <button className="secondary" onClick={() => internalClose()}>Dismiss</button>
+            <button className="ml-2" onClick={() => internalClose(true)} >Continue</button>
+        </div>
+    </Modal>
+}

components/dashboard/src/start/CreateWorkspace.tsx

@@ -31,7 +31,7 @@ export interface CreateWorkspaceError {
   data?: any;
 }
 
-export class CreateWorkspace extends React.Component<CreateWorkspaceProps, CreateWorkspaceState> {
+export default class CreateWorkspace extends React.Component<CreateWorkspaceProps, CreateWorkspaceState> {
 
   constructor(props: CreateWorkspaceProps) {
     super(props);

components/gitpod-protocol/src/protocol.ts

@@ -98,6 +98,8 @@ export interface AdditionalUserData {
     emailNotificationSettings?: EmailNotificationSettings;
     featurePreview?: boolean;
     ideSettings?: IDESettings;
+    // key is the name of the news, string the iso date when it was seen
+    whatsNewSeen?: { [key: string]: string }
 }
 
 export interface EmailNotificationSettings {