diff --git a/Composer/packages/client/src/components/CreationFlow/v2/AddBotModal.tsx b/Composer/packages/client/src/components/CreationFlow/v2/AddBotModal.tsx new file mode 100644 index 0000000000..6a02e6e5ca --- /dev/null +++ b/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 = (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 ( + + + + + + + + ); +}; diff --git a/Composer/packages/client/src/constants.ts b/Composer/packages/client/src/constants.ts index a4de2659d6..1fb8bdda9e 100644 --- a/Composer/packages/client/src/constants.ts +++ b/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'; diff --git a/Composer/packages/client/src/pages/design/SideBar.tsx b/Composer/packages/client/src/pages/design/SideBar.tsx index dd4b30c5f0..6819c5a3cf 100644 --- a/Composer/packages/client/src/pages/design/SideBar.tsx +++ b/Composer/packages/client/src/pages/design/SideBar.tsx @@ -136,26 +136,17 @@ const SideBar: React.FC = 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' }); diff --git a/Composer/packages/client/src/pages/design/creationModal.tsx b/Composer/packages/client/src/pages/design/creationModal.tsx index 7d9299757c..407ecee492 100644 --- a/Composer/packages/client/src/pages/design/creationModal.tsx +++ b/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 = (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 = (props) => { onOpen={openBot} /> ) : null} + + {creationFlowStatus === CreationFlowStatus.NEW_SKILL ? : null} ); };