From 07288789e2adce50939eeb564b1771120bfbc11d Mon Sep 17 00:00:00 2001
From: Victor Malai <malai9696@gmail.com>
Date: Wed, 2 Dec 2020 09:40:02 +0200
Subject: [PATCH] fix: Show copy icon (#11847)

* Show copy icon

* Fix eslint

* Fix copy button on view query modal

* Remove comments
---
 .../src/components/CopyToClipboard.jsx        | 14 +++++-------
 .../explore/components/DisplayQueryButton.jsx | 22 +++++++++++++++++--
 2 files changed, 25 insertions(+), 11 deletions(-)

diff --git a/superset-frontend/src/components/CopyToClipboard.jsx b/superset-frontend/src/components/CopyToClipboard.jsx
index d6be031e01..917d0d1e8b 100644
--- a/superset-frontend/src/components/CopyToClipboard.jsx
+++ b/superset-frontend/src/components/CopyToClipboard.jsx
@@ -71,15 +71,11 @@ class CopyToClipboard extends React.Component {
   }
 
   getDecoratedCopyNode() {
-    return React.cloneElement(
-      this.props.copyNode,
-      {
-        style: { cursor: 'pointer' },
-        onClick: this.onClick,
-        onMouseOut: this.onMouseOut,
-      },
-      null,
-    );
+    return React.cloneElement(this.props.copyNode, {
+      style: { cursor: 'pointer' },
+      onClick: this.onClick,
+      onMouseOut: this.onMouseOut,
+    });
   }
 
   resetTooltipText() {
diff --git a/superset-frontend/src/explore/components/DisplayQueryButton.jsx b/superset-frontend/src/explore/components/DisplayQueryButton.jsx
index ab19c5fb49..869674dc30 100644
--- a/superset-frontend/src/explore/components/DisplayQueryButton.jsx
+++ b/superset-frontend/src/explore/components/DisplayQueryButton.jsx
@@ -75,6 +75,24 @@ const CopyButton = styled(Button)`
   && {
     margin-left: ${({ theme }) => theme.gridUnit * 2}px;
   }
+
+  i {
+    padding: 0;
+  }
+`;
+
+const CopyButtonViewQuery = styled(Button)`
+  padding: ${({ theme }) => theme.gridUnit / 2}px
+    ${({ theme }) => theme.gridUnit * 2.5}px;
+  font-size: ${({ theme }) => theme.typography.sizes.s}px;
+
+  && {
+    margin-bottom: 5px;
+  }
+
+  i {
+    padding: 0;
+  }
 `;
 
 export const DisplayQueryButton = props => {
@@ -188,9 +206,9 @@ export const DisplayQueryButton = props => {
             text={query}
             shouldShowText={false}
             copyNode={
-              <Button style={{ position: 'absolute', right: 20 }}>
+              <CopyButtonViewQuery>
                 <i className="fa fa-clipboard" />
-              </Button>
+              </CopyButtonViewQuery>
             }
           />
           <SyntaxHighlighter language={language} style={github}>