feat: optionally add logos on exports list (#4741) (#4752)

* feat: optionally add logos on exports list (#4741)

* fix: viewbuilder types to include icon in component props (#4741)

* fix: rename icon component to export icon (#4741)

* fix: update e2e card locator to use MuiPaper ancestor and CardActionArea (#4741)

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

---------

Co-authored-by: Fran McDade <18710366+frano-m@users.noreply.github.com>
Co-authored-by: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

Author: frano-m

app/components/Export/components/AnVILExplorer/components/ExportMethod/components/ExportIcon/exportIcon.tsx

@@ -0,0 +1,13 @@
+import { StaticImage } from "@databiosphere/findable-ui/lib/components/common/StaticImage/staticImage";
+import type { ComponentProps, JSX } from "react";
+
+/**
+ * Icon component that wraps the StaticImage component.
+ * @param props - Component props.
+ * @returns JSX element representing the icon.
+ */
+export const ExportIcon = (
+  props: ComponentProps<typeof StaticImage>
+): JSX.Element => {
+  return <StaticImage {...props} />;
+};

app/viewModelBuilders/azul/anvil-cmg/common/viewModelBuilders.tsx

@@ -39,7 +39,6 @@ import {
   FadeProps as MFadeProps,
   Tooltip,
 } from "@mui/material";
-import { ExportEntity } from "app/components/Export/components/AnVILExplorer/components/ExportEntity/exportEntity";
 import React, { ComponentProps, ReactNode } from "react";
 import {
   ANVIL_CMG_CATEGORY_KEY,
@@ -104,6 +103,8 @@ import * as C from "../../../../components";
 import * as MDX from "../../../../components/common/MDXContent/anvil-cmg";
 import { RequestAccess } from "../../../../components/Detail/components/AnVILCMG/components/RequestAccess/requestAccess";
 import { Description } from "../../../../components/Detail/components/MDX/components/Description/description";
+import { ExportEntity } from "../../../../components/Export/components/AnVILExplorer/components/ExportEntity/exportEntity";
+import { ExportIcon } from "../../../../components/Export/components/AnVILExplorer/components/ExportMethod/components/ExportIcon/exportIcon";
 import { METADATA_KEY } from "../../../../components/Index/common/entities";
 import { getPluralizedMetadataLabel } from "../../../../components/Index/common/indexTransformer";
 import { SUMMARY_DISPLAY_TEXT } from "./summaryMapper/constants";
@@ -472,6 +473,7 @@ export const buildDatasetExportMethodManifestDownload = (
   return {
     description:
       "Download a TSV manifest containing metadata for all data files in the dataset.",
+    icon: <ExportIcon alt="Manifest" src="/export/manifest.webp" width={24} />,
     route: `${datasetPath}${ROUTES.MANIFEST_DOWNLOAD}`,
     title: "Download TSV Manifest",
   };
@@ -505,6 +507,7 @@ export const buildDatasetExportMethodTerra = (
   return {
     description:
       "Terra is a biomedical research platform to analyze data using workflows, Jupyter Notebooks, RStudio, and Galaxy.",
+    icon: <ExportIcon alt="Terra" src="/export/terra.webp" width={24} />,
     route: `${datasetPath}${ROUTES.TERRA}`,
     title: "Export to Terra",
   };
@@ -534,6 +537,7 @@ export const buildDatasetExportMethodCurlCommand = (
   return {
     description:
       "Generate a curl command to download all files in this open-access dataset.",
+    icon: <ExportIcon alt="curl" src="/export/curl.webp" width={24} />,
     route: `${datasetPath}${ROUTES.CURL_DOWNLOAD}`,
     title: "Download Open-Access Data Files (No Data Transfer Fees)",
   };
@@ -620,7 +624,7 @@ export const buildDatasetExportToPlatformMethod = ({
   ...props
 }: Pick<
   ComponentProps<typeof ExportMethod>,
-  "description" | "route" | "title"
+  "description" | "icon" | "route" | "title"
 >): ((
   response: DatasetsResponse,
   viewContext: ViewContext<unknown>
@@ -887,6 +891,7 @@ export const buildExportMethodManifestDownload = (
     ...getExportMethodAccessibility(viewContext),
     description:
       "Download a TSV manifest containing metadata for all data files in the current selection, including managed-access files.",
+    icon: <ExportIcon alt="Manifest" src="/export/manifest.webp" width={24} />,
     route: ROUTES.MANIFEST_DOWNLOAD,
     title: "Download TSV Manifest for All Selected Data Files",
   };
@@ -906,6 +911,7 @@ export const buildExportMethodTerra = (
     ...getExportMethodAccessibility(viewContext),
     description:
       "Terra is a biomedical research platform to analyze data using workflows, Jupyter Notebooks, RStudio, and Galaxy.",
+    icon: <ExportIcon alt="Terra" src="/export/terra.webp" width={24} />,
     route: ROUTES.TERRA,
     title: "Export to Terra",
   };
@@ -956,6 +962,7 @@ export const buildExportMethodBulkDownload = (
         files in the current selection.
       </div>
     ),
+    icon: <ExportIcon alt="curl" src="/export/curl.webp" width={24} />,
     route: ROUTES.CURL_DOWNLOAD,
     title: "Download Open-Access Data Files (No Data Transfer Fees)",
   };
@@ -1059,7 +1066,7 @@ export const buildExportToPlatformHero = (
 export const buildExportToPlatformMethod = (
   props: Pick<
     ComponentProps<typeof ExportMethod>,
-    "description" | "route" | "title"
+    "description" | "icon" | "route" | "title"
   >
 ): ((
   _: unknown,

e2e/anvil/anvil-dataset.spec.ts

@@ -176,7 +176,8 @@ describe("Dataset", () => {
  */
 async function clickCard(page: Page, headingText: string): Promise<void> {
   await getHeadingWithText(page, headingText)
-    .locator("xpath=ancestor::a")
+    .locator("xpath=ancestor::*[contains(@class,'MuiPaper-root')]")
+    .locator(".MuiCardActionArea-root")
     .click();
 }
 

e2e/testFunctions.ts

@@ -1199,7 +1199,9 @@ export async function testPaginationContent(
  * @returns - Playwright locator object for the card with the given heading text.
  */
 function getCard(page: Page, headingText: string): Locator {
-  return getHeadingWithText(page, headingText).locator("xpath=ancestor::a");
+  return getHeadingWithText(page, headingText)
+    .locator("xpath=ancestor::*[contains(@class,'MuiPaper-root')]")
+    .locator(".MuiCardActionArea-root");
 }
 
 /**

package-lock.json

@@ -32,7 +32,7 @@
     "check-system-status:anvil-cmg": "esrun e2e/anvil/anvil-check-system-status.ts"
   },
   "dependencies": {
-    "@databiosphere/findable-ui": "^50.4.0",
+    "@databiosphere/findable-ui": "^50.5.0",
     "@emotion/react": "^11",
     "@emotion/styled": "^11",
     "@mdx-js/loader": "^3",