Merge pull request #2207 from AletheiaFact/Refactor/improve-and-refactor-verification-request-page-UI

UI: Standardize translations and extract tag logic to help check requests

Author: caneppelevitor

public/locales/en/verificationRequest.json

@@ -43,7 +43,7 @@
     "impactAreaPlaceholder": "Select the impact area...",
     "publicationDatePlaceholder": "Select the date you saw this...",
     "heardFromPlaceholder": "Specify where you saw or heard this...",
-    "sourcePlaceholder":  "Provide the source of the information...",
+    "sourcePlaceholder": "Provide the source of the information...",
     "emailPlaceholder": "Enter your email address here...",
     "verificationRequestCreateSuccess": "Verification Request created successfully",
     "verificationRequestCreateError": "Error while creating the Verification Request",
@@ -71,10 +71,15 @@
     "statusDeclined": "Declined",
     "allPriorities": "All Priorities",
     "allSourceChannels": "All Source Channels",
-    "priorityCritical": "Critical",
-    "priorityHigh": "High",
-    "priorityMedium": "Medium",
-    "priorityLow": "Low",
+    "priority": {
+    "critical": "Critical",
+    "high": "High ({{level}})",
+    "medium": "Medium ({{level}})",
+    "low": "Low ({{level}})",
+    "filter_high": "High",
+    "filter_medium": "Medium",
+    "filter_low": "Low"
+    },
     "filterByPriority": "Filter by Priority",
     "noRequestsInStatus": "No requests in this status",
     "impactAreaFilterLabel": "Impact Area:",

public/locales/pt/verificationRequest.json

@@ -43,7 +43,7 @@
     "impactAreaPlaceholder": "Selecione a área de impacto...",
     "publicationDatePlaceholder": "Selecione a data em que você viu isso...",
     "heardFromPlaceholder": "Especifique onde você viu ou ouviu isso...",
-    "sourcePlaceholder":  "Forneça a fonte da informação...",
+    "sourcePlaceholder": "Forneça a fonte da informação...",
     "emailPlaceholder": "Insira seu endereço de email aqui...",
     "verificationRequestCreateSuccess": "Denúncia criada com sucesso",
     "verificationRequestCreateError": "Erro ao criar a denúncia",
@@ -71,10 +71,15 @@
     "statusDeclined": "Recusado",
     "allPriorities": "Todas as Prioridades",
     "allSourceChannels": "Todos os Canais de Origem",
-    "priorityCritical": "Crítica",
-    "priorityHigh": "Alta",
-    "priorityMedium": "Média",
-    "priorityLow": "Baixa",
+    "priority": {
+    "critical": "Crítico",
+    "high": "Alta ({{level}})",
+    "medium": "Média ({{level}})",
+    "low": "Baixa ({{level}})",
+    "filter_high": "Alta",
+    "filter_medium": "Média",
+    "filter_low": "Baixa"
+    },
     "filterByPriority": "Filtrar por Prioridade",
     "noRequestsInStatus": "Nenhuma solicitação neste status",
     "impactAreaFilterLabel": "Área de Impacto:",

src/components/VerificationRequest/SelectFilter.tsx

@@ -25,10 +25,10 @@ interface SelectFilterProps {
 const filterActions: Record<string, () => SelectOption[]> = {
   filterByPriority: () => [
     { value: "all", labelKey: "allPriorities" },
-    { value: "critical", labelKey: "priorityCritical" },
-    { value: "high", labelKey: "priorityHigh" },
-    { value: "medium", labelKey: "priorityMedium" },
-    { value: "low", labelKey: "priorityLow" },
+    { value: "critical", labelKey: "priority.critical" },
+    { value: "high", labelKey: "priority.filter_high" },
+    { value: "medium", labelKey: "priority.filter_medium" },
+    { value: "low", labelKey: "priority.filter_low" },
   ],
 
   filterBySourceChannel: () => {

src/components/VerificationRequest/SourceListVerificationRequest.tsx

@@ -1,15 +1,15 @@
 import React from "react";
 import Link from "next/link";
 import { VerificationRequestContent } from "./VerificationRequestContent";
+import { truncateUrl } from "../../helpers/verificationRequestCardHelper";
 
 interface SourceListProps {
     sources: Array<{ href?: string }>;
     t: (key: string) => string;
-    truncateUrl: (url: string) => string;
     id: string;
 }
 
-const SourceList: React.FC<SourceListProps> = ({ sources, t, truncateUrl, id }) => {
+const SourceList: React.FC<SourceListProps> = ({ sources, t, id }) => {
     if (!sources?.length) return null;
 
     const flatSources = sources.flat().filter((source) => !!source.href);

src/components/VerificationRequest/VerificationRequestAlert.tsx

@@ -35,7 +35,7 @@ const VerificationRequestAlert = ({ targetId, verificationRequestId }) => {
                 description: (
                     <AletheiaButton
                         href={`/claim/create?verificationRequest=${verificationRequestId}`}
-                        style={{ width: "fit-content", marginTop: 32 }}
+                        className="container-alert"
                     >
                         {t("seo:claimCreateTitle")}
                     </AletheiaButton>
@@ -44,40 +44,19 @@ const VerificationRequestAlert = ({ targetId, verificationRequestId }) => {
         }
         if (targetId) {
             return {
-                type: "warning",
+                type: "success",
                 showIcon: false,
-                message: (
-                    <div
-                        style={{
-                            display: "flex",
-                            gap: 16,
-                            flexWrap: "wrap",
-                            justifyContent: "space-around",
-                        }}
-                    >
-                        <span
-                            style={{
-                                height: "auto",
-                                fontSize: 18,
-                                lineHeight: "40px",
-                                textAlign: "center",
-                            }}
-                        >
-                            {t(
-                                "verificationRequest:openVerificationRequestClaimLabel"
-                            )}
-                        </span>
+                message: t("verificationRequest:openVerificationRequestClaimLabel"),
+                description: (
                         <AletheiaButton
                             href={`/claim/${targetId?.slug}`}
-                            style={{ width: "fit-content" }}
+                            className="container-alert"
                         >
                             {t(
                                 "verificationRequest:openVerificationRequestClaimButton"
                             )}
                         </AletheiaButton>
-                    </div>
                 ),
-                description: null,
             };
         }
         return null;

src/components/VerificationRequest/VerificationRequestBoardView.tsx

@@ -11,16 +11,12 @@ import {
 } from "@mui/material";
 import colors from "../../styles/colors";
 import AletheiaButton, { ButtonType } from "../Button";
-import { SeverityEnum, VerificationRequestStatus } from "../../../server/verification-request/dto/types";
-import { SeverityLevel } from "../../types/VerificationRequest";
+import { VerificationRequestStatus } from "../../../server/verification-request/dto/types";
 import VerificationRequestDetailDrawer from "./VerificationRequestDetailDrawer";
-
-const SEVERITY_COLOR_MAP: Record<SeverityLevel, string> = {
-  low: colors.low,
-  medium: colors.medium,
-  high: colors.high,
-  critical: colors.critical,
-};
+import {
+  getSeverityColor,
+  getSeverityLabel,
+} from "../../helpers/verificationRequestCardHelper";
 
 const VerificationRequestBoardView = ({ state, actions }) => {
   const { loading, filteredRequests, totalVerificationRequests, paginationModel } = state;
@@ -64,33 +60,6 @@ const VerificationRequestBoardView = ({ state, actions }) => {
     statuses.map(({ key }) => [key, totalVerificationRequests[key]])
   );
 
-  const getSeverityColor = (severity: SeverityEnum | undefined): string => {
-    if (!severity) return colors.neutralSecondary;
-
-    const severityStr = String(severity);
-
-    let severityLevel: SeverityLevel;
-
-    if (severityStr.startsWith("low")) severityLevel = "low";
-    else if (severityStr.startsWith("medium")) severityLevel = "medium";
-    else if (severityStr.startsWith("high")) severityLevel = "high";
-    else if (severityStr === "critical") severityLevel = "critical";
-    else severityLevel = "low";
-
-    return SEVERITY_COLOR_MAP[severityLevel];
-  };
-
-  const formatSeverityLabel = (severity: string) => {
-    if (!severity) return "N/A";
-    const parts = severity.split("_");
-    if (parts.length === 2) {
-      return `${parts[0].charAt(0).toUpperCase() + parts[0].slice(1)} (${
-        parts[1]
-      })`;
-    }
-    return severity.charAt(0).toUpperCase() + severity.slice(1);
-  };
-
   const truncateText = (text: string, maxLength: number) => {
     if (!text) return "";
     return text.length > maxLength
@@ -179,7 +148,7 @@ const VerificationRequestBoardView = ({ state, actions }) => {
                           }}
                         >
                           <Chip
-                            label={formatSeverityLabel(request.severity)}
+                            label={getSeverityLabel(request.severity, t)}
                             size="small"
                             sx={{
                               backgroundColor: getSeverityColor(
@@ -236,7 +205,13 @@ const VerificationRequestBoardView = ({ state, actions }) => {
                             <strong>
                               {t("verificationRequest:tagSourceChannel")}:
                             </strong>{" "}
-                            {truncateText(request.sourceChannel, 30)}
+                            {truncateText(
+                              t(
+                                `verificationRequest:${request.sourceChannel}`,
+                                { defaultValue: request.sourceChannel },
+                              ),
+                              30,
+                            )}
                           </Typography>
                         )}
 

src/components/VerificationRequest/VerificationRequestCard.tsx

@@ -21,6 +21,10 @@ import { MetaChip } from "./MetaChip";
 import { VerificationRequestContent } from "./VerificationRequestContent";
 import { RequestDates } from "./RequestDates";
 import SourceList from "./SourceListVerificationRequest";
+import {
+    getSeverityColor,
+    getSeverityLabel,
+} from "../../helpers/verificationRequestCardHelper";
 
 const ContentWrapper = styled.div`
     display: flex;
@@ -44,20 +48,6 @@ const MetaChipContainer = styled(Grid)`
 
 const smallGreyIcon = { fontSize: 18, color: "grey" };
 
-const truncateUrl = (url) => {
-    try {
-        const { hostname, pathname } = new URL(url);
-        const maxLength = 30;
-        const shortPath =
-            pathname.length > maxLength
-                ? `${pathname.substring(0, maxLength)}...`
-                : pathname;
-        return `${hostname}${shortPath}`;
-    } catch (e) {
-        return url;
-    }
-};
-
 const VerificationRequestCard = ({
     verificationRequest,
     actions = [],
@@ -83,7 +73,11 @@ const VerificationRequestCard = ({
             icon: <Share style={{ fontSize: 18 }} />,
             key: `${verificationRequest._id}|receptionChannel`,
             label: t("verificationRequest:tagSourceChannel"),
-            label_value: verificationRequest.sourceChannel,
+            label_value:
+                t(
+                    `verificationRequest:${verificationRequest.sourceChannel}`,
+                    { defaultValue: verificationRequest.sourceChannel },
+                ),
             style: { backgroundColor: colors.primary, color: colors.white },
         },
         {
@@ -100,8 +94,11 @@ const VerificationRequestCard = ({
             icon: <WarningAmber style={{ fontSize: 18 }} />,
             key: `${verificationRequest._id}|severity`,
             label: t("verificationRequest:tagSeverity"),
-            label_value: verificationRequest.severity,
-            style: { backgroundColor: colors.neutralSecondary, color: colors.white },
+            label_value: getSeverityLabel(verificationRequest.severity, t),
+            style: {
+                backgroundColor: getSeverityColor(verificationRequest.severity),
+                color: colors.white,
+            },
         },
     ];
 
@@ -183,7 +180,6 @@ const VerificationRequestCard = ({
                         <SourceList
                             sources={verificationRequest.source}
                             t={t}
-                            truncateUrl={truncateUrl}
                             id={verificationRequest._id}
                         />
                     )}

src/components/VerificationRequest/VerificationRequestDetailDrawer.tsx

@@ -44,6 +44,10 @@ import sendReviewNotifications from "../../notifications/sendReviewNotifications
 import AletheiaCaptcha from "../AletheiaCaptcha";
 import PersonalitiesSection from "./PersonalitiesSection";
 import { usePersonalities } from "../../hooks/usePersonalities";
+import {
+  getSeverityColor,
+  getSeverityLabel,
+} from "../../helpers/verificationRequestCardHelper";
 
 interface VerificationRequestDetailDrawerProps {
     verificationRequest: any;
@@ -52,41 +56,6 @@ interface VerificationRequestDetailDrawerProps {
     onUpdate?: (oldStatus: string, newStatus: string) => void;
 }
 
-const getSeverityColor = (severity: string) => {
-    if (!severity) return colors.neutralSecondary;
-    const lowerSeverity = severity.toLowerCase();
-    if (lowerSeverity === "critical") return "#d32f2f";
-    if (lowerSeverity.startsWith("high")) return "#f57c00";
-    if (lowerSeverity.startsWith("medium")) return "#fbc02d";
-    if (lowerSeverity.startsWith("low")) return "#388e3c";
-    return colors.neutralSecondary;
-};
-
-const formatSeverityLabel = (severity: string) => {
-    if (!severity) return "N/A";
-    const parts = severity.split("_");
-    if (parts.length === 2) {
-        return `${parts[0].charAt(0).toUpperCase() + parts[0].slice(1)} (${
-            parts[1]
-        })`;
-    }
-    return severity.charAt(0).toUpperCase() + severity.slice(1);
-};
-
-const truncateUrl = (url) => {
-    try {
-        const { hostname, pathname } = new URL(url);
-        const maxLength = 30;
-        const shortPath =
-            pathname.length > maxLength
-                ? `${pathname.substring(0, maxLength)}...`
-                : pathname;
-        return `${hostname}${shortPath}`;
-    } catch (e) {
-        return url;
-    }
-};
-
 const VerificationRequestDetailDrawer: React.FC<VerificationRequestDetailDrawerProps> =
     ({ verificationRequest, open, onClose, onUpdate }) => {
         const { t, i18n } = useTranslation();
@@ -243,7 +212,10 @@ const VerificationRequestDetailDrawer: React.FC<VerificationRequestDetailDrawerP
                       icon: <Share style={{ fontSize: 18 }} />,
                       key: `${currentRequest._id}|receptionChannel`,
                       label: t("verificationRequest:tagSourceChannel"),
-                      label_value: currentRequest.sourceChannel,
+                      label_value: t(
+                        `verificationRequest:${currentRequest.sourceChannel}`,
+                      { defaultValue: currentRequest.sourceChannel },
+                      ),
                       style: {
                           backgroundColor: colors.primary,
                           color: colors.white,
@@ -263,12 +235,9 @@ const VerificationRequestDetailDrawer: React.FC<VerificationRequestDetailDrawerP
                       icon: <WarningAmber style={{ fontSize: 18 }} />,
                       key: `${currentRequest._id}|severity`,
                       label: t("verificationRequest:tagSeverity"),
-                      label_value:
-                          formatSeverityLabel(currentRequest.severity) || "N/A",
+                      label_value: getSeverityLabel(currentRequest.severity, t),
                       style: {
-                          backgroundColor: getSeverityColor(
-                              currentRequest.severity
-                          ),
+                          backgroundColor: getSeverityColor(currentRequest.severity),
                           color: colors.white,
                       },
                   },
@@ -419,7 +388,6 @@ const VerificationRequestDetailDrawer: React.FC<VerificationRequestDetailDrawerP
                                             <SourceList
                                                 sources={currentRequest.source}
                                                 t={t}
-                                                truncateUrl={truncateUrl}
                                                 id={currentRequest._id}
                                             />
                                         </Box>