fix: 6566 Update provision handoff copy

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) => {
     <DialogWrapper
       dialogType={DialogTypes.ProvisionFlow}
       isOpen={!props.hidden}
-      subText={props.developerInstructions}
       title={props.title}
       onDismiss={props.onDismiss}
     >
+      {props.developerInstructions && (
+        <div style={{ paddingBottom: '16px', fontSize: FontSizes.size14 }}>
+          <Text>{props.developerInstructions}&nbsp;&nbsp;</Text>
+          {props.learnMoreLink && (
+            <Link href={props.learnMoreLink} target="_blank">
+              {formatMessage('Learn More')}
+            </Link>
+          )}
+        </div>
+      )}
       <div>
-        <Text style={{ fontWeight: 700 }}>{formatMessage('Instructions for your Azure admin:')}</Text>
+        <Text style={{ fontSize: FontSizes.size14, fontWeight: 600 }}>
+          {formatMessage('Instructions for your Azure admin')}
+        </Text>
         <IconButton
           ariaLabel={formatMessage('Copy Icon')}
           menuIconProps={{ iconName: 'Copy' }}
@@ -73,10 +86,12 @@ export const ProvisionHandoff = (props: ProvisionHandoffProps) => {
         />
       </div>
       <TextField
-        autoAdjustHeight
         multiline
         componentRef={textFieldRef}
-        styles={{ root: { marginTop: '10px' }, fieldGroup: { backgroundColor: '#f3f2f1' } }}
+        styles={{
+          root: { marginTop: '10px' },
+          fieldGroup: { height: '200px', backgroundColor: '#f3f2f1' },
+        }}
         value={props.handoffInstructions}
       />
       <DialogFooter>

extensions/azurePublish/src/components/azureProvisionDialog.tsx

@@ -320,7 +320,13 @@ export const AzureProvisionDialog: React.FC = () => {
     } --createLuisResource=${createLuisResource} --createLuisAuthoringResource=${createLuisAuthoringResource} --createCosmosDb=${createCosmosDb} --createStorage=${createStorage} --createAppInsights=${createAppInsights} --createQnAResource=${createQnAResource}`;
 
     const instructions = formatMessage(
-      'I am working on a Microsoft Bot Framework project, and I now require some Azure resources to be created. Please follow the instructions below to create these resources and provide them to me.\n\n1. Follow the instructions at the link below to run the provisioning command (seen below)\n2. Copy and paste the resulting JSON and securely share it with me.\n\nProvisoning Command:\n{command}\n\nDetailed instructions:\nhttps://aka.ms/how-to-complete-provision-handoff',
+      'I am working on a Microsoft Bot Framework project, and I now require some Azure resources to be created.' +
+        ' Please follow the instructions below to create these resources and provide them to me.\n\n' +
+        '1. Follow the instructions at the link below to run the provisioning command (seen below)\n' +
+        '2. Copy and paste the resulting JSON and securely share it with me.\n\n' +
+        'Provisoning Command:\n' +
+        '{command}\n\n' +
+        'Detailed instructions:\nhttps://aka.ms/how-to-complete-provision-handoff',
       { command: provisionComposer }
     );
 
@@ -1108,6 +1114,7 @@ export const AzureProvisionDialog: React.FC = () => {
         )}
         handoffInstructions={handoffInstructions}
         hidden={!showHandoff}
+        learnMoreLink="https://aka.ms/how-to-complete-provision-handoff"
         title={formatMessage('Share resource request')}
         onBack={() => {
           setShowHandoff(false);