experimental IDEs feature flag (#17240)

* `experimental` IDEs feature flag

* [debug, do not merge]: test with experimental VS Code

Author: filiptronicek

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()),
@@ -48,7 +57,7 @@ export default function SelectIDEComponent(props: SelectIDEComponentProps) {
             }
             return result;
         },
-        [ideOptions, props.useLatest],
+        [experimentalIdes, ideOptions, props.useLatest],
     );
     const internalOnSelectionChange = (id: string) => {
         const { ide, useLatest } = parseId(id);

components/dashboard/src/contexts/FeatureFlagContext.tsx

@@ -29,6 +29,7 @@ const defaultFeatureFlags = {
     userGitAuthProviders: false,
     newSignupFlow: false,
     linkedinConnectionForOnboarding: false,
+    experimentalIdes: false,
 };
 
 const FeatureFlagContext = createContext<FeatureFlagsType>(defaultFeatureFlags);
@@ -47,6 +48,7 @@ const FeatureFlagContextProvider: React.FC = ({ children }) => {
     const [userGitAuthProviders, setUserGitAuthProviders] = useState<boolean>(false);
     const [newSignupFlow, setNewSignupFlow] = useState<boolean>(false);
     const [linkedinConnectionForOnboarding, setLinkedinConnectionForOnboarding] = useState<boolean>(false);
+    const [experimentalIdes, setExperimentalIdes] = useState<boolean>(false);
 
     useEffect(() => {
         if (!user) return;
@@ -65,6 +67,7 @@ const FeatureFlagContextProvider: React.FC = ({ children }) => {
                 userGitAuthProviders: { defaultValue: false, setter: setUserGitAuthProviders },
                 newSignupFlow: { defaultValue: false, setter: setNewSignupFlow },
                 linkedinConnectionForOnboarding: { defaultValue: false, setter: setLinkedinConnectionForOnboarding },
+                experimentalIdes: { defaultValue: false, setter: setExperimentalIdes },
             };
 
             for (const [flagName, config] of Object.entries(featureFlags)) {
@@ -112,6 +115,7 @@ const FeatureFlagContextProvider: React.FC = ({ children }) => {
             userGitAuthProviders,
             newSignupFlow,
             linkedinConnectionForOnboarding,
+            experimentalIdes,
         };
     }, [
         enablePersonalAccessTokens,
@@ -123,6 +127,7 @@ const FeatureFlagContextProvider: React.FC = ({ children }) => {
         startWithOptions,
         usePublicApiWorkspacesService,
         userGitAuthProviders,
+        experimentalIdes,
     ]);
 
     return <FeatureFlagContext.Provider value={flags}>{children}</FeatureFlagContext.Provider>;

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.
      */

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.

install/installer/pkg/components/ide-service/ide_config_configmap.go

@@ -88,6 +88,7 @@ func ideConfigConfigmap(ctx *common.RenderContext) ([]runtime.Object, error) {
 					ImageLayers:       []string{codeWebExtensionImage, codeHelperImage},
 					LatestImage:       resolveLatestImage(ide.CodeIDEImage, "nightly", ctx.VersionManifest.Components.Workspace.CodeImage),
 					LatestImageLayers: []string{codeWebExtensionImage, codeHelperImage},
+					Experimental:      true,
 				},
 				codeDesktop: {
 					OrderKey:    "02",