Skip to content

Commit 56dfb6f

Browse files
Hide editor versions for user prefs (#19639)
* Hide editor versions for user prefs * Include JB IDE version in editor option name * Do not show latest when hiding versions
1 parent 58156dc commit 56dfb6f

File tree

4 files changed

+47
-40
lines changed

4 files changed

+47
-40
lines changed

components/dashboard/src/components/SelectIDEComponent.tsx

+44-39
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44
* See License.AGPL.txt in the project root for license information.
55
*/
66

7-
import { FC, useCallback, useEffect, useMemo } from "react";
7+
import { useCallback, useEffect, useMemo } from "react";
88
import { Combobox, ComboboxElement, ComboboxSelectedItem } from "./podkit/combobox/Combobox";
99
import Editor from "../icons/Editor.svg";
1010
import { AllowedWorkspaceEditor, useAllowedWorkspaceEditorsMemo } from "../data/ide-options/ide-options-query";
@@ -14,33 +14,34 @@ import { Link } from "react-router-dom";
1414
import { repositoriesRoutes } from "../repositories/repositories.routes";
1515
import { useFeatureFlag } from "../data/featureflag-query";
1616

17-
interface SelectIDEComponentProps {
17+
type Props = {
1818
selectedIdeOption?: string;
1919
selectedConfigurationId?: string;
2020
pinnedEditorVersions?: Map<string, string>;
2121
useLatest?: boolean;
22-
onSelectionChange: (ide: string, latest: boolean) => void;
23-
setError?: (error?: React.ReactNode) => void;
24-
setWarning?: (warning?: React.ReactNode) => void;
2522
disabled?: boolean;
2623
loading?: boolean;
2724
ignoreRestrictionScopes: DisableScope[] | undefined;
2825
availableOptions?: string[];
29-
}
30-
26+
hideVersions?: boolean;
27+
setError?: (error?: React.ReactNode) => void;
28+
setWarning?: (warning?: React.ReactNode) => void;
29+
onSelectionChange: (ide: string, latest: boolean) => void;
30+
};
3131
export default function SelectIDEComponent({
3232
selectedIdeOption,
3333
selectedConfigurationId,
3434
pinnedEditorVersions,
3535
useLatest,
3636
disabled = false,
3737
loading = false,
38+
ignoreRestrictionScopes,
39+
availableOptions,
40+
hideVersions,
3841
setError,
3942
setWarning,
4043
onSelectionChange,
41-
ignoreRestrictionScopes,
42-
availableOptions,
43-
}: SelectIDEComponentProps) {
44+
}: Props) {
4445
const {
4546
data: ideOptions,
4647
isLoading: ideOptionsLoading,
@@ -51,15 +52,13 @@ export default function SelectIDEComponent({
5152
});
5253
const isEditorVersionPinningEnabled = useFeatureFlag("org_level_editor_version_pinning_enabled");
5354

54-
const options = ideOptions;
55-
5655
const getElements = useCallback(
5756
(search: string) => {
58-
if (!options) {
57+
if (!ideOptions) {
5958
return [];
6059
}
6160
const result: ComboboxElement[] = [];
62-
for (const ide of options.filter((ide) =>
61+
for (const ide of ideOptions.filter((ide) =>
6362
`${ide.label}${ide.title}${ide.notes}${ide.id}`.toLowerCase().includes(search.toLowerCase()),
6463
)) {
6564
if (!useLatest) {
@@ -70,21 +69,24 @@ export default function SelectIDEComponent({
7069
option={ide}
7170
pinnedIdeVersion={pinnedEditorVersions?.get(ide.id)}
7271
useLatest={false}
72+
hideVersion={hideVersions}
7373
/>
7474
),
7575
isSelectable: true,
7676
});
7777
} else if (ide.latestImage) {
7878
result.push({
7979
id: ide.id + "-latest",
80-
element: <IdeOptionElementInDropDown option={ide} useLatest={true} />,
80+
element: (
81+
<IdeOptionElementInDropDown option={ide} useLatest={true} hideVersion={hideVersions} />
82+
),
8183
isSelectable: true,
8284
});
8385
}
8486
}
8587
return result;
8688
},
87-
[options, useLatest, pinnedEditorVersions],
89+
[ideOptions, useLatest, pinnedEditorVersions, hideVersions],
8890
);
8991
const internalOnSelectionChange = (id: string) => {
9092
const { ide, useLatest } = parseId(id);
@@ -177,6 +179,7 @@ export default function SelectIDEComponent({
177179
pinnedIdeVersion={pinnedEditorVersions?.get(ide)}
178180
useLatest={!!useLatest}
179181
loading={ideOptionsLoading || loading}
182+
hideVersion={hideVersions}
180183
/>
181184
</Combobox>
182185
);
@@ -188,23 +191,20 @@ function parseId(id: string): { ide: string; useLatest: boolean } {
188191
return { ide, useLatest };
189192
}
190193

191-
interface IdeOptionElementProps {
194+
type IdeOptionProps = {
192195
option: AllowedWorkspaceEditor | undefined;
193196
pinnedIdeVersion?: string;
194197
useLatest: boolean;
195198
loading?: boolean;
196-
}
197-
198-
function capitalize(label?: string) {
199-
return label && label[0].toLocaleUpperCase() + label.slice(1);
200-
}
201-
202-
const IdeOptionElementSelected: FC<IdeOptionElementProps> = ({
199+
hideVersion?: boolean;
200+
};
201+
const IdeOptionElementSelected = ({
203202
option,
204203
pinnedIdeVersion,
205204
useLatest,
206205
loading = false,
207-
}) => {
206+
hideVersion = false,
207+
}: IdeOptionProps) => {
208208
let version: string | undefined, label: string | undefined, title: string;
209209
if (!option) {
210210
title = "Select Editor";
@@ -221,9 +221,14 @@ const IdeOptionElementSelected: FC<IdeOptionElementProps> = ({
221221
htmlTitle={title}
222222
title={
223223
<div>
224-
{title} <MiddleDot className="text-pk-content-tertiary" />{" "}
225-
<span className="font-normal">{version}</span>{" "}
226-
{useLatest && (
224+
{title}
225+
{!hideVersion && (
226+
<>
227+
<MiddleDot className="text-pk-content-tertiary" />{" "}
228+
<span className="font-normal">{version}</span>{" "}
229+
</>
230+
)}
231+
{useLatest && !hideVersion && (
227232
<div className="ml-1 rounded-xl bg-pk-content-tertiary/10 px-2 py-1 inline text-sm font-normal">
228233
Latest
229234
</div>
@@ -236,7 +241,7 @@ const IdeOptionElementSelected: FC<IdeOptionElementProps> = ({
236241
{label && (
237242
<>
238243
<MiddleDot />
239-
<div>{capitalize(label)}</div>
244+
<div className="capitalize">{label}</div>
240245
</>
241246
)}
242247
</div>
@@ -250,13 +255,13 @@ export const isJetbrains = (editor: string) => {
250255
return !["code", "code-desktop", "xterm"].includes(editor); // a really hacky way to get just JetBrains IDEs
251256
};
252257

253-
function IdeOptionElementInDropDown(p: IdeOptionElementProps): JSX.Element {
254-
const { option, useLatest } = p;
258+
function IdeOptionElementInDropDown({ option, useLatest, pinnedIdeVersion, hideVersion = false }: IdeOptionProps) {
255259
if (!option) {
256260
return <></>;
257261
}
258-
const version = useLatest ? option.latestImageVersion : p.pinnedIdeVersion ?? option.imageVersion;
259-
const label = !isJetbrains(option.id) && capitalize(option.type);
262+
263+
const version = useLatest ? option.latestImageVersion : pinnedIdeVersion ?? option.imageVersion;
264+
const label = !isJetbrains(option.id) && option.type;
260265

261266
return (
262267
<div className="flex" title={option.title}>
@@ -265,19 +270,19 @@ function IdeOptionElementInDropDown(p: IdeOptionElementProps): JSX.Element {
265270
</div>
266271
<div className="flex self-center text-gray-500">
267272
<div className="font-semibold text-gray-700 dark:text-gray-300">{option.title}</div>
268-
{version && (
273+
{!hideVersion && version && (
269274
<>
270-
<div className="mx-1">&middot;</div>
271-
<div>{version}</div>
275+
<MiddleDot />
276+
<span>{version}</span>
272277
</>
273278
)}
274279
{label && (
275280
<>
276-
<div className="mx-1">&middot;</div>
277-
<div>{label}</div>
281+
<MiddleDot />
282+
<span className="capitalize">{label}</span>
278283
</>
279284
)}
280-
{useLatest && <div className="ml-2 rounded-xl bg-gray-200 px-2">Latest</div>}
285+
{useLatest && !hideVersion && <div className="ml-2 rounded-xl bg-gray-200 px-2">Latest</div>}
281286
</div>
282287
</div>
283288
);

components/dashboard/src/onboarding/StepPersonalize.tsx

+1
Original file line numberDiff line numberDiff line change
@@ -52,6 +52,7 @@ export const StepPersonalize: FC<Props> = ({ user, onComplete }) => {
5252
ignoreRestrictionScopes={["configuration", "organization"]}
5353
selectedIdeOption={ide}
5454
useLatest={useLatest}
55+
hideVersions
5556
/>
5657

5758
<ThemeSelector className="mt-4" />

components/dashboard/src/user-settings/SelectIDE.tsx

+1
Original file line numberDiff line numberDiff line change
@@ -90,6 +90,7 @@ export default function SelectIDE(props: SelectIDEProps) {
9090
useLatest={useLatestVersion}
9191
setWarning={setIdeWarning}
9292
ignoreRestrictionScopes={isOrgOwnedUser ? ["configuration"] : ["configuration", "organization"]}
93+
hideVersions
9394
/>
9495
</div>
9596

install/installer/pkg/components/ide-service/ide-configmap.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -112,7 +112,7 @@
112112
},
113113
"intellij-previous": {
114114
"orderKey": "041",
115-
"title": "IntelliJ IDEA",
115+
"title": "IntelliJ IDEA 2022.3.3",
116116
"type": "desktop",
117117
"logo": "{{.IdeLogoBase}}/intellijIdeaLogo.svg",
118118
"label": "Ultimate",

0 commit comments

Comments
 (0)