Fix CopyIcon css, Swap in copy-to-clipboard

Signed-off-by: Everett Ross <reverett@uber.com>

packages/jaeger-ui/package.json

@@ -51,6 +51,7 @@
     "chance": "^1.0.10",
     "classnames": "^2.2.5",
     "combokeys": "^3.0.0",
+    "copy-to-clipboard": "^3.1.0",
     "cytoscape": "^3.2.1",
     "cytoscape-dagre": "^2.0.0",
     "d3-scale": "^1.0.6",
@@ -71,7 +72,6 @@
     "query-string": "^6.3.0",
     "raven-js": "^3.22.1",
     "react": "^16.3.2",
-    "react-copy-to-clipboard": "^5.0.1",
     "react-dimensions": "^1.3.0",
     "react-dom": "^16.3.2",
     "react-ga": "^2.4.1",

packages/jaeger-ui/src/components/TraceDiff/TraceDiffGraph/drawNode.css

@@ -88,6 +88,7 @@ limitations under the License.
 .DiffNode--popover .DiffNode--copyIcon,
 .DiffNode:not(:hover) .DiffNode--copyIcon {
   color: transparent;
+  pointer-events: none;
 }
 
 /* Tweak the popover aesthetics - unfortunate but necessary */

packages/jaeger-ui/src/components/TracePage/TraceGraph/OpNode.css

@@ -57,6 +57,7 @@ limitations under the License.
 .OpNode--popover .OpNode--copyIcon,
 .OpNode:not(:hover) .OpNode--copyIcon {
   color: transparent;
+  pointer-events: none;
 }
 
 .OpNode--service {

packages/jaeger-ui/src/components/TracePage/TraceTimelineViewer/SpanDetail/index.tsx

@@ -118,7 +118,7 @@ export default function SpanDetail(props: SpanDetailProps) {
           <CopyIcon
             copyText={deepLinkCopyText}
             icon="link"
-            placement="top"
+            placement="topRight"
             tooltipTitle="Copy deep link to this span"
           />
         </small>

packages/jaeger-ui/src/components/TracePage/TraceTimelineViewer/SpanDetailRow.tsx

@@ -19,7 +19,6 @@ import DetailState from './SpanDetail/DetailState';
 import SpanTreeOffset from './SpanTreeOffset';
 import TimelineRow from './TimelineRow';
 
-import { TNil } from '../../../types';
 import { Log, Span, KeyValuePair, Link } from '../../../types/trace';
 
 import './SpanDetailRow.css';
@@ -29,7 +28,7 @@ type SpanDetailRowProps = {
   columnDivision: number;
   detailState: DetailState;
   onDetailToggled: (spanID: string) => void;
-  linksGetter: ((span: Span, links: KeyValuePair[], index: number) => Link[]) | TNil;
+  linksGetter: (span: Span, links: KeyValuePair[], index: number) => Link[];
   logItemToggle: (spanID: string, log: Log) => void;
   logsToggle: (spanID: string) => void;
   processToggle: (spanID: string) => void;
@@ -45,7 +44,7 @@ export default class SpanDetailRow extends React.PureComponent<SpanDetailRowProp
 
   _linksGetter = (items: KeyValuePair[], itemIndex: number) => {
     const { linksGetter, span } = this.props;
-    return linksGetter ? linksGetter(span, items, itemIndex) : [];
+    return linksGetter(span, items, itemIndex);
   };
 
   render() {

packages/jaeger-ui/src/components/common/CopyIcon.css

@@ -0,0 +1,30 @@
+/*
+Copyright (c) 2019 Uber Technologies, Inc.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+.CopyIcon,
+.CopyIcon:hover {
+  background-color: transparent;
+  border: none;
+  color: inherit;
+  height: 100%;
+  overflow: hidden;
+  padding: 0px;
+}
+
+.CopyIcon:focus {
+  background-color: rgba(255, 255, 255, 0.25);
+  color: inherit;
+}

packages/jaeger-ui/src/components/common/CopyIcon.test.js

@@ -15,29 +15,41 @@
 import React from 'react';
 import { shallow } from 'enzyme';
 import { Button, Tooltip } from 'antd';
+import * as copy from 'copy-to-clipboard';
 
 import CopyIcon from './CopyIcon';
 
+jest.mock('copy-to-clipboard');
+
 describe('<CopyIcon />', () => {
   const props = {
     className: 'classNameValue',
     copyText: 'copyTextValue',
     tooltipTitle: 'tooltipTitleValue',
   };
+  let copySpy;
   let wrapper;
 
+  beforeAll(() => {
+    copySpy = jest.spyOn(copy, 'default');
+  });
+
   beforeEach(() => {
+    copySpy.mockReset();
     wrapper = shallow(<CopyIcon {...props} />);
   });
 
   it('renders as expected', () => {
     expect(wrapper).toMatchSnapshot();
   });
 
-  it('updates state when clicked', () => {
+  it('updates state and copies when clicked', () => {
     expect(wrapper.state().hasCopied).toBe(false);
+    expect(copySpy).not.toHaveBeenCalled();
+
     wrapper.find(Button).simulate('click');
     expect(wrapper.state().hasCopied).toBe(true);
+    expect(copySpy).toHaveBeenCalledWith(props.copyText);
   });
 
   it('updates state when tooltip hides and state.hasCopied is true', () => {

packages/jaeger-ui/src/components/common/CopyIcon.tsx

@@ -14,10 +14,12 @@
 
 import * as React from 'react';
 
-import { Tooltip, Button } from 'antd';
+import { Button, Tooltip } from 'antd';
 import { TooltipPlacement } from 'antd/lib/tooltip/index';
+import cx from 'classnames';
+import copy from 'copy-to-clipboard';
 
-import CopyToClipboard from 'react-copy-to-clipboard';
+import './CopyIcon.css';
 
 type PropsType = {
   className?: string;
@@ -46,6 +48,7 @@ export default class CopyIcon extends React.PureComponent<PropsType, StateType>
     this.setState({
       hasCopied: true,
     });
+    copy(this.props.copyText);
   };
 
   handleTooltipVisibilityChange = (visible: boolean) => {
@@ -65,14 +68,12 @@ export default class CopyIcon extends React.PureComponent<PropsType, StateType>
         placement={this.props.placement}
         title={this.state.hasCopied ? 'Copied' : this.props.tooltipTitle}
       >
-        <CopyToClipboard text={this.props.copyText}>
-          <Button
-            className={this.props.className}
-            htmlType="button"
-            onClick={this.handleClick}
-            icon={this.props.icon}
-          />
-        </CopyToClipboard>
+        <Button
+          className={cx(this.props.className, 'CopyIcon')}
+          htmlType="button"
+          icon={this.props.icon}
+          onClick={this.handleClick}
+        />
       </Tooltip>
     );
   }

packages/jaeger-ui/src/components/common/__snapshots__/CopyIcon.test.js.snap

@@ -12,19 +12,15 @@ exports[`<CopyIcon /> renders as expected 1`] = `
   title="tooltipTitleValue"
   transitionName="zoom-big-fast"
 >
-  <CopyToClipboard
-    text="copyTextValue"
-  >
-    <Button
-      block={false}
-      className="classNameValue"
-      ghost={false}
-      htmlType="button"
-      icon="copy"
-      loading={false}
-      onClick={[Function]}
-      prefixCls="ant-btn"
-    />
-  </CopyToClipboard>
+  <Button
+    block={false}
+    className="classNameValue CopyIcon"
+    ghost={false}
+    htmlType="button"
+    icon="copy"
+    loading={false}
+    onClick={[Function]}
+    prefixCls="ant-btn"
+  />
 </Tooltip>
 `;

yarn.lock

@@ -3510,11 +3510,12 @@ copy-descriptor@^0.1.0:
   version "0.1.1"
   resolved "https://registry.yarnpkg.com/copy-descriptor/-/copy-descriptor-0.1.1.tgz#676f6eb3c39997c2ee1ac3a924fd6124748f578d"
 
-copy-to-clipboard@^3:
-  version "3.0.8"
-  resolved "https://registry.yarnpkg.com/copy-to-clipboard/-/copy-to-clipboard-3.0.8.tgz#f4e82f4a8830dce4666b7eb8ded0c9bcc313aba9"
+copy-to-clipboard@^3.1.0:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/copy-to-clipboard/-/copy-to-clipboard-3.1.0.tgz#0a28141899e6bd217b9dc13fd1689b3b38820b44"
+  integrity sha512-+RNyDq266tv5aGhfRsL6lxgj8Y6sCvTrVJnFUVvuxuqkcSMaLISt1wd4JkdQSphbcLTIQ9kEpTULNnoCXAFdng==
   dependencies:
-    toggle-selection "^1.0.3"
+    toggle-selection "^1.0.6"
 
 core-js@2.6.4:
   version "2.6.4"
@@ -10469,13 +10470,6 @@ react-app-rewired@2.0.1:
     dotenv "^6.2.0"
     semver "^5.6.0"
 
-react-copy-to-clipboard@^5.0.1:
-  version "5.0.1"
-  resolved "https://registry.yarnpkg.com/react-copy-to-clipboard/-/react-copy-to-clipboard-5.0.1.tgz#8eae107bb400be73132ed3b6a7b4fb156090208e"
-  dependencies:
-    copy-to-clipboard "^3"
-    prop-types "^15.5.8"
-
 react-dev-utils@^7.0.0:
   version "7.0.5"
   resolved "https://registry.yarnpkg.com/react-dev-utils/-/react-dev-utils-7.0.5.tgz#cb95375d01ae71ca27b3c7616006ef7a77d14e8e"
@@ -12365,7 +12359,7 @@ to-space-case@^1.0.0:
   dependencies:
     to-no-case "^1.0.0"
 
-toggle-selection@^1.0.3:
+toggle-selection@^1.0.6:
   version "1.0.6"
   resolved "https://registry.yarnpkg.com/toggle-selection/-/toggle-selection-1.0.6.tgz#6e45b1263f2017fa0acc7d89d78b15b8bf77da32"