fix: fix toggle not work in settings page

Composer/packages/client/src/pages/setting/dialog-settings/index.tsx

@@ -6,15 +6,14 @@ import { jsx } from '@emotion/core';
 import { useState, useContext } from 'react';
 import { JsonEditor } from '@bfc/code-editor';
 import formatMessage from 'format-message';
-import { DefaultButton } from 'office-ui-fabric-react/lib/Button';
 import { ChoiceGroup } from 'office-ui-fabric-react/lib/ChoiceGroup';
 import { Link } from 'office-ui-fabric-react/lib/Link';
-import { Toggle } from 'office-ui-fabric-react/lib/Toggle';
+import debounce from 'lodash/debounce';
 
 import { StoreContext } from '../../../store';
 import { isAbsHosted } from '../../../utils/envUtil';
 
-import { hostedSettings, hostedControls, hostedControlsTitle, hostedToggle, slotChoice, settingsEditor } from './style';
+import { hostedSettings, hostedControls, hostedControlsTitle, slotChoice, settingsEditor } from './style';
 
 const hostControlLabels = {
   showKeys: formatMessage('Show keys'),
@@ -34,15 +33,9 @@ export const DialogSettings = () => {
   const { luis, MicrosoftAppPassword, MicrosoftAppId, ...settings } = origSettings;
   const managedSettings = { luis, MicrosoftAppPassword, MicrosoftAppId };
   const visibleSettings = absHosted ? settings : origSettings;
-  const [value, setValue] = useState(visibleSettings);
-  const [editing, setEditing] = useState(false);
+  const editing = true;
   const [slot, setSlot] = useState(botEnvironment === 'editing' ? 'integration' : botEnvironment);
 
-  const changeEditing = (_, on) => {
-    setEditing(on);
-    actions.setEditDialogSettings(projectId, on, absHosted ? slot : undefined);
-  };
-
   const slots = [
     { key: 'production', text: hostControlLabels.productionSlot, checked: slot === 'production' },
     { key: 'integration', text: hostControlLabels.integrationSlot, checked: slot === 'integration' },
@@ -63,12 +56,11 @@ export const DialogSettings = () => {
     }
   };
 
-  const handleChange = (result, commit) => {
-    setValue(result);
-    if (commit || !absHosted) {
+  const handleChange = debounce(result => {
+    if (editing) {
       saveChangeResult(result);
     }
-  };
+  }, 200);
 
   const hostedControl = () => (
     <div css={hostedControls}>
@@ -91,22 +83,12 @@ export const DialogSettings = () => {
     </div>
   );
 
-  const toggle = () => (
-    <div css={hostedToggle}>
-      <Toggle label={hostControlLabels.showKeys} inlineLabel onChange={changeEditing} defaultChecked={editing} />
-      {absHosted && (
-        <DefaultButton disabled={!editing} text={formatMessage('Save')} onClick={() => handleChange(value, true)} />
-      )}
-    </div>
-  );
-
   return botName ? (
     <div css={hostedSettings}>
       {hostedControl()}
-      {toggle()}
       <div css={settingsEditor}>
         <JsonEditor
-          onChange={x => handleChange(x, false)}
+          onChange={x => handleChange(x)}
           options={{ readOnly: !editing }}
           value={visibleSettings}
           obfuscate={!editing}

Composer/packages/client/src/pages/setting/dialog-settings/style.ts

@@ -23,14 +23,6 @@ export const hostedControls = css`
   }
 `;
 
-export const hostedToggle = css`
-  display: flex;
-
-  & > * {
-    margin-right: 2rem;
-  }
-`;
-
 export const slotChoice = css`
   max-width: 40ch;
 `;

Composer/packages/lib/code-editor/src/JsonEditor.tsx

@@ -1,6 +1,6 @@
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT License.
-import React, { useState, useEffect } from 'react';
+import React, { useState } from 'react';
 
 import * as utils from './utils';
 import { BaseEditor, BaseEditorProps, OnInit } from './BaseEditor';
@@ -23,16 +23,20 @@ const JsonEditor: React.FC<JsonEditorProps> = props => {
     id,
     ...rest
   } = props;
-  const [value, setValue] = useState<string>(JSON.stringify(initialValue, null, 2));
-  const [parseError, setParseError] = useState<string>('');
 
+  const [parseError, setParseError] = useState<string>('');
   const options = {
     quickSuggestions: true,
     folding: false,
     readOnly: obfuscate,
     ...additionalOptions,
   };
 
+  const value = (() => {
+    const result = obfuscate ? utils.obfuscate(initialValue) : initialValue;
+    return JSON.stringify(result, null, 2);
+  })();
+
   const onInit: OnInit = monaco => {
     const disposable = monaco.editor.onDidCreateModel(model => {
       const diagnosticOptions: any = {
@@ -73,14 +77,7 @@ const JsonEditor: React.FC<JsonEditorProps> = props => {
     }
   };
 
-  useEffect(() => {
-    const result = obfuscate ? utils.obfuscate(initialValue) : initialValue;
-    setValue(JSON.stringify(result, null, 2));
-  }, [obfuscate]);
-
   const handleChange = value => {
-    setValue(value);
-
     if (value) {
       try {
         const data = JSON.parse(value);
@@ -97,6 +94,7 @@ const JsonEditor: React.FC<JsonEditorProps> = props => {
 
   return (
     <BaseEditor
+      key={obfuscate ? 'notedit' : 'edit'}
       id={id}
       helpURL="https://www.json.org"
       language="json"