From 9a86469045a52cfd3412a6ed3c22c45d0441d0f6 Mon Sep 17 00:00:00 2001
From: Fran McDade <franmcdade@Frans-MacBook-Pro.local>
Date: Thu, 17 Oct 2024 11:04:27 +1000
Subject: [PATCH] feat: add copy to clipboard button next to dbKey (#121)

---
 .../components/Section/section.styles.ts      |  6 +++++
 app/components/common/CopyText/copyText.tsx   | 24 +++++++++++++++++++
 app/components/index.ts                       |  3 ++-
 .../common/viewModelBuilders.ts               |  8 ++++++-
 4 files changed, 39 insertions(+), 2 deletions(-)
 create mode 100644 app/components/Layout/components/Detail/components/Section/section.styles.ts
 create mode 100644 app/components/common/CopyText/copyText.tsx

diff --git a/app/components/Layout/components/Detail/components/Section/section.styles.ts b/app/components/Layout/components/Detail/components/Section/section.styles.ts
new file mode 100644
index 0000000..8d7ece0
--- /dev/null
+++ b/app/components/Layout/components/Detail/components/Section/section.styles.ts
@@ -0,0 +1,6 @@
+import { GridPaperSection as DXGridPaperSection } from "@databiosphere/findable-ui/lib/components/common/Section/section.styles";
+import styled from "@emotion/styled";
+
+export const GridPaperSection = styled(DXGridPaperSection)`
+  min-width: 0;
+`;
diff --git a/app/components/common/CopyText/copyText.tsx b/app/components/common/CopyText/copyText.tsx
new file mode 100644
index 0000000..7084fbd
--- /dev/null
+++ b/app/components/common/CopyText/copyText.tsx
@@ -0,0 +1,24 @@
+import { CopyToClipboard } from "@databiosphere/findable-ui/lib/components/common/CopyToClipboard/copyToClipboard";
+import { Grid2, Grid2Props, Typography } from "@mui/material";
+import { ReactNode } from "react";
+
+export interface CopyTextProps {
+  children: ReactNode;
+  gridProps?: Partial<Grid2Props>;
+  text: string;
+}
+
+export const CopyText = ({
+  children,
+  gridProps,
+  text,
+}: CopyTextProps): JSX.Element => {
+  return (
+    <Grid2 container columnSpacing={1} wrap="nowrap" {...gridProps}>
+      <Typography component="span" noWrap>
+        {children}
+      </Typography>
+      <CopyToClipboard copyStr={text} />
+    </Grid2>
+  );
+};
diff --git a/app/components/index.ts b/app/components/index.ts
index 7a0ee5e..df54e92 100644
--- a/app/components/index.ts
+++ b/app/components/index.ts
@@ -11,7 +11,6 @@ export {
   RoundedPaper,
 } from "@databiosphere/findable-ui/lib/components/common/Paper/paper.styles";
 export { SectionTitle } from "@databiosphere/findable-ui/lib/components/common/Section/components/SectionTitle/sectionTitle";
-export { GridPaperSection } from "@databiosphere/findable-ui/lib/components/common/Section/section.styles";
 export { Stack } from "@databiosphere/findable-ui/lib/components/common/Stack/stack";
 export { StaticImage } from "@databiosphere/findable-ui/lib/components/common/StaticImage/staticImage";
 export {
@@ -22,8 +21,10 @@ export {
 export { Logo } from "@databiosphere/findable-ui/lib/components/Layout/components/Header/components/Content/components/Logo/logo";
 export { Link } from "@databiosphere/findable-ui/lib/components/Links/components/Link/link";
 export { BasicCell } from "@databiosphere/findable-ui/lib/components/Table/components/TableCell/components/BasicCell/basicCell";
+export { CopyText } from "./common/CopyText/copyText";
 export { AnalysisMethod } from "./Entity/components/AnalysisMethod/analysisMethod";
 export { AnalysisPortals } from "./Entity/components/AnalysisPortals/analysisPortals";
 export { DetailViewHero } from "./Layout/components/Detail/components/DetailViewHero/detailViewHero";
+export { GridPaperSection } from "./Layout/components/Detail/components/Section/section.styles";
 export { Branding } from "./Layout/components/Footer/components/Branding/branding";
 export { AnalyzeGenome } from "./Table/components/TableCell/components/AnalyzeGenome/analyzeGenome";
diff --git a/app/viewModelBuilders/catalog/brc-analytics-catalog/common/viewModelBuilders.ts b/app/viewModelBuilders/catalog/brc-analytics-catalog/common/viewModelBuilders.ts
index 1da4d0a..b39ab84 100644
--- a/app/viewModelBuilders/catalog/brc-analytics-catalog/common/viewModelBuilders.ts
+++ b/app/viewModelBuilders/catalog/brc-analytics-catalog/common/viewModelBuilders.ts
@@ -134,7 +134,13 @@ export const buildGenomeDetails = (
     })
   );
   keyValuePairs.set("Strain", genome.strain);
-  keyValuePairs.set("Assembly Version ID", genome.genomeVersionAssemblyId);
+  keyValuePairs.set(
+    "Assembly Version ID",
+    C.CopyText({
+      children: genome.genomeVersionAssemblyId,
+      text: genome.genomeVersionAssemblyId,
+    })
+  );
   keyValuePairs.set("VeUPathDB Project", genome.vEuPathDbProject);
   keyValuePairs.set("Contigs", genome.contigs);
   keyValuePairs.set("Super Contigs", genome.supercontigs);