feat: enable new creation flow as default (#5881)

* plumb through the option to select azure functions scaffolding

* update test

* fix some tests

* Removing unused var

* adding back package json precommit declaration

* fixing errors that happened in merge

* fix import statement

* js support

* fix: revert yeoman-environment to 2.10.3 from 3.1.0

* initial commit of js runtime support with some draft URLs

* fis: change feature flag text

* mostly working js publish

* - Passing runtime choice down to generator
- Passing runtime language down to generaotr
- Prepping merge with js runtime branch

* Passing of runtime type and language to generators from UI implemented

* Adding testing dropdown to more easily test templates

* removing npm build as it is unneeded for js generators

* removing unneeeded code for npm build on buildDeploy

* Adding runtime template for dotnet functions and node functions

* Adding needed fields to botTemplate obj

* Fixing keyword parsing and rendering logic for templates

* Removing runtime language dropdown from UI

* adding logic for correct template specific runtime types as available selections in UI

* - Removing unused options code
- Setting deafult template to top of list, removing hardcoding of default template

* Enhancing template search query

* remove unneeded console logs

* Fixing errors after merge

* cleanup some text, remove unneeded fields

* update feed

* fix issue where required items were included twice

* remove comment

* update and cleanup

* update variable

* fix dismiss of handoff

* fix tests, update package manager bf-dialgo to latest dev

* fix tests, adjust labels

* remove feature flag

* fix tests

* remove unused elements

* restore support for legacy runtimes

* Adding mocked dipsatch function to fix broken UT

* Fixing unit test

* Making PR changes.
- simplyfying array check logic
- removing unneeded null check

* Fixing include statements

* Fixing default naming

* Fixing home page integration test

* Fixing creation UT

* Removing old creation integration test

* Adding integration test for new bot creation

* Fixing navigateUrl integration test

* Changing names

* Removing unused dep

* Fixing dependency

* increasing wait time for creation integration test

* Testin CI failures with different wait times

* Update azure-pipelines.yml for Azure Pipelines

* Indent update

* Change to 3.1.x

* Temp removal of expando to get error from CI machine

* testing name change

* Getting more error info in modal for testing

* fix bad merge

* Update azure-pipelines.yml for Azure Pipelines

* Update azure-pipelines.yml for Azure Pipelines

* Update azure-pipelines.yml for Azure Pipelines

* Update azure-pipelines.yml for Azure Pipelines

* Update azure-pipelines.yml for Azure Pipelines

* Update azure-pipelines.yml for Azure Pipelines

* Finalizing dotnet install and nuget feed config step in pipeline

* Reverting error modal testing changes

* Removing FF check

* Removing unused import

Co-authored-by: Andy Brown <[email protected]>
Co-authored-by: Patrick Volum <[email protected]>
Co-authored-by: pavolum <[email protected]>
Co-authored-by: Srinaath Ravichandran <[email protected]>
Co-authored-by: Ben Yackley <[email protected]>

.vscode/launch.json

@@ -84,7 +84,7 @@
         "NODE_ENV": "development",
         "DEBUG": "composer*",
         "COMPOSER_DEV_TOOLS": "true",
-        "COMPOSER_ENABLE_ONEAUTH": "false"
+        "COMPOSER_ENABLE_ONEAUTH": "true"
       },
       "outputCapture": "std",
       "preLaunchTask": "electron: build",

Composer/cypress/integration/CreateNewBot.spec.ts

@@ -11,25 +11,15 @@ context('Creating a new bot', () => {
   });
 
   it('can create a new bot', () => {
-    cy.findByTestId('Create from scratch').click();
+    // eslint-disable-next-line cypress/no-unnecessary-waiting
+    cy.wait(3000);
+    cy.findByTestId('@microsoft/generator-bot-empty').click();
     cy.findByTestId('NextStepButton').click();
-    cy.enterTextAndSubmit('NewDialogName', '__TestNewProject', 'SubmitNewBotBtn');
+    cy.enterTextAndSubmit('NewDialogName', 'TestNewProject3', 'SubmitNewBotBtn');
+    // eslint-disable-next-line cypress/no-unnecessary-waiting
+    cy.wait(150000);
     cy.findByTestId('ProjectTree').within(() => {
-      cy.findAllByText('__TestNewProject').should('exist');
-    });
-  });
-
-  it('can create a bot from the ToDo template', () => {
-    cy.findByTestId('Create from template').click();
-    cy.findByTestId('TodoSample').click({ force: true });
-    cy.findByTestId('NextStepButton').click();
-    cy.enterTextAndSubmit('NewDialogName', '__TestNewProject2', 'SubmitNewBotBtn');
-    cy.findByTestId('ProjectTree').within(() => {
-      cy.findAllByText('__TestNewProject2').should('exist');
-      cy.findByText('addtodo').should('exist');
-      cy.findByText('cleartodos').should('exist');
-      cy.findByText('deletetodo').should('exist');
-      cy.findByText('showtodos').should('exist');
+      cy.findAllByText('TestNewProject3').should('exist');
     });
   });
 });

Composer/cypress/integration/HomePage.spec.ts

@@ -9,14 +9,12 @@ context('Home Page ', () => {
   it('can open buttons in home page', () => {
     cy.findByTestId('LeftNav-CommandBarButtonHome').click();
     cy.findByTestId('homePage-Toolbar-New').click();
-    cy.findByText('Create bot from template or scratch?').should('exist');
     cy.findByText('Cancel').should('exist');
     cy.findByText('Cancel').click();
     cy.findByTestId('homePage-Toolbar-Open').click();
     cy.findByText('Select a Bot').should('exist');
     cy.findByText('Cancel').should('exist');
     cy.findByText('Cancel').click();
     cy.findByTestId('homePage-body-New').click();
-    cy.findByText('Create bot from template or scratch?').should('exist');
   });
 });

Composer/cypress/integration/NavigateUrls.ts → Composer/cypress/integration/NavigateUrls.spec.ts

@@ -6,10 +6,9 @@ context('Navigate Url', () => {
     cy.visit('/home');
   });
 
-  it('should open Create From Scratch/Template window from a url', () => {
+  it('should open Select Template window from a url', () => {
     cy.visit('/projects/create');
-    cy.get('[data-testid="Create from scratch"]').should('be.visible');
-    cy.get('[data-testid="Create from template"]').should('be.visible');
+    cy.findAllByTestId('dotnetFeed').should('exist');
   });
 
   it('should open Define Conversations window from a url', () => {

Composer/packages/client/__tests__/components/CreationFlow/index.test.tsx

@@ -27,6 +27,7 @@ describe('<CreationFlow/>', () => {
       onboardingAddCoachMarkRef: jest.fn(),
       fetchRecentProjects: jest.fn(),
       fetchTemplates: jest.fn(),
+      fetchTemplatesV2: jest.fn(),
       setCreationFlowStatus: jest.fn(),
       navTo: jest.fn(),
       saveTemplateId: jest.fn(),

Composer/packages/client/__tests__/components/CreationFlowV2/CreateOptions/index.test.tsx

@@ -20,6 +20,8 @@ describe('<CreateOptionsV2/>', () => {
       id: 'generator-conversational-core',
       index: 0,
       name: 'conversational-core',
+      dotnetSupport: { webAppSupported: true, functionsSupported: true },
+      nodeSupport: { webAppSupported: true, functionsSupported: true },
       package: {
         packageName: 'generator-conversational-core',
         packageSource: 'npm',
@@ -44,10 +46,10 @@ describe('<CreateOptionsV2/>', () => {
 
   it('should save conversational core template id', async () => {
     const component = renderComponent();
-    const conversationalCoreBot = await component.findByText('conversational-core');
+    const conversationalCoreBot = await component.findByTestId('generator-conversational-core');
     fireEvent.click(conversationalCoreBot);
     const nextButton = await component.findByText('Next');
     fireEvent.click(nextButton);
-    expect(handleCreateNextMock).toBeCalledWith('generator-conversational-core');
+    expect(handleCreateNextMock).toBeCalledWith('generator-conversational-core', 'dotnet');
   });
 });

Composer/packages/client/__tests__/components/CreationFlowV2/index.test.tsx

@@ -27,6 +27,7 @@ describe('<CreationFlowV2/>', () => {
       onboardingAddCoachMarkRef: jest.fn(),
       fetchRecentProjects: jest.fn(),
       fetchTemplates: jest.fn(),
+      fetchTemplatesV2: jest.fn(),
       setCreationFlowStatus: jest.fn(),
       navTo: jest.fn(),
       saveTemplateId: jest.fn(),
@@ -71,7 +72,7 @@ describe('<CreationFlowV2/>', () => {
       </RecoilRoot>
     );
 
-    navigate('create/generator-conversational-core');
+    navigate('create/dotnet/generator-conversational-core');
     const node = await findByText('OK');
 
     act(() => {
@@ -94,8 +95,13 @@ describe('<CreationFlowV2/>', () => {
       eTag: undefined,
       preserveRoot: undefined,
       qnqKbUrls: undefined,
+      runtimeType: 'webapp',
       templateDir: undefined,
       urlSuffix: undefined,
+      profile: undefined,
+      qnaKbUrls: undefined,
+      runtimeLanguage: 'dotnet',
+      source: undefined,
     });
   });
 });

Composer/packages/client/src/components/CreationFlow/CreateOptions.tsx

@@ -11,12 +11,10 @@ import { DialogFooter } from 'office-ui-fabric-react/lib/Dialog';
 import { BotTemplate } from '@bfc/shared';
 import { DialogWrapper, DialogTypes } from '@bfc/ui-shared';
 import { RouteComponentProps, navigate } from '@reach/router';
-import { useRecoilValue } from 'recoil';
 import querystring from 'query-string';
 import axios from 'axios';
 
 import { DialogCreationCopy } from '../../constants';
-import { featureFlagsState } from '../../recoilModel';
 import { getAliasFromPayload } from '../../utils/electronUtil';
 
 import { CreateBot } from './CreateBot';
@@ -34,11 +32,8 @@ export function CreateOptions(props: CreateOptionsProps) {
   const [option, setOption] = useState('Create');
   const [isOpenCreateModal, setIsOpenCreateModal] = useState(false);
   const { templates, onDismiss, onNext, onJumpToOpenModal } = props;
-  const featureFlags = useRecoilValue(featureFlagsState);
   useEffect(() => {
-    if (featureFlags.NEW_CREATION_FLOW?.enabled) {
-      navigate(`/v2/projects/create${props?.location?.search}`);
-    }
+    navigate(`/v2/projects/create${props?.location?.search}`);
   });
 
   useEffect(() => {

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

@@ -7,17 +7,15 @@ import Path from 'path';
 import React, { useEffect, useRef, Fragment } from 'react';
 import { RouteComponentProps, Router, navigate } from '@reach/router';
 import { useRecoilValue } from 'recoil';
-import { csharpFeedKey } from '@bfc/shared';
 
-import { CreationFlowStatus, feedDictionary } from '../../constants';
+import { CreationFlowStatus, firstPartyTemplateFeed } from '../../constants';
 import {
   dispatcherState,
   creationFlowStatusState,
   storagesState,
   focusedStorageFolderState,
   currentProjectIdState,
   userSettingsState,
-  featureFlagsState,
   templateProjectsState,
 } from '../../recoilModel';
 import Home from '../../pages/home/Home';
@@ -33,7 +31,6 @@ type CreationFlowProps = RouteComponentProps<{}>;
 
 const CreationFlow: React.FC<CreationFlowProps> = (props: CreationFlowProps) => {
   const {
-    fetchTemplates,
     fetchTemplatesV2,
     fetchRecentProjects,
     fetchStorages,
@@ -51,7 +48,6 @@ const CreationFlow: React.FC<CreationFlowProps> = (props: CreationFlowProps) =>
   } = useRecoilValue(dispatcherState);
 
   const templateProjects = useRecoilValue(templateProjectsState);
-  const featureFlags = useRecoilValue(featureFlagsState);
   const creationFlowStatus = useRecoilValue(creationFlowStatusState);
   const projectId = useRecoilValue(currentProjectIdState);
   const storages = useRecoilValue(storagesState);
@@ -78,7 +74,7 @@ const CreationFlow: React.FC<CreationFlowProps> = (props: CreationFlowProps) =>
     }
     await fetchStorages();
     fetchRecentProjects();
-    featureFlags.NEW_CREATION_FLOW?.enabled ? fetchTemplatesV2([feedDictionary[csharpFeedKey]]) : fetchTemplates();
+    fetchTemplatesV2([firstPartyTemplateFeed]);
   };
 
   useEffect(() => {

Composer/packages/client/src/components/CreationFlow/v2/CreateBot.tsx

@@ -4,7 +4,6 @@
 /** @jsx jsx */
 import { jsx, css } from '@emotion/core';
 import { useState, Fragment, useEffect, useMemo } from 'react';
-import find from 'lodash/find';
 import formatMessage from 'format-message';
 import { PrimaryButton, DefaultButton } from 'office-ui-fabric-react/lib/Button';
 import { DialogFooter } from 'office-ui-fabric-react/lib/Dialog';
@@ -17,18 +16,18 @@ import {
   CheckboxVisibility,
   DetailsRow,
 } from 'office-ui-fabric-react/lib/DetailsList';
-import { BotTemplate, QnABotTemplateId } from '@bfc/shared';
+import { BotTemplate } from '@bfc/shared';
 import { DialogWrapper, DialogTypes, LoadingSpinner } from '@bfc/ui-shared';
 import { NeutralColors } from '@uifabric/fluent-theme';
 import { WindowLocation } from '@reach/router';
 import { IPivotItemProps, Pivot, PivotItem } from 'office-ui-fabric-react/lib/Pivot';
 import { Link } from 'office-ui-fabric-react/lib/Link';
 import { FontIcon } from 'office-ui-fabric-react/lib/Icon';
-import { csharpFeedKey } from '@botframework-composer/types';
+import { csharpFeedKey, nodeFeedKey } from '@botframework-composer/types';
 import { useRecoilState, useRecoilValue } from 'recoil';
 
 import msftIcon from '../../../images/msftIcon.svg';
-import { DialogCreationCopy, feedDictionary } from '../../../constants';
+import { DialogCreationCopy } from '../../../constants';
 import { creationFlowTypeState, fetchReadMePendingState, selectedTemplateReadMeState } from '../../../recoilModel';
 import TelemetryClient from '../../../telemetry/TelemetryClient';
 
@@ -112,15 +111,13 @@ const optionKeys = {
 const templateRequestUrl =
   'https://github.com/microsoft/botframework-components/issues/new?assignees=&labels=needs-triage%2C+feature-request&template=-net-sdk-feature-request.md&title=[NewTemplateRequest]';
 
-const defaultTemplateId = '@microsoft/generator-microsoft-bot-empty';
-
 // -------------------- CreateOptions -------------------- //
 type CreateBotProps = {
   isOpen: boolean;
   templates: BotTemplate[];
   location?: WindowLocation | undefined;
   onDismiss: () => void;
-  onNext: (templateName: string, urlData?: string) => void;
+  onNext: (templateName: string, templateLanguage: string, urlData?: string) => void;
   fetchTemplates: (feedUrls?: string[]) => Promise<void>;
   fetchReadMe: (moduleName: string) => {};
 };
@@ -129,9 +126,11 @@ export function CreateBotV2(props: CreateBotProps) {
   const [option] = useState(optionKeys.createFromTemplate);
   const [disabled] = useState(false);
   const { isOpen, templates, onDismiss, onNext } = props;
-  const [currentTemplateId, setCurrentTemplateId] = useState(defaultTemplateId);
-  const [emptyBotKey, setEmptyBotKey] = useState('');
-  const [selectedFeed, setSelectedFeed] = useState<{ props: IPivotItemProps }>({ props: { itemKey: csharpFeedKey } });
+  const [currentTemplateId, setCurrentTemplateId] = useState('');
+  const [selectedProgLang, setSelectedProgLang] = useState<{ props: IPivotItemProps }>({
+    props: { itemKey: csharpFeedKey },
+  });
+  const [displayedTemplates, setDisplayedTemplates] = useState<BotTemplate[]>([]);
   const [readMe] = useRecoilState(selectedTemplateReadMeState);
   const fetchReadMePending = useRecoilValue(fetchReadMePendingState);
   const creationFlowType = useRecoilValue(creationFlowTypeState);
@@ -140,6 +139,7 @@ export function CreateBotV2(props: CreateBotProps) {
     return new Selection({
       onSelectionChanged: () => {
         const t = selectedTemplate.getSelection()[0] as BotTemplate;
+
         if (t) {
           setCurrentTemplateId(t.id);
         }
@@ -148,21 +148,13 @@ export function CreateBotV2(props: CreateBotProps) {
   }, []);
 
   const handleJumpToNext = () => {
-    let routeToTemplate = emptyBotKey;
-    if (option === optionKeys.createFromTemplate) {
-      routeToTemplate = currentTemplateId;
-    }
-
-    if (option === optionKeys.createFromQnA) {
-      routeToTemplate = QnABotTemplateId;
-    }
-
-    TelemetryClient.track('CreateNewBotProjectNextButton', { template: routeToTemplate });
+    TelemetryClient.track('CreateNewBotProjectNextButton', { template: currentTemplateId });
+    const runtimeLanguage = selectedProgLang?.props?.itemKey ?? csharpFeedKey;
 
     if (location?.search) {
-      onNext(routeToTemplate, location.search);
+      onNext(currentTemplateId, runtimeLanguage, location.search);
     } else {
-      onNext(routeToTemplate);
+      onNext(currentTemplateId, runtimeLanguage);
     }
   };
 
@@ -200,27 +192,32 @@ export function CreateBotV2(props: CreateBotProps) {
   };
 
   const getTemplate = (): BotTemplate | undefined => {
-    const currentTemplate = templates.find((t) => {
-      return t.id === currentTemplateId;
+    const currentTemplate = displayedTemplates.find((t) => {
+      return t?.id === currentTemplateId;
     });
     return currentTemplate;
   };
 
   useEffect(() => {
-    if (templates.length > 1) {
-      const emptyBotTemplate = find(templates, ['id', defaultTemplateId]);
-      if (emptyBotTemplate) {
-        setCurrentTemplateId(emptyBotTemplate.id);
-        setEmptyBotKey(emptyBotTemplate.id);
-      }
+    const itemKey = selectedProgLang.props.itemKey;
+    if (itemKey === csharpFeedKey) {
+      const newTemplates = templates.filter((template) => {
+        return template.dotnetSupport;
+      });
+      setDisplayedTemplates(newTemplates);
+    } else if (itemKey === nodeFeedKey) {
+      const newTemplates = templates.filter((template) => {
+        return template.nodeSupport;
+      });
+      setDisplayedTemplates(newTemplates);
     }
-  }, [templates]);
+  }, [templates, selectedProgLang]);
 
   useEffect(() => {
-    if (selectedFeed?.props?.itemKey) {
-      props.fetchTemplates([feedDictionary[selectedFeed.props.itemKey]]);
+    if (displayedTemplates?.[0]?.id) {
+      setCurrentTemplateId(displayedTemplates[0].id);
     }
-  }, [selectedFeed]);
+  }, [displayedTemplates]);
 
   useEffect(() => {
     if (currentTemplateId) {
@@ -238,11 +235,12 @@ export function CreateBotV2(props: CreateBotProps) {
           defaultSelectedKey={csharpFeedKey}
           onLinkClick={(item) => {
             if (item) {
-              setSelectedFeed(item);
+              setSelectedProgLang(item);
             }
           }}
         >
-          <PivotItem headerText="C#" itemKey={csharpFeedKey}></PivotItem>
+          <PivotItem data-testid="dotnetFeed" headerText="C#" itemKey={csharpFeedKey}></PivotItem>
+          <PivotItem data-testid="nodeFeed" headerText="Node" itemKey={nodeFeedKey}></PivotItem>
         </Pivot>
         <div css={pickerContainer}>
           <div css={detailListContainer} data-is-scrollable="true" id="templatePickerContainer">
@@ -256,7 +254,7 @@ export function CreateBotV2(props: CreateBotProps) {
                 compact={false}
                 getKey={(item) => item.name}
                 isHeaderVisible={false}
-                items={templates}
+                items={displayedTemplates}
                 layoutMode={DetailsListLayoutMode.justified}
                 selection={selectedTemplate}
                 selectionMode={disabled ? SelectionMode.none : SelectionMode.single}

Composer/packages/client/src/components/CreationFlow/v2/CreateOptions.tsx

@@ -23,7 +23,7 @@ import { CreateBotV2 } from './CreateBot';
 type CreateOptionsProps = {
   templates: BotTemplate[];
   onDismiss: () => void;
-  onNext: (data: string) => void;
+  onNext: (templateName: string, templateLanguage: string, urlData?: string) => void;
   onJumpToOpenModal: (search?: string) => void;
   fetchTemplates: (feedUrls?: string[]) => Promise<void>;
   fetchReadMe: (moduleName: string) => {};