Merge branch 'main' into southworks/fix/alerts

Author: tracyboehrer

Composer/packages/adaptive-form/src/components/CollapseField.tsx

@@ -29,7 +29,7 @@ const styles = {
     display: flex;
     margin: 4px -18px;
     align-items: center;
-    width: 100%;
+    width: auto;
   `,
 };
 

Composer/packages/client/src/components/Page.tsx

@@ -187,7 +187,7 @@ const Page: React.FC<IPageProps> = (props) => {
         resetOnDoubleClick
         initialPrimarySize="20%"
         minPrimarySize="200px"
-        minSecondarySize="800px"
+        minSecondarySize="750px"
         renderSplitter={renderThinSplitter}
         onMeasuredSizesChanged={onMeasuredSizesChanged}
       >

Composer/packages/client/src/components/WebChat/WebChatPanel.tsx

@@ -22,7 +22,7 @@ import { WebChatHeader } from './WebChatHeader';
 import { WebChatComposer } from './WebChatComposer';
 import { BotSecret, ChatData, RestartOption } from './types';
 
-const BASEPATH = process.env.PUBLIC_URL || 'http://localhost:3000/';
+const BASEPATH = process.env.PUBLIC_URL || `http://${location.hostname}:3000/`;
 // TODO: Refactor to include Webchat header component as a part of WebchatComposer to avoid this variable.
 const webChatHeaderHeight = '85px';
 
@@ -67,7 +67,7 @@ export const WebChatPanel: React.FC<WebChatPanelProps> = ({
       const conversationServerPort = await conversationService.setUpConversationServer();
       try {
         // set up Web Chat traffic listener
-        webChatTrafficChannel.current = new WebSocket(`ws://localhost:${conversationServerPort}/ws/traffic`);
+        webChatTrafficChannel.current = new WebSocket(`ws://${location.hostname}:${conversationServerPort}/ws/traffic`);
         if (webChatTrafficChannel.current) {
           webChatTrafficChannel.current.onmessage = (event) => {
             const data:

Composer/packages/client/src/components/WebChat/utils/conversationService.ts

@@ -80,7 +80,7 @@ export class ConversationService {
       secret,
       domain: `${this.directlineHostUrl}/v3/directline`,
       webSocket: true,
-      streamUrl: `ws://localhost:${this.restServerForWSPort}/ws/conversation/${conversationId}`,
+      streamUrl: `ws://${location.hostname}:${this.restServerForWSPort}/ws/conversation/${conversationId}`,
     });
     return directLine;
   }

Composer/packages/client/src/constants.tsx

@@ -527,7 +527,7 @@ export const defaultTeamsManifest: TeamsManifest = {
 };
 
 export const defaultBotPort = 3979;
-export const defaultBotEndpoint = `http://localhost:${defaultBotPort}/api/messages`;
+export const defaultBotEndpoint = `http://${location.hostname}:${defaultBotPort}/api/messages`;
 
 const DAYS_IN_MS = 1000 * 60 * 60 * 24;
 export const SURVEY_PARAMETERS = {

Composer/packages/client/src/pages/botProject/adapters/ExternalAdapterSettings.tsx

@@ -2,7 +2,7 @@
 // Licensed under the MIT License.
 
 /** @jsx jsx */
-import { jsx } from '@emotion/react';
+import { jsx, css } from '@emotion/react';
 import { useState, Fragment } from 'react';
 import formatMessage from 'format-message';
 import { useRecoilValue } from 'recoil';
@@ -29,6 +29,10 @@ type Package = {
   packageName?: string;
 };
 
+const tableOverflowStyle = css`
+  overflow: hidden;
+`;
+
 const ExternalAdapterSettings = (props: Props) => {
   const { projectId } = props;
 
@@ -54,7 +58,7 @@ const ExternalAdapterSettings = (props: Props) => {
   if (schemaDefinitions == null) return null;
 
   const externalServices = (schemas: (JSONSchema7 & Package)[]) => (
-    <div role="table">
+    <div css={tableOverflowStyle} role="table">
       <div css={tableHeaderRow} role="row">
         <div css={tableColumnHeader(columnSizes[0])} role="columnheader">
           {formatMessage('Name')}

Composer/packages/client/src/pages/design/DebugPanel/TabExtensions/RuntimeOutputLog/OutputTabContent.tsx

@@ -112,9 +112,9 @@ export const OutputsTabContent: React.FC<DebugPanelTabHeaderProps> = ({ isActive
     >
       <Split
         resetOnDoubleClick
-        initialPrimarySize="200px"
-        minPrimarySize="250px"
-        minSecondarySize="600px"
+        initialPrimarySize="20%"
+        minPrimarySize="200px"
+        minSecondarySize="700px"
         renderSplitter={renderThinSplitter}
         splitterSize="5px"
       >

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

@@ -47,7 +47,7 @@ const DesignPage: React.FC<RouteComponentProps<{ dialogId: string; projectId: st
           resetOnDoubleClick
           initialPrimarySize="20%"
           minPrimarySize="200px"
-          minSecondarySize="800px"
+          minSecondarySize="750px"
           renderSplitter={renderThinSplitter}
           splitterSize="5px"
           onMeasuredSizesChanged={onMeasuredSizesChanged}
@@ -67,8 +67,8 @@ const DesignPage: React.FC<RouteComponentProps<{ dialogId: string; projectId: st
                 <Split
                   resetOnDoubleClick
                   initialPrimarySize="65%"
-                  minPrimarySize="500px"
-                  minSecondarySize="350px"
+                  minPrimarySize="450px"
+                  minSecondarySize="300px"
                   renderSplitter={renderThinSplitter}
                 >
                   <VisualPanel projectId={activeBot} />

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

@@ -76,11 +76,6 @@ export const splitPaneWrapper = css`
   flex-grow: 1;
   overflow: hidden;
   height: 100%;
-  @media screen and (max-width: 1080px) {
-    .secondary {
-      padding-right: 40px;
-    }
-  }
 `;
 
 export const visualPanel = css`

Composer/packages/client/src/pages/form-dialog/FormDialogPage.tsx

@@ -198,7 +198,7 @@ const FormDialogPage: React.FC<Props> = React.memo((props: Props) => {
           resetOnDoubleClick
           initialPrimarySize="320px"
           minPrimarySize="320px"
-          minSecondarySize="800px"
+          minSecondarySize="630px"
           renderSplitter={renderThinSplitter}
           onMeasuredSizesChanged={onMeasuredSizesChanged}
         >

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

@@ -29,15 +29,18 @@ export const leftPage = css`
   padding: 0 24px 24px 24px;
   display: flex;
   flex-direction: column;
+  max-width: 100%;
+  overflow: hidden;
 `;
 
 export const rightPage = css`
   flex: 1;
   padding-right: 24px;
   display: flex;
   flex-direction: column;
-  position: sticky;
-  left: 0;
+  @media (max-width: 1024px) {
+    flex: 50%;
+  }
 `;
 
 export const title = css`
@@ -64,6 +67,9 @@ export const introduction = css`
 export const rowContainer = css`
   display: flex;
   margin-top: 12px;
+  overflow-x: auto;
+  padding-bottom: 12px;
+  gap: 12px;
 `;
 
 export const recentBotsContainer = css`
@@ -88,9 +94,11 @@ export const pivotContainer = css`
 `;
 
 export const tabRowContainer = css`
-  flex-wrap: wrap;
   display: flex;
   clear: both;
+  overflow-x: auto;
+  padding-bottom: 12px;
+  gap: 12px;
 `;
 
 export const tabRowViewMore = css`
@@ -109,7 +117,8 @@ export const tabRowViewMore = css`
 
 export const cardWrapper = css`
   display: flex;
-  margin-right: 12px;
+  flex-basis: 25%;
+  min-width: ${ImageCoverWidth}px;
 `;
 
 export const itemContainerWrapper = (disabled?: boolean) => css`
@@ -188,16 +197,7 @@ export const newsDescription = css`
 export const cardItem = {
   container: css`
     font-size: ${fonts.medium.fontSize};
-    margin: 12px 0 0 12px;
-    &:first-child {
-      margin-left: 0;
-    }
     padding: 12px;
-    min-width: ${ImageCoverWidth}px;
-    width: 17vw;
-    @media (max-width: 1416px) {
-      width: 20vw;
-    }
     text-align: left;
     border: 1px #efedeb solid;
     box-shadow: ${Depths.depth4};
@@ -329,9 +329,8 @@ export const whatsNewsContainer = css`
   border-radius: 5px;
   margin: 20px 0 24px 0;
   background: #f6f6f6;
-  @media (max-width: 1416px) {
+  @media (max-width: 1024px) {
     background: none;
-    min-width: 200px;
     margin: 15px 0 0 0;
   }
 `;

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

@@ -2,8 +2,8 @@
 // Licensed under the MIT License.
 
 /** @jsx jsx */
-import { jsx } from '@emotion/react';
-import { useState, useEffect, useMemo, Fragment, useRef } from 'react';
+import { jsx, css } from '@emotion/react';
+import { useState, useEffect, useMemo, useRef } from 'react';
 import { navigate, RouteComponentProps } from '@reach/router';
 import formatMessage from 'format-message';
 import { useRecoilValue } from 'recoil';
@@ -55,6 +55,19 @@ const SKILL_PUBLISH_STATUS = {
   PUBLISHED: 'published',
   CANCEL: 'cancel',
 };
+
+const publishContainerStyle = css`
+  display: flex;
+  flex-flow: column nowrap;
+  height: calc(100% - 1px);
+`;
+
+const publishPivotStyle = css`
+  flex: auto;
+  display: flex;
+  flex-flow: column nowrap;
+`;
+
 const Publish: React.FC<RouteComponentProps<{ projectId: string; targetName?: string }>> = (props) => {
   const { projectId = '' } = props;
   const botProjectData = useRecoilValue(localBotsDataSelector);
@@ -425,7 +438,7 @@ const Publish: React.FC<RouteComponentProps<{ projectId: string; targetName?: st
   };
 
   return (
-    <Fragment>
+    <div css={publishContainerStyle}>
       {publishDialogVisible && (
         <PublishDialog
           items={selectedBots.filter((bot) => !!bot.publishTarget)}
@@ -461,8 +474,9 @@ const Publish: React.FC<RouteComponentProps<{ projectId: string; targetName?: st
       </div>
 
       <Pivot
+        css={publishPivotStyle}
         selectedKey={activeTab}
-        styles={{ root: { marginLeft: 12 } }}
+        styles={{ root: { marginLeft: 12 }, itemContainer: { flex: 'auto', '> div': { height: '100%' } } }}
         onLinkClick={(link) => {
           setActiveTab(link?.props?.itemKey || '');
           if (link?.props.itemKey) {
@@ -488,7 +502,7 @@ const Publish: React.FC<RouteComponentProps<{ projectId: string; targetName?: st
           </div>
         </PivotItem>
         <PivotItem headerText={formatMessage('Publishing profile')} itemKey={'addNewPublishProfile'}>
-          <Stack horizontal verticalFill styles={{ root: { borderTop: '1px solid #CCC' } }}>
+          <Stack horizontal verticalFill styles={{ root: { borderTop: '1px solid #CCC', height: '100%' } }}>
             {botProjectData && botProjectData.length > 1 && (
               <Stack.Item styles={{ root: { width: '175px', borderRight: '1px solid #CCC' } }}>
                 <ProjectList
@@ -504,7 +518,7 @@ const Publish: React.FC<RouteComponentProps<{ projectId: string; targetName?: st
           </Stack>
         </PivotItem>
       </Pivot>
-    </Fragment>
+    </div>
   );
 };
 

Composer/packages/client/src/pages/setting/SettingsPage.tsx

@@ -37,7 +37,7 @@ const pageWrapper = css`
   overflow: auto;
   height: 100%;
   > div {
-    min-width: 1030px;
+    min-width: 960px;
     min-height: 400px;
   }
 `;

Composer/packages/client/src/router.tsx

@@ -174,7 +174,7 @@ const projectWrapper = css`
 
 const projectStyle = css`
   flex: auto;
-  min-width: 1030px;
+  min-width: 960px;
   min-height: 400px;
 
   & > div {

Composer/packages/electron-server/locales/en-US.json

@@ -122,4 +122,4 @@
   "zoom_out_dc7d60d2": {
     "message": "Zoom Out"
   }
-}
+}

Composer/packages/electron-server/src/main.ts

@@ -41,13 +41,14 @@ const waitForMainWindowToShow = new Promise((resolve) => {
 
 // webpack dev server runs on :3000
 const getBaseUrl = () => {
+  const host = process.env.COMPOSER_HOST ?? 'localhost';
   if (isDevelopment) {
-    return 'http://localhost:3000/';
+    return `http://${host}:3000/`;
   }
   if (!serverPort) {
     throw new Error('getBaseUrl() called before serverPort is defined.');
   }
-  return `http://localhost:${serverPort}/`;
+  return `http://${host}:${serverPort}/`;
 };
 
 // set production flag

Composer/packages/server/src/controllers/publisher.ts

@@ -15,6 +15,7 @@ import AssetService from '../services/asset';
 import logger from '../logger';
 import { LocationRef } from '../models/bot/interface';
 import { TelemetryService } from '../services/telemetry';
+import { serverListenHost, serverHostname } from '../settings/env';
 
 const log = logger.extend('publisher-controller');
 
@@ -318,7 +319,7 @@ export const PublishController = {
       const pluginMethod = ExtensionContext.extensions.publish[extensionName].methods.setupRuntimeLogServer;
       if (typeof pluginMethod === 'function') {
         try {
-          const runtimeLogUrl = await pluginMethod.call(null, projectId);
+          const runtimeLogUrl = await pluginMethod.call(null, projectId, serverHostname, serverListenHost);
           return res.status(200).send(runtimeLogUrl);
         } catch (ex) {
           res.status(400).json({

Composer/packages/server/src/directline/store/dlServerState.ts

@@ -1,6 +1,8 @@
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT License.
 
+import { serverHostname } from '../../settings/env';
+
 import { BotEndpoint } from './entities/botEndpoint';
 import { Attachments } from './entities/attachments';
 import { ConversationSet } from './entities/conversationSet';
@@ -27,7 +29,7 @@ class DLServerContext {
       conversations: new ConversationSet(),
       endpoints: new EndpointSet(),
       attachments: new Attachments(),
-      serviceUrl: serverPort ? `http://localhost:${serverPort}` : '',
+      serviceUrl: serverPort ? `http://${serverHostname}:${serverPort}` : '',
       dispatchers: {
         getDefaultEndpoint: this.getDefaultEndpoint,
         updateConversation: this.updateConversation,

Composer/packages/server/src/directline/utils/webSocketServer.ts

@@ -13,6 +13,8 @@ import {
   ConversationNetworkTrafficItem,
 } from '@botframework-composer/types';
 
+import { serverListenHost } from '../../settings/env';
+
 import log from './logger';
 
 const socketTrafficChannelKey = 'DL_TRAFFIC_SOCKET';
@@ -87,7 +89,7 @@ export class WebSocketServer {
       });
       this.port = port;
       log(`Using ${port} port for directline`);
-      this.restServer.listen(port);
+      this.restServer.listen(port, serverListenHost);
 
       app.use('/ws/conversation/:conversationId', (req: express.Request, res: express.Response) => {
         if (!(req as any).claimUpgrade) {