[dashboad/self-hosted] add Setup page

Author: AlexTugarev

components/dashboard/src/App.tsx

@@ -17,7 +17,9 @@ import settingsMenu from './settings/settings-menu';
 import { User } from '@gitpod/gitpod-protocol';
 import { adminMenu } from './admin/admin-menu';
 import gitpodIcon from './icons/gitpod.svg';
+import { ErrorCodes } from '@gitpod/gitpod-protocol/lib/messaging/error';
 
+const Setup = React.lazy(() => import(/* webpackPrefetch: true */ './Setup'));
 const Workspaces = React.lazy(() => import(/* webpackPrefetch: true */ './workspaces/Workspaces'));
 const Account = React.lazy(() => import(/* webpackPrefetch: true */ './settings/Account'));
 const Notifications = React.lazy(() => import(/* webpackPrefetch: true */ './settings/Notifications'));
@@ -43,6 +45,7 @@ function App() {
 
     const [loading, setLoading] = useState<boolean>(true);
     const [isWhatsNewShown, setWhatsNewShown] = useState(false);
+    const [isSetupRequired, setSetupRequired] = useState(false);
 
     useEffect(() => {
         (async () => {
@@ -51,6 +54,11 @@ function App() {
                 setUser(usr);
             } catch (error) {
                 console.log(error);
+                if (error && "code" in error) {
+                    if (error.code === ErrorCodes.SETUP_REQUIRED) {
+                        setSetupRequired(true);
+                    }
+                }
             }
             setLoading(false);
         })();
@@ -88,10 +96,15 @@ function App() {
     }
 
     if (loading) {
-        return <Loading />
+        return (<Loading />);
+    }
+    if (isSetupRequired) {
+        return (<Suspense fallback={<Loading />}>
+            <Setup />
+        </Suspense>);
     }
     if (!user) {
-        return (<Login />)
+        return (<Login />);
     }
     if (window.location.pathname.startsWith('/blocked')) {
         return <div className="mt-48 text-center">
@@ -117,6 +130,7 @@ function App() {
         <div className="container">
             {renderMenu(user)}
             <Switch>
+                <Route path="/setup" exact component={Setup} />
                 <Route path="/workspaces" exact component={Workspaces} />
                 <Route path="/account" exact component={Account} />
                 <Route path="/integrations" exact component={Integrations} />

components/dashboard/src/Login.tsx

@@ -58,21 +58,17 @@ export function Login() {
                 login: true,
                 host,
                 onSuccess: () => updateUser(),
-                onError: (error) => {
-                    if (typeof error === "string") {
-                        try {
-                            const payload = JSON.parse(error);
-                            if (typeof payload === "object" && payload.error) {
-                                if (payload.error === "email_taken") {
-                                    return setErrorMessage(`Email address already exists. Log in using a different provider.`);
-                                }
-                                return setErrorMessage(payload.description ? payload.description : `Error: ${payload.error}`);
-                            }
-                        } catch (error) {
-                            console.log(error);
+                onError: (payload) => {
+                    let errorMessage: string;
+                    if (typeof payload === "string") {
+                        errorMessage = payload;
+                    } else {
+                        errorMessage = payload.description ? payload.description : `Error: ${payload.error}`;
+                        if (payload.error === "email_taken") {
+                            errorMessage = `Email address already exists. Log in using a different provider.`;
                         }
-                        setErrorMessage(error);
                     }
+                    setErrorMessage(errorMessage);
                 }
             });
         } catch (error) {

components/dashboard/src/Setup.tsx

@@ -0,0 +1,61 @@
+/**
+ * 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 { useEffect, useState } from "react";
+import Modal from "./components/Modal";
+import { getGitpodService, gitpodHostUrl } from "./service/service";
+import { GitIntegrationModal } from "./settings/Integrations";
+
+export default function Setup() {
+
+    const [showModal, setShowModal] = useState<boolean>(false);
+
+    useEffect(() => {
+        (async () => {
+            const dynamicAuthProviders = await getGitpodService().server.getOwnAuthProviders();
+            const previous = dynamicAuthProviders.filter(ap => ap.ownerId === "no-user")[0];
+            if (previous) {
+                await getGitpodService().server.deleteOwnAuthProvider({ id: previous.id });
+            }
+        })();
+    }, []);
+
+    const acceptAndContinue = () => {
+        setShowModal(true);
+    }
+
+    const onAuthorize = (payload?: string) => {
+        // run without await, so the integrated closing of new tab isn't blocked
+        (async () => {
+            window.location.href = gitpodHostUrl.asDashboard().toString();
+        })();
+    }
+
+    const headerText = "Configure a git integration with a GitLab or GitHub instance."
+
+    return <div>
+        {!showModal && (
+            <Modal visible={true} onClose={() => { }} closeable={false}>
+                <h3 className="pb-2">Welcome to Gitpod 🎉</h3>
+                <div className="border-t border-b border-gray-200 dark:border-gray-800 mt-2 -mx-6 px-6 py-4">
+                    <p className="pb-4 text-gray-500 text-base">To start using Gitpod, you will need to set up a git integration.</p>
+
+                    <div className="flex">
+                        <span className="text-gray-500">
+                            By using Gitpod, you agree to our <a className="underline underline-thickness-thin underline-offset-small hover:text-gray-600" target="gitpod-terms" href="https://www.gitpod.io/self-hosted-terms/">terms</a>.
+                        </span>
+                    </div>
+                </div>
+                <div className="flex justify-end mt-6">
+                    <button className={"ml-2"} onClick={() => acceptAndContinue()}>Continue</button>
+                </div>
+            </Modal>
+        )}
+        {showModal && (
+            <GitIntegrationModal mode="new" login={true} headerText={headerText} userId="no-user" onAuthorize={onAuthorize} />
+        )}
+    </div>;
+}

components/dashboard/src/prebuilds/InstallGitHubApp.tsx

@@ -25,8 +25,14 @@ async function registerApp(installationId: string, setModal: (modal: 'done' | st
                 setModal('done');
                 result.resolve();
             },
-            onError: (error) => {
-                setModal(error);
+            onError: (payload) => {
+                let errorMessage: string;
+                if (typeof payload === "string") {
+                    errorMessage = payload;
+                } else {
+                    errorMessage = payload.description ? payload.description : `Error: ${payload.error}`;
+                }
+                setModal(errorMessage);
             }
         })
 
@@ -46,7 +52,7 @@ export default function InstallGitHubApp() {
             <div className="px-6 py-3 flex justify-between space-x-2 text-gray-400 border-t border-gray-200 dark:border-gray-800 h-96">
                 <div className="flex flex-col items-center w-96 m-auto">
                     <h3 className="text-center pb-3 text-gray-500 dark:text-gray-400">No Installation ID Found</h3>
-                    <div className="text-center pb-6 text-gray-500">Did you came here from the GitHub app's page?</div>
+                    <div className="text-center pb-6 text-gray-500">Did you come here from the GitHub app's page?</div>
                 </div>
             </div>
         </div>

components/dashboard/src/provider-utils.tsx

@@ -41,7 +41,7 @@ interface OpenAuthorizeWindowParams {
     scopes?: string[];
     overrideScopes?: boolean;
     onSuccess?: (payload?: string) => void;
-    onError?: (error?: string) => void;
+    onError?: (error: string | { error: string, description?: string }) => void;
 }
 
 async function openAuthorizeWindow(params: OpenAuthorizeWindowParams) {
@@ -75,12 +75,21 @@ async function openAuthorizeWindow(params: OpenAuthorizeWindowParams) {
 
         if (typeof event.data === "string" && event.data.startsWith("success")) {
             killAuthWindow();
-            onSuccess && onSuccess();
+            onSuccess && onSuccess(event.data);
         }
         if (typeof event.data === "string" && event.data.startsWith("error:")) {
-            const errorAsText = atob(event.data.substring("error:".length));
+            let error: string | { error: string, description?: string } = atob(event.data.substring("error:".length));
+            try {
+                const payload = JSON.parse(error);
+                if (typeof payload === "object" && payload.error) {
+                    error = { error: payload.error, description: payload.description };
+                }
+            } catch (error) {
+                console.log(error);
+            }
+
             killAuthWindow();
-            onError && onError(errorAsText);
+            onError && onError(error);
         }
     };
     window.addEventListener("message", eventListener);