3.8.4 - GridTable Row Links and N/A formatting + Image widget Links

packages/frontend/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@alphaday/frontend",
   "private": true,
-  "version": "3.8.3",
+  "version": "3.8.4",
   "type": "module",
   "scripts": {
     "prepare": "export VITE_COMMIT=$(git rev-parse --short HEAD)",

packages/frontend/src/api/utils/customDataUtils.test.ts

@@ -3,6 +3,7 @@ import { TCustomItem } from "src/api/types";
 import {
     validateCustomData,
     evaluateTranslationTemplate,
+    formatCustomDataField,
 } from "./customDataUtils";
 
 export const validCustomData: JSONValue = [
@@ -93,4 +94,32 @@ describe("Tests for custom data utilities", () => {
             );
         });
     });
+
+    test("formatCustomDataField: zero numeric values show N/A", () => {
+        // number format
+        expect(
+            formatCustomDataField({ rawField: "0", format: "number" }).field
+        ).toBe("N/A");
+
+        expect(
+            formatCustomDataField({ rawField: "0", format: "decimal" }).field
+        ).toBe("N/A");
+        expect(
+            formatCustomDataField({ rawField: "0.00", format: "decimal" }).field
+        ).toBe("N/A");
+
+        expect(
+            formatCustomDataField({ rawField: "0", format: "currency" }).field
+        ).toBe("N/A");
+
+        // percentage: zero should be formatted normally (eg. "0%") not N/A
+        expect(
+            formatCustomDataField({
+                rawField: "0%",
+                format: "percentage",
+            }).field
+        ).toBe(
+            formatCustomDataField({ rawField: "0", format: "percentage" }).field
+        );
+    });
 });

packages/frontend/src/api/utils/customDataUtils.tsx

@@ -307,6 +307,13 @@ export const formatCustomDataField: (
                     error: undefined,
                 };
             }
+            // When the type is numeric and the value is zero, show N/A instead of "0"
+            const parsedNumber = Number(
+                String(rawField).replace(/[^0-9.-]+/g, "")
+            );
+            if (!Number.isNaN(parsedNumber) && parsedNumber === 0) {
+                return { field: "N/A", error: undefined };
+            }
             return {
                 field: formatNumber({ value: rawField }).value,
                 error: undefined,
@@ -325,6 +332,12 @@ export const formatCustomDataField: (
                     error: undefined,
                 };
             }
+            const parsedNumber = Number(
+                String(rawField).replace(/[^0-9.-]+/g, "")
+            );
+            if (!Number.isNaN(parsedNumber) && parsedNumber === 0) {
+                return { field: "N/A", error: undefined };
+            }
             return {
                 field: formatNumber({
                     value: rawField,
@@ -347,6 +360,7 @@ export const formatCustomDataField: (
                     error: undefined,
                 };
             }
+            // For percentages, keep zero values as formatted strings (e.g., "0%")
             return {
                 field: formatNumber({
                     value: rawField,
@@ -727,3 +741,17 @@ export const customDataAsCardData: (
         return undefined;
     }
 };
+
+export const validateImageCustomData = (
+    customData: TRemoteCustomData | undefined
+): { imageUrl: string | undefined; imageLink: string | undefined } => {
+    let imageUrl = customData?.[0]?.image_url;
+    let imageLink = customData?.[0]?.image_link;
+    if (typeof imageUrl !== "string") {
+        imageUrl = undefined;
+    }
+    if (typeof imageLink !== "string") {
+        imageLink = undefined;
+    }
+    return { imageUrl, imageLink };
+};

packages/frontend/src/components/custom-modules/TableComponents.tsx

@@ -1,3 +1,4 @@
+import React from "react";
 import { twMerge } from "@alphaday/ui-kit";
 import {
     TRemoteCustomLayoutEntry,
@@ -218,21 +219,49 @@ interface IGridBasedTableProps {
 export const GridBasedTable: React.FC<IGridBasedTableProps> = ({
     columnsLayout,
     items,
+    rowProps,
     minCellSize,
     options,
 }) => {
+    const gridRef = React.useRef<HTMLDivElement>(null);
     const visibleColumns = columnsLayout.filter((col) => !col.hidden);
 
+    const getRowLink = (item: TCustomItem): string | undefined => {
+        if (rowProps?.uri_ref !== undefined) {
+            const uriRef = item[rowProps.uri_ref];
+            return typeof uriRef === "string" ? uriRef : undefined;
+        }
+        return undefined;
+    };
+
+    const handleRowClick = (rowLink: string | undefined) => {
+        if (rowLink) window.open(rowLink, "_blank");
+    };
+
+    const handleRowHover = (itemId: string | number, isEntering: boolean) => {
+        if (!gridRef.current) return;
+        const cells = gridRef.current.querySelectorAll(
+            `[data-row-id="${itemId}"]`
+        );
+        cells.forEach((cell) => {
+            if (isEntering) {
+                cell.classList.add("bg-backgroundVariant200");
+            } else {
+                cell.classList.remove("bg-backgroundVariant200");
+            }
+        });
+    };
+
     return (
         <div
+            ref={gridRef}
             className="grid overflow-visible min-h-0"
             style={{
                 gridTemplateColumns: `repeat(${visibleColumns.length}, max-content)`,
                 gridTemplateRows: `auto repeat(${items.length}, auto)`,
                 gridAutoRows: "min-content",
             }}
         >
-            {/* Headers */}
             {visibleColumns.map((column) => (
                 <div
                     key={`header-${column.id}`}
@@ -246,9 +275,9 @@ export const GridBasedTable: React.FC<IGridBasedTableProps> = ({
                 </div>
             ))}
 
-            {/* Cells */}
-            {items.map((item) =>
-                visibleColumns.map((column) => {
+            {items.map((item) => {
+                const rowLink = getRowLink(item);
+                return visibleColumns.map((column) => {
                     const rawValue =
                         column.template !== undefined
                             ? evaluateTranslationTemplate(column.template, item)
@@ -279,10 +308,20 @@ export const GridBasedTable: React.FC<IGridBasedTableProps> = ({
                     return (
                         <div
                             key={`${item.id}-${column.id}`}
-                            className="px-5 py-2 border-b border-borderLine hover:bg-background max-w-[200px] min-h-0"
+                            data-row-id={rowLink ? item.id : undefined}
+                            className={twMerge(
+                                "px-5 py-2 border-b border-borderLine max-w-[200px] min-h-0 transition-colors",
+                                rowLink && "cursor-pointer"
+                            )}
                             style={{ minWidth: `${minCellSize}px` }}
+                            {...(rowLink && {
+                                onClick: () => handleRowClick(rowLink),
+                                onMouseEnter: () =>
+                                    handleRowHover(item.id, true),
+                                onMouseLeave: () =>
+                                    handleRowHover(item.id, false),
+                            })}
                         >
-                            {/* Your cell content rendering logic */}
                             {column.format === "image" && imageUri ? (
                                 <img
                                     src={imageUri}
@@ -305,8 +344,8 @@ export const GridBasedTable: React.FC<IGridBasedTableProps> = ({
                             )}
                         </div>
                     );
-                })
-            )}
+                });
+            })}
         </div>
     );
 };

packages/frontend/src/components/image/ImageModule.tsx

@@ -4,6 +4,7 @@ import ImageWidget from "./ImageWidget";
 
 interface IImageModule {
     imageUrl: string | undefined;
+    imageLink?: string;
     title: string;
     contentHeight?: string;
     isLoading: boolean;
@@ -14,6 +15,7 @@ interface IImageModule {
 
 export const ImageModule: FC<IImageModule> = ({
     imageUrl,
+    imageLink,
     title,
     contentHeight,
     isLoading,
@@ -36,6 +38,7 @@ export const ImageModule: FC<IImageModule> = ({
         >
             <ImageWidget
                 imageUrl={processedImageUrl}
+                imageLink={imageLink}
                 title={title}
                 isLoading={isLoading}
                 onAspectRatioDetected={onAspectRatioDetected}

packages/frontend/src/components/image/ImageWidget.tsx

@@ -5,6 +5,7 @@ import globalMessages from "src/globalMessages";
 interface IImageWidget {
     title: string;
     imageUrl: string;
+    imageLink?: string;
     isLoading: boolean;
     showImage: boolean;
     onAspectRatioDetected?: (aspectRatio: number) => void;
@@ -13,6 +14,7 @@ interface IImageWidget {
 const ImageWidget: FC<IImageWidget> = memo(function ImageWidget({
     title,
     imageUrl,
+    imageLink,
     isLoading,
     showImage,
     onAspectRatioDetected,
@@ -55,7 +57,18 @@ const ImageWidget: FC<IImageWidget> = memo(function ImageWidget({
     }
 
     return (
-        <div className="flex items-center justify-center w-full h-full">
+        // eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions
+        <div
+            tabIndex={-1}
+            className="flex items-center justify-center w-full h-full"
+            onClick={() => {
+                if (imageLink) {
+                    window.open(imageLink, "_blank");
+                }
+            }}
+            style={{ cursor: imageLink ? "pointer" : "default" }}
+            role="banner"
+        >
             {imageLoading && <ModuleLoader $height="500px" />}
             <img
                 src={imageUrl}

packages/frontend/src/containers/image/OneColImageContainer.tsx

@@ -1,22 +1,14 @@
 import { type FC, Suspense, useMemo } from "react";
 import { ModuleLoader } from "@alphaday/ui-kit";
-import { TRemoteCustomData } from "src/api/services";
+import { validateImageCustomData } from "src/api/utils/customDataUtils";
 import CONFIG from "src/config";
 import type { IModuleContainer } from "src/types";
 import { ImageModule } from "../../components/image/ImageModule";
 
-const validateCustomData = (
-    customData: TRemoteCustomData | undefined
-): { imageUrl: string | undefined } => {
-    let imageUrl = customData?.[0]?.image_url;
-    if (typeof imageUrl !== "string") {
-        imageUrl = undefined;
-    }
-    return { imageUrl };
-};
-
 const OneColImageContainer: FC<IModuleContainer> = ({ moduleData }) => {
-    const { imageUrl } = validateCustomData(moduleData.widget.custom_data);
+    const { imageUrl, imageLink } = validateImageCustomData(
+        moduleData.widget.custom_data
+    );
 
     const contentHeight = useMemo(() => {
         return `${CONFIG.WIDGETS.ONE_COL_IMAGE.WIDGET_HEIGHT || 600}px`;
@@ -26,6 +18,7 @@ const OneColImageContainer: FC<IModuleContainer> = ({ moduleData }) => {
         <Suspense fallback={<ModuleLoader $height={contentHeight} />}>
             <ImageModule
                 imageUrl={imageUrl}
+                imageLink={imageLink}
                 title={moduleData.widget.name}
                 isLoading={!moduleData}
                 type="one_col_image"

packages/frontend/src/containers/image/TwoColImageContainer.tsx

@@ -8,21 +8,11 @@ import {
 } from "react";
 import { ModuleLoader } from "@alphaday/ui-kit";
 import { useTwoColImageWidgetSize } from "src/api/hooks";
-import { TRemoteCustomData } from "src/api/services";
+import { validateImageCustomData } from "src/api/utils/customDataUtils";
 import CONFIG from "src/config";
 import type { IModuleContainer } from "src/types";
 import { ImageModule } from "../../components/image/ImageModule";
 
-const validateCustomData = (
-    customData: TRemoteCustomData | undefined
-): { imageUrl: string | undefined } => {
-    let imageUrl = customData?.[0]?.image_url;
-    if (typeof imageUrl !== "string") {
-        imageUrl = undefined;
-    }
-    return { imageUrl };
-};
-
 const TwoColImageContainer: FC<IModuleContainer> = ({
     moduleData,
     onAspectRatioDetected,
@@ -32,7 +22,9 @@ const TwoColImageContainer: FC<IModuleContainer> = ({
         number | null
     >(null);
 
-    const { imageUrl } = validateCustomData(moduleData.widget.custom_data);
+    const { imageUrl, imageLink } = validateImageCustomData(
+        moduleData.widget.custom_data
+    );
     const previousImageUrl = useRef<string | undefined>(imageUrl);
 
     if (previousImageUrl.current !== imageUrl) {
@@ -75,6 +67,7 @@ const TwoColImageContainer: FC<IModuleContainer> = ({
         <Suspense fallback={<ModuleLoader $height={contentHeight} />}>
             <ImageModule
                 imageUrl={imageUrl}
+                imageLink={imageLink}
                 title={moduleData.widget.name}
                 contentHeight={contentHeight}
                 isLoading={!moduleData}