Merge branch 'master' into toanzian/acc-#1979

microsoft · Dec 9, 2019 · bfc461a · bfc461a
2 parents 710d634 + a106274
commit bfc461a
Show file tree

Hide file tree

Showing 7 changed files with 56 additions and 30 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -26,11 +26,15 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
   - [2009](https://github.com/microsoft/BotFramework-Emulator/pull/2009)
   - [2010](https://github.com/microsoft/BotFramework-Emulator/pull/2010)
   - [2012](https://github.com/microsoft/BotFramework-Emulator/pull/2012)
+  - [2013](https://github.com/microsoft/BotFramework-Emulator/pull/2013)
   - [2014](https://github.com/microsoft/BotFramework-Emulator/pull/2014)
   - [2015](https://github.com/microsoft/BotFramework-Emulator/pull/2015)
+  - [2016](https://github.com/microsoft/BotFramework-Emulator/pull/2016)
   - [2017](https://github.com/microsoft/BotFramework-Emulator/pull/2017)
+  - [2018](https://github.com/microsoft/BotFramework-Emulator/pull/2018)
   - [2019](https://github.com/microsoft/BotFramework-Emulator/pull/2019)
   - [2020](https://github.com/microsoft/BotFramework-Emulator/pull/2020)
+  - [2021](https://github.com/microsoft/BotFramework-Emulator/pull/2021)
 
 - [main] Increased ngrok spawn timeout to 15 seconds to be more forgiving to slower networks in PR [1998](https://github.com/microsoft/BotFramework-Emulator/pull/1998)
 

diff --git a/packages/app/client/src/ui/dialogs/connectServicePromptDialog/connectServicePromptDialog.tsx b/packages/app/client/src/ui/dialogs/connectServicePromptDialog/connectServicePromptDialog.tsx
@@ -114,13 +114,15 @@ export class ConnectServicePromptDialog extends Component<ConnectServicePromptDi
       <>
         <p role="presentation">
           {`Sign in to your Azure account to select the LUIS applications you'd like to associate with this bot. `}
-          <LinkButton linkRole={true} onClick={this.onLuisDocsClick}>
+          <LinkButton className={styles.dialogLink} linkRole={true} onClick={this.onLuisDocsClick}>
             Learn more about LUIS.
           </LinkButton>
         </p>
         <p role="presentation">
           {`Alternatively, you can `}
-          <LinkButton onClick={this.props.addServiceManually}>add a LUIS app manually</LinkButton>
+          <LinkButton className={styles.dialogLink} onClick={this.props.addServiceManually}>
+            add a LUIS app manually
+          </LinkButton>
           {` with the app ID, version, and authoring key.`}
         </p>
       </>
@@ -133,13 +135,13 @@ export class ConnectServicePromptDialog extends Component<ConnectServicePromptDi
         <p role="presentation">
           {'Sign in to your Azure account to select the QnA ' +
             "Maker knowledge bases you'd like to associate with this bot. "}
-          <LinkButton linkRole={true} onClick={this.onQnADocsClick}>
+          <LinkButton className={styles.dialogLink} linkRole={true} onClick={this.onQnADocsClick}>
             Learn more about QnA Maker.
           </LinkButton>
         </p>
         <p role="presentation">
           {`Alternatively, you can `}{' '}
-          <LinkButton onClick={this.props.addServiceManually}>
+          <LinkButton className={styles.dialogLink} onClick={this.props.addServiceManually}>
             connect to a QnA Maker knowledge base manually
           </LinkButton>
           {' with the app ID, version, and authoring key.'}
@@ -153,13 +155,15 @@ export class ConnectServicePromptDialog extends Component<ConnectServicePromptDi
       <>
         <p role="presentation">
           {`Sign in to your Azure account to select the Dispatch model you'd like to associate with this bot. `}
-          <LinkButton linkRole={true} onClick={this.onDispatchDocsClick}>
+          <LinkButton className={styles.dialogLink} linkRole={true} onClick={this.onDispatchDocsClick}>
             Learn more about Dispatch models.
           </LinkButton>
         </p>
         <p role="presentation">
           {`Alternatively, you can `}
-          <LinkButton onClick={this.props.addServiceManually}>connect to a Dispatch model manually</LinkButton>
+          <LinkButton className={styles.dialogLink} onClick={this.props.addServiceManually}>
+            connect to a Dispatch model manually
+          </LinkButton>
           {` with the app ID, version, and authoring key.`}
         </p>
       </>
@@ -172,13 +176,13 @@ export class ConnectServicePromptDialog extends Component<ConnectServicePromptDi
         <p role="presentation">
           {'Sign in to your Azure account to select the Azure Application ' +
             "Insights you'd like to associate with this bot. "}
-          <LinkButton linkRole={true} onClick={this.onAppInsightsClick}>
+          <LinkButton className={styles.dialogLink} linkRole={true} onClick={this.onAppInsightsClick}>
             Learn more about Azure Application Insights.
           </LinkButton>
         </p>
         <p role="presentation">
           {`Alternatively, you can `}
-          <LinkButton onClick={this.props.addServiceManually}>
+          <LinkButton className={styles.dialogLink} onClick={this.props.addServiceManually}>
             connect to a Azure Application Insights manually
           </LinkButton>
           {` with the app ID, version, and authoring key.`}
@@ -193,13 +197,15 @@ export class ConnectServicePromptDialog extends Component<ConnectServicePromptDi
         <p role="presentation">
           {'Sign in to your Azure account to select the Azure Storage ' +
             "accounts you'd like to associate with this bot. "}
-          <LinkButton linkRole={true} onClick={this.onAzureStorageDocsClick}>
+          <LinkButton className={styles.dialogLink} linkRole={true} onClick={this.onAzureStorageDocsClick}>
             Learn more about Azure Storage.
           </LinkButton>
         </p>
         <p role="presentation">
           {`Alternatively, you can `}
-          <LinkButton onClick={this.props.addServiceManually}>connect to a Azure Storage account manually.</LinkButton>
+          <LinkButton className={styles.dialogLink} onClick={this.props.addServiceManually}>
+            connect to a Azure Storage account manually.
+          </LinkButton>
         </p>
       </>
     );
@@ -211,13 +217,13 @@ export class ConnectServicePromptDialog extends Component<ConnectServicePromptDi
         <p role="presentation">
           {'Sign in to your Azure account to select the Azure Cosmos DB ' +
             "accounts you'd like to associate with this bot. "}
-          <LinkButton linkRole={true} onClick={this.onAzureCosmosDbDocsClick}>
+          <LinkButton className={styles.dialogLink} linkRole={true} onClick={this.onAzureCosmosDbDocsClick}>
             Learn more about Azure Cosmos DB.
           </LinkButton>
         </p>
         <p role="presentation">
           {`Alternatively, you can `}
-          <LinkButton onClick={this.props.addServiceManually}>
+          <LinkButton className={styles.dialogLink} onClick={this.props.addServiceManually}>
             connect to a Azure Cosmos DB account manually.
           </LinkButton>
         </p>

diff --git a/packages/app/client/src/ui/dialogs/dataCollectionDialog/dataCollectionDialog.tsx b/packages/app/client/src/ui/dialogs/dataCollectionDialog/dataCollectionDialog.tsx
@@ -56,7 +56,7 @@ export class DataCollectionDialog extends Component<DataCollectionDialogProps, {
         </p>
         <p>You can turn data collection on or off at any time in your Emulator Settings.</p>
         <p>
-          <LinkButton linkRole={true} onClick={this.onPrivacyLinkClick}>
+          <LinkButton className={styles.dialogLink} linkRole={true} onClick={this.onPrivacyLinkClick}>
             Privacy statement
           </LinkButton>
         </p>

diff --git a/packages/app/client/src/ui/dialogs/openBotDialog/openBotDialog.tsx b/packages/app/client/src/ui/dialogs/openBotDialog/openBotDialog.tsx
@@ -46,6 +46,8 @@ import * as React from 'react';
 import { ChangeEvent, Component, MouseEvent, ReactNode } from 'react';
 import { EmulatorMode } from '@bfemulator/sdk-shared';
 
+import * as dialogStyles from '../dialogStyles.scss';
+
 import * as openBotStyles from './openBotDialog.scss';
 
 export interface OpenBotDialogProps {
@@ -176,6 +178,7 @@ export class OpenBotDialog extends Component<OpenBotDialogProps, OpenBotDialogSt
             />
             <LinkButton
               ariaLabel="Learn more about Azure for US Government"
+              className={dialogStyles.dialogLink}
               linkRole={true}
               onClick={this.onEmulatorAzureGovDocsClick}
             >

diff --git a/packages/app/client/src/ui/editor/recentBotsList/recentBotsList.scss b/packages/app/client/src/ui/editor/recentBotsList/recentBotsList.scss
@@ -57,8 +57,8 @@
       color: var(--my-bots-entry-hover-color);
     }
 
-    .recent-bot-action-bar {
-      display: block;
+    .recent-bot-action-bar > button {
+      opacity: 1;
     }
   }
 
@@ -75,34 +75,45 @@
         text-decoration: underline;
       }
     }
+
+    &:focus ~ .recent-bot-action-bar > button {
+      opacity: 1;
+    }
   }
 }
 
 
 .recent-bot-action-bar {
   background-color: transparent;
-  display: none;
+  display: flex;
+  align-items: center;
   height: 100%;
+  width: auto;
   min-width: 16px;
   position: absolute;
   right: 0;
-  top: 2px;
-  width: auto;
+  top: 0;
+  padding-right: 4px;
 
   > button {
     border: 0;
     cursor: pointer;
-    height: 0;
+    height: 16px;
     padding: 0;
-    width: 0;
+    width: 16px;
+    background-color: transparent;
+    opacity: 0;
+
+    &:focus {
+      opacity: 1;
+    }
 
-    &:after {
-      color: var(--my-bots-entry-color);
-      content: "\2716";
-      font-size: 12px;
+    > span {
+      -webkit-mask: url('../../media/ic_close.svg');
+      display: block;
       height: 16px;
-      width: 8px;
-      margin-right: 8px;
+      width: 16px;
+      background-color: var(--my-bots-entry-color);
     }
   }
 }

diff --git a/packages/app/client/src/ui/editor/recentBotsList/recentBotsList.tsx b/packages/app/client/src/ui/editor/recentBotsList/recentBotsList.tsx
@@ -68,7 +68,9 @@ export class RecentBotsList extends Component<RecentBotsListProps, {}> {
                       {bot.path}
                     </TruncateText>
                     <div className={styles.recentBotActionBar}>
-                      <button data-index={index} onClick={this.onDeleteBotClick} />
+                      <button data-index={index} onClick={this.onDeleteBotClick}>
+                        <span />
+                      </button>
                     </div>
                   </li>
                 )

diff --git a/packages/app/client/src/ui/styles/themes/light.css b/packages/app/client/src/ui/styles/themes/light.css
@@ -42,8 +42,8 @@ html {
   /* sendbox */
   --webchat-sendbox-bg: var(--neutral-1);
   --webchat-sendbox-text: initial;
-  --webchat-buttons-color: var(--neutral-6);
-  --webchat-buttons-color-focus: var(--neutral-9);
+  --webchat-buttons-color: var(--neutral-10);
+  --webchat-buttons-color-focus: var(--neutral-12);
   --webchat-buttons-dictate: #BE1100;
 
   /* transcript overlays */
@@ -91,7 +91,7 @@ html {
   --input-bg: var(--neutral-1);
   --input-label-color: var(--neutral-14);
   --input-label-color-disabled: var(--neutral-10);
-  --input-border: 1px solid #C8C8C8;
+  --input-border: 1px solid var(--neutral-7);
   --input-border-focus: 2px solid #00BCF2;
   --input-border-error: 1px solid var(--error-outline);
   --input-placeholder-color: var(--neutral-9);