Add feature flag

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()),

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>;

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

@@ -11,6 +11,7 @@ import SelectableCardSolid from "../components/SelectableCardSolid";
 import Tooltip from "../components/Tooltip";
 import { getGitpodService } from "../service/service";
 import { UserContext } from "../user-context";
+import { FeatureFlagContext } from "../contexts/FeatureFlagContext";
 import CheckBox from "../components/CheckBox";
 import { User } from "@gitpod/gitpod-protocol";
 import PillLabel from "../components/PillLabel";
@@ -48,6 +49,7 @@ export const updateUserIDEInfo = async (
 
 export default function SelectIDE(props: SelectIDEProps) {
     const { user, setUser } = useContext(UserContext);
+    const { experimentalIdes } = useContext(FeatureFlagContext);
 
     // Only exec once when we access this component
     useEffect(() => {
@@ -81,7 +83,7 @@ export default function SelectIDE(props: SelectIDEProps) {
         })();
     }, []);
 
-    const allIdeOptions = ideOptions && orderedIdeOptions(ideOptions);
+    const allIdeOptions = ideOptions && orderedIdeOptions(filteredIdeOptions(ideOptions, experimentalIdes));
 
     return (
         <>
@@ -160,9 +162,9 @@ export default function SelectIDE(props: SelectIDEProps) {
     );
 }
 
-function orderedIdeOptions(ideOptions: IDEOptions) {
+function orderedIdeOptions(entries: [string, IDEOption][]) {
     // TODO: Maybe convert orderKey to number before sort?
-    return Object.entries(ideOptions.options)
+    return entries
         .filter(([_, x]) => !x.hidden)
         .sort((a, b) => {
             const keyA = a[1].orderKey || a[0];
@@ -171,6 +173,12 @@ function orderedIdeOptions(ideOptions: IDEOptions) {
         });
 }
 
+function filteredIdeOptions(ideOptions: IDEOptions, experimentalTurnedOn: boolean) {
+    return Object.entries(ideOptions.options)
+        .filter(([_, x]) => !x.hidden)
+        .filter(([_, x]) => (x.experimental ? experimentalTurnedOn : true));
+}
+
 function renderIdeOption(
     option: IDEOption,
     selected: boolean,

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

@@ -205,6 +205,7 @@ func ideConfigConfigmap(ctx *common.RenderContext) ([]runtime.Object, error) {
 					Label:              "Insiders",
 					Image:              ctx.ImageName(ctx.Config.Repository, ide.XtermIDEImage, "latest"),
 					ResolveImageDigest: true,
+					Experimental:       true,
 				},
 			},
 			DefaultIde:        "code",