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}