fix: fit and finish across the app (microsoft#7598)

* Remove bot settings tool bar buttons * Change settings header string and remove subtext * Fix capitalization in settings tabs * More space between pivot menu and content--should be consistent on each tab * - Align content with pivot menu on left side - Max width of inputs and text 580x in all tabs * In all tables, headers should be semi-bold rather than bold * nix tool tip on start command * "Readme" instead of "Read Me" * Ensure padding at bottom of page * Tighten up horizontal spacing between columns in tables * Replacing routerLink with Link for consistent styling * Lower-case M in "Open manifest" * - Action item sub-text too small - Tighten space between action items more (between bottom of sub-text and title of next item) * Sub-titles should be semi-bold * - Align table with “Publish” (move to the right) * - "Publishing profile"--lowercase on profile * - Super long add button (microsoft#7491) * Table needs line under header * Edit and delete buttons are too small, too high * Align Target column content with header (move content right) * Tighten spacing between edit and delete buttons * "Learn more" move to top sentence after "...Microsoft Azure is required." and lowercase m * - Lowercase m * - Do we need description field? Can we remove it? - If so, maybe runtime type on right? - Inputs same width (370px?) - “Create new folder” under input * Design iteration changes with Em * add line under bot settings header * Almost there" bubb is the wrong component, should be the blue one * urther Tighten spacing between edit and delete buttons in publish view * DefineConversation: Button should say “Create” instead of OK * Move json switch to right side and make text smaller size * Fix existing resource terminology in service provision modal * microsoft#7578: increase width of publish profile dropdown * Auto close get started pane when bot controller callout is visible * fixing errors from merge * Fix unit test * removing unit test based on old link type * updating locale strings Co-authored-by: Soroush <[email protected]> Co-authored-by: Chris Whitten <[email protected]>
mdasmendel · May 5, 2021 · c3b8105 · c3b8105
1 parent c32060b
commit c3b8105
Show file tree

Hide file tree

Showing 31 changed files with 156 additions and 214 deletions.
diff --git a/Composer/packages/client/__tests__/components/CreationFlowV2/index.test.tsx b/Composer/packages/client/__tests__/components/CreationFlowV2/index.test.tsx
@@ -86,7 +86,7 @@ describe('<CreationFlowV2/>', () => {
     );
 
     navigate('create/dotnet/%40microsoft%2Fgenerator-bot-empty');
-    const node = await findByText('OK');
+    const node = await findByText('Create');
 
     act(() => {
       fireEvent.click(node);

diff --git a/Composer/packages/client/__tests__/pages/botProjectsSettings/AdapterSettings.test.tsx b/Composer/packages/client/__tests__/pages/botProjectsSettings/AdapterSettings.test.tsx
@@ -80,17 +80,6 @@ describe('ExternalAdapterSettings', () => {
     setSettingsMock.mockClear();
   });
 
-  it('renders a link to the package manager', () => {
-    const { getByText } = renderWithRecoilAndCustomDispatchers(
-      <ExternalAdapterSettings projectId={PROJECT_ID} />,
-      initRecoilState
-    );
-
-    const link = getByText(/from package manager/);
-
-    expect(link.attributes.getNamedItem('href')?.value).toContain('plugin/package-manager/package-manager');
-  });
-
   it('brings up the modal', () => {
     const { getByTestId, getByText, queryByTestId } = renderWithRecoilAndCustomDispatchers(
       <ExternalAdapterSettings projectId={PROJECT_ID} />,

diff --git a/Composer/packages/client/src/components/BotRuntimeController/publishDialog.tsx b/Composer/packages/client/src/components/BotRuntimeController/publishDialog.tsx
@@ -175,7 +175,7 @@ export const PublishDialog: React.FC<IPublishDialogProps> = (props) => {
         <br />
         {Text.LUISDEPLOY}
         <Link href={Links.LUIS} target="_blank">
-          {formatMessage('Learn more.')}
+          {formatMessage('Learn more')}
         </Link>
       </Fragment>
     );
@@ -187,7 +187,7 @@ export const PublishDialog: React.FC<IPublishDialogProps> = (props) => {
         <br />
         {Text.QNADEPLOY}
         <Link href={Links.QNA} target="_blank">
-          {formatMessage('Learn more.')}
+          {formatMessage('Learn more')}
         </Link>
       </Fragment>
     );

diff --git a/Composer/packages/client/src/components/CreationFlow/FileSelector.tsx b/Composer/packages/client/src/components/CreationFlow/FileSelector.tsx
@@ -527,17 +527,20 @@ export const FileSelector: React.FC<FileSelectorProps> = (props) => {
             label={formatMessage('Location')}
             options={breadcrumbItems}
             selectedKey={currentPath}
+            styles={{ root: { width: '420px' } }}
             onChange={updatePath}
             onPendingValueChanged={updatePathPending}
           />
-        </StackItem>
-        {operationMode.write && (
-          <StackItem align={'end'} styles={{ root: { marginBottom: 5 } }}>
-            <Link disabled={editMode !== EditMode.NONE} onClick={onCreateNewFolder}>
+          {operationMode.write && (
+            <Link
+              disabled={editMode !== EditMode.NONE}
+              styles={{ root: { marginTop: '5px' } }}
+              onClick={onCreateNewFolder}
+            >
               {formatMessage('Create new folder')}
             </Link>
-          </StackItem>
-        )}
+          )}
+        </StackItem>
       </Stack>
       <div css={detailListContainer} data-is-scrollable="true">
         <ScrollablePane scrollbarVisibility={ScrollbarVisibility.auto}>

diff --git a/Composer/packages/client/src/components/CreationFlow/v2/DefineConversation.tsx b/Composer/packages/client/src/components/CreationFlow/v2/DefineConversation.tsx
@@ -44,10 +44,9 @@ const textFieldlabel = {
 };
 
 const name = {
-  subComponentStyles: textFieldlabel,
-};
-
-const description = {
+  root: {
+    width: '420px',
+  },
   subComponentStyles: textFieldlabel,
 };
 
@@ -367,36 +366,26 @@ const DefineConversationV2: React.FC<DefineConversationProps> = (props) => {
                 onChange={(_e, val) => updateField('name', val)}
               />
             </StackItem>
-            <StackItem grow={0} styles={halfstack}>
-              <TextField
-                label={formatMessage('Description')}
-                resizable={false}
-                styles={description}
-                value={formData.description}
-                onChange={(_e, val) => updateField('description', val)}
-              />
-            </StackItem>
-          </Stack>
-          {!isImported && (
-            <Stack horizontal styles={stackinput} tokens={{ childrenGap: '2rem' }}>
+            {!isImported && (
               <StackItem grow={0} styles={halfstack}>
                 <Dropdown
                   data-testid="NewDialogRuntimeType"
                   label={formatMessage('Runtime type')}
                   options={getSupportedRuntimesForTemplate()}
                   selectedKey={formData.runtimeType}
+                  styles={{ root: { width: '420px' } }}
                   onChange={(_e, option) => updateField('runtimeType', option?.key.toString())}
                 />
               </StackItem>
-            </Stack>
-          )}
+            )}
+          </Stack>
           {locationSelectContent}
           <DialogFooter>
             <DefaultButton text={formatMessage('Cancel')} onClick={onDismiss} />
             <PrimaryButton
               data-testid="SubmitNewBotBtn"
               disabled={hasErrors || !writable}
-              text={templateId === QnABotTemplateId ? formatMessage('Next') : formatMessage('OK')}
+              text={templateId === QnABotTemplateId ? formatMessage('Next') : formatMessage('Create')}
               onClick={handleSubmit}
             />
           </DialogFooter>

diff --git a/Composer/packages/client/src/components/GetStarted/GetStartedTask.tsx b/Composer/packages/client/src/components/GetStarted/GetStartedTask.tsx
@@ -17,14 +17,14 @@ type TaskProps = {
 };
 
 const getStartedStepStyle = (disabled?: boolean) => css`
-  margin-bottom: 15px;
+  margin-bottom: 10px;
   pointer-events: ${disabled ? 'none' : 'auto'};
   opacity: ${disabled ? 0.4 : 1};
 `;
 
 const stepDescriptionStyle = css`
   margin-left: 36px;
-  font-size: 12px;
+  font-size: 14px;
   color: ${NeutralColors.gray120};
   margin-top: -4px;
 `;

diff --git a/Composer/packages/client/src/components/GetStarted/styles.ts b/Composer/packages/client/src/components/GetStarted/styles.ts
@@ -7,14 +7,14 @@ import { FontWeights } from 'office-ui-fabric-react/lib/Styling';
 export const h3Style = css`
   font-size: ${FontSizes.size14};
   margin-top: 24px;
-  font-weight: ${FontWeights.regular};
+  font-weight: ${FontWeights.semibold};
   margin-bottom: 4px;
 `;
 
 export const topH3Style = css`
   font-size: ${FontSizes.size14};
   margin-top: 12px;
-  font-weight: ${FontWeights.regular};
+  font-weight: ${FontWeights.semibold};
   margin-bottom: 4px;
 `;
 

diff --git a/Composer/packages/client/src/components/Header.tsx b/Composer/packages/client/src/components/Header.tsx
@@ -224,6 +224,12 @@ export const Header = () => {
     }
   }, [isWebChatPanelVisible]);
 
+  useEffect(() => {
+    if (!hideBotController && showGetStarted) {
+      setShowGetStarted(false);
+    }
+  }, [hideBotController]);
+
   const showUpdateAvailableIcon = status === AppUpdaterStatus.UPDATE_AVAILABLE && !showing;
 
   const languageListOptions = useMemo(() => {

diff --git a/Composer/packages/client/src/pages/botProject/AllowedCallers.tsx b/Composer/packages/client/src/pages/botProject/AllowedCallers.tsx
@@ -147,7 +147,7 @@ export const AllowedCallers: React.FC<Props> = ({ projectId }) => {
       <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>',
+          '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

diff --git a/Composer/packages/client/src/pages/botProject/AppIdAndPassword.tsx b/Composer/packages/client/src/pages/botProject/AppIdAndPassword.tsx
@@ -121,7 +121,7 @@ export const AppIdAndPassword: React.FC<AppIdAndPasswordProps> = (props) => {
       <div css={title}>{formatMessage('Microsoft App ID')}</div>
       <div css={subtext}>
         {formatMessage.rich(
-          'An App ID is used for communication between your bot and skills, services, websites or applications. Use an existing App ID or automatically generate an App ID when creating a publishing profile for this bot. <a>Learn more.</a>',
+          'An App ID is used for communication between your bot and skills, services, websites or applications. Use an existing App ID or automatically generate an App ID when creating a publishing profile for this bot. <a>Learn more</a>',
           {
             a: ({ children }) => (
               <Link key="app-id-settings-page" href={'https://aka.ms/composer-appid-learnmore'} target="_blank">

diff --git a/Composer/packages/client/src/pages/botProject/BotLanguage.tsx b/Composer/packages/client/src/pages/botProject/BotLanguage.tsx
@@ -18,7 +18,7 @@ import { AddLanguageModal } from '../../components/MultiLanguage';
 import { mergePropertiesManagedByRootBot } from '../../recoilModel/dispatchers/utils/project';
 import { rootBotProjectIdSelector } from '../../recoilModel/selectors/project';
 
-import { subtitle } from './styles';
+import { headerText } from './styles';
 // -------------------- Styles -------------------- //
 
 const botLanguageContainerStyle = css`
@@ -152,7 +152,7 @@ export const BotLanguage: React.FC<BotLanguageProps> = (props) => {
   return (
     <Fragment>
       <div css={botLanguageContainerStyle}>
-        <div css={subtitle}>
+        <div css={headerText}>
           {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.'
           )}

diff --git a/Composer/packages/client/src/pages/botProject/BotProjectInfo.tsx b/Composer/packages/client/src/pages/botProject/BotProjectInfo.tsx
@@ -26,6 +26,7 @@ const valueStyle = css`
 const headerStyle = css`
   font-size: 20px;
   font-weight: 600;
+  margin-top: 25px;
 `;
 
 const rootTextStyle = css`
@@ -61,12 +62,12 @@ export const BotProjectInfo: React.FC<RouteComponentProps<{
                 setReadmeHidden(false);
               }}
             >
-              {formatMessage('View readme')}
+              {formatMessage('View Readme')}
             </Link>
             <DisplayMarkdownDialog
               content={readme}
               hidden={readmeHidden}
-              title={formatMessage('Project readme')}
+              title={formatMessage('Project Readme')}
               onDismiss={() => {
                 setReadmeHidden(true);
               }}

diff --git a/Composer/packages/client/src/pages/botProject/BotProjectSettings.tsx b/Composer/packages/client/src/pages/botProject/BotProjectSettings.tsx
@@ -9,10 +9,9 @@ import formatMessage from 'format-message';
 import { RouteComponentProps } from '@reach/router';
 import { JsonEditor } from '@bfc/code-editor';
 import { Toggle } from 'office-ui-fabric-react/lib/Toggle';
-import { DialogSetting } from '@bfc/shared';
 import { defaultToolbarButtonStyles } from '@bfc/ui-shared';
+import { DialogSetting } from '@botframework-composer/types';
 
-import TelemetryClient from '../../telemetry/TelemetryClient';
 import { LoadingSpinner } from '../../components/LoadingSpinner';
 import { INavTreeItem } from '../../components/NavTree';
 import { Page } from '../../components/Page';
@@ -21,7 +20,6 @@ import { settingsState, userSettingsState } from '../../recoilModel/atoms';
 import { localBotsDataSelector, rootBotProjectIdSelector } from '../../recoilModel/selectors/project';
 import { createBotSettingUrl, navigateTo } from '../../utils/navigation';
 import { mergePropertiesManagedByRootBot } from '../../recoilModel/dispatchers/utils/project';
-import { usePVACheck } from '../../hooks/usePVACheck';
 
 import { openDeleteBotModal } from './DeleteBotButton';
 import { BotProjectSettingsTabView } from './BotProjectsSettingsTabView';
@@ -31,10 +29,9 @@ import { BotProjectSettingsTabView } from './BotProjectsSettingsTabView';
 const header = css`
   padding: 5px 20px;
   display: flex;
-  flex-direction: column;
-  flex-shrink: 0;
   justify-content: space-between;
   label: PageHeader;
+  border-bottom: 1px solid silver;
 `;
 
 const container = css`
@@ -54,75 +51,15 @@ const BotProjectSettings: React.FC<RouteComponentProps<{ projectId: string; skil
   const currentProjectId = skillId ?? projectId;
   const botProject = botProjects.find((b) => b.projectId === currentProjectId);
   const { deleteBot } = useRecoilValue(dispatcherState);
-  const isPVABot = usePVACheck(currentProjectId);
 
   const settings = useRecoilValue(settingsState(currentProjectId));
   const mergedSettings = mergePropertiesManagedByRootBot(currentProjectId, rootBotProjectId, settings);
 
   const [isAdvancedSettingsEnabled, setAdvancedSettingsEnabled] = useState<boolean>(false);
-
   const { setSettings } = useRecoilValue(dispatcherState);
 
-  const buttonClick = (link) => {
-    TelemetryClient.track('GettingStartedLinkClicked', { method: 'button', url: link });
-    navigateTo(link);
-  };
-
   const toolbarItems = useMemo(() => {
-    const linkToPackageManager = `/bot/${rootBotProjectId}/plugin/package-manager/package-manager`;
-    const linkToConnections = `/bot/${rootBotProjectId}/botProjectsSettings/#connections`;
-    const linkToLGEditor = `/bot/${rootBotProjectId}/language-generation`;
-    const linkToLUEditor = `/bot/${rootBotProjectId}/language-understanding`;
-
     return [
-      ...(!isPVABot
-        ? [
-            {
-              text: formatMessage('Add a package'),
-              type: 'action',
-              buttonProps: {
-                iconProps: { iconName: 'Package' },
-                onClick: () => buttonClick(linkToPackageManager),
-                styles: defaultToolbarButtonStyles,
-              },
-              align: 'left',
-            },
-          ]
-        : []),
-      {
-        text: formatMessage('Edit LG'),
-        type: 'action',
-        buttonProps: {
-          iconProps: { iconName: 'Robot' },
-          onClick: () => buttonClick(linkToLGEditor),
-          styles: defaultToolbarButtonStyles,
-        },
-        align: 'left',
-      },
-      {
-        text: formatMessage('Edit LU'),
-        type: 'action',
-        buttonProps: {
-          iconProps: { iconName: 'People' },
-          onClick: () => buttonClick(linkToLUEditor),
-          styles: defaultToolbarButtonStyles,
-        },
-        align: 'left',
-      },
-      ...(!isPVABot
-        ? [
-            {
-              text: formatMessage('Manage connections'),
-              type: 'action',
-              buttonProps: {
-                iconProps: { iconName: 'PlugConnected' },
-                onClick: () => buttonClick(linkToConnections),
-                styles: defaultToolbarButtonStyles,
-              },
-              align: 'left',
-            },
-          ]
-        : []),
       {
         text: formatMessage('Delete bot'),
         type: 'action',
@@ -161,9 +98,19 @@ const BotProjectSettings: React.FC<RouteComponentProps<{ projectId: string; skil
     return newbotProjectLinks;
   }, [botProjects]);
 
-  const onRenderHeaderContent = () => {
-    return formatMessage(
-      "Review and configure your bot's resources, and add new connections such as speech, Microsoft Teams and more."
+  const renderJsonToggle = (): JSX.Element => {
+    return (
+      <Toggle
+        inlineLabel
+        checked={isAdvancedSettingsEnabled}
+        className={'advancedSettingsView'}
+        defaultChecked={false}
+        label={formatMessage('Advanced Settings View (json)')}
+        styles={{ label: { fontSize: '12px', marginLeft: '8px' } }}
+        onChange={() => {
+          setAdvancedSettingsEnabled(!isAdvancedSettingsEnabled);
+        }}
+      />
     );
   };
 
@@ -195,20 +142,10 @@ const BotProjectSettings: React.FC<RouteComponentProps<{ projectId: string; skil
       shouldShowEditorError={false}
       title={formatMessage('Configure your bot')}
       toolbarItems={toolbarItems}
-      onRenderHeaderContent={onRenderHeaderContent}
+      onRenderHeaderContent={renderJsonToggle}
     >
       <Suspense fallback={<LoadingSpinner />}>
         <div css={container}>
-          <Toggle
-            inlineLabel
-            checked={isAdvancedSettingsEnabled}
-            className={'advancedSettingsView'}
-            defaultChecked={false}
-            label={formatMessage('Advanced Settings View (json)')}
-            onChange={() => {
-              setAdvancedSettingsEnabled(!isAdvancedSettingsEnabled);
-            }}
-          />
           {isAdvancedSettingsEnabled ? (
             <JsonEditor
               key={'settingsjson'}