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

* feat: add notification center for composer(qna import)

* update some style

* update the style

* update the icon color

* fix conflict

* remove the timer when error

* update the notification create flow

* remove the return in dispatcher

* use typs instead of interface

* use atomFamily to avoid over rendering

* update the set

Co-authored-by: Dong Lei <donglei@microsoft.com>
Co-authored-by: Chris Whitten <christopher.whitten@microsoft.com>

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,221 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT License.
+
+/** @jsx jsx */
+import { jsx, css, keyframes } from '@emotion/core';
+import React from 'react';
+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';
+
+import Timer from '../utils/timer';
+
+// -------------------- 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 type NotificationType = 'info' | 'warning' | 'error' | 'pending' | 'success';
+
+export type Link = {
+  label: string;
+  onClick: () => void;
+};
+
+export type CardProps = {
+  type: NotificationType;
+  title: string;
+  description?: string;
+  retentionTime?: number;
+  link?: Link;
+  onRenderCardContent?: (props: CardProps) => JSX.Element;
+};
+
+export type NotificationProps = {
+  id: string;
+  cardProps: CardProps;
+  onDismiss: (id: string) => void;
+};
+
+const defaultCardContentRenderer = (props: CardProps) => {
+  const { title, description, type, link } = props;
+  return (
+    <div css={cardContent}>
+      {type === 'error' && <Icon css={errorType} iconName="ErrorBadge" />}
+      {type === 'success' && <Icon css={successType} iconName="Completed" />}
+      <div css={cardDetail}>
+        <div css={cardTitle}>{title}</div>
+        {description && <div css={cardDescription}>{description}</div>}
+        {link && (
+          <ActionButton css={linkButton} onClick={link.onClick}>
+            {link.label}
+          </ActionButton>
+        )}
+        {type === 'pending' && (
+          <Shimmer shimmerElements={[{ type: ShimmerElementType.line, height: 2 }]} styles={getShimmerStyles} />
+        )}
+      </div>
+    </div>
+  );
+};
+
+export const NotificationCard = React.memo((props: NotificationProps) => {
+  const { cardProps, id, onDismiss } = props;
+  const [show, setShow] = useState(true);
+  const containerRef = useRef<HTMLDivElement>(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);
+  };
+
+  const renderCard = cardProps.onRenderCardContent || defaultCardContentRenderer;
+
+  return (
+    <div
+      ref={containerRef}
+      css={cardContainer(show, containerRef.current)}
+      role="presentation"
+      onAnimationEnd={handleAnimationEnd}
+      onFocus={() => void 0}
+      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,36 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT License.
+
+/** @jsx jsx */
+import { jsx, css } from '@emotion/core';
+import { useRecoilValue } from 'recoil';
+import React from 'react';
+
+import { dispatcherState } from '../recoilModel';
+import { notificationsSelector } from '../recoilModel/selectors/notificationsSelector';
+
+import { NotificationCard } from './NotificationCard';
+
+// -------------------- Styles -------------------- //
+
+const container = css`
+  cursor: default;
+  position: absolute;
+  right: 0px;
+  padding: 6px;
+`;
+
+// -------------------- NotificationContainer -------------------- //
+
+export const NotificationContainer = React.memo(() => {
+  const notifications = useRecoilValue(notificationsSelector);
+  const { deleteNotification } = useRecoilValue(dispatcherState);
+
+  return (
+    <div css={container} role="presentation">
+      {notifications.map((item) => {
+        return <NotificationCard key={item.id} cardProps={item} id={item.id} onDismiss={deleteNotification} />;
+      })}
+    </div>
+  );
+});

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

@@ -0,0 +1,58 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT License.
+
+import * as React from 'react';
+
+import { renderWithRecoil } from '../../../__tests__/testUtils/renderWithRecoil';
+import { NotificationCard, CardProps } from '../NotificationCard';
+import Timer from '../../utils/timer';
+
+jest.useFakeTimers();
+
+describe('<NotificationCard />', () => {
+  it('should render the NotificationCard', () => {
+    const cardProps: CardProps = {
+      title: 'There was error creating your KB',
+      description: 'error',
+      retentionTime: 1,
+      type: 'error',
+    };
+    const onDismiss = jest.fn();
+    const { container } = renderWithRecoil(<NotificationCard cardProps={cardProps} id="test" onDismiss={onDismiss} />);
+
+    expect(container).toHaveTextContent('There was error creating your KB');
+  });
+
+  it('should render the customized card', () => {
+    const cardProps: CardProps = {
+      title: 'There was error creating your KB',
+      description: 'error',
+      retentionTime: 5000,
+      type: 'error',
+      onRenderCardContent: () => <div>customized</div>,
+    };
+    const onDismiss = jest.fn();
+    const { container } = renderWithRecoil(<NotificationCard cardProps={cardProps} id="test" onDismiss={onDismiss} />);
+
+    expect(container).toHaveTextContent('customized');
+  });
+});
+
+describe('Notification Time Management', () => {
+  it('should invoke callback', () => {
+    const callback = jest.fn();
+    new Timer(callback, 0);
+    expect(callback).not.toBeCalled();
+    jest.runAllTimers();
+    expect(callback).toHaveBeenCalled();
+  });
+
+  it('should pause and resume', () => {
+    const callback = jest.fn();
+    const timer = new Timer(callback, 1);
+    timer.pause();
+    expect(timer.pausing).toBeTruthy();
+    timer.resume();
+    expect(timer.pausing).toBeFalsy();
+  });
+});

Composer/packages/client/src/pages/design/DesignPage.tsx

@@ -555,8 +555,7 @@ const DesignPage: React.FC<RouteComponentProps<{ dialogId: string; projectId: st
       triggerPhrases: '',
     };
     if (dialogId) {
-      const url = `/bot/${projectId}/knowledge-base/${dialogId}`;
-      createTrigger(dialogId, formData, url);
+      createTrigger(dialogId, formData);
       // import qna from urls
       if (urls.length > 0) {
         await importQnAFromUrls({ id: `${dialogId}.${locale}`, urls, projectId });

Composer/packages/client/src/recoilModel/atoms/appState.ts

@@ -1,7 +1,7 @@
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT License.
 
-import { atom } from 'recoil';
+import { atom, atomFamily } from 'recoil';
 import { ProjectTemplate, UserSettings } from '@bfc/shared';
 
 import {
@@ -10,6 +10,7 @@ import {
   RuntimeTemplate,
   AppUpdateState,
   BoilerplateVersion,
+  Notification,
   ExtensionConfig,
 } from '../../recoilModel/types';
 import { getUserSettings } from '../utils';
@@ -152,6 +153,18 @@ export const boilerplateVersionState = atom<BoilerplateVersion>({
   },
 });
 
+export const notificationIdsState = atom<string[]>({
+  key: getFullyQualifiedKey('notificationIds'),
+  default: [],
+});
+
+export const notificationsState = atomFamily<Notification, string>({
+  key: getFullyQualifiedKey('notification'),
+  default: (id: string): Notification => {
+    return { id, type: 'info', title: '' };
+  },
+});
+
 export const extensionsState = atom<ExtensionConfig[]>({
   key: getFullyQualifiedKey('extensions'),
   default: [],

Composer/packages/client/src/recoilModel/dispatchers/index.ts

@@ -18,6 +18,7 @@ import { settingsDispatcher } from './setting';
 import { skillDispatcher } from './skill';
 import { userDispatcher } from './user';
 import { multilangDispatcher } from './multilang';
+import { notificationDispatcher } from './notification';
 import { extensionsDispatcher } from './extensions';
 
 const createDispatchers = () => {
@@ -39,6 +40,7 @@ const createDispatchers = () => {
     ...skillDispatcher(),
     ...userDispatcher(),
     ...multilangDispatcher(),
+    ...notificationDispatcher(),
     ...extensionsDispatcher(),
   };
 };