Do not show Editor type for JB (#19620)

* Do not show Editor type for JB * Revert "Increase modal dialog min width (#19619)" This reverts commit 149f323. * Make type inclusion consistent on editor listing * Remove extra whitespace
gitpod-io · Apr 15, 2024 · f082bff · f082bff
1 parent 2f5b66d
commit f082bff
Show file tree

Hide file tree

Showing 4 changed files with 50 additions and 28 deletions.
diff --git a/components/dashboard/src/components/IdeOptions.tsx b/components/dashboard/src/components/IdeOptions.tsx
@@ -18,6 +18,7 @@ import { LoadingState } from "@podkit/loading/LoadingState";
 import { useIDEVersionsQuery } from "../data/ide-options/ide-options-query";
 import { useFeatureFlag } from "../data/featureflag-query";
 import { AllowedWorkspaceEditor } from "../data/ide-options/ide-options-query";
+import { isJetbrains } from "./SelectIDEComponent";
 
 interface IdeOptionsProps {
     ideOptions: AllowedWorkspaceEditor[] | undefined;
@@ -34,30 +35,40 @@ export const IdeOptions = (props: IdeOptionsProps) => {
     if ((!props.ideOptions || props.ideOptions.length === 0) && props.emptyState) {
         return <>{props.emptyState}</>;
     }
+
     return (
         <div className={cn("space-y-2", props.className)}>
             {props.ideOptions &&
-                props.ideOptions.map((ide) => (
-                    <div key={ide.id} className="flex gap-2 items-center">
-                        <img className="w-5 h-5 self-center" src={ide.logo} alt="" />
-                        <span>
-                            <span className="font-medium text-pk-content-primary">{ide.title}</span>
-                            {ide.imageVersion && (
-                                <>
-                                    <MiddleDot />
-                                    {props.pinnedEditorVersions.get(ide.id) && (
-                                        <PinIcon size={16} className="inline align-text-bottom" />
-                                    )}
-                                    <span className="text-pk-content-primary">
-                                        {props.pinnedEditorVersions.get(ide.id) || ide.imageVersion}
-                                    </span>
-                                </>
-                            )}
-                            <MiddleDot />
-                            <span className="text-pk-content-primary capitalize">{ide.type}</span>
-                        </span>
-                    </div>
-                ))}
+                props.ideOptions.map((ide) => {
+                    const type = !isJetbrains(ide.id) && ide.type;
+
+                    return (
+                        <div key={ide.id} className="flex gap-2 items-center">
+                            <img className="w-5 h-5 self-center" src={ide.logo} alt="" />
+                            <span>
+                                <span className="font-medium text-pk-content-primary">{ide.title}</span>
+                                {ide.imageVersion && (
+                                    <>
+                                        <MiddleDot />
+                                        {props.pinnedEditorVersions.get(ide.id) && (
+                                            <PinIcon size={16} className="inline align-text-bottom" />
+                                        )}
+                                        <span className="text-pk-content-primary">
+                                            {props.pinnedEditorVersions.get(ide.id) || ide.imageVersion}
+                                        </span>
+                                    </>
+                                )}
+
+                                {type && (
+                                    <>
+                                        <MiddleDot />
+                                        <span className="text-pk-content-primary capitalize">{type}</span>
+                                    </>
+                                )}
+                            </span>
+                        </div>
+                    );
+                })}
         </div>
     );
 };
@@ -234,6 +245,9 @@ const IdeOptionSwitch = ({
             ))}
         </select>
     );
+
+    // For JetBrains, we don't show the type because it is always Desktop and hence redundant
+    const type = !isJetbrains(ideOption.id) && ideOption.type;
     const description = (
         <div className={cn("inline-flex items-center", contentColor)}>
             {(ideOption.imageVersion || pinnedIdeVersion || versionSelector) && (
@@ -243,8 +257,12 @@ const IdeOptionSwitch = ({
                     {versionSelector || <span>{pinnedIdeVersion || ideOption.imageVersion}</span>}
                 </>
             )}
-            <MiddleDot />
-            <span className="capitalize">{ideOption.type}</span>
+            {type && (
+                <>
+                    <MiddleDot />
+                    <span className="capitalize">{type}</span>
+                </>
+            )}
         </div>
     );
 

diff --git a/components/dashboard/src/components/Modal.tsx b/components/dashboard/src/components/Modal.tsx
@@ -82,7 +82,7 @@ export const Modal: FC<Props> = ({
                 tabIndex={0}
             >
                 {/* Modal outer-container for positioning */}
-                <div className="pointer-events-none relative h-[calc(100%-1rem)] w-auto min-[576px]:mx-auto min-[576px]:mt-7 min-[576px]:h-[calc(100%-3.5rem)] min-[576px]:max-w-[550px]">
+                <div className="pointer-events-none relative h-[calc(100%-1rem)] w-auto min-[576px]:mx-auto min-[576px]:mt-7 min-[576px]:h-[calc(100%-3.5rem)] min-[576px]:max-w-[500px]">
                     <FocusOn
                         autoFocus={autoFocus}
                         onClickOutside={handleClickOutside}

diff --git a/components/dashboard/src/components/SelectIDEComponent.tsx b/components/dashboard/src/components/SelectIDEComponent.tsx
@@ -213,13 +213,18 @@ const IdeOptionElementSelected: FC<IdeOptionElementProps> = ({
     );
 };
 
+export const isJetbrains = (editor: string) => {
+    //todo(ft): find a better way to group IDEs by vendor
+    return !["code", "code-desktop", "xterm"].includes(editor); // a really hacky way to get just JetBrains IDEs
+};
+
 function IdeOptionElementInDropDown(p: IdeOptionElementProps): JSX.Element {
     const { option, useLatest } = p;
     if (!option) {
         return <></>;
     }
     const version = useLatest ? option.latestImageVersion : p.pinnedIdeVersion ?? option.imageVersion;
-    const label = capitalize(option.type);
+    const label = !isJetbrains(option.id) && capitalize(option.type);
 
     return (
         <div className="flex" title={option.title}>

diff --git a/components/dashboard/src/user-settings/SelectIDE.tsx b/components/dashboard/src/user-settings/SelectIDE.tsx
@@ -7,7 +7,7 @@
 import { useCallback, useContext, useState } from "react";
 import { UserContext } from "../user-context";
 import { CheckboxInputField } from "../components/forms/CheckboxInputField";
-import SelectIDEComponent from "../components/SelectIDEComponent";
+import SelectIDEComponent, { isJetbrains } from "../components/SelectIDEComponent";
 import PillLabel from "../components/PillLabel";
 import { useUpdateCurrentUserMutation } from "../data/current-user/update-mutation";
 import { converter } from "../service/public-api";
@@ -71,8 +71,7 @@ export default function SelectIDE(props: SelectIDEProps) {
         [actualUpdateUserIDEInfo, defaultIde],
     );
 
-    //todo(ft): find a better way to group IDEs by vendor
-    const shouldShowJetbrainsNotice = !["code", "code-desktop", "xterm"].includes(defaultIde); // a really hacky way to get just JetBrains IDEs
+    const shouldShowJetbrainsNotice = isJetbrains(defaultIde);
 
     return (
         <>