feat: add copy to clipboard button next to dbKey (#121)

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;
+`;

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>
+  );
+};

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

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);