Merge pull request #549 from Lemoncode/feature/#513-create-dialog-import-collection

#513-empty-name-warning-and-space-between-modal-elements

Author: brauliodiez

src/pods/import-collection/import-panel.pod.module.css

@@ -1,3 +1,10 @@
+.text-info {
+	background-color: var(--background-dialog);
+	padding-top: var(--space-md);
+	display: flex;
+	justify-content: center;
+}
+
 .table-name,
 .json-textarea {
 	background-color: var(--background-dialog);

src/pods/import-collection/import-panel.pod.tsx

@@ -76,6 +76,11 @@ export const ImportPanel: React.FC<ImportPanelProps> = props => {
   const handleChangeTableName = (e: React.ChangeEvent<HTMLInputElement>) => {
     const tableName: string = e.currentTarget.value;
     setEditTable({ ...editTable, tableName });
+    if (e.currentTarget.value.length === 0) {
+      setJsonError('Name cannot be empty');
+    } else {
+      setJsonError(null);
+    }
   };
 
   return (
@@ -91,7 +96,7 @@ export const ImportPanel: React.FC<ImportPanelProps> = props => {
           />
         </label>
       </div>
-      <label>
+      <label className={classes.textInfo}>
         Copy here a document (you can copy it from a collection using a tool
         like Mongo Compass)
       </label>