[dashboard] Add more actions to workspace ready page

components/dashboard/src/components/Arrow.tsx

@@ -0,0 +1,11 @@
+/**
+ * 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.
+ */
+
+function Arrow(props: { up: boolean }) {
+    return <span className="mx-2 border-gray-400 dark:border-gray-600 group-hover:border-gray-600 dark:group-hover:border-gray-400" style={{ marginTop: 2, marginBottom: 2, padding: 3, borderWidth: '0 2px 2px 0', display: 'inline-block', transform: `rotate(${props.up ? '-135deg' : '45deg'})` }}></span>
+}
+
+export default Arrow;

components/dashboard/src/components/ContextMenu.tsx

@@ -4,7 +4,7 @@
  * See License-AGPL.txt in the project root for license information.
  */
 
-import React from 'react';
+import React, { HTMLAttributeAnchorTarget } from 'react';
 import { useEffect, useState } from 'react';
 import { Link } from 'react-router-dom';
 
@@ -26,6 +26,7 @@ export interface ContextMenuEntry {
     onClick?: (event: React.MouseEvent) => void;
     href?: string;
     link?: string;
+    target?: HTMLAttributeAnchorTarget;
 }
 
 function ContextMenu(props: ContextMenuProps) {
@@ -91,11 +92,11 @@ function ContextMenu(props: ContextMenuProps) {
                             </div>
                             const key = `entry-${menuId}-${index}-${e.title}`;
                             if (e.link) {
-                                return <Link key={key} to={e.link} onClick={e.onClick}>
+                                return <Link key={key} to={e.link} onClick={e.onClick} target={e.target}>
                                     {entry}
                                 </Link>;
                             } else if (e.href) {
-                                return <a key={key} href={e.href} onClick={e.onClick}>
+                                return <a key={key} href={e.href} onClick={e.onClick} target={e.target}>
                                     {entry}
                                 </a>;
                             } else {

components/dashboard/src/components/DropDown.tsx

@@ -5,6 +5,7 @@
  */
 
 import { useEffect, useState } from 'react';
+import Arrow from './Arrow';
 import ContextMenu from './ContextMenu';
 
 export interface DropDownProps {
@@ -19,10 +20,6 @@ export interface DropDownEntry {
     onClick: ()=>void
 }
 
-function Arrow(props: {up: boolean}) {
-    return <span className="mx-2 border-gray-400 dark:border-gray-600 group-hover:border-gray-600 dark:group-hover:border-gray-400" style={{ marginTop: 2, marginBottom: 2, padding: 3, borderWidth: '0 2px 2px 0', display: 'inline-block', transform: `rotate(${props.up ? '-135deg' : '45deg'})`}}></span>
-}
-
 function DropDown(props: DropDownProps) {
     const [current, setCurrent] = useState(props.activeEntry || props.entries[0].title);
     useEffect(() => {

components/dashboard/src/start/StartWorkspace.tsx

@@ -4,15 +4,17 @@
  * See License-AGPL.txt in the project root for license information.
  */
 
-import EventEmitter from "events";
-import React, { useEffect, Suspense } from "react";
-import { DisposableCollection, WorkspaceInstance, WorkspaceImageBuild, Workspace, WithPrebuild, ContextURL } from "@gitpod/gitpod-protocol";
+import { ContextURL, DisposableCollection, WithPrebuild, Workspace, WorkspaceImageBuild, WorkspaceInstance } from "@gitpod/gitpod-protocol";
 import { ErrorCodes } from "@gitpod/gitpod-protocol/lib/messaging/error";
+import EventEmitter from "events";
+import React, { Suspense, useEffect } from "react";
+import { v4 } from 'uuid';
+import Arrow from "../components/Arrow";
+import ContextMenu from "../components/ContextMenu";
 import PendingChangesDropdown from "../components/PendingChangesDropdown";
+import { watchHeadlessLogs } from "../components/PrebuildLogs";
 import { getGitpodService, gitpodHostUrl } from "../service/service";
 import { StartPage, StartPhase, StartWorkspaceError } from "./StartPage";
-import { watchHeadlessLogs } from "../components/PrebuildLogs";
-import { v4 } from 'uuid';
 const sessionId = v4();
 
 const WorkspaceLogs = React.lazy(() => import('../components/WorkspaceLogs'));
@@ -291,9 +293,26 @@ export default class StartWorkspace extends React.Component<StartWorkspaceProps,
               </div>
             </div>
             <div className="mt-10 justify-center flex space-x-2">
-              <button className="secondary" onClick={() => window.parent.postMessage({ type: 'openBrowserIde' }, '*')}>Open VS Code in Browser</button>
+              <ContextMenu menuEntries={[
+                {
+                  title: 'Open in Browser',
+                  onClick: () => window.parent.postMessage({ type: 'openBrowserIde' }, '*'),
+                },
+                {
+                  title: 'Stop Workspace',
+                  onClick: () => getGitpodService().server.stopWorkspace(this.props.workspaceId),
+                },
+                {
+                  title: 'Go to Dashboard',
+                  href: gitpodHostUrl.asDashboard().toString(),
+                  target: "_parent",
+                },
+              ]} >
+                <button className="secondary">More Actions...<Arrow up={false} /></button>
+              </ContextMenu>
               <a target="_blank" href={this.state.desktopIde.link}><button>{this.state.desktopIde.label}</button></a>
             </div>
+            <div className="text-sm text-gray-400 dark:text-gray-500 mt-5">These IDE options are based on <a className="gp-link" href={gitpodHostUrl.asPreferences().toString()} target="_parent">your user preferences</a>.</div>
           </div>;
         }
 

components/gitpod-protocol/src/util/gitpod-host-url.ts

@@ -104,6 +104,10 @@ export class GitpodHostUrl {
         return this.with(url => ({ pathname: '/settings' }));
     }
 
+    asPreferences(): GitpodHostUrl {
+        return this.with(url => ({ pathname: '/preferences' }));
+    }
+
     asGraphQLApi(): GitpodHostUrl {
         return this.with(url => ({ pathname: '/graphql/' }));
     }