Use feature flags instead of accessing localStorage directly (codesandbox#3573)

* Use feature flags instead of accessing localStorage directly

* Don't use Sandbox's `featureFlags`

* Fix check

Author: MichaelDeBoey

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

@@ -11,6 +11,7 @@ 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,
@@ -342,7 +343,7 @@ export class VSCodeEffect {
       //
     }
 
-    if (isServer && this.options.getCurrentUser()?.experiments.containerLsp) {
+    if (isServer && CONTAINER_LSP === 'true') {
       childProcess.addDefaultForkHandler(this.createContainerForkHandler());
       const socket = this.createWebsocketFSRequest();
       const cache = await this.createFileSystem('WebsocketFS', {

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

@@ -8,6 +8,7 @@ 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';
@@ -120,11 +121,7 @@ export const sandboxChanged: AsyncAction<{ id: string }> = withLoadApp<{
     state.editor.modulesByPath = fs;
   });
 
-  if (
-    sandbox.featureFlags &&
-    sandbox.featureFlags.containerLsp &&
-    !sandbox.owned
-  ) {
+  if (CONTAINER_LSP === 'true' && !sandbox.owned) {
     effects.vscode.setReadOnly(true);
     effects.notificationToast.add({
       message:

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

@@ -1,3 +1,4 @@
+import { CONTAINER_LSP } from '@codesandbox/common/lib/utils/feature-flags';
 import React, { useState, useEffect } from 'react';
 import { useOvermind } from 'app/overmind';
 import { SubDescription, PaddedPreference } from '../elements';
@@ -6,9 +7,7 @@ export const ContainerLSP: React.FunctionComponent = () => {
   const { state } = useOvermind();
   const [containerLSP, setContainerLSP] = useState(false);
   useEffect(() => {
-    const value = window.localStorage.getItem('CONTAINER_LSP');
-
-    if (value === 'true') {
+    if (CONTAINER_LSP === 'true') {
       return setContainerLSP(true);
     }
     return setContainerLSP(false);

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

@@ -1,13 +1,12 @@
+import { REDESIGNED_SIDEBAR } from '@codesandbox/common/lib/utils/feature-flags';
 import React, { useState, useEffect } from 'react';
 
 import { SubDescription, PaddedPreference } from '../elements';
 
 export const NewSidebar: React.FunctionComponent = () => {
   const [newSidebar, setNewSidebar] = useState(false);
   useEffect(() => {
-    const value = window.localStorage.getItem('REDESIGNED_SIDEBAR');
-
-    if (value === 'true') {
+    if (REDESIGNED_SIDEBAR === 'true') {
       return setNewSidebar(true);
     }
     return setNewSidebar(false);

packages/common/src/types/index.ts

@@ -319,9 +319,6 @@ export type Sandbox = {
   userLiked: boolean;
   modules: Module[];
   directories: Directory[];
-  featureFlags: {
-    [key: string]: boolean;
-  };
   collection?: {
     path: string;
   };
@@ -448,10 +445,10 @@ export type PackageJSON = {
   keywords?: string[];
   main?: string;
   module?: string;
-  scripts?: { [command: string]: string; };
-  dependencies?: { [dependency: string]: string; };
-  devDependencies?: { [dependency: string]: string; };
-  jest?: { setupFilesAfterEnv?: string[]; };
+  scripts?: { [command: string]: string };
+  dependencies?: { [dependency: string]: string };
+  devDependencies?: { [dependency: string]: string };
+  jest?: { setupFilesAfterEnv?: string[] };
   resolutions?: { [dependency: string]: string };
 };
 

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

@@ -0,0 +1,11 @@
+/**
+  poor man's feature flags
+
+  you can export a constant which enables/disables a feature
+
+  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;