Add the ability to enable or disable a token

influxdata · Mar 25, 2019 · 1033d5e · 1033d5e
1 parent 7ecb7a2
commit 1033d5e
Showing 1 changed file with 33 additions and 4 deletions.
diff --git a/ui/src/me/components/account/TokenRow.tsx b/ui/src/me/components/account/TokenRow.tsx
@@ -3,10 +3,13 @@ import React, {PureComponent} from 'react'
 import {connect} from 'react-redux'
 
 // Actions
-import {deleteAuthorization} from 'src/authorizations/actions'
+import {
+  deleteAuthorization,
+  updateAuthorization,
+} from 'src/authorizations/actions'
 
 // Components
-import {Alignment, ComponentSize} from '@influxdata/clockface'
+import {Alignment, ComponentSize, SlideToggle} from '@influxdata/clockface'
 import {IndexList, ComponentSpacer, ConfirmationButton} from 'src/clockface'
 
 // Types
@@ -19,13 +22,14 @@ interface OwnProps {
 
 interface DispatchProps {
   onDelete: typeof deleteAuthorization
+  onUpdate: typeof updateAuthorization
 }
 
 type Props = DispatchProps & OwnProps
 
 class TokenRow extends PureComponent<Props> {
   public render() {
-    const {description, status, id} = this.props.auth
+    const {description, id} = this.props.auth
 
     return (
       <IndexList.Row>
@@ -38,7 +42,13 @@ class TokenRow extends PureComponent<Props> {
             {description}
           </a>
         </IndexList.Cell>
-        <IndexList.Cell>{status}</IndexList.Cell>
+        <IndexList.Cell>
+          <SlideToggle
+            active={this.isTokenEnbled}
+            size={ComponentSize.ExtraSmall}
+            onChange={this.changeToggle}
+          />
+        </IndexList.Cell>
         <IndexList.Cell alignment={Alignment.Right} revealOnHover={true}>
           <ComponentSpacer align={Alignment.Right}>
             <ConfirmationButton
@@ -53,6 +63,24 @@ class TokenRow extends PureComponent<Props> {
     )
   }
 
+  private get isTokenEnbled(): boolean {
+    const {auth} = this.props
+    if (auth.status === Authorization.StatusEnum.Active) {
+      return true
+    }
+    return false
+  }
+
+  private changeToggle = () => {
+    const {auth, onUpdate} = this.props
+    if (auth.status === Authorization.StatusEnum.Active) {
+      auth.status = Authorization.StatusEnum.Inactive
+    } else {
+      auth.status = Authorization.StatusEnum.Active
+    }
+    onUpdate(auth)
+  }
+
   private handleDelete = () => {
     const {id, description} = this.props.auth
     this.props.onDelete(id, description)
@@ -66,6 +94,7 @@ class TokenRow extends PureComponent<Props> {
 
 const mdtp = {
   onDelete: deleteAuthorization,
+  onUpdate: updateAuthorization,
 }
 
 export default connect<{}, DispatchProps, OwnProps>(