feature: new design for Connections setting pane by beyackle · Pull Request #6724 · microsoft/BotFramework-Composer

This repository was archived by the owner on Jul 9, 2025. It is now read-only.

Composer/packages/client/__tests__/pages/botProjectsSettings/AdapterSettings.test.tsx

            
                      Original file line number
                      Diff line number
                      Diff line change
                  
    @@ -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(

          <ExternalAdapterSettings projectId={PROJECT_ID} />,

          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');

Composer/packages/client/src/pages/botProject/adapters/ABSChannels.tsx

            
                      Original file line number
                      Diff line number
                      Diff line change
                  
    @@ -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<RuntimeSettingsProps> = (props) => {
  
        }

      };

      const onRenderLabel = (props) => {

        return (

          <div css={labelContainer}>

            <div css={customerLabel}> {props.label} </div>

            <TooltipHost content={props.label}>

              <Icon iconName="Unknown" styles={unknownIconStyle(props.required)} />

            </TooltipHost>

          </div>

        );

      };

      /* Copied from BotStatusList.tx */

      const renderDropdownOption = (option?: IDropdownOption): JSX.Element | null => {

        if (!option) return null;

    @@ -527,12 +513,12 @@ export const ABSChannels: React.FC<RuntimeSettingsProps> = (props) => {
  
      const absTableRow = (channel: string, name: string, link: string) => (

        <div key={channel} css={tableRow}>

          <div css={tableRowItem(columnSizes[0])}>{name}</div>

          <div css={tableRowItem(columnSizes[1])}>

          <div css={tableRowItem(columnSizes[1])}>{absTableToggle(channel)}</div>

          <div css={tableRowItem(columnSizes[2])}>

            <Link href={link} target="_docs">

              {formatMessage('Learn more')}

            </Link>

          </div>

          <div css={tableRowItem(columnSizes[2])}>{absTableToggle(channel)}</div>

        </div>

      );

    @@ -562,16 +548,14 @@ export const ABSChannels: React.FC<RuntimeSettingsProps> = (props) => {
  
          />

          <div>

            <Dropdown

              label={formatMessage('Publish profile to configure:')}

              options={publishTargetOptions}

              placeholder={formatMessage('Choose publishing profile')}

              placeholder={formatMessage('Select publishing profile')}

              styles={{

                root: { display: 'flex', alignItems: 'center', marginBottom: 10 },

                label: { width: 200 },

                dropdown: { width: 300 },

              }}

              onChange={onSelectProfile}

              onRenderLabel={onRenderLabel}

              onRenderOption={renderDropdownOption}

            />

    @@ -585,14 +569,13 @@ export const ABSChannels: React.FC<RuntimeSettingsProps> = (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 && <LoadingSpinner />}

    @@ -604,10 +587,10 @@ export const ABSChannels: React.FC<RuntimeSettingsProps> = (props) => {
  
            )}

            {currentResource && channelStatus && (

              <Fragment>

                <div css={tableRow}>

                <div css={tableHeaderRow}>

                  <div css={tableColumnHeader(columnSizes[0])}>{formatMessage('Name')}</div>

                  <div css={tableColumnHeader(columnSizes[1])}>{formatMessage('Documentation')}</div>

                  <div css={tableColumnHeader(columnSizes[2])}>{formatMessage('Enabled')}</div>

                  <div css={tableColumnHeader(columnSizes[1])}>{formatMessage('Enabled')}</div>

                  <div css={tableColumnHeader(columnSizes[2])}>{formatMessage('Documentation')}</div>

                </div>

                {absTableRow(CHANNELS.TEAMS, formatMessage('MS Teams'), teamsHelpLink)}

                {absTableRow(CHANNELS.WEBCHAT, formatMessage('Web Chat'), webchatHelpLink)}

Composer/packages/client/src/pages/botProject/adapters/AdapterSection.tsx

-Original file line number
+Diff line change
@@ Expand Up / @@ -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';
@@ Expand All / @@ -18,17 +17,6 @@ type Props = { @@
       scrollToSectionId?: string;
     };
-    const renderSectionHeader = (name: string, tooltip?: string) => (
-      <div css={sectionHeader}>
-        {name}
-        {tooltip != null && (
-          <TooltipHost content={tooltip} styles={{ root: { paddingLeft: '4px' } }}>
-            <Icon iconName="Unknown" />
-          </TooltipHost>
-        )}
-      </div>
-    );
     const AdapterSection = ({ projectId, scrollToSectionId }: Props) => {
       const containerRef = useRef<HTMLDivElement>(null);
       useEffect(() => {
@@ Expand All @@
       return (
         <div ref={containerRef}>
-          <CollapsableWrapper title={formatMessage('Adapters')} titleStyle={title}>
-            <div css={subtitle}>{formatMessage('Connect your bot to other messaging services.')}</div>
-            {renderSectionHeader(formatMessage('Azure Bot Service channels'), '(description of ABS channels)')}
-            <ABSChannels projectId={projectId} />
-            {renderSectionHeader(formatMessage('External service adapters'), '(description of external adapters)')}
-            <ExternalAdapterSettings projectId={projectId} />
+          <CollapsableWrapper title={formatMessage('Connections')} titleStyle={title}>
+            <Stack
+              tokens={{
+                padding: '6px 0',
+              }}
+            >
+              <div css={title}>{formatMessage('Azure connections')}</div>
+              <div css={subtitle}>
+                {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.'
+                )}
+              </div>
+              <ABSChannels projectId={projectId} />
+            </Stack>
+            <Stack>
+              <div css={title}>{formatMessage('External connections')}</div>
+              <div css={subtitle}>{formatMessage('Find and install more external services in the package manager.')}</div>
+              <ExternalAdapterSettings projectId={projectId} />
+            </Stack>
           </CollapsableWrapper>
         </div>
       );
@@ Expand Down @@

Composer/packages/client/src/pages/botProject/adapters/ExternalAdapterModal.tsx

            
                      Original file line number
                      Diff line number
                      Diff line change
                  
    @@ -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')}

                </PrimaryButton>

              </DialogFooter>

            </div>

Composer/packages/client/src/pages/botProject/adapters/ExternalAdapterSettings.tsx

            
                      Original file line number
                      Diff line number
                      Diff line change
                  
    @@ -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<Package | undefined>();

      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)[]) => (

        <div role="table">

          <div css={subtitle}>

            {formatMessage.rich('Install more adapters in <a>the package manager</a>.', {

              a: ({ children }) => (

                <Link key="subtitle-link" href={packageManagerLink}>

                  {children}

                </Link>

              ),

            })}

          </div>

          <div css={tableRow} role="row">

          <div css={tableHeaderRow} role="row">

            <div css={tableColumnHeader(columnSizes[0])} role="columnheader">

              {formatMessage('Name')}

            </div>

            <div css={tableColumnHeader(columnSizes[1])} role="columnheader">

              {formatMessage('Configured')}

              {formatMessage('Enabled')}

            </div>

            <div css={tableColumnHeader(columnSizes[2])} role="columnheader">

              {formatMessage('Enabled')}

              {formatMessage('Configuration')}

            </div>

          </div>

    @@ -93,23 +83,6 @@ const ExternalAdapterSettings = (props: Props) => {
  
                  {title}

                </div>

                <div css={tableRowItem(columnSizes[1])} role="cell">

                  {keyConfigured ? (

                    <Icon

                      aria-label={formatMessage('Configured')}

                      iconName="CheckMark"

                      styles={{ root: { color: SharedColors.green10, fontSize: '18px' } }}

                    />

                  ) : (

                    <Link

                      key={key}

                      ariaLabel={formatMessage('Configure {title}', { title })}

                      onClick={() => openModal(key, true, packageName)}

                    >

                      {formatMessage('Configure')}

                    </Link>

                  )}

                </div>

                <div css={tableRowItem(columnSizes[2])} role="cell">

                  <Toggle

                    ariaLabel={formatMessage('{title} connection', { title })}

                    checked={keyEnabled}

    @@ -134,31 +107,11 @@ const ExternalAdapterSettings = (props: Props) => {
  
                    }}

                  />

                </div>

                <TooltipHost content={formatMessage('Actions')} directionalHint={DirectionalHint.rightCenter}>

                  <IconButton

                    ariaLabel={formatMessage('Actions')}

                    className="dialog-more-btn"

                    data-testid="dialogMoreButton"

                    menuIconProps={{ iconName: 'MoreVertical' }}

                    menuProps={{

                      items: [

                        {

                          key: 'edit',

                          text: formatMessage('Edit'),

                          iconProps: { iconName: 'Edit' },

                          onClick: () => openModal(key, false, packageName),

                        },

                      ],

                    }}

                    role="cell"

                    styles={{ root: { paddingTop: '10px', paddingBottom: '10px' } }}

                    onKeyDown={(e) => {

                      if (e.key === 'Enter') {

                        e.stopPropagation();

                      }

                    }}

                  />

                </TooltipHost>

                <div css={tableRowItem(columnSizes[2])} role="cell">

                  <Link key={key} onClick={onModalOpen({ key, packageName })}>

                    {formatMessage('Configure')}

                  </Link>

                </div>

              </div>

            );

          })}

    @@ -176,19 +129,25 @@ const ExternalAdapterSettings = (props: Props) => {
  
      return (

        <Fragment>

          <div data-testid="adapterSettings">{externalServices(adapterSchemas)}</div>

          <div key={'subtitle'} css={subtitle}>

            {formatMessage.rich('<a>Add from package manager</a>.', {

              a: ({ children }) => (

                <Link key="link" href={packageManagerLink}>

                  {children}

                </Link>

              ),

            })}

          </div>

          {currentKey != null && currentPackageName != null && schemaDefinitions[currentKey] != null && (

            <AdapterModal

              isOpen

              adapterKey={currentKey}

              isFirstTime={currentModalProps?.firstTime ?? false}

              packageName={currentPackageName}

              projectId={projectId}

              schema={schemaDefinitions[currentKey]}

              uiSchema={uiSchemas?.[currentKey]?.form}

              value={currentSettings[currentPackageName]}

              onClose={() => {

                openModal(undefined);

              }}

              onClose={onModalClose}

            />

          )}

        </Fragment>

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feature: new design for Connections setting pane #6724

Uh oh!

Diff view

Diff view

There are no files selected for viewing

Uh oh!