feat: Token description

src/authorizations/components/redesigned/CustomApiTokenOverlay.test.tsx

@@ -0,0 +1,29 @@
+import React from 'react'
+import {render, fireEvent} from '@testing-library/react'
+import {CustomApiTokenOverlay} from './CustomApiTokenOverlay'
+
+describe('CustomApitokenDescription', () => {
+  const props = {
+    onClose: () => true,
+  }
+
+  it('displays description box', () => {
+    const {getByText} = render(<CustomApiTokenOverlay {...props} />)
+
+    expect(getByText('Description')).toBeDefined()
+    expect(getByText('Generate a Personal Api Token')).toBeDefined()
+  })
+
+  describe('when user inputs something into the description box', () => {
+    it("should update the component's state", () => {
+      const {getByTestId} = render(<CustomApiTokenOverlay {...props} />)
+
+      fireEvent.change(getByTestId('custom-api-token-input'), {
+        target: {value: 'chocolate'},
+      })
+
+      const element = getByTestId('custom-api-token-input')
+      expect(element['value']).toEqual('chocolate')
+    })
+  })
+})

src/authorizations/components/redesigned/CustomApiTokenOverlay.tsx

@@ -1,7 +1,15 @@
-import React, {FC} from 'react'
+import React, {FC, useState} from 'react'
 
 // Components
-import {Overlay} from '@influxdata/clockface'
+import {
+  Overlay,
+  Form,
+  Input,
+  FlexBox,
+  AlignItems,
+  FlexDirection,
+  ComponentSize,
+} from '@influxdata/clockface'
 
 interface OwnProps {
   onClose: () => void
@@ -11,12 +19,36 @@ export const CustomApiTokenOverlay: FC<OwnProps> = props => {
   const handleDismiss = () => {
     props.onClose()
   }
+  const [description, setDescription] = useState('')
+
+  const handleInputChange = event => {
+    setDescription(event.target.value)
+  }
+
   return (
     <Overlay.Container maxWidth={500}>
       <Overlay.Header
         title="Generate a Personal Api Token"
         onDismiss={handleDismiss}
       />
+      <Overlay.Body>
+        <Form>
+          <FlexBox
+            alignItems={AlignItems.Center}
+            direction={FlexDirection.Column}
+            margin={ComponentSize.Large}
+          >
+            <Form.Element label="Description">
+              <Input
+                placeholder="Describe this new token"
+                value={description}
+                onChange={handleInputChange}
+                testID="custom-api-token-input"
+              />
+            </Form.Element>
+          </FlexBox>
+        </Form>
+      </Overlay.Body>
     </Overlay.Container>
   )
 }