chore: remove show values toggle in settings page (microsoft#2476)

* fix toggle on change * add debounce in setting * change jsonEditor about obfuscate * remove toggle in setting page * remove obfuscate feature in jsonEditor * fix settings page height * memory the onChange function * change useMemo Co-authored-by: Andy Brown <asbrown002@gmail.com>
lei9444 · Apr 8, 2020 · 706fd45 · 706fd45
1 parent 6f9adb1
commit 706fd45
Show file tree

Hide file tree

Showing 7 changed files with 20 additions and 106 deletions.
diff --git a/Composer/packages/client/src/components/Conversation/styles.js b/Composer/packages/client/src/components/Conversation/styles.js
@@ -6,7 +6,7 @@ import { css } from '@emotion/core';
 export const container = css`
   width: 100%;
   background-color: #ffffff;
-  height: 870px;
+  height: 100%;
   overflow: auto;
   position: relative;
 `;

diff --git a/Composer/packages/client/src/pages/setting/dialog-settings/index.tsx b/Composer/packages/client/src/pages/setting/dialog-settings/index.tsx
@@ -3,18 +3,17 @@
 
 /** @jsx jsx */
 import { jsx } from '@emotion/core';
-import { useState, useContext } from 'react';
+import { useState, useContext, useMemo } 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,23 +33,16 @@ 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 [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' },
   ];
 
   const changeSlot = (_, option) => {
     setSlot(option.key);
-    actions.setDialogSettingsSlot(projectId, editing, option.key);
+    actions.setDialogSettingsSlot(projectId, option.key);
   };
 
   const saveChangeResult = result => {
@@ -63,12 +55,13 @@ export const DialogSettings = () => {
     }
   };
 
-  const handleChange = (result, commit) => {
-    setValue(result);
-    if (commit || !absHosted) {
-      saveChangeResult(result);
-    }
-  };
+  const handleChange = useMemo(
+    () =>
+      debounce((result: any) => {
+        saveChangeResult(result);
+      }, 200),
+    [projectId]
+  );
 
   const hostedControl = () => (
     <div css={hostedControls}>
@@ -91,26 +84,11 @@ 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)}
-          options={{ readOnly: !editing }}
-          value={visibleSettings}
-          obfuscate={!editing}
-        />
+        <JsonEditor onChange={x => handleChange(x)} value={visibleSettings} />
       </div>
     </div>
   ) : (

diff --git a/Composer/packages/client/src/pages/setting/dialog-settings/style.ts b/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;
 `;

diff --git a/Composer/packages/client/src/store/action/setting.ts b/Composer/packages/client/src/store/action/setting.ts
@@ -48,15 +48,9 @@ export const setSettings: ActionCreator = async (
   }
 };
 
-export const setDialogSettingsSlot = async (
-  { dispatch },
-  projectId: string,
-  editing: boolean,
-  slot?: BotEnvironments
-) => {
+export const setDialogSettingsSlot = async ({ dispatch }, projectId: string, slot?: BotEnvironments) => {
   const suffix = slot ? `/${slot}` : '';
-  const query = editing ? '' : '?obfuscate=true';
-  const url = `/projects/${projectId}/settings${suffix}${query}`;
+  const url = `/projects/${projectId}/settings${suffix}`;
 
   try {
     const response = await httpClient.get(url);
@@ -77,15 +71,3 @@ export const setDialogSettingsSlot = async (
     });
   }
 };
-
-export const setEditDialogSettings: ActionCreator = async (
-  store,
-  projectId: string,
-  editing: boolean,
-  slot?: BotEnvironments
-) => {
-  if (editing) {
-    // fetch the real settings for editing
-    await setDialogSettingsSlot(store, projectId, editing, slot);
-  }
-};
diff --git a/Composer/packages/lib/code-editor/src/JsonEditor.tsx b/Composer/packages/lib/code-editor/src/JsonEditor.tsx
@@ -1,35 +1,23 @@
 // 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';
 
 interface JsonEditorProps extends Omit<BaseEditorProps, 'language' | 'value' | 'errorMessage' | 'onChange'> {
   onChange: (jsonData: any) => void;
   value?: object;
-  obfuscate?: boolean;
   schema?: any;
 }
 
 const JsonEditor: React.FC<JsonEditorProps> = props => {
-  const {
-    options: additionalOptions,
-    value: initialValue,
-    onChange,
-    obfuscate,
-    onInit: onInitProp,
-    schema,
-    id,
-    ...rest
-  } = props;
-  const [value, setValue] = useState<string>(JSON.stringify(initialValue, null, 2));
-  const [parseError, setParseError] = useState<string>('');
+  const { options: additionalOptions, value: initialValue, onChange, onInit: onInitProp, schema, id, ...rest } = props;
 
+  const [parseError, setParseError] = useState<string>('');
   const options = {
     quickSuggestions: true,
     folding: false,
-    readOnly: obfuscate,
+    readOnly: false,
     ...additionalOptions,
   };
 
@@ -73,14 +61,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);
@@ -101,7 +82,7 @@ const JsonEditor: React.FC<JsonEditorProps> = props => {
       helpURL="https://www.json.org"
       language="json"
       options={options}
-      value={value}
+      value={JSON.stringify(initialValue, null, 2)}
       onChange={handleChange}
       errorMessage={parseError}
       onInit={onInit}

diff --git a/Composer/packages/lib/code-editor/src/utils/index.ts b/Composer/packages/lib/code-editor/src/utils/index.ts
@@ -1,5 +1,4 @@
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT License.
 
-export * from './obfuscate';
 export * from './common';
diff --git a/Composer/packages/lib/code-editor/src/utils/obfuscate.ts b/Composer/packages/lib/code-editor/src/utils/obfuscate.ts