fix: validation bypass when updating block

Author: IkbelTalebHssan

frontend/public/locales/en/translation.json

@@ -116,7 +116,8 @@
     "select_category": "Select a flow",
     "logout_failed": "Something went wrong during logout",
     "duplicate_labels_not_allowed": "Duplicate labels are not allowed",
-    "duplicate_block_error": "Something went wrong while duplicating block"
+    "duplicate_block_error": "Something went wrong while duplicating block",
+    "missing_fields_error": "Please make sure that all required fields are filled"
   },
   "menu": {
     "terms": "Terms of Use",

frontend/public/locales/fr/translation.json

@@ -116,7 +116,8 @@
     "select_category": "Sélectionner une catégorie",
     "logout_failed": "Une erreur s'est produite lors de la déconnexion",
     "duplicate_labels_not_allowed": "Les étiquettes en double ne sont pas autorisées",
-    "duplicate_block_error": "Une erreur est survenue lors de la duplication du bloc"
+    "duplicate_block_error": "Une erreur est survenue lors de la duplication du bloc",
+    "missing_fields_error": "Veuillez vous assurer que tous les champs sont remplis correctement"
   },
   "menu": {
     "terms": "Conditions d'utilisation",

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>
   );
 }

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}>