Skip to content

Add IDE versions to the dashboard #15139

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 2 commits into from
Dec 6, 2022
Merged

Add IDE versions to the dashboard #15139

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
c5a4f9c
Add versions to the dashboard
filiptronicek Dec 2, 2022
b2a0a9b
Remove outdated logic with now obsolete clients
filiptronicek Dec 5, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
47 changes: 34 additions & 13 deletions components/dashboard/src/settings/SelectIDE.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -75,12 +75,7 @@ export default function SelectIDE(props: SelectIDEProps) {
const [ideOptions, setIdeOptions] = useState<IDEOptions | undefined>(undefined);
useEffect(() => {
(async () => {
const ideopts = await getGitpodService().server.getIDEOptions();
// TODO: Compatible with ide-config not deployed, need revert after ide-config deployed
delete ideopts.options["code-latest"];
delete ideopts.options["code-desktop-insiders"];

setIdeOptions(ideopts);
setIdeOptions(await getGitpodService().server.getIDEOptions());
})();
}, []);

Expand All @@ -95,8 +90,9 @@ export default function SelectIDE(props: SelectIDEProps) {
<div className={`my-4 gap-3 flex flex-wrap max-w-3xl`}>
{allIdeOptions.map(([id, option]) => {
const selected = defaultIde === id;
const version = useLatestVersion ? option.latestImageVersion : option.imageVersion;
const onSelect = () => actuallySetDefaultIde(id);
return renderIdeOption(option, selected, onSelect);
return renderIdeOption(option, selected, version, onSelect);
})}
</div>
{ideOptions.options[defaultIde]?.notes && (
Expand Down Expand Up @@ -176,20 +172,45 @@ function orderedIdeOptions(ideOptions: IDEOptions) {
});
}

function renderIdeOption(option: IDEOption, selected: boolean, onSelect: () => void): JSX.Element {
function renderIdeOption(
option: IDEOption,
selected: boolean,
version: IDEOption["imageVersion"],
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Wouldn't the version already be inside the option: IDEOption param?

Copy link
Member

@akosyakov akosyakov Dec 5, 2022 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

option has 2 versions stable and latest, passed version is a selection one of another depending on a user choice (line 98 above)

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

question: When selecting the latest release, VS Code version remains the same. Is this expected?

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think here it's because in preview environments, we just use the stable version as Insiders. Should be expected

@iQQBot please correct me if I'm wrong here 😄 🙏

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks, @filiptronicek! OK, let's see how this behaves in production, then. 🎣

onSelect: () => void,
): JSX.Element {
const label = option.type === "desktop" ? "" : option.type;
const card = (
<SelectableCardSolid className="w-36 h-40" title={option.title} selected={selected} onClick={onSelect}>
<SelectableCardSolid className="w-36 h-44" title={option.title} selected={selected} onClick={onSelect}>
<div className="flex justify-center mt-3">
<img className="w-16 filter-grayscale self-center" src={option.logo} alt="logo" />
</div>
{label ? (
<div
className="mt-2 px-3 py-1 self-center"
style={{
minHeight: "1.75rem",
}}
>
{label ? (
<span
className={`font-semibold text-sm ${
selected ? "text-gray-100 dark:text-gray-600" : "text-gray-600 dark:text-gray-500"
} uppercase`}
>
{label}
</span>
) : (
<></>
)}
</div>

{version ? (
<div
className={`font-semibold text-sm ${
className={`font-semibold text-xs ${
selected ? "text-gray-100 dark:text-gray-600" : "text-gray-600 dark:text-gray-500"
} uppercase mt-2 px-3 py-1 self-center`}
} uppercase px-3 self-center`}
title="The IDE's current version on Gitpod"
>
{label}
{version}
</div>
) : (
<></>
Expand Down
12 changes: 11 additions & 1 deletion components/gitpod-protocol/src/ide-protocol.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -87,7 +87,7 @@ export interface IDEOption {
label?: string;

/**
* Notes to the IDE option that are renderd in the preferences when a user
* Notes to the IDE option that are rendered in the preferences when a user
* chooses this IDE.
*/
notes?: string[];
Expand Down Expand Up @@ -126,4 +126,14 @@ export interface IDEOption {
* The latest plugin image ref for the latest IDE image, this image ref always resolve to digest.
*/
pluginLatestImage?: string;

/**
* ImageVersion the semantic version of the IDE image.
*/
imageVersion?: string;

/**
* LatestImageVersion the semantic version of the latest IDE image.
*/
latestImageVersion?: string;
}