Add new sidebar experiment toggle (codesandbox#3475)

* add expeeriment toggle

* update cvopy

* update cvopy

Author: SaraVieira

packages/app/src/app/pages/Sandbox/Editor/Workspace/index.tsx

@@ -36,19 +36,18 @@ import { Server } from './items/Server';
 import { SSEDownNotice } from './SSEDownNotice';
 import { WorkspaceItem } from './WorkspaceItem';
 
-const WorkspaceWrapper = REDESIGNED_SIDEBAR ? ThemeProvider : React.Fragment;
+const NEW_SIDEBAR = REDESIGNED_SIDEBAR === 'true';
+const WorkspaceWrapper = NEW_SIDEBAR ? ThemeProvider : React.Fragment;
 
 const workspaceTabs = {
-  project: REDESIGNED_SIDEBAR ? ProjectInfoNew : ProjectInfo,
-  'project-summary': REDESIGNED_SIDEBAR
-    ? NotOwnedSandboxInfoNew
-    : NotOwnedSandboxInfo,
-  github: REDESIGNED_SIDEBAR ? GitHubNew : GitHub,
-  files: REDESIGNED_SIDEBAR ? Explorer : FilesItem,
-  deploy: REDESIGNED_SIDEBAR ? DeploymentNew : Deployment,
-  config: REDESIGNED_SIDEBAR ? ConfigurationFilesNew : ConfigurationFiles,
-  live: REDESIGNED_SIDEBAR ? LiveNew : Live,
-  server: REDESIGNED_SIDEBAR ? ServerNew : Server,
+  project: NEW_SIDEBAR ? ProjectInfoNew : ProjectInfo,
+  'project-summary': NEW_SIDEBAR ? NotOwnedSandboxInfoNew : NotOwnedSandboxInfo,
+  github: NEW_SIDEBAR ? GitHubNew : GitHub,
+  files: NEW_SIDEBAR ? Explorer : FilesItem,
+  deploy: NEW_SIDEBAR ? DeploymentNew : Deployment,
+  config: NEW_SIDEBAR ? ConfigurationFilesNew : ConfigurationFiles,
+  live: NEW_SIDEBAR ? LiveNew : Live,
+  server: NEW_SIDEBAR ? ServerNew : Server,
   more: More,
 };
 
@@ -76,8 +75,8 @@ export const WorkspaceComponent = ({ theme }) => {
     getDisabledItems(state).find(({ id }) => id === activeTab);
 
   return (
-    <Container REDESIGNED_SIDEBAR={REDESIGNED_SIDEBAR}>
-      {item && !item.hasCustomHeader && !REDESIGNED_SIDEBAR && (
+    <Container REDESIGNED_SIDEBAR={NEW_SIDEBAR}>
+      {item && !item.hasCustomHeader && !NEW_SIDEBAR && (
         <ItemTitle>{item.name}</ItemTitle>
       )}
 
@@ -93,13 +92,13 @@ export const WorkspaceComponent = ({ theme }) => {
         </WorkspaceWrapper>
       </div>
 
-      {isLive && roomInfo.chatEnabled && !REDESIGNED_SIDEBAR && (
+      {isLive && roomInfo.chatEnabled && !NEW_SIDEBAR && (
         <WorkspaceItem defaultOpen title="Chat">
           <Chat />
         </WorkspaceItem>
       )}
 
-      {!zenMode && !REDESIGNED_SIDEBAR && (
+      {!zenMode && !NEW_SIDEBAR && (
         <>
           {!(isPatron || owned) && <Advertisement />}
 

packages/app/src/app/pages/Sandbox/Editor/index.tsx

@@ -87,7 +87,7 @@ const ContentSplit = ({ theme }) => {
 
         <Fullscreen style={{ width: 'initial' }}>
           {!hideNavigation &&
-            (REDESIGNED_SIDEBAR ? (
+            (REDESIGNED_SIDEBAR === 'true' ? (
               <NewThemeProvider theme={theme.vscodeTheme}>
                 <Navigation topOffset={topOffset} bottomOffset={bottomOffset} />
               </NewThemeProvider>

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

@@ -0,0 +1,35 @@
+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') {
+      return setNewSidebar(true);
+    }
+    return setNewSidebar(false);
+  }, []);
+
+  const setValue = (val: boolean) => {
+    setNewSidebar(val);
+    window.localStorage.setItem('REDESIGNED_SIDEBAR', val.toString());
+    location.reload();
+  };
+
+  return (
+    <>
+      <PaddedPreference
+        title="Sidebar Redesign"
+        type="boolean"
+        value={newSidebar}
+        setValue={setValue}
+      />
+      <SubDescription>
+        This will refresh the page, make sure to save your changes.
+      </SubDescription>
+    </>
+  );
+};

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

@@ -1,22 +1,15 @@
 import React from 'react';
 
-import {
-  Title,
-  SubContainer,
-  SubDescription,
-  PreferenceContainer,
-} from '../elements';
+import { Title, SubContainer, PreferenceContainer } from '../elements';
+import { NewSidebar } from './NewSidebar';
 
 export const Experiments: React.FunctionComponent = () => (
   <div>
     <Title>Experiments</Title>
 
     <SubContainer>
       <PreferenceContainer>
-        <SubDescription>
-          There are no experiments running at the moment. Stay tuned for new
-          experiments!
-        </SubDescription>
+        <NewSidebar />
       </PreferenceContainer>
     </SubContainer>
   </div>