diff --git a/Composer/packages/client/src/components/CreationFlow/v2/CreateOptions.tsx b/Composer/packages/client/src/components/CreationFlow/v2/CreateOptions.tsx index 1fac951953..cfe546777d 100644 --- a/Composer/packages/client/src/components/CreationFlow/v2/CreateOptions.tsx +++ b/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)} diff --git a/extensions/azurePublish/src/components/ChooseProvisionAction.tsx b/extensions/azurePublish/src/components/ChooseProvisionAction.tsx index 291216215d..054d2f7efe 100644 --- a/extensions/azurePublish/src/components/ChooseProvisionAction.tsx +++ b/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 = () => {
- {formatMessage('Microsoft Application Registration')} + - {formatMessage('Microsoft Application Registration')} - {formatMessage('Azure Hosting')} + - {formatMessage('Azure Hosting')} - {formatMessage('Microsoft Bot Channels Registration')} + - {formatMessage('Microsoft Bot Channels Registration')} - {formatMessage('Azure Cosmos DB')} + - {formatMessage('Azure Cosmos DB')} - {formatMessage('Application Insights')} + - {formatMessage('Application Insights')} - {formatMessage('Azure Blob Storage')} + - {formatMessage('Azure Blob Storage')} - {formatMessage('Microsoft Language Understanding (LUIS)')} + - {formatMessage('Microsoft Language Understanding (LUIS)')} - {formatMessage('Microsoft QnA Maker')} + - {formatMessage('Microsoft QnA Maker')}
diff --git a/extensions/azurePublish/src/components/ChooseResourcesList.tsx b/extensions/azurePublish/src/components/ChooseResourcesList.tsx index d369b0e2d8..d46b6f0698 100644 --- a/extensions/azurePublish/src/components/ChooseResourcesList.tsx +++ b/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; `; diff --git a/extensions/azurePublish/src/components/ResourceGroupPicker.tsx b/extensions/azurePublish/src/components/ResourceGroupPicker.tsx index 807366095d..85a6ab616a 100644 --- a/extensions/azurePublish/src/components/ResourceGroupPicker.tsx +++ b/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 { diff --git a/extensions/azurePublish/src/components/azureProvisionDialog.tsx b/extensions/azurePublish/src/components/azureProvisionDialog.tsx index b45538d025..1cb6262dc2 100644 --- a/extensions/azurePublish/src/components/azureProvisionDialog.tsx +++ b/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. Learn more', + { + a: ({ children }) => ( + + {children} + + ), + } ), }, 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 = ( -
+
{ @@ -739,7 +754,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 = () => { {requiredListItems.length > 0 && ( @@ -871,7 +887,7 @@ export const AzureProvisionDialog: React.FC = () => { const PageReview = ( - +