Fix copy button on response headers (#1409)

Co-authored-by: Millicent Achieng <[email protected]>
microsoftgraph · Feb 2, 2022 · e52cc64 · e52cc64
1 parent 59e2ddc
commit e52cc64
Showing 1 changed file with 8 additions and 13 deletions.
diff --git 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>
+      </>
     );
   }