feat: add copy to clipboard button for uid etag and entityRef

Signed-off-by: Chris Langhout <clanghout@bol.com>

plugins/catalog-react/src/components/InspectEntityDialog/components/OverviewPage.tsx

@@ -21,6 +21,7 @@ import {
   List,
   ListItem,
   ListItemIcon,
+  ListItemSecondaryAction,
   makeStyles,
   Typography,
 } from '@material-ui/core';
@@ -37,6 +38,7 @@ import {
 } from './common';
 import { EntityKindIcon } from './EntityKindIcon';
 import { stringifyEntityRef } from '@backstage/catalog-model';
+import { CopyTextButton } from '@backstage/core-components';
 
 const useStyles = makeStyles({
   root: {
@@ -61,6 +63,7 @@ export function OverviewPage(props: { entity: AlphaEntity }) {
     'type',
   );
 
+  const entityRef = stringifyEntityRef(props.entity);
   return (
     <>
       <DialogContentText variant="h2">Overview</DialogContentText>
@@ -84,18 +87,24 @@ export function OverviewPage(props: { entity: AlphaEntity }) {
             {metadata.uid && (
               <ListItem>
                 <ListItemText primary="uid" secondary={metadata.uid} />
+                <ListItemSecondaryAction>
+                  <CopyTextButton text={metadata.uid} />
+                </ListItemSecondaryAction>
               </ListItem>
             )}
             {metadata.etag && (
               <ListItem>
                 <ListItemText primary="etag" secondary={metadata.etag} />
+                <ListItemSecondaryAction>
+                  <CopyTextButton text={metadata.etag} />
+                </ListItemSecondaryAction>
               </ListItem>
             )}
             <ListItem>
-              <ListItemText
-                primary="entityRef"
-                secondary={stringifyEntityRef(props.entity)}
-              />
+              <ListItemText primary="entityRef" secondary={entityRef} />
+              <ListItemSecondaryAction>
+                <CopyTextButton text={entityRef} />
+              </ListItemSecondaryAction>
             </ListItem>
           </List>
         </Container>