Skip to content

Commit cdba332

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

File tree

5 files changed

+2205
-1271
lines changed

5 files changed

+2205
-1271
lines changed

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

Lines changed: 111 additions & 80 deletions
Original file line numberDiff line numberDiff line change
@@ -4,102 +4,133 @@
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 { useEffect } from "react";
8+
import gitpodIconUA from "../icons/gitpod-ua.svg";
9+
import { gitpodHostUrl } from "../service/service";
910

1011
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-
};
12+
Checking = 0,
13+
Preparing = 1,
14+
Creating = 2,
15+
Starting = 3,
16+
Running = 4,
17+
IdeReady = 5,
18+
Stopping = 6,
19+
Stopped = 7,
20+
}
2021

2122
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-
}
23+
if (!!error) {
24+
return "Oh, no! Something went wrong!";
25+
}
26+
switch (phase) {
27+
case StartPhase.Checking:
28+
return "Checking";
29+
case StartPhase.Preparing:
30+
return "Preparing";
31+
case StartPhase.Creating:
32+
return "Creating";
33+
case StartPhase.Starting:
34+
return "Starting";
35+
case StartPhase.Running:
36+
return "Starting";
37+
case StartPhase.IdeReady:
38+
return "Running";
39+
case StartPhase.Stopping:
40+
return "Stopping";
41+
case StartPhase.Stopped:
42+
return "Stopped";
43+
default:
44+
return "";
45+
}
4546
}
4647

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

7073
export interface StartPageProps {
71-
phase?: number;
72-
error?: StartWorkspaceError;
73-
title?: string;
74-
children?: React.ReactNode;
74+
phase?: number;
75+
error?: StartWorkspaceError;
76+
title?: string;
77+
children?: React.ReactNode;
78+
latestWarning?: boolean;
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 { phase, error } = props;
91+
let title = props.title || getPhaseTitle(phase, error);
92+
const warningMessage = props.latestWarning && (
93+
<div className="text-center text-sm w-72 text-orange-400">
94+
LATEST IDE WARNING PLACEHOLDER, CLICK
95+
<a className="hover:text-blue-600 dark:hover:text-blue-400" href={gitpodHostUrl.asPreferences().toString()}>
96+
&nbsp;HERE&nbsp;
97+
</a>
98+
TO CHANGE YOUR IDE
99+
</div>
100+
);
101+
useEffect(() => {
102+
document.title = "Starting — Gitpod";
103+
}, []);
104+
return (
105+
<div className="w-screen h-screen align-middle">
106+
<div className="flex flex-col mx-auto items-center text-center h-screen">
107+
<div className="h-1/3"></div>
108+
<img
109+
src={gitpodIconUA}
110+
alt="Gitpod's logo"
111+
className={`h-16 flex-shrink-0 ${
112+
error || phase === StartPhase.Stopped || phase === StartPhase.IdeReady ? "" : "animate-bounce"
113+
}`}
114+
/>
115+
<h3 className="mt-8 text-xl">{title}</h3>
116+
<div className="space-y-6 mb-6 mt-4">
117+
{typeof phase === "number" && phase < StartPhase.IdeReady && (
118+
<ProgressBar phase={phase} error={!!error} />
119+
)}
120+
{warningMessage}
121+
</div>
122+
123+
{error && <StartError error={error} />}
124+
{props.children}
125+
</div>
126+
</div>
127+
);
97128
}
98129

99130
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>;
131+
const { error } = props;
132+
if (!error) {
133+
return null;
134+
}
135+
return <p className="text-base text-gitpod-red w-96">{error.message}</p>;
105136
}

0 commit comments

Comments
 (0)