Merge branch 'master' into toanzian/state

CHANGELOG.md

@@ -15,6 +15,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - [client/main] Moved duplicate redux store code (actions / reducers / helpers) to `app/shared` package in PR [2060](https://github.com/microsoft/BotFramework-Emulator/pull/2060)
 - [client] Fixed an issue where trying to add a QnA KB manually after signing into Azure was causing the app to crash in PR [2066](https://github.com/microsoft/BotFramework-Emulator/pull/2066)
 - [client] Removed buble background on attachments [2067](https://github.com/microsoft/BotFramework-Emulator/pull/2067)
+- [client] Fixed an issue where the themes menu was empty on Windows & Linux in PR [2069](https://github.com/microsoft/BotFramework-Emulator/pull/2069)
 
 ## Removed
 - [client/main] Removed legacy payments code in PR [2058](https://github.com/microsoft/BotFramework-Emulator/pull/2058)

packages/app/client/src/ui/editor/emulator/parts/chat/chat.scss

@@ -31,6 +31,8 @@
 // WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
 //
 
+:export { bubbleContentColor: var(--bubble-text-color); }
+
 .chat {
   background-color: white;
   display: flex;

packages/app/client/src/ui/editor/emulator/parts/chat/chat.scss.d.ts

@@ -1,4 +1,5 @@
 // This is a generated file. Changes are likely to result in being overwritten
+export const bubbleContentColor: string;
 export const chat: string;
 export const disconnected: string;
 export const chatActivity: string;

packages/app/client/src/ui/editor/emulator/parts/chat/chat.spec.tsx

@@ -55,6 +55,12 @@ import webChatStyleOptions from './webChatTheme';
 import { ChatContainer } from './chatContainer';
 import { ChatProps, Chat } from './chat';
 
+jest.mock('./chat.scss', () => ({
+  get bubbleContentColor() {
+    return '#fff';
+  },
+}));
+
 jest.mock('electron', () => ({
   ipcMain: new Proxy(
     {},
@@ -155,6 +161,20 @@ describe('<ChatContainer />', () => {
         padding: '1px',
       };
 
+      styleSet.uploadAttachment = {
+        ...styleSet.uploadAttachment,
+        '& > .name, & > .size': {
+          color: '#fff',
+        },
+      };
+
+      const mutatedDownloadAttachment = {
+        ...styleSet.downloadAttachment,
+      };
+      mutatedDownloadAttachment['& > a']['& > .details']['& > .name'].color = '#fff';
+      mutatedDownloadAttachment['& > a']['& > .icon'].fill = '#fff';
+      styleSet.downloadAttachment = mutatedDownloadAttachment;
+
       expect(webChat.exists()).toBe(true);
       const wcProps = webChat.props();
       expect(wcProps.bot).toEqual({ id: defaultDocument.botId, name: 'Bot' });

packages/app/client/src/ui/editor/emulator/parts/chat/chat.tsx

@@ -65,6 +65,19 @@ interface ChatState {
   highlightedActivities?: Activity[];
 }
 
+const updateDownloadAttachmentStyle = downloadAttachment => {
+  try {
+    const mutatedDownloadAttachment = {
+      ...downloadAttachment,
+    };
+    mutatedDownloadAttachment['& > a']['& > .details']['& > .name'].color = styles.bubbleContentColor;
+    mutatedDownloadAttachment['& > a']['& > .icon'].fill = styles.bubbleContentColor;
+    return mutatedDownloadAttachment;
+  } catch {
+    return downloadAttachment;
+  }
+};
+
 export class Chat extends PureComponent<ChatProps, ChatState> {
   public state = { waitForSpeechToken: false } as ChatState;
   private activityMap: { [activityId: string]: Activity } = {};
@@ -87,10 +100,18 @@ export class Chat extends PureComponent<ChatProps, ChatState> {
 
     const styleSet = createStyleSet({ ...webChatStyleOptions, hideSendBox: isDisabled });
 
+    // Overriding default styles of webchat as these properties are not exposed directly
     styleSet.uploadButton = {
       ...styleSet.uploadButton,
       padding: '1px',
     };
+    styleSet.uploadAttachment = {
+      ...styleSet.uploadAttachment,
+      '& > .name, & > .size': {
+        color: styles.bubbleContentColor,
+      },
+    };
+    styleSet.downloadAttachment = updateDownloadAttachmentStyle(styleSet.downloadAttachment);
 
     if (directLine) {
       const bot = {
@@ -146,10 +167,19 @@ export class Chat extends PureComponent<ChatProps, ChatState> {
         popup.location.href = url;
         break;
       }
+
       case 'downloadFile':
+      //Fall through
+
       case 'playAudio':
+      //Fall through
+
       case 'playVideo':
+      //Fall through
+
       case 'showImage':
+      //Fall through
+
       case 'openUrl':
         if (value) {
           this.props.showOpenUrlDialog(value).then(result => {

packages/app/client/src/ui/editor/emulator/parts/chat/webChatTheme.ts

@@ -38,6 +38,7 @@ export default {
   primaryFont: 'var(--default-font-family)',
 
   bubbleBackground: 'var(--webchat-bubble-bg)',
+  bubbleFromUserBackground: 'var(--webchat-user-bubble-bg)',
   bubbleFromUserTextColor: 'var(--webchat-user-bubble-text)',
   bubbleTextColor: 'var(--webchat-bubble-text)',
   bubbleMinHeight: 20,

packages/app/client/src/ui/editor/ngrokDebugger/ngrokStatusIndicator.scss

@@ -15,7 +15,7 @@
   %common-tunnel-indicator {
     margin-right: 3px;
     padding: 5px;
-    color: var(--focused-list-item);
+    color: var(--ngrok-text-color);
   }
 
   .tunnel-details-list {

packages/app/client/src/ui/shell/appMenu/appMenu.spec.tsx

@@ -112,11 +112,25 @@ describe('<AppMenu />', () => {
       ...instance.props,
       activeBot: undefined,
       activeDocumentType: SharedConstants.ContentTypes.CONTENT_TYPE_WELCOME_PAGE,
+      availableThemes: [
+        { name: 'Light', href: '' },
+        { name: 'Dark', href: '' },
+        { name: 'High contrast', href: '' },
+      ],
+      currentTheme: 'Light',
+      recentBots: [
+        { displayName: 'bot1', path: 'path1' },
+        { displayName: 'bot2', path: 'path2' },
+        { displayName: 'bot3', path: 'path3' },
+        { displayName: 'bot4', path: 'path4' },
+      ],
     };
     const menuTemplate = (instance as any).updateMenu(AppMenuTemplate.template);
 
     expect(Object.keys(menuTemplate)).toHaveLength(6);
+    expect(menuTemplate['file'][3].items.length).toBe(4); // recent bots menu should be populated
     expect(menuTemplate['file'][7].disabled).toBe(true); // "Close tab" should be disabled
+    expect(menuTemplate['file'][14].items.length).toBe(3); // themes menu should be populated
     expect(menuTemplate['conversation'][0].disabled).toBe(true); // send activity menu should be disabled on welcome page
   });
 

packages/app/client/src/ui/shell/appMenu/appMenu.tsx

@@ -86,7 +86,7 @@ export class AppMenu extends React.Component<AppMenuProps, {}> {
 
   private updateMenu(template: { [key: string]: MenuItem[] }): { [key: string]: MenuItem[] } {
     const fileMenu = template['file'];
-    fileMenu[12].items = this.getThemeMenuItems();
+    fileMenu[14].items = this.getThemeMenuItems();
     fileMenu[3].items = this.getRecentBotsMenuItems();
     // disable / enable "Close tab" button
     fileMenu[7].disabled = !this.props.activeBot;

packages/app/client/src/ui/styles/themes/dark.css

@@ -297,6 +297,10 @@ html {
   --ngrok-active: #47B07F;
   --ngrok-error: #BE1100;
   --ngrok-error-outline: #F5B1B1;
+  --ngrok-text-color: #fff;
+
+  /* Webchat style overrides */
+  --bubble-text-color: #fff;
 }
 
 .dialog {

packages/app/client/src/ui/styles/themes/high-contrast.css

@@ -294,6 +294,10 @@ html {
   --ngrok-active: #47B07F;
   --ngrok-error: #BE1100;
   --ngrok-error-outline: #F5B1B1;
+  --ngrok-text-color: #000000;
+
+  /* Webchat style overrides */
+  --bubble-text-color: #000000;
 }
 
 .dialog .ms-Button-label {

packages/app/client/src/ui/styles/themes/light.css

@@ -297,4 +297,8 @@ html {
   --ngrok-active: #47B07F;
   --ngrok-error: #BE1100;
   --ngrok-error-outline: #F5B1B1;
+  --ngrok-text-color: #fff;
+
+  /* Webchat style overrides */
+  --bubble-text-color: #fff;
 }