fix: UI bugs in provisioning

Composer/packages/client/src/pages/botProject/create-publish-profile/PublishProfileDialog.tsx

@@ -47,7 +47,7 @@ export const PublishProfileDialog: React.FC<PublishProfileDialogProps> = (props)
   const { provisionToTarget, addNotification } = useRecoilValue(dispatcherState);
 
   const [dialogTitle, setTitle] = useState({
-    title: current ? formatMessage('Edit a publishing profile') : formatMessage('Add a publishing profile'),
+    title: current ? formatMessage('Edit a publishing profile') : formatMessage('Add new publishing profile'),
     subText: formatMessage('A publishing profile provides the secure connectivity required to publish your bot. '),
   });
 
@@ -81,7 +81,7 @@ export const PublishProfileDialog: React.FC<PublishProfileDialogProps> = (props)
     PluginAPI.publish.onBack = () => {
       setPage(Page.ProfileForm);
       setTitle({
-        title: current ? formatMessage('Edit a publishing profile') : formatMessage('Add a publishing profile'),
+        title: current ? formatMessage('Edit a publishing profile') : formatMessage('Add new publishing profile'),
         subText: formatMessage('A publishing profile provides the secure connectivity required to publish your bot. '),
       });
     };

Composer/packages/client/src/pages/publish/PublishDialog.tsx

@@ -49,8 +49,8 @@ export const PublishDialog = (props) => {
       name: formatMessage('Comments'),
       className: 'comment',
       fieldName: 'comment',
-      minWidth: 70,
-      maxWidth: 90,
+      minWidth: 200,
+      maxWidth: 290,
       data: 'string',
       onRender: (item: BotStatus) => {
         // message for each publish bot

extensions/azurePublish/src/components/ChooseProvisionAction.tsx

@@ -28,6 +28,7 @@ const ChoicesPane = styled.div`
 const ContentPane = styled(Stack)`
   border-left: 1px solid ${NeutralColors.gray30};
   height: 100%;
+  overflow-y: auto;
 `;
 
 const Content = styled(Stack)`
@@ -74,14 +75,15 @@ const LearnMoreLink = styled(Link)`
 const CreateActionContent = () => {
   return (
     <Content>
-      <Title>{formatMessage('Create New Resources')}</Title>
       <Summary>
         <Text>
           {formatMessage(
             'Select this option when you want to provision new Azure resources and publish a bot. A subscription to '
           )}
         </Text>
-        <LearnMoreLink href="https://azure.microsoft.com/free/">{formatMessage('Microsoft Azure')}</LearnMoreLink>
+        <LearnMoreLink href="https://aka.ms/azureSignUpPage" target="_blank">
+          {formatMessage('Microsoft Azure')}
+        </LearnMoreLink>
         <Text>{formatMessage(' is required.')}</Text>
       </Summary>
       <Details>
@@ -112,7 +114,7 @@ const CreateActionContent = () => {
           </InstructionDetails>
         </Instruction>
       </Details>
-      <LearnMoreLink href="https://aka.ms/composer-publish-bot#create-new-azure-resources">
+      <LearnMoreLink href="https://aka.ms/composer-publish-bot#create-new-azure-resources" target="_blank">
         {formatMessage('Learn More')}
       </LearnMoreLink>
     </Content>

extensions/azurePublish/src/components/azureProvisionDialog.tsx

@@ -96,12 +96,12 @@ const PageTypes = {
 
 const DialogTitle = {
   CHOOSE_ACTION: {
-    title: formatMessage('Configure resources'),
+    title: formatMessage('Configure resources to your publishing profile'),
     subText: formatMessage('How you would like to provision Azure resources to your publishing profile?'),
   },
   CONFIG_RESOURCES: {
-    title: formatMessage('Configure resources'),
-    subText: formatMessage('How you would like to provision your Azure resources to publish your bot?'),
+    title: formatMessage('Import existing resources'),
+    subText: formatMessage('Please provide your Publish Configuration'),
   },
   ADD_RESOURCES: {
     title: formatMessage('Add resources'),
@@ -725,18 +725,14 @@ export const AzureProvisionDialog: React.FC = () => {
   const resourceGroupNames = resourceGroups?.map((r) => r.name) || [];
 
   const PageChooseAction = (
-    <ScrollablePane
-      data-is-scrollable="true"
-      scrollbarVisibility={ScrollbarVisibility.auto}
-      style={{ height: 'calc(100vh - 64px)' }}
-    >
+    <div style={{ height: 'calc(100vh - 64px)' }}>
       <ChooseProvisionAction
         choice={formData.creationType}
         onChoiceChanged={(choice) => {
           updateFormData('creationType', choice);
         }}
       />
-    </ScrollablePane>
+    </div>
   );
 
   const PageFormConfig = (
@@ -941,6 +937,13 @@ export const AzureProvisionDialog: React.FC = () => {
                 }
               }}
             />
+            <DefaultButton
+              style={{ margin: '0 4px' }}
+              text={formatMessage('Cancel')}
+              onClick={() => {
+                closeDialog();
+              }}
+            />
           </div>
         </div>
       );
@@ -1052,6 +1055,13 @@ export const AzureProvisionDialog: React.FC = () => {
                 }
               }}
             />
+            <DefaultButton
+              style={{ margin: '0 4px' }}
+              text={formatMessage('Cancel')}
+              onClick={() => {
+                closeDialog();
+              }}
+            />
           </div>
         </div>
       );
@@ -1100,17 +1110,24 @@ export const AzureProvisionDialog: React.FC = () => {
         <>
           <DefaultButton
             style={{ margin: '0 4px' }}
-            text={formatMessage('Cancel')}
+            text={formatMessage('Back')}
             onClick={() => {
-              closeDialog();
+              setPageAndTitle(PageTypes.ChooseAction);
             }}
           />
           <PrimaryButton
             disabled={isEditorError}
             style={{ margin: '0 4px' }}
-            text={formatMessage('Save')}
+            text={formatMessage('Import')}
             onClick={onSave}
           />
+          <DefaultButton
+            style={{ margin: '0 4px' }}
+            text={formatMessage('Cancel')}
+            onClick={() => {
+              closeDialog();
+            }}
+          />
         </>
       );
     }