Add text label to copy buttons on tags (jaegertracing#1547)

Signed-off-by: Anik Dhabal Babu <adhabal2002@gmail.com>
anikdhabal · Jul 14, 2023 · 8fcec04 · 8fcec04
1 parent 85fc71b
commit 8fcec04
Show file tree

Hide file tree

Showing 3 changed files with 11 additions and 3 deletions.
diff --git a/...ages/jaeger-ui/src/components/TracePage/TraceTimelineViewer/SpanDetail/KeyValuesTable.tsx b/...ages/jaeger-ui/src/components/TracePage/TraceTimelineViewer/SpanDetail/KeyValuesTable.tsx
@@ -153,12 +153,14 @@ export default function KeyValuesTable(props: KeyValuesTableProps) {
                     className="KeyValueTable--copyIcon"
                     copyText={row.value}
                     tooltipTitle="Copy value"
+                    buttonText="Copy"
                   />
                   <CopyIcon
                     className="KeyValueTable--copyIcon"
                     icon="snippets"
                     copyText={JSON.stringify(row, null, 2)}
                     tooltipTitle="Copy JSON"
+                    buttonText="JSON"
                   />
                 </td>
               </tr>

diff --git a/packages/jaeger-ui/src/components/common/CopyIcon.css b/packages/jaeger-ui/src/components/common/CopyIcon.css
@@ -17,11 +17,14 @@ limitations under the License.
 .CopyIcon,
 .CopyIcon:hover {
   background-color: transparent;
-  border: none;
+  border: 1px solid inherit;
   color: inherit;
   height: 100%;
   overflow: hidden;
-  padding: 0px;
+  padding: 1px;
+  font-size: 13px;
+  margin-left: 5px;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
 }
 
 .CopyIcon:focus {

diff --git a/packages/jaeger-ui/src/components/common/CopyIcon.tsx b/packages/jaeger-ui/src/components/common/CopyIcon.tsx
@@ -27,6 +27,7 @@ type PropsType = {
   icon?: string;
   placement?: TooltipPlacement;
   tooltipTitle: string;
+  buttonText: string;
 };
 
 type StateType = {
@@ -73,7 +74,9 @@ export default class CopyIcon extends React.PureComponent<PropsType, StateType>
           htmlType="button"
           icon={this.props.icon}
           onClick={this.handleClick}
-        />
+        >
+          {this.props.buttonText}
+        </Button>
       </Tooltip>
     );
   }