fix: update UI in bot settings page to final R13 design spec

Composer/cypress/integration/LuisDeploy.spec.ts

@@ -14,7 +14,7 @@ context('Luis Deploy', () => {
 
   it('can deploy luis success', () => {
     cy.visitPage('Project settings');
-    cy.findByText('LUIS and QnA').click();
+    cy.findByText('Development Resources').click();
     cy.findAllByTestId('rootLUISAuthoringKey').type('12345678', { delay: 200 });
     cy.findAllByTestId('rootLUISRegion').click();
     cy.findByText('westus').click();

Composer/packages/client/src/components/ManageLuis/ManageLuis.tsx

@@ -53,6 +53,7 @@ export const ManageLuis = (props: ManageLuisProps) => {
         '1. Using the Azure portal, please create a Language Understanding resource on my behalf.\n2. Once provisioned, securely share the resulting credentials with me as described in the link below.\n\nDetailed instructions:\nhttps://aka.ms/bfcomposerhandoffluis'
       )}
       hidden={props.hidden}
+      learnMore={'https://aka.ms/composer-luis-learnmore'}
       regions={LUIS_REGIONS}
       serviceKeyType={'LUIS.Authoring'}
       serviceName={'LUIS'}

Composer/packages/client/src/components/ManageQNA/ManageQNA.tsx

@@ -50,6 +50,7 @@ export const ManageQNA = (props: ManageQNAProps) => {
         '1. Using the Azure portal, please create a QnAMaker resource on my behalf.\n2. Once provisioned, securely share the resulting credentials with me as described in the link below.\n\nDetailed instructions:\nhttps://aka.ms/bfcomposerhandoffqnamaker'
       )}
       hidden={props.hidden}
+      learnMore={'https://aka.ms/composer-addqnamaker-learnmore'}
       regions={QNA_REGIONS}
       serviceKeyType={'QnAMaker'}
       serviceName={'QnA Maker'}

Composer/packages/client/src/pages/botProject/AllowedCallers.tsx

@@ -2,8 +2,8 @@
 // Licensed under the MIT License.
 
 /** @jsx jsx */
-import { css, jsx } from '@emotion/core';
-import React from 'react';
+import { jsx } from '@emotion/core';
+import React, { Fragment } from 'react';
 import styled from '@emotion/styled';
 import { useRecoilValue } from 'recoil';
 import { ActionButton } from 'office-ui-fabric-react/lib/components/Button';
@@ -13,12 +13,12 @@ import { ITextField, TextField } from 'office-ui-fabric-react/lib/components/Tex
 import cloneDeep from 'lodash/cloneDeep';
 import formatMessage from 'format-message';
 import { MessageBar, MessageBarType } from 'office-ui-fabric-react/lib/MessageBar';
+import { Link } from 'office-ui-fabric-react/lib/Link';
 
 import { dispatcherState, rootBotProjectIdSelector, settingsState } from '../../recoilModel';
 import { mergePropertiesManagedByRootBot } from '../../recoilModel/dispatchers/utils/project';
-import { CollapsableWrapper } from '../../components/CollapsableWrapper';
 
-import { actionButton, subtitle as defaultSubtitle, title } from './styles';
+import { actionButton, subtext, title } from './styles';
 
 const Input = styled(TextField)({
   width: '100%',
@@ -54,10 +54,6 @@ const ItemContainer = styled.div({
   marginTop: '4px',
 });
 
-const subtitle = css`
-  padding: 8px 0;
-`;
-
 type ItemProps = {
   value: string;
   onBlur: () => void;
@@ -144,10 +140,22 @@ export const AllowedCallers: React.FC<Props> = ({ projectId }) => {
   }, [runtimeSettings?.skills?.allowedCallers, updateAllowedCallers]);
 
   return (
-    <CollapsableWrapper title={formatMessage('Allowed callers')} titleStyle={title}>
-      <div css={[defaultSubtitle, subtitle]}>
-        {formatMessage(
-          'Skills can be “called” by external bots. Allow other bots to call your skill by adding their App IDs to the list below.'
+    <Fragment>
+      <div css={title}>{formatMessage('Allowed Callers')}</div>
+      <div css={subtext}>
+        {formatMessage.rich(
+          'Skills can be “called” by external bots. Allow other bots to call your skill by adding their App IDs to the list below. <a>Learn more.</a>',
+          {
+            a: ({ children }) => (
+              <Link
+                key="allowed-callers-settings-page"
+                href={'https://aka.ms/composer-skills-learnmore'}
+                target="_blank"
+              >
+                {children}
+              </Link>
+            ),
+          }
         )}
       </div>
       <ItemContainer>
@@ -157,9 +165,6 @@ export const AllowedCallers: React.FC<Props> = ({ projectId }) => {
           );
         })}
       </ItemContainer>
-      <ActionButton data-testid={'addNewAllowedCaller'} styles={actionButton} onClick={onAddNewAllowedCaller}>
-        {formatMessage('Add caller')}
-      </ActionButton>
       {!runtimeSettings?.skills?.allowedCallers?.length && (
         <MessageBar messageBarType={MessageBarType.warning}>
           {formatMessage('This bot cannot be called as a skill since the allowed caller list is empty')}
@@ -168,6 +173,6 @@ export const AllowedCallers: React.FC<Props> = ({ projectId }) => {
       <ActionButton data-testid={'addNewAllowedCaller'} styles={actionButton} onClick={onAddNewAllowedCaller}>
         {formatMessage('Add new caller')}
       </ActionButton>
-    </CollapsableWrapper>
+    </Fragment>
   );
 };

Composer/packages/client/src/pages/botProject/AppIdAndPassword.tsx

@@ -2,23 +2,22 @@
 // Licensed under the MIT License.
 
 /** @jsx jsx */
-import React, { useState, useEffect, useCallback } from 'react';
+import React, { useState, useEffect, useCallback, Fragment } from 'react';
 import { jsx, css } from '@emotion/core';
 import { useRecoilValue } from 'recoil';
 import { TextField } from 'office-ui-fabric-react/lib/TextField';
 import { TooltipHost } from 'office-ui-fabric-react/lib/Tooltip';
 import { Icon } from 'office-ui-fabric-react/lib/Icon';
 import formatMessage from 'format-message';
-import { mergeStyleSets } from '@uifabric/styling';
 import { FontSizes } from 'office-ui-fabric-react/lib/Styling';
 import { SharedColors } from '@uifabric/fluent-theme';
+import { Link } from 'office-ui-fabric-react/lib/Link';
 
 import { dispatcherState, settingsState } from '../../recoilModel';
-import { CollapsableWrapper } from '../../components/CollapsableWrapper';
 import { mergePropertiesManagedByRootBot } from '../../recoilModel/dispatchers/utils/project';
 import { rootBotProjectIdSelector } from '../../recoilModel/selectors/project';
 
-import { title } from './styles';
+import { inputFieldStyles, subtext, title } from './styles';
 // -------------------- Styles -------------------- //
 
 const labelContainer = css`
@@ -50,16 +49,6 @@ const appIdAndPasswordStyle = css`
   flex-direction: column;
 `;
 
-const customError = {
-  root: {
-    selectors: {
-      'p > span': {
-        width: '100%',
-      },
-    },
-  },
-};
-
 // -------------------- AppIdAndPassword -------------------- //
 
 type AppIdAndPasswordProps = {
@@ -114,14 +103,27 @@ export const AppIdAndPassword: React.FC<AppIdAndPasswordProps> = (props) => {
   }, [projectId, mergedSettings, localMicrosoftAppId]);
 
   return (
-    <CollapsableWrapper title={formatMessage('App Id / Password')} titleStyle={title}>
+    <Fragment>
+      <div css={title}>{formatMessage('Microsoft App ID')}</div>
+      <div css={subtext}>
+        {formatMessage.rich(
+          'A Microsoft App ID is required for your local Azure resources. If you’ve created an App ID already, you can add here. If not, your App ID and secret will be created when you provision resources for this bot. <a>Learn more.</a>',
+          {
+            a: ({ children }) => (
+              <Link key="app-id-settings-page" href={'https://aka.ms/composer-appid-learnmore'} target="_blank">
+                {children}
+              </Link>
+            ),
+          }
+        )}
+      </div>
       <div css={appIdAndPasswordStyle}>
         <TextField
           ariaLabel={formatMessage('Microsoft App Id')}
           data-testid={'MicrosoftAppId'}
           label={formatMessage('Microsoft App Id')}
           placeholder={formatMessage('Enter Microsoft App Id')}
-          styles={customError}
+          styles={inputFieldStyles}
           value={localMicrosoftAppId}
           onBlur={handleAppIdOnBlur}
           onChange={handleAppIdOnChange}
@@ -132,13 +134,13 @@ export const AppIdAndPassword: React.FC<AppIdAndPasswordProps> = (props) => {
           data-testid={'MicrosoftPassword'}
           label={formatMessage('Microsoft App Password')}
           placeholder={formatMessage('Enter Microsoft App Password')}
-          styles={mergeStyleSets({ root: { marginTop: 15 } }, customError)}
+          styles={inputFieldStyles}
           value={localMicrosoftAppPassword}
           onBlur={handleAppPasswordOnBlur}
           onChange={handleAppPasswordOnChange}
           onRenderLabel={onRenderLabel}
         />
       </div>
-    </CollapsableWrapper>
+    </Fragment>
   );
 };

Composer/packages/client/src/pages/botProject/BotLanguage.tsx

@@ -12,14 +12,13 @@ import { FontSizes, FontWeights } from 'office-ui-fabric-react/lib/Styling';
 import { NeutralColors, SharedColors } from '@uifabric/fluent-theme';
 
 import { dispatcherState, settingsState } from '../../recoilModel';
-import { CollapsableWrapper } from '../../components/CollapsableWrapper';
 import { languageListTemplates } from '../../components/MultiLanguage';
 import { localeState, showAddLanguageModalState } from '../../recoilModel/atoms';
 import { AddLanguageModal } from '../../components/MultiLanguage';
 import { mergePropertiesManagedByRootBot } from '../../recoilModel/dispatchers/utils/project';
 import { rootBotProjectIdSelector } from '../../recoilModel/selectors/project';
 
-import { title, subtitle } from './styles';
+import { subtitle } from './styles';
 // -------------------- Styles -------------------- //
 
 const botLanguageContainerStyle = css`
@@ -152,51 +151,49 @@ export const BotLanguage: React.FC<BotLanguageProps> = (props) => {
 
   return (
     <Fragment>
-      <CollapsableWrapper title={formatMessage('Bot language')} titleStyle={title}>
-        <div css={botLanguageContainerStyle}>
-          <div css={subtitle}>
-            {formatMessage(
-              'List of languages that bot will be able to understand (User input) and respond to (Bot responses). To make this bot available in other languages, click ‘Manage bot languages’ to create a copy of the default language, and translate the content into the new language.'
-            )}
-          </div>
-          <div css={botLanguageFieldStyle}>
-            {languageListOptions.map((l) => (
-              <div key={l.key} css={languageRowContainer}>
-                {l.key === defaultLanguage && (
-                  <div css={languageTextStyle} data-testid={'defaultLanguage'}>
-                    {l.text}
-                    <span css={defaultLanguageTextStyle}> {formatMessage('DEFAULT LANGUAGE')}</span>
-                  </div>
-                )}
-                {l.key !== defaultLanguage && (
-                  <div css={languageItemContainer}>
-                    <div css={languageItem}>{l.text}</div>
-                    <div css={languageButtonContainer}>
-                      <ActionButton
-                        data-testid={'setDefaultLanguage'}
-                        styles={languageButton}
-                        onClick={(e) => setDefaultLanguage(l.key)}
-                      >
-                        {formatMessage('Set it as default language')}
-                      </ActionButton>
-                      <ActionButton
-                        data-testid={'remove'}
-                        styles={languageButton}
-                        onClick={() => deleteLanguages({ languages: [l.key], projectId: projectId })}
-                      >
-                        {formatMessage('Remove')}
-                      </ActionButton>
-                    </div>
+      <div css={botLanguageContainerStyle}>
+        <div css={subtitle}>
+          {formatMessage(
+            'List of languages that bot will be able to understand (User input) and respond to (Bot responses). To make this bot available in other languages, click ‘Manage languages’ to create a copy of the default language, and translate the content into the new language.'
+          )}
+        </div>
+        <div css={botLanguageFieldStyle}>
+          {languageListOptions.map((l) => (
+            <div key={l.key} css={languageRowContainer}>
+              {l.key === defaultLanguage && (
+                <div css={languageTextStyle} data-testid={'defaultLanguage'}>
+                  {l.text}
+                  <span css={defaultLanguageTextStyle}> {formatMessage('DEFAULT LANGUAGE')}</span>
+                </div>
+              )}
+              {l.key !== defaultLanguage && (
+                <div css={languageItemContainer}>
+                  <div css={languageItem}>{l.text}</div>
+                  <div css={languageButtonContainer}>
+                    <ActionButton
+                      data-testid={'setDefaultLanguage'}
+                      styles={languageButton}
+                      onClick={(e) => setDefaultLanguage(l.key)}
+                    >
+                      {formatMessage('Set it as default language')}
+                    </ActionButton>
+                    <ActionButton
+                      data-testid={'remove'}
+                      styles={languageButton}
+                      onClick={() => deleteLanguages({ languages: [l.key], projectId: projectId })}
+                    >
+                      {formatMessage('Remove')}
+                    </ActionButton>
                   </div>
-                )}
-              </div>
-            ))}
-          </div>
-          <ActionButton styles={manageBotLanguage} onClick={() => addLanguageDialogBegin(projectId, () => {})}>
-            {formatMessage('Manage bot languages')}
-          </ActionButton>
+                </div>
+              )}
+            </div>
+          ))}
         </div>
-      </CollapsableWrapper>
+        <ActionButton styles={manageBotLanguage} onClick={() => addLanguageDialogBegin(projectId, () => {})}>
+          {formatMessage('Manage bot languages')}
+        </ActionButton>
+      </div>
       <AddLanguageModal
         defaultLanguage={defaultLanguage}
         isOpen={showAddLanguageModal}

Composer/packages/client/src/pages/botProject/BotProjectInfo.tsx

@@ -24,14 +24,19 @@ const valueStyle = css`
 `;
 
 const headerStyle = css`
-  font-size: 16px;
+  font-size: 20px;
   font-weight: 600;
 `;
 
+const rootTextStyle = css`
+  color: gray;
+`;
+
 export const BotProjectInfo: React.FC<RouteComponentProps<{
-  projectId: string;
+  projectId?: string;
+  isRootBot?: boolean;
 }>> = (props) => {
-  const { projectId = '' } = props;
+  const { projectId = '', isRootBot = false } = props;
   const botProjects = useRecoilValue(localBotsDataSelector);
   const botProject = botProjects.find((b) => b.projectId === projectId);
   const readme = useRecoilValue(projectReadmeState(projectId));
@@ -40,17 +45,16 @@ export const BotProjectInfo: React.FC<RouteComponentProps<{
 
   return (
     <div>
-      <h3 css={headerStyle}>{formatMessage('Bot Details')}</h3>
+      <h3 css={headerStyle}>
+        {botProject?.name}
+        {isRootBot && <span css={rootTextStyle}> {formatMessage('(root)')}</span>}
+      </h3>
       <Stack tokens={{ childrenGap: 10 }}>
-        <StackItem>
-          <div css={labelStyle}>{formatMessage('Bot Name')}</div>
-          <div css={valueStyle}>{botProject?.name}</div>
-        </StackItem>
         <StackItem>
           <div css={labelStyle}>{formatMessage('File Location')}</div>
           <div css={valueStyle}>{location}</div>
         </StackItem>
-        <StackItem styles={{ root: { marginBottom: '10px' } }}>
+        <StackItem>
           <div css={labelStyle}>{formatMessage('Read Me')}</div>
           {readme && (
             <Fragment>

Composer/packages/client/src/pages/botProject/BotProjectSettings.tsx

@@ -146,8 +146,8 @@ const BotProjectSettings: React.FC<RouteComponentProps<{ projectId: string; skil
     const newbotProjectLinks: INavTreeItem[] = localBotProjects.map((b) => {
       return {
         id: b.projectId,
-        name: b.name,
-        ariaLabel: formatMessage('Bot'),
+        name: `${b.name} ${b.isRootBot ? formatMessage('(root)') : ''}`,
+        ariaLabel: formatMessage('bot'),
         url: createBotSettingUrl(rootBotProjectId ?? '', b.projectId),
         isRootBot: b.isRootBot,
       };