-
Notifications
You must be signed in to change notification settings - Fork 378
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
fix: do not preset name when creating a dialog (#1805)
* do not preset name when creating a dialog * do not share define conversation form between creating a bot and creating a dialog * remove comment * handle comments * fix unit test * handle comments Co-authored-by: Andy Brown <asbrown002@gmail.com>
- Loading branch information
1 parent
cfb4b77
commit 0f1eda4
Showing
7 changed files
with
179 additions
and
68 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
113 changes: 113 additions & 0 deletions
113
Composer/packages/client/src/pages/design/createDialogModal.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,113 @@ | ||
| // Copyright (c) Microsoft Corporation. | ||
| // Licensed under the MIT License. | ||
| import React, { useState, 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 { DialogCreationCopy } from '../../constants'; | ||
| import { DialogWrapper } from '../../components/DialogWrapper/index'; | ||
| import { StorageFolder } from '../../store/types'; | ||
| import { StoreContext } from '../../store'; | ||
|
|
||
| import { name, description, styles as wizardStyles } from './styles'; | ||
|
|
||
| interface DialogFormData { | ||
| name: string; | ||
| description: string; | ||
| } | ||
|
|
||
| interface CreateDialogModalProps { | ||
| onSubmit: (dialogFormData: DialogFormData) => void; | ||
| onDismiss: () => void; | ||
| onCurrentPathUpdate?: (newPath?: string, storageId?: string) => void; | ||
| focusedStorageFolder?: StorageFolder; | ||
| currentPath?: string; | ||
| isOpen: boolean; | ||
| } | ||
|
|
||
| export const CreateDialogModal: React.FC<CreateDialogModalProps> = props => { | ||
| const { state } = useContext(StoreContext); | ||
| const { dialogs } = state; | ||
| const { onSubmit, onDismiss, isOpen } = props; | ||
| const initialFormData: DialogFormData = { name: '', description: '' }; | ||
| const [formData, setFormData] = useState(initialFormData); | ||
| const [formDataErrors, setFormDataErrors] = useState<{ name?: string }>({}); | ||
|
|
||
| const updateForm = field => (e, newValue) => { | ||
| setFormData({ | ||
| ...formData, | ||
| [field]: newValue, | ||
| }); | ||
| }; | ||
|
|
||
| const nameRegex = /^[a-zA-Z0-9-_.]+$/; | ||
| const validateForm = (data: DialogFormData) => { | ||
| const errors: { name?: string } = {}; | ||
| const { name } = data; | ||
|
|
||
| if (name) { | ||
| if (!nameRegex.test(name)) { | ||
| errors.name = formatMessage( | ||
| 'Spaces and special characters are not allowed. Use letters, numbers, -, or _., numbers, -, and _' | ||
| ); | ||
| } | ||
| if (dialogs.some(dialog => dialog.id === name)) { | ||
| errors.name = formatMessage('Duplicaton of dialog name'); | ||
| } | ||
| } else { | ||
| errors.name = formatMessage('Please input a name'); | ||
| } | ||
| return errors; | ||
| }; | ||
|
|
||
| const handleSubmit = e => { | ||
| e.preventDefault(); | ||
| const errors = validateForm(formData); | ||
| if (Object.keys(errors).length) { | ||
| setFormDataErrors(errors); | ||
| return; | ||
| } | ||
|
|
||
| onSubmit({ | ||
| ...formData, | ||
| }); | ||
| }; | ||
|
|
||
| return ( | ||
| <DialogWrapper isOpen={isOpen} onDismiss={onDismiss} {...DialogCreationCopy.DEFINE_CONVERSATION_OBJECTIVE}> | ||
| <form onSubmit={handleSubmit}> | ||
| <input type="submit" style={{ display: 'none' }} /> | ||
| <Stack 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> | ||
|
|
||
| <DialogFooter> | ||
| <DefaultButton onClick={onDismiss} text={formatMessage('Cancel')} /> | ||
| <PrimaryButton onClick={handleSubmit} text={formatMessage('Next')} /> | ||
| </DialogFooter> | ||
| </form> | ||
| </DialogWrapper> | ||
| ); | ||
| }; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
32 changes: 0 additions & 32 deletions
32
Composer/packages/client/src/pages/design/new-dialog-modal.tsx
This file was deleted.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters