feat: preset bot name

Composer/packages/client/src/CreationFlow/DefineConversation/index.js

@@ -1,16 +1,19 @@
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT License.
 
-import React, { useState, Fragment } from 'react';
+import React, { useState, useContext, Fragment, useEffect } from 'react';
 import formatMessage from 'format-message';
 import { PrimaryButton, DefaultButton } from 'office-ui-fabric-react/lib/Button';
 import { DialogFooter } from 'office-ui-fabric-react/lib/Dialog';
 import { Stack, StackItem } from 'office-ui-fabric-react/lib/Stack';
 import { TextField } from 'office-ui-fabric-react/lib/TextField';
+import get from 'lodash/get';
 
 import { LocationSelectContent } from '../LocationBrowser/LocationSelectContent';
 import { styles as wizardStyles } from '../StepWizard/styles';
+import { FileTypes } from '../../constants';
 
+import { StoreContext } from './../../store';
 import { name, description } from './styles';
 
 const nameRegex = /^[a-zA-Z0-9-_.]+$/;
@@ -19,7 +22,7 @@ const validateForm = data => {
   const errors = {};
   const { name } = data;
 
-  if (!name || !nameRegex.test(name)) {
+  if (name && !nameRegex.test(name)) {
     errors.name = formatMessage(
       'Spaces and special characters are not allowed. Use letters, numbers, -, or _., numbers, -, and _'
     );
@@ -29,11 +32,35 @@ const validateForm = data => {
 };
 
 export function DefineConversation(props) {
+  const { state } = useContext(StoreContext);
   const { onSubmit, onGetErrorMessage, onDismiss, enableLocationBrowse } = props;
-
+  const { templateId, focusedStorageFolder } = state;
   const [formData, setFormData] = useState({ errors: {} });
+  const [location, setLocation] = useState('');
   const [disable, setDisable] = useState(false);
 
+  useEffect(() => {
+    const allFilesInFolder = get(focusedStorageFolder, 'children', []);
+
+    const botsInCurrentFolder = allFilesInFolder.filter(file => {
+      if (file.type === FileTypes.BOT) {
+        return file;
+      }
+    });
+    let i = 0;
+    let defaultName = `${templateId}-${i}`;
+
+    while (
+      botsInCurrentFolder.findIndex(bot => {
+        return bot.name === defaultName;
+      }) > -1
+    ) {
+      i = i + 1;
+      defaultName = `${templateId}-${i}`;
+    }
+    updateForm('defaultName')(null, defaultName);
+  }, [templateId, focusedStorageFolder]);
+
   const updateForm = field => (e, newValue) => {
     setFormData({
       ...formData,
@@ -54,9 +81,12 @@ export function DefineConversation(props) {
       return;
     }
 
-    onSubmit({
-      ...formData,
-    });
+    onSubmit(
+      {
+        ...formData,
+      },
+      location
+    );
   };
 
   //disable the next button if the text has errors.
@@ -77,11 +107,6 @@ export function DefineConversation(props) {
     }
   };
 
-  // // update the path in the form and toggle the location picker.
-  const updateLocation = path => {
-    updateForm('location')(null, path);
-  };
-
   return (
     <Fragment>
       <form onSubmit={handleSubmit}>
@@ -90,7 +115,7 @@ export function DefineConversation(props) {
           <StackItem grow={0} styles={wizardStyles.halfstack}>
             <TextField
               label={formatMessage('Name')}
-              value={formData.name}
+              value={formData.name || formData.defaultName}
               styles={name}
               onChange={updateForm('name')}
               errorMessage={formData.errors.name}
@@ -109,7 +134,7 @@ export function DefineConversation(props) {
             />
           </StackItem>
         </Stack>
-        {enableLocationBrowse && <LocationSelectContent onChange={updateLocation} allowOpeningBot={false} />}
+        {enableLocationBrowse && <LocationSelectContent onChange={setLocation} allowOpeningBot={false} />}
 
         <DialogFooter>
           <DefaultButton onClick={onDismiss} text={formatMessage('Cancel')} />

Composer/packages/client/src/CreationFlow/index.js

@@ -25,13 +25,7 @@ export function CreationFlow(props) {
   const { templateId, templateProjects, focusedStorageFolder } = state;
 
   useEffect(() => {
-    const allFilesInFolder = get(focusedStorageFolder, 'children', []);
-
-    const botsInCurrentFolder = allFilesInFolder.filter(file => {
-      if (file.type === FileTypes.BOT) {
-        return file;
-      }
-    });
+    const botsInCurrentFolder = getBotsInFocusedStorageFolder();
 
     setBots(botsInCurrentFolder);
   }, [focusedStorageFolder]);
@@ -66,6 +60,17 @@ export function CreationFlow(props) {
     }
   };
 
+  const getBotsInFocusedStorageFolder = () => {
+    const allFilesInFolder = get(focusedStorageFolder, 'children', []);
+
+    const botsInCurrentFolder = allFilesInFolder.filter(file => {
+      if (file.type === FileTypes.BOT) {
+        return file;
+      }
+    });
+    return botsInCurrentFolder;
+  };
+
   const openBot = async botFolder => {
     await openBotProject(botFolder);
     navigateTo('/dialogs/Main');
@@ -76,20 +81,20 @@ export function CreationFlow(props) {
     setCreationFlowStatus(CreationFlowStatus.CLOSE);
   };
 
-  const handleCreateNew = async formData => {
-    await createProject(templateId || '', formData.name, formData.description, formData.location);
+  const handleCreateNew = async (formData, location) => {
+    await createProject(templateId || '', formData.name || formData.defaultName, formData.description, location);
   };
 
   const handleSaveAs = async formData => {
     await saveProjectAs(formData.name, formData.description);
   };
 
-  const handleSubmit = formData => {
+  const handleSubmit = (formData, location) => {
     switch (creationFlowStatus) {
       case CreationFlowStatus.NEW_FROM_SCRATCH:
       case CreationFlowStatus.NEW_FROM_TEMPLATE:
       case CreationFlowStatus.NEW:
-        handleCreateNew(formData);
+        handleCreateNew(formData, location);
         navigateTo('/dialogs/Main');
         break;
       case CreationFlowStatus.SAVEAS: