[dashboard] Fix Arc favourites (#20466)

* [dashboard] Fix Arc favourites

* 💄

* Fix banner <> redirect race

Author: filiptronicek

components/dashboard/src/components/podkit/buttons/LinkButton.tsx

@@ -6,27 +6,30 @@
 
 import { Link } from "react-router-dom";
 import { Button, ButtonProps } from "@podkit/buttons/Button";
-import React from "react";
+import { forwardRef, HTMLAttributeAnchorTarget } from "react";
 
 export interface LinkButtonProps extends ButtonProps {
     asChild?: false;
     href: string;
+    target?: HTMLAttributeAnchorTarget;
     isExternalUrl?: boolean;
 }
 
 /**
  * A HTML anchor element styled as a button.
  */
-export const LinkButton = React.forwardRef<HTMLButtonElement, LinkButtonProps>(
-    ({ asChild, children, href, ...props }, ref) => {
+export const LinkButton = forwardRef<HTMLButtonElement, LinkButtonProps>(
+    ({ asChild, children, href, target, ...props }, ref) => {
         return (
             <Button ref={ref} {...props} asChild>
                 {props.isExternalUrl ? (
-                    <a href={href} target="_blank" rel="noreferrer">
+                    <a href={href} target={target ?? "_blank"} rel="noreferrer">
                         {children}
                     </a>
                 ) : (
-                    <Link to={href}>{children}</Link>
+                    <Link to={href} target={target}>
+                        {children}
+                    </Link>
                 )}
             </Button>
         );

components/dashboard/src/start/StartWorkspace.tsx

@@ -36,6 +36,7 @@ import {
 import { PartialMessage } from "@bufbuild/protobuf";
 import { trackEvent } from "../Analytics";
 import { fromWorkspaceName } from "../workspaces/RenameWorkspaceModal";
+import { LinkButton } from "@podkit/buttons/LinkButton";
 
 const sessionId = v4();
 
@@ -102,6 +103,14 @@ export interface StartWorkspaceState {
     ideOptions?: IDEOptions;
     isSSHModalVisible?: boolean;
     ownerToken?: string;
+    /**
+     * Set to prevent multiple redirects to the same URL when the User Agent ignores our wish to open links in the same tab (by setting window.location.href).
+     */
+    redirected?: boolean;
+    /**
+     * Determines whether `redirected` has been `true` for long enough to display our "new tab" info banner without racing with same-tab redirection in regular setups
+     */
+    showRedirectMessage?: boolean;
 }
 
 // TODO: use Function Components
@@ -183,7 +192,7 @@ export default class StartWorkspace extends React.Component<StartWorkspaceProps,
         this.toDispose.dispose();
     }
 
-    componentDidUpdate(prevPros: StartWorkspaceProps, prevState: StartWorkspaceState) {
+    componentDidUpdate(_prevProps: StartWorkspaceProps, prevState: StartWorkspaceState) {
         const newPhase = this.state?.workspace?.status?.phase?.name;
         const oldPhase = prevState.workspace?.status?.phase?.name;
         const type = this.state.workspace?.spec?.type === WorkspaceSpec_WorkspaceType.PREBUILD ? "prebuild" : "regular";
@@ -458,11 +467,20 @@ export default class StartWorkspace extends React.Component<StartWorkspaceProps,
     }
 
     redirectTo(url: string) {
+        if (this.state.redirected) {
+            console.info("Prevented another redirect", { url });
+            return;
+        }
         if (this.props.runsInIFrame) {
             this.ideFrontendService?.relocate(url);
         } else {
             window.location.href = url;
         }
+
+        this.setState({ redirected: true });
+        setTimeout(() => {
+            this.setState({ showRedirectMessage: true });
+        }, 2000);
     }
 
     private openDesktopLink(link: string) {
@@ -503,7 +521,7 @@ export default class StartWorkspace extends React.Component<StartWorkspaceProps,
                 return <ImageBuildView workspaceId={this.state.workspace.id} />;
 
             // Pending means the workspace does not yet consume resources in the cluster, but rather is looking for
-            // some space within the cluster. If for example the cluster needs to scale up to accomodate the
+            // some space within the cluster. If for example the cluster needs to scale up to accommodate the
             // workspace, the workspace will be in Pending state until that happened.
             case WorkspacePhase_Phase.PENDING:
                 phase = StartPhase.Preparing;
@@ -746,6 +764,7 @@ export default class StartWorkspace extends React.Component<StartWorkspaceProps,
                 );
                 break;
         }
+
         return (
             <StartPage
                 phase={phase}
@@ -755,6 +774,30 @@ export default class StartWorkspace extends React.Component<StartWorkspaceProps,
                 workspaceId={this.props.workspaceId}
             >
                 {statusMessage}
+                {this.state.showRedirectMessage && (
+                    <>
+                        <Alert type="info" className="mt-4 w-112">
+                            We redirected you to your workspace, but your browser probably opened it in another tab.
+                        </Alert>
+
+                        <div className="mt-4 justify-center flex space-x-2">
+                            <LinkButton href={gitpodHostUrl.asWorkspacePage().toString()} target="_self" isExternalUrl>
+                                Go to Dashboard
+                            </LinkButton>
+                            {this.state.workspace?.status?.workspaceUrl &&
+                                this.state.workspace.status.phase?.name === WorkspacePhase_Phase.RUNNING && (
+                                    <LinkButton
+                                        variant={"secondary"}
+                                        href={this.state.workspace.status.workspaceUrl}
+                                        target="_self"
+                                        isExternalUrl
+                                    >
+                                        Re-open Workspace
+                                    </LinkButton>
+                                )}
+                        </div>
+                    </>
+                )}
             </StartPage>
         );
     }