Hailiu/settings ui

Composer/cypress/integration/Breadcrumb.spec.js

@@ -57,7 +57,7 @@ context('breadcrumb', () => {
   it('can show action name in breadcrumb', () => {
     cy.wait(100);
     cy.get('[data-testid="ProjectTree"]').within(() => {
-      cy.getByText('Handle ConversationUpdate').click();
+      cy.getByText('Handle an Event: BeginDialog').click();
       cy.wait(500);
     });
 

Composer/packages/client/src/ShellApi.ts

@@ -8,6 +8,7 @@ import * as lgUtil from './utils/lgUtil';
 import { StoreContext } from './store';
 import ApiClient from './messenger/ApiClient';
 import { getDialogData, setDialogData, sanitizeDialogData } from './utils';
+import { isAbsHosted } from './utils/envUtil';
 import { OpenAlertModal, DialogStyle } from './components/Modal';
 import { getFocusPath, navigateTo } from './utils/navigation';
 import { DialogInfo, LgFile, LuFile, BotSchemas } from './store/types';
@@ -28,6 +29,7 @@ export interface ShellData {
   dialogId: string;
   focusedEvent: string;
   focusedSteps: string[];
+  hosted: boolean;
   focusedTab?: string;
 }
 
@@ -181,6 +183,7 @@ export const ShellApi: React.FC = () => {
       focusedEvent: selected,
       focusedSteps: focused ? [focused] : selected ? [selected] : [],
       focusedTab: promptTab,
+      hosted: !!isAbsHosted(),
     };
   }
 

Composer/packages/client/src/TestController.tsx

@@ -16,6 +16,7 @@ import { bot, botButton, calloutLabel, calloutDescription, calloutContainer } fr
 import { BotStatus, LuisConfig, Text } from './constants';
 import { PublishLuisDialog } from './publishDialog';
 import { OpenAlertModal, DialogStyle } from './components/Modal';
+import { isAbsHosted } from './utils/envUtil';
 import { getReferredFiles } from './utils/luUtil';
 import { DialogInfo } from './store/types';
 
@@ -37,8 +38,6 @@ const STATE = {
   SUCCESS: 2,
 };
 
-const isAbsHosted = () => process.env.COMPOSER_AUTH_PROVIDER === 'abs-h';
-
 export const TestController: React.FC = () => {
   const { state, actions } = useContext(StoreContext);
   const [modalOpen, setModalOpen] = useState(false);

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

@@ -1,3 +1,7 @@
+import formatMessage from 'format-message';
+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 React, { useState, useContext, useEffect } from 'react';
 import { Controlled as CodeMirror } from 'react-codemirror2';
 import jsonlint from 'jsonlint-webpack';
@@ -7,10 +11,11 @@ import 'codemirror/theme/neat.css';
 import 'codemirror/mode/javascript/javascript';
 import 'codemirror/addon/lint/lint';
 import 'codemirror/addon/lint/json-lint';
-
 import './style.css';
 
 import { StoreContext } from './../../../store';
+import { isAbsHosted } from './../../../utils/envUtil';
+import { obfuscate } from './../../../utils/objUtil';
 
 window.jsonlint = jsonlint;
 
@@ -28,21 +33,40 @@ const cmOptions = {
   smartIndent: true,
 };
 
+const hostControlLabels = {
+  showKeys: formatMessage('Show keys'),
+  productionSlot: formatMessage('In production'),
+  integrationSlot: formatMessage('In test'),
+  botSettings: formatMessage('Settings'),
+  botSettingDescription: formatMessage(
+    'Settings contains detailed information about your bot. For security reasons, they are hidden by default. To test your bot or publish to Azure, you may need to provide these settings.'
+  ),
+  learnMore: formatMessage('Learn more.'),
+};
+
 export const DialogSettings = () => {
   const { state, actions } = useContext(StoreContext);
-  const { botName, settings } = state;
-  const [value, setValue] = useState(JSON.stringify(settings, null, 2));
+  const { botName, settings: origSettings, botEnvironment } = state;
+  const absHosted = isAbsHosted();
+  const { luis, MicrosoftAppPassword, MicrosoftAppId, ...settings } = origSettings;
+  const managedSettings = { luis, MicrosoftAppPassword, MicrosoftAppId };
+  const visibleSettings = absHosted ? settings : origSettings;
+  const [value, setValue] = useState(JSON.stringify(visibleSettings, null, 2));
+  const [editing, setEditing] = useState(false);
+  const [slot, setSlot] = useState(botEnvironment === 'editing' ? 'integration' : botEnvironment);
+  const options = { ...cmOptions, readOnly: !editing };
 
   useEffect(() => {
-    setValue(JSON.stringify(settings, null, 2));
-  }, [settings]);
+    setValue(JSON.stringify(editing ? visibleSettings : obfuscate(visibleSettings), null, 2));
+  }, [origSettings, editing]);
 
   const updateFormData = (editor, data, newValue) => {
     try {
       setValue(newValue);
       const result = JSON.parse(newValue);
       try {
-        actions.setSettings(botName, result);
+        const mergedResult = absHosted ? { ...managedSettings, ...result } : result;
+        actions.setSettings(botName, mergedResult, absHosted ? slot : undefined);
       } catch (err) {
         console.error(err.message);
       }
@@ -51,9 +75,57 @@ export const DialogSettings = () => {
     }
   };
 
+  const changeEditing = (_, on) => {
+    setEditing(on);
+    actions.setEditDialogSettings(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(editing, option.key);
+  };
+
+  const hostedControl = () => (
+    <div className="hosted-controls">
+      <h1>{hostControlLabels.botSettings}</h1>
+      <p>
+        {hostControlLabels.botSettingDescription}
+        &nbsp;
+        <Link href="//aka.ms/absh/docs/settings" target="_blank">
+          {hostControlLabels.learnMore}
+        </Link>
+      </p>
+      {absHosted ? (
+        <ChoiceGroup options={slots} onChange={changeSlot} className="slot-choice" selectedKey={slot} />
+      ) : null}
+    </div>
+  );
+
+  const hostedToggle = () => (
+    <div className="hosted-toggle">
+      <Toggle label={hostControlLabels.showKeys} inlineLabel onChange={changeEditing} defaultChecked={editing} />
+    </div>
+  );
+
   return botName ? (
-    <CodeMirror value={value} onBeforeChange={updateFormData} options={cmOptions} />
+    <div className="hosted-settings">
+      {hostedControl()}
+      {hostedToggle()}
+      <div className="hosted-code-mirror">
+        <CodeMirror
+          value={value}
+          onBeforeChange={updateFormData}
+          options={options}
+          className={absHosted ? 'CodeMirror-Hosted' : undefined}
+        />
+      </div>
+    </div>
   ) : (
-    <div>Data Loading...</div>
+    <div>{formatMessage('Data loading...')}</div>
   );
 };

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

@@ -7,3 +7,35 @@
   height: auto;
   overflow: hidden;
 }
+
+.hosted-settings {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  height: auto;
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+  padding: 1rem;
+}
+
+.hosted-controls {
+  margin-bottom: 18px;
+}
+
+.hosted-controls h1 {
+  margin-top: 0;
+}
+
+.hosted-code-mirror {
+  position: relative;
+  flex-grow: 1;
+  border: 1px solid #B3B0AD;
+}
+
+#toolbar-portal {
+  display: flex;
+  align-items: center;
+}

Composer/packages/client/src/pages/setting/index.js

@@ -5,6 +5,7 @@ import { Link } from '@reach/router';
 
 import { ToolBar } from '../../components/ToolBar';
 import { navigateTo } from '../../utils';
+import { isAbsHosted } from '../../utils/envUtil';
 
 import Routes from './router';
 import { Tree } from './../../components/Tree/index';
@@ -13,19 +14,22 @@ import { title, fileList, contentEditor, linkItem } from './styles';
 import { MainContent } from './../../components/MainContent/index';
 import { TestController } from './../../TestController';
 
+const settingLabels = {
+  title: formatMessage('Configuration'),
+  publish: formatMessage('Publish'),
+  settings: formatMessage('Settings'),
+};
+
+const absHosted = isAbsHosted();
+
 const links = [
-  { key: '/setting/dialog-settings', name: formatMessage('Dialog settings') },
+  { key: '/setting/dialog-settings', name: settingLabels.settings },
+  { key: `/setting/${absHosted ? 'remote-publish' : 'deployment'}`, name: settingLabels.publish },
   // { key: 'services', name: formatMessage('Services') },
   // { key: 'composer-configuration', name: formatMessage('Composer configuration'), disabled: true },
   // { key: 'publishing-staging', name: formatMessage('Publishing and staging'), disabled: true },
 ];
 
-if (process.env.COMPOSER_AUTH_PROVIDER === 'abs-h' || process.env.MOCKHOSTED) {
-  links.push({ key: '/setting/remote-publish', name: formatMessage('Publish') });
-} else {
-  links.push({ key: '/setting/deployment', name: formatMessage('Deployment') });
-}
-
 export const SettingPage = () => {
   const [active, setActive] = useState();
 
@@ -63,7 +67,7 @@ export const SettingPage = () => {
           <div css={fileList}>
             <Tree variant="large">
               <div>
-                <div css={title}>{formatMessage('Settings')}</div>
+                <div css={title}>{settingLabels.title}</div>
                 <Nav
                   groups={[{ links }]}
                   onRenderLink={onRenderLink}

Composer/packages/client/src/store/action/setting.ts

@@ -6,8 +6,14 @@ import settingsStorage from '../../utils/dialogSettingStorage';
 import { SensitiveProperties } from '../../constants';
 
 import { BASEURL, ActionTypes } from './../../constants/index';
+import { BotEnvironments } from './../../utils/envUtil';
 
-export const setSettings: ActionCreator = async ({ dispatch }, botName: string, settings: DialogSetting) => {
+export const setSettings: ActionCreator = async (
+  { dispatch },
+  botName: string,
+  settings: DialogSetting,
+  slot?: BotEnvironments
+) => {
   try {
     // set value to store
     dispatch({
@@ -22,7 +28,8 @@ export const setSettings: ActionCreator = async ({ dispatch }, botName: string,
       settingsStorage.setField(botName, property, propertyValue ? propertyValue : '');
     }
     // set value to server
-    await axios.post(`${BASEURL}/projects/opened/settings`, { settings });
+    const suffix = slot ? `/${slot}` : '';
+    await axios.post(`${BASEURL}/projects/opened/settings${suffix}`, { settings });
   } catch (err) {
     dispatch({
       type: ActionTypes.SET_ERROR,
@@ -33,3 +40,35 @@ export const setSettings: ActionCreator = async ({ dispatch }, botName: string,
     });
   }
 };
+
+export const setDialogSettingsSlot = async ({ dispatch }, editing: boolean, slot?: BotEnvironments) => {
+  const suffix = slot ? `/${slot}` : '';
+  const query = editing ? '' : '?obfuscate=true';
+  const url = `${BASEURL}/projects/opened/settings${suffix}${query}`;
+
+  try {
+    const response = await axios.get(`${BASEURL}/projects/opened/settings${suffix}`);
+    const settings = response.data;
+    dispatch({
+      type: ActionTypes.SYNC_ENV_SETTING,
+      payload: {
+        settings,
+      },
+    });
+  } catch (err) {
+    dispatch({
+      type: ActionTypes.SET_ERROR,
+      payload: {
+        message: err.response && err.response.data.message ? err.reponse.data.message : err,
+        summary: 'DLG SETTINGS ERROR',
+      },
+    });
+  }
+};
+
+export const setEditDialogSettings: ActionCreator = async (store, editing: boolean, slot?: BotEnvironments) => {
+  if (editing) {
+    // fetch the real settings for editing
+    await setDialogSettingsSlot(store, editing, slot);
+  }
+};

Composer/packages/client/src/store/index.tsx

@@ -2,6 +2,7 @@ import React, { useReducer, useRef } from 'react';
 import once from 'lodash.once';
 
 import { prepareAxios } from '../utils/auth';
+import { isAbsHosted } from '../utils/envUtil';
 
 import { reducer } from './reducer';
 import bindActions from './action/bindActions';

Composer/packages/client/src/utils/envUtil.ts

@@ -0,0 +1,5 @@
+export const isAbsHosted = () => process.env.COMPOSER_AUTH_PROVIDER === 'abs-h' || process.env.MOCKHOSTED;
+export enum BotEnvironments {
+  PRODUCTION = 'production',
+  INTEGRATION = 'integration',
+}

Composer/packages/client/src/utils/objUtil.ts

@@ -0,0 +1,15 @@
+/**
+ * obfuscate object member values to '*****'
+ * @param obj
+ */
+export const obfuscate = (obj: Record<string, any> | string | number | boolean) => {
+  const OBFUSCATED_VALUE = '*****';
+  if (typeof obj !== 'object') {
+    return OBFUSCATED_VALUE;
+  }
+  if (Array.isArray(obj)) {
+    return obj.map(obfuscate);
+  }
+
+  return obj ? Object.keys(obj).reduce((prev, k) => ({ ...prev, [k]: obfuscate(obj[k]) }), {}) : OBFUSCATED_VALUE;
+};