fix: minor UI bugs in provisioning and node modal

Composer/packages/client/src/components/CreationFlow/v2/CreateOptions.tsx

@@ -140,7 +140,7 @@ export function CreateOptionsV2(props: CreateOptionsProps) {
           downloadLink={'https://nodejs.org/en/download/'}
           downloadLinkText={formatMessage('Install Node.js')}
           text={formatMessage(
-            'Bot Framework Composer requires Node.js in order to create and run a new bot. Click “Install Node.js” to install the latest version'
+            'Bot Framework Composer requires Node.js in order to create and run a new bot. Click “Install Node.js” to install the latest version. You will need to restart Composer after installing Node.'
           )}
           title={formatMessage('Node.js required')}
           onDismiss={() => setShowNodeModal(false)}

extensions/azurePublish/src/components/ChooseProvisionAction.tsx

@@ -62,7 +62,7 @@ const InstructionDetails = styled.div`
 `;
 
 const ResourceTitle = styled(Stack)`
-  margin: 10px 0;
+  margin: 4px 0;
 `;
 
 const LearnMoreLink = styled(Link)`
@@ -139,28 +139,28 @@ const ImportActionContent = () => {
       </Summary>
       <Details>
         <ResourceTitle>
-          <Text>{formatMessage('Microsoft Application Registration')}</Text>
+          <Text>- {formatMessage('Microsoft Application Registration')}</Text>
         </ResourceTitle>
         <ResourceTitle>
-          <Text>{formatMessage('Azure Hosting')}</Text>
+          <Text>- {formatMessage('Azure Hosting')}</Text>
         </ResourceTitle>
         <ResourceTitle>
-          <Text>{formatMessage('Microsoft Bot Channels Registration')}</Text>
+          <Text>- {formatMessage('Microsoft Bot Channels Registration')}</Text>
         </ResourceTitle>
         <ResourceTitle>
-          <Text>{formatMessage('Azure Cosmos DB')}</Text>
+          <Text>- {formatMessage('Azure Cosmos DB')}</Text>
         </ResourceTitle>
         <ResourceTitle>
-          <Text>{formatMessage('Application Insights')}</Text>
+          <Text>- {formatMessage('Application Insights')}</Text>
         </ResourceTitle>
         <ResourceTitle>
-          <Text>{formatMessage('Azure Blob Storage')}</Text>
+          <Text>- {formatMessage('Azure Blob Storage')}</Text>
         </ResourceTitle>
         <ResourceTitle>
-          <Text>{formatMessage('Microsoft Language Understanding (LUIS)')}</Text>
+          <Text>- {formatMessage('Microsoft Language Understanding (LUIS)')}</Text>
         </ResourceTitle>
         <ResourceTitle>
-          <Text>{formatMessage('Microsoft QnA Maker')}</Text>
+          <Text>- {formatMessage('Microsoft QnA Maker')}</Text>
         </ResourceTitle>
       </Details>
       <LearnMoreLink href="https://aka.ms/composer-publish-bot#import-existing-azure-resources">

extensions/azurePublish/src/components/ChooseResourcesList.tsx

@@ -47,18 +47,18 @@ const ImageIconPlacholder = styled.div`
 
 const ItemText = styled(Text)`
   font-size: ${FluentTheme.fonts.mediumPlus.fontSize};
-  margin-left: 4px !important;
+  margin-left: 8px !important;
 `;
 
 const ItemTier = styled(Text)`
   font-size: ${FluentTheme.fonts.small.fontSize};
-  margin: 4px 0 0 22px;
+  margin: 4px 0 4px 24px;
   color: ${NeutralColors.gray130};
 `;
 
 const ItemDescription = styled(Text)`
   font-size: ${FluentTheme.fonts.medium.fontSize};
-  margin: 4px 2px 0 22px;
+  margin: 4px 2px 0 24px;
   color: ${NeutralColors.gray190};
   max-width: 500px;
 `;

extensions/azurePublish/src/components/ResourceGroupPicker.tsx

@@ -12,10 +12,10 @@ import { TooltipHost } from 'office-ui-fabric-react/lib/Tooltip';
 
 import { useDebounce } from './useDebounce';
 
-const stackStyles = { root: { marginBottom: '8px' } };
-const dropdownStyles = { root: { marginBottom: '8px' }, dropdown: { width: '100%' } };
+const stackStyles = { root: { marginBottom: '6px' } };
+const dropdownStyles = { root: { marginBottom: '6px' }, dropdown: { width: '75%' } };
 const itemIconStyles = { marginRight: '8px' };
-const newNameTextFileStyles = { root: { marginTop: '10px' } };
+const newNameTextFileStyles = { root: { marginTop: '10px', width: '75%' } };
 
 const getInfoIconStyle = (required) => {
   return {

extensions/azurePublish/src/components/azureProvisionDialog.tsx

@@ -86,6 +86,8 @@ const iconStyle = (required) => {
   };
 };
 
+const resourceFieldStyles = { root: { paddingBottom: '4px', width: '75%' } };
+
 const PageTypes = {
   ChooseAction: 'chooseAction',
   ConfigProvision: 'config',
@@ -99,14 +101,27 @@ const DialogTitle = {
     title: formatMessage('Configure resources to your publishing profile'),
     subText: formatMessage('How would you like to provision Azure resources to your publishing profile?'),
   },
-  CONFIG_RESOURCES: {
+  EDIT: {
     title: formatMessage('Import existing resources'),
     subText: formatMessage('Please provide your Publish Configuration'),
   },
   ADD_RESOURCES: {
     title: formatMessage('Add resources'),
-    subText: formatMessage(
-      'Your bot needs the following resources based on its capabilities. Select resources that you want to provision in your publishing profile.'
+
+    subText: formatMessage.rich(
+      'Your bot needs the following resources based on its capabilities. Select resources that you want to provision in your publishing profile. <a>Learn more</a>',
+      {
+        a: ({ children }) => (
+          <a
+            key="add-resource-learn-more"
+            href={'https://aka.ms/composer-publish-bot#create-new-azure-resources'}
+            rel="noopener noreferrer"
+            target="_blank"
+          >
+            {children}
+          </a>
+        ),
+      }
     ),
   },
   REVIEW: {
@@ -115,7 +130,7 @@ const DialogTitle = {
       'Please review the resources that will be created for your bot. Once these resources are provisioned, they will be available in your Azure portal.'
     ),
   },
-  EDIT: {
+  CONFIG_RESOURCES: {
     title: formatMessage('Configure resources'),
     subText: formatMessage('How you would like to provision your Azure resources to publish your bot?'),
   },
@@ -725,7 +740,7 @@ export const AzureProvisionDialog: React.FC = () => {
   const resourceGroupNames = resourceGroups?.map((r) => r.name) || [];
 
   const PageChooseAction = (
-    <div style={{ height: 'calc(100vh - 64px)' }}>
+    <div style={{ height: 'calc(100vh - 65px)' }}>
       <ChooseProvisionAction
         choice={formData.creationType}
         onChoiceChanged={(choice) => {
@@ -739,7 +754,7 @@ export const AzureProvisionDialog: React.FC = () => {
     <ScrollablePane
       data-is-scrollable="true"
       scrollbarVisibility={ScrollbarVisibility.auto}
-      style={{ height: 'calc(100vh - 64px)' }}
+      style={{ height: 'calc(100vh - 65px)' }}
     >
       <form style={{ width: '100%' }}>
         <Dropdown
@@ -751,7 +766,7 @@ export const AzureProvisionDialog: React.FC = () => {
           label={formatMessage('Azure Directory')}
           options={allTenants.map((t) => ({ key: t.tenantId, text: t.displayName }))}
           selectedKey={formData.tenantId}
-          styles={{ root: { paddingBottom: '8px' } }}
+          styles={resourceFieldStyles}
           onChange={(_e, o) => {
             updateFormData('tenantId', o.key as string);
           }}
@@ -766,7 +781,7 @@ export const AzureProvisionDialog: React.FC = () => {
           options={subscriptionOptions}
           placeholder={formatMessage('Select one')}
           selectedKey={formData.subscriptionId}
-          styles={{ root: { paddingBottom: '8px' } }}
+          styles={resourceFieldStyles}
           onChange={(_e, o) => {
             updateFormData('subscriptionId', o.key as string);
           }}
@@ -792,7 +807,7 @@ export const AzureProvisionDialog: React.FC = () => {
           errorMessage={errorHostName}
           label={formatMessage('Resource name')}
           placeholder={formatMessage('Name of your services')}
-          styles={{ root: { paddingBottom: '8px' } }}
+          styles={resourceFieldStyles}
           value={formData.hostname}
           onChange={newHostName}
           onRenderLabel={onRenderLabel}
@@ -804,7 +819,7 @@ export const AzureProvisionDialog: React.FC = () => {
           options={deployLocationsOption}
           placeholder={formatMessage('Select one')}
           selectedKey={formData.region}
-          styles={{ root: { paddingBottom: '8px' } }}
+          styles={resourceFieldStyles}
           onChange={updateCurrentLocation}
           onRenderLabel={onRenderLabel}
         />
@@ -815,6 +830,7 @@ export const AzureProvisionDialog: React.FC = () => {
           options={luisLocationsOption}
           placeholder={formatMessage('Select one')}
           selectedKey={formData.luisLocation}
+          styles={{ root: { width: '75%' } }}
           onChange={(e, o) => {
             updateFormData('luisLocation', o.key as string);
           }}
@@ -839,7 +855,7 @@ export const AzureProvisionDialog: React.FC = () => {
         <ScrollablePane
           data-is-scrollable="true"
           scrollbarVisibility={ScrollbarVisibility.auto}
-          style={{ height: 'calc(100vh - 64px)' }}
+          style={{ height: 'calc(100vh - 65px)' }}
         >
           <Stack>
             {requiredListItems.length > 0 && (
@@ -871,7 +887,7 @@ export const AzureProvisionDialog: React.FC = () => {
 
   const PageReview = (
     <Fragment>
-      <ScrollablePane scrollbarVisibility={ScrollbarVisibility.auto} style={{ height: 'calc(100vh - 64px)' }}>
+      <ScrollablePane scrollbarVisibility={ScrollbarVisibility.auto} style={{ height: 'calc(100vh - 65px)' }}>
         <DetailsList
           isHeaderVisible
           columns={reviewCols}

templates.json

@@ -1,9 +1,14 @@
 [
-  { "generatorName": "@microsoft/generator-bot-empty", "displayName": "Blank bot" },
+  { "generatorName": "@microsoft/generator-bot-empty", "displayName": "Empty Bot" },
   { "generatorName": "@microsoft/generator-bot-conversational-core", "displayName": "Basic conversational bot" },
   { "generatorName": "@microsoft/generator-bot-assistant-core", "displayName": "Basic assistant" },
-  { "generatorName": "@microsoft/generator-bot-enterprise-assistant", "displayName": "Enterprise assistant" },
+  { "generatorName": "@microsoft/generator-bot-enterprise-assistant", "displayName": "Enterprise Assistant Bot" },
   { "generatorName": "@microsoft/generator-bot-people", "displayName": "People" },
   { "generatorName": "@microsoft/generator-bot-calendar", "displayName": "Calendar" },
-  { "generatorName": "QnASample", "displayName": "QnAMaker bot" }
+  { "generatorName": "QnASample", "displayName": "QnAMaker bot" },
+  { "generatorName": "@microsoft/generator-bot-core-language", "displayName": "Core Bot with Language" },
+  { "generatorName": "@microsoft/generator-bot-core-qna", "displayName": "Core Bot with QnA Maker" },
+  { "generatorName": "@microsoft/generator-bot-core-assistant", "displayName": "Core Assistant Bot" },
+  { "generatorName": "@microsoft/generator-bot-enterprise-calendar", "displayName": "Enterprise Calendar Bot" },
+  { "generatorName": "@microsoft/generator-bot-enterprise-people", "displayName": "Enterprise People Bot" }
 ]