From e30f5eaef3dc516e8fcdc7adabbedbd33a7e2cf6 Mon Sep 17 00:00:00 2001
From: hexastack <talebhassan.ikbel@gmail.com>
Date: Thu, 24 Apr 2025 18:43:07 +0100
Subject: [PATCH] fix: validation bypass when updating block

---
 frontend/public/locales/en/translation.json   |  3 ++-
 frontend/public/locales/fr/translation.json   |  3 ++-
 frontend/src/app-components/tabs/TabPanel.tsx | 19 ++++++++++++-------
 .../visual-editor/BlockEditForm.tsx           |  8 +++++++-
 4 files changed, 23 insertions(+), 10 deletions(-)

diff --git a/frontend/public/locales/en/translation.json b/frontend/public/locales/en/translation.json
index c1a18167..5b204ff0 100644
--- a/frontend/public/locales/en/translation.json
+++ b/frontend/public/locales/en/translation.json
@@ -120,7 +120,8 @@
     "image_error": "Image not found",
     "file_error": "File not found",
     "audio_error": "Audio not found",
-    "video_error": "Video not found"
+    "video_error": "Video not found",
+    "missing_fields_error": "Please make sure that all required fields are filled"
   },
   "menu": {
     "terms": "Terms of Use",
diff --git a/frontend/public/locales/fr/translation.json b/frontend/public/locales/fr/translation.json
index 8fd8f908..ce8c5352 100644
--- a/frontend/public/locales/fr/translation.json
+++ b/frontend/public/locales/fr/translation.json
@@ -120,7 +120,8 @@
     "image_error": "Image introuvable",
     "file_error": "Fichier introuvable",
     "audio_error": "Audio introuvable",
-    "video_error": "Vidéo introuvable"
+    "video_error": "Vidéo introuvable",
+    "missing_fields_error": "Veuillez vous assurer que tous les champs sont remplis correctement"
   },
   "menu": {
     "terms": "Conditions d'utilisation",
diff --git a/frontend/src/app-components/tabs/TabPanel.tsx b/frontend/src/app-components/tabs/TabPanel.tsx
index 6845409a..766bd39a 100644
--- a/frontend/src/app-components/tabs/TabPanel.tsx
+++ b/frontend/src/app-components/tabs/TabPanel.tsx
@@ -1,5 +1,5 @@
 /*
- * Copyright © 2024 Hexastack. All rights reserved.
+ * Copyright © 2025 Hexastack. All rights reserved.
  *
  * Licensed under the GNU Affero General Public License v3.0 (AGPLv3) with the following additional terms:
  * 1. The name "Hexabot" is a trademark of Hexastack. You may not use this name in derivative works without express written permission.
@@ -24,16 +24,21 @@ export function TabPanel(props: TabPanelProps & GridProps) {
       item
       xs
       role="tabpanel"
-      hidden={value !== index}
       id={`vertical-tabpanel-${index}`}
       aria-labelledby={`vertical-tab-${index}`}
+      sx={{
+        display: "block",
+        visibility: value === index ? "visible" : "hidden",
+        height: value === index ? "auto" : 0,
+        overflow: "hidden",
+        position: value === index ? "relative" : "absolute",
+        ...sx,
+      }}
       {...other}
     >
-      {value === index ? (
-        <Grid container sx={{ flexDirection: "column", ...sx }}>
-          {children}
-        </Grid>
-      ) : null}
+      <Grid container sx={{ flexDirection: "column" }}>
+        {children}
+      </Grid>
     </Grid>
   );
 }
diff --git a/frontend/src/components/visual-editor/BlockEditForm.tsx b/frontend/src/components/visual-editor/BlockEditForm.tsx
index f0a506e1..5c5f98c4 100644
--- a/frontend/src/components/visual-editor/BlockEditForm.tsx
+++ b/frontend/src/components/visual-editor/BlockEditForm.tsx
@@ -100,6 +100,9 @@ export const BlockEditForm: FC<ComponentFormProps<IBlock>> = ({
       updateBlock({ id: block.id, params });
     }
   };
+  const onSubmitError = () => {
+    toast.error(t("message.missing_fields_error"));
+  };
 
   useEffect(() => {
     if (block) {
@@ -110,7 +113,10 @@ export const BlockEditForm: FC<ComponentFormProps<IBlock>> = ({
   }, [block, reset]);
 
   return (
-    <Wrapper onSubmit={handleSubmit(onSubmitForm)} {...WrapperProps}>
+    <Wrapper
+      onSubmit={handleSubmit(onSubmitForm, onSubmitError)}
+      {...WrapperProps}
+    >
       <BlockFormProvider methods={methods} block={block || undefined}>
         <ContentContainer>
           <ContentItem display="flex" gap={5}>