From f6d0aca413c71643c7240c1b0e18f31c2f838d71 Mon Sep 17 00:00:00 2001 From: GeoffCoxMSFT Date: Tue, 13 Apr 2021 12:29:52 -0700 Subject: [PATCH 01/12] fix: 6566 Update provision handoff copy --- .../ProvisionHandoff/ProvisionHandoff.tsx | 23 +++++++++++++++---- .../src/components/azureProvisionDialog.tsx | 14 ++++++++--- 2 files changed, 30 insertions(+), 7 deletions(-) diff --git a/Composer/packages/lib/ui-shared/src/components/ProvisionHandoff/ProvisionHandoff.tsx b/Composer/packages/lib/ui-shared/src/components/ProvisionHandoff/ProvisionHandoff.tsx index 2027abab73..33ebcbbd7f 100644 --- a/Composer/packages/lib/ui-shared/src/components/ProvisionHandoff/ProvisionHandoff.tsx +++ b/Composer/packages/lib/ui-shared/src/components/ProvisionHandoff/ProvisionHandoff.tsx @@ -11,12 +11,14 @@ import { IconButton } from 'office-ui-fabric-react/lib/components/Button'; import { FontSizes, NeutralColors } from '@uifabric/fluent-theme/lib/fluent'; import { useRef } from 'react'; import { ITextField, TextField } from 'office-ui-fabric-react/lib/components/TextField'; +import { Link } from 'office-ui-fabric-react/lib/Link'; import { DialogTypes, DialogWrapper } from '../DialogWrapper'; type ProvisionHandoffProps = { title: string; developerInstructions: string; + learnMoreLink?: string; handoffInstructions: string; hidden: boolean; onBack: () => void; @@ -43,12 +45,23 @@ export const ProvisionHandoff = (props: ProvisionHandoffProps) => { + {props.developerInstructions && ( +
+ {props.developerInstructions}   + {props.learnMoreLink && ( + + {formatMessage('Learn More')} + + )} +
+ )}
- {formatMessage('Instructions for your Azure admin:')} + + {formatMessage('Instructions for your Azure admin')} + { />
diff --git a/extensions/azurePublish/src/components/azureProvisionDialog.tsx b/extensions/azurePublish/src/components/azureProvisionDialog.tsx index e3865830b6..8a943edfd6 100644 --- a/extensions/azurePublish/src/components/azureProvisionDialog.tsx +++ b/extensions/azurePublish/src/components/azureProvisionDialog.tsx @@ -326,7 +326,12 @@ export const AzureProvisionDialog: React.FC = () => { `; const instructions = formatMessage( - 'A hosting environment and some Azure cognitive services are required for this bot project to be published. You can find instructions for creating the necessary resources and communicating them back to me at the link below: \n\nSOME LINK GOES HERE\n\nIn addition, here is a customized command that you can use to automatically create the required resources:\n\n {command}', + '1. Run the following command and provision Azure resources on my behalf.\n' + + '2. Copy and paste the output JSON file, and securely share with me.\n\n' + + 'PROVISIONING COMMAND\n' + + '{command}' + + '\n\n' + + 'Learn more: https://aka.ms/how-to-complete-provision-handoff', { command: provisionComposer } ); @@ -1102,10 +1107,13 @@ export const AzureProvisionDialog: React.FC = () => { return ( diff --git a/extensions/azurePublish/src/components/ResourceGroupPicker.tsx b/extensions/azurePublish/src/components/ResourceGroupPicker.tsx index 85a6ab616a..00a8105b17 100644 --- a/extensions/azurePublish/src/components/ResourceGroupPicker.tsx +++ b/extensions/azurePublish/src/components/ResourceGroupPicker.tsx @@ -7,29 +7,13 @@ import { Dropdown, IDropdownOption } from 'office-ui-fabric-react/lib/Dropdown'; import { Icon } from 'office-ui-fabric-react/lib/Icon'; import { Stack } from 'office-ui-fabric-react/lib/Stack'; import { TextField } from 'office-ui-fabric-react/lib/TextField'; -import { FluentTheme } from '@uifabric/fluent-theme'; -import { TooltipHost } from 'office-ui-fabric-react/lib/Tooltip'; import { useDebounce } from './useDebounce'; const stackStyles = { root: { marginBottom: '6px' } }; -const dropdownStyles = { root: { marginBottom: '6px' }, dropdown: { width: '75%' } }; +const dropdownStyles = { root: { marginBottom: '6px' }, dropdown: { width: '300px' } }; const itemIconStyles = { marginRight: '8px' }; -const newNameTextFileStyles = { root: { marginTop: '10px', width: '75%' } }; - -const getInfoIconStyle = (required) => { - return { - root: { - selectors: { - '&::before': { - content: required ? " '*'" : '', - color: FluentTheme.palette.red, - paddingRight: 3, - }, - }, - }, - }; -}; +const newNameTextFileStyles = { root: { marginTop: '10px', width: '300px' } }; const CREATE_NEW_KEY = 'CREATE_NEW'; @@ -70,31 +54,6 @@ type Props = { onChange: (choice: ResourceGroupItemChoice) => void; }; -const onRenderLabel = (props) => { - return ( -
-
- {` ${props.label} `} -
- - - -
- ); -}; - export const ResourceGroupPicker = ({ disabled, resourceGroupNames, @@ -170,12 +129,7 @@ export const ResourceGroupPicker = ({ return ( {isNew && ( { setNewName(val || ''); }} - onRenderLabel={onRenderLabel} /> )} diff --git a/extensions/azurePublish/src/components/azureProvisionDialog.tsx b/extensions/azurePublish/src/components/azureProvisionDialog.tsx index 72c4e259c7..7810699135 100644 --- a/extensions/azurePublish/src/components/azureProvisionDialog.tsx +++ b/extensions/azurePublish/src/components/azureProvisionDialog.tsx @@ -34,10 +34,15 @@ import { SelectionMode, Stack, Text, + FontWeights, + FontSizes, + Label, + IStackTokens, + IStackItemStyles, + Link, } from 'office-ui-fabric-react'; import { MessageBar, MessageBarType } from 'office-ui-fabric-react/lib/MessageBar'; import { JsonEditor } from '@bfc/code-editor'; -import { SharedColors } from '@uifabric/fluent-theme'; import { ResourceGroup } from '@azure/arm-resources/esm/models'; import sortBy from 'lodash/sortBy'; @@ -75,27 +80,46 @@ const AddResourcesSectionName = styled(Text)` font-size: ${FluentTheme.fonts.mediumPlus.fontSize}; `; -const labelTooltipStyles = { +const ConfigureResourcesSectionName = styled(Text)` + font-size: ${FluentTheme.fonts.mediumPlus.fontSize}; + font-weight: ${FontWeights.semibold}; + margin-bottom: 4px; +`; + +const ConfigureResourcesSectionDescription = styled(Text)` + font-size: ${FluentTheme.fonts.medium.fontSize}; + line-height: ${FontSizes.size14}; + margin-bottom: 20px; +`; + +const configureResourcePropertyStackTokens: IStackTokens = { childrenGap: 5 }; + +const configureResourcePropertyLabelStackStyles: IStackItemStyles = { root: { - userSelect: 'none', + width: '200px', }, }; -const iconStyle = (required) => { - return { - root: { - selectors: { - '&::before': { - content: required ? " '*'" : '', - color: SharedColors.red10, - paddingRight: 3, - }, - }, - }, - }; +const ConfigureResourcesPropertyLabel = styled(Label)` + font-size: ${FluentTheme.fonts.medium.fontSize}; + font-weight: ${FontWeights.regular}; +`; + +const configureResourceDropdownStyles = { root: { paddingBottom: '4px', width: '300px' } }; + +const configureResourceTextFieldStyles = { root: { paddingBottom: '4px', width: '300px' } }; + +const configureResourcesIconStyle = { + root: { + color: NeutralColors.gray160, + userSelect: 'none', + }, }; -const resourceFieldStyles = { root: { paddingBottom: '4px', width: '75%' } }; +const LearnMoreLink = styled(Link)` + user-select: none; + font-size: 14px; +`; const PageTypes = { ChooseAction: 'chooseAction', @@ -141,36 +165,10 @@ const DialogTitle = { }, CONFIG_RESOURCES: { title: formatMessage('Configure resources'), - subText: formatMessage('How you would like to provision your Azure resources to publish your bot?'), + subText: '', }, }; -const onRenderLabel = (props) => { - return ( -
-
- {' '} - {props.label}{' '} -
- - - -
- ); -}; - const getResourceRegion = (item: ResourcesItem): string => { const { key, region } = item; switch (key) { @@ -295,6 +293,7 @@ export const AzureProvisionDialog: React.FC = () => { } = usePublishApi(); const telemetryClient: TelemetryClient = useTelemetryClient(); + // eslint-disable-next-line no-console console.log('TELEMETRY CLIENT', telemetryClient); const { setItem, getItem, clearAll } = useLocalStorage(); @@ -787,6 +786,14 @@ export const AzureProvisionDialog: React.FC = () => { ); + const renderPropertyInfoIcon = (tooltip: string) => { + return ( + + + + ); + }; + const PageFormConfig = ( { style={{ height: 'calc(100vh - 65px)' }} >
- ({ key: t.tenantId, text: t.displayName }))} - selectedKey={formData.tenantId} - styles={resourceFieldStyles} - onChange={(_e, o) => { - updateFormData('tenantId', o.key as string); - }} - onRenderLabel={onRenderLabel} - /> - { - updateFormData('subscriptionId', o.key as string); - }} - onRenderLabel={onRenderLabel} - /> - { - setIsNewResourceGroup(choice.isNew); - updateFormData('resourceGroup', choice.name); - setErrorResourceGroupName(choice.errorMessage); - }} - /> - - - { - updateFormData('luisLocation', o.key as string); - }} - /> + + Azure details + + Select your Azure directory and subscription, enter resource group name. + + + + + {formatMessage('Azure Directory')} + + {renderPropertyInfoIcon( + formatMessage( + 'Azure Active Directory is Microsoft’s cloud-based identity and access management service.' + ) + )} + + ({ key: t.tenantId, text: t.displayName }))} + selectedKey={formData.tenantId} + styles={configureResourceDropdownStyles} + onChange={(_e, o) => { + updateFormData('tenantId', o.key as string); + }} + /> + + + + + {formatMessage('Subscription')} + + {renderPropertyInfoIcon(formatMessage('The subscription that will be billed for the resources.'))} + + { + updateFormData('subscriptionId', o.key as string); + }} + /> + + + + + {formatMessage('Resource group')} + + {renderPropertyInfoIcon( + formatMessage( + 'A custom resource group name that you choose or create. Resource groups allow you to group Azure resources for access and management.' + ) + )} + + { + setIsNewResourceGroup(choice.isNew); + updateFormData('resourceGroup', choice.name); + setErrorResourceGroupName(choice.errorMessage); + }} + /> + + Resource details + + Enter resource name and select region. This will be applied to the new resources. + + + + {formatMessage('Name')} + {renderPropertyInfoIcon(formatMessage('A unique name for your resources.'))} + + + + + + {formatMessage('Region')} + {renderPropertyInfoIcon(formatMessage('The region where your resources and bot will be used.'))} + + + + + + + + {formatMessage('LUIS region')} + + {renderPropertyInfoIcon(formatMessage('The region associated with your Language understanding model.'))} + + + {formatMessage('Learn More')} + + + { + updateFormData('luisLocation', o.key as string); + }} + /> + +
); @@ -991,7 +1048,7 @@ export const AzureProvisionDialog: React.FC = () => { }} /> { // telemetryClient.track('ProvisionCancel'); @@ -1037,7 +1094,7 @@ export const AzureProvisionDialog: React.FC = () => { { onNext(formData.hostname); }} @@ -1058,6 +1115,13 @@ export const AzureProvisionDialog: React.FC = () => { onClick={onSave} /> )} + { + closeDialog(); + }} + /> ); @@ -1111,7 +1175,7 @@ export const AzureProvisionDialog: React.FC = () => { }} /> { // telemetryClient.track('ProvisionAddResourcesCancel'); @@ -1143,7 +1207,7 @@ export const AzureProvisionDialog: React.FC = () => { { const selectedResources = formData.requiredResources.concat(formData.enabledResources); onSubmit({ @@ -1158,6 +1222,13 @@ export const AzureProvisionDialog: React.FC = () => { }); }} /> + { + closeDialog(); + }} + /> ); @@ -1178,7 +1249,7 @@ export const AzureProvisionDialog: React.FC = () => { onClick={onSave} /> { closeDialog(); @@ -1226,7 +1297,15 @@ export const AzureProvisionDialog: React.FC = () => { closeDialog(); }} /> -
+
{page === PageTypes.ChooseAction && PageChooseAction} {page === PageTypes.ConfigProvision && PageFormConfig} From c1c56e38a263c2f6ca2ed548294a051ce6ffd67f Mon Sep 17 00:00:00 2001 From: GeoffCoxMSFT Date: Fri, 23 Apr 2021 12:25:27 -0700 Subject: [PATCH 09/12] Add formatMessages --- .../azurePublish/src/components/azureProvisionDialog.tsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/extensions/azurePublish/src/components/azureProvisionDialog.tsx b/extensions/azurePublish/src/components/azureProvisionDialog.tsx index 7810699135..e5b5de0cb8 100644 --- a/extensions/azurePublish/src/components/azureProvisionDialog.tsx +++ b/extensions/azurePublish/src/components/azureProvisionDialog.tsx @@ -804,7 +804,7 @@ export const AzureProvisionDialog: React.FC = () => { Azure details - Select your Azure directory and subscription, enter resource group name. + {formatMessage('Select your Azure directory and subscription, enter resource group name.')} @@ -870,9 +870,9 @@ export const AzureProvisionDialog: React.FC = () => { }} /> - Resource details + {formatMessage('Resource details')} - Enter resource name and select region. This will be applied to the new resources. + {formatMessage('Enter resource name and select region. This will be applied to the new resources.')} From b447b0778df7f174394c6c4afdd3d0f7fea317de Mon Sep 17 00:00:00 2001 From: GeoffCoxMSFT Date: Fri, 23 Apr 2021 12:27:43 -0700 Subject: [PATCH 10/12] formatMessage --- extensions/azurePublish/src/components/azureProvisionDialog.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/extensions/azurePublish/src/components/azureProvisionDialog.tsx b/extensions/azurePublish/src/components/azureProvisionDialog.tsx index e5b5de0cb8..71a45e958d 100644 --- a/extensions/azurePublish/src/components/azureProvisionDialog.tsx +++ b/extensions/azurePublish/src/components/azureProvisionDialog.tsx @@ -802,7 +802,7 @@ export const AzureProvisionDialog: React.FC = () => { >
- Azure details + {formatMessage('Azure details')} {formatMessage('Select your Azure directory and subscription, enter resource group name.')} From 2a973362e6b3d5e39c2baaf55bdd6bdddada00e8 Mon Sep 17 00:00:00 2001 From: GeoffCoxMSFT Date: Fri, 23 Apr 2021 12:48:55 -0700 Subject: [PATCH 11/12] Reverting cancel button spacing per design --- .../create-publish-profile/ProfileFormDialog.tsx | 2 +- .../src/components/azureProvisionDialog.tsx | 10 +++++----- 2 files changed, 6 insertions(+), 6 deletions(-) diff --git a/Composer/packages/client/src/pages/botProject/create-publish-profile/ProfileFormDialog.tsx b/Composer/packages/client/src/pages/botProject/create-publish-profile/ProfileFormDialog.tsx index 89978476ce..8cf7a33a16 100644 --- a/Composer/packages/client/src/pages/botProject/create-publish-profile/ProfileFormDialog.tsx +++ b/Composer/packages/client/src/pages/botProject/create-publish-profile/ProfileFormDialog.tsx @@ -128,7 +128,7 @@ export const ProfileFormDialog: React.FC = (props) => { onNext(); }} /> - + diff --git a/extensions/azurePublish/src/components/azureProvisionDialog.tsx b/extensions/azurePublish/src/components/azureProvisionDialog.tsx index 71a45e958d..ca3a7d8a28 100644 --- a/extensions/azurePublish/src/components/azureProvisionDialog.tsx +++ b/extensions/azurePublish/src/components/azureProvisionDialog.tsx @@ -1048,7 +1048,7 @@ export const AzureProvisionDialog: React.FC = () => { }} /> { // telemetryClient.track('ProvisionCancel'); @@ -1116,7 +1116,7 @@ export const AzureProvisionDialog: React.FC = () => { /> )} { closeDialog(); @@ -1175,7 +1175,7 @@ export const AzureProvisionDialog: React.FC = () => { }} /> { // telemetryClient.track('ProvisionAddResourcesCancel'); @@ -1223,7 +1223,7 @@ export const AzureProvisionDialog: React.FC = () => { }} /> { closeDialog(); @@ -1249,7 +1249,7 @@ export const AzureProvisionDialog: React.FC = () => { onClick={onSave} /> { closeDialog(); From aadd19f28af52e2a74a22a983eeb614ea9f748cc Mon Sep 17 00:00:00 2001 From: GeoffCoxMSFT Date: Mon, 26 Apr 2021 10:40:44 -0700 Subject: [PATCH 12/12] Added hostname default --- extensions/azurePublish/src/node/schema.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/extensions/azurePublish/src/node/schema.ts b/extensions/azurePublish/src/node/schema.ts index 853501b068..2e73bf34d6 100644 --- a/extensions/azurePublish/src/node/schema.ts +++ b/extensions/azurePublish/src/node/schema.ts @@ -144,6 +144,7 @@ const schema: JSONSchema7 = { name: '', environment: 'dev', tenantId: '', + hostname: '', runtimeIdentifier: 'win-x64', resourceGroup: '', botName: '',