Repository: codesandbox/codesandbox-client (language: javascript)

Issue:
Cannot disable beta sandbox editor
# 🐛 bug report

## Preflight Checklist

<!-- Please ensure you've completed the following steps by replacing [ ] with [x]-->

- [X] I have read the [Contributing Guidelines][contributing] for this project.
- [X] I agree to follow the [Code of Conduct][code_of_conduct] that this project
      adheres to.
- [X] I have searched the issue tracker for an issue that matches the one I want
      to file, without success.

## Description of the problem

I can't disable the beta editor (which is an awful experience thus far)

## How has this issue affected you? What are you trying to accomplish?

Revert to old editor

### To Reproduce

<!--
Your best chance of getting this bug looked at quickly is to provide an example.
-->

Go into account -> Preferences -> Experiments -> Sandbox editor beta -> try to disable -> select a reason -> submit -> still enabled
<img width="716" alt="image" src="https://github.com/codesandbox/codesandbox-client/assets/25180830/3af2b2d9-e700-410e-8884-5483f909645e">


https://github.com/codesandbox/codesandbox-client/assets/25180830/f8b9b2cb-b2c9-4c13-ae59-8d5660bb26e6

### Link to sandbox: [link]() (optional) 
N/A

### Your Environment

| Software         | Name/Version |
| ---------------- | ------------ |
| Сodesandbox      |       unsure      |
| Browser          |     latest chrome       |
| Operating System |      latest OSX      |

<!-- prettier-ignore-start -->
[code_of_conduct]: https://github.com/codesandbox/codesandbox-client/blob/master/CODE_OF_CONDUCT.md
[contributing]: https://github.com/codesandbox/codesandbox-client/blob/master/CONTRIBUTING.md
<!-- prettier-ignore-end -->



Discussion / hints:
This code looks pretty sus https://github.com/codesandbox/codesandbox-client/blob/47bc3a937ae7b5f5f9e95bfb76ae9ae4e5681aea/packages/app/src/app/pages/common/Modals/PreferencesModal/Experiments/BetaSandboxEditor.tsx#L59-L60
Hey @ckifer thanks for reporting this. the code you mentioned is ok, as it sets the experiment to true when you click on the switch. I'm looking into this to figure out why the value is not reset.  Do you happen to see an error in the console when you click on the `Disable` button.

PS: Sorry to hear you've had a hard time with the new editor, we had a few bumps today as it was a big release, but hoping to iron out any issues until the end of the week. We'd appreciate any other feedback on the editor experience.

PS2: If you're eager to fallback to the old editor, you can manually set this in localStorage to open your sandboxes in the old editor `localStorage.setItem("CSB/BETA_SANDBOX_EDITOR", "false")`
Thanks for the workaround! I'll check when I get a chance and report back. 

I'll try to make a more in depth feedback report when I get a chance about the beta editor (and sorry for the blanket statement, I know a lot of work goes into changes like these). Appreciate the response!
So it looks like the localstorage value does change but it does not update reactively and adjust the state of the button.

No error in the console I think its just a react issue - there needs to be a re-rendering and it isn't happening. In the react dev tools I can see the toggle state value is still `true` after updating the value in the code. I think the area where feedback state is set is still suspect here

Fix patch:
diff --git a/packages/app/src/app/hooks/useBetaSandboxEditor.ts b/packages/app/src/app/hooks/useBetaSandboxEditor.ts
index a87c246d226..053b53265e5 100644
--- a/packages/app/src/app/hooks/useBetaSandboxEditor.ts
+++ b/packages/app/src/app/hooks/useBetaSandboxEditor.ts
@@ -3,18 +3,15 @@ import { useGlobalPersistedState } from './usePersistedState';
 
 export const useBetaSandboxEditor = (): [
   boolean,
-  React.Dispatch<React.SetStateAction<boolean>>
+  React.Dispatch<React.SetStateAction<boolean>>,
+  () => void
 ] => {
   const { user, hasLogIn } = useAppState();
 
-  const [betaSandboxEditor, setBetaSandboxEditor] = useGlobalPersistedState<
-    boolean
-  >(
+  return useGlobalPersistedState<boolean>(
     'BETA_SANDBOX_EDITOR',
     hasLogIn && user ? !USER_IDS.includes(user.id) : true
   );
-
-  return [betaSandboxEditor, setBetaSandboxEditor];
 };
 
 // Users that rely on live share
diff --git a/packages/app/src/app/hooks/usePersistedState.ts b/packages/app/src/app/hooks/usePersistedState.ts
index 84c7b32c3bc..8d8ba6dbc7c 100644
--- a/packages/app/src/app/hooks/usePersistedState.ts
+++ b/packages/app/src/app/hooks/usePersistedState.ts
@@ -41,13 +41,13 @@ const usePersistedState = <T>(
   useEffect(
     () =>
       browser.storage.subscribe<T>(key, updatedValue => {
-        if (updatedValue) {
-          setStoredValue(updatedValue);
-        } else {
+        if (updatedValue === undefined) {
           setStoredValue(initialValue);
+        } else {
+          setStoredValue(updatedValue as T);
         }
       }),
-    []
+    [storedValue]
   );
 
   const setValue: Dispatch<SetStateAction<T>> = value => {
diff --git a/packages/app/src/app/pages/common/Modals/PreferencesModal/Experiments/BetaSandboxEditor.tsx b/packages/app/src/app/pages/common/Modals/PreferencesModal/Experiments/BetaSandboxEditor.tsx
index 04171e7d4bf..b45c380e666 100644
--- a/packages/app/src/app/pages/common/Modals/PreferencesModal/Experiments/BetaSandboxEditor.tsx
+++ b/packages/app/src/app/pages/common/Modals/PreferencesModal/Experiments/BetaSandboxEditor.tsx
@@ -53,16 +53,18 @@ export const BetaSandboxEditor = () => {
     <>
       <PaddedPreference
         setValue={() => {
-          if (betaSandboxEditor) {
-            setFeedbackMode(true);
-          } else {
-            setBetaSandboxEditor(true);
+          if (!betaSandboxEditor) {
             track('Enable new sandbox editor - User preferences');
+          } else {
+            track('Disable new sandbox editor - User preferences');
+            setFeedbackMode(true);
           }
+
+          setBetaSandboxEditor(!betaSandboxEditor);
         }}
         title="Sandbox beta editor"
         tooltip="Use beta editor"
-        type={feedbackMode ? 'none' : 'boolean'}
+        type="boolean"
         value={betaSandboxEditor}
       />
 
@@ -91,8 +93,6 @@ export const BetaSandboxEditor = () => {
             }
 
             setFeedbackMode(false);
-            setBetaSandboxEditor(false);
-            track('Disable new sandbox editor - User preferences');
             setFeedbackOptions({
               buggyExperience: false,
               missingLiveRoom: false,
@@ -113,8 +113,7 @@ export const BetaSandboxEditor = () => {
             gap={3}
           >
             <Text block size={3}>
-              Before we disable this experiment, we would like to understand the
-              reasons for your dislike:
+              Would you mind telling us what you dislike about the new editor?
             </Text>
             {Object.keys(FEEDBACK_OPTIONS_LABEL).map(key => (
               <Checkbox
@@ -138,6 +137,7 @@ export const BetaSandboxEditor = () => {
               <Textarea
                 id="feedback"
                 name="feedback"
+                css={{ fontSize: '13px' }}
                 placeholder="Something seems wrong..."
                 value={feedbackOptions.feedback}
                 onChange={ev =>
@@ -155,7 +155,7 @@ export const BetaSandboxEditor = () => {
               disabled={!atLeastOneFeedbackOptionSelected}
               type="submit"
             >
-              Disable
+              Send feedback
             </Button>
           </Stack>
         </Element>


Test patch: