From d4095d1d41e771270770ef1c1a6f2c6841e44ed4 Mon Sep 17 00:00:00 2001
From: Soroush <hatpick@gmail.com>
Date: Wed, 21 Apr 2021 16:12:08 -0700
Subject: [PATCH] fix ux issues (#7242)

Co-authored-by: Soroush <sorgh@microsoft.com>
---
 .../setting/app-settings/AppSettings.tsx      |  6 +-
 .../setting/app-settings/SettingDropdown.tsx  | 57 +++++++++++--------
 .../packages/server/src/locales/en-US.json    | 11 ++--
 3 files changed, 41 insertions(+), 33 deletions(-)

diff --git a/Composer/packages/client/src/pages/setting/app-settings/AppSettings.tsx b/Composer/packages/client/src/pages/setting/app-settings/AppSettings.tsx
index 466e9e9bb4..8882a48c82 100644
--- a/Composer/packages/client/src/pages/setting/app-settings/AppSettings.tsx
+++ b/Composer/packages/client/src/pages/setting/app-settings/AppSettings.tsx
@@ -100,13 +100,13 @@ const AppSettings: React.FC<RouteComponentProps> = () => {
     <div css={container}>
       <section css={section}>
         <section css={section}>
-          <h2>{formatMessage('Application Language settings')}</h2>
+          <h2>{formatMessage('Application language settings')}</h2>
           <SettingDropdown
-            description={formatMessage('This is the language used for Composer’s user interface.')}
             id={'appLanguage'}
+            label={formatMessage('Composer language')}
             options={languageOptions}
             selected={userSettings.appLocale}
-            title={formatMessage('Application language')}
+            tooltip={formatMessage('This is the language used for Composer’s user interface.')}
             onChange={onLocaleChange}
           />
         </section>
diff --git a/Composer/packages/client/src/pages/setting/app-settings/SettingDropdown.tsx b/Composer/packages/client/src/pages/setting/app-settings/SettingDropdown.tsx
index 3aeefe8d55..df617a8b56 100644
--- a/Composer/packages/client/src/pages/setting/app-settings/SettingDropdown.tsx
+++ b/Composer/packages/client/src/pages/setting/app-settings/SettingDropdown.tsx
@@ -3,54 +3,65 @@
 
 /** @jsx jsx */
 import { jsx } from '@emotion/core';
-import React from 'react';
 import { useId } from '@uifabric/react-hooks';
 import kebabCase from 'lodash/kebabCase';
-import { Dropdown } from 'office-ui-fabric-react/lib/Dropdown';
-import { TooltipHost } from 'office-ui-fabric-react/lib/Tooltip';
+import { Dropdown, IDropdownOption } from 'office-ui-fabric-react/lib/Dropdown';
 import { Icon } from 'office-ui-fabric-react/lib/Icon';
-import formatMessage from 'format-message';
+import { TooltipHost } from 'office-ui-fabric-react/lib/Tooltip';
+import React from 'react';
 
 import * as styles from './styles';
 
-interface ISettingToggleProps {
-  description: React.ReactChild;
+const defaultItemHeight = 36;
+const defaultItemCountBeforeScroll = 10;
+const defaultDropdownWidth = 300;
+
+type Props = {
+  label: string;
+  options: IDropdownOption[];
+  tooltip?: React.ReactNode;
   id?: string;
-  onChange: (key: string) => void;
-  title: string;
-  options: { key: string; text: string }[];
   selected?: string;
-  dropdownWidth?: number;
-}
+  width?: number;
+  itemCountBeforeScroll?: number;
+  onChange: (key: string) => void;
+};
 
-const SettingDropdown: React.FC<ISettingToggleProps> = (props) => {
-  const { id, title, onChange, options, selected } = props;
-  const uniqueId = useId(kebabCase(title));
+export const SettingDropdown: React.FC<Props> = ({
+  id,
+  label,
+  tooltip,
+  width = defaultDropdownWidth,
+  itemCountBeforeScroll = defaultItemCountBeforeScroll,
+  onChange,
+  options,
+  selected,
+}) => {
+  const uniqueId = useId(kebabCase(label));
 
-  const onRenderLabel = (props) => {
+  const renderLabel = React.useCallback(({ label: dropdownLabel }) => {
     return (
       <div css={styles.labelContainer}>
-        <div css={styles.customerLabel}> {props.label} </div>
-        <TooltipHost content={props.label}>
+        <div css={styles.customerLabel}>{dropdownLabel}</div>
+        <TooltipHost content={tooltip ?? dropdownLabel}>
           <Icon iconName="Unknown" styles={styles.icon} />
         </TooltipHost>
       </div>
     );
-  };
+  }, []);
 
   return (
     <div css={styles.settingsContainer}>
       <Dropdown
+        calloutProps={{ calloutMaxHeight: defaultItemHeight * itemCountBeforeScroll }}
         id={id || uniqueId}
-        label={formatMessage('Composer language is the language of Composer UI')}
+        label={label}
         options={options}
         selectedKey={selected}
-        styles={{ root: { width: '100%' } }}
+        styles={{ root: { width } }}
         onChange={(_e, option) => onChange(option?.key?.toString() ?? '')}
-        onRenderLabel={onRenderLabel}
+        onRenderLabel={renderLabel}
       />
     </div>
   );
 };
-
-export { SettingDropdown };
diff --git a/Composer/packages/server/src/locales/en-US.json b/Composer/packages/server/src/locales/en-US.json
index 4845d3e06a..2c9c028f8c 100644
--- a/Composer/packages/server/src/locales/en-US.json
+++ b/Composer/packages/server/src/locales/en-US.json
@@ -323,11 +323,8 @@
   "app_id_password_424f613a": {
     "message": "App Id / Password"
   },
-  "application_language_f100f3e0": {
-    "message": "Application language"
-  },
-  "application_language_settings_26f82dfc": {
-    "message": "Application Language settings"
+  "application_language_settings_85b1f06": {
+    "message": "Application language settings"
   },
   "application_settings_39e840c6": {
     "message": "Application Settings"
@@ -689,8 +686,8 @@
   "composer_is_up_to_date_9118257d": {
     "message": "Composer is up to date."
   },
-  "composer_language_is_the_language_of_composer_ui_c23a57b6": {
-    "message": "Composer language is the language of Composer UI"
+  "composer_language_f958f3bf": {
+    "message": "Composer language"
   },
   "composer_logo_ba2048a0": {
     "message": "Composer Logo"