changes for add token form

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;
 }

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>

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;
+}

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;