From 6bae770254049949d88579a3bce2e65ae5472137 Mon Sep 17 00:00:00 2001
From: oleojake <oleojake@gmail.com>
Date: Thu, 3 Apr 2025 09:23:54 +0200
Subject: [PATCH] #513-empty-name-warning-and-space-between-modal-elements

---
 src/pods/import-collection/import-panel.pod.module.css | 7 +++++++
 src/pods/import-collection/import-panel.pod.tsx        | 7 ++++++-
 2 files changed, 13 insertions(+), 1 deletion(-)

diff --git a/src/pods/import-collection/import-panel.pod.module.css b/src/pods/import-collection/import-panel.pod.module.css
index 869a9488..338ab41b 100644
--- a/src/pods/import-collection/import-panel.pod.module.css
+++ b/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);
diff --git a/src/pods/import-collection/import-panel.pod.tsx b/src/pods/import-collection/import-panel.pod.tsx
index c0241035..50d90528 100644
--- a/src/pods/import-collection/import-panel.pod.tsx
+++ b/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>