[dashboard] Add BETA label to JetBrains IDEs

Author: corneliusludmann

components/dashboard/src/components/PillLabel.tsx

@@ -10,10 +10,13 @@
  * **type**\
  * info: Renders a blue pile label (default).\
  * warn: Renders an orange pile label.
+ *
+ * **className**\
+ * Add additional css classes to style this component.
  */
-export default function PillLabel(props: { children?: React.ReactNode, type?: "info" | "warn" }) {
+export default function PillLabel(props: { children?: React.ReactNode, type?: "info" | "warn", className?: string }) {
     const infoStyle = "bg-blue-50 text-blue-500 dark:bg-blue-500 dark:text-blue-100";
     const warnStyle = "bg-orange-100 text-orange-700 dark:bg-orange-600 dark:text-orange-100";
-    const style = `ml-2 px-3 py-1 text-sm uppercase rounded-xl ${props.type === "warn" ? warnStyle : infoStyle}`;
+    const style = `ml-2 px-3 py-1 text-sm uppercase rounded-xl ${props.type === "warn" ? warnStyle : infoStyle} ${props.className}`;
     return <span className={style}>{props.children}</span>;
 }

components/dashboard/src/settings/Preferences.tsx

@@ -5,13 +5,17 @@
  */
 
 import { useContext, useState } from "react";
+import AlertBox from "../components/AlertBox";
 import CheckBox from "../components/CheckBox";
+import CodeText from "../components/CodeText";
+import InfoBox from "../components/InfoBox";
 import { PageWithSubMenu } from "../components/PageWithSubMenu";
+import PillLabel from "../components/PillLabel";
 import SelectableCard from "../components/SelectableCard";
 import Tooltip from "../components/Tooltip";
-import vscode from '../images/vscode.svg';
-import ideaLogo from '../images/intellijIdeaLogo.svg';
 import golandLogo from '../images/golandLogo.svg';
+import ideaLogo from '../images/intellijIdeaLogo.svg';
+import vscode from '../images/vscode.svg';
 import { getGitpodService } from "../service/service";
 import { ThemeContext } from "../theme-context";
 import { UserContext } from "../user-context";
@@ -82,7 +86,7 @@ export default function Preferences() {
                         <div className="flex justify-center mt-3">
                             <img className="w-16 filter-grayscale self-center" src={vscode} />
                         </div>
-                        <span className="mt-2 ml-2 self-center rounded-xl py-0.5 px-2 text-sm bg-orange-100 text-orange-700 dark:bg-orange-600 dark:text-orange-100 font-semibold">INSIDERS</span>
+                        <PillLabel type="warn" className="font-semibold mt-2 py-0.5 px-2 self-center">Insiders</PillLabel>
                     </SelectableCard>
                 </Tooltip>
             </div>
@@ -93,20 +97,25 @@ export default function Preferences() {
                     checked={useDesktopIde}
                     onChange={(evt) => actuallySetUseDesktopIde(evt.target.checked)} />
             </div>
-            {useDesktopIde &&
+            {useDesktopIde && <>
+                {/* TODO: Use proper issue link! */}
+                <AlertBox className="my-3">The <strong>JetBrains desktop IDEs</strong> are currently in beta. <a href="https://github.com/gitpod-io/gitpod/issues/link-to-github-issue" className="gp-link" target="_blank">Send feedback</a> and <a href="https://www.gitpod.io/docs/integrations/jetbrains" className="gp-link" target="_blank">refer to our documentation</a> for more information.</AlertBox>
+                <InfoBox className="my-3">When you start the <strong>JetBrains desktop IDE</strong> to access your workspace, you will be currently asked for a password. The password is always <CodeText>gitpod</CodeText>. <i>This is subject to change.</i></InfoBox>
                 <div className="mt-4 space-x-4 flex">
                     <SelectableCard className="w-36 h-40" title="IntelliJ IDEA" selected={defaultDesktopIde === 'intellij'} onClick={() => actuallySetDefaultDesktopIde('intellij')}>
                         <div className="flex justify-center mt-3">
-                        <img className="w-16 filter-grayscale self-center" src={ideaLogo} />
+                            <img className="w-16 filter-grayscale self-center" src={ideaLogo} />
                         </div>
+                        <PillLabel type="warn" className="font-semibold mt-2 py-0.5 px-2 self-center">Beta</PillLabel>
                     </SelectableCard>
                     <SelectableCard className="w-36 h-40" title="GoLand" selected={defaultDesktopIde === 'goland'} onClick={() => actuallySetDefaultDesktopIde('goland')}>
                         <div className="flex justify-center mt-3">
-                        <img className="w-16 filter-grayscale self-center" src={golandLogo} />
+                            <img className="w-16 filter-grayscale self-center" src={golandLogo} />
                         </div>
+                        <PillLabel type="warn" className="font-semibold mt-2 py-0.5 px-2 self-center">Beta</PillLabel>
                     </SelectableCard>
                 </div>
-            }
+            </>}
             <h3 className="mt-12">Theme</h3>
             <p className="text-base text-gray-500">Early bird or night owl? Choose your side.</p>
             <div className="mt-4 space-x-4 flex">