notification

alanlong9278 · Nov 2, 2020 · 4da1f68 · 4da1f68
1 parent b198498
commit 4da1f68
Show file tree

Hide file tree

Showing 4 changed files with 76 additions and 31 deletions.
diff --git a/Composer/packages/client/src/components/NotificationCard.tsx b/Composer/packages/client/src/components/NotificationCard.tsx
@@ -55,20 +55,17 @@ const cancelButton = css`
   height: 24px;
 `;
 
-export const cardContent = css`
+const cardContent = css`
   display: flex;
   padding: 0 8px 16px 12px;
   min-height: 64px;
 `;
 
-export const cardDetail = css`
+const cardDetail = css`
   margin-left: 8px;
   flex-grow: 1;
 `;
 
-export const infoType = css`
-  margin-top: 4px;
-`;
 const errorType = css`
   margin-top: 4px;
   color: #a80000;

diff --git a/Composer/packages/client/src/pages/publish/Publish.tsx b/Composer/packages/client/src/pages/publish/Publish.tsx
@@ -27,15 +27,29 @@ import { pendingNotificationCard, publishedNotificationCard } from './notificati
 const Publish: React.FC<RouteComponentProps<{ projectId: string; targetName?: string }>> = (props) => {
   const { projectId = '' } = props;
   const botProjectsMeta = useRecoilValue(botProjectSpaceSelector);
+  const {
+    getPublishHistory,
+    getPublishStatus,
+    getPublishTargetTypes,
+    setPublishTargets,
+    publishToTarget,
+    setQnASettings,
+    rollbackToVersion: rollbackToVersionDispatcher,
+    addNotification,
+    deleteNotification,
+  } = useRecoilValue(dispatcherState);
 
   const [selectedBots, setSelectedBots] = useState<IBotStatus[]>([]);
 
+  const [showNotification, setShowNotification] = useState<boolean>(false);
   // fill Settings, status, publishType, publish target for bot from botProjectMeta
   const botSettingsList: { [key: string]: any }[] = [];
   const botStatusList: IBotStatus[] = [];
   const botPublishTypesList: { [key: string]: any }[] = [];
   const [botPublishHistoryList, setBotPublishHistoryList] = useState<{ [key: string]: any }[]>([]);
   const publishHistoyList: { [key: string]: any }[] = [];
+  const publishTargetsList: { [key: string]: any }[] = [];
+  const [hasGetPublishHistory, setHasGetPublishHistory] = useState<boolean>(false);
   botProjectsMeta
     .filter((bot) => bot.isRemote === false)
     .forEach((bot) => {
@@ -54,6 +68,10 @@ const Publish: React.FC<RouteComponentProps<{ projectId: string; targetName?: st
         publishHistory,
       });
       const publishTargets = bot.settings ? (bot.settings.publishTargets as any[]) : [];
+      publishTargetsList.push({
+        projectId: botProjectId,
+        publishTargets,
+      });
       const botStatus: IBotStatus = {
         id: botProjectId,
         name: bot.name,
@@ -73,17 +91,6 @@ const Publish: React.FC<RouteComponentProps<{ projectId: string; targetName?: st
       botStatusList.push(botStatus);
     });
 
-  const {
-    getPublishStatus,
-    getPublishTargetTypes,
-    setPublishTargets,
-    publishToTarget,
-    setQnASettings,
-    rollbackToVersion: rollbackToVersionDispatcher,
-    addNotification,
-    deleteNotification,
-  } = useRecoilValue(dispatcherState);
-
   const [showLog, setShowLog] = useState(false);
   const [publishDialogHidden, setPublishDialogHidden] = useState(true);
 
@@ -133,7 +140,7 @@ const Publish: React.FC<RouteComponentProps<{ projectId: string; targetName?: st
     }
   };
 
-  let pendingNotification: Notification;
+  const [pendingNotification, setPendingNotification] = useState<Notification>();
   // check history to see if a 202 is found
   useEffect(() => {
     // most recent item is a 202, which means we should poll for updates...
@@ -144,15 +151,20 @@ const Publish: React.FC<RouteComponentProps<{ projectId: string; targetName?: st
         if (selectedTarget) {
           const botPublishHistory = botPublishHistoryList.find((publishHistory) => publishHistory.projectId === bot.id)
             ?.publishHistory[bot.publishTarget];
-          if (botPublishHistory[0].status === 202) {
-            getUpdatedStatus(selectedTarget);
-          } else if (botPublishHistory[0].status === 200 || botPublishHistory[0].status === 500) {
-            deleteNotification(pendingNotification.id);
-            addNotification(createNotifiction(publishedNotificationCard(bot)));
-          } else if (selectedTarget && selectedTarget.lastPublished && botPublishHistory.length === 0) {
-            // if the history is EMPTY, but we think we've done a publish based on lastPublished timestamp,
-            // we still poll for the results IF we see that a publish has happened previously
-            getPublishStatus(projectId, selectedTarget);
+          if (botPublishHistory && botPublishHistory.length > 0) {
+            if (botPublishHistory[0].status === 202) {
+              getPublishHistory(projectId, selectedTarget);
+              getUpdatedStatus(selectedTarget);
+            } else if (botPublishHistory[0].status === 200 || botPublishHistory[0].status === 500) {
+              if (showNotification) {
+                pendingNotification && deleteNotification(pendingNotification.id);
+                addNotification(createNotifiction(publishedNotificationCard(bot)));
+              }
+            } else if (selectedTarget && selectedTarget.lastPublished && botPublishHistory.length === 0) {
+              // if the history is EMPTY, but we think we've done a publish based on lastPublished timestamp,
+              // we still poll for the results IF we see that a publish has happened previously
+              getPublishStatus(projectId, selectedTarget);
+            }
           }
         }
       }
@@ -171,6 +183,14 @@ const Publish: React.FC<RouteComponentProps<{ projectId: string; targetName?: st
     if (publishHistoyList.length > 0) {
       setBotPublishHistoryList(publishHistoyList);
     }
+    if (!hasGetPublishHistory) {
+      publishTargetsList.forEach((botTargets) => {
+        botTargets.publishTargets.forEach((target) => {
+          getPublishHistory(botTargets.projectId, target);
+        });
+      });
+      setHasGetPublishHistory(true);
+    }
   }, [botProjectsMeta]);
 
   const rollbackToVersion = (version, item) => {
@@ -210,8 +230,10 @@ const Publish: React.FC<RouteComponentProps<{ projectId: string; targetName?: st
   };
   const publish = async (items: IBotStatus[]) => {
     // notifications
-    pendingNotification = createNotifiction(pendingNotificationCard(items));
-    addNotification(pendingNotification);
+    setShowNotification(true);
+    const notification = createNotifiction(pendingNotificationCard(items));
+    setPendingNotification(notification);
+    addNotification(notification);
     // publish to remote
     if (items.length > 0) {
       for (const bot of items) {

diff --git a/Composer/packages/client/src/pages/publish/botStatusList.tsx b/Composer/packages/client/src/pages/publish/botStatusList.tsx
@@ -122,6 +122,7 @@ export const BotStatusList: React.FC<IBotStatusListProps> = (props) => {
           </td>
           <td css={bodyStyle}>
             <Dropdown
+              defaultSelectedKey={item.publishTarget}
               options={publishTargetOptions()}
               placeholder={formatMessage('Select a publish target')}
               styles={{ root: { width: '134px' } }}

diff --git a/Composer/packages/client/src/pages/publish/notifications.tsx b/Composer/packages/client/src/pages/publish/notifications.tsx
@@ -1,15 +1,40 @@
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT License.
 /** @jsx jsx */
-import { jsx } from '@emotion/core';
+import { jsx, css } from '@emotion/core';
 import formatMessage from 'format-message';
 import { ProgressIndicator } from 'office-ui-fabric-react/lib/ProgressIndicator';
 import { Icon } from 'office-ui-fabric-react/lib/Icon';
 
-import { CardProps, cardContent, infoType, cardDetail, cardDescription } from '../../components/NotificationCard';
+import { CardProps } from '../../components/NotificationCard';
 
 import { IBotStatus } from './botStatusList';
 
+const cardContent = css`
+  display: flex;
+  padding: 0 16px 16px 12px;
+  min-height: 64px;
+  align-item: center;
+`;
+
+const cardDetail = css`
+  margin-left: 8px;
+  flex-grow: 1;
+`;
+
+const infoType = css`
+  margin-top: 4px;
+  color: #0078d4;
+`;
+
+const cardDescription = css`
+  text-size-adjust: none;
+  font-size: 12px;
+  line-height: 16px;
+  margin-top: 8px;
+  margin-right: 16px;
+  word-break: break-word;
+`;
 export const pendingNotificationCard = (items): CardProps => {
   return {
     title: '',
@@ -20,7 +45,7 @@ export const pendingNotificationCard = (items): CardProps => {
         <Icon css={infoType} iconName="CloudUpload" />
         <div css={cardDetail}>
           <div css={cardDescription}>{props.description}</div>
-          <ProgressIndicator description="Example description" label="Example title" />
+          <ProgressIndicator />
         </div>
       </div>
     ),