fix: replace image popover with image preview dialog

src/components/__tests__/image-preview-cell.test.js

@@ -0,0 +1,68 @@
+import React from "react";
+import { render, screen, waitFor } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import T from "i18n-react/dist/i18n-react";
+import { ImagePreviewCell } from "../image-preview-cell";
+
+describe("ImagePreviewCell", () => {
+  const imageUrl = "https://example.com/path/sponsor_banner.png";
+  const title = T.translate("preview_modal.title");
+
+  test("does not render when imageUrl is null or empty", () => {
+    const { rerender } = render(<ImagePreviewCell imageUrl={null} />);
+    expect(screen.queryByRole("button")).not.toBeInTheDocument();
+
+    rerender(<ImagePreviewCell imageUrl="" />);
+    expect(screen.queryByRole("button")).not.toBeInTheDocument();
+  });
+
+  test("renders a trigger button", () => {
+    render(<ImagePreviewCell imageUrl={imageUrl} />);
+    expect(screen.getByRole("button", { name: title })).toBeInTheDocument();
+  });
+
+  test("opens PreviewModal on click", async () => {
+    const user = userEvent.setup();
+    render(<ImagePreviewCell imageUrl={imageUrl} />);
+
+    await user.click(screen.getByRole("button", { name: title }));
+    expect(screen.getByRole("dialog")).toBeInTheDocument();
+  });
+
+  test("passes itemName as dialog title", async () => {
+    const user = userEvent.setup();
+    render(<ImagePreviewCell imageUrl={imageUrl} itemName="Sponsor Banner" />);
+
+    await user.click(screen.getByRole("button", { name: title }));
+    expect(screen.getByText("Sponsor Banner")).toBeInTheDocument();
+  });
+
+  test("extracts filename from URL when no fileName prop", async () => {
+    const user = userEvent.setup();
+    render(<ImagePreviewCell imageUrl={imageUrl} />);
+
+    await user.click(screen.getByRole("button", { name: title }));
+    expect(screen.getByText("sponsor_banner.png")).toBeInTheDocument();
+  });
+
+  test("uses fileName prop over URL extraction", async () => {
+    const user = userEvent.setup();
+    render(<ImagePreviewCell imageUrl={imageUrl} fileName="custom.png" />);
+
+    await user.click(screen.getByRole("button", { name: title }));
+    expect(screen.getByText("custom.png")).toBeInTheDocument();
+  });
+
+  test("closes dialog when X is clicked", async () => {
+    const user = userEvent.setup();
+    render(<ImagePreviewCell imageUrl={imageUrl} />);
+
+    await user.click(screen.getByRole("button", { name: title }));
+    expect(screen.getByRole("dialog")).toBeInTheDocument();
+
+    await user.click(screen.getByRole("button", { name: "close" }));
+    await waitFor(() =>
+      expect(screen.queryByRole("dialog")).not.toBeInTheDocument()
+    );
+  });
+});

src/components/image-preview-cell.js

@@ -0,0 +1,58 @@
+/**
+ * Copyright 2026 OpenStack Foundation
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * http://www.apache.org/licenses/LICENSE-2.0
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * */
+
+import React, { useState } from "react";
+import IconButton from "@mui/material/IconButton";
+import ImageIcon from "@mui/icons-material/Image";
+import T from "i18n-react/dist/i18n-react";
+import PreviewModal from "./mui/PreviewModal";
+
+export const ImagePreviewCell = React.memo(
+  ({ imageUrl, itemName, fileName, uploadDate }) => {
+    const [open, setOpen] = useState(false);
+
+    if (!imageUrl) return null;
+
+    const rawSegment = imageUrl.split("/").pop().split("?")[0];
+    let decoded = rawSegment;
+    try {
+      decoded = decodeURIComponent(rawSegment);
+    } catch {
+      /* malformed encoding — keep raw */
+    }
+    const resolvedFileName = fileName || decoded;
+
+    return (
+      <>
+        <IconButton
+          size="small"
+          aria-label={T.translate("preview_modal.title")}
+          onClick={() => setOpen(true)}
+        >
+          <ImageIcon fontSize="small" />
+        </IconButton>
+
+        <PreviewModal
+          title={itemName || T.translate("preview_modal.title")}
+          open={open}
+          onClose={() => setOpen(false)}
+          url={imageUrl}
+          filename={resolvedFileName}
+          uploadDate={uploadDate}
+        />
+      </>
+    );
+  }
+);
+
+ImagePreviewCell.displayName = "ImagePreviewCell";

src/components/mui/PreviewModal/index.jsx

@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useEffect, useState } from "react";
 import PropTypes from "prop-types";
 import T from "i18n-react/dist/i18n-react";
 import {
@@ -13,90 +13,111 @@ import CloseIcon from "@mui/icons-material/Close";
 import BrokenImageOutlinedIcon from "@mui/icons-material/BrokenImageOutlined";
 import { formatDate } from "../../../utils/methods";
 
-const PreviewModal = ({ title, open, onClose, url, filename, uploadDate }) => (
-  <Dialog open={open} onClose={onClose} maxWidth="sm" fullWidth>
-    <DialogTitle
-      sx={{
-        display: "flex",
-        alignItems: "center",
-        justifyContent: "space-between",
-        pb: 1
-      }}
-    >
-      <Typography variant="h6">{title}</Typography>
-    </DialogTitle>
-    <IconButton
-      aria-label="close"
-      onClick={onClose}
-      size="small"
-      sx={(theme) => ({
-        position: "absolute",
-        right: 12,
-        top: 12,
-        color: theme.palette.grey[500]
-      })}
-    >
-      <CloseIcon fontSize="large" />
-    </IconButton>
-    <DialogContent sx={{ p: 0 }}>
-      <Box
+const BrokenImage = () => (
+  <Box
+    sx={{
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "center",
+      width: "100%",
+      height: 200
+    }}
+  >
+    <BrokenImageOutlinedIcon sx={{ fontSize: 56, color: "grey.200" }} />
+  </Box>
+);
+
+const PreviewModal = ({ title, open, onClose, url, filename, uploadDate }) => {
+  const [imageError, setImageError] = useState(false);
+
+  useEffect(() => {
+    if (open) setImageError(false);
+  }, [open, url]);
+
+  return (
+    <Dialog open={open} onClose={onClose} maxWidth="sm" fullWidth>
+      <DialogTitle
         sx={{
-          mx: 2,
-          mb: 2,
-          bgcolor: "grey.400",
           display: "flex",
           alignItems: "center",
-          justifyContent: "center",
-          minHeight: 200
+          justifyContent: "space-between",
+          pb: 1
         }}
       >
-        {url ? (
-          <Box
-            component="img"
-            src={url}
-            alt={filename}
-            sx={{
-              maxWidth: "100%",
-              maxHeight: 400,
-              display: "block",
-              objectFit: "contain"
-            }}
-          />
-        ) : (
-          <Box
-            sx={{
-              display: "flex",
-              alignItems: "center",
-              justifyContent: "center",
-              width: "100%",
-              height: 200
-            }}
-          >
-            <BrokenImageOutlinedIcon sx={{ fontSize: 56, color: "grey.200" }} />
-          </Box>
-        )}
-      </Box>
-      <Box sx={{ px: 2, pt: 1.5, pb: 2 }}>
-        {filename && (
-          <Box sx={{ display: "flex", gap: 2 }}>
-            <Typography variant="body2" sx={{ fontWeight: 600, minWidth: 80 }}>
-              {T.translate("preview_modal.file_name")}
-            </Typography>
-            <Typography variant="body2">{filename}</Typography>
-          </Box>
-        )}
-        {uploadDate && (
-          <Box sx={{ display: "flex", gap: 2 }}>
-            <Typography variant="body2" sx={{ fontWeight: 600, minWidth: 80 }}>
-              {T.translate("preview_modal.uploaded")}
-            </Typography>
-            <Typography variant="body2">{formatDate(uploadDate)}</Typography>
-          </Box>
-        )}
-      </Box>
-    </DialogContent>
-  </Dialog>
-);
+        <Typography variant="h6">{title}</Typography>
+      </DialogTitle>
+      <IconButton
+        aria-label="close"
+        onClick={onClose}
+        size="small"
+        sx={(theme) => ({
+          position: "absolute",
+          right: 12,
+          top: 12,
+          color: theme.palette.grey[500]
+        })}
+      >
+        <CloseIcon fontSize="large" />
+      </IconButton>
+      <DialogContent sx={{ p: 0 }}>
+        <Box
+          sx={{
+            mx: 2,
+            mb: 2,
+            bgcolor: "grey.400",
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "center",
+            minHeight: 200
+          }}
+        >
+          {!url || imageError ? (
+            <BrokenImage />
+          ) : (
+            <Box
+              component="img"
+              src={url}
+              alt={filename}
+              onError={() => setImageError(true)}
+              sx={{
+                maxWidth: "100%",
+                maxHeight: 400,
+                display: "block",
+                objectFit: "contain"
+              }}
+            />
+          )}
+        </Box>
+        <Box sx={{ px: 2, pt: 1.5, pb: 2 }}>
+          {filename && (
+            <Box sx={{ display: "flex", gap: 2 }}>
+              <Typography
+                variant="body2"
+                sx={{ fontWeight: 600, minWidth: 80 }}
+              >
+                {T.translate("preview_modal.file_name")}
+              </Typography>
+              <Typography variant="body2" sx={{ wordBreak: "break-all" }}>
+                {filename}
+              </Typography>
+            </Box>
+          )}
+          {!!uploadDate && (
+            <Box sx={{ display: "flex", gap: 2 }}>
+              <Typography
+                variant="body2"
+                sx={{ fontWeight: 600, minWidth: 80 }}
+              >
+                {T.translate("preview_modal.uploaded")}
+              </Typography>
+              <Typography variant="body2">{formatDate(uploadDate)}</Typography>
+            </Box>
+          )}
+        </Box>
+      </DialogContent>
+    </Dialog>
+  );
+};
 
 PreviewModal.propTypes = {
   title: PropTypes.string.isRequired,