feat: auto publish after creating new provision.

Composer/packages/client/src/pages/botProject/CreatePublishProfileDialog.tsx

@@ -22,10 +22,11 @@ import { actionButton } from './styles';
 
 type CreatePublishProfileDialogProps = {
   projectId: string;
+  setIsCreateProfileFromSkill: (isCreateProfileFromSkill: boolean) => void;
 };
 
 export const CreatePublishProfileDialog: React.FC<CreatePublishProfileDialogProps> = (props) => {
-  const { projectId } = props;
+  const { projectId, setIsCreateProfileFromSkill } = props;
   const { publishTargets } = useRecoilValue(settingsState(projectId));
   const { getPublishTargetTypes, setPublishTargets } = useRecoilValue(dispatcherState);
   const publishTypes = useRecoilValue(publishTypesState(projectId));
@@ -99,6 +100,7 @@ export const CreatePublishProfileDialog: React.FC<CreatePublishProfileDialogProp
           }}
           current={currentPublishProfile}
           projectId={projectId}
+          setIsCreateProfileFromSkill={setIsCreateProfileFromSkill}
           setPublishTargets={setPublishTargets}
           targets={publishTargets || []}
           types={publishTypes}

Composer/packages/client/src/pages/botProject/create-publish-profile/PublishProfileDialog.tsx

@@ -30,6 +30,7 @@ type PublishProfileDialogProps = {
   types: PublishType[];
   projectId: string;
   setPublishTargets: (targets: PublishTarget[], projectId: string) => Promise<void>;
+  setIsCreateProfileFromSkill?: (isCreateProfileFromSkill: boolean) => void;
 };
 
 const Page = {
@@ -38,7 +39,7 @@ const Page = {
 };
 
 export const PublishProfileDialog: React.FC<PublishProfileDialogProps> = (props) => {
-  const { current, types, projectId, closeDialog, targets, setPublishTargets } = props;
+  const { current, types, projectId, closeDialog, targets, setPublishTargets, setIsCreateProfileFromSkill } = props;
   const [name, setName] = useState(current?.item.name || '');
   const [targetType, setTargetType] = useState<string>(current?.item.type || '');
 
@@ -194,7 +195,8 @@ export const PublishProfileDialog: React.FC<PublishProfileDialogProps> = (props)
         arm = getTokenFromCache('accessToken');
         graph = getTokenFromCache('graphToken');
       }
-      provisionToTarget(fullConfig, config.type, projectId, arm, graph, current?.item);
+      await provisionToTarget(fullConfig, config.type, projectId, arm, graph, current?.item);
+      setIsCreateProfileFromSkill?.(true);
     };
   }, [name, targetType, types, savePublishTarget]);
 

Composer/packages/client/src/pages/design/exportSkillModal/constants.tsx

@@ -86,6 +86,7 @@ export interface ContentProps {
   setSelectedDialogs: (dialogs: any[]) => void;
   setSelectedTriggers: (selectedTriggers: any[]) => void;
   setSkillManifest: (_: Partial<SkillManifestFile>) => void;
+  setIsCreateProfileFromSkill: (isCreateProfileFromSkill: boolean) => void;
   schema: JSONSchema7;
   selectedDialogs: any[];
   selectedTriggers: any[];

Composer/packages/client/src/pages/design/exportSkillModal/content/SelectProfile.tsx

@@ -76,7 +76,14 @@ export const getManifestId = (
   return fileId;
 };
 
-export const SelectProfile: React.FC<ContentProps> = ({ manifest, setSkillManifest, value, onChange, projectId }) => {
+export const SelectProfile: React.FC<ContentProps> = ({
+  manifest,
+  setSkillManifest,
+  value,
+  onChange,
+  projectId,
+  setIsCreateProfileFromSkill,
+}) => {
   const [publishingTargets, setPublishingTargets] = useState<PublishTarget[]>([]);
   const [currentTarget, setCurrentTarget] = useState<PublishTarget>();
   const { updateCurrentTarget } = useRecoilValue(dispatcherState);
@@ -201,7 +208,10 @@ export const SelectProfile: React.FC<ContentProps> = ({ manifest, setSkillManife
     </div>
   ) : (
     <div>
-      <CreatePublishProfileDialog projectId={projectId}></CreatePublishProfileDialog>
+      <CreatePublishProfileDialog
+        projectId={projectId}
+        setIsCreateProfileFromSkill={setIsCreateProfileFromSkill}
+      ></CreatePublishProfileDialog>
     </div>
   );
 };

Composer/packages/client/src/pages/design/exportSkillModal/index.tsx

@@ -3,7 +3,7 @@
 
 /** @jsx jsx */
 import { jsx } from '@emotion/core';
-import React, { useState } from 'react';
+import React, { useEffect, useRef, useState } from 'react';
 import formatMessage from 'format-message';
 import { Dialog, DialogFooter, DialogType } from 'office-ui-fabric-react/lib/Dialog';
 import { DefaultButton, PrimaryButton } from 'office-ui-fabric-react/lib/Button';
@@ -15,6 +15,7 @@ import { navigate } from '@reach/router';
 import { isUsingAdaptiveRuntime } from '@bfc/shared';
 import cloneDeep from 'lodash/cloneDeep';
 
+import { Notification } from '../../../recoilModel/types';
 import {
   dispatcherState,
   skillManifestsState,
@@ -26,11 +27,21 @@ import {
   settingsState,
   rootBotProjectIdSelector,
 } from '../../../recoilModel';
-import { mergePropertiesManagedByRootBot } from '../../../recoilModel/dispatchers/utils/project';
+import {
+  getSensitiveProperties,
+  mergePropertiesManagedByRootBot,
+} from '../../../recoilModel/dispatchers/utils/project';
+import { getTokenFromCache } from '../../../utils/auth';
+import { ApiStatus, PublishStatusPollingUpdater } from '../../../utils/publishStatusPollingUpdater';
+import {
+  getSkillPublishedNotificationCardProps,
+  getSkilPendingNotificationCardProps,
+} from '../../publish/Notifications';
+import { createNotification } from '../../../recoilModel/dispatchers/notification';
 
-import { styles } from './styles';
-import { generateSkillManifest } from './generateSkillManifest';
 import { editorSteps, ManifestEditorSteps, order } from './constants';
+import { generateSkillManifest } from './generateSkillManifest';
+import { styles } from './styles';
 
 interface ExportSkillModalProps {
   isOpen: boolean;
@@ -46,11 +57,18 @@ const ExportSkillModal: React.FC<ExportSkillModalProps> = ({ onSubmit, onDismiss
   const luFiles = useRecoilValue(luFilesSelectorFamily(projectId));
   const qnaFiles = useRecoilValue(qnaFilesSelectorFamily(projectId));
   const skillManifests = useRecoilValue(skillManifestsState(projectId));
-  const { updateSkillManifest } = useRecoilValue(dispatcherState);
+  const {
+    updateSkillManifest,
+    publishToTarget,
+    addNotification,
+    updateNotification,
+    deleteNotification,
+  } = useRecoilValue(dispatcherState);
 
   const [currentStep, setCurrentStep] = useState(0);
   const [errors, setErrors] = useState({});
   const [schema, setSchema] = useState<JSONSchema7>({});
+  const [isHidden, setIsHidden] = useState(false);
 
   const [skillManifest, setSkillManifest] = useState<Partial<SkillManifestFile>>({});
   const { content = {}, id } = skillManifest;
@@ -71,6 +89,84 @@ const ExportSkillModal: React.FC<ExportSkillModalProps> = ({ onSubmit, onDismiss
     !isAdaptive ? skillConfiguration?.allowedCallers : runtimeSettings?.skills?.allowedCallers ?? []
   );
 
+  const [isCreateProfileFromSkill, setIsCreateProfileFromSkill] = useState(false);
+  let publishUpdater: PublishStatusPollingUpdater;
+  const publishNotificationRef = useRef<Notification>();
+  // stop polling updater & delete pending notification
+  const stopUpdater = async (updater) => {
+    updater.stop();
+
+    const notification = publishNotificationRef.current;
+    notification && (await deleteNotification(notification.id));
+    publishNotificationRef.current = undefined;
+    handleDismiss();
+    setIsHidden(false);
+  };
+  const changeNotificationStatus = async (data) => {
+    const { apiResponse } = data;
+    if (!apiResponse) {
+      stopUpdater(publishUpdater);
+      return;
+    }
+    const responseData = apiResponse.data;
+
+    if (responseData.status !== ApiStatus.Publishing) {
+      // Show result notifications
+      const displayedNotification = publishNotificationRef.current;
+      if (displayedNotification) {
+        const currentTarget = publishTargets?.find((target) => target.name === publishUpdater.getPublishTargetName());
+        const url = currentTarget
+          ? `https://${JSON.parse(currentTarget.configuration).hostname}.azurewebsites.net/manifests/${
+              skillManifest.id
+            }.json`
+          : '';
+        const notificationCard = getSkillPublishedNotificationCardProps({ ...responseData }, url);
+        updateNotification(displayedNotification.id, notificationCard);
+      }
+      stopUpdater(publishUpdater);
+      navigate(`bot/${projectId}/publish/all`);
+    }
+  };
+
+  useEffect(() => {
+    const publish = async () => {
+      if (!publishTargets || publishTargets.length === 0) return;
+      const currentTarget = publishTargets.find((item) => {
+        const config = JSON.parse(item.configuration);
+        return (
+          config.settings &&
+          config.settings.MicrosoftAppId &&
+          config.hostname &&
+          config.settings.MicrosoftAppId.length > 0 &&
+          config.hostname.length > 0
+        );
+      });
+      if (isCreateProfileFromSkill && currentTarget) {
+        const skillPublishPenddingNotificationCard = getSkilPendingNotificationCardProps();
+        publishNotificationRef.current = createNotification(skillPublishPenddingNotificationCard);
+        addNotification(publishNotificationRef.current);
+        const sensitiveSettings = getSensitiveProperties(settings);
+        const token = getTokenFromCache('accessToken');
+        await publishToTarget(projectId, currentTarget, { comment: '' }, sensitiveSettings, token);
+        publishUpdater = new PublishStatusPollingUpdater(projectId, currentTarget.name);
+        publishUpdater.start(changeNotificationStatus);
+      }
+    };
+    publish();
+  }, [isCreateProfileFromSkill, publishTargets?.length]);
+  useEffect(() => {
+    isCreateProfileFromSkill && setIsHidden(true);
+  }, [isCreateProfileFromSkill]);
+
+  useEffect(() => {
+    // Clear intervals when unmount
+    return () => {
+      if (publishUpdater) {
+        stopUpdater(publishUpdater);
+      }
+    };
+  }, []);
+
   const updateAllowedCallers = React.useCallback(
     (allowedCallers: string[] = []) => {
       const updatedSetting = isAdaptive
@@ -167,7 +263,7 @@ const ExportSkillModal: React.FC<ExportSkillModalProps> = ({ onSubmit, onDismiss
         title: title(),
         styles: styles.dialog,
       }}
-      hidden={false}
+      hidden={isHidden}
       modalProps={{
         isBlocking: false,
         styles: styles.modal,
@@ -203,6 +299,7 @@ const ExportSkillModal: React.FC<ExportSkillModalProps> = ({ onSubmit, onDismiss
             selectedDialogs={selectedDialogs}
             selectedTriggers={selectedTriggers}
             setErrors={setErrors}
+            setIsCreateProfileFromSkill={setIsCreateProfileFromSkill}
             setSchema={setSchema}
             setSelectedDialogs={setSelectedDialogs}
             setSelectedTriggers={setSelectedTriggers}

Composer/packages/client/src/pages/publish/Notifications.tsx

@@ -71,7 +71,10 @@ export const getPublishedNotificationCardProps = (item: BotStatus): CardProps =>
   };
 };
 
-export const getSkillPublishedNotificationCardProps = (item: BotStatus, url?: string): CardProps => {
+export const getSkillPublishedNotificationCardProps = (
+  item: { status: number; [key: string]: any },
+  url?: string
+): CardProps => {
   const skillCardContent = css`
     display: flex;
     padding: 0 16px 16px 12px;
@@ -185,6 +188,22 @@ export const getPendingNotificationCardProps = (items: BotStatus[], isSkill = fa
   };
 };
 
+export const getSkilPendingNotificationCardProps = (): CardProps => {
+  return {
+    title: '',
+    description: formatMessage('Publishing your skill...'),
+    type: 'pending',
+    onRenderCardContent: (props) => (
+      <div css={cardContent}>
+        <Icon css={infoType} iconName="CloudUpload" />
+        <div css={cardDetail}>
+          <ProgressIndicator label={props.description} />
+        </div>
+      </div>
+    ),
+  };
+};
+
 export const getPendingQNANotificationCardProps = (): CardProps => {
   return {
     title: '',

Composer/packages/client/src/recoilModel/DispatcherWrapper.tsx

@@ -123,7 +123,7 @@ export const DispatcherWrapper = ({ children }) => {
         if (filePersistence.isErrorHandlerEmpty()) {
           filePersistence.registerErrorHandler(setProjectError);
         }
-        filePersistence.notify(assets, previousAssets);
+        await filePersistence.notify(assets, previousAssets);
       }
     }
   });

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

@@ -53,10 +53,17 @@ export const notificationDispatcher = () => {
     set(notificationsState(id), (notification) => ({ ...notification, hidden: true }));
   });
 
+  const updateNotification = useRecoilCallback(
+    (callbackHelper: CallbackInterface) => (id: string, newValue: CardProps) => {
+      updateNotificationInternal(callbackHelper, id, newValue);
+    }
+  );
+
   return {
     addNotification,
     deleteNotification,
     hideNotification,
     markNotificationAsRead,
+    updateNotification,
   };
 };

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

@@ -90,7 +90,7 @@ export const provisionDispatcher = () => {
         });
 
         // call provision status api interval to update the state.
-        updateProvisionStatus(
+        await updateProvisionStatus(
           callbackHelpers,
           result.data.id,
           projectId,
@@ -135,7 +135,7 @@ export const provisionDispatcher = () => {
           });
 
           // update publishTargets
-          callbackHelpers.set(settingsState(projectId), (settings) => {
+          await callbackHelpers.set(settingsState(projectId), (settings) => {
             const profile = {
               configuration: JSON.stringify(response.data.config, null, 2),
               name: targetName,

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

@@ -177,7 +177,10 @@ export const publisherDispatcher = () => {
         const qnaFiles = await snapshot.getPromise(qnaFilesSelectorFamily(projectId));
         const referredLuFiles = luUtil.checkLuisBuild(luFiles, dialogs);
         const referredQnaFiles = qnaUtil.checkQnaBuild(qnaFiles, dialogs);
+        const filePersistence = await snapshot.getPromise(filePersistenceState(projectId));
+        await filePersistence.flush();
         const response = await httpClient.post(`/publish/${projectId}/publish/${target.name}`, {
+          publishTarget: target,
           accessToken: token,
           metadata: {
             ...metadata,
@@ -190,7 +193,7 @@ export const publisherDispatcher = () => {
         // add job id to storage
         const publishJobIds = publishStorage.get('jobIds') || {};
         publishJobIds[`${projectId}-${target.name}`] = response.data.id;
-        publishStorage.set('jobIds', publishJobIds);
+        await publishStorage.set('jobIds', publishJobIds);
 
         await publishSuccess(callbackHelpers, projectId, response.data, target);
       } catch (err) {
@@ -243,7 +246,7 @@ export const publisherDispatcher = () => {
       const { set, snapshot } = callbackHelpers;
       try {
         const filePersistence = await snapshot.getPromise(filePersistenceState(projectId));
-        filePersistence.flush();
+        await filePersistence.flush();
         const response = await httpClient.get(`/publish/${projectId}/history/${target.name}`);
         set(publishHistoryState(projectId), (publishHistory) => ({
           ...publishHistory,

Composer/packages/client/src/utils/publishStatusPollingUpdater.ts

@@ -99,6 +99,10 @@ export class PublishStatusPollingUpdater {
   isSameUpdater(botProjectId: string, targetName: string) {
     return this.botProjectId === botProjectId && this.publishTargetName === targetName;
   }
+
+  getPublishTargetName() {
+    return this.publishTargetName;
+  }
 }
 
 export const pollingUpdaterList: PublishStatusPollingUpdater[] = [];