fix(#3560): allow empty image in register drep form

CHANGELOG.md

@@ -14,6 +14,7 @@ changes.
 
 ### Fixed
 
+- Fix an issue where the submit button remained disabled after removing an invalid value from the IMAGE input field on DRrep form [Issue 3560](https://github.com/IntersectMBO/govtool/issues/3560)
 - Fix app crash on unhandled wallet error [Issue 3123](https://github.com/IntersectMBO/govtool/issues/3123)
 - Preserve new lines in markdown text [Issue 2712](https://github.com/IntersectMBO/govtool/issues/2712)
 - Add scroll to markdown tables [Issue 3615](https://github.com/IntersectMBO/govtool/issues/3615)

govtool/frontend/src/components/organisms/UncontrolledImageInput.tsx

@@ -1,23 +1,31 @@
-/* eslint-disable @typescript-eslint/no-explicit-any */
 import { useRef } from "react";
-import { useController } from "react-hook-form";
+import {
+  Control,
+  FieldPath,
+  FieldValues,
+  RegisterOptions,
+  useController,
+} from "react-hook-form";
 import { FormErrorMessage } from "../atoms";
 
-type UncontrolledImageInputProps = {
-  name: string;
-  control: any;
-  rules?: any;
+type UncontrolledImageInputProps<
+  TFieldValues extends FieldValues = FieldValues,
+  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
+> = {
+  name: TName;
+  control: Control<TFieldValues>;
+  rules?: RegisterOptions<TFieldValues, TName>;
   placeholder?: string;
   dataTestId?: string;
 };
 
-export const UncontrolledImageInput = ({
+export const UncontrolledImageInput = <T extends FieldValues>({
   name,
   control,
   rules,
   placeholder,
   dataTestId,
-}: UncontrolledImageInputProps) => {
+}: UncontrolledImageInputProps<T>) => {
   const {
     field: { onChange },
     fieldState,
@@ -49,8 +57,8 @@ export const UncontrolledImageInput = ({
           borderRadius: "50px",
           height: "50px",
           border: "1px solid",
-          borderColor: fieldState.error?.message ? "red" : "#6F99FF",
-          backgroundColor: fieldState.error?.message ? "#FAEAEB" : "white",
+          borderColor: fieldState.error ? "red" : "#6F99FF",
+          backgroundColor: fieldState.error ? "#FAEAEB" : "white",
           boxSizing: "border-box",
           margin: 0,
           display: "block",

govtool/frontend/src/consts/dRepActions/fields.ts

@@ -77,6 +77,6 @@ export const Rules = {
       value: IMAGE_REGEX,
       message: i18n.t("registration.fields.validations.image"),
     },
-    validate: isValidImageUrl,
+    validate: (value: unknown) => isValidImageUrl(value, { optional: true }),
   },
 };

govtool/frontend/src/i18n/locales/en.json

@@ -389,7 +389,8 @@
       "tooLongUrl": "Url must be less than 128 bytes",
       "mustBeStakeAddress": "It must be reward address in bech32 format",
       "mustBeReceivingAddress": "Invalid payment address",
-      "couldNotGenerateImageSha": "Could not generate image sha"
+      "couldNotGenerateImageSha": "Could not generate image sha",
+      "invalidValueType": "Invalid value type"
     }
   },
   "proposalDiscussion": {

govtool/frontend/src/utils/isValidFormat.ts

@@ -7,6 +7,10 @@ import i18n from "@/i18n";
 import { adaHandleService } from "@/services/AdaHandle";
 import { getImageSha } from "./getImageSha";
 
+type Options = {
+  optional: boolean;
+};
+
 export const URL_REGEX =
   /^(?:(?:https?:\/\/)?(?:\d{1,3}\.\d{1,3}\.\d{1,3}\.\d{1,3}|(?:[a-zA-Z0-9-]+\.)+[a-zA-Z]{2,})(?:\/[^\s]*)?)|(?:ipfs:\/\/(?:[a-zA-Z0-9]+(?:\/[a-zA-Z0-9._-]+)*))$|^$/;
 export const HASH_REGEX = /^[0-9A-Fa-f]+$/;
@@ -78,8 +82,13 @@ export async function isDRepView(view?: string) {
   return i18n.t("forms.errors.mustBeDRepView");
 }
 
-export async function isValidImageUrl(url: string) {
+export async function isValidImageUrl(url: unknown, options?: Options) {
+  if (typeof url !== "string") {
+    return i18n.t("forms.errors.invalidValueType");
+  }
+  if (options?.optional && !url) return true;
   if (!url.length) return false;
+
   try {
     if (URL_REGEX.test(url)) {
       await getImageSha(url);