M3-5959: Copyable Linode IP Address text (#8617)

## Description 📝 Add the ability to copy a Linode's IP address by hovering over the text ## How to test 🧪 Check the Linode's landing table, details header, and Linode's detail Network table
linode · Nov 18, 2022 · b926c3f · b926c3f
1 parent bf68ef6
commit b926c3f
Show file tree

Hide file tree

Showing 5 changed files with 35 additions and 35 deletions.
diff --git a/packages/manager/src/components/CopyTooltip/CopyTooltip.tsx b/packages/manager/src/components/CopyTooltip/CopyTooltip.tsx
@@ -3,13 +3,12 @@ import copy from 'copy-to-clipboard';
 import * as React from 'react';
 import FileCopy from 'src/assets/icons/copy.svg';
 import { makeStyles, Theme } from 'src/components/core/styles';
-import Typography from 'src/components/core/Typography';
 import ToolTip from 'src/components/core/Tooltip';
 
 interface Props {
   text: string;
   className?: string;
-  displayText?: string;
+  copyableText?: boolean;
   onClickCallback?: () => void;
 }
 
@@ -39,17 +38,21 @@ const useStyles = makeStyles((theme: Theme) => ({
     display: 'flex',
     width: 'auto !important',
   },
-  displayText: {
-    color: theme.textColors.linkActiveLight,
-    marginLeft: 6,
+  copyableTextBtn: {
+    padding: 0,
+    backgroundColor: 'transparent',
+    border: 'none',
+    cursor: 'pointer',
+    font: 'inherit',
+    color: theme.palette.text.primary,
   },
 }));
 
 export const CopyTooltip: React.FC<Props> = (props) => {
   const classes = useStyles();
   const [copied, setCopied] = React.useState<boolean>(false);
 
-  const { text, className, displayText, onClickCallback } = props;
+  const { text, className, copyableText, onClickCallback } = props;
 
   const handleIconClick = () => {
     setCopied(true);
@@ -69,13 +72,11 @@ export const CopyTooltip: React.FC<Props> = (props) => {
         onClick={handleIconClick}
         className={classNames(className, {
           [classes.root]: true,
-          [classes.flex]: Boolean(displayText),
+          [classes.copyableTextBtn]: copyableText,
         })}
+        data-qa-copy-btn
       >
-        <FileCopy />
-        {displayText && (
-          <Typography className={classes.displayText}>{displayText}</Typography>
-        )}
+        {copyableText ? text : <FileCopy />}
       </button>
     </ToolTip>
   );

diff --git a/packages/manager/src/features/linodes/LinodeEntityDetail.tsx b/packages/manager/src/features/linodes/LinodeEntityDetail.tsx
@@ -643,15 +643,23 @@ const useAccessTableStyles = makeStyles((theme: Theme) => ({
     },
   },
   code: {
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'space-between',
     backgroundColor: theme.bg.bgAccessRow,
     color: theme.textColors.tableStatic,
     fontFamily: '"UbuntuMono", monospace, sans-serif',
-    padding: theme.spacing(),
+    padding: '4px 8px',
     position: 'relative',
     '& div': {
       fontSize: 15,
     },
   },
+  row: {
+    '&:hover $copy > svg, & $copy:focus > svg': {
+      opacity: 1,
+    },
+  },
   copyCell: {
     backgroundColor: theme.bg.lightBlue2,
     height: 33,
@@ -671,15 +679,11 @@ const useAccessTableStyles = makeStyles((theme: Theme) => ({
       },
     },
   },
-  copyButton: {
-    display: 'flex',
-    alignItems: 'center',
-    justifyContent: 'center',
-    borderRadius: 1,
-    height: '100%',
-    width: '100%',
-    '&:hover': {
-      backgroundColor: 'transparent',
+  copy: {
+    '& svg': {
+      height: `12px`,
+      width: `12px`,
+      opacity: 0,
     },
   },
   gradient: {
@@ -722,18 +726,15 @@ export const AccessTable: React.FC<AccessTableProps> = React.memo((props) => {
           <TableBody>
             {props.rows.map((thisRow) => {
               return thisRow.text ? (
-                <TableRow key={thisRow.text}>
+                <TableRow key={thisRow.text} className={classes.row}>
                   {thisRow.heading ? (
                     <th scope="row">{thisRow.heading}</th>
                   ) : null}
                   <TableCell className={classes.code}>
-                    <div className={classes.gradient}>{thisRow.text}</div>
-                  </TableCell>
-                  <TableCell className={classes.copyCell}>
-                    <CopyTooltip
-                      text={thisRow.text}
-                      className={classes.copyButton}
-                    />
+                    <div className={classes.gradient}>
+                      <CopyTooltip text={thisRow.text} copyableText />
+                    </div>
+                    <CopyTooltip className={classes.copy} text={thisRow.text} />
                   </TableCell>
                 </TableRow>
               ) : null;

diff --git a/packages/manager/src/features/linodes/LinodesDetail/LinodeNetworking/LinodeNetworking.tsx b/packages/manager/src/features/linodes/LinodesDetail/LinodeNetworking/LinodeNetworking.tsx
@@ -407,7 +407,7 @@ class LinodeNetworking extends React.Component<CombinedProps, State> {
           className={classes.ipAddress}
           data-qa-ip-address
         >
-          {address}
+          <CopyTooltip text={address} copyableText />
           <CopyTooltip className={classes.copy} text={address} />
         </TableCell>
         <TableCell parentColumn="Type" data-qa-ip-address>

diff --git a/packages/manager/src/features/linodes/LinodesLanding/IPAddress.test.tsx b/packages/manager/src/features/linodes/LinodesLanding/IPAddress.test.tsx
@@ -25,11 +25,10 @@ const component = shallow(
 describe('IPAddress', () => {
   it('should render without error and display one IP address if showAll is false', () => {
     component.setProps({ showMore: true, showAll: false });
-    const rendered = component.find('[data-qa-ip-main]');
-    const ipText = rendered.text();
+    const rendered = component.find('[data-qa-copy-ip-text]');
 
     expect(rendered).toHaveLength(1);
-    expect(ipText).toContain('8.8.8.8');
+    expect(rendered.prop('text')).toEqual('8.8.8.8');
   });
 
   it('should not display ShowMore button unless the showMore prop is true', () => {

diff --git a/packages/manager/src/features/linodes/LinodesLanding/IPAddress.tsx b/packages/manager/src/features/linodes/LinodesLanding/IPAddress.tsx
@@ -129,9 +129,8 @@ export class IPAddress extends React.Component<Props & WithStyles<CSSClasses>> {
       <div
         key={key}
         className={`${classes.row} ${showAll && classes.multipleAddresses}`}
-        data-qa-ip-main
       >
-        {ip}
+        <CopyTooltip text={ip} copyableText data-qa-copy-ip-text />
         {this.renderCopyIcon(ip)}
       </div>
     );