Skip to content

Commit 4580ba9

Browse files
mustard-mhmustard-mh
committed
[dashboard] display warning for latest IDE versions
1 parent b10bdc6 commit 4580ba9

File tree

1 file changed

+116
-80
lines changed

1 file changed

+116
-80
lines changed

‎components/dashboard/src/start/StartPage.tsx

Lines changed: 116 additions & 80 deletions
Original file line numberDiff line numberDiff line change
@@ -4,102 +4,138 @@
44
* See License-AGPL.txt in the project root for license information.
55
*/
66

7-
import { useEffect } from 'react';
8-
import gitpodIconUA from '../icons/gitpod-ua.svg';
7+
import { useContext, useEffect } from "react";
8+
import gitpodIconUA from "../icons/gitpod-ua.svg";
9+
import { gitpodHostUrl } from "../service/service";
10+
import { UserContext } from "../user-context";
911

1012
export enum StartPhase {
11-
Checking = 0,
12-
Preparing = 1,
13-
Creating = 2,
14-
Starting = 3,
15-
Running = 4,
16-
IdeReady = 5,
17-
Stopping = 6,
18-
Stopped = 7,
19-
};
13+
Checking = 0,
14+
Preparing = 1,
15+
Creating = 2,
16+
Starting = 3,
17+
Running = 4,
18+
IdeReady = 5,
19+
Stopping = 6,
20+
Stopped = 7,
21+
}
2022

2123
function getPhaseTitle(phase?: StartPhase, error?: StartWorkspaceError) {
22-
if (!!error) {
23-
return "Oh, no! Something went wrong!";
24-
}
25-
switch (phase) {
26-
case StartPhase.Checking:
27-
return "Checking";
28-
case StartPhase.Preparing:
29-
return "Preparing";
30-
case StartPhase.Creating:
31-
return "Creating";
32-
case StartPhase.Starting:
33-
return "Starting";
34-
case StartPhase.Running:
35-
return "Starting";
36-
case StartPhase.IdeReady:
37-
return "Running";
38-
case StartPhase.Stopping:
39-
return "Stopping";
40-
case StartPhase.Stopped:
41-
return "Stopped";
42-
default:
43-
return "";
44-
}
24+
if (!!error) {
25+
return "Oh, no! Something went wrong!";
26+
}
27+
switch (phase) {
28+
case StartPhase.Checking:
29+
return "Checking";
30+
case StartPhase.Preparing:
31+
return "Preparing";
32+
case StartPhase.Creating:
33+
return "Creating";
34+
case StartPhase.Starting:
35+
return "Starting";
36+
case StartPhase.Running:
37+
return "Starting";
38+
case StartPhase.IdeReady:
39+
return "Running";
40+
case StartPhase.Stopping:
41+
return "Stopping";
42+
case StartPhase.Stopped:
43+
return "Stopped";
44+
default:
45+
return "";
46+
}
4547
}
4648

47-
function ProgressBar(props: { phase: number, error: boolean }) {
48-
const { phase, error } = props;
49-
return <div className="flex mt-4 mb-6">
50-
{[1, 2, 3].map(i => {
51-
let classes = 'h-2 w-10 mx-1 my-2 rounded-full';
52-
if (i < phase) {
53-
// Already passed this phase successfully
54-
classes += ' bg-green-400';
55-
} else if (i > phase) {
56-
// Haven't reached this phase yet
57-
classes += ' bg-gray-200 dark:bg-gray-800';
58-
} else if (error) {
59-
// This phase has failed
60-
classes += ' bg-red-500';
61-
} else {
62-
// This phase is currently running
63-
classes += ' bg-green-400 animate-pulse';
64-
}
65-
return <div key={'phase-' + i} className={classes} />;
66-
})}
67-
</div>;
49+
function ProgressBar(props: { phase: number; error: boolean }) {
50+
const { phase, error } = props;
51+
return (
52+
<div className="flex justify-center">
53+
{[1, 2, 3].map((i) => {
54+
let classes = "h-2 w-10 mx-1 my-2 rounded-full";
55+
if (i < phase) {
56+
// Already passed this phase successfully
57+
classes += " bg-green-400";
58+
} else if (i > phase) {
59+
// Haven't reached this phase yet
60+
classes += " bg-gray-200 dark:bg-gray-800";
61+
} else if (error) {
62+
// This phase has failed
63+
classes += " bg-red-500";
64+
} else {
65+
// This phase is currently running
66+
classes += " bg-green-400 animate-pulse";
67+
}
68+
return <div key={"phase-" + i} className={classes} />;
69+
})}
70+
</div>
71+
);
6872
}
6973

7074
export interface StartPageProps {
71-
phase?: number;
72-
error?: StartWorkspaceError;
73-
title?: string;
74-
children?: React.ReactNode;
75+
phase?: number;
76+
error?: StartWorkspaceError;
77+
title?: string;
78+
children?: React.ReactNode;
7579
}
7680

7781
export interface StartWorkspaceError {
78-
message?: string;
79-
code?: number;
80-
data?: any;
82+
message?: string;
83+
code?: number;
84+
data?: any;
8185
}
8286

87+
export const CodeLatest = "code-latest";
88+
8389
export function StartPage(props: StartPageProps) {
84-
const { phase, error } = props;
85-
let title = props.title || getPhaseTitle(phase, error);
86-
useEffect(() => { document.title = 'Starting — Gitpod' }, []);
87-
return <div className="w-screen h-screen align-middle">
88-
<div className="flex flex-col mx-auto items-center text-center h-screen">
89-
<div className="h-1/3"></div>
90-
<img src={gitpodIconUA} alt="Gitpod's logo" className={`h-16 flex-shrink-0 ${(error || phase === StartPhase.Stopped || phase === StartPhase.IdeReady) ? '' : 'animate-bounce'}`} />
91-
<h3 className="mt-8 text-xl">{title}</h3>
92-
{typeof(phase) === 'number' && phase < StartPhase.IdeReady && <ProgressBar phase={phase} error={!!error} />}
93-
{error && <StartError error={error} />}
94-
{props.children}
95-
</div>
96-
</div>;
90+
const { user } = useContext(UserContext);
91+
const ideSettings = user?.additionalData?.ideSettings;
92+
const { phase, error } = props;
93+
let title = props.title || getPhaseTitle(phase, error);
94+
const useLatestJetBrainsDesktop =
95+
ideSettings?.useLatestVersion && !ideSettings?.defaultDesktopIde?.startsWith("code-desktop");
96+
const useInsiders = ideSettings?.defaultIde === CodeLatest;
97+
const warningMessage = (useInsiders || useLatestJetBrainsDesktop) && (
98+
<div className="text-center text-sm w-72 text-orange-400">
99+
LATEST IDE WARNING PLACEHOLDER, CLICK
100+
<a className="hover:text-blue-600 dark:hover:text-blue-400" href={gitpodHostUrl.asPreferences().toString()}>
101+
&nbsp;HERE&nbsp;
102+
</a>
103+
TO CHANGE YOUR IDE
104+
</div>
105+
);
106+
useEffect(() => {
107+
document.title = "Starting — Gitpod";
108+
}, []);
109+
return (
110+
<div className="w-screen h-screen align-middle">
111+
<div className="flex flex-col mx-auto items-center text-center h-screen">
112+
<div className="h-1/3"></div>
113+
<img
114+
src={gitpodIconUA}
115+
alt="Gitpod's logo"
116+
className={`h-16 flex-shrink-0 ${
117+
error || phase === StartPhase.Stopped || phase === StartPhase.IdeReady ? "" : "animate-bounce"
118+
}`}
119+
/>
120+
<h3 className="mt-8 text-xl">{title}</h3>
121+
<div className="space-y-6 mb-6 mt-4">
122+
{typeof phase === "number" && phase < StartPhase.IdeReady && (
123+
<ProgressBar phase={phase} error={!!error} />
124+
)}
125+
{warningMessage}
126+
</div>
127+
128+
{error && <StartError error={error} />}
129+
{props.children}
130+
</div>
131+
</div>
132+
);
97133
}
98134

99135
function StartError(props: { error: StartWorkspaceError }) {
100-
const { error } = props;
101-
if (!error) {
102-
return null;
103-
}
104-
return <p className="text-base text-gitpod-red w-96">{error.message}</p>;
136+
const { error } = props;
137+
if (!error) {
138+
return null;
139+
}
140+
return <p className="text-base text-gitpod-red w-96">{error.message}</p>;
105141
}

0 commit comments

Comments
 (0)