Create styles for copy in schema and stop click propagation

ui/src/flux/components/DatabaseListItem.tsx

@@ -55,11 +55,10 @@ class DatabaseListItem extends PureComponent<Props, State> {
           {db}
           <span className="flux-schema-type">Bucket</span>
           <CopyToClipboard text={db} onCopy={this.handleCopy}>
-            <span
-              className="icon duplicate"
-              title="copy to clipboard"
-              style={{zIndex: 100}}
-            />
+            <div className="flux-schema-copy" onClick={this.handleCopyClick}>
+              <span className="icon duplicate" title="copy to clipboard" />
+              Copy
+            </div>
           </CopyToClipboard>
         </div>
         {this.state.isOpen && (
@@ -95,6 +94,10 @@ class DatabaseListItem extends PureComponent<Props, State> {
     })
   }
 
+  private handleCopyClick = e => {
+    e.stopPropagation()
+  }
+
   private handleCopy = (copiedText: string): void => {
     this.setState({isCopied: true, copiedText})
   }

ui/src/style/components/time-machine/flux-explorer.scss

@@ -18,7 +18,7 @@ $flux-tree-line: 2px;
   flex-direction: column;
   align-items: stretch;
   padding-left: 0;
-  >.flux-schema-tree {
+  > .flux-schema-tree {
     padding-left: $flux-tree-indent;
   }
 }
@@ -68,7 +68,7 @@ $flux-tree-line: 2px;
   color: $g11-sidewalk;
   white-space: nowrap;
   transition: color 0.25s ease, background-color 0.25s ease;
-  >span.icon {
+  > span.icon {
     position: absolute;
     top: 50%;
     left: $flux-tree-indent / 2;
@@ -83,7 +83,7 @@ $flux-tree-line: 2px;
       background-color: $g17-whisper;
     }
   }
-  .expanded>& {
+  .expanded > & {
     color: $c-pool;
     .flux-schema-item-toggle:before,
     .flux-schema-item-toggle:after {
@@ -122,15 +122,20 @@ $flux-tree-line: 2px;
 
 @keyframes skeleton-animation {
   0% {
-    background-position: 100% 50%
+    background-position: 100% 50%;
   }
   100% {
-    background-position: 0% 50%
+    background-position: 0% 50%;
   }
 }
 
 .flux-schema-item-skeleton {
-  background: linear-gradient(70deg, $g4-onyx 0%, $g5-pepper 50%, $g4-onyx 100%);
+  background: linear-gradient(
+    70deg,
+    $g4-onyx 0%,
+    $g5-pepper 50%,
+    $g4-onyx 100%
+  );
   border-radius: 4px;
   height: 60%;
   background-size: 400% 400%;
@@ -196,7 +201,24 @@ $flux-tree-line: 2px;
   }
 }
 
-.flux-schema-tree>.flux-schema--filter {
+.flux-schema-copy {
+  color: $g11-sidewalk;
+  display: inline-block;
+  opacity: 0;
+  transition: opacity 0.25s ease;
+  margin-left: 8px;
+  .flux-schema-item:hover & {
+    opacity: 1;
+  }
+  > span.icon {
+    margin-right: 3px;
+  }
+  &:hover {
+    color: $g15-platinum;
+  }
+}
+
+.flux-schema-tree > .flux-schema--filter {
   margin-left: $flux-tree-indent / 2;
   margin-right: $flux-tree-indent / 2;
   margin-top: 1px;
@@ -204,12 +226,12 @@ $flux-tree-line: 2px;
   max-width: 220px;
 }
 
-.flux-schema--filter>input.input-sm {
+.flux-schema--filter > input.input-sm {
   height: 25px;
   font-size: 12px;
 }
 
-.tag-value-list--header>.flux-schema--filter {
+.tag-value-list--header > .flux-schema--filter {
   display: inline-block;
   margin-right: 15px;
 }
@@ -232,7 +254,7 @@ $flux-tree-line: 2px;
   margin: 0 auto;
 }
 
-.loading-spinner .spinner>div {
+.loading-spinner .spinner > div {
   width: 8px;
   height: 8px;
   background-color: $g8-storm;
@@ -253,10 +275,10 @@ $flux-tree-line: 2px;
   0%,
   80%,
   100% {
-    -webkit-transform: scale(0)
+    -webkit-transform: scale(0);
   }
   40% {
-    -webkit-transform: scale(1.0)
+    -webkit-transform: scale(1);
   }
 }
 
@@ -268,7 +290,7 @@ $flux-tree-line: 2px;
     transform: scale(0);
   }
   40% {
-    -webkit-transform: scale(1.0);
-    transform: scale(1.0);
+    -webkit-transform: scale(1);
+    transform: scale(1);
   }
 }