fix(#2403): fix DRep link and description validation

CHANGELOG.md

@@ -17,6 +17,7 @@ changes.
 ### Fixed
 
 - Fix calculating DRep live voting power [Issue 2460](https://github.com/IntersectMBO/govtool/issues/2460)
+- Fix link and description validation [Issue 2403](https://github.com/IntersectMBO/govtool/issues/2403)
 
 ### Changed
 

govtool/frontend/src/components/molecules/DRepDataForm.tsx

@@ -3,6 +3,7 @@ import {
   Control,
   FieldErrors,
   UseFormRegister,
+  UseFormWatch,
   useFieldArray,
 } from "react-hook-form";
 import { Box } from "@mui/material";
@@ -20,9 +21,10 @@ type Props = {
   control: Control<DRepDataFormValues>;
   errors: FieldErrors<DRepDataFormValues>;
   register: UseFormRegister<DRepDataFormValues>;
+  watch: UseFormWatch<DRepDataFormValues>;
 };
 
-export const DRepDataForm = ({ control, errors, register }: Props) => {
+export const DRepDataForm = ({ control, errors, register, watch }: Props) => {
   const { t } = useTranslation();
   const { isMobile } = useScreenDimension();
 
@@ -111,12 +113,14 @@ export const DRepDataForm = ({ control, errors, register }: Props) => {
             control={control}
             errors={errors}
             register={register}
+            watch={watch}
           />
           <ReferencesSection
             type="identity"
             control={control}
             errors={errors}
             register={register}
+            watch={watch}
           />
         </Box>
         <div>
@@ -176,13 +180,15 @@ type ReferencesSectionProps = {
   control: Control<DRepDataFormValues>;
   errors: FieldErrors<DRepDataFormValues>;
   register: UseFormRegister<DRepDataFormValues>;
+  watch: UseFormWatch<DRepDataFormValues>;
 };
 
 const ReferencesSection = ({
   type,
   control,
   errors,
   register,
+  watch,
 }: ReferencesSectionProps) => {
   const { fieldName, jsonldType } = (() => {
     // eslint-disable-next-line default-case
@@ -237,7 +243,16 @@ const ReferencesSection = ({
             helpfulTextDataTestId={`${type}-reference-description-${
               index + 1
             }-hint`}
-            rules={Rules.LINK_DESCRIPTION}
+            rules={{
+              ...Rules.LINK_DESCRIPTION,
+              validate: (value) => {
+                const isLink = watch(`${fieldName}.${index}.uri`);
+                if (!value && Boolean(isLink)) {
+                  return t("dRepData.required");
+                }
+                return true;
+              },
+            }}
           />
           <ControlledField.Input
             {...register(`${fieldName}.${index}.uri`)}
@@ -258,7 +273,16 @@ const ReferencesSection = ({
             dataTestId={`${type}-reference-url-${index + 1}-input`}
             errorDataTestId={`${type}-reference-url-${index + 1}-error`}
             helpfulTextDataTestId={`${type}-reference-url-${index + 1}-hint`}
-            rules={Rules.LINK_URL}
+            rules={{
+              ...Rules.LINK_URL,
+              validate: (value) => {
+                const isDescription = watch(`${fieldName}.${index}.label`);
+                if (!value && Boolean(isDescription)) {
+                  return t("dRepData.required");
+                }
+                return true;
+              },
+            }}
           />
         </Fragment>
       ))}

govtool/frontend/src/components/organisms/EditDRepInfoSteps/EditDRepForm.tsx

@@ -67,7 +67,12 @@ export const EditDRepForm = ({
 
   return (
     <Box sx={{ display: "flex", flexDirection: "column", gap: 8 }}>
-      <DRepDataForm control={control} errors={errors} register={register} />
+      <DRepDataForm
+        control={control}
+        errors={errors}
+        register={register}
+        watch={watch}
+      />
       <CenteredBoxBottomButtons
         onActionButton={onClickContinue}
         disableActionButton={isContinueButtonDisabled}

govtool/frontend/src/components/organisms/RegisterAsDRepSteps/RegisterAsDRepForm.tsx

@@ -25,7 +25,12 @@ export const RegisterAsDRepForm = ({
 
   return (
     <Box sx={{ display: "flex", flexDirection: "column", gap: 8 }}>
-      <DRepDataForm control={control} errors={errors} register={register} />
+      <DRepDataForm
+        control={control}
+        errors={errors}
+        register={register}
+        watch={watch}
+      />
       <CenteredBoxBottomButtons
         onActionButton={onClickContinue}
         disableActionButton={isContinueButtonDisabled}