Add the ability to edit token's description

CHANGELOG.md

@@ -1,6 +1,7 @@
 ## v2.0.0-alpha.8 [unreleased]
 
 ### Features
+1. [13024](https://github.com/influxdata/influxdb/pull/13024): Add the ability to edit token's description
 
 ### Bug Fixes
 

ui/src/authorizations/actions/index.ts

@@ -60,7 +60,9 @@ interface EditAuthorization {
   }
 }
 
-export const editLabel = (authorization: Authorization): EditAuthorization => ({
+export const editAuthorization = (
+  authorization: Authorization
+): EditAuthorization => ({
   type: 'EDIT_AUTH',
   payload: {authorization},
 })
@@ -106,12 +108,9 @@ export const updateAuthorization = (authorization: Authorization) => async (
   dispatch: Dispatch<Action>
 ) => {
   try {
-    const label = await client.authorizations.update(
-      authorization.id,
-      authorization
-    )
+    await client.authorizations.update(authorization.id, authorization)
 
-    dispatch(editLabel(label))
+    dispatch(getAuthorizations())
   } catch (e) {
     console.error(e)
     dispatch(notify(authorizationUpdateFailed(authorization.id)))

ui/src/me/components/account/TokenRow.tsx

@@ -11,6 +11,7 @@ import {
 // Components
 import {Alignment, ComponentSize, SlideToggle} from '@influxdata/clockface'
 import {IndexList, ComponentSpacer, ConfirmationButton} from 'src/clockface'
+import EditableName from 'src/shared/components/EditableName'
 
 // Types
 import {Authorization} from '@influxdata/influx'
@@ -29,18 +30,17 @@ type Props = DispatchProps & OwnProps
 
 class TokenRow extends PureComponent<Props> {
   public render() {
-    const {description, id} = this.props.auth
+    const {description} = this.props.auth
 
     return (
       <IndexList.Row>
         <IndexList.Cell>
-          <a
-            href="#"
-            onClick={this.handleClickDescription}
-            data-testid={`token-description-${id}`}
-          >
-            {description}
-          </a>
+          <EditableName
+            onUpdate={this.handleUpdateName}
+            name={description}
+            noNameString="DEFAULT_BUCKET_NAME"
+            onEditName={this.handleClickDescription}
+          />
         </IndexList.Cell>
         <IndexList.Cell>
           <SlideToggle
@@ -87,6 +87,11 @@ class TokenRow extends PureComponent<Props> {
     const {onClickDescription, auth} = this.props
     onClickDescription(auth.id)
   }
+
+  private handleUpdateName = async (value: string) => {
+    const {auth, onUpdate} = this.props
+    await onUpdate({...auth, description: value})
+  }
 }
 
 const mdtp = {