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

Author: frano-m

app/components/Export/components/AnVILExplorer/components/ExportMethod/components/Icon/icon.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 Icon = (
+  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,
@@ -103,6 +102,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 { Icon } from "../../../../components/Export/components/AnVILExplorer/components/ExportMethod/components/Icon/icon";
 import { METADATA_KEY } from "../../../../components/Index/common/entities";
 import { getPluralizedMetadataLabel } from "../../../../components/Index/common/indexTransformer";
 import { SUMMARY_DISPLAY_TEXT } from "./summaryMapper/constants";
@@ -471,6 +472,7 @@ export const buildDatasetExportMethodManifestDownload = (
   return {
     description:
       "Download a TSV manifest containing metadata for all data files in the dataset.",
+    icon: <Icon alt="Manifest" src="/export/manifest.webp" width={24} />,
     route: `${datasetPath}${ROUTES.MANIFEST_DOWNLOAD}`,
     title: "Download TSV Manifest",
   };
@@ -504,6 +506,7 @@ export const buildDatasetExportMethodTerra = (
   return {
     description:
       "Terra is a biomedical research platform to analyze data using workflows, Jupyter Notebooks, RStudio, and Galaxy.",
+    icon: <Icon alt="Terra" src="/export/terra.webp" width={24} />,
     route: `${datasetPath}${ROUTES.TERRA}`,
     title: "Export to Terra",
   };
@@ -533,6 +536,7 @@ export const buildDatasetExportMethodCurlCommand = (
   return {
     description:
       "Generate a curl command to download all files in this open-access dataset.",
+    icon: <Icon alt="curl" src="/export/curl.webp" width={24} />,
     route: `${datasetPath}${ROUTES.CURL_DOWNLOAD}`,
     title: "Download Open-Access Data Files (No Data Transfer Fees)",
   };
@@ -886,6 +890,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: <Icon alt="Manifest" src="/export/manifest.webp" width={24} />,
     route: ROUTES.MANIFEST_DOWNLOAD,
     title: "Download TSV Manifest for All Selected Data Files",
   };
@@ -905,6 +910,7 @@ export const buildExportMethodTerra = (
     ...getExportMethodAccessibility(viewContext),
     description:
       "Terra is a biomedical research platform to analyze data using workflows, Jupyter Notebooks, RStudio, and Galaxy.",
+    icon: <Icon alt="Terra" src="/export/terra.webp" width={24} />,
     route: ROUTES.TERRA,
     title: "Export to Terra",
   };
@@ -955,6 +961,7 @@ export const buildExportMethodBulkDownload = (
         files in the current selection.
       </div>
     ),
+    icon: <Icon alt="curl" src="/export/curl.webp" width={24} />,
     route: ROUTES.CURL_DOWNLOAD,
     title: "Download Open-Access Data Files (No Data Transfer Fees)",
   };

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",