fix(ui/dashboards): prevent default on anchor tag (#14434)

fix(ui/editable_name): update anchor to Link tag

ui/src/alerting/components/CheckCard.tsx

@@ -32,17 +32,12 @@ const CheckCard: FunctionComponent<Props> = ({
   check,
   updateCheck,
   deleteCheck,
-  router,
   params: {orgID},
 }) => {
   const onUpdateName = (name: string) => {
     updateCheck({id: check.id, name})
   }
 
-  const onClickName = () => {
-    router.push(`/orgs/${orgID}/checks/${check.id}`)
-  }
-
   const onDelete = () => {
     deleteCheck(check.id)
   }
@@ -66,7 +61,7 @@ const CheckCard: FunctionComponent<Props> = ({
       name={() => (
         <ResourceList.EditableName
           onUpdate={onUpdateName}
-          onClick={onClickName}
+          hrefValue={`/orgs/${orgID}/checks/${check.id}`}
           name={check.name}
           noNameString={DEFAULT_CHECK_NAME}
           parentTestID="check-card--name"

ui/src/alerting/components/NotificationRuleCard.tsx

@@ -35,17 +35,12 @@ const NotificationRuleCard: FunctionComponent<Props> = ({
   notificationRule,
   updateNotificationRule,
   deleteNotificationRule,
-  router,
   params: {orgID},
 }) => {
   const onUpdateName = (name: string) => {
     updateNotificationRule({id: notificationRule.id, name})
   }
 
-  const onClickName = () => {
-    router.push(`/orgs/${orgID}/notificationRules/${notificationRule.id}`)
-  }
-
   const onDelete = () => {
     deleteNotificationRule(notificationRule.id)
   }
@@ -69,7 +64,7 @@ const NotificationRuleCard: FunctionComponent<Props> = ({
       name={() => (
         <ResourceList.EditableName
           onUpdate={onUpdateName}
-          onClick={onClickName}
+          hrefValue={`/orgs/${orgID}/notificationRules/${notificationRule.id}`}
           name={notificationRule.name}
           noNameString={DEFAULT_NOTIFICATION_RULE_NAME}
           parentTestID="notificationRule-card--name"

ui/src/authorizations/components/TokenRow.tsx

@@ -1,5 +1,5 @@
 // Libraries
-import React, {PureComponent} from 'react'
+import React, {PureComponent, MouseEvent} from 'react'
 import {connect} from 'react-redux'
 
 // Actions
@@ -82,8 +82,11 @@ class TokenRow extends PureComponent<Props> {
     this.props.onDelete(id, description)
   }
 
-  private handleClickDescription = () => {
+  private handleClickDescription = (e: MouseEvent<HTMLAnchorElement>) => {
     const {onClickDescription, auth} = this.props
+
+    e.preventDefault()
+
     onClickDescription(auth.id)
   }
 

ui/src/clockface/components/resource_list/ResourceEditableName.tsx

@@ -1,6 +1,7 @@
 // Libraries
 import React, {Component, KeyboardEvent, ChangeEvent, MouseEvent} from 'react'
 import classnames from 'classnames'
+import {Link} from 'react-router'
 
 // Components
 import {Input, SpinnerContainer, TechnoSpinner} from '@influxdata/clockface'
@@ -16,7 +17,7 @@ import {ErrorHandling} from 'src/shared/decorators/errors'
 interface Props {
   onUpdate: (name: string) => void
   name: string
-  onClick?: (e: MouseEvent<HTMLAnchorElement>) => void
+  onClick?: (e: MouseEvent) => void
   placeholder?: string
   noNameString: string
   parentTestID: string
@@ -65,9 +66,9 @@ class ResourceEditableName extends Component<Props, State> {
           loading={this.state.loading}
           spinnerComponent={<TechnoSpinner diameterPixels={20} />}
         >
-          <a href={hrefValue} onClick={this.handleClick}>
+          <Link to={hrefValue} onClick={this.handleClick}>
             <span>{name || noNameString}</span>
-          </a>
+          </Link>
         </SpinnerContainer>
         <div
           className="resource-editable-name--toggle"
@@ -106,8 +107,9 @@ class ResourceEditableName extends Component<Props, State> {
     }
   }
 
-  private handleClick = (e: MouseEvent<HTMLAnchorElement>) => {
+  private handleClick = (e: MouseEvent) => {
     const {onClick} = this.props
+
     if (onClick) {
       onClick(e)
     }

ui/src/dashboards/components/dashboard_index/DashboardCard.tsx

@@ -49,7 +49,12 @@ type Props = PassedProps & DispatchProps & StateProps & WithRouterProps
 
 class DashboardCard extends PureComponent<Props> {
   public render() {
-    const {dashboard, onFilterChange, labels} = this.props
+    const {
+      dashboard,
+      onFilterChange,
+      labels,
+      params: {orgID},
+    } = this.props
     const {id} = dashboard
 
     return (
@@ -59,6 +64,7 @@ class DashboardCard extends PureComponent<Props> {
         name={() => (
           <ResourceList.EditableName
             onUpdate={this.handleUpdateDashboard}
+            hrefValue={`/orgs/${orgID}/dashboards/${dashboard.id}`}
             onClick={this.handleClickDashboard}
             name={dashboard.name}
             noNameString={DEFAULT_DASHBOARD_NAME}
@@ -133,16 +139,9 @@ class DashboardCard extends PureComponent<Props> {
   }
 
   private handleClickDashboard = () => {
-    const {
+    const {onResetViews} = this.props
-      router,
-      dashboard,
-      onResetViews,
-      params: {orgID},
-    } = this.props
 
     onResetViews()
-
-    router.push(`/orgs/${orgID}/dashboards/${dashboard.id}`)
   }
 
   private handleUpdateDescription = (description: string): void => {

ui/src/tasks/components/TaskCard.tsx

@@ -116,7 +116,7 @@ export class TaskCard extends PureComponent<Props & WithRouterProps> {
     )
   }
 
-  private handleNameClick = (e: MouseEvent<HTMLAnchorElement>) => {
+  private handleNameClick = (e: MouseEvent) => {
     e.preventDefault()
 
     this.props.onSelect(this.props.task)

ui/src/telegrafs/components/CollectorCard.tsx

@@ -146,8 +146,9 @@ class CollectorRow extends PureComponent<Props & WithRouterProps> {
     }
   }
 
-  private handleNameClick = (e: MouseEvent<HTMLAnchorElement>) => {
+  private handleNameClick = (e: MouseEvent) => {
     e.preventDefault()
+
     this.handleOpenConfig()
   }
 

ui/src/templates/components/TemplateCard.tsx

@@ -191,8 +191,9 @@ class TemplateCard extends PureComponent<Props & WithRouterProps> {
     onClone(id)
   }
 
-  private handleNameClick = (e: MouseEvent<HTMLAnchorElement>) => {
+  private handleNameClick = (e: MouseEvent) => {
     e.preventDefault()
+
     this.handleViewTemplate()
   }