Merge pull request #12855 from influxdata/fix/dashboard-reload

fix(ui): Prevent full page reload when clicking a dashboard

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

@@ -19,7 +19,7 @@ import 'src/clockface/components/resource_list/ResourceName.scss'
 interface PassedProps {
   onUpdate: (name: string) => void
   name: string
-  onEditName?: (e?: MouseEvent<HTMLAnchorElement>) => void
+  onClick?: (e: MouseEvent<HTMLAnchorElement>) => void
   placeholder?: string
   noNameString: string
 }
@@ -29,7 +29,6 @@ interface DefaultProps {
   buttonTestID?: string
   inputTestID?: string
   hrefValue?: string
-  onClick?: () => void
 }
 
 type Props = PassedProps & DefaultProps
@@ -62,7 +61,6 @@ class ResourceName extends Component<Props, State> {
   public render() {
     const {
       name,
-      onEditName,
       hrefValue,
       noNameString,
       parentTestID,
@@ -75,7 +73,7 @@ class ResourceName extends Component<Props, State> {
           loading={this.state.loading}
           spinnerComponent={<TechnoSpinner diameterPixels={20} />}
         >
-          <a href={hrefValue} onClick={onEditName}>
+          <a href={hrefValue} onClick={this.handleClick}>
             <span>{name || noNameString}</span>
           </a>
         </SpinnerContainer>
@@ -116,6 +114,13 @@ class ResourceName extends Component<Props, State> {
     }
   }
 
+  private handleClick = (e: MouseEvent<HTMLAnchorElement>) => {
+    const {onClick} = this.props
+    if (onClick) {
+      onClick(e)
+    }
+  }
+
   private handleStartEditing = (): void => {
     this.setState({isEditing: true})
   }

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

@@ -60,8 +60,8 @@ class DashboardCard extends PureComponent<Props> {
         name={() => (
           <ResourceList.Name
             onUpdate={this.handleUpdateDashboard}
+            onClick={this.handleClickDashboard}
             name={dashboard.name}
-            hrefValue={`/dashboards/${dashboard.id}`}
             noNameString={DEFAULT_DASHBOARD_NAME}
             parentTestID="dashboard-card--name"
             buttonTestID="dashboard-card--name-button"
@@ -142,6 +142,12 @@ class DashboardCard extends PureComponent<Props> {
     }
   }
 
+  private handleClickDashboard = () => {
+    const {router, dashboard} = this.props
+
+    router.push(`/dashboards/${dashboard.id}`)
+  }
+
   private handleUpdateDescription = (description: string): void => {
     const {onUpdateDashboard} = this.props
     const dashboard = {...this.props.dashboard, description}

ui/src/shared/components/cells/Cell.tsx

@@ -8,15 +8,17 @@ import CellHeader from 'src/shared/components/cells/CellHeader'
 import CellContext from 'src/shared/components/cells/CellContext'
 import ViewComponent from 'src/shared/components/cells/View'
 import {ErrorHandling} from 'src/shared/decorators/errors'
+import {SpinnerContainer, TechnoSpinner} from '@influxdata/clockface'
 
 // Utils
 import {getView} from 'src/dashboards/selectors'
 
 // Types
-import {TimeRange} from 'src/types'
+import {TimeRange, RemoteDataState} from 'src/types'
 import {AppState, ViewType, View, Cell} from 'src/types/v2'
 
 interface StateProps {
+  viewsStatus: RemoteDataState
   view: View
 }
 
@@ -102,17 +104,23 @@ class CellComponent extends Component<Props> {
       onZoom,
       view,
       onEditCell,
+      viewsStatus,
     } = this.props
 
     return (
-      <ViewComponent
-        view={view}
-        onZoom={onZoom}
-        timeRange={timeRange}
-        autoRefresh={autoRefresh}
-        manualRefresh={manualRefresh}
-        onEditCell={onEditCell}
-      />
+      <SpinnerContainer
+        loading={viewsStatus}
+        spinnerComponent={<TechnoSpinner />}
+      >
+        <ViewComponent
+          view={view}
+          onZoom={onZoom}
+          timeRange={timeRange}
+          autoRefresh={autoRefresh}
+          manualRefresh={manualRefresh}
+          onEditCell={onEditCell}
+        />
+      </SpinnerContainer>
     )
   }
 
@@ -121,9 +129,13 @@ class CellComponent extends Component<Props> {
   }
 }
 
-const mstp = (state: AppState, ownProps: OwnProps): StateProps => ({
-  view: getView(state, ownProps.cell.id),
-})
+const mstp = (state: AppState, ownProps: OwnProps): StateProps => {
+  const {
+    views: {status},
+  } = state
+
+  return {view: getView(state, ownProps.cell.id), viewsStatus: status}
+}
 
 export default connect<StateProps, {}, OwnProps>(
   mstp,

ui/src/tasks/components/TaskCard.tsx

@@ -60,7 +60,7 @@ export class TaskCard extends PureComponent<Props & WithRouterProps> {
         contextMenu={() => this.contextMenu}
         name={() => (
           <ResourceList.Name
-            onEditName={this.handleNameClick}
+            onClick={this.handleNameClick}
             onUpdate={this.handleRenameTask}
             name={task.name}
             noNameString={DEFAULT_TASK_NAME}

ui/src/templates/components/TemplateCard.tsx

@@ -28,7 +28,7 @@ export class TemplateCard extends PureComponent<Props & WithRouterProps> {
         contextMenu={() => this.contextMenu}
         name={() => (
           <ResourceList.Name
-            onEditName={this.handleNameClick}
+            onClick={this.handleNameClick}
             onUpdate={this.doNothing}
             name={template.meta.name}
             noNameString={DEFAULT_TEMPLATE_NAME}