feat: add notification center for composer (QnA url import)

Composer/packages/client/src/components/AppComponents/MainContainer.tsx

@@ -3,6 +3,8 @@
 /** @jsx jsx */
 import { jsx, css } from '@emotion/core';
 
+import { NotificationContainer } from '../NotificationContainer';
+
 import { SideBar } from './SideBar';
 import { RightPanel } from './RightPanel';
 import { Assistant } from './Assistant';
@@ -18,6 +20,7 @@ export const MainContainer = () => {
       <SideBar />
       <RightPanel />
       <Assistant />
+      <NotificationContainer />
     </div>
   );
 };

Composer/packages/client/src/components/NotificationCard.tsx

@@ -0,0 +1,259 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT License.
+
+/** @jsx jsx */
+import { jsx, css, keyframes } from '@emotion/core';
+import { IconButton, ActionButton } from 'office-ui-fabric-react/lib/Button';
+import { useEffect, useRef, useState } from 'react';
+import { FontSizes } from '@uifabric/fluent-theme';
+import { Shimmer, ShimmerElementType } from 'office-ui-fabric-react/lib/Shimmer';
+import { Icon } from 'office-ui-fabric-react/lib/Icon';
+import formatMessage from 'format-message';
+
+// -------------------- Styles -------------------- //
+
+const fadeIn = keyframes`
+	from { opacity: 0; transform: translate3d(40px,0,0) }
+	to { opacity: 1; translate3d(0,0,0) }
+`;
+
+const fadeOut = (height: number) => keyframes`
+	from { opacity: 1; height: ${height}px}
+	to { opacity: 0; height:0}
+`;
+
+const cardContainer = (show: boolean, ref?: HTMLDivElement | null) => () => {
+  let height = 100;
+  if (ref) {
+    height = ref.clientHeight;
+  }
+
+  return css`
+    border-left: 4px solid #0078d4;
+    background: white;
+    box-shadow: 0 6.4px 14.4px 0 rgba(0, 0, 0, 0.132), 0 1.2px 3.6px 0 rgba(0, 0, 0, 0.108);
+    width: 340px;
+    border-radius: 2px;
+    display: flex;
+    flex-direction: column;
+    margin-bottom: 8px;
+    animation-duration: ${show ? '0.467' : '0.2'}s;
+    animation-timing-function: ${show ? 'cubic-bezier(0.1, 0.9, 0.2, 1)' : 'linear'};
+    animation-fill-mode: both;
+    animation-name: ${show ? fadeIn : fadeOut(height)};
+  `;
+};
+
+const cancelButton = css`
+  float: right;
+  color: #605e5c;
+  margin-left: auto;
+  width: 24px;
+  height: 24px;
+`;
+
+const cardContent = css`
+  display: flex;
+  padding: 0 8px 16px 12px;
+  min-height: 64px;
+`;
+
+const cardDetail = css`
+  margin-left: 8px;
+  flex-grow: 1;
+`;
+
+const errorType = css`
+  margin-top: 4px;
+  color: #a80000;
+`;
+
+const successType = css`
+  margin-top: 4px;
+  color: #27ae60;
+`;
+
+const cardTitle = css`
+  font-size: ${FontSizes.size16};
+  lint-height: 22px;
+  margin-right: 16px;
+`;
+
+const cardDescription = css`
+  text-size-adjust: none;
+  font-size: ${FontSizes.size10};
+  margin-top: 8px;
+  margin-right: 16px;
+  word-break: break-word;
+`;
+
+const linkButton = css`
+  color: #0078d4;
+  float: right;
+  font-size: 12px;
+  height: auto;
+  margin-right: 8px;
+`;
+
+const getShimmerStyles = {
+  root: {
+    marginTop: '12px',
+    marginBottom: '8px',
+  },
+  shimmerWrapper: [
+    {
+      backgroundColor: '#EDEBE9',
+    },
+  ],
+  shimmerGradient: [
+    {
+      backgroundImage: 'radial-gradient(at 50% 50%, #0078D4 0%, #EDEBE9 100%);',
+    },
+  ],
+};
+// -------------------- NotificationCard -------------------- //
+
+export enum NotificationType {
+  info = 1,
+  warning,
+  error,
+  loading,
+  success,
+}
+
+export interface ILink {
+  label: string;
+  onClick: () => void;
+}
+
+export interface ICardProps {
+  title: string;
+  description: string;
+  type: NotificationType;
+  retentionTime?: number;
+  link?: ILink;
+  onRenderCardContent?: (props: ICardProps) => JSX.Element;
+}
+
+export interface INotificationProps {
+  id: string;
+  cardProps: ICardProps;
+  onDismiss: (id: string) => void;
+}
+
+export class Timer {
+  timerId: NodeJS.Timeout;
+  start: number;
+  remaining: number;
+  pausing = false;
+  callback: () => void;
+
+  constructor(callback: () => void, delay: number) {
+    this.remaining = delay;
+    this.callback = callback;
+    this.start = Date.now();
+    this.timerId = setTimeout(callback, this.remaining);
+  }
+
+  pause() {
+    if (!this.pausing) {
+      clearTimeout(this.timerId);
+      this.remaining -= Date.now() - this.start;
+      this.pausing = true;
+    }
+  }
+
+  resume() {
+    this.pausing = false;
+    this.start = Date.now();
+    clearTimeout(this.timerId);
+    this.timerId = setTimeout(this.callback, this.remaining);
+  }
+
+  clear() {
+    clearTimeout(this.timerId);
+  }
+}
+
+const renderCardContent = (props: ICardProps) => {
+  const { title, description, type, link } = props;
+  return (
+    <div css={cardContent}>
+      {type === NotificationType.error && <Icon css={errorType} iconName="ErrorBadge" />}
+      {type === NotificationType.success && <Icon css={successType} iconName="Completed" />}
+      <div css={cardDetail}>
+        <div css={cardTitle}>{title}</div>
+        <div css={cardDescription}>{description}</div>
+        {link && (
+          <ActionButton css={linkButton} onClick={link.onClick}>
+            {link.label}
+          </ActionButton>
+        )}
+        {type === NotificationType.loading && (
+          <Shimmer shimmerElements={[{ type: ShimmerElementType.line, height: 2 }]} styles={getShimmerStyles} />
+        )}
+      </div>
+    </div>
+  );
+};
+
+export const NotificationCard = (props: INotificationProps) => {
+  const { cardProps, id, onDismiss } = props;
+  const [show, setShow] = useState(true);
+  const containerRef = useRef(null);
+
+  const removeNotification = () => {
+    setShow(false);
+  };
+
+  // notification will disappear in 5 secs
+  const timer = useRef(cardProps.retentionTime ? new Timer(removeNotification, cardProps.retentionTime) : null).current;
+
+  useEffect(() => {
+    return () => {
+      if (timer) {
+        timer.clear();
+      }
+    };
+  }, []);
+
+  const handleMouseOver = () => {
+    // if mouse over stop the time and record the remaining time
+    if (timer) {
+      timer.pause();
+    }
+  };
+
+  const handleMouseLeave = () => {
+    if (timer) {
+      timer.resume();
+    }
+  };
+
+  const handleAnimationEnd = () => {
+    if (!show) onDismiss(id);
+  };
+
+  let renderCard = renderCardContent;
+  if (cardProps.onRenderCardContent) renderCard = cardProps.onRenderCardContent;
+
+  return (
+    <div
+      ref={containerRef}
+      css={cardContainer(show, containerRef.current)}
+      role="presentation"
+      onAnimationEnd={handleAnimationEnd}
+      onFocus={() => {}}
+      onMouseLeave={handleMouseLeave}
+      onMouseOver={handleMouseOver}
+    >
+      <IconButton
+        ariaLabel={formatMessage('Close')}
+        css={cancelButton}
+        iconProps={{ iconName: 'Cancel', styles: { root: { fontSize: '12px' } } }}
+        onClick={removeNotification}
+      />
+      {renderCard(cardProps)}
+    </div>
+  );
+};

Composer/packages/client/src/components/NotificationContainer.tsx

@@ -0,0 +1,34 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT License.
+
+/** @jsx jsx */
+import { jsx, css } from '@emotion/core';
+import { useRecoilValue } from 'recoil';
+
+import { notificationsState, dispatcherState } from '../recoilModel';
+
+import { NotificationCard } from './NotificationCard';
+
+// -------------------- Styles -------------------- //
+
+const container = css`
+  cursor: default;
+  position: absolute;
+  right: 0px;
+  padding: 6px;
+`;
+
+// -------------------- NotificationContainer -------------------- //
+
+export const NotificationContainer = () => {
+  const notifications = useRecoilValue(notificationsState);
+  const { deleteNotification } = useRecoilValue(dispatcherState);
+
+  return (
+    <div css={container} role="presentation">
+      {notifications.map((item) => {
+        return <NotificationCard key={item.id} {...item} onDismiss={deleteNotification} />;
+      })}
+    </div>
+  );
+};

Composer/packages/client/src/components/NotificationIcon.tsx

@@ -0,0 +1,69 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT License.
+
+/** @jsx jsx */
+import { jsx, css } from '@emotion/core';
+import { Icon } from 'office-ui-fabric-react/lib/Icon';
+
+// -------------------- Styles -------------------- //
+
+const container = css`
+  cursor: pointer;
+  position: absolute;
+  display: flex;
+  right: 0px;
+  width: 48px;
+  height: 100%;
+  align-items: center;
+  justify-content: space-around;
+`;
+
+const ringer = css`
+  color: white;
+`;
+
+const circleMask = css`
+  position: absolute;
+  top: 8px;
+  right: 8px;
+  color: #005a9e;
+`;
+
+const numberContainer = css`
+  height: 16px;
+  width: 16px;
+  display: flex;
+  align-items: center;
+  justify-content: space-around;
+  text-align: center;
+  position: absolute;
+  right: 8px;
+  top: 8px;
+`;
+
+const numberText = css`
+  transform: scale(0.5);
+  font-size: 20px;
+  color: white;
+`;
+
+// -------------------- NotificationIcon -------------------- //
+
+interface INotificationIconProps {
+  number: number;
+}
+
+export const NotificationIcon = (props: INotificationIconProps) => {
+  const { number } = props;
+  return (
+    <div css={container} role="presentation">
+      <Icon css={ringer} iconName="Ringer" />
+      {number > 0 && <Icon css={circleMask} iconName="FullCircleMask" />}
+      {number > 0 && (
+        <div css={numberContainer}>
+          <span css={numberText}>{number > 99 ? '...' : number}</span>
+        </div>
+      )}
+    </div>
+  );
+};