Add xterm as an IDE (#8464)

filiptronicek · web-flow · commit f2a98ec9f529 · 2023-03-23T20:31:16.000+01:00
* Add xterm as an IDE * Move the IDE to our GCP registry 🎉 * Also resolve the source code commit for IDEs in `ide-service` * Add feature flag * Xterm => terminal * Revert "Also resolve the source code commit for IDEs in `ide-service`" This reverts commit 06aee00. * always add `<iframe>` to the top of `<body>`
diff --git a/components/dashboard/src/components/SelectIDEComponent.tsx b/components/dashboard/src/components/SelectIDEComponent.tsx
@@ -5,10 +5,11 @@
  */
 
 import { IDEOption, IDEOptions } from "@gitpod/gitpod-protocol/lib/ide-protocol";
-import { useCallback, useEffect, useState } from "react";
+import { useCallback, useContext, useEffect, useState } from "react";
 import { getGitpodService } from "../service/service";
 import { DropDown2, DropDown2Element } from "./DropDown2";
 import Editor from "../icons/Editor.svg";
+import { FeatureFlagContext } from "../contexts/FeatureFlagContext";
 
 interface SelectIDEComponentProps {
     selectedIdeOption?: string;
@@ -17,8 +18,16 @@ interface SelectIDEComponentProps {
     setError?: (error?: string) => void;
 }
 
+function filteredIdeOptions(ideOptions: IDEOptions, experimentalTurnedOn: boolean) {
+    return IDEOptions.asArray(ideOptions)
+        .filter((x) => !x.hidden)
+        .filter((x) => (x.experimental ? experimentalTurnedOn : true));
+}
+
 export default function SelectIDEComponent(props: SelectIDEComponentProps) {
     const [ideOptions, setIdeOptions] = useState<IDEOptions>();
+    const { experimentalIdes } = useContext(FeatureFlagContext);
+
     useEffect(() => {
         getGitpodService().server.getIDEOptions().then(setIdeOptions);
     }, []);
@@ -27,7 +36,7 @@ export default function SelectIDEComponent(props: SelectIDEComponentProps) {
             if (!ideOptions) {
                 return [];
             }
-            const options = IDEOptions.asArray(ideOptions);
+            const options = filteredIdeOptions(ideOptions, experimentalIdes);
             const result: DropDown2Element[] = [];
             for (const ide of options.filter((ide) =>
                 `${ide.label}${ide.title}${ide.notes}${ide.id}`.toLowerCase().includes(search.toLowerCase()),
diff --git a/components/dashboard/src/contexts/FeatureFlagContext.tsx b/components/dashboard/src/contexts/FeatureFlagContext.tsx
@@ -29,6 +29,7 @@ const defaultFeatureFlags = {
     orgGitAuthProviders: false,
     switchToPAYG: false,
     newSignupFlow: false,
+    experimentalIdes: false,
 };
 
 const FeatureFlagContext = createContext<FeatureFlagsType>(defaultFeatureFlags);
@@ -48,6 +49,7 @@ const FeatureFlagContextProvider: React.FC = ({ children }) => {
     const [orgGitAuthProviders, setOrgGitAuthProviders] = useState<boolean>(false);
     const [switchToPAYG, setSwitchToPAYG] = useState<boolean>(false);
     const [newSignupFlow, setNewSignupFlow] = useState<boolean>(false);
+    const [experimentalIdes, setExperimentalIdes] = useState<boolean>(false);
 
     useEffect(() => {
         if (!user) return;
@@ -66,6 +68,7 @@ const FeatureFlagContextProvider: React.FC = ({ children }) => {
                 orgGitAuthProviders: { defaultValue: false, setter: setOrgGitAuthProviders },
                 switchToPAYG: { defaultValue: false, setter: setSwitchToPAYG },
                 newSignupFlow: { defaultValue: false, setter: setNewSignupFlow },
+                experimentalIdes: { defaultValue: false, setter: setExperimentalIdes },
             };
 
             for (const [flagName, config] of Object.entries(featureFlags)) {
@@ -114,6 +117,7 @@ const FeatureFlagContextProvider: React.FC = ({ children }) => {
             orgGitAuthProviders,
             newSignupFlow,
             switchToPAYG,
+            experimentalIdes,
         };
     }, [
         enablePersonalAccessTokens,
@@ -126,6 +130,7 @@ const FeatureFlagContextProvider: React.FC = ({ children }) => {
         startWithOptions,
         switchToPAYG,
         usePublicApiWorkspacesService,
+        experimentalIdes,
     ]);
 
     return <FeatureFlagContext.Provider value={flags}>{children}</FeatureFlagContext.Provider>;
diff --git a/components/gitpod-protocol/src/ide-protocol.ts b/components/gitpod-protocol/src/ide-protocol.ts
@@ -105,6 +105,11 @@ export interface IDEOption {
      */
     hidden?: boolean;
 
+    /**
+     * If `true` this IDE option is conditionally shown in the IDE preferences
+     */
+    experimental?: boolean;
+
     /**
      * The image ref to the IDE image.
      */
diff --git a/components/ide-proxy/static/image/ide-logo/terminal.svg b/components/ide-proxy/static/image/ide-logo/terminal.svg
@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="#5e5e5e" class="w-6 h-6">
+  <path fill-rule="evenodd" d="M2.25 6a3 3 0 013-3h13.5a3 3 0 013 3v12a3 3 0 01-3 3H5.25a3 3 0 01-3-3V6zm3.97.97a.75.75 0 011.06 0l2.25 2.25a.75.75 0 010 1.06l-2.25 2.25a.75.75 0
+01-1.06-1.06l1.72-1.72-1.72-1.72a.75.75 0 010-1.06zm4.28 4.28a.75.75 0 000 1.5h3a.75.75 0 000-1.5h-3z" clip-rule="evenodd" />
+</svg>
diff --git a/components/ide-service-api/go/config/ideconfig.go b/components/ide-service-api/go/config/ideconfig.go
@@ -44,6 +44,8 @@ type IDEOption struct {
 	Notes []string `json:"notes,omitempty"`
 	// Hidden this IDE option is not visible in the IDE preferences.
 	Hidden bool `json:"hidden,omitempty"`
+	// Experimental this IDE option is to only be shown to some users
+	Experimental bool `json:"experimental,omitempty"`
 	// Image ref to the IDE image.
 	Image string `json:"image"`
 	// LatestImage ref to the IDE image, this image ref always resolve to digest.
diff --git a/components/supervisor/frontend/src/shared/loading-frame.ts b/components/supervisor/frontend/src/shared/loading-frame.ts
@@ -16,7 +16,7 @@ export function load(): Promise<{
         frame.src = startUrl.toString();
         frame.style.visibility = "visible";
         frame.className = "gitpod-frame loading";
-        document.body.appendChild(frame);
+        document.body.prepend(frame);
 
         frame.onload = () => {
             const frontendDashboardServiceClient = new FrontendDashboardServiceClient(frame.contentWindow!);
diff --git a/install/installer/pkg/components/blobserve/configmap.go b/install/installer/pkg/components/blobserve/configmap.go
@@ -99,6 +99,10 @@ func configmap(ctx *common.RenderContext) ([]runtime.Object, error) {
 					PrePull: []string{},
 					Workdir: "/.supervisor/frontend",
 				},
+				ctx.RepoName(ctx.Config.Repository, ide.XtermIDEImage): {
+					PrePull: []string{},
+					Workdir: "/ide",
+				},
 			},
 			BlobSpace: blobserve_config.BlobSpace{
 				Location: "/mnt/cache/blobserve",
diff --git a/install/installer/pkg/components/ide-service/ide_config_configmap.go b/install/installer/pkg/components/ide-service/ide_config_configmap.go
@@ -34,6 +34,7 @@ func ideConfigConfigmap(ctx *common.RenderContext) ([]runtime.Object, error) {
 	webstorm := "webstorm"
 	rider := "rider"
 	clion := "clion"
+	xterm := "xterm"
 
 	resolveLatestImage := func(name string, tag string, bundledLatest versions.Versioned) string {
 		resolveLatest := true
@@ -195,6 +196,16 @@ func ideConfigConfigmap(ctx *common.RenderContext) ([]runtime.Object, error) {
 					ImageLayers:       []string{jbPluginImage, jbLauncherImage},
 					LatestImageLayers: []string{jbPluginLatestImage, jbLauncherImage},
 				},
+				xterm: {
+					OrderKey:           "12",
+					Title:              "Terminal",
+					Type:               ide_config.IDETypeBrowser,
+					Logo:               getIdeLogoPath("terminal"),
+					Label:              "Insiders",
+					Image:              ctx.ImageName(ctx.Config.Repository, ide.XtermIDEImage, "latest"),
+					ResolveImageDigest: true,
+					Experimental:       true,
+				},
 			},
 			DefaultIde:        "code",
 			DefaultDesktopIde: codeDesktop,
diff --git a/install/installer/pkg/components/workspace/ide/constants.go b/install/installer/pkg/components/workspace/ide/constants.go
@@ -12,6 +12,7 @@ const (
 	CodeWebExtensionVersion     = "commit-3b076b91039c47404d98c4a3198edf2982e24af7" // gitpod-web extension version comes from https://github.com/gitpod-io/gitpod-code
 	CodeDesktopIDEImage         = "ide/code-desktop"
 	CodeDesktopInsidersIDEImage = "ide/code-desktop-insiders"
+	XtermIDEImage               = "ide/xterm-web"
 	IntelliJDesktopIDEImage     = "ide/intellij"
 	GoLandDesktopIdeImage       = "ide/goland"
 	PyCharmDesktopIdeImage      = "ide/pycharm"
