Merge b68336c into e45b24f

packages/app/client/src/ui/editor/welcomePage/welcomePage.scss

@@ -12,6 +12,10 @@
   top: -16px;
 }
 
+.beta-label  {
+  color: var(--welcome-beta-label);
+}
+
 .section {
   margin-bottom: 34px;
   max-width: 100%;

packages/app/client/src/ui/editor/welcomePage/welcomePage.scss.d.ts

@@ -1,6 +1,7 @@
 // This is a generated file. Changes are likely to result in being overwritten
 export const rightColumn: string;
 export const versionNumber: string;
+export const betaLabel: string;
 export const section: string;
 export const well: string;
 export const openBot: string;

packages/app/client/src/ui/editor/welcomePage/welcomePage.spec.tsx

@@ -39,13 +39,14 @@ import { combineReducers, createStore } from 'redux';
 import { azureArmTokenDataChanged } from '../../../data/action/azureAuthActions';
 import * as BotActions from '../../../data/action/botActions';
 import { azureAuth } from '../../../data/reducer/azureAuthReducer';
+import { clientAwareSettings } from '../../../data/reducer/clientAwareSettingsReducer';
 import { bot } from '../../../data/reducer/bot';
 import { CommandServiceImpl } from '../../../platform/commands/commandServiceImpl';
 
 import { WelcomePage } from './welcomePage';
 import { WelcomePageContainer } from './welcomePageContainer';
 
-const mockStore = createStore(combineReducers({ azureAuth, bot }));
+const mockStore = createStore(combineReducers({ azureAuth, bot, clientAwareSettings }));
 jest.mock('./welcomePage.scss', () => ({}));
 jest.mock('../../layout/genericDocument.scss', () => ({}));
 jest.mock('../recentBotsList/recentBotsList.scss', () => ({}));

packages/app/client/src/ui/editor/welcomePage/welcomePage.tsx

@@ -32,8 +32,9 @@
 //
 
 import { BotInfo } from '@bfemulator/app-shared';
-import { Column, LargeHeader, PrimaryButton, Row, SmallHeader } from '@bfemulator/ui-react';
+import { Column, LargeHeader, PrimaryButton, Row, SmallHeader, MediumHeader } from '@bfemulator/ui-react';
 import * as React from 'react';
+import { DebugMode } from '@bfemulator/app-shared';
 
 import { GenericDocument } from '../../layout';
 import { RecentBotsListContainer } from '../recentBotsList/recentBotsListContainer';
@@ -49,6 +50,7 @@ export interface WelcomePageProps {
   signInWithAzure?: () => void;
   signOutWithAzure?: () => void;
   switchToBot?: (path: string) => Promise<any>;
+  debugMode?: number;
 }
 
 export class WelcomePage extends React.Component<WelcomePageProps, {}> {
@@ -57,17 +59,20 @@ export class WelcomePage extends React.Component<WelcomePageProps, {}> {
   }
 
   public render(): JSX.Element {
-    const { startSection, signInSection } = this;
+    const { startSection, signInSection, headerSection } = this;
 
     return (
       <GenericDocument>
         <Row>
           <Column className={styles.spacing}>
-            <LargeHeader>Bot Framework Emulator</LargeHeader>
-            <span className={styles.versionNumber}>Version 4</span>
+            {headerSection}
             {startSection}
-            <RecentBotsListContainer onBotSelected={this.onBotSelected} />
-            {signInSection}
+            {this.props.debugMode === DebugMode.Normal && (
+              <React.Fragment>
+                <RecentBotsListContainer onBotSelected={this.onBotSelected} />
+                {signInSection}
+              </React.Fragment>
+            )}
           </Column>
           <Column className={styles.rightColumn}>
             <HowToBuildABot />
@@ -77,12 +82,30 @@ export class WelcomePage extends React.Component<WelcomePageProps, {}> {
     );
   }
 
+  private get headerSection(): JSX.Element {
+    return (
+      <React.Fragment>
+        <LargeHeader>Bot Framework Emulator</LargeHeader>
+        {this.props.debugMode === DebugMode.Sidecar && (
+          <div style={{ marginBottom: '15px' }}>
+            <MediumHeader>
+              Bot Inspector <span className={styles.betaLabel}>(BETA)</span>
+            </MediumHeader>
+          </div>
+        )}
+        <span className={styles.versionNumber}>Version 4</span>
+      </React.Fragment>
+    );
+  }
+
   private get startSection(): JSX.Element {
     return (
       <div className={styles.section}>
         <SmallHeader className={styles.marginFix}>Start by testing your bot</SmallHeader>
         <span>
-          Start talking to your bot by connecting to an endpoint or by opening a bot saved locally.
+          {this.props.debugMode === DebugMode.Normal
+            ? 'Start talking to your bot by connecting to an endpoint or by opening a bot saved locally.'
+            : 'Start talking to your bot by connecting to an endpoint.'}
           <br />
           <a className={styles.ctaLink} href="https://aka.ms/bot-framework-emulator-create-bot-locally">
             More about working locally with a bot.
@@ -91,12 +114,14 @@ export class WelcomePage extends React.Component<WelcomePageProps, {}> {
         <Row>
           <PrimaryButton className={styles.openBot} text="Open Bot" onClick={this.onOpenBotClick} />
         </Row>
-        <span>
-          If you don’t have a bot configuration,&nbsp;
-          <button className={styles.ctaLink} onClick={this.props.onNewBotClick}>
-            create a new bot configuration.
-          </button>
-        </span>
+        {this.props.debugMode === DebugMode.Normal && (
+          <span>
+            If you don’t have a bot configuration,&nbsp;
+            <button className={styles.ctaLink} onClick={this.props.onNewBotClick}>
+              create a new bot configuration.
+            </button>
+          </span>
+        )}
       </div>
     );
   }

packages/app/client/src/ui/editor/welcomePage/welcomePageContainer.ts

@@ -44,6 +44,7 @@ import { WelcomePage, WelcomePageProps } from './welcomePage';
 function mapStateToProps(state: RootState, ownProps: WelcomePageProps): WelcomePageProps {
   return {
     ...ownProps,
+    debugMode: state.clientAwareSettings.debugMode,
     accessToken: state.azureAuth.access_token,
   };
 }

packages/app/client/src/ui/styles/themes/dark.css

@@ -186,6 +186,7 @@ html {
   --welcome-page-ver: var(--neutral-8);
   --welcome-how-to-border: var(--neutral-6);
   --welcome-how-to-test: var(--p-button-bg);
+  --welcome-beta-label: var(--warning-outline);
   --my-bots-well-bg: var(--neutral-13);
   --my-bots-well-border: 0;
   --my-bots-entry-bg: var(--neutral-12);

packages/app/client/src/ui/styles/themes/high-contrast.css

@@ -185,6 +185,7 @@ html {
   --welcome-page-ver: var(--neutral-2);
   --welcome-how-to-border: var(--neutral-6);
   --welcome-how-to-test: #3062D6;
+  --welcome-beta-label: var(--warning-outline);
   --my-bots-well-bg: transparent;
   --my-bots-well-border: 1px solid #72C3DF;
   --my-bots-entry-bg: transparent;

packages/app/client/src/ui/styles/themes/light.css

@@ -185,6 +185,7 @@ html {
   --welcome-page-ver: var(--neutral-8);
   --welcome-how-to-border: var(--neutral-6);
   --welcome-how-to-test: var(--p-button-bg);
+  --welcome-beta-label: var(--warning-outline);
   --my-bots-well-bg: var(--neutral-3);
   --my-bots-well-border: 0;
   --my-bots-entry-bg: var(--neutral-4);