Merge pull request #123 from Hexastack/122-bug-missing-input-control-in-block-form-trigger-messages

fix(frontend): trigger empty messages input control

frontend/src/components/visual-editor/form/inputs/triggers/PatternInput.tsx

@@ -6,7 +6,7 @@
  * 2. All derivative works must include clear attribution to the original creator and software, Hexastack and Hexabot, in a prominent location (e.g., in the software's "About" section, documentation, and README file).
  */
 
-import { Box, Grid, MenuItem, Typography } from "@mui/material";
+import { Box, Grid, MenuItem, TextFieldProps, Typography } from "@mui/material";
 import { FC, useEffect, useState } from "react";
 import { RegisterOptions, useFormContext } from "react-hook-form";
 import { useTranslation } from "react-i18next";
@@ -57,9 +57,15 @@ type PatternInputProps = {
   onChange: (pattern: Pattern) => void;
   block?: IBlockFull;
   idx: number;
+  getInputProps?: (index: number) => TextFieldProps;
 };
 
-const PatternInput: FC<PatternInputProps> = ({ value, onChange, idx }) => {
+const PatternInput: FC<PatternInputProps> = ({
+  value,
+  onChange,
+  idx,
+  getInputProps,
+}) => {
   const { t } = useTranslation();
   const {
     register,
@@ -272,6 +278,7 @@ const PatternInput: FC<PatternInputProps> = ({ value, onChange, idx }) => {
         ) : null}
         {typeof value === "string" && patternType === "text" ? (
           <Input
+            {...(getInputProps ? getInputProps(idx) : null)}
             label={t("label.text")}
             value={value}
             onChange={(e) => onChange(e.target.value)}

frontend/src/components/visual-editor/form/inputs/triggers/PatternsInput.tsx

@@ -10,6 +10,7 @@ import AddIcon from "@mui/icons-material/Add";
 import DeleteIcon from "@mui/icons-material/Delete";
 import { Box, Button, Grid, IconButton, styled } from "@mui/material";
 import { FC, Fragment, useEffect, useState } from "react";
+import { useFormContext } from "react-hook-form";
 import { useTranslation } from "react-i18next";
 
 import { Pattern } from "@/types/block.types";
@@ -37,6 +38,19 @@ const PatternsInput: FC<PatternsInputProps> = ({ value, onChange }) => {
   const [patterns, setPatterns] = useState<ValueWithId<Pattern>[]>(
     value.map((pattern) => createValueWithId(pattern)),
   );
+  const {
+    register,
+    formState: { errors },
+  } = useFormContext<any>();
+  const getInputProps = (index: number) => {
+    return {
+      ...register(`message.${index}`, {
+        required: t("message.text_is_required"),
+      }),
+      error: !!errors?.message?.[index],
+      helperText: errors?.message?.[index]?.message,
+    };
+  };
   const addInput = () => {
     setPatterns([...patterns, createValueWithId<Pattern>("")]);
   };
@@ -73,6 +87,7 @@ const PatternsInput: FC<PatternsInputProps> = ({ value, onChange }) => {
                 idx={idx}
                 value={value}
                 onChange={updateInput(idx)}
+                getInputProps={getInputProps}
               />
             </Fragment>
           ))

frontend/src/i18n/en/translation.json

@@ -101,7 +101,8 @@
     "attachment_not_found": "Attachment is not found",
     "title_length_exceeded": "You have reached the maximum length",
     "no_label_found": "No label found",
-    "code_is_required": "Language code is required"
+    "code_is_required": "Language code is required",
+    "text_is_required": "Text is required"
   },
   "menu": {
     "terms": "Terms of Use",

frontend/src/i18n/fr/translation.json

@@ -102,7 +102,8 @@
     "attachment_not_found": "La pièce jointe est introuvable",
     "title_length_exceeded": "Vous avez atteint la longueur maximale",
     "no_label_found": "Aucune étiquette trouvée",
-    "code_is_required": "Le code est requis"
+    "code_is_required": "Le code est requis",
+    "text_is_required": "Texte requis"
   },
   "menu": {
     "terms": "Conditions d'utilisation",