delete duplicate copy component

client/src/components/__test__/copy/Copy.spec.tsx

@@ -1,38 +0,0 @@
-import { ReactNode } from 'react';
-import { render, unmountComponentAtNode } from 'react-dom';
-import { act } from 'react-dom/test-utils';
-import Copy from '../../copy/Copy';
-let container: any = null;
-
-jest.mock('react-i18next', () => ({
-  useTranslation: () => ({
-    t: (key: any) => key,
-  }),
-}));
-
-jest.mock('@material-ui/core/Tooltip', () => {
-  return (props: { children: ReactNode }) => {
-    return <div id="tooltip">{props.children}</div>;
-  };
-});
-
-describe('Test Copy Component', () => {
-  beforeEach(() => {
-    container = document.createElement('div');
-    document.body.appendChild(container);
-  });
-
-  afterEach(() => {
-    unmountComponentAtNode(container);
-    container.remove();
-    container = null;
-  });
-
-  it('Test props ', () => {
-    act(() => {
-      render(<Copy data={[]}></Copy>, container);
-    });
-
-    expect(document.querySelectorAll('button').length).toEqual(1);
-  });
-});

client/src/components/advancedSearch/CopyButton.tsx

@@ -17,7 +17,9 @@ const CopyButton: FC<CopyButtonProps> = props => {
   const classes = useStyles();
   const [tooltipTitle, setTooltipTitle] = useState('Copy');
 
-  const handleClick = (v: string) => {
+  const handleClick = (event: React.MouseEvent<HTMLElement>, v: string) => {
+    event.stopPropagation();
+
     setTooltipTitle('Copied!');
     navigator.clipboard.writeText(v);
     setTimeout(() => {
@@ -30,7 +32,7 @@ const CopyButton: FC<CopyButtonProps> = props => {
       tooltip={tooltipTitle}
       aria-label={label}
       className={`${classes.button} ${className}`}
-      onClick={() => handleClick(value || '')}
+      onClick={event => handleClick(event, value || '')}
       {...others}
     >
       {icon || <CopyIcon style={{ color: 'transparent' }} />}

client/src/components/advancedSearch/Types.ts

@@ -44,6 +44,7 @@ export interface AddConditionProps {
 export interface CopyButtonProps {
   className?: string;
   icon?: any;
+  // needed for accessibility, will not show on page
   label: string;
   value: string;
   others?: any;

client/src/components/copy/Copy.tsx

@@ -1,55 +0,0 @@
-import { IconButton, makeStyles } from '@material-ui/core';
-import { useState } from 'react';
-import React from 'react';
-import { useTranslation } from 'react-i18next';
-import { copyToCommand } from '../../utils/Common';
-import CustomToolTip from '../customToolTip/CustomToolTip';
-import Icons from '../icons/Icons';
-
-const useStyles = makeStyles(theme => ({
-  copy: {
-    cursor: 'pointer',
-    '& svg': {
-      fontSize: '12.8px',
-    },
-  },
-}));
-
-let timer: null | NodeJS.Timeout = null;
-const Copy = (props: { data: any }) => {
-  const classes = useStyles();
-  const { data } = props;
-  const { t } = useTranslation();
-  const copyTrans = t('copy') as any;
-  const [title, setTitle] = useState(copyTrans.copy);
-
-  const handleCopy = (
-    e: React.MouseEvent<HTMLButtonElement, MouseEvent>,
-    data: string
-  ) => {
-    if (timer) {
-      clearTimeout(timer);
-    }
-    e.stopPropagation();
-
-    const cb = () => {
-      setTitle(copyTrans.copied);
-      setTimeout(() => {
-        setTitle(copyTrans.copy);
-      }, 1100);
-    };
-    timer = setTimeout(() => {
-      copyToCommand(data, '', cb);
-    }, 200);
-  };
-
-  return (
-    <CustomToolTip leaveDelay={900} title={title} placement="top">
-      <IconButton className={classes.copy} onClick={e => handleCopy(e, data)}>
-        {Icons.copy()}
-      </IconButton>
-    </CustomToolTip>
-  );
-};
-
-export default Copy;

client/src/components/customButton/CustomIconButton.tsx

@@ -6,7 +6,7 @@ const CustomIconButton = (props: IconButtonProps & { tooltip?: string }) => {
   return (
     <>
       {tooltip ? (
-        <Tooltip title={tooltip}>
+        <Tooltip title={tooltip} arrow>
           <span>
             <IconButton {...otherProps}>{props.children}</IconButton>
           </span>

client/src/components/grid/Table.tsx

@@ -12,9 +12,9 @@ import { Box, Button, Typography } from '@material-ui/core';
 import EnhancedTableHead from './TableHead';
 import EditableTableHead from './TableEditableHead';
 import { stableSort, getComparator } from './Utils';
-import Copy from '../../components/copy/Copy';
 import ActionBar from './ActionBar';
 import LoadingTable from './LoadingTable';
+import CopyButton from '../advancedSearch/CopyButton';
 
 const useStyles = makeStyles(theme => ({
   root: {
@@ -99,6 +99,9 @@ const useStyles = makeStyles(theme => ({
     letterSpacing: '0.5px',
     color: 'rgba(0, 0, 0, 0.6)',
   },
+  copyBtn: {
+    marginLeft: theme.spacing(0.5),
+  },
 }));
 
 const EnhancedTable: FC<TableType> = props => {
@@ -313,7 +316,11 @@ const EnhancedTable: FC<TableType> = props => {
                               )}
 
                               {needCopy && row[colDef.id] && (
-                                <Copy data={row[colDef.id]} />
+                                <CopyButton
+                                  label="copy button"
+                                  value={row[colDef.id]}
+                                  className={classes.copyBtn}
+                                />
                               )}
                             </TableCell>
                           );