From e52cc649d7f663143324e675e1e93d1078b3789f Mon Sep 17 00:00:00 2001
From: EvansA <evansonoka05.j@gmail.com>
Date: Wed, 2 Feb 2022 17:46:36 +0300
Subject: [PATCH] Fix copy button on response headers (#1409)

Co-authored-by: Millicent Achieng <achieng.milli@gmail.com>
---
 .../headers/ResponseHeaders.tsx               | 21 +++++++------------
 1 file changed, 8 insertions(+), 13 deletions(-)

diff --git a/src/app/views/query-response/headers/ResponseHeaders.tsx b/src/app/views/query-response/headers/ResponseHeaders.tsx
index a0d8dab55..87981f001 100644
--- a/src/app/views/query-response/headers/ResponseHeaders.tsx
+++ b/src/app/views/query-response/headers/ResponseHeaders.tsx
@@ -1,14 +1,13 @@
 
-import { IconButton } from '@fluentui/react';
 import React from 'react';
 import { useSelector } from 'react-redux';
 import { RESPONSE_HEADERS_COPY_BUTTON } from '../../../../telemetry/component-names';
 import { IRootState } from '../../../../types/root';
-import { translateMessage } from '../../../utils/translate-messages';
 
 import { Monaco } from '../../common';
 import { trackedGenericCopy } from '../../common/copy';
 import { convertVhToPx, getResponseHeight } from '../../common/dimensions-adjustment';
+import { CopyButton } from '../../common/copy/CopyButton';
 
 const ResponseHeaders = () => {
   const { dimensions: { response }, graphResponse, responseAreaExpanded, sampleQuery } =
@@ -17,22 +16,18 @@ const ResponseHeaders = () => {
 
   const height = convertVhToPx(getResponseHeight(response.height, responseAreaExpanded), 100);
 
+  const handleCopy = async () => trackedGenericCopy(JSON.stringify(headers), RESPONSE_HEADERS_COPY_BUTTON, sampleQuery)
+
   if (headers) {
     return (
-      <div>
-        <IconButton
+      <>
+        <CopyButton
+          handleOnClick={handleCopy}
+          isIconButton={true}
           style={{ float: 'right', zIndex: 1 }}
-          ariaLabel={translateMessage('Copy')}
-          iconProps={{ iconName: 'copy' }}
-          onClick={
-            async () =>
-              trackedGenericCopy(
-                JSON.stringify(headers),
-                RESPONSE_HEADERS_COPY_BUTTON,
-                sampleQuery)}
         />
         <Monaco body={headers} height={height} />
-      </div>
+      </>
     );
   }