diff --git a/Composer/packages/client/__tests__/pages/botProjectsSettings/AdapterSettings.test.tsx b/Composer/packages/client/__tests__/pages/botProjectsSettings/AdapterSettings.test.tsx index c55b7ceef3..5d9ee98620 100644 --- a/Composer/packages/client/__tests__/pages/botProjectsSettings/AdapterSettings.test.tsx +++ b/Composer/packages/client/__tests__/pages/botProjectsSettings/AdapterSettings.test.tsx @@ -85,7 +85,7 @@ describe('ExternalAdapterSettings', () => { initRecoilState ); - const link = getByText('the package manager'); + const link = getByText(/from package manager/); expect(link.attributes.getNamedItem('href')?.value).toEqual('plugin/package-manager/package-manager'); }); @@ -112,7 +112,7 @@ describe('ExternalAdapterSettings', () => { }); it('sets settings on an adapter', async () => { - const { getByTestId, getByLabelText, getByText, queryByTestId } = renderWithRecoilAndCustomDispatchers( + const { getByTestId, getByLabelText, queryByTestId } = renderWithRecoilAndCustomDispatchers( , initRecoilState ); @@ -123,8 +123,9 @@ describe('ExternalAdapterSettings', () => { }); await act(async () => { + const modal = getByTestId('adapterModal'); await userEvent.type(getByLabelText('Example Name'), 'test text 12345', { delay: 50 }); - userEvent.click(getByText('Create')); + userEvent.click(within(modal).getByText('Configure')); }); const modal = queryByTestId('adapterModal'); diff --git a/Composer/packages/client/src/pages/botProject/adapters/ABSChannels.tsx b/Composer/packages/client/src/pages/botProject/adapters/ABSChannels.tsx index f6cd5a3866..6213267538 100644 --- a/Composer/packages/client/src/pages/botProject/adapters/ABSChannels.tsx +++ b/Composer/packages/client/src/pages/botProject/adapters/ABSChannels.tsx @@ -6,7 +6,6 @@ import React, { useEffect, useState, Fragment } from 'react'; import { jsx } from '@emotion/core'; import formatMessage from 'format-message'; import { Dropdown, IDropdownOption } from 'office-ui-fabric-react/lib/Dropdown'; -import { TooltipHost } from 'office-ui-fabric-react/lib/Tooltip'; import { Icon } from 'office-ui-fabric-react/lib/Icon'; import { Link } from 'office-ui-fabric-react/lib/Link'; import { Toggle } from 'office-ui-fabric-react/lib/Toggle'; @@ -29,12 +28,10 @@ import { getTokenFromCache, isShowAuthDialog, userShouldProvideTokens } from '.. import httpClient from '../../../utils/httpUtil'; import { dispatcherState } from '../../../recoilModel'; import { + tableHeaderRow, tableRow, tableRowItem, tableColumnHeader, - labelContainer, - customerLabel, - unknownIconStyle, errorContainer, errorIcon, errorTextStyle, @@ -420,17 +417,6 @@ export const ABSChannels: React.FC = (props) => { } }; - const onRenderLabel = (props) => { - return ( -
-
{props.label}
- - - -
- ); - }; - /* Copied from BotStatusList.tx */ const renderDropdownOption = (option?: IDropdownOption): JSX.Element | null => { if (!option) return null; @@ -527,12 +513,12 @@ export const ABSChannels: React.FC = (props) => { const absTableRow = (channel: string, name: string, link: string) => (
{name}
-
+
{absTableToggle(channel)}
+
{formatMessage('Learn more')}
-
{absTableToggle(channel)}
); @@ -562,16 +548,14 @@ export const ABSChannels: React.FC = (props) => { />
@@ -585,14 +569,13 @@ export const ABSChannels: React.FC = (props) => { return { key: p.subscriptionId ?? '', text: p.displayName ?? 'Unnamed' }; }) ?? [] } - placeholder={formatMessage('Choose subscription')} + placeholder={formatMessage('Select publishing profile')} styles={{ root: { display: 'flex', alignItems: 'center', marginBottom: 10 }, label: { width: 200 }, dropdown: { width: 300 }, }} onChange={onChangeSubscription} - onRenderLabel={onRenderLabel} /> )} {isLoading && } @@ -604,10 +587,10 @@ export const ABSChannels: React.FC = (props) => { )} {currentResource && channelStatus && ( -
+
{formatMessage('Name')}
-
{formatMessage('Documentation')}
-
{formatMessage('Enabled')}
+
{formatMessage('Enabled')}
+
{formatMessage('Documentation')}
{absTableRow(CHANNELS.TEAMS, formatMessage('MS Teams'), teamsHelpLink)} {absTableRow(CHANNELS.WEBCHAT, formatMessage('Web Chat'), webchatHelpLink)} diff --git a/Composer/packages/client/src/pages/botProject/adapters/AdapterSection.tsx b/Composer/packages/client/src/pages/botProject/adapters/AdapterSection.tsx index af8f17c363..9da64b5627 100644 --- a/Composer/packages/client/src/pages/botProject/adapters/AdapterSection.tsx +++ b/Composer/packages/client/src/pages/botProject/adapters/AdapterSection.tsx @@ -4,11 +4,10 @@ import { jsx } from '@emotion/core'; import { useEffect, useRef } from 'react'; import formatMessage from 'format-message'; -import { Icon } from 'office-ui-fabric-react/lib/Icon'; -import { TooltipHost } from 'office-ui-fabric-react/lib/Tooltip'; +import { Stack } from 'office-ui-fabric-react/lib/Stack'; import { CollapsableWrapper } from '../../../components/CollapsableWrapper'; -import { title, subtitle, sectionHeader } from '../styles'; +import { title, subtitle } from '../styles'; import ExternalAdapterSettings from './ExternalAdapterSettings'; import ABSChannels from './ABSChannels'; @@ -18,17 +17,6 @@ type Props = { scrollToSectionId?: string; }; -const renderSectionHeader = (name: string, tooltip?: string) => ( -
- {name} - {tooltip != null && ( - - - - )} -
-); - const AdapterSection = ({ projectId, scrollToSectionId }: Props) => { const containerRef = useRef(null); useEffect(() => { @@ -39,12 +27,25 @@ const AdapterSection = ({ projectId, scrollToSectionId }: Props) => { return (
- -
{formatMessage('Connect your bot to other messaging services.')}
- {renderSectionHeader(formatMessage('Azure Bot Service channels'), '(description of ABS channels)')} - - {renderSectionHeader(formatMessage('External service adapters'), '(description of external adapters)')} - + + +
{formatMessage('Azure connections')}
+
+ {formatMessage( + 'Connect your bot to Microsoft Teams and WebChat, or enable speech. Connections are added per bot (typically to the root bot, if your project contains multiple bots), as well as per publishing profile. Select a publishing profile to view, add, and enable Azure connections.' + )} +
+ +
+ +
{formatMessage('External connections')}
+
{formatMessage('Find and install more external services in the package manager.')}
+ +
); diff --git a/Composer/packages/client/src/pages/botProject/adapters/ExternalAdapterModal.tsx b/Composer/packages/client/src/pages/botProject/adapters/ExternalAdapterModal.tsx index a27e99a694..eb6f29038f 100644 --- a/Composer/packages/client/src/pages/botProject/adapters/ExternalAdapterModal.tsx +++ b/Composer/packages/client/src/pages/botProject/adapters/ExternalAdapterModal.tsx @@ -25,7 +25,6 @@ type Props = { adapterKey: string; packageName: string; isOpen: boolean; - isFirstTime: boolean; // true if the user clicked Configure to get here, false if it's from the Edit menu onClose: () => void; projectId: string; schema: JSONSchema7; @@ -45,7 +44,7 @@ function makeDefault(schema: JSONSchema7) { } const AdapterModal = (props: Props) => { - const { isOpen, onClose, schema, uiSchema, projectId, adapterKey, packageName, isFirstTime } = props; + const { isOpen, onClose, schema, uiSchema, projectId, adapterKey, packageName } = props; const [value, setValue] = useState(props.value ?? makeDefault(schema)); const { setSettings } = useRecoilValue(dispatcherState); @@ -114,7 +113,7 @@ const AdapterModal = (props: Props) => { onClose(); }} > - {isFirstTime ? formatMessage('Create') : formatMessage('Confirm')} + {formatMessage('Configure')}
diff --git a/Composer/packages/client/src/pages/botProject/adapters/ExternalAdapterSettings.tsx b/Composer/packages/client/src/pages/botProject/adapters/ExternalAdapterSettings.tsx index 7074336028..4d8c88423e 100644 --- a/Composer/packages/client/src/pages/botProject/adapters/ExternalAdapterSettings.tsx +++ b/Composer/packages/client/src/pages/botProject/adapters/ExternalAdapterSettings.tsx @@ -8,17 +8,13 @@ import formatMessage from 'format-message'; import { useRecoilValue } from 'recoil'; import { BotSchemas, DialogSetting } from '@bfc/shared'; import { Link } from 'office-ui-fabric-react/lib/Link'; -import { Icon } from 'office-ui-fabric-react/lib/Icon'; import { Toggle } from 'office-ui-fabric-react/lib/Toggle'; -import { IconButton } from 'office-ui-fabric-react/lib/Button'; -import { TooltipHost, DirectionalHint } from 'office-ui-fabric-react/lib/Tooltip'; -import { SharedColors } from '@uifabric/fluent-theme'; import { JSONSchema7 } from '@botframework-composer/types'; import { AdapterRecord } from '@botframework-composer/types/src'; import { useRouterCache } from '../../../utils/hooks'; import { schemasState, settingsState, dispatcherState } from '../../../recoilModel'; -import { subtitle, tableRow, tableRowItem, tableColumnHeader, columnSizes } from '../styles'; +import { subtitle, tableHeaderRow, tableRow, tableRowItem, tableColumnHeader, columnSizes } from '../styles'; import AdapterModal, { hasRequired } from './ExternalAdapterModal'; @@ -28,6 +24,11 @@ type Props = { projectId: string; }; +type Package = { + key: string; + packageName?: string; +}; + const ExternalAdapterSettings = (props: Props) => { const { projectId } = props; @@ -41,40 +42,29 @@ const ExternalAdapterSettings = (props: Props) => { const { definitions: schemaDefinitions } = schemas?.sdk?.content ?? {}; const uiSchemas = schemas?.ui?.content ?? {}; - const [currentModalProps, setModalProps] = useState< - { key: string; packageName: string; firstTime: boolean } | undefined - >(); + const [currentModalProps, setModalProps] = useState(); + + const onModalOpen = (pkg: Package) => () => { + setModalProps(pkg); + }; - const openModal = (key?: string, firstTime?: boolean, packageName?: string) => { - if (key == null || packageName == null || firstTime == null) { - setModalProps(undefined); - } else { - setModalProps({ key, packageName, firstTime }); - } + const onModalClose = () => { + setModalProps(undefined); }; if (schemaDefinitions == null) return null; - const externalServices = (schemas: (JSONSchema7 & { key: string; packageName?: string; firstTime?: boolean })[]) => ( + const externalServices = (schemas: (JSONSchema7 & Package)[]) => (
-
- {formatMessage.rich('Install more adapters in the package manager.', { - a: ({ children }) => ( - - {children} - - ), - })} -
-
+
{formatMessage('Name')}
- {formatMessage('Configured')} + {formatMessage('Enabled')}
- {formatMessage('Enabled')} + {formatMessage('Configuration')}
@@ -93,23 +83,6 @@ const ExternalAdapterSettings = (props: Props) => { {title}
- {keyConfigured ? ( - - ) : ( - openModal(key, true, packageName)} - > - {formatMessage('Configure')} - - )} -
-
{ }} />
- - openModal(key, false, packageName), - }, - ], - }} - role="cell" - styles={{ root: { paddingTop: '10px', paddingBottom: '10px' } }} - onKeyDown={(e) => { - if (e.key === 'Enter') { - e.stopPropagation(); - } - }} - /> - +
+ + {formatMessage('Configure')} + +
); })} @@ -176,19 +129,25 @@ const ExternalAdapterSettings = (props: Props) => { return (
{externalServices(adapterSchemas)}
+
+ {formatMessage.rich('Add from package manager.', { + a: ({ children }) => ( + + {children} + + ), + })} +
{currentKey != null && currentPackageName != null && schemaDefinitions[currentKey] != null && ( { - openModal(undefined); - }} + onClose={onModalClose} /> )}
diff --git a/Composer/packages/client/src/pages/botProject/styles.ts b/Composer/packages/client/src/pages/botProject/styles.ts index 59ba6d5a59..0e061fc146 100644 --- a/Composer/packages/client/src/pages/botProject/styles.ts +++ b/Composer/packages/client/src/pages/botProject/styles.ts @@ -6,18 +6,16 @@ import { NeutralColors, SharedColors } from '@uifabric/fluent-theme'; import { FontSizes, FontWeights } from 'office-ui-fabric-react/lib/Styling'; export const title = css` - font-size: ${FontSizes.medium}; + font-size: ${FontSizes.mediumPlus}; font-weight: ${FontWeights.semibold}; - margin-left: 22px; margin-top: 6px; + margin-bottom: 12px; `; export const subtitle = css` color: ${NeutralColors.gray130}; - font-size: ${FontSizes.smallPlus}; - & > h1 { - margin-top: 0; - } + font-size: ${FontSizes.medium}; + padding: 12px 0; `; export const sectionHeader = css` @@ -26,7 +24,7 @@ export const sectionHeader = css` padding: 6px 0; `; -export const tableRow = css` +export const tableHeaderRow = css` display: flex; flex-direction: row; align-items: center; @@ -35,6 +33,14 @@ export const tableRow = css` border-bottom: 1px solid ${NeutralColors.gray30}; `; +export const tableRow = css` + display: flex; + flex-direction: row; + align-items: center; + height: 42px; + width: 750px; +`; + export const tableRowItem = (width?: string) => css` font-size: ${FontSizes.medium}; font-weight: ${FontWeights.regular}; diff --git a/Composer/packages/server/src/locales/en-US.json b/Composer/packages/server/src/locales/en-US.json index c50b00c8a6..79a229895f 100644 --- a/Composer/packages/server/src/locales/en-US.json +++ b/Composer/packages/server/src/locales/en-US.json @@ -11,6 +11,9 @@ "ErrorInfo_part3": { "message": "Try navigating to another node in the visual editor." }, + "a_add_from_package_manager_a_4515cfc2": { + "message": "Add from package manager." + }, "a_dialog_file_must_have_a_name_123ff67d": { "message": "a dialog file must have a name" }, @@ -116,9 +119,6 @@ "activity_received_2f20fa9d": { "message": "Activity received" }, - "adapters_fd4173b1": { - "message": "Adapters" - }, "adaptive_card_785723e3": { "message": "Adaptive card" }, @@ -404,8 +404,8 @@ "automatically_generate_dialogs_that_collect_inform_e7cf619e": { "message": "Automatically generate dialogs that collect information from a user to manage conversations." }, - "azure_bot_service_channels_5b358c1c": { - "message": "Azure Bot Service channels" + "azure_connections_9e63f716": { + "message": "Azure connections" }, "azure_functions_5e23be5c": { "message": "Azure Functions" @@ -614,12 +614,6 @@ "choose_how_to_create_your_bot_a97f7b3e": { "message": "Choose how to create your bot" }, - "choose_publishing_profile_ee7ecc78": { - "message": "Choose publishing profile" - }, - "choose_subscription_3d78d10d": { - "message": "Choose subscription" - }, "clear_all_da755751": { "message": "Clear all" }, @@ -710,6 +704,9 @@ "conditionalselector_ed2031f0": { "message": "ConditionalSelector" }, + "configuration_e186200": { + "message": "Configuration" + }, "configure_adapter_2f621249": { "message": "Configure adapter" }, @@ -722,12 +719,6 @@ "configure_ecb97e30": { "message": "Configure" }, - "configure_title_1a4383b7": { - "message": "Configure { title }" - }, - "configured_8d0f4dc8": { - "message": "Configured" - }, "configures_default_language_model_to_use_if_there__f09f1acd": { "message": "Configures default language model to use if there is no culture code in the file name (Default: en-us)" }, @@ -764,8 +755,8 @@ "connect_to_speech_service_9d877e37": { "message": "Connect to Speech Service" }, - "connect_your_bot_to_other_messaging_services_c7f6aed6": { - "message": "Connect your bot to other messaging services." + "connect_your_bot_to_microsoft_teams_and_webchat_or_e1cc2567": { + "message": "Connect your bot to Microsoft Teams and WebChat, or enable speech. Connections are added per bot (typically to the root bot, if your project contains multiple bots), as well as per publishing profile. Select a publishing profile to view, add, and enable Azure connections." }, "connect_your_bot_to_teams_external_channels_or_ena_8b4fc9f0": { "message": "Connect your bot to Teams, external channels, or enable speech. Learn more" @@ -1544,8 +1535,8 @@ "extension_settings_899ccb55": { "message": "Extension Settings" }, - "external_service_adapters_5218e6a3": { - "message": "External service adapters" + "external_connections_3415fea5": { + "message": "External connections" }, "external_services_da7820ce": { "message": "External services" @@ -1607,6 +1598,9 @@ "filter_e3398407": { "message": "Filter" }, + "find_and_install_more_external_services_in_the_pac_9a7cbe7f": { + "message": "Find and install more external services in the package manager." + }, "find_pre_built_adaptive_expressions_b106308e": { "message": "Find pre-built Adaptive expressions" }, @@ -1913,9 +1907,6 @@ "install_microsoft_net_core_sdk_2de509f0": { "message": "Install Microsoft .NET Core SDK" }, - "install_more_adapters_in_a_the_package_manager_a_156fb028": { - "message": "Install more adapters in the package manager." - }, "install_node_js_1857298c": { "message": "Install Node.js" }, @@ -2624,9 +2615,6 @@ "open_web_chat_23601990": { "message": "Open Web Chat" }, - "open_web_chat_7a24d4f8": { - "message": "Open web chat" - }, "open_your_azure_bot_resource_9165e3d1": { "message": "Open your Azure Bot resource" }, @@ -2852,9 +2840,6 @@ "publish_models_9a36752a": { "message": "Publish models" }, - "publish_profile_to_configure_ca758e68": { - "message": "Publish profile to configure:" - }, "publish_selected_bots_825bc03a": { "message": "Publish selected bots" }, @@ -3158,9 +3143,6 @@ "schema_24739a48": { "message": "Schema" }, - "schema_definition_not_found_in_sdk_schema_1102ce9b": { - "message": "Schema definition not found in sdk.schema." - }, "schemaid_doesn_t_exists_select_an_schema_to_edit_o_9cccc954": { "message": "{ schemaId } doesn''t exists, select an schema to edit or create a new one" }, @@ -3248,6 +3230,9 @@ "select_property_type_45c6e68e": { "message": "Select property type" }, + "select_publishing_profile_a3f478e2": { + "message": "Select publishing profile" + }, "select_qna_keys_e616cc57": { "message": "Select QnA keys" }, @@ -3560,6 +3545,12 @@ "test_in_emulator_b1b3c278": { "message": "Test in Emulator" }, + "test_in_web_chat_57f58838": { + "message": "Test in Web Chat" + }, + "test_in_web_chat_eb14550": { + "message": "Test in web chat" + }, "test_with_web_chat_and_emulator_d0f87a81": { "message": "Test with Web Chat and Emulator" }, @@ -3791,6 +3782,9 @@ "toolbar_bafd4228": { "message": "toolbar" }, + "topic_e820dbbd": { + "message": "(Topic)" + }, "total_mb_531a3721": { "message": "{ total }MB" },