From c45da45300ee117f2caae444bb5c7dc53308d008 Mon Sep 17 00:00:00 2001
From: Rares Mardare <rares.mardare@grafana.com>
Date: Wed, 7 Sep 2022 13:48:55 +0300
Subject: [PATCH 1/8] changes for add token form

---
 ...Code.module.css => SourceCode.module.scss} | 24 ++++---
 .../src/components/SourceCode/SourceCode.tsx  | 17 +++--
 .../ApiTokenSettings/ApiTokenForm.module.css  | 12 ++++
 .../ApiTokenSettings/ApiTokenForm.tsx         | 70 ++++++++++++++-----
 4 files changed, 89 insertions(+), 34 deletions(-)
 rename grafana-plugin/src/components/SourceCode/{SourceCode.module.css => SourceCode.module.scss} (63%)
 create mode 100644 grafana-plugin/src/containers/ApiTokenSettings/ApiTokenForm.module.css

diff --git a/grafana-plugin/src/components/SourceCode/SourceCode.module.css b/grafana-plugin/src/components/SourceCode/SourceCode.module.scss
similarity index 63%
rename from grafana-plugin/src/components/SourceCode/SourceCode.module.css
rename to grafana-plugin/src/components/SourceCode/SourceCode.module.scss
index beabde1e..baff26d5 100644
--- a/grafana-plugin/src/components/SourceCode/SourceCode.module.css
+++ b/grafana-plugin/src/components/SourceCode/SourceCode.module.scss
@@ -1,29 +1,33 @@
 .root {
   position: relative;
   width: 100%;
+
+  &:hover .button {
+    opacity: 1;
+  }
 }
 
 .scroller {
   overflow-y: auto;
+
+  &--maxHeight {
+    max-height: 400px;
+  }
 }
 
-.scroller_max-height {
-  max-height: 400px;
-}
-
-.root .button {
+.button {
   position: absolute;
   top: 15px;
   right: 15px;
   opacity: 0;
   transition: opacity 0.2s ease;
+
+  &--top {
+    top: 4px;
+  }
 }
 
-.root:hover .button {
-  opacity: 1;
-}
-
-.root pre {
+pre {
   border-radius: 2px;
   padding: 12px 20px;
 }
diff --git a/grafana-plugin/src/components/SourceCode/SourceCode.tsx b/grafana-plugin/src/components/SourceCode/SourceCode.tsx
index 91c3513c..61fc2202 100644
--- a/grafana-plugin/src/components/SourceCode/SourceCode.tsx
+++ b/grafana-plugin/src/components/SourceCode/SourceCode.tsx
@@ -6,18 +6,19 @@ import CopyToClipboard from 'react-copy-to-clipboard';
 
 import { openNotification } from 'utils';
 
-import styles from './SourceCode.module.css';
+import styles from './SourceCode.module.scss';
 
 const cx = cn.bind(styles);
 
 interface SourceCodeProps {
   noMaxHeight?: boolean;
   showCopyToClipboard?: boolean;
-  children?: any
+  isButtonTopPositioned?: boolean;
+  children?: any;
 }
 
 const SourceCode: FC<SourceCodeProps> = (props) => {
-  const { children, noMaxHeight = false, showCopyToClipboard = true } = props;
+  const { children, isButtonTopPositioned = false, noMaxHeight = false, showCopyToClipboard = true } = props;
 
   return (
     <div className={cx('root')}>
@@ -28,14 +29,20 @@ const SourceCode: FC<SourceCodeProps> = (props) => {
             openNotification('Copied!');
           }}
         >
-          <Button className={cx('button')} variant="primary" icon="copy">
+          <Button
+            className={cx('button', {
+              'button--top': isButtonTopPositioned,
+            })}
+            variant="primary"
+            icon="copy"
+          >
             Copy
           </Button>
         </CopyToClipboard>
       )}
       <pre
         className={cx('scroller', {
-          'scroller_max-height': !noMaxHeight,
+          'scroller--maxHeight': !noMaxHeight,
         })}
       >
         <code>{children}</code>
diff --git a/grafana-plugin/src/containers/ApiTokenSettings/ApiTokenForm.module.css b/grafana-plugin/src/containers/ApiTokenSettings/ApiTokenForm.module.css
new file mode 100644
index 00000000..bae192e6
--- /dev/null
+++ b/grafana-plugin/src/containers/ApiTokenSettings/ApiTokenForm.module.css
@@ -0,0 +1,12 @@
+.token__inputContainer {
+  width: 100%;
+  display: flex;
+  margin-bottom: 24px;
+}
+
+.token__input {
+  flex-grow: 1;
+}
+.token__copyButton {
+  margin-left: 12px;
+}
diff --git a/grafana-plugin/src/containers/ApiTokenSettings/ApiTokenForm.tsx b/grafana-plugin/src/containers/ApiTokenSettings/ApiTokenForm.tsx
index 8de6d269..85855021 100644
--- a/grafana-plugin/src/containers/ApiTokenSettings/ApiTokenForm.tsx
+++ b/grafana-plugin/src/containers/ApiTokenSettings/ApiTokenForm.tsx
@@ -1,6 +1,7 @@
 import React, { useCallback, HTMLAttributes, useState } from 'react';
 
-import { Button, Field, HorizontalGroup, Input, Modal, VerticalGroup } from '@grafana/ui';
+import { Button, HorizontalGroup, Input, Label, Modal, VerticalGroup } from '@grafana/ui';
+import cn from 'classnames/bind';
 import { get } from 'lodash-es';
 import { observer } from 'mobx-react';
 import CopyToClipboard from 'react-copy-to-clipboard';
@@ -9,6 +10,13 @@ import { ApiToken } from 'models/api_token/api_token.types';
 import { useStore } from 'state/useStore';
 import { openErrorNotification, openNotification } from 'utils';
 
+import styles from './ApiTokenForm.module.css';
+import SourceCode from 'components/SourceCode/SourceCode';
+
+const cx = cn.bind(styles);
+
+const CURL_EXAMPLE = `curl: try 'curl --help' or 'curl --manual' for more information`;
+
 interface TokenCreationModalProps extends HTMLAttributes<HTMLElement> {
   visible: boolean;
   onHide: () => void;
@@ -16,9 +24,10 @@ interface TokenCreationModalProps extends HTMLAttributes<HTMLElement> {
 }
 
 const ApiTokenForm = observer((props: TokenCreationModalProps) => {
-  const { visible, onHide = () => {}, onUpdate = () => {} } = props;
+  const { onHide = () => {}, onUpdate = () => {} } = props;
   const [name, setName] = useState('');
   const [token, setToken] = useState('');
+  const [isModalOpen, setIsModalOpen] = useState(true);
 
   const store = useStore();
 
@@ -37,32 +46,55 @@ const ApiTokenForm = observer((props: TokenCreationModalProps) => {
   }, []);
 
   return (
-    <Modal isOpen closeOnEscape={false} title={token ? 'Your new API Token' : 'Create API Token'} onDismiss={onHide}>
+    <Modal
+      isOpen={isModalOpen}
+      closeOnEscape={false}
+      title={token ? 'Your new API Token' : 'Create API Token'}
+      onDismiss={onHide}
+    >
       <VerticalGroup>
-        <Input maxLength={50} onChange={handleNameChange} autoFocus placeholder="Enter token name" />
-        {token && (
-          <>
-            <Input value={token} disabled />
-          </>
-        )}
-        <HorizontalGroup>
+        <Label>Token Name</Label>
+        <div className={cx('token__inputContainer')}>
+          {renderTokenInput()}
+
           {token && (
-            <CopyToClipboard
-              text={token}
-              onCopy={() => {
-                openNotification('Token copied');
-              }}
-            >
-              <Button>Copy Token</Button>
+            <CopyToClipboard text={token} onCopy={() => openNotification('Token copied')}>
+              <Button className={cx('token__copyButton')}>Copy Token</Button>
             </CopyToClipboard>
           )}
-          <Button disabled={!!token || !name} variant="primary" onClick={onCreateTokenCallback}>
-            Create
+        </div>
+
+        <Label>Curl command example</Label>
+        <SourceCode isButtonTopPositioned={true}>{CURL_EXAMPLE}</SourceCode>
+
+        <HorizontalGroup justify="flex-end">
+          <Button variant="secondary" onClick={() => setIsModalOpen(false)}>
+            {token ? 'Close' : 'Cancel'}
           </Button>
+          {!token && (
+            <Button disabled={!!token || !name} variant="primary" onClick={onCreateTokenCallback}>
+              Create Token
+            </Button>
+          )}
         </HorizontalGroup>
       </VerticalGroup>
     </Modal>
   );
+
+  function renderTokenInput() {
+    if (!token)
+      return (
+        <Input
+          className={cx('token__input')}
+          maxLength={50}
+          onChange={handleNameChange}
+          placeholder="Enter token name"
+          autoFocus
+        />
+      );
+
+    return <Input value={token} disabled={!!token} className={cx('token__input')} />;
+  }
 });
 
 export default ApiTokenForm;

From b00d8dab3a268d5d8a3dc4c144a216f7f330473f Mon Sep 17 00:00:00 2001
From: Rares Mardare <rares.mardare@grafana.com>
Date: Wed, 7 Sep 2022 13:54:02 +0300
Subject: [PATCH 2/8] alignment change

---
 grafana-plugin/src/components/SourceCode/SourceCode.module.scss | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/grafana-plugin/src/components/SourceCode/SourceCode.module.scss b/grafana-plugin/src/components/SourceCode/SourceCode.module.scss
index baff26d5..fc7c3b9f 100644
--- a/grafana-plugin/src/components/SourceCode/SourceCode.module.scss
+++ b/grafana-plugin/src/components/SourceCode/SourceCode.module.scss
@@ -23,7 +23,7 @@
   transition: opacity 0.2s ease;
 
   &--top {
-    top: 4px;
+    top: 6px;
   }
 }
 

From 55119a44538d0896ccf1561e89eaa56482bb58a1 Mon Sep 17 00:00:00 2001
From: Rares Mardare <rares.mardare@grafana.com>
Date: Wed, 7 Sep 2022 14:28:12 +0300
Subject: [PATCH 3/8] fixed modal not opening after creating a new token

---
 .../ApiTokenSettings/ApiTokenForm.module.css          |  1 +
 .../src/containers/ApiTokenSettings/ApiTokenForm.tsx  | 11 +++++------
 .../containers/ApiTokenSettings/ApiTokenSettings.tsx  |  2 --
 3 files changed, 6 insertions(+), 8 deletions(-)

diff --git a/grafana-plugin/src/containers/ApiTokenSettings/ApiTokenForm.module.css b/grafana-plugin/src/containers/ApiTokenSettings/ApiTokenForm.module.css
index bae192e6..09f033e0 100644
--- a/grafana-plugin/src/containers/ApiTokenSettings/ApiTokenForm.module.css
+++ b/grafana-plugin/src/containers/ApiTokenSettings/ApiTokenForm.module.css
@@ -7,6 +7,7 @@
 .token__input {
   flex-grow: 1;
 }
+
 .token__copyButton {
   margin-left: 12px;
 }
diff --git a/grafana-plugin/src/containers/ApiTokenSettings/ApiTokenForm.tsx b/grafana-plugin/src/containers/ApiTokenSettings/ApiTokenForm.tsx
index 85855021..d37a0b57 100644
--- a/grafana-plugin/src/containers/ApiTokenSettings/ApiTokenForm.tsx
+++ b/grafana-plugin/src/containers/ApiTokenSettings/ApiTokenForm.tsx
@@ -6,12 +6,12 @@ import { get } from 'lodash-es';
 import { observer } from 'mobx-react';
 import CopyToClipboard from 'react-copy-to-clipboard';
 
+import SourceCode from 'components/SourceCode/SourceCode';
 import { ApiToken } from 'models/api_token/api_token.types';
 import { useStore } from 'state/useStore';
 import { openErrorNotification, openNotification } from 'utils';
 
 import styles from './ApiTokenForm.module.css';
-import SourceCode from 'components/SourceCode/SourceCode';
 
 const cx = cn.bind(styles);
 
@@ -27,7 +27,6 @@ const ApiTokenForm = observer((props: TokenCreationModalProps) => {
   const { onHide = () => {}, onUpdate = () => {} } = props;
   const [name, setName] = useState('');
   const [token, setToken] = useState('');
-  const [isModalOpen, setIsModalOpen] = useState(true);
 
   const store = useStore();
 
@@ -47,7 +46,7 @@ const ApiTokenForm = observer((props: TokenCreationModalProps) => {
 
   return (
     <Modal
-      isOpen={isModalOpen}
+      isOpen
       closeOnEscape={false}
       title={token ? 'Your new API Token' : 'Create API Token'}
       onDismiss={onHide}
@@ -68,7 +67,7 @@ const ApiTokenForm = observer((props: TokenCreationModalProps) => {
         <SourceCode isButtonTopPositioned={true}>{CURL_EXAMPLE}</SourceCode>
 
         <HorizontalGroup justify="flex-end">
-          <Button variant="secondary" onClick={() => setIsModalOpen(false)}>
+          <Button variant="secondary" onClick={() => onHide()}>
             {token ? 'Close' : 'Cancel'}
           </Button>
           {!token && (
@@ -83,7 +82,7 @@ const ApiTokenForm = observer((props: TokenCreationModalProps) => {
 
   function renderTokenInput() {
     if (!token)
-      return (
+      {return (
         <Input
           className={cx('token__input')}
           maxLength={50}
@@ -91,7 +90,7 @@ const ApiTokenForm = observer((props: TokenCreationModalProps) => {
           placeholder="Enter token name"
           autoFocus
         />
-      );
+      );}
 
     return <Input value={token} disabled={!!token} className={cx('token__input')} />;
   }
diff --git a/grafana-plugin/src/containers/ApiTokenSettings/ApiTokenSettings.tsx b/grafana-plugin/src/containers/ApiTokenSettings/ApiTokenSettings.tsx
index 71e85426..f9a9f0bb 100644
--- a/grafana-plugin/src/containers/ApiTokenSettings/ApiTokenSettings.tsx
+++ b/grafana-plugin/src/containers/ApiTokenSettings/ApiTokenSettings.tsx
@@ -48,8 +48,6 @@ class ApiTokens extends React.Component<ApiTokensProps, any> {
 
     const apiTokens = apiTokenStore.getSearchResult();
 
-    const loading = !apiTokens;
-
     const { showCreateTokenModal } = this.state;
 
     const columns = [

From 65420d77999bd69bb0a216c773ffb974a9681c77 Mon Sep 17 00:00:00 2001
From: Rares Mardare <rares.mardare@grafana.com>
Date: Mon, 12 Sep 2022 14:36:40 +0300
Subject: [PATCH 4/8] added curl example + minor refactoring

---
 .../ApiTokenSettings/ApiTokenForm.tsx         | 63 +++++++++++--------
 1 file changed, 36 insertions(+), 27 deletions(-)

diff --git a/grafana-plugin/src/containers/ApiTokenSettings/ApiTokenForm.tsx b/grafana-plugin/src/containers/ApiTokenSettings/ApiTokenForm.tsx
index d37a0b57..8bd60647 100644
--- a/grafana-plugin/src/containers/ApiTokenSettings/ApiTokenForm.tsx
+++ b/grafana-plugin/src/containers/ApiTokenSettings/ApiTokenForm.tsx
@@ -15,8 +15,6 @@ import styles from './ApiTokenForm.module.css';
 
 const cx = cn.bind(styles);
 
-const CURL_EXAMPLE = `curl: try 'curl --help' or 'curl --manual' for more information`;
-
 interface TokenCreationModalProps extends HTMLAttributes<HTMLElement> {
   visible: boolean;
   onHide: () => void;
@@ -45,26 +43,15 @@ const ApiTokenForm = observer((props: TokenCreationModalProps) => {
   }, []);
 
   return (
-    <Modal
-      isOpen
-      closeOnEscape={false}
-      title={token ? 'Your new API Token' : 'Create API Token'}
-      onDismiss={onHide}
-    >
+    <Modal isOpen closeOnEscape={false} title={token ? 'Your new API Token' : 'Create API Token'} onDismiss={onHide}>
       <VerticalGroup>
         <Label>Token Name</Label>
         <div className={cx('token__inputContainer')}>
           {renderTokenInput()}
-
-          {token && (
-            <CopyToClipboard text={token} onCopy={() => openNotification('Token copied')}>
-              <Button className={cx('token__copyButton')}>Copy Token</Button>
-            </CopyToClipboard>
-          )}
+          {renderCopyToClipboard()}
         </div>
 
-        <Label>Curl command example</Label>
-        <SourceCode isButtonTopPositioned={true}>{CURL_EXAMPLE}</SourceCode>
+        {renderCurlExample()}
 
         <HorizontalGroup justify="flex-end">
           <Button variant="secondary" onClick={() => onHide()}>
@@ -81,19 +68,41 @@ const ApiTokenForm = observer((props: TokenCreationModalProps) => {
   );
 
   function renderTokenInput() {
-    if (!token)
-      {return (
-        <Input
-          className={cx('token__input')}
-          maxLength={50}
-          onChange={handleNameChange}
-          placeholder="Enter token name"
-          autoFocus
-        />
-      );}
+    return token ? (
+      <Input value={token} disabled={!!token} className={cx('token__input')} />
+    ) : (
+      <Input
+        className={cx('token__input')}
+        maxLength={50}
+        onChange={handleNameChange}
+        placeholder="Enter token name"
+        autoFocus
+      />
+    );
+  }
 
-    return <Input value={token} disabled={!!token} className={cx('token__input')} />;
+  function renderCopyToClipboard() {
+    if (!token) return null;
+    return (
+      <CopyToClipboard text={token} onCopy={() => openNotification('Token copied')}>
+        <Button className={cx('token__copyButton')}>Copy Token</Button>
+      </CopyToClipboard>
+    );
+  }
+
+  function renderCurlExample() {
+    if (!token) return null;
+    return (
+      <VerticalGroup>
+        <Label>Curl command example</Label>
+        <SourceCode isButtonTopPositioned={true}>{getCurlExample(token)}</SourceCode>
+      </VerticalGroup>
+    );
   }
 });
 
+function getCurlExample(token) {
+  return `curl -H "Authorization: ${token}" ${document.location.origin}/api/v1/escalation_chains`;
+}
+
 export default ApiTokenForm;

From 4cbb65a5cb65569a5b60722b570a55eea3bf30a9 Mon Sep 17 00:00:00 2001
From: Rares Mardare <rares.mardare@grafana.com>
Date: Mon, 12 Sep 2022 16:57:37 +0300
Subject: [PATCH 5/8] pick hostname from onCallApiUrl

---
 .../components/SourceCode/SourceCode.module.scss    |  4 ----
 .../src/components/SourceCode/SourceCode.tsx        |  8 +++-----
 .../containers/ApiTokenSettings/ApiTokenForm.tsx    | 13 +++++++++----
 3 files changed, 12 insertions(+), 13 deletions(-)

diff --git a/grafana-plugin/src/components/SourceCode/SourceCode.module.scss b/grafana-plugin/src/components/SourceCode/SourceCode.module.scss
index fc7c3b9f..a926c09d 100644
--- a/grafana-plugin/src/components/SourceCode/SourceCode.module.scss
+++ b/grafana-plugin/src/components/SourceCode/SourceCode.module.scss
@@ -21,10 +21,6 @@
   right: 15px;
   opacity: 0;
   transition: opacity 0.2s ease;
-
-  &--top {
-    top: 6px;
-  }
 }
 
 pre {
diff --git a/grafana-plugin/src/components/SourceCode/SourceCode.tsx b/grafana-plugin/src/components/SourceCode/SourceCode.tsx
index 61fc2202..da4f8838 100644
--- a/grafana-plugin/src/components/SourceCode/SourceCode.tsx
+++ b/grafana-plugin/src/components/SourceCode/SourceCode.tsx
@@ -13,12 +13,11 @@ const cx = cn.bind(styles);
 interface SourceCodeProps {
   noMaxHeight?: boolean;
   showCopyToClipboard?: boolean;
-  isButtonTopPositioned?: boolean;
   children?: any;
 }
 
 const SourceCode: FC<SourceCodeProps> = (props) => {
-  const { children, isButtonTopPositioned = false, noMaxHeight = false, showCopyToClipboard = true } = props;
+  const { children, noMaxHeight = false, showCopyToClipboard = true } = props;
 
   return (
     <div className={cx('root')}>
@@ -30,10 +29,9 @@ const SourceCode: FC<SourceCodeProps> = (props) => {
           }}
         >
           <Button
-            className={cx('button', {
-              'button--top': isButtonTopPositioned,
-            })}
+            className={cx('button')}
             variant="primary"
+            size='xs'
             icon="copy"
           >
             Copy
diff --git a/grafana-plugin/src/containers/ApiTokenSettings/ApiTokenForm.tsx b/grafana-plugin/src/containers/ApiTokenSettings/ApiTokenForm.tsx
index 8bd60647..5636613f 100644
--- a/grafana-plugin/src/containers/ApiTokenSettings/ApiTokenForm.tsx
+++ b/grafana-plugin/src/containers/ApiTokenSettings/ApiTokenForm.tsx
@@ -10,6 +10,7 @@ import SourceCode from 'components/SourceCode/SourceCode';
 import { ApiToken } from 'models/api_token/api_token.types';
 import { useStore } from 'state/useStore';
 import { openErrorNotification, openNotification } from 'utils';
+import { getItem } from 'utils/localStorage';
 
 import styles from './ApiTokenForm.module.css';
 
@@ -82,7 +83,9 @@ const ApiTokenForm = observer((props: TokenCreationModalProps) => {
   }
 
   function renderCopyToClipboard() {
-    if (!token) return null;
+    if (!token) {
+      return null;
+    }
     return (
       <CopyToClipboard text={token} onCopy={() => openNotification('Token copied')}>
         <Button className={cx('token__copyButton')}>Copy Token</Button>
@@ -91,18 +94,20 @@ const ApiTokenForm = observer((props: TokenCreationModalProps) => {
   }
 
   function renderCurlExample() {
-    if (!token) return null;
+    if (!token) {
+      return null;
+    }
     return (
       <VerticalGroup>
         <Label>Curl command example</Label>
-        <SourceCode isButtonTopPositioned={true}>{getCurlExample(token)}</SourceCode>
+        <SourceCode>{getCurlExample(token)}</SourceCode>
       </VerticalGroup>
     );
   }
 });
 
 function getCurlExample(token) {
-  return `curl -H "Authorization: ${token}" ${document.location.origin}/api/v1/escalation_chains`;
+  return `curl -H "Authorization: ${token}" ${getItem('onCallApiUrl')}/api/internal/v1/alert_receive_channels`;
 }
 
 export default ApiTokenForm;

From c06d021906437267abd694ba76582905bbaafe10 Mon Sep 17 00:00:00 2001
From: Rares Mardare <rares.mardare@grafana.com>
Date: Wed, 14 Sep 2022 15:35:39 +0300
Subject: [PATCH 6/8] ux for token form

---
 .../SourceCode/SourceCode.module.scss         | 15 ++++++------
 .../src/components/SourceCode/SourceCode.tsx  | 24 ++++++++++---------
 .../ApiTokenSettings/ApiTokenForm.module.css  |  5 +++-
 .../ApiTokenSettings/ApiTokenForm.tsx         |  2 +-
 4 files changed, 25 insertions(+), 21 deletions(-)

diff --git a/grafana-plugin/src/components/SourceCode/SourceCode.module.scss b/grafana-plugin/src/components/SourceCode/SourceCode.module.scss
index a926c09d..82123f27 100644
--- a/grafana-plugin/src/components/SourceCode/SourceCode.module.scss
+++ b/grafana-plugin/src/components/SourceCode/SourceCode.module.scss
@@ -2,28 +2,27 @@
   position: relative;
   width: 100%;
 
-  &:hover .button {
+  &:hover .copyButton,
+  &:hover .copyIcon {
     opacity: 1;
   }
 }
 
 .scroller {
   overflow-y: auto;
+  border-radius: 2px;
+  padding: 12px 60px 12px 20px;
 
   &--maxHeight {
     max-height: 400px;
   }
 }
 
-.button {
+.copyIcon,
+.copyButton {
   position: absolute;
   top: 15px;
   right: 15px;
   opacity: 0;
   transition: opacity 0.2s ease;
-}
-
-pre {
-  border-radius: 2px;
-  padding: 12px 20px;
-}
+}
\ No newline at end of file
diff --git a/grafana-plugin/src/components/SourceCode/SourceCode.tsx b/grafana-plugin/src/components/SourceCode/SourceCode.tsx
index da4f8838..f2f35021 100644
--- a/grafana-plugin/src/components/SourceCode/SourceCode.tsx
+++ b/grafana-plugin/src/components/SourceCode/SourceCode.tsx
@@ -1,41 +1,43 @@
 import React, { FC } from 'react';
 
-import { Button } from '@grafana/ui';
+import { Button, Icon, IconButton } from '@grafana/ui';
 import cn from 'classnames/bind';
 import CopyToClipboard from 'react-copy-to-clipboard';
 
 import { openNotification } from 'utils';
 
 import styles from './SourceCode.module.scss';
+import Text from 'components/Text/Text';
 
 const cx = cn.bind(styles);
 
 interface SourceCodeProps {
   noMaxHeight?: boolean;
+  showClipboardIconOnly?: boolean;
   showCopyToClipboard?: boolean;
   children?: any;
 }
 
 const SourceCode: FC<SourceCodeProps> = (props) => {
-  const { children, noMaxHeight = false, showCopyToClipboard = true } = props;
+  const { children, noMaxHeight = false, showClipboardIconOnly = false, showCopyToClipboard = true } = props;
+  const showClipboardCopy = showClipboardIconOnly || showCopyToClipboard;
 
   return (
     <div className={cx('root')}>
-      {showCopyToClipboard && (
+      {showClipboardCopy && (
         <CopyToClipboard
           text={children as string}
           onCopy={() => {
             openNotification('Copied!');
           }}
         >
-          <Button
-            className={cx('button')}
-            variant="primary"
-            size='xs'
-            icon="copy"
-          >
-            Copy
-          </Button>
+          {showClipboardIconOnly ? (
+            <IconButton className={cx('copyIcon')} size={'lg'} name="copy" />
+          ) : (
+            <Button className={cx('copyButton')} variant="primary" size="xs" icon="copy">
+              Copy
+            </Button>
+          )}
         </CopyToClipboard>
       )}
       <pre
diff --git a/grafana-plugin/src/containers/ApiTokenSettings/ApiTokenForm.module.css b/grafana-plugin/src/containers/ApiTokenSettings/ApiTokenForm.module.css
index 09f033e0..d8058bec 100644
--- a/grafana-plugin/src/containers/ApiTokenSettings/ApiTokenForm.module.css
+++ b/grafana-plugin/src/containers/ApiTokenSettings/ApiTokenForm.module.css
@@ -6,8 +6,11 @@
 
 .token__input {
   flex-grow: 1;
+  border-top-right-radius: 0;
+  border-bottom-right-radius: 0;
 }
 
 .token__copyButton {
-  margin-left: 12px;
+  border-top-left-radius: 0;
+  border-bottom-left-radius: 0;
 }
diff --git a/grafana-plugin/src/containers/ApiTokenSettings/ApiTokenForm.tsx b/grafana-plugin/src/containers/ApiTokenSettings/ApiTokenForm.tsx
index 5636613f..5457d4f6 100644
--- a/grafana-plugin/src/containers/ApiTokenSettings/ApiTokenForm.tsx
+++ b/grafana-plugin/src/containers/ApiTokenSettings/ApiTokenForm.tsx
@@ -100,7 +100,7 @@ const ApiTokenForm = observer((props: TokenCreationModalProps) => {
     return (
       <VerticalGroup>
         <Label>Curl command example</Label>
-        <SourceCode>{getCurlExample(token)}</SourceCode>
+        <SourceCode showClipboardIconOnly>{getCurlExample(token)}</SourceCode>
       </VerticalGroup>
     );
   }

From 18adabd9edda691d2464cd481a7959c07d942d8c Mon Sep 17 00:00:00 2001
From: Rares Mardare <rares.mardare@grafana.com>
Date: Wed, 14 Sep 2022 15:42:14 +0300
Subject: [PATCH 7/8] linter

---
 .../src/components/SourceCode/SourceCode.module.scss          | 4 +++-
 grafana-plugin/src/components/SourceCode/SourceCode.tsx       | 1 -
 2 files changed, 3 insertions(+), 2 deletions(-)

diff --git a/grafana-plugin/src/components/SourceCode/SourceCode.module.scss b/grafana-plugin/src/components/SourceCode/SourceCode.module.scss
index 82123f27..5dddbcdf 100644
--- a/grafana-plugin/src/components/SourceCode/SourceCode.module.scss
+++ b/grafana-plugin/src/components/SourceCode/SourceCode.module.scss
@@ -23,6 +23,8 @@
   position: absolute;
   top: 15px;
   right: 15px;
-  opacity: 0;
   transition: opacity 0.2s ease;
+}
+.copyButton {
+  opacity: 0;
 }
\ No newline at end of file
diff --git a/grafana-plugin/src/components/SourceCode/SourceCode.tsx b/grafana-plugin/src/components/SourceCode/SourceCode.tsx
index f2f35021..de97190c 100644
--- a/grafana-plugin/src/components/SourceCode/SourceCode.tsx
+++ b/grafana-plugin/src/components/SourceCode/SourceCode.tsx
@@ -7,7 +7,6 @@ import CopyToClipboard from 'react-copy-to-clipboard';
 import { openNotification } from 'utils';
 
 import styles from './SourceCode.module.scss';
-import Text from 'components/Text/Text';
 
 const cx = cn.bind(styles);
 

From fd38af4e1797fb5decc3461eb161032f5747342a Mon Sep 17 00:00:00 2001
From: Rares Mardare <rares.mardare@grafana.com>
Date: Wed, 14 Sep 2022 16:01:50 +0300
Subject: [PATCH 8/8] unused css rule

---
 .../src/components/SourceCode/SourceCode.module.scss           | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/grafana-plugin/src/components/SourceCode/SourceCode.module.scss b/grafana-plugin/src/components/SourceCode/SourceCode.module.scss
index 5dddbcdf..0b281c05 100644
--- a/grafana-plugin/src/components/SourceCode/SourceCode.module.scss
+++ b/grafana-plugin/src/components/SourceCode/SourceCode.module.scss
@@ -2,8 +2,7 @@
   position: relative;
   width: 100%;
 
-  &:hover .copyButton,
-  &:hover .copyIcon {
+  &:hover .copyButton {
     opacity: 1;
   }
 }