Merge branch 'main' into sorgh/7194

microsoft · Apr 22, 2021 · b8f083d · b8f083d
2 parents 8be0817 + f24852f
commit b8f083d
Show file tree

Hide file tree

Showing 8 changed files with 116 additions and 39 deletions.
diff --git a/Composer/packages/client/src/components/BotRuntimeController/ErrorCallout.tsx b/Composer/packages/client/src/components/BotRuntimeController/ErrorCallout.tsx
@@ -33,8 +33,8 @@ const descriptionText = css`
 `;
 
 const descriptionLongText = css`
-  overflow: auto;
   font-size: small;
+  white-space: pre-wrap;
 `;
 const descriptionShow = css``;
 const descriptionHide = css`

diff --git a/Composer/packages/client/src/components/GetStarted/GetStartedNextSteps.tsx b/Composer/packages/client/src/components/GetStarted/GetStartedNextSteps.tsx
@@ -18,6 +18,8 @@ import { dispatcherState, settingsState } from '../../recoilModel';
 import { mergePropertiesManagedByRootBot } from '../../recoilModel/dispatchers/utils/project';
 import { rootBotProjectIdSelector } from '../../recoilModel/selectors/project';
 import { navigateTo } from '../../utils/navigation';
+import { DisableFeatureToolTip } from '../DisableFeatureToolTip';
+import { usePVACheck } from '../../hooks/usePVACheck';
 
 import { GetStartedTask } from './GetStartedTask';
 import { NextSteps } from './types';
@@ -48,6 +50,7 @@ export const GetStartedNextSteps: React.FC<GetStartedProps> = (props) => {
 
   const [highlightLUIS, setHighlightLUIS] = useState<boolean>(false);
   const [highlightQNA, setHighlightQNA] = useState<boolean>(false);
+  const isPVABot = usePVACheck(projectId);
 
   const hideManageLuis = () => {
     setDisplayManageLuis(false);
@@ -131,6 +134,7 @@ export const GetStartedNextSteps: React.FC<GetStartedProps> = (props) => {
             setDisplayManageLuis(true);
           }
         },
+        isDisabled: isPVABot,
       });
     }
     if (props.requiresQNA) {
@@ -151,6 +155,7 @@ export const GetStartedNextSteps: React.FC<GetStartedProps> = (props) => {
             setDisplayManageQNA(true);
           }
         },
+        isDisabled: isPVABot,
       });
     }
     setRequiredNextSteps(newNextSteps);
@@ -170,6 +175,7 @@ export const GetStartedNextSteps: React.FC<GetStartedProps> = (props) => {
           TelemetryClient.track('GettingStartedActionClicked', { taskName: 'publishing', priority: 'recommended' });
           openLink(linkToPublishProfile);
         },
+        isDisabled: false,
       });
     }
     setRecommendedNextSteps(newRecomendedSteps);
@@ -185,6 +191,7 @@ export const GetStartedNextSteps: React.FC<GetStartedProps> = (props) => {
           TelemetryClient.track('GettingStartedActionClicked', { taskName: 'packages', priority: 'optional' });
           openLink(linkToPackageManager);
         },
+        isDisabled: isPVABot,
       },
       {
         key: 'editlg',
@@ -196,6 +203,7 @@ export const GetStartedNextSteps: React.FC<GetStartedProps> = (props) => {
           TelemetryClient.track('GettingStartedActionClicked', { taskName: 'editlg', priority: 'optional' });
           openLink(linkToLGEditor);
         },
+        isDisabled: false,
       },
       {
         key: 'editlu',
@@ -207,6 +215,7 @@ export const GetStartedNextSteps: React.FC<GetStartedProps> = (props) => {
           TelemetryClient.track('GettingStartedActionClicked', { taskName: 'editlu', priority: 'optional' });
           openLink(linkToLUEditor);
         },
+        isDisabled: false,
       },
       {
         key: 'insights',
@@ -220,6 +229,7 @@ export const GetStartedNextSteps: React.FC<GetStartedProps> = (props) => {
           TelemetryClient.track('GettingStartedActionClicked', { taskName: 'insights', priority: 'optional' });
           openLink(linkToAppInsights);
         },
+        isDisabled: isPVABot,
       },
       {
         key: 'devops',
@@ -231,6 +241,7 @@ export const GetStartedNextSteps: React.FC<GetStartedProps> = (props) => {
           TelemetryClient.track('GettingStartedActionClicked', { taskName: 'devops', priority: 'optional' });
           openLink(linkToDevOps);
         },
+        isDisabled: false,
       },
     ];
 
@@ -245,12 +256,19 @@ export const GetStartedNextSteps: React.FC<GetStartedProps> = (props) => {
           TelemetryClient.track('GettingStartedActionClicked', { taskName: 'connections', priority: 'optional' });
           openLink(linkToConnections);
         },
+        isDisabled: isPVABot,
       });
     }
 
     setOptionalSteps(optSteps);
   }, [botProject, props.requiresLUIS, props.requiresQNA, props.showTeachingBubble]);
 
+  const getStartedTaskElement = (step: NextSteps) => (
+    <DisableFeatureToolTip key={'disableToolTip-' + step.key} isPVABot>
+      <GetStartedTask key={step.key} step={step} />
+    </DisableFeatureToolTip>
+  );
+
   return (
     <ScrollablePane styles={{ root: { marginTop: 60 } }}>
       <div css={{ paddingTop: 20, paddingLeft: 27, paddingRight: 20 }}>
@@ -304,27 +322,21 @@ export const GetStartedNextSteps: React.FC<GetStartedProps> = (props) => {
         {requiredNextSteps.length ? (
           <div>
             <h3 style={h3Style}>{formatMessage('Required')}</h3>
-            {requiredNextSteps.map((step) => (
-              <GetStartedTask key={step.key} step={step} />
-            ))}
+            {requiredNextSteps.map((step) => getStartedTaskElement(step))}
           </div>
         ) : null}
 
         {recommendedNextSteps.length ? (
           <div>
             <h3 style={h3Style}>{formatMessage('Recommended')}</h3>
-            {recommendedNextSteps.map((step) => (
-              <GetStartedTask key={step.key} step={step} />
-            ))}
+            {recommendedNextSteps.map((step) => getStartedTaskElement(step))}
           </div>
         ) : null}
 
         {optionalSteps.length ? (
           <div>
             <h3 style={h3Style}>{formatMessage('Optional')}</h3>
-            {optionalSteps.map((step) => (
-              <GetStartedTask key={step.key} step={step} />
-            ))}
+            {optionalSteps.map((step) => getStartedTaskElement(step))}
           </div>
         ) : null}
       </div>

diff --git a/Composer/packages/client/src/components/GetStarted/GetStartedTask.tsx b/Composer/packages/client/src/components/GetStarted/GetStartedTask.tsx
@@ -2,7 +2,7 @@
 // Licensed under the MIT License.
 
 /** @jsx jsx */
-import { jsx } from '@emotion/core';
+import { css, jsx } from '@emotion/core';
 import React from 'react';
 import { FluentTheme, SharedColors } from '@uifabric/fluent-theme';
 import { ActionButton } from 'office-ui-fabric-react/lib/Button';
@@ -15,6 +15,12 @@ type TaskProps = {
   step: NextSteps;
 };
 
+const getStartedStepStyle = (disabled?: boolean) => css`
+  margin-bottom: 20px;
+  pointer-events: ${disabled ? 'none' : 'auto'};
+  opacity: ${disabled ? 0.4 : 1};
+`;
+
 export const GetStartedTask: React.FC<TaskProps> = (props) => {
   const icon = props.step.checked ? 'CompletedSolid' : props.step.required ? 'Error' : 'Completed';
   const color = props.step.checked
@@ -23,7 +29,7 @@ export const GetStartedTask: React.FC<TaskProps> = (props) => {
     ? SharedColors.orange20
     : SharedColors.cyanBlue10;
   return (
-    <div css={{ marginBottom: 20 }}>
+    <div css={getStartedStepStyle(props.step.isDisabled)}>
       <ActionButton
         iconProps={{ iconName: icon, id: props.step.key }}
         styles={{

diff --git a/Composer/packages/client/src/components/GetStarted/types.ts b/Composer/packages/client/src/components/GetStarted/types.ts
@@ -10,4 +10,5 @@ export type NextSteps = {
   label: string;
   onClick: (step?: NextSteps) => void;
   highlight?: (step?: NextSteps) => void;
+  isDisabled: boolean;
 };
diff --git a/Composer/packages/client/src/components/NavItem.tsx b/Composer/packages/client/src/components/NavItem.tsx
@@ -42,6 +42,7 @@ const link = (active: boolean, disabled: boolean) => css`
     : `&:hover {
       background-color: ${NeutralColors.gray50};
     }
+
     &:focus {
       outline: none;
       .ms-Fabric--isFocusVisible &::after {

diff --git a/Composer/packages/client/src/pages/botProject/adapters/ABSChannels.tsx b/Composer/packages/client/src/pages/botProject/adapters/ABSChannels.tsx
@@ -139,8 +139,8 @@ export const ABSChannels: React.FC<RuntimeSettingsProps> = (props) => {
         const config = JSON.parse(profile.configuration);
         setCurrentResource({
           microsoftAppId: config?.settings?.MicrosoftAppId,
-          resourceName: config.name,
-          resourceGroupName: config.resourceGroup || config.name,
+          resourceName: config.botName || config.name,
+          resourceGroupName: config.resourceGroup || config.botName || config.name,
           subscriptionId: config.subscriptionId,
         });
       }

diff --git a/...ackages/client/src/pages/design/DebugPanel/TabExtensions/WebChatLog/WebChatLogContent.tsx b/...ackages/client/src/pages/design/DebugPanel/TabExtensions/WebChatLog/WebChatLogContent.tsx
@@ -8,41 +8,58 @@ import { useRecoilValue } from 'recoil';
 import { ConversationTrafficItem } from '@botframework-composer/types/src';
 import formatMessage from 'format-message';
 import debounce from 'lodash/debounce';
+import { ActionButton } from 'office-ui-fabric-react/lib/Button';
+import { FontWeights } from 'office-ui-fabric-react/lib/Styling';
+import { SharedColors } from '@uifabric/fluent-theme';
 
 import {
   dispatcherState,
   rootBotProjectIdSelector,
   webChatTrafficState,
   webChatInspectionDataState,
+  botStatusState,
 } from '../../../../../recoilModel';
 import { DebugPanelTabHeaderProps } from '../types';
 import { WebChatInspectionData } from '../../../../../recoilModel/types';
+import { BotStatus } from '../../../../../constants';
+import { useBotOperations } from '../../../../../components/BotRuntimeController/useBotOperations';
+import { usePVACheck } from '../../../../../hooks/usePVACheck';
 
 import { WebChatInspectorPane } from './WebChatInspectorPane';
 import { WebChatActivityLogItem } from './WebChatActivityLogItem';
 import { WebChatNetworkLogItem } from './WebChatNetworkLogItem';
 
-const emptyStateMessage = css`
-  padding-left: 16px;
-`;
-
 const logContainer = (isActive: boolean) => css`
   height: 100%;
   display: ${!isActive ? 'none' : 'flex'};
   overflow: auto;
   flex-direction: row;
 `;
 
-const logPane = css`
+const logPane = (trafficLength: number) => css`
   height: 100%;
   width: 100%;
   display: flex;
   overflow: auto;
   flex-direction: column;
-  padding: 16px 0;
+  padding: ${trafficLength ? '16px 0' : '4px 0'};
   box-sizing: border-box;
 `;
 
+const emptyStateMessageContainer = css`
+  padding: 0px 16px;
+  font-size: 12px;
+`;
+
+const actionButton = {
+  root: {
+    fontSize: 12,
+    fontWeight: FontWeights.regular,
+    color: SharedColors.cyanBlue10,
+    paddingLeft: 0,
+  },
+};
+
 const itemIsSelected = (item: ConversationTrafficItem, currentInspectionData?: WebChatInspectionData) => {
   return item.id === currentInspectionData?.item?.id;
 };
@@ -55,7 +72,10 @@ export const WebChatLogContent: React.FC<DebugPanelTabHeaderProps> = ({ isActive
   const [navigateToLatestEntry, navigateToLatestEntryWhenActive] = useState(false);
   const [currentLogItemCount, setLogItemCount] = useState<number>(0);
   const webChatContainerRef = useRef<HTMLDivElement | null>(null);
-  const { setWebChatInspectionData } = useRecoilValue(dispatcherState);
+  const { setWebChatInspectionData, setWebChatPanelVisibility } = useRecoilValue(dispatcherState);
+  const currentStatus = useRecoilValue(botStatusState(currentProjectId ?? ''));
+  const { startAllBots } = useBotOperations();
+  const isPVABot = usePVACheck(currentProjectId ?? '');
 
   const navigateToNewestLogEntry = () => {
     if (currentLogItemCount && webChatContainerRef?.current) {
@@ -160,14 +180,49 @@ export const WebChatLogContent: React.FC<DebugPanelTabHeaderProps> = ({ isActive
     }
   };
 
+  const onOpenWebChatPanelClick = () => {
+    setWebChatPanelVisibility(true);
+  };
+
+  const noWebChatTrafficSection = useMemo(() => {
+    if (isPVABot) {
+      return null;
+    }
+
+    if (currentStatus === BotStatus.inactive) {
+      return (
+        <div css={emptyStateMessageContainer}>
+          {formatMessage.rich('Your bot project is not running. <actionButton>Start your bot</actionButton>', {
+            actionButton: ({ children }) => (
+              <ActionButton key="webchat-tab-startbot" styles={actionButton} type="button" onClick={startAllBots}>
+                {children}
+              </ActionButton>
+            ),
+          })}
+        </div>
+      );
+    }
+
+    if (currentStatus === BotStatus.connected) {
+      return (
+        <div css={emptyStateMessageContainer}>
+          {formatMessage.rich('Your bot project is running. <actionButton>Test in Web Chat</actionButton>', {
+            actionButton: ({ children }) => (
+              <ActionButton key="webchat-tab-openWC" styles={actionButton} onClick={onOpenWebChatPanelClick}>
+                {children}
+              </ActionButton>
+            ),
+          })}
+        </div>
+      );
+    }
+    return null;
+  }, [currentStatus]);
+
   return (
     <div css={logContainer(isActive)}>
-      <div ref={webChatContainerRef} css={logPane} data-testid="Webchat-Logs-Container">
-        {displayedTraffic.length ? (
-          displayedTraffic
-        ) : (
-          <span css={emptyStateMessage}>{formatMessage('No Web Chat activity yet.')}</span>
-        )}
+      <div ref={webChatContainerRef} css={logPane(displayedTraffic.length)} data-testid="Webchat-Logs-Container">
+        {displayedTraffic.length ? displayedTraffic : noWebChatTrafficSection}
       </div>
       <WebChatInspectorPane inspectionData={inspectionData} onSetInspectionData={setInspectionData} />
     </div>