Merge pull request #188 from Vizzuality/fix/dashboard-messages-improvements

mluena · web-flow · commit a003aedf3932 · 2025-04-02T11:05:30.000+02:00
new regex URL
diff --git a/client/src/components/forms/dataset/data-form-schema.tsx b/client/src/components/forms/dataset/data-form-schema.tsx
@@ -1,6 +1,7 @@
 import { z } from "zod";
 
 import type { VALUE_TYPE } from "./types";
+import { URL_REGEX } from "@/lib/utils/url-validator";
 
 export const getFormSchema = (value_type: VALUE_TYPE, countries: string[]) => {
   if (value_type === "number") {
@@ -21,21 +22,16 @@ export const getFormSchema = (value_type: VALUE_TYPE, countries: string[]) => {
         acc[`${country}`] = z
           .array(
             z.object({
-              link_title: z.string().min(1, { message: "Please enter a title" }),
+              link_title: z.string().min(1, { message: "title" }),
               link_url: z
                 .string()
-                .regex(
-                  new RegExp(
-                    "^(?=(https?://|www.))((https?://)?(www.)?)[a-zA-Z0-9.-]+.[a-zA-Z]{2,}(/[^s]*)?$",
-                  ),
-                  {
-                    message: "Please, enter a valid URL.",
-                  },
-                )
+                .regex(new RegExp(URL_REGEX), {
+                  message: "URL",
+                })
                 .max(255, {
                   message: "Website is limited to 255 characters.",
                 }),
-              description: z.string().min(1, { message: "Please enter a description" }),
+              description: z.string().min(1, { message: "description" }),
             }),
           )
           .optional();
diff --git a/client/src/components/map/legend/item/toolbar/index.tsx b/client/src/components/map/legend/item/toolbar/index.tsx
@@ -6,7 +6,7 @@ import { LuEye, LuEyeOff, LuDroplet, LuInfo, LuX } from "react-icons/lu";
 import { cn } from "@/lib/classnames";
 
 import { LegendItemToolbarProps } from "@/components/map/legend/types";
-import { Dialog, DialogContent, DialogTrigger } from "@/components/ui/dialog";
+import { Dialog, DialogContent, DialogTrigger, DialogTitle } from "@/components/ui/dialog";
 import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
 import { Tooltip, TooltipArrow, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip";
 
@@ -129,6 +129,7 @@ export const LegendItemToolbar: React.FC<LegendItemToolbarProps> = ({
                 </TooltipContent>
 
                 <DialogContent onCloseAutoFocus={(e) => e.preventDefault()}>
+                  <DialogTitle className="sr-only">Info</DialogTitle>
                   {InfoContent}
                 </DialogContent>
               </Tooltip>
diff --git a/client/src/components/new-dataset/step-description/csv-import.tsx b/client/src/components/new-dataset/step-description/csv-import.tsx
@@ -8,7 +8,7 @@ import { LuInfo } from "react-icons/lu";
 
 import { useRouter } from "next/navigation";
 
-import { Dialog, DialogTrigger, DialogContent } from "@/components/ui/dialog";
+import { Dialog, DialogTrigger, DialogContent, DialogTitle } from "@/components/ui/dialog";
 
 import { downloadCSV } from "@/lib/utils/csv";
 import { UsersPermissionsRole, UsersPermissionsUser } from "@/types/generated/strapi.schemas";
@@ -150,6 +150,7 @@ export default function CSVImport({
           </DialogTrigger>
 
           <DialogContent>
+            <DialogTitle className="sr-only">Data</DialogTitle>
             <CSVInfoContent valueType={valueType} />
           </DialogContent>
         </Dialog>
diff --git a/client/src/components/ui/form.tsx b/client/src/components/ui/form.tsx
@@ -172,9 +172,16 @@ const FormMessageArray = React.forwardRef<
 
       if (!e) return children;
 
-      return getKeys(e)
+      const messages = getKeys(e)
         .map((k) => e[k]?.message)
-        .join(", ");
+        .filter(Boolean);
+
+      if (messages.length === 1) return `Please fix the following field: ${messages[0]}.`;
+      if (messages.length > 1) {
+        const last = messages.pop();
+        return `Please fix the following fields: ${messages.join(", ")} and ${last}.`;
+      }
+      return children;
     }
 
     return error ? String(error?.message) : children;
diff --git a/client/src/containers/collaborators/form/index.tsx b/client/src/containers/collaborators/form/index.tsx
@@ -51,6 +51,7 @@ import {
 
 import { updateOrCreateCollaborator } from "@/services/collaborators";
 import { uploadImage } from "@/services/datasets";
+import { URL_REGEX } from "@/lib/utils/url-validator";
 
 const relationshipOptions = [
   {
@@ -191,14 +192,9 @@ export default function CollaboratorForm() {
       }),
     link: z
       .string()
-      .regex(
-        new RegExp(
-          "^(?=(https?://|www.))((https?://)?(www.)?)[a-zA-Z0-9.-]+.[a-zA-Z]{2,}(/[^s]*)?$",
-        ),
-        {
-          message: "Please, enter a valid URL.",
-        },
-      )
+      .regex(new RegExp(URL_REGEX), {
+        message: "Please, enter a valid URL.",
+      })
       .max(255, {
         message: "Website is limited to 255 characters.",
       }),
diff --git a/client/src/containers/countries/countries-detail.tsx b/client/src/containers/countries/countries-detail.tsx
@@ -12,7 +12,7 @@ import CountryDownloadDialog from "@/containers/countries/download-dialog";
 import { MultiCombobox } from "@/containers/countries/multicombobox";
 
 import { Button } from "@/components/ui/button";
-import { Dialog, DialogContent, DialogTrigger } from "@/components/ui/dialog";
+import { Dialog, DialogContent, DialogTrigger, DialogTitle } from "@/components/ui/dialog";
 
 import CountriesTable from "./countries-table";
 
@@ -66,6 +66,7 @@ const CountryDetail = ({ embed }: { embed?: boolean }) => {
                 <Button variant="primary-outline">Open Table detail</Button>
               </DialogTrigger>
               <DialogContent className="block max-w-[90svw] md:w-auto">
+                <DialogTitle className="sr-only">Country data</DialogTitle>
                 <CountryDataDialog />
               </DialogContent>
             </Dialog>
diff --git a/client/src/containers/datasets/item.tsx b/client/src/containers/datasets/item.tsx
@@ -9,7 +9,7 @@ import { DatasetListResponseDataItem } from "@/types/generated/strapi.schemas";
 
 import { datasetSearchAtom, useSyncDatasets, useSyncLayers } from "@/app/store";
 
-import { Dialog, DialogContent, DialogTrigger } from "@/components/ui/dialog";
+import { Dialog, DialogContent, DialogTrigger, DialogTitle } from "@/components/ui/dialog";
 import { ScrollArea } from "@/components/ui/scroll-area";
 import SearchHighlight from "@/components/ui/search-highlight";
 import { Switch } from "@/components/ui/switch";
@@ -82,6 +82,7 @@ const DatasetsItem = ({ id, attributes }: DatasetListResponseDataItem) => {
           </DialogTrigger>
 
           <DialogContent>
+            <DialogTitle className="sr-only">Dataset</DialogTitle>
             <ScrollArea className="max-h-[80svh] p-6">
               <Markdown className="prose">{attributes?.description}</Markdown>
             </ScrollArea>
diff --git a/client/src/containers/other-tools/form/index.tsx b/client/src/containers/other-tools/form/index.tsx
@@ -50,6 +50,7 @@ import {
 } from "@/components/ui/select";
 
 import { updateOrCreateOtherTools } from "@/services/other-tools";
+import { URL_REGEX } from "@/lib/utils/url-validator";
 
 export default function ToolForm() {
   const { push, back } = useRouter();
@@ -175,14 +176,9 @@ export default function ToolForm() {
     name: z.string().min(1, { message: "Please enter tool name" }),
     link: z
       .string()
-      .regex(
-        new RegExp(
-          "^(?=(https?://|www.))((https?://)?(www.)?)[a-zA-Z0-9.-]+.[a-zA-Z]{2,}(/[^s]*)?$",
-        ),
-        {
-          message: "Please, enter a valid URL.",
-        },
-      )
+      .regex(new RegExp(URL_REGEX), {
+        message: "Please, enter a valid URL.",
+      })
       .max(255, {
         message: "Website is limited to 255 characters.",
       }),
diff --git a/client/src/containers/projects/filters/dialog.tsx b/client/src/containers/projects/filters/dialog.tsx
@@ -18,7 +18,7 @@ import { GET_PILLARS_OPTIONS } from "@/constants/pillars";
 
 import { Button } from "@/components/ui/button";
 import { Checkbox } from "@/components/ui/checkbox";
-import { Dialog, DialogContent, DialogTrigger } from "@/components/ui/dialog";
+import { Dialog, DialogContent, DialogTrigger, DialogTitle } from "@/components/ui/dialog";
 import {
   Form,
   FormControl,
@@ -90,6 +90,7 @@ const ProjectsFiltersDialog = () => {
       </DialogTrigger>
 
       <DialogContent>
+        <DialogTitle className="sr-only">Filters</DialogTitle>
         <div className="space-y-5 p-5">
           <h2 className="font-metropolis text-3xl tracking-tight">Filters</h2>
 
diff --git a/client/src/containers/welcome-message/index.tsx b/client/src/containers/welcome-message/index.tsx
@@ -14,8 +14,7 @@ import { cn } from "@/lib/classnames";
 import { useGetWelcomeMessage } from "@/types/generated/welcome-message";
 
 import { Button } from "@/components/ui/button";
-import { Dialog, DialogContent } from "@/components/ui/dialog";
-import isEmpty from "lodash-es/isEmpty";
+import { Dialog, DialogContent, DialogTitle } from "@/components/ui/dialog";
 
 export default function WelcomeMessage() {
   const videoRef = useRef<ReactPlayer>(null);
@@ -41,7 +40,7 @@ export default function WelcomeMessage() {
   const handleFullscreen = () => {
     setFullscreen(screenfull?.isFullscreen);
   };
-  
+
   useEffect(() => {
     if (screenfull.isEnabled) {
       screenfull.on("change", handleFullscreen);
@@ -57,6 +56,7 @@ export default function WelcomeMessage() {
   return (
     <Dialog open={!cookies.welcome}>
       <DialogContent close={false} className="overflow-hidden border-none lg:max-w-[900px]">
+        <DialogTitle className="sr-only">Welcome message</DialogTitle>
         <div className="flex w-full flex-col overflow-hidden lg:flex-row">
           <div className="flex w-full flex-col items-center justify-center space-y-5 p-5 text-center lg:w-1/2 lg:space-y-10 lg:p-12">
             <header className="max-w-md space-y-2 lg:space-y-5">
diff --git a/client/src/lib/utils/url-validator.ts b/client/src/lib/utils/url-validator.ts
@@ -0,0 +1,2 @@
+export const URL_REGEX =
+  "^(?=(https?://|www.))((https?://)?(www.)?)[a-zA-Z0-9.-]+.[a-zA-Z]{2,}(/.*)?$";
diff --git a/cms/config/api.ts b/cms/config/api.ts
@@ -1,7 +1,7 @@
 export default {
   rest: {
-    defaultLimit: 25,
-    maxLimit: 300,
+    defaultLimit: 500,
+    maxLimit: 500,
     withCount: true,
   },
 };
