feat: updated "Get started" flow available on every page

Composer/packages/client/__tests__/routers.test.tsx

@@ -12,6 +12,10 @@ import { wrapWithRecoil } from './testUtils';
 jest.mock('axios', () => ({
   create: jest.fn().mockReturnThis(),
   get: jest.fn(),
+  request: jest.fn(),
+  interceptors: {
+    request: { use: jest.fn() },
+  },
 }));
 
 function renderWithRouter(ui, { route = '/dialogs/home', history = createHistory(createMemorySource(route)) } = {}) {

Composer/packages/client/package.json

@@ -19,7 +19,12 @@
   },
   "proxy": "http://localhost:5000",
   "dependencies": {
+    "@azure/arm-appinsights": "^3.0.0",
     "@azure/arm-subscriptions": "^3.0.0",
+    "@azure/arm-cognitiveservices":  "^5.2.0",
+    "@azure/arm-search": "^1.3.0",
+    "@azure/arm-appservice": "^6.0.0",
+    "@azure/arm-resources":"^4.0.0",
     "@bfc/adaptive-flow": "*",
     "@bfc/adaptive-form": "*",
     "@bfc/code-editor": "*",

Composer/packages/client/src/components/BotRuntimeController/BotController.tsx

@@ -224,6 +224,7 @@ const BotController: React.FC<BotControllerProps> = ({ onHideController, isContr
               },
             },
           }}
+          id={'startbot'}
           menuAs={() => null}
           styles={{
             root: {

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

@@ -4,148 +4,75 @@
 /** @jsx jsx */
 import { jsx } from '@emotion/core';
 import React from 'react';
-import { useRecoilValue } from 'recoil';
 import formatMessage from 'format-message';
-import { Stack } from 'office-ui-fabric-react/lib/Stack';
-import { Link } from 'office-ui-fabric-react/lib/Link';
-import { Panel } from 'office-ui-fabric-react/lib/Panel';
+import { Panel, IPanelStyles } from 'office-ui-fabric-react/lib/Panel';
+import { Pivot, PivotItem } from 'office-ui-fabric-react/lib/Pivot';
 
-import { localBotsDataSelector } from '../../recoilModel/selectors/project';
-import { currentProjectIdState, locationState } from '../../recoilModel';
-import TelemetryClient from '../../telemetry/TelemetryClient';
-
-import { h3Style, ulStyle, liStyle } from './styles';
+import { GetStartedNextSteps } from './GetStartedNextSteps';
+import { GetStartedLearn } from './GetStartedLearn';
 
 type GetStartedProps = {
   isOpen: boolean;
+  showTeachingBubble: boolean;
+  requiresLUIS: boolean;
+  requiresQNA: boolean;
   onDismiss: () => void;
+  onBotReady: () => void;
 };
 
-export const GetStarted: React.FC<GetStartedProps> = (props) => {
-  const projectId = useRecoilValue(currentProjectIdState);
-  const location = useRecoilValue(locationState(projectId));
-  const botProjects = useRecoilValue(localBotsDataSelector);
-  const botProject = botProjects.find((b) => b.projectId === projectId);
+export type NextSteps = {
+  checked: boolean;
+  key: string;
+  label: string;
+  checkedLabel: string;
+  onClick: () => void;
+};
 
-  const linkToPackageManager = `/bot/${projectId}/plugin/package-manager/package-manager`;
-  const linkToConnections = `/bot/${projectId}/botProjectsSettings/#connections`;
-  const linkToProvision = `/bot/${projectId}/botProjectsSettings/#addNewPublishProfile`;
-  const linkToPublish = `/bot/${projectId}/publish`;
-  const linkToLGEditor = `/bot/${projectId}/language-generation`;
-  const linkToLUEditor = `/bot/${projectId}/language-understanding`;
-  const linkToAdaptiveExpressions =
-    'https://docs.microsoft.com/en-us/azure/bot-service/bot-builder-concept-adaptive-expressions?view=azure-bot-service-4.0&tabs=arithmetic';
-  const linkToGetStarted = 'https://docs.microsoft.com/en-us/composer/introduction';
-  const linkToCreateFirstBot = 'https://docs.microsoft.com/en-us/composer/quickstart-create-bot';
-  const linkToTutorials = 'https://docs.microsoft.com/en-us/composer/tutorial/tutorial-introduction';
-  const linkToLGFileFormat =
-    'https://docs.microsoft.com/en-us/azure/bot-service/file-format/bot-builder-lg-file-format?view=azure-bot-service-4.0';
-  const linkToLUFileFormat =
-    'https://docs.microsoft.com/en-us/azure/bot-service/file-format/bot-builder-lu-file-format?view=azure-bot-service-4.0';
-  const linkToPreBuiltExpressions =
-    'https://docs.microsoft.com/en-us/azure/bot-service/adaptive-expressions/adaptive-expressions-prebuilt-functions?view=azure-bot-service-4.0';
+const panelStyles = {
+  root: {
+    marginTop: 50,
+  },
+  navigation: {
+    display: 'block',
+    height: 'auto',
+  },
+} as IPanelStyles;
 
-  const linkClick = (event) => {
-    props.onDismiss();
-    TelemetryClient.track('GettingStartedLinkClicked', { method: 'link', url: event.target.href });
+export const GetStarted: React.FC<GetStartedProps> = (props) => {
+  const renderTabs = () => {
+    return (
+      <Pivot styles={{ root: { paddingLeft: 20, paddingTop: 10, width: '100%' } }}>
+        <PivotItem headerText={formatMessage('Next steps')}>
+          <GetStartedNextSteps
+            requiresLUIS={props.requiresLUIS}
+            requiresQNA={props.requiresQNA}
+            showTeachingBubble={props.showTeachingBubble}
+            onBotReady={props.onBotReady}
+            onDismiss={props.onDismiss}
+          />
+        </PivotItem>
+        <PivotItem headerText={formatMessage('Learning')}>
+          <GetStartedLearn />
+        </PivotItem>
+      </Pivot>
+    );
   };
 
+  const onRenderNavigationContent = React.useCallback(
+    (props, defaultRender) => (
+      <div css={{ position: 'absolute', top: 15, right: 0, zIndex: 1 }}>{defaultRender(props)}</div>
+    ),
+    []
+  );
+
   return (
-    <Panel headerText={botProject?.name} isOpen={props.isOpen} onDismiss={props.onDismiss}>
-      <Stack>
-        <Stack.Item grow={0}>
-          <p>
-            {formatMessage('File Location:')}
-            <span
-              style={{
-                display: 'inline-block',
-                overflowWrap: 'break-word',
-                maxWidth: '100%',
-                fontSize: 12,
-              }}
-            >
-              {location}
-            </span>
-          </p>
-        </Stack.Item>
-        <Stack.Item>
-          <h3 style={h3Style}>{formatMessage('Next steps')}</h3>
-          {formatMessage('Customize')}
-          <ul style={ulStyle}>
-            <li style={liStyle}>
-              <Link href={linkToPackageManager} onClick={linkClick}>
-                {formatMessage('Add and remove packages')}
-              </Link>
-            </li>
-            <li style={liStyle}>
-              <Link href={linkToLGEditor} onClick={linkClick}>
-                {formatMessage('Edit what your bot says')}
-              </Link>
-            </li>
-            <li style={liStyle}>
-              <Link href={linkToLUEditor} onClick={linkClick}>
-                {formatMessage('Train your language model')}
-              </Link>
-            </li>
-            <li style={liStyle}>
-              <Link href={linkToConnections} onClick={linkClick}>
-                {formatMessage('Connect your bot to new services')}
-              </Link>
-            </li>
-          </ul>
-          {formatMessage('Publish')}
-          <ul style={ulStyle}>
-            <li style={liStyle}>
-              <Link href={linkToProvision} onClick={linkClick}>
-                {formatMessage('Create a cloud hosting environment')}
-              </Link>
-            </li>
-            <li style={liStyle}>
-              <Link href={linkToPublish} onClick={linkClick}>
-                {formatMessage('Publish updates to the cloud')}
-              </Link>
-            </li>
-          </ul>
-          <h3 style={h3Style}>{formatMessage('Guides and references')}</h3>
-          <ul style={ulStyle}>
-            <li style={liStyle}>
-              <Link href={linkToGetStarted} target="_blank" onClick={linkClick}>
-                {formatMessage('Get started with Bot Framework Composer')}
-              </Link>
-            </li>
-            <li style={liStyle}>
-              <Link href={linkToCreateFirstBot} target="_blank" onClick={linkClick}>
-                {formatMessage('Create your first bot')}
-              </Link>
-            </li>
-            <li style={liStyle}>
-              <Link href={linkToTutorials} target="_blank" onClick={linkClick}>
-                {formatMessage('Composer tutorials')}
-              </Link>
-            </li>
-            <li style={liStyle}>
-              <Link href={linkToAdaptiveExpressions} target="_blank" onClick={linkClick}>
-                {formatMessage('Learn about Adaptive expressions')}
-              </Link>
-            </li>
-            <li style={liStyle}>
-              <Link href={linkToPreBuiltExpressions} target="_blank" onClick={linkClick}>
-                {formatMessage('Find pre-built Adaptive expressions')}
-              </Link>
-            </li>
-            <li style={liStyle}>
-              <Link href={linkToLUFileFormat} target="_blank" onClick={linkClick}>
-                {formatMessage('LU file format and syntax')}
-              </Link>
-            </li>
-            <li style={liStyle}>
-              <Link href={linkToLGFileFormat} target="_blank" onClick={linkClick}>
-                {formatMessage('LG file format and syntax')}
-              </Link>
-            </li>
-          </ul>
-        </Stack.Item>
-      </Stack>
-    </Panel>
+    <Panel
+      isBlocking={false}
+      isOpen={props.isOpen}
+      styles={panelStyles}
+      onDismiss={props.onDismiss}
+      onRenderHeader={renderTabs}
+      onRenderNavigationContent={onRenderNavigationContent}
+    />
   );
 };

Composer/packages/client/src/components/GetStarted/GetStartedLearn.tsx

@@ -0,0 +1,119 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT License.
+
+/** @jsx jsx */
+import { jsx } from '@emotion/core';
+import React from 'react';
+import formatMessage from 'format-message';
+import { Link } from 'office-ui-fabric-react/lib/Link';
+import { ScrollablePane } from 'office-ui-fabric-react/lib/ScrollablePane';
+
+import TelemetryClient from '../../telemetry/TelemetryClient';
+
+import { h3Style, ulStyle, liStyle } from './styles';
+
+const linkToEmulator = 'https://aka.ms/composer-getstarted-emulator';
+const linkToQNA = 'https://aka.ms/composer-getstarted-qnamaker';
+const linkToPackages = 'https://aka.ms/composer-getstarted-packages';
+const linkToImport = 'https://aka.ms/composer-getstarted-importpublishing';
+const linkToPVA = 'https://aka.ms/composer-getstarted-pva';
+const linkToMigrate = 'https://aka.ms/composer-getstarted-migrate';
+const linkToFeatureRequest = 'https://aka.ms/composer-getstarted-featurerequest';
+
+const linkToAdaptiveExpressions = 'https://aka.ms/composer-getstarted-adaptiveexpressions';
+const linkToGetStarted = 'https://aka.ms/composer-getstarted-getstarted';
+const linkToCreateFirstBot = 'https://aka.ms/composer-getstarted-quickstart';
+const linkToTutorials = 'https://aka.ms/composer-getstarted-tutorials';
+const linkToLGFileFormat = 'https://aka.ms/composer-getstarted-lgfiles';
+const linkToLUFileFormat = 'https://aka.ms/composer-getstarted-lufiles';
+const linkToPreBuiltExpressions = 'https://aka.ms/composer-getstarted-prebuilt';
+
+const linkClick = (event) => {
+  TelemetryClient.track('GettingStartedLinkClicked', { method: 'link', url: event.target.href });
+};
+
+export const GetStartedLearn: React.FC = () => {
+  return (
+    <ScrollablePane styles={{ root: { marginTop: 60 } }}>
+      <div css={{ paddingTop: 20, paddingLeft: 27, paddingRight: 20 }}>
+        <h3 style={h3Style}>{formatMessage('Get started')}</h3>
+        <ul style={ulStyle}>
+          <li style={liStyle}>
+            <Link href={linkToGetStarted} target="_blank" onClick={linkClick}>
+              {formatMessage('Get started with Bot Framework Composer')}
+            </Link>
+          </li>
+          <li style={liStyle}>
+            <Link href={linkToCreateFirstBot} target="_blank" onClick={linkClick}>
+              {formatMessage('Create your first bot')}
+            </Link>
+          </li>
+          <li style={liStyle}>
+            <Link href={linkToTutorials} target="_blank" onClick={linkClick}>
+              {formatMessage('Composer tutorials')}
+            </Link>
+          </li>
+          <li style={liStyle}>
+            <Link href={linkToEmulator} target="_blank" onClick={linkClick}>
+              {formatMessage('Setting up Bot Framework Emulator')}
+            </Link>
+          </li>
+          <li style={liStyle}>
+            <Link href={linkToQNA} target="_blank" onClick={linkClick}>
+              {formatMessage('QnA Maker introduction')}
+            </Link>
+          </li>
+          <li style={liStyle}>
+            <Link href={linkToPackages} target="_blank" onClick={linkClick}>
+              {formatMessage('Working with packages')}
+            </Link>
+          </li>
+        </ul>
+
+        <h3 style={h3Style}>{formatMessage('Quick references')}</h3>
+        <ul style={ulStyle}>
+          <li style={liStyle}>
+            <Link href={linkToAdaptiveExpressions} target="_blank" onClick={linkClick}>
+              {formatMessage('Learn about Adaptive expressions')}
+            </Link>
+          </li>
+          <li style={liStyle}>
+            <Link href={linkToPreBuiltExpressions} target="_blank" onClick={linkClick}>
+              {formatMessage('Find pre-built Adaptive expressions')}
+            </Link>
+          </li>
+          <li style={liStyle}>
+            <Link href={linkToLUFileFormat} target="_blank" onClick={linkClick}>
+              {formatMessage('LU file format and syntax')}
+            </Link>
+          </li>
+          <li style={liStyle}>
+            <Link href={linkToLGFileFormat} target="_blank" onClick={linkClick}>
+              {formatMessage('LG file format and syntax')}
+            </Link>
+          </li>
+          <li style={liStyle}>
+            <Link href={linkToImport} target="_blank" onClick={linkClick}>
+              {formatMessage('Importing a publishing profile')}
+            </Link>
+          </li>
+          <li style={liStyle}>
+            <Link href={linkToPVA} target="_blank" onClick={linkClick}>
+              {formatMessage('Integrating with Power Virtual Agents')}
+            </Link>
+          </li>
+          <li style={liStyle}>
+            <Link href={linkToMigrate} target="_blank" onClick={linkClick}>
+              {formatMessage('Migrating to Composer')}
+            </Link>
+          </li>
+          <li style={liStyle}>
+            <Link href={linkToFeatureRequest} target="_blank" onClick={linkClick}>
+              {formatMessage('Submit a feature request')}
+            </Link>
+          </li>
+        </ul>
+      </div>
+    </ScrollablePane>
+  );
+};