From 6beafd2e44bf7ee795364bca193d5b8747c02fef Mon Sep 17 00:00:00 2001
From: Evans Aboge <evansonoka05.j@gmail.com>
Date: Wed, 2 Feb 2022 16:18:53 +0300
Subject: [PATCH] add copy button to response headers

---
 .../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>
+      </>
     );
   }