Make notification copyable (#518)

* Make notification copyable

* update css

* Address comment

Co-authored-by: Elsie Ju <jiacju@microsoft.com>

src/app/css/_notification.scss

@@ -102,3 +102,17 @@
     }
     height: 2px;
 }
+
+.notificationEntry-flexContainer {
+    display: flex;
+    flex-flow: row;
+}
+
+.notificationEntry-Ringer {
+    font-size: 18px;
+    padding-right: 5px;
+}
+
+.alignCenter {
+    align-self: center;
+}

src/app/devices/deviceEvents/reducers.ts

@@ -55,4 +55,4 @@ export const deviceEventsReducer = reducerWithInitialState<DeviceEventsStateInte
         return state.merge({
             payload: []
         });
-    });
+    });

src/app/notifications/components/__snapshots__/notificationListEntry.spec.tsx.snap

@@ -29,6 +29,27 @@ exports[`notificationListEntry matches snapshot 1`] = `
       test.
       <br />
     </div>
+    <div
+      className="notificationEntry-flexContainer"
+    >
+      <StyledLinkBase
+        onClick={[Function]}
+        style={
+          Object {
+            "flex": "5",
+          }
+        }
+      >
+        <Icon
+          className="notificationEntry-Ringer"
+          iconName="Ringer"
+        />
+        header.notifications.title
+      </StyledLinkBase>
+      <CopyButton
+        isFlex={true}
+      />
+    </div>
     <div
       className="time"
     />

src/app/notifications/components/notificationListEntry.tsx

@@ -5,10 +5,11 @@
 import * as React from 'react';
 import { useTranslation } from 'react-i18next';
 import { useLocation, useHistory } from 'react-router-dom';
-import { Icon, Announced, Link } from '@fluentui/react';
+import { Icon, Announced, Link, IconButton } from '@fluentui/react';
 import { Notification, NotificationType } from '../../api/models/notification';
 import { ROUTE_PARAMS, ROUTE_PARTS } from '../../constants/routes';
 import '../../css/_notification.scss';
+import { ResourceKeys } from '../../../localization/resourceKeys';
 
 export interface NotificationListEntryProps {
     notification: Notification;
@@ -20,6 +21,7 @@ export const NotificationListEntry: React.SFC<NotificationListEntryProps> = (pro
     const { notification } = props;
     const { pathname } = useLocation();
     const history = useHistory();
+    const calloutRef = React.createRef<HTMLDivElement>();
 
     const iconName = getIconName(notification.type);
     const iconColor = getIconColor(notification.type);
@@ -32,6 +34,22 @@ export const NotificationListEntry: React.SFC<NotificationListEntryProps> = (pro
         history.push(path);
     };
 
+    const copyToClipboard = () => {
+        navigator.clipboard.writeText(message);
+    };
+
+    const CopyButton = (buttonProps: { isFlex: boolean }): JSX.Element => {
+        return (
+            <IconButton
+                iconProps={{ iconName: 'copy' }}
+                title={t(ResourceKeys.header.notifications.copy)}
+                ariaLabel={t(ResourceKeys.header.notifications.copy)}
+                onClick={copyToClipboard}
+                style={buttonProps.isFlex ? {flex: '1'} : {}}
+            />
+        );
+    };
+
     return (
         <div className="notification-list-entry">
             {props.showAnnoucement && <Announced message={message}/>}
@@ -43,18 +61,31 @@ export const NotificationListEntry: React.SFC<NotificationListEntryProps> = (pro
                 {notification.title &&
                     <div className="title">{t(notification.title.translationKey, notification.title.translationOptions)}</div>
                 }
-                {pathname.endsWith(ROUTE_PARTS.NOTIFICATIONS) ? friendlyMessage :
+                {pathname.endsWith(ROUTE_PARTS.NOTIFICATIONS) ?
+                    <>
+                        {friendlyMessage}
+                        <div className="notificationEntry-flexContainer">
+                            <div className="time alignCenter">{notification.issued}</div>
+                            <CopyButton isFlex={false}/>
+                        </div>
+                    </> :
                     <>
                         {message?.length < longMessageLength ?
                             friendlyMessage :
                             <>
                                 <div className="message">{`${message.substring(0, longMessageLength)}...`}</div>
-                                <Link onClick={navigateToNotificationCenter}>{'Go to notification center'}</Link>
                             </>
                         }
+                        <div className="notificationEntry-flexContainer">
+                            <Link onClick={navigateToNotificationCenter} style={{flex: '5'}}>
+                                <Icon className="notificationEntry-Ringer" iconName={'Ringer'} />
+                                {t(ResourceKeys.header.notifications.title)}
+                            </Link>
+                            <CopyButton isFlex={true}/>
+                        </div>
+                        <div className="time">{notification.issued}</div>
                     </>
                 }
-                <div className="time">{notification.issued}</div>
             </div>
         </div>
     );

src/localization/locales/en.json

@@ -44,13 +44,15 @@
         },
         "notifications": {
             "show": "Notifications",
+            "title": "Notification center",
             "dismiss": "Clear all notifications",
             "panel": {
                 "title": "Notifications",
                 "noNotifications": "There are no new notifications for this session.",
                 "redirect": "Looking for notifications?",
                 "redirectLink": "Please visit Notification Center"
-            }
+            },
+            "copy": "Copy"
         },
         "questions": {
             "launch": "Open ???"

src/localization/resourceKeys.ts

@@ -693,6 +693,7 @@ export class ResourceKeys {
    public static header = {
       applicationName : "header.applicationName",
       notifications : {
+         copy : "header.notifications.copy",
          dismiss : "header.notifications.dismiss",
          panel : {
             noNotifications : "header.notifications.panel.noNotifications",
@@ -701,6 +702,7 @@ export class ResourceKeys {
             title : "header.notifications.panel.title",
          },
          show : "header.notifications.show",
+         title : "header.notifications.title",
       },
       questions : {
          launch : "header.questions.launch",