feat: publishing page

.gitignore

@@ -160,9 +160,6 @@ DocProject/Help/*.hhp
 DocProject/Help/Html2
 DocProject/Help/html
 
-# Click-Once directory
-publish/
-
 # Publish Web Output
 *.[Pp]ublish.xml
 *.azurePubxml

Composer/cypress/integration/LuisDeploy.spec.ts

@@ -4,8 +4,9 @@
 context('Luis Deploy', () => {
   beforeEach(() => {
     cy.server();
-    cy.route('POST', '/api/publish/*/publish/default', 'OK');
+    cy.route('POST', '/api/publish/*/publish/default', { endpointURL: 'anything' });
     cy.route('POST', '/api/projects/*/settings', 'OK');
+    cy.route('GET', '/api/publish/*/status/default', { endpointURL: 'anything' });
     cy.visit(Cypress.env('COMPOSER_URL'));
     cy.createBot('ToDoBotWithLuisSample');
   });

Composer/cypress/integration/SaveAs.spec.ts

@@ -4,19 +4,16 @@
 context('Saving As', () => {
   beforeEach(() => {
     cy.visit(Cypress.env('COMPOSER_URL'));
-    cy.createBot('ToDoBotWithLuisSample');
+    cy.createBot('EchoBot', 'TestBot');
   });
 
   it('can create a new bot from an existing bot', () => {
     cy.findByTestId('LeftNav-CommandBarButtonHome').click();
     cy.url().should('contain', 'home');
     cy.findByText('Save as').click();
-
     cy.findByTestId('NewDialogName').type('{selectall}__TestSaveAs{enter}');
-
     cy.findByTestId('ProjectTree').within(() => {
       cy.findByText('__TestSaveAs.Main').should('exist');
-      cy.findByText('View').should('exist');
     });
   });
 });

Composer/packages/client/src/App.tsx

@@ -80,6 +80,13 @@ const topLinks = (projectId: string, openedDialogId: string) => {
       exact: true,
       disabled: !botLoaded,
     },
+    {
+      to: `/bot/${projectId}/publish`,
+      iconName: 'CloudUpload',
+      labelName: formatMessage('Publish'),
+      exact: true,
+      disabled: !botLoaded,
+    },
     {
       to: `/bot/${projectId}/skills`,
       iconName: 'PlugDisconnected',

Composer/packages/client/src/components/TestController/index.tsx

@@ -7,35 +7,22 @@ import React, { useState, useRef, Fragment, useContext, useEffect, useCallback }
 import { PrimaryButton } from 'office-ui-fabric-react/lib/Button';
 import formatMessage from 'format-message';
 
+import { DefaultPublishConfig } from '../../constants';
+
 import settingsStorage from './../../utils/dialogSettingStorage';
 import { StoreContext } from './../../store';
 import { BotStatus, LuisConfig } from './../../constants';
 import { isAbsHosted } from './../../utils/envUtil';
 import { getReferredFiles } from './../../utils/luUtil';
 import useNotifications from './../../pages/notifications/useNotifications';
-import { navigateTo } from './../../utils';
+import { navigateTo, openInEmulator } from './../../utils';
 import { PublishLuisDialog } from './publishDialog';
 import { bot, botButton } from './styles';
 import { ErrorCallout } from './errorCallout';
 import { EmulatorOpenButton } from './emulatorOpenButton';
 import { Loading } from './loading';
 import { ErrorInfo } from './errorInfo';
 
-const openInEmulator = (url, authSettings: { MicrosoftAppId: string; MicrosoftAppPassword: string }) => {
-  // this creates a temporary hidden iframe to fire off the bfemulator protocol
-  // and start up the emulator
-  const i = document.createElement('iframe');
-  i.style.display = 'none';
-  i.onload = () => i.parentNode && i.parentNode.removeChild(i);
-  i.src = `bfemulator://livechat.open?botUrl=${encodeURIComponent(url)}&msaAppId=${
-    authSettings.MicrosoftAppId
-  }&msaAppPassword=${encodeURIComponent(authSettings.MicrosoftAppPassword)}`;
-  document.body.appendChild(i);
-};
-
-const defaultPublishConfig = {
-  name: 'default',
-};
 export const TestController: React.FC = () => {
   const { state, actions } = useContext(StoreContext);
   const [modalOpen, setModalOpen] = useState(false);
@@ -53,7 +40,7 @@ export const TestController: React.FC = () => {
 
   useEffect(() => {
     if (projectId) {
-      getPublishStatus(projectId, defaultPublishConfig);
+      getPublishStatus(projectId, DefaultPublishConfig);
     }
   }, [projectId]);
 
@@ -95,7 +82,7 @@ export const TestController: React.FC = () => {
   async function handleLoadBot() {
     setBotStatus(BotStatus.reloading);
     const sensitiveSettings = settingsStorage.get(botName);
-    await publishToTarget(state.projectId, { ...defaultPublishConfig, sensitiveSettings });
+    await publishToTarget(state.projectId, DefaultPublishConfig, { comment: '' }, sensitiveSettings);
   }
 
   function isLuisConfigComplete(config) {

Composer/packages/client/src/constants/index.ts

@@ -82,8 +82,9 @@ export enum ActionTypes {
   PUBLISH_SUCCESS = 'PUBLISH_SUCCESS',
   PUBLISH_FAILED = 'PUBLISH_FAILED',
   GET_PUBLISH_STATUS = 'GET_PUBLISH_STATUS',
+  GET_PUBLISH_STATUS_FAILED = 'GET_PUBLISH_STATUS_FAILED',
+  GET_PUBLISH_HISTORY = 'GET_PUBLISH_HISTORY',
   UPDATE_BOTSTATUS = 'UPDATE_BOTSTATUS',
-
   SET_USER_SETTINGS = 'SET_USER_SETTINGS',
   ADD_SKILL_DIALOG_BEGIN = 'ADD_SKILL_DIALOG_BEGIN',
   ADD_SKILL_DIALOG_END = 'ADD_SKILL_DIALOG_END',
@@ -221,3 +222,8 @@ export const SupportedFileTypes = [
 ];
 
 export const USER_TOKEN_STORAGE_KEY = 'composer.userToken';
+
+export const DefaultPublishConfig = {
+  name: 'default',
+  type: 'localpublish',
+};

Composer/packages/client/src/pages/design/styles.ts

@@ -23,7 +23,6 @@ export const projectContainer = css`
   flex-grow: 0;
   flex-shrink: 0;
   width: 255px;
-  height: 100%;
   overflow: auto;
   border-right: 1px solid #c4c4c4;
 `;

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

@@ -0,0 +1,88 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT License.
+
+/** @jsx jsx */
+import { jsx } from '@emotion/core';
+import formatMessage from 'format-message';
+import { Dropdown } from 'office-ui-fabric-react/lib/Dropdown';
+import { TextField } from 'office-ui-fabric-react/lib/TextField';
+import { DialogFooter } from 'office-ui-fabric-react/lib/Dialog';
+import { Fragment, useState } from 'react';
+import { PrimaryButton, DefaultButton } from 'office-ui-fabric-react/lib/Button';
+import { JsonEditor } from '@bfc/code-editor';
+
+import { label } from './styles';
+
+export const CreatePublishTarget = props => {
+  const [targetType, setTargetType] = useState(props.current ? props.current.type : '');
+  const [name, setName] = useState(props.current ? props.current.name : '');
+  const [config, setConfig] = useState(props.current ? JSON.parse(props.current.configuration) : {});
+  const [errorMessage, setErrorMsg] = useState('');
+
+  const updateType = (e, type) => {
+    setTargetType(type.key);
+  };
+  const updateConfig = newConfig => {
+    setConfig(newConfig);
+  };
+
+  const updateName = (e, newName) => {
+    setErrorMsg('');
+    setName(newName);
+    isNameValid(newName);
+  };
+
+  const isNameValid = newName => {
+    if (!newName || newName.trim() === '') {
+      setErrorMsg(formatMessage('Must have a name'));
+    } else {
+      const exists =
+        props.targets?.filter(t => {
+          return t.name.toLowerCase() === newName?.toLowerCase();
+        }).length > 0;
+      if (exists) {
+        setErrorMsg(formatMessage('A profile with that name already exists.'));
+      }
+    }
+  };
+
+  const isDisable = () => {
+    if (!targetType || !name || errorMessage) {
+      return true;
+    } else {
+      return false;
+    }
+  };
+
+  const submit = async () => {
+    await props.updateSettings(name, targetType, JSON.stringify(config, null, 2) || '{}');
+    props.closeDialog();
+  };
+
+  return (
+    <Fragment>
+      <form onSubmit={submit}>
+        <TextField
+          placeholder="My Publish Profile"
+          defaultValue={props.current ? props.current.name : null}
+          label={formatMessage('Name')}
+          onChange={updateName}
+          errorMessage={errorMessage}
+        />
+        <Dropdown
+          placeholder={formatMessage('Choose One')}
+          label={formatMessage('Publish Destination Type')}
+          options={props.targetTypes}
+          defaultSelectedKey={props.current ? props.current.type : null}
+          onChange={updateType}
+        />
+        <div css={label}>{formatMessage('Paste Configuration')}</div>
+        <JsonEditor onChange={updateConfig} height={200} value={config} />
+      </form>
+      <DialogFooter>
+        <DefaultButton onClick={props.closeDialog} text={formatMessage('Cancel')} />
+        <PrimaryButton onClick={submit} disabled={isDisable()} text={formatMessage('Save')} />
+      </DialogFooter>
+    </Fragment>
+  );
+};