handle comments

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('<ProjectTree/>', () => {
   it('should render the ProjectTree', async () => {
     const dialogId = 'Main';
@@ -42,7 +42,9 @@ describe('<ProjectTree/>', () => {
       isOpen = false;
     });
     const handleSubmit = jest.fn(() => {});
-    const { getByText } = render(<CreateDialog isOpen={isOpen} onDismiss={handleDismiss} onSubmit={handleSubmit} />);
+    const { getByText } = render(
+      <CreateDialogModal isOpen={isOpen} onDismiss={handleDismiss} onSubmit={handleSubmit} />
+    );
     const cancelButton = getByText('Cancel');
     fireEvent.click(cancelButton);
     expect(isOpen).toBe(false);

Composer/packages/client/src/pages/design/createDialog.tsx → Composer/packages/client/src/pages/design/createDialogModal.tsx

@@ -14,29 +14,27 @@ 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;
   currentPath?: string;
   isOpen: boolean;
 }
 
-const initialFormDataError = {};
-
-export const CreateDialog: React.FC<CreateDialogProps> = props => {
+export const CreateDialogModal: React.FC<CreateDialogModalProps> = 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<CreateDialogProps> = 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<CreateDialogProps> = 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 {

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) {
         </div>
       </div>
       {state.showCreateDialogModal && (
-        <CreateDialog
+        <CreateDialogModal
           isOpen={state.showCreateDialogModal}
           onDismiss={() => actions.createDialogCancel()}
           onSubmit={onSubmit}