feat: Implement pull from publish target

.vscode/launch.json

@@ -88,7 +88,12 @@
         "DEBUG": "composer*",
         "COMPOSER_ENABLE_ONEAUTH": "false"
       },
-      "outputCapture": "std"
+      "outputCapture": "std",
+      "outFiles": [
+        "${workspaceRoot}/Composer/packages/electron-server/build/**/*.js",
+        "${workspaceRoot}/Composer/packages/server/build/**/*.js",
+        "${workspaceRoot}/extensions/**/*.js"
+      ]
     },
     {
       "name": "Debug current jest test",

Composer/packages/client/__tests__/pages/publish/Publish.test.tsx

@@ -46,6 +46,7 @@ const state = {
         publish: true,
         status: true,
         rollback: true,
+        pull: true,
       },
     },
   ],

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

@@ -30,6 +30,7 @@ import { PublishDialog } from './publishDialog';
 import { ContentHeaderStyle, HeaderText, ContentStyle, contentEditor, overflowSet, targetSelected } from './styles';
 import { CreatePublishTarget } from './createPublishTarget';
 import { PublishStatusList, IStatus } from './publishStatusList';
+import { PullDialog } from './pullDialog';
 
 const Publish: React.FC<RouteComponentProps<{ projectId: string; targetName?: string }>> = (props) => {
   const selectedTargetName = props.targetName;
@@ -56,6 +57,7 @@ const Publish: React.FC<RouteComponentProps<{ projectId: string; targetName?: st
 
   const [showLog, setShowLog] = useState(false);
   const [publishDialogHidden, setPublishDialogHidden] = useState(true);
+  const [pullDialogHidden, setPullDialogHidden] = useState(true);
 
   // items to show in the list
   const [thisPublishHistory, setThisPublishHistory] = useState<IStatus[]>([]);
@@ -86,6 +88,16 @@ const Publish: React.FC<RouteComponentProps<{ projectId: string; targetName?: st
     [projectId, publishTypes]
   );
 
+  const isPullSupported = useMemo(() => {
+    if (selectedTarget) {
+      const type = publishTypes?.find((t) => t.name === selectedTarget.type);
+      if (type?.features?.pull) {
+        return true;
+      }
+    }
+    return false;
+  }, [projectId, publishTypes, selectedTarget]);
+
   const toolbarItems: IToolbarItem[] = [
     {
       type: 'action',
@@ -113,6 +125,19 @@ const Publish: React.FC<RouteComponentProps<{ projectId: string; targetName?: st
       dataTestid: 'publishPage-Toolbar-Publish',
       disabled: selectedTargetName !== 'all' ? false : true,
     },
+    {
+      type: 'action',
+      text: formatMessage('Pull from selected profile'),
+      buttonProps: {
+        iconProps: {
+          iconName: 'CloudDownload',
+        },
+        onClick: () => setPullDialogHidden(false),
+      },
+      align: 'left',
+      dataTestid: 'publishPage-Toolbar-Pull',
+      disabled: !isPullSupported,
+    },
     {
       type: 'action',
       text: formatMessage('See Log'),
@@ -403,6 +428,9 @@ const Publish: React.FC<RouteComponentProps<{ projectId: string; targetName?: st
           onSubmit={publish}
         />
       )}
+      {!pullDialogHidden && (
+        <PullDialog projectId={projectId} selectedTarget={selectedTarget} onDismiss={() => setPullDialogHidden(true)} />
+      )}
       {showLog && <LogDialog version={selectedVersion} onDismiss={() => setShowLog(false)} />}
       <Toolbar toolbarItems={toolbarItems} />
       <div css={ContentHeaderStyle}>

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

@@ -0,0 +1,99 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT License.
+
+/** @jsx jsx */
+import { jsx } from '@emotion/core';
+import { PublishTarget } from '@botframework-composer/types';
+import formatMessage from 'format-message';
+import React, { useCallback, useEffect, useState } from 'react';
+import { useRecoilValue } from 'recoil';
+import axios from 'axios';
+
+import { createNotification } from '../../recoilModel/dispatchers/notification';
+import { ImportSuccessNotificationWrapper } from '../../components/ImportModal/ImportSuccessNotification';
+import { dispatcherState, locationState } from '../../recoilModel';
+
+import { PullFailedDialog } from './pullFailedDialog';
+import { PullStatus } from './pullStatus';
+
+type PullDialogProps = {
+  onDismiss: () => void;
+  projectId: string;
+  selectedTarget: PublishTarget | undefined;
+};
+
+type PullDialogStatus = 'connecting' | 'downloading' | 'error';
+
+const CONNECTING_STATUS_DISPLAY_TIME = 2000;
+
+export const PullDialog: React.FC<PullDialogProps> = (props) => {
+  const { onDismiss, projectId, selectedTarget } = props;
+  const [status, setStatus] = useState<PullDialogStatus>('connecting');
+  const [error, setError] = useState<string>('');
+  const { addNotification, reloadExistingProject } = useRecoilValue(dispatcherState);
+  const botLocation = useRecoilValue(locationState(projectId));
+
+  const pull = useCallback(() => {
+    if (selectedTarget) {
+      const doPull = async () => {
+        // show progress dialog
+        setStatus('downloading');
+
+        try {
+          // wait for pull result from server
+          const res = await axios.post<{ backupLocation: string }>(
+            `/api/publish/${projectId}/pull/${selectedTarget.name}`
+          );
+          const { backupLocation } = res.data;
+          // show notification indicating success and close dialog
+          const notification = createNotification({
+            type: 'success',
+            title: '',
+            onRenderCardContent: ImportSuccessNotificationWrapper({
+              importedToExisting: true,
+              location: backupLocation,
+            }),
+          });
+          addNotification(notification);
+          // reload the bot project to update the authoring canvas
+          reloadExistingProject(projectId);
+          onDismiss();
+          return;
+        } catch (e) {
+          // something bad happened
+          setError(formatMessage('Something happened while attempting to pull: { e }', { e }));
+          setStatus('error');
+        }
+      };
+      doPull();
+    }
+  }, [botLocation, projectId, selectedTarget]);
+
+  useEffect(() => {
+    if (status === 'connecting') {
+      // start the pull
+      setTimeout(() => {
+        pull();
+      }, CONNECTING_STATUS_DISPLAY_TIME);
+    }
+  }, [status]);
+
+  const onCancelOrDone = useCallback(() => {
+    setStatus('connecting');
+    onDismiss();
+  }, [onDismiss]);
+
+  switch (status) {
+    case 'connecting':
+      return <PullStatus publishTarget={selectedTarget} state={'connecting'} />;
+
+    case 'downloading':
+      return <PullStatus publishTarget={selectedTarget} state={'downloading'} />;
+
+    case 'error':
+      return <PullFailedDialog error={error} selectedTargetName={selectedTarget?.name} onDismiss={onCancelOrDone} />;
+
+    default:
+      throw new Error(`PullDialog trying to render for unexpected status: ${status}`);
+  }
+};

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

@@ -0,0 +1,57 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT License.
+
+/** @jsx jsx */
+import { css, jsx } from '@emotion/core';
+import { generateUniqueId } from '@bfc/shared';
+import formatMessage from 'format-message';
+import { PrimaryButton } from 'office-ui-fabric-react/lib/components/Button';
+import { Dialog, DialogFooter } from 'office-ui-fabric-react/lib/Dialog';
+import React from 'react';
+import { FontWeights } from 'office-ui-fabric-react/lib/Styling';
+
+type PulledFailedDialogProps = {
+  error: Error | string;
+  onDismiss: () => void;
+  selectedTargetName?: string;
+};
+
+const boldText = css`
+  font-weight: ${FontWeights.semibold};
+  word-break: break-work;
+`;
+
+const Bold = ({ children }) => (
+  <span key={generateUniqueId()} css={boldText}>
+    {children}
+  </span>
+);
+
+export const PullFailedDialog: React.FC<PulledFailedDialogProps> = (props) => {
+  const { error, onDismiss, selectedTargetName } = props;
+
+  return (
+    <Dialog
+      dialogContentProps={{
+        title: formatMessage('Something went wrong'),
+        styles: {
+          content: {
+            fontSize: 16,
+          },
+        },
+      }}
+      hidden={false}
+    >
+      <p>
+        {formatMessage.rich(
+          'There was an unexpected error pulling from publish profile <b>{ selectedTargetName }</b>',
+          { b: Bold, selectedTargetName }
+        )}
+      </p>
+      <p css={boldText}>{typeof error === 'object' ? JSON.stringify(error, undefined, 2) : error}</p>
+      <DialogFooter>
+        <PrimaryButton text={formatMessage('Ok')} onClick={onDismiss} />
+      </DialogFooter>
+    </Dialog>
+  );
+};