fix: location select Content component

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

@@ -0,0 +1,185 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT License.
+
+import Path from 'path';
+
+import React, { useState, Fragment, useEffect, useContext } 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 { LocationSelectContent } from '../LocationBrowser/LocationSelectContent';
+import { styles as wizardStyles } from '../StepWizard/styles';
+import { StoreContext } from '../../store';
+import { StorageFolder } from '../../store/types';
+
+import { name, description } from './styles';
+const MAXTRYTIMES = 10000;
+
+interface FormData {
+  name: string;
+  description: string;
+  location: string;
+}
+
+interface FormDataError {
+  name?: string;
+}
+
+interface Bots {
+  name: '';
+  path: '';
+}
+
+interface DefineConversationProps {
+  onSubmit: (formData: FormData) => void;
+  onDismiss: () => void;
+  onCurrentPathUpdate?: (newPath?: string, storageId?: string) => void;
+  onGetErrorMessage?: (text: string) => void;
+  enableLocationBrowse: boolean;
+  focusedStorageFolder?: StorageFolder;
+  currentPath?: string;
+  bots?: Bots[];
+}
+
+const initialFormDataError: FormDataError = {};
+
+export const DefineConversation: React.FC<DefineConversationProps> = props => {
+  const {
+    onSubmit,
+    onDismiss,
+    onCurrentPathUpdate,
+    enableLocationBrowse,
+    focusedStorageFolder,
+    currentPath,
+    bots,
+  } = props;
+  const { state } = useContext(StoreContext);
+  const { templateId } = state;
+
+  const getDefaultName = () => {
+    let i = -1;
+    const bot = templateId;
+    let defaultName = '';
+    do {
+      i++;
+      defaultName = `${bot}-${i}`;
+    } while (
+      bots &&
+      bots.find(bot => {
+        return bot.name === defaultName;
+      }) &&
+      i < MAXTRYTIMES
+    );
+    return defaultName;
+  };
+
+  const initalFormData: FormData = { name: getDefaultName(), description: '', location: '' };
+  const [formData, setFormData] = useState(initalFormData);
+  const [formDataErrors, setFormDataErrors] = useState(initialFormDataError);
+  const [disable, setDisable] = useState(false);
+  const updateForm = field => (e, newValue) => {
+    setFormData({
+      ...formData,
+      [field]: newValue,
+    });
+  };
+
+  const nameRegex = /^[a-zA-Z0-9-_.]+$/;
+  const validateForm = (data: FormData) => {
+    const errors: FormDataError = {};
+    const { name } = data;
+
+    if (!name || !nameRegex.test(name)) {
+      errors.name = formatMessage(
+        'Spaces and special characters are not allowed. Use letters, numbers, -, or _., numbers, -, and _'
+      );
+    }
+    const newBotPath =
+      focusedStorageFolder && Object.keys(focusedStorageFolder as Record<string, any>).length
+        ? Path.join(focusedStorageFolder.parent, focusedStorageFolder.name, name)
+        : '';
+    if (
+      name &&
+      bots &&
+      bots.find(bot => {
+        return bot.path === newBotPath;
+      })
+    ) {
+      errors.name = formatMessage('Duplication of names');
+    }
+    return errors;
+  };
+
+  useEffect(() => {
+    updateForm('location')(null, currentPath);
+  }, [currentPath]);
+
+  useEffect(() => {
+    const errors = validateForm(formData);
+    if (Object.keys(errors).length) {
+      setDisable(true);
+    } else {
+      setDisable(false);
+    }
+    setFormDataErrors(errors);
+  }, [bots, formData.name]);
+
+  const handleSubmit = e => {
+    e.preventDefault();
+    const errors = validateForm(formData);
+
+    if (Object.keys(errors).length) {
+      setFormDataErrors(errors);
+      return;
+    }
+
+    onSubmit({
+      ...formData,
+    });
+  };
+
+  return (
+    <Fragment>
+      <form onSubmit={handleSubmit}>
+        <input type="submit" style={{ display: 'none' }} />
+        <Stack horizontal={enableLocationBrowse} tokens={{ childrenGap: '2rem' }} styles={wizardStyles.stackinput}>
+          <StackItem grow={0} styles={wizardStyles.halfstack}>
+            <TextField
+              label={formatMessage('Name')}
+              value={formData.name}
+              styles={name}
+              onChange={updateForm('name')}
+              errorMessage={formDataErrors.name}
+              data-testid="NewDialogName"
+            />
+          </StackItem>
+          <StackItem grow={0} styles={wizardStyles.halfstack}>
+            <TextField
+              styles={description}
+              value={formData.description}
+              label={formatMessage('Description')}
+              multiline
+              resizable={false}
+              onChange={updateForm('description')}
+            />
+          </StackItem>
+        </Stack>
+        {enableLocationBrowse && focusedStorageFolder && onCurrentPathUpdate && currentPath && (
+          <LocationSelectContent
+            onCurrentPathUpdate={onCurrentPathUpdate}
+            focusedStorageFolder={focusedStorageFolder}
+            currentPath={currentPath}
+          />
+        )}
+
+        <DialogFooter>
+          <DefaultButton onClick={onDismiss} text={formatMessage('Cancel')} />
+          <PrimaryButton onClick={handleSubmit} text={formatMessage('Next')} disabled={disable} />
+        </DialogFooter>
+      </form>
+    </Fragment>
+  );
+};

Composer/packages/client/src/CreationFlow/LocationBrowser/FileSelector.tsx

@@ -33,7 +33,7 @@ import { dropdown, loading, detailListContainer, detailListClass, fileSelectorCo
 interface FileSelectorProps {
   focusedStorageFolder: StorageFolder;
   currentPath: string;
-  updateCurrentPath: (newPath?: string, storageId?: string) => void;
+  onCurrentPathUpdate: (newPath?: string, storageId?: string) => void;
   onSelectionChanged: (file: any) => void;
   checkShowItem: (file: File) => boolean;
   storageFileLoadingStatus: string;
@@ -45,7 +45,7 @@ export const FileSelector: React.FC<FileSelectorProps> = props => {
     focusedStorageFolder,
     checkShowItem,
     currentPath,
-    updateCurrentPath,
+    onCurrentPathUpdate,
     storageFileLoadingStatus,
   } = props;
   // for detail file list in open panel
@@ -204,7 +204,7 @@ export const FileSelector: React.FC<FileSelectorProps> = props => {
     .reverse();
 
   const updateLocation = (e, item?: IDropdownOption) => {
-    updateCurrentPath(item ? (item.key as string) : '');
+    onCurrentPathUpdate(item ? (item.key as string) : '');
   };
 
   return (