extract getGitpodService function

Author: AlexTugarev

components/dashboard/src/App.tsx

@@ -7,7 +7,7 @@ import { CreateWorkspace } from './start/CreateWorkspace';
 import StartWorkspace from './start/StartWorkspace';
 import { Login } from './Login';
 import { UserContext } from './user-context';
-import { gitpodService } from './service/service';
+import { getGitpodService } from './service/service';
 
 const Account = React.lazy(() => import('./settings/Account'));
 const Notifications = React.lazy(() => import('./settings/Notifications'));
@@ -28,8 +28,7 @@ function App() {
     useEffect(() => {
         (async () => {
             try {
-                const user = await gitpodService.server.getLoggedInUser();
-                setUser(user);
+                setUser(await getGitpodService().server.getLoggedInUser());
             } catch (error) {
                 console.log(error);
             }
@@ -38,7 +37,7 @@ function App() {
     }, []);
 
     if (!loading && !user) {
-        return (<Login gitpodService={gitpodService} />)
+        return (<Login />)
     };
 
     window.addEventListener("hashchange", () => {
@@ -50,10 +49,10 @@ function App() {
 
     const hash = getURLHash();
     if (window.location.pathname === '/' && hash !== '') {
-      return <CreateWorkspace contextUrl={hash} gitpodService={gitpodService}/>;
+      return <CreateWorkspace contextUrl={hash} />;
     }
     if (/\/start\/?/.test(window.location.pathname) && hash !== '') {
-      return <StartWorkspace workspaceId={hash} gitpodService={gitpodService}/>;
+      return <StartWorkspace workspaceId={hash} />;
     }
 
     return (
@@ -68,7 +67,7 @@ function App() {
                         {user && (
                             <React.Fragment>
                                 <Route path={["/", "/workspaces"]} exact render={
-                                    () => <Workspaces gitpodService={gitpodService} />} />
+                                    () => <Workspaces />} />
                                 <Route path="/account" exact component={Account} />
                                 <Route path="/notifications" exact component={Notifications} />
                                 <Route path="/plans" exact component={Plans} />

components/dashboard/src/Login.tsx

@@ -1,16 +1,16 @@
 import { AuthProviderInfo } from "@gitpod/gitpod-protocol";
 import { useContext, useEffect, useState } from "react";
 import { UserContext } from "./user-context";
-import { gitpodHostUrl } from "./service/service";
+import { getGitpodService, gitpodHostUrl, reconnectGitpodService } from "./service/service";
 
-export function Login({ gitpodService }: { gitpodService: GitpodService }) {
+export function Login() {
     const { setUser } = useContext(UserContext);
 
     const [authProviders, setAuthProviders] = useState<AuthProviderInfo[]>([]);
 
     useEffect(() => {
         (async () => {
-            setAuthProviders(await gitpodService.server.getAuthProviders());
+            setAuthProviders(await getGitpodService().server.getAuthProviders());
         })();
 
         window.addEventListener("message", (event) => {
@@ -24,9 +24,8 @@ export function Login({ gitpodService }: { gitpodService: GitpodService }) {
                     // todo: not here, but add a button to the /login-success page to close, if this should not work as expected
                 }
                 (async () => {
-                    gitpodService.reconnect();
-                    const user = await gitpodService.server.getLoggedInUser();
-                    setUser(user);
+                    reconnectGitpodService();
+                    setUser(await getGitpodService().server.getLoggedInUser());
                 })();
             }
         })

components/dashboard/src/service/service-mock.ts

@@ -44,7 +44,7 @@ const gitpodServiceMock = createServiceMock({
     onDidOpenConnection: Event.None,
     onDidCloseConnection: Event.None,
 
-}) as GitpodService;
+});
 
 export { gitpodServiceMock };
 

components/dashboard/src/service/service.ts

@@ -4,21 +4,17 @@
  * See License-AGPL.txt in the project root for license information.
  */
 
-import { GitpodClient, GitpodServer, GitpodServerPath, GitpodServiceImpl } from '@gitpod/gitpod-protocol';
+import { GitpodClient, GitpodServer, GitpodServerPath, GitpodService, GitpodServiceImpl } from '@gitpod/gitpod-protocol';
 import { WebSocketConnectionProvider } from '@gitpod/gitpod-protocol/lib/messaging/browser/connection';
 // import { createWindowMessageConnection } from '@gitpod/gitpod-protocol/lib/messaging/browser/window-connection';
-import { JsonRpcProxy /* , JsonRpcProxyFactory */ } from '@gitpod/gitpod-protocol/lib/messaging/proxy-factory';
+// import { JsonRpcProxy /* , JsonRpcProxyFactory */ } from '@gitpod/gitpod-protocol/lib/messaging/proxy-factory';
 import { GitpodHostUrl } from '@gitpod/gitpod-protocol/lib/util/gitpod-host-url';
 import { log } from '@gitpod/gitpod-protocol/lib/util/logging';
-// import { gitpodServiceMock } from './service-mock';
 
 export const gitpodHostUrl = new GitpodHostUrl(window.location.toString());
 
 function createGitpodService<C extends GitpodClient, S extends GitpodServer>() {
-    let proxy: JsonRpcProxy<S>;
-    let reconnect = () => {
-        console.log("WebSocket reconnect not possible.");
-    }
+    // let proxy: JsonRpcProxy<S>;
     // FIXME: https://gitpod.slack.com/archives/C01KGM9BUNS/p1615456669011600
     // if (window.top !== window.self) {
     //     const connection = createWindowMessageConnection('gitpodServer', window.parent, '*');
@@ -32,15 +28,8 @@ function createGitpodService<C extends GitpodClient, S extends GitpodServer>() {
             .withApi();
 
         const connectionProvider = new WebSocketConnectionProvider();
-        let _websocket: any;
-        const _createWebSocket = connectionProvider.createWebSocket;
-        connectionProvider.createWebSocket = (url) => {
-            return (_websocket = _createWebSocket(url));
-        }
-
-
         let numberOfErrors = 0;
-        proxy = connectionProvider.createProxy<S>(host.toString(), undefined, {
+        const { proxy, webSocket } = connectionProvider.createProxy2<S>(host.toString(), undefined, {
             onerror: (event: any) => {
                 log.error(event);
                 if (numberOfErrors++ === 5) {
@@ -49,22 +38,33 @@ function createGitpodService<C extends GitpodClient, S extends GitpodServer>() {
             }
         });
 
-        if (_websocket && "reconnect" in _websocket) {
-            reconnect = () => { (_websocket as any).reconnect() };
-        }
     // }
     const service = new GitpodServiceImpl<C, S>(proxy);
-    (service as any).reconnect = reconnect;
+    (service as any).reconnect = () => {
+        const ws = (webSocket as any);
+        if (typeof ws.reconnect === "function") {
+            ws.reconnect();
+        } else {
+            console.log("WebSocket reconnect not possible.");
+        }
+    };
     return service;
 }
 
-declare global {
-    type GitpodService = ReturnType<typeof createGitpodService> & { reconnect: () => void }
-    interface Window { gitpodService?: GitpodService; }
+function getGitpodService(): GitpodService {
+    const w = window as any;
+    const _gp = w._gp || (w._gp = {});
+    const service = _gp.gitpodService || (_gp.gitpodService = createGitpodService());
+    return service;
 }
 
-// reuse existing service object if present
-let gitpodService: GitpodService = window.gitpodService || (window.gitpodService = createGitpodService() as GitpodService);
-// let gitpodService: GitpodService = gitpodServiceMock;
+function reconnectGitpodService() {
+    const service = getGitpodService() as any;
+    if (service.reconnect) {
+        service.reconnect();
+    } else {
+        console.log("WebSocket reconnect not possible.")
+    }
+}
 
-export { gitpodService };
+export { getGitpodService, reconnectGitpodService }

components/dashboard/src/start/CreateWorkspace.tsx

@@ -1,15 +1,15 @@
 import React, { Suspense } from "react";
-import { CreateWorkspaceMode, GitpodService, WorkspaceCreationResult } from "@gitpod/gitpod-protocol";
+import { CreateWorkspaceMode, WorkspaceCreationResult } from "@gitpod/gitpod-protocol";
 import { ErrorCodes } from "@gitpod/gitpod-protocol/lib/messaging/error";
 import Modal from "../components/Modal";
 import { StartPage, StartPhase } from "../components/StartPage";
 import StartWorkspace from "./StartWorkspace";
+import { getGitpodService } from "../service/service";
 
 const WorkspaceLogs = React.lazy(() => import('./WorkspaceLogs'));
 
 export interface CreateWorkspaceProps {
   contextUrl: string;
-  gitpodService: GitpodService;
 }
 
 export interface CreateWorkspaceState {
@@ -35,7 +35,7 @@ export class CreateWorkspace extends React.Component<CreateWorkspaceProps, Creat
 
   async createWorkspace(mode = CreateWorkspaceMode.SelectIfRunning) {
     try {
-      const result = await this.props.gitpodService.server.createWorkspace({
+      const result = await getGitpodService().server.createWorkspace({
         contextUrl: this.props.contextUrl,
         mode
       });
@@ -77,7 +77,7 @@ export class CreateWorkspace extends React.Component<CreateWorkspaceProps, Creat
 
     const result = this.state?.result;
     if (result?.createdWorkspaceId) {
-      return <StartWorkspace workspaceId={result.createdWorkspaceId} gitpodService={this.props.gitpodService} />;
+      return <StartWorkspace workspaceId={result.createdWorkspaceId} />;
     }
 
     else if (result?.existingWorkspaces) {

components/dashboard/src/start/StartWorkspace.tsx

@@ -1,11 +1,11 @@
 import React from "react";
-import { GitpodService, DisposableCollection, WorkspaceInstance } from "@gitpod/gitpod-protocol";
+import { DisposableCollection, WorkspaceInstance } from "@gitpod/gitpod-protocol";
 import { GitpodHostUrl } from "@gitpod/gitpod-protocol/lib/util/gitpod-host-url";
 import { StartPage, StartPhase } from "../components/StartPage";
+import { getGitpodService } from "../service/service";
 
 export interface StartWorkspaceProps {
   workspaceId: string;
-  gitpodService: GitpodService;
 }
 
 export interface StartWorkspaceState {
@@ -44,7 +44,7 @@ export default class StartWorkspace extends React.Component<StartWorkspaceProps,
     }
 
     try {
-      this.toDispose.push(this.props.gitpodService.registerClient(this));
+      this.toDispose.push(getGitpodService().registerClient(this));
     } catch (error) {
       this.setState({ error });
     }
@@ -67,7 +67,7 @@ export default class StartWorkspace extends React.Component<StartWorkspaceProps,
 
     const { workspaceId } = this.props;
     try {
-      const result = await this.props.gitpodService.server.startWorkspace(workspaceId, { forceDefaultImage });
+      const result = await getGitpodService().server.startWorkspace(workspaceId, { forceDefaultImage });
       if (!result) {
         throw new Error("No result!");
       }
@@ -80,7 +80,7 @@ export default class StartWorkspace extends React.Component<StartWorkspaceProps,
       this.setState({ startedInstanceId: result.instanceID });
       // Explicitly query state to guarantee we get at least one update
       // (needed for already started workspaces, and not hanging in 'Starting ...' for too long)
-      this.props.gitpodService.server.getWorkspace(workspaceId).then(ws => {
+      getGitpodService().server.getWorkspace(workspaceId).then(ws => {
         if (ws.latestInstance) {
           this.setState({
             contextUrl: ws.workspace.contextURL
@@ -109,7 +109,7 @@ export default class StartWorkspace extends React.Component<StartWorkspaceProps,
     }
 
     if (workspaceInstance.status.phase === 'preparing') {
-      this.props.gitpodService.server.watchWorkspaceImageBuildLogs(workspaceInstance.workspaceId);
+      getGitpodService().server.watchWorkspaceImageBuildLogs(workspaceInstance.workspaceId);
     }
 
     this.setState({ workspaceInstance });

components/dashboard/src/workspaces/WorkspaceEntry.tsx

@@ -3,7 +3,7 @@ import { GitpodHostUrl } from '@gitpod/gitpod-protocol/lib/util/gitpod-host-url'
 import ContextMenu, { ContextMenuEntry } from '../components/ContextMenu';
 import ThreeDots from '../icons/ThreeDots.svg';
 import moment from 'moment';
-import { gitpodService } from '../service/service';
+import { getGitpodService } from '../service/service';
 import Modal from '../components/Modal';
 import { MouseEvent, useState } from 'react';
 
@@ -60,15 +60,15 @@ export function WorkspaceEntry(desc: WorkspaceInfo) {
             title: 'Share',
             active: !!ws.shareable,
             onClick: () => {
-                gitpodService.server.controlAdmission(ws.id, ws.shareable ? "owner" : "everyone");
+                getGitpodService().server.controlAdmission(ws.id, ws.shareable ? "owner" : "everyone");
             }
         },
         {
             title: 'Pin',
             active: !!ws.pinned,
             separator: true,
             onClick: () => {
-                gitpodService.server.updateWorkspaceUserPin(ws.id, 'toggle')
+                getGitpodService().server.updateWorkspaceUserPin(ws.id, 'toggle')
             }
         },
         {
@@ -133,7 +133,7 @@ export function WorkspaceEntry(desc: WorkspaceInfo) {
                 <div className="flex">
                     <div className="flex-1"></div>
                     <button className="cursor-pointer px-3 py-2 text-white text-sm rounded-md border-2 border-red-800 bg-red-600 hover:bg-red-800"
-                        onClick={()=>gitpodService.server.deleteWorkspace(ws.id)}>
+                        onClick={()=>getGitpodService().server.deleteWorkspace(ws.id)}>
                         Delete
                     </button>
                 </div>

components/dashboard/src/workspaces/Workspaces.tsx

@@ -1,12 +1,11 @@
 import React from "react";
-import { GitpodService, WorkspaceInfo } from "@gitpod/gitpod-protocol";
+import { WorkspaceInfo } from "@gitpod/gitpod-protocol";
 import Header from "../components/Header";
 import DropDown from "../components/DropDown"
 import { WorkspaceModel } from "./workspace-model";
 import { WorkspaceEntry } from "./WorkspaceEntry";
 
 export interface WorkspacesProps {
-    gitpodService: GitpodService;
 }
 
 export interface WorkspacesState {
@@ -19,7 +18,7 @@ export class Workspaces extends React.Component<WorkspacesProps, WorkspacesState
 
     constructor(props: WorkspacesProps) {
         super(props);
-        this.workspaceModel = new WorkspaceModel(props.gitpodService, this.setWorkspaces);
+        this.workspaceModel = new WorkspaceModel(this.setWorkspaces);
     }
 
     protected setWorkspaces = (workspaces: WorkspaceInfo[]) => {

components/dashboard/src/workspaces/workspace-model.ts

@@ -1,19 +1,20 @@
-import { Disposable, DisposableCollection, GitpodClient, GitpodService, WorkspaceInfo, WorkspaceInstance } from "@gitpod/gitpod-protocol";
+import { Disposable, DisposableCollection, GitpodClient, WorkspaceInfo, WorkspaceInstance } from "@gitpod/gitpod-protocol";
+import { getGitpodService } from "../service/service";
 
 export class WorkspaceModel implements Disposable, Partial<GitpodClient> {
 
     protected workspaces = new Map<string,WorkspaceInfo>();
     protected currentlyFetching = new Set<string>();
     protected disposables = new DisposableCollection();
 
-    constructor(protected service: GitpodService, protected setWorkspaces: (ws: WorkspaceInfo[]) => void) {
-        service.server.getWorkspaces({
+    constructor(protected setWorkspaces: (ws: WorkspaceInfo[]) => void) {
+        getGitpodService().server.getWorkspaces({
             limit: 50
         }).then( infos => {
             this.updateMap(infos);
             this.notifyWorkpaces();
         });
-        this.disposables.push(service.registerClient(this));
+        this.disposables.push(getGitpodService().registerClient(this));
     }
 
     protected updateMap(workspaces: WorkspaceInfo[]) {
@@ -37,7 +38,7 @@ export class WorkspaceModel implements Disposable, Partial<GitpodClient> {
             } else if (!this.currentlyFetching.has(instance.workspaceId)) {
                 try {
                     this.currentlyFetching.add(instance.workspaceId);
-                    const info = await this.service.server.getWorkspace(instance.workspaceId);
+                    const info = await getGitpodService().server.getWorkspace(instance.workspaceId);
                     this.workspaces.set(instance.workspaceId, info);
                     this.notifyWorkpaces();
                 } finally {

components/gitpod-protocol/src/messaging/browser/connection.ts

@@ -31,11 +31,20 @@ export class WebSocketConnectionProvider {
         }, options);
         return factory.createProxy();
     }
+    createProxy2<T extends object>(path: string, target?: object, options?: WebSocketOptions): { proxy: JsonRpcProxy<T>, webSocket: WebSocket } {
+        const factory = new JsonRpcProxyFactory<T>(target);
+        const webSocket = this.listen({
+            path,
+            onConnection: c => factory.listen(c)
+        }, options);
+        const proxy = factory.createProxy();
+        return { proxy, webSocket };
+    }
 
     /**
      * Install a connection handler for the given path.
      */
-    listen(handler: ConnectionHandler, options?: WebSocketOptions): void {
+    listen(handler: ConnectionHandler, options?: WebSocketOptions): WebSocket {
         const url = handler.path;
         const webSocket = this.createWebSocket(url);
 
@@ -55,6 +64,7 @@ export class WebSocketConnectionProvider {
             onConnection: connection => handler.onConnection(connection),
             logger
         });
+        return webSocket;
     }
 
     protected createLogger(): Logger {