diff --git a/Composer/packages/client/__tests__/components/design.test.js b/Composer/packages/client/__tests__/components/design.test.js index b7336db9a1..ead441d63f 100644 --- a/Composer/packages/client/__tests__/components/design.test.js +++ b/Composer/packages/client/__tests__/components/design.test.js @@ -9,7 +9,7 @@ import { dialogs } from '../constants.json'; import { TriggerCreationModal } from './../../src/components/ProjectTree/TriggerCreationModal'; import { ProjectTree } from './../../src/components/ProjectTree'; -import { CreateDialog } from './../../src/pages/design/createDialog'; +import { CreateDialogModal } from './../../src/pages/design/createDialogModal'; describe('', () => { it('should render the ProjectTree', async () => { const dialogId = 'Main'; @@ -42,7 +42,9 @@ describe('', () => { isOpen = false; }); const handleSubmit = jest.fn(() => {}); - const { getByText } = render(); + const { getByText } = render( + + ); const cancelButton = getByText('Cancel'); fireEvent.click(cancelButton); expect(isOpen).toBe(false); diff --git a/Composer/packages/client/src/pages/design/createDialog.tsx b/Composer/packages/client/src/pages/design/createDialogModal.tsx similarity index 86% rename from Composer/packages/client/src/pages/design/createDialog.tsx rename to Composer/packages/client/src/pages/design/createDialogModal.tsx index 4016510c02..65a15f6173 100644 --- a/Composer/packages/client/src/pages/design/createDialog.tsx +++ b/Composer/packages/client/src/pages/design/createDialogModal.tsx @@ -14,13 +14,13 @@ import { StoreContext } from '../../store'; import { name, description, styles as wizardStyles } from './styles'; -interface CreateDialogParams { +interface DialogFormData { name: string; description: string; } -interface CreateDialogProps { - onSubmit: (createDialogParams: CreateDialogParams) => void; +interface CreateDialogModalProps { + onSubmit: (dialogFormData: DialogFormData) => void; onDismiss: () => void; onCurrentPathUpdate?: (newPath?: string, storageId?: string) => void; focusedStorageFolder?: StorageFolder; @@ -28,15 +28,13 @@ interface CreateDialogProps { isOpen: boolean; } -const initialFormDataError = {}; - -export const CreateDialog: React.FC = props => { +export const CreateDialogModal: React.FC = props => { const { state } = useContext(StoreContext); const { dialogs } = state; const { onSubmit, onDismiss, isOpen } = props; - const initalFormData: CreateDialogParams = { name: '', description: '' }; - const [formData, setFormData] = useState(initalFormData); - const [formDataErrors, setFormDataErrors] = useState<{ name?: string }>(initialFormDataError); + const initialFormData: DialogFormData = { name: '', description: '' }; + const [formData, setFormData] = useState(initialFormData); + const [formDataErrors, setFormDataErrors] = useState<{ name?: string }>({}); const updateForm = field => (e, newValue) => { setFormData({ @@ -46,7 +44,7 @@ export const CreateDialog: React.FC = props => { }; const nameRegex = /^[a-zA-Z0-9-_.]+$/; - const validateForm = (data: CreateDialogParams) => { + const validateForm = (data: DialogFormData) => { const errors: { name?: string } = {}; const { name } = data; @@ -56,7 +54,7 @@ export const CreateDialog: React.FC = props => { 'Spaces and special characters are not allowed. Use letters, numbers, -, or _., numbers, -, and _' ); } - if (dialogs.findIndex(dialog => dialog.id === name) > -1) { + if (dialogs.some(dialog => dialog.id === name)) { errors.name = formatMessage('Duplicaton of dialog name'); } } else { diff --git a/Composer/packages/client/src/pages/design/index.tsx b/Composer/packages/client/src/pages/design/index.tsx index ff7fcbbc94..1d38faceb3 100644 --- a/Composer/packages/client/src/pages/design/index.tsx +++ b/Composer/packages/client/src/pages/design/index.tsx @@ -28,7 +28,7 @@ import { clearBreadcrumb } from '../../utils/navigation'; import undoHistory from '../../store/middlewares/undo/history'; import grayComposerIcon from '../../images/grayComposerIcon.svg'; -import { CreateDialog } from './createDialog'; +import { CreateDialogModal } from './createDialogModal'; import { breadcrumbClass, contentWrapper, @@ -399,7 +399,7 @@ function DesignPage(props) { {state.showCreateDialogModal && ( - actions.createDialogCancel()} onSubmit={onSubmit}