Fix feature flag for container lsp (codesandbox#3577)

* Fix feature flag for container lsp

* Revert 6e8d7e6

Co-authored-by: Michaël De Boey <[email protected]>

Author: CompuIves

packages/app/src/app/overmind/effects/vscode/index.ts

@@ -11,7 +11,6 @@ import {
   SandboxFs,
   Settings,
 } from '@codesandbox/common/lib/types';
-import { CONTAINER_LSP } from '@codesandbox/common/lib/utils/feature-flags';
 import { notificationState } from '@codesandbox/common/lib/utils/notifications';
 import {
   NotificationMessage,
@@ -343,7 +342,7 @@ export class VSCodeEffect {
       //
     }
 
-    if (isServer && CONTAINER_LSP === 'true') {
+    if (isServer && this.options.getCurrentUser()?.experiments.containerLsp) {
       childProcess.addDefaultForkHandler(this.createContainerForkHandler());
       const socket = this.createWebsocketFSRequest();
       const cache = await this.createFileSystem('WebsocketFS', {

packages/app/src/app/overmind/namespaces/editor/actions.ts

@@ -8,7 +8,6 @@ import {
   WindowOrientation,
 } from '@codesandbox/common/lib/types';
 import { getTextOperation } from '@codesandbox/common/lib/utils/diff';
-import { CONTAINER_LSP } from '@codesandbox/common/lib/utils/feature-flags';
 import { convertTypeToStatus } from '@codesandbox/common/lib/utils/notifications';
 import { Action, AsyncAction } from 'app/overmind';
 import { withLoadApp, withOwnedSandbox } from 'app/overmind/factories';
@@ -121,7 +120,7 @@ export const sandboxChanged: AsyncAction<{ id: string }> = withLoadApp<{
     state.editor.modulesByPath = fs;
   });
 
-  if (CONTAINER_LSP === 'true' && !sandbox.owned) {
+  if (sandbox.featureFlags?.containerLsp && !sandbox.owned) {
     effects.vscode.setReadOnly(true);
     effects.notificationToast.add({
       message:

packages/app/src/app/overmind/namespaces/preferences/actions.ts

@@ -131,3 +131,30 @@ export const zenModeToggled: Action = ({ state }) => {
 export const codeMirrorForced: Action = ({ state }) => {
   state.preferences.settings.codeMirror = true;
 };
+
+export const toggleContainerLspExperiment: AsyncAction = async ({
+  effects,
+  state,
+}) => {
+  if (!state.user) {
+    return;
+  }
+  try {
+    await effects.api.updateExperiments({
+      container_lsp: !state.user.experiments.containerLsp,
+    });
+    state.user.experiments.containerLsp = !state.user.experiments.containerLsp;
+    // Allow the flush to go through and flip button
+    requestAnimationFrame(() => {
+      if (
+        effects.browser.confirm(
+          'We need to refresh for this to take effect, or you can refresh later'
+        )
+      ) {
+        effects.browser.reload();
+      }
+    });
+  } catch (error) {
+    effects.notificationToast.error('Unable to toggl LSP experiment');
+  }
+};

packages/app/src/app/pages/common/Modals/PreferencesModal/Experiments/ContainerLSP.tsx

@@ -1,37 +1,33 @@
-import { CONTAINER_LSP } from '@codesandbox/common/lib/utils/feature-flags';
-import React, { useState, useEffect } from 'react';
+import React, { FunctionComponent } from 'react';
 import { useOvermind } from 'app/overmind';
 import { SubDescription, PaddedPreference } from '../elements';
 
-export const ContainerLSP: React.FunctionComponent = () => {
-  const { state } = useOvermind();
-  const [containerLSP, setContainerLSP] = useState(false);
-  useEffect(() => {
-    if (CONTAINER_LSP === 'true') {
-      return setContainerLSP(true);
-    }
-    return setContainerLSP(false);
-  }, []);
+export const ContainerLSP: FunctionComponent = () => {
+  const {
+    actions: {
+      preferences: { toggleContainerLspExperiment },
+    },
+    state: {
+      user: {
+        experiments: { containerLsp },
+      },
+    },
+  } = useOvermind();
 
-  const setValue = (val: boolean) => {
-    setContainerLSP(val);
-    window.localStorage.setItem('CONTAINER_LSP', val.toString());
-    location.reload();
-  };
-
-  return state.user ? (
+  return (
     <>
       <PaddedPreference
+        setValue={() => toggleContainerLspExperiment()}
         title="Use container language server"
-        type="boolean"
-        value={containerLSP}
-        setValue={val => setValue(val)}
         tooltip="Language server"
+        type="boolean"
+        value={containerLsp}
       />
+
       <SubDescription>
         As part of making containers more powerful we now allow the language
         server to run there. Please help us test it :-)
       </SubDescription>
     </>
-  ) : null;
+  );
 };

packages/common/src/types/index.ts

@@ -319,6 +319,9 @@ export type Sandbox = {
   userLiked: boolean;
   modules: Module[];
   directories: Directory[];
+  featureFlags: {
+    [key: string]: boolean;
+  };
   collection?: {
     path: string;
   };

packages/common/src/utils/feature-flags.ts

@@ -6,6 +6,5 @@
   it's a TS file, so you can add whatever logic you want as long as it's static
 */
 
-export const CONTAINER_LSP = localStorage.getItem('CONTAINER_LSP') || false;
 export const REDESIGNED_SIDEBAR =
   localStorage.getItem('REDESIGNED_SIDEBAR') || false;