fix: add skills flow refactored to desired R13 spec

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

@@ -0,0 +1,60 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT License.
+
+import React, { useState } from 'react';
+import { DialogTypes, DialogWrapper } from '@bfc/ui-shared';
+import formatMessage from 'format-message';
+import { ChoiceGroup, IChoiceGroupOption } from 'office-ui-fabric-react/lib/ChoiceGroup';
+import { DialogFooter } from 'office-ui-fabric-react/lib/Dialog';
+import { DefaultButton, PrimaryButton } from 'office-ui-fabric-react/lib/Button';
+import { useRecoilValue } from 'recoil';
+
+import { dispatcherState } from '../../../recoilModel';
+import { CreationFlowStatus } from '../../../constants';
+
+interface AddBotModalProps {
+  onDismiss: () => void;
+}
+
+const addExistingKey = 'existing';
+const addBlankKey = 'blank';
+
+const addSkillOptions: IChoiceGroupOption[] = [
+  { key: addExistingKey, text: 'Add an existing bot' },
+  { key: addBlankKey, text: 'Create a new blank bot' },
+];
+
+export const AddBotModal: React.FC<AddBotModalProps> = (props) => {
+  const { setCreationFlowStatus } = useRecoilValue(dispatcherState);
+  const [addBotType, setAddBotType] = useState(addExistingKey);
+
+  const handleChange = (ev?, option?: IChoiceGroupOption): void => {
+    if (option) {
+      setAddBotType(option.key);
+    }
+  };
+
+  const handleSubmit = () => {
+    if (addBotType === addExistingKey) {
+      setCreationFlowStatus(CreationFlowStatus.OPEN);
+    } else {
+      setCreationFlowStatus(CreationFlowStatus.NEW_FROM_TEMPLATE);
+    }
+  };
+
+  return (
+    <DialogWrapper
+      isOpen
+      dialogType={DialogTypes.DesignFlow}
+      subText={formatMessage('Which bot would you like to add to your project')}
+      title={formatMessage('Add a bot')}
+      onDismiss={props.onDismiss}
+    >
+      <ChoiceGroup required defaultSelectedKey={addExistingKey} options={addSkillOptions} onChange={handleChange} />
+      <DialogFooter>
+        <DefaultButton text={formatMessage('Cancel')} onClick={props.onDismiss} />
+        <PrimaryButton data-testid="NextStepButton" text={formatMessage('Next')} onClick={handleSubmit} />
+      </DialogFooter>
+    </DialogWrapper>
+  );
+};

Composer/packages/client/src/constants.ts

@@ -146,6 +146,7 @@ export enum CreationFlowStatus {
   SAVEAS = 'Save as',
   OPEN = 'Open',
   CLOSE = 'Close',
+  NEW_SKILL = 'New Skill',
 }
 
 export type CreationFlowType = 'Bot' | 'Skill';

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

@@ -136,26 +136,17 @@ const SideBar: React.FC<SideBarProps> = React.memo(({ projectId }) => {
 
   const projectTreeHeaderMenuItems = [
     {
-      key: 'CreateNewSkill',
-      label: formatMessage('Create a new skill'),
+      key: 'AddSkill',
+      label: formatMessage('Add a bot'),
       onClick: () => {
         setCreationFlowType('Skill');
-        setCreationFlowStatus(CreationFlowStatus.NEW);
+        setCreationFlowStatus(CreationFlowStatus.NEW_SKILL);
         TelemetryClient.track('AddNewSkillStarted', { method: 'newSkill' });
       },
     },
-    {
-      key: 'OpenSkill',
-      label: formatMessage('Open an existing skill'),
-      onClick: () => {
-        setCreationFlowType('Skill');
-        setCreationFlowStatus(CreationFlowStatus.OPEN);
-        TelemetryClient.track('AddNewSkillStarted', { method: 'existingSkill' });
-      },
-    },
     {
       key: 'ConnectRemoteSkill',
-      label: formatMessage('Connect a remote skill'),
+      label: formatMessage('Connect to a skill'),
       onClick: () => {
         setAddSkillDialogModalVisibility(true);
         TelemetryClient.track('AddNewSkillStarted', { method: 'remoteSkill' });

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

@@ -5,6 +5,7 @@ import Path from 'path';
 import React, { Fragment, useEffect, useRef, useState } from 'react';
 import { useRecoilValue } from 'recoil';
 import { BotTemplate } from '@botframework-composer/types';
+import { emptyBotNpmTemplateName } from '@bfc/shared';
 
 import { OpenProject } from '../../components/CreationFlow/OpenProject';
 import {
@@ -20,6 +21,7 @@ import { CreationFlowStatus } from '../../constants';
 import TelemetryClient from '../../telemetry/TelemetryClient';
 import DefineConversationV2 from '../../components/CreationFlow/v2/DefineConversation';
 import { CreateBotV2 } from '../../components/CreationFlow/v2/CreateBot';
+import { AddBotModal } from '../../components/CreationFlow/v2/AddBotModal';
 
 interface CreationModalProps {
   onSubmit: () => void;
@@ -51,7 +53,7 @@ export const CreationModal: React.FC<CreationModalProps> = (props) => {
   const currentStorageIndex = useRef(0);
   const storage = storages[currentStorageIndex.current];
   const currentStorageId = storage ? storage.id : 'default';
-  const [templateId, setTemplateId] = useState('');
+  const [templateId, setTemplateId] = useState(emptyBotNpmTemplateName);
 
   useEffect(() => {
     if (storages?.length) {
@@ -188,6 +190,8 @@ export const CreationModal: React.FC<CreationModalProps> = (props) => {
           onOpen={openBot}
         />
       ) : null}
+
+      {creationFlowStatus === CreationFlowStatus.NEW_SKILL ? <AddBotModal onDismiss={handleDismiss} /> : null}
     </Fragment>
   );
 };