[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">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">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-xs">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-xs">The old editor would come with extensions for the most popular programming languages pre-installed. You are now freed from that additional bloat but should consider installing any extensions you miss.</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 back</span> to the old one.</p>
+                        <p className="text-gray-400 text-xs">In case you run into trouble with the new IDE, you can go to the settings and switch back to the old editor (Theia).</p>
+                    </div>
+                </li>
+            </ol>
+        </div>
+        <div className="flex justify-end mt-6">
+            <button className="text-gray-900 border-white bg-white hover:border-gray-200" 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 {