Attachments background and fonts handled when WC will be bumped to 4.8 (#2088)

* Attachments background and fonts handled when WC will be bumped to

Signed-off-by: Srinaath Ravichandran <[email protected]>

* Changelogs updated

Author: srinaath

CHANGELOG.md

@@ -23,6 +23,8 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - [build] Changed one-click installer to assisted installer with new graphics. Also updated application icon in PR [2077](https://github.com/microsoft/BotFramework-Emulator/pull/2077)
 - [build] Locked `[email protected]` to avoid unecessary import linting changes in PR [2081](https://github.com/microsoft/BotFramework-Emulator/pull/2081)
 - [client] Thrown errors in client-side sagas will now be logged in their entirety to the dev tools console in PR [2087](https://github.com/microsoft/BotFramework-Emulator/pull/2087)
+- [client] Upload and download attachments bubble texts and background in webchat were hidden. The adjustments have been made to override FileContent class in PR [2088](https://github.com/microsoft/BotFramework-Emulator/pull/2088)
+
 
 ## 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

@@ -32,6 +32,7 @@
 //
 
 :export { bubbleContentColor: var(--bubble-text-color); }
+:export { bubbleBackground: var(--webchat-user-bubble-bg); }
 
 .chat {
   background-color: white;

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

@@ -1,5 +1,6 @@
 // This is a generated file. Changes are likely to result in being overwritten
 export const bubbleContentColor: string;
+export const bubbleBackground: 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

@@ -59,6 +59,9 @@ jest.mock('./chat.scss', () => ({
   get bubbleContentColor() {
     return '#fff';
   },
+  get bubbleBackground() {
+    return '#ff0000';
+  },
 }));
 
 jest.mock('electron', () => ({
@@ -156,24 +159,14 @@ describe('<ChatContainer />', () => {
       const webChat = wrapper.find(ReactWebChat);
       const styleSet = createStyleSet({ ...webChatStyleOptions });
 
-      styleSet.uploadButton = {
-        ...styleSet.uploadButton,
-        padding: '1px',
-      };
-
-      styleSet.uploadAttachment = {
-        ...styleSet.uploadAttachment,
-        '& > .name, & > .size': {
-          color: '#fff',
-        },
-      };
-
-      const mutatedDownloadAttachment = {
-        ...styleSet.downloadAttachment,
+      styleSet.fileContent = {
+        ...styleSet.fileContent,
+        background: '#ff0000',
+        '& .webchat__fileContent__badge': { padding: '4px' },
+        '& .webchat__fileContent__downloadIcon': { fill: '#fff' },
+        '& .webchat__fileContent__fileName': { color: '#fff' },
+        '& .webchat__fileContent__size': { color: '#fff' },
       };
-      mutatedDownloadAttachment['& > a']['& > .details']['& > .name'].color = '#fff';
-      mutatedDownloadAttachment['& > a']['& > .icon'].fill = '#fff';
-      styleSet.downloadAttachment = mutatedDownloadAttachment;
 
       expect(webChat.exists()).toBe(true);
       const wcProps = webChat.props();

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

@@ -65,19 +65,6 @@ 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 } = {};
@@ -101,17 +88,22 @@ 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': {
+    styleSet.fileContent = {
+      ...styleSet.fileContent,
+      background: styles.bubbleBackground,
+      '& .webchat__fileContent__fileName': {
         color: styles.bubbleContentColor,
       },
+      '& .webchat__fileContent__size': {
+        color: styles.bubbleContentColor,
+      },
+      '& .webchat__fileContent__downloadIcon': {
+        fill: styles.bubbleContentColor,
+      },
+      '& .webchat__fileContent__badge': {
+        padding: '4px',
+      },
     };
-    styleSet.downloadAttachment = updateDownloadAttachmentStyle(styleSet.downloadAttachment);
 
     if (directLine) {
       const bot = {