Merge pull request #531 from CodeForAfrica/ft/entity-card-tooltip-fixes

refactor(PoliticalEntityList): Entity Card Tooltips

Author: kelvinkipruto

src/blocks/EntitySelection.ts

@@ -74,6 +74,16 @@ export const EntitySelection: Block = {
             fr: "Titre du groupe",
           },
         },
+        {
+          name: "description",
+          type: "textarea",
+          required: true,
+          localized: true,
+          label: {
+            en: "Group description",
+            fr: "Description du groupe",
+          },
+        },
         colorPickerField({
           name: "color",
           label: {

src/components/PoliticalEntityList/PoliticalEntityList.client.tsx

@@ -18,12 +18,12 @@ import {
   DesktopInfoStatusPopover,
   MobileInfoStatusPopover,
 } from "@/components/PromiseStatusInfo";
-import type { PromiseStatusListProps } from "@/components/PromiseStatusList";
 
 export type PoliticalEntityListClientProps = {
   statusGroups: {
     id: string;
     title: string;
+    description: string;
     color: string;
     statusIds: string[];
   }[];
@@ -47,19 +47,17 @@ export type PoliticalEntityListClientProps = {
     statusCounts: Record<string, number>;
     filterKey: string;
   }[];
-  statusDefinitions: PromiseStatusListProps["statuses"];
   statusInfoTitle?: string;
 };
 
 export const PoliticalEntityListClient = ({
   statusGroups,
   filterOptions,
   items,
-  statusDefinitions,
   statusInfoTitle = "Promise status definitions",
 }: PoliticalEntityListClientProps) => {
   const [activeFilter, setActiveFilter] = useState(
-    filterOptions[0]?.key ?? "all"
+    filterOptions[0]?.key ?? "all",
   );
 
   const visibleItems = useMemo(() => {
@@ -74,15 +72,27 @@ export const PoliticalEntityListClient = ({
     setActiveFilter(key);
   };
 
-  const hasStatusDefinitions = statusDefinitions.length > 0;
+  const popoverStatuses = useMemo(
+    () =>
+      statusGroups.map((group) => ({
+        id: group.id,
+        label: group.title,
+        description: group.description,
+        color: group.color,
+      })),
+    [statusGroups],
+  );
+
+  const hasStatusDefinitions = popoverStatuses.length > 0;
 
   return (
     <Stack spacing={2.5}>
       <Stack
-        direction={{ xs: "column", md: "row" }}
+        direction="row"
         spacing={{ xs: 2, md: 3 }}
-        alignItems={{ xs: "flex-start", md: "center" }}
+        alignItems="center"
         justifyContent="space-between"
+        sx={{ flexWrap: { xs: "wrap", md: "nowrap" } }}
       >
         <Stack
           direction="row"
@@ -121,20 +131,21 @@ export const PoliticalEntityListClient = ({
             spacing={1}
             alignItems="center"
             sx={{
-              width: { xs: "100%", md: "auto" },
-              justifyContent: { xs: "flex-start", md: "flex-end" },
+              flexShrink: 0,
+              justifyContent: "flex-end",
+              marginLeft: "0 !important",
             }}
           >
             <Box sx={{ display: { xs: "none", md: "flex" } }}>
               <DesktopInfoStatusPopover
                 title={statusInfoTitle}
-                statuses={statusDefinitions}
+                statuses={popoverStatuses}
               />
             </Box>
             <Box sx={{ display: { xs: "flex", md: "none" } }}>
               <MobileInfoStatusPopover
                 title={statusInfoTitle}
-                statuses={statusDefinitions}
+                statuses={popoverStatuses}
               />
             </Box>
           </Stack>
@@ -157,7 +168,7 @@ export const PoliticalEntityListClient = ({
                 const count = group.statusIds.reduce(
                   (total, statusId) =>
                     total + (item.statusCounts[statusId] ?? 0),
-                  0
+                  0,
                 );
 
                 if (count === 0) {
@@ -173,13 +184,13 @@ export const PoliticalEntityListClient = ({
               })
               .filter(
                 (
-                  value
+                  value,
                 ): value is {
                   id: string;
                   title: string;
                   color: string;
                   count: number;
-                } => Boolean(value)
+                } => Boolean(value),
               );
 
             return (

src/components/PoliticalEntityList/index.tsx

@@ -20,6 +20,7 @@ import {
 
 type StatusGroupConfig = {
   title?: string | null;
+  description?: string | null;
   color?: string | null;
   statuses?: (string | PromiseStatus)[];
 };
@@ -128,9 +129,9 @@ export const PoliticalEntityList = async ({
         return null;
       }
 
-      const titleText = group?.title?.trim() || statuses[0].label;
-      const groupColorRaw =
-        typeof group?.color === "string" ? group.color.trim() : "";
+      const titleText = group.title;
+      const descriptionText = group.description;
+      const groupColorRaw = group.color;
       const resolvedColor =
         groupColorRaw ||
         statuses[0].colors?.textColor ||
@@ -140,6 +141,7 @@ export const PoliticalEntityList = async ({
       return {
         id: `group-${index}-${statuses[0].id}`,
         title: titleText,
+        description: descriptionText,
         color: resolvedColor,
         statusIds,
       };
@@ -151,6 +153,7 @@ export const PoliticalEntityList = async ({
       statusGroups.push({
         id: `fallback-${status.id}-${index}`,
         title: status.label,
+        description: status.description ?? "",
         color: status.colors?.textColor || status.colors?.color || "#000000",
         statusIds: [status.id],
       });
@@ -169,14 +172,14 @@ export const PoliticalEntityList = async ({
       return entityA.name.localeCompare(entityB.name, undefined, {
         sensitivity: "base",
       });
-    }
+    },
   );
 
   const entitiesWithMedia = await Promise.all(
     sortedPoliticalEntities.map(async (entity) => ({
       entity,
       media: await resolveMedia(entity.image),
-    }))
+    })),
   );
 
   const listItems: PoliticalEntityListClientProps["items"] =
@@ -217,7 +220,7 @@ export const PoliticalEntityList = async ({
       accumulator[label] = (accumulator[label] ?? 0) + 1;
       return accumulator;
     },
-    {}
+    {},
   );
 
   const filterOptions: PoliticalEntityListClientProps["filterOptions"] = [
@@ -229,15 +232,6 @@ export const PoliticalEntityList = async ({
     })),
   ];
 
-  const statusDefinitions: PoliticalEntityListClientProps["statusDefinitions"] =
-    statusDocs.map((status) => ({
-      id: status.id,
-      label: status.label,
-      description: status.description ?? "",
-      color: status.colors?.color ?? null,
-      textColor: status.colors?.textColor ?? null,
-    }));
-
   return (
     <Container component="section" sx={{ py: { xs: 5, md: 6 } }}>
       <Typography variant="h6" sx={{ fontWeight: 600, mb: 2 }}>
@@ -249,7 +243,6 @@ export const PoliticalEntityList = async ({
             statusGroups={statusGroups}
             filterOptions={filterOptions}
             items={listItems}
-            statusDefinitions={statusDefinitions}
           />
         </CardContent>
       </Card>

src/payload-types.ts

@@ -1853,6 +1853,7 @@ export interface EntitySelectionBlock {
   statusGroups?:
     | {
         title: string;
+        description: string;
         color: string;
         statuses: (string | PromiseStatus)[];
         id?: string | null;
@@ -2164,6 +2165,7 @@ export interface EntitySelectionBlockSelect<T extends boolean = true> {
     | T
     | {
         title?: T;
+        description?: T;
         color?: T;
         statuses?: T;
         id?: T;