test(e2e): drag and drop cell (#18585)

* test(e2e): drag and drop cell

* chore: update prettier to 1.19.1

* chore(e2e): find cell by substring

* test(e2e): fix element selectors

* fix: prettier

ui/cypress/e2e/dashboardsView.test.ts

@@ -49,33 +49,54 @@ describe('Dashboard', () => {
       })
     })
 
-    // View cell
+    // Create View cell
     cy.getByTestID('add-cell--button').click()
     cy.getByTestID('save-cell--button').click()
-    cy.getByTestID('cell--view-empty').should('have.length', 1)
+    cy.getByTestID('cell-context--toggle').click()
+    cy.getByTestID('cell-context--configure').click()
 
-    // toggle presentation mode
-    cy.getByTestID('presentation-mode-toggle').click()
-    // ensure a notification is sent when toggling to presentation mode
-    cy.getByTestID('notification-primary--children').should('exist')
-    // escape to toggle the presentation mode off
-    cy.get('body').trigger('keyup', {
-      keyCode: 27,
-      code: 'Escape',
-      key: 'Escape',
+    // Rename View cell
+    const xyCellName = 'Line Graph'
+    cy.getByTestID('overlay').within(() => {
+      cy.getByTestID('page-title').click()
+      cy.getByTestID('renamable-page-title--input')
+        .clear()
+        .type(xyCellName)
+      cy.getByTestID('save-cell--button').click()
     })
 
-    // Remove view cell
-    cy.getByTestID('cell-context--toggle').click()
-    cy.getByTestID('cell-context--delete').click()
-    cy.getByTestID('cell-context--delete-confirm').click()
+    const xyCell = `cell ${xyCellName}`
 
-    cy.getByTestID('empty-state').should('exist')
+    cy.getByTestID(xyCell).within(([$cell]) => {
+      const prevWidth = $cell.clientWidth
+      const prevHeight = $cell.clientHeight
+      cy.wrap(prevWidth).as('prevWidth')
+      cy.wrap(prevHeight).as('prevHeight')
+    })
 
+    // Resize Cell
+    cy.getByTestID(xyCell).within(() => {
+      cy.get('.react-resizable-handle')
+        .trigger('mousedown', {which: 1, force: true})
+        .trigger('mousemove', {
+          clientX: 800,
+          clientY: 800,
+          force: true,
+        })
+        .trigger('mouseup', {force: true})
+    })
+
+    cy.getByTestID(xyCell).within(([$cell]) => {
+      const currWidth = $cell.clientWidth
+      const currHeight = $cell.clientHeight
+      cy.get('@prevWidth').should('be.lessThan', currWidth)
+      cy.get('@prevHeight').should('be.lessThan', currHeight)
+    })
+
+    // Note cell
     const noteText = 'this is a note cell'
     const headerPrefix = '#'
 
-    // Note cell
     cy.getByTestID('add-note--button').click()
     cy.getByTestID('note-editor--overlay').within(() => {
       cy.get('.CodeMirror').type(`${headerPrefix} ${noteText}`)
@@ -91,41 +112,54 @@ describe('Dashboard', () => {
     cy.getByTestID('cancel-note--button').click()
     cy.getByTestID('note-editor--overlay').should('not.exist')
 
-    cy.getByTestID('add-note--button').click()
-    cy.getByTestID('note-editor--overlay').should('be.visible')
-    cy.get('.cf-overlay--dismiss').click()
-    cy.getByTestID('note-editor--overlay').should('not.exist')
+    const noteCell = 'cell--view-empty markdown'
+    cy.getByTestID(noteCell).contains(noteText)
+    cy.getByTestID(noteCell).should('not.contain', headerPrefix)
 
-    cy.getByTestID('cell--view-empty').contains(noteText)
-    cy.getByTestID('cell--view-empty').should('not.contain', headerPrefix)
-
-    cy.getByTestID('cell--view-empty').within(([$cell]) => {
-      const prevWidth = $cell.clientWidth
-      const prevHeight = $cell.clientHeight
-      cy.wrap(prevWidth).as('prevWidth')
-      cy.wrap(prevHeight).as('prevHeight')
-    })
-
-    // Resize Cell
-    cy.get('.react-resizable-handle')
+    // Drag and Drop Cell
+    cy.getByTestID('cell--draggable Note')
       .trigger('mousedown', {which: 1, force: true})
-      .trigger('mousemove', {
-        clientX: 800,
-        clientY: 800,
-      })
+      .trigger('mousemove', {clientX: -800, clientY: -800, force: true})
       .trigger('mouseup', {force: true})
 
-    cy.getByTestID('cell--view-empty').within(([$cell]) => {
-      const currWidth = $cell.clientWidth
-      const currHeight = $cell.clientHeight
-      cy.get('@prevWidth').should('be.lessThan', currWidth)
-      cy.get('@prevHeight').should('be.lessThan', currHeight)
+    cy.getByTestID(noteCell).within(([$cell]) => {
+      const noteTop = $cell.getBoundingClientRect().top
+      const noteBottom = $cell.getBoundingClientRect().bottom
+      cy.wrap(noteTop).as('noteTop')
+      cy.wrap(noteBottom).as('noteBottom')
     })
 
-    // Remove note cell
+    cy.getByTestID(xyCell).within(([$cell]) => {
+      const xyCellTop = $cell.getBoundingClientRect().top
+      const xyCellBottom = $cell.getBoundingClientRect().bottom
+      cy.get('@noteTop').should('be.lessThan', xyCellTop)
+      cy.get('@noteBottom').should('be.lessThan', xyCellBottom)
+    })
+
+    // toggle presentation mode
+    cy.getByTestID('presentation-mode-toggle').click()
+    // ensure a notification is sent when toggling to presentation mode
+    cy.getByTestID('notification-primary--children').should('exist')
+    // escape to toggle the presentation mode off
+    cy.get('body').trigger('keyup', {
+      keyCode: 27,
+      code: 'Escape',
+      key: 'Escape',
+    })
+
+    // Remove Note cell
+    cy.getByTestID('cell-context--toggle')
+      .first()
+      .click()
+    cy.getByTestID('cell-context--delete').click()
+    cy.getByTestID('cell-context--delete-confirm').click()
+
+    // Remove View cell
     cy.getByTestID('cell-context--toggle').click()
     cy.getByTestID('cell-context--delete').click()
     cy.getByTestID('cell-context--delete-confirm').click()
+
+    cy.getByTestID('empty-state').should('exist')
   })
 
   // fix for https://github.com/influxdata/influxdb/issues/15239
@@ -141,9 +175,9 @@ describe('Dashboard', () => {
     // Add an empty cell
     cy.getByTestID('add-cell--button').click()
     cy.getByTestID('save-cell--button').click()
-    cy.getByTestID('cell--view-empty').should('be.visible')
+    cy.getByTestIDSubStr('cell--view-empty').should('be.visible')
 
-    cy.getByTestID('cell--view-empty')
+    cy.getByTestIDSubStr('cell--view-empty')
       .invoke('text')
       .then(cellContent => {
         // cellContent is yielded as a cutesy phrase from src/shared/copy/cell
@@ -156,7 +190,7 @@ describe('Dashboard', () => {
         cy.getByTestID('cancel-cell-edit--button').click()
 
         // Cell content should remain
-        cy.getByTestID('cell--view-empty').contains(cellContent)
+        cy.getByTestIDSubStr('cell--view-empty').contains(cellContent)
       })
   })
 
@@ -461,7 +495,7 @@ describe('Dashboard', () => {
       .eq(1)
       .should('contain', 'Loading')
 
-    cy.getByTestID('cell--view-empty')
+    cy.getByTestIDSubStr('cell--view-empty')
 
     // But selecting a nonempty bucket should load some data
     cy.getByTestID('variable-dropdown--button')
@@ -493,7 +527,7 @@ describe('Dashboard', () => {
     })
   })
 
-  it("Should return empty table parameters when query hasn't been submitted", () => {
+  it("should return empty table parameters when query hasn't been submitted", () => {
     cy.get('@org').then(({id: orgID}: Organization) => {
       cy.createDashboard(orgID).then(({body}) => {
         cy.fixture('routes').then(({orgs}) => {

ui/package.json

@@ -114,7 +114,7 @@
     "mocha-junit-reporter": "^1.18.0",
     "mutation-observer": "^1.0.3",
     "optimize-css-assets-webpack-plugin": "^5.0.3",
-    "prettier": "^1.16.4",
+    "prettier": "^1.19.1",
     "raw-loader": "^4.0.0",
     "sass": "^1.22.7",
     "sass-loader": "^7.1.0",

ui/src/App.tsx

@@ -63,7 +63,4 @@ const mstp = (state: AppState): StateProps => {
   return {inPresentationMode, currentPage, theme}
 }
 
-export default connect<StateProps, {}>(
-  mstp,
-  null
-)(withRouter(App))
+export default connect<StateProps, {}>(mstp, null)(withRouter(App))

ui/src/Logout.tsx

@@ -46,8 +46,5 @@ const mdtp = {
 }
 
 export default ErrorHandling(
-  connect<{}, DispatchProps>(
-    null,
-    mdtp
-  )(withRouter<WithRouterProps>(Logout))
+  connect<{}, DispatchProps>(null, mdtp)(withRouter<WithRouterProps>(Logout))
 )

ui/src/Signin.tsx

@@ -94,9 +94,7 @@ export class Signin extends PureComponent<Props, State> {
 
       if (CLOUD) {
         const url = new URL(
-          `${window.location.origin}${CLOUD_SIGNIN_PATHNAME}?redirectTo=${
-            window.location.href
-          }`
+          `${window.location.origin}${CLOUD_SIGNIN_PATHNAME}?redirectTo=${window.location.href}`
         )
         setToLocalStorage('redirectTo', window.location.href)
         window.location.href = url.href
@@ -123,7 +121,4 @@ const mdtp: DispatchProps = {
   notify: notifyAction,
 }
 
-export default connect(
-  null,
-  mdtp
-)(withRouter(Signin))
+export default connect(null, mdtp)(withRouter(Signin))

ui/src/alerting/components/AlertingIndex.tsx

@@ -124,7 +124,4 @@ const mstp = ({cloud: {limits}}: AppState): StateProps => {
   }
 }
 
-export default connect(
-  mstp,
-  null
-)(AlertingIndex)
+export default connect(mstp, null)(AlertingIndex)

ui/src/alerting/components/builder/ThresholdConditions.tsx

@@ -33,7 +33,4 @@ const mstp = ({
   return {thresholds}
 }
 
-export default connect<StateProps, {}, {}>(
-  mstp,
-  null
-)(ThresholdConditions)
+export default connect<StateProps, {}, {}>(mstp, null)(ThresholdConditions)

ui/src/alerting/utils/customCheck.ts

@@ -97,9 +97,7 @@ export function createCheckQueryFromAlertBuilder(
 
     const dataRange = `  |> range(start: -check.every)`
 
-    const aggregateFunction = `  |> aggregateWindow(every: check.every, fn: ${
-      builderConfig.functions[0].name
-    }, createEmpty: false)`
+    const aggregateFunction = `  |> aggregateWindow(every: check.every, fn: ${builderConfig.functions[0].name}, createEmpty: false)`
 
     const dataDefinition = [
       dataFrom,

ui/src/authorizations/components/TokenRow.tsx

@@ -115,7 +115,4 @@ const mdtp = {
   onUpdate: updateAuthorization,
 }
 
-export default connect<{}, DispatchProps, OwnProps>(
-  null,
-  mdtp
-)(TokenRow)
+export default connect<{}, DispatchProps, OwnProps>(null, mdtp)(TokenRow)

ui/src/authorizations/components/TokensTab.tsx

@@ -157,7 +157,4 @@ const mstp = (state: AppState) => ({
   tokens: getAll<Authorization>(state, ResourceType.Authorizations),
 })
 
-export default connect<StateProps, {}, {}>(
-  mstp,
-  null
-)(withRouter(TokensTab))
+export default connect<StateProps, {}, {}>(mstp, null)(withRouter(TokensTab))

ui/src/authorizations/containers/TokensIndex.tsx

@@ -44,7 +44,4 @@ class TokensIndex extends Component<StateProps> {
 
 const mstp = (state: AppState) => ({org: getOrg(state)})
 
-export default connect<StateProps, {}, {}>(
-  mstp,
-  null
-)(TokensIndex)
+export default connect<StateProps, {}, {}>(mstp, null)(TokensIndex)

ui/src/buckets/components/BucketCardMeta.tsx

@@ -81,7 +81,4 @@ const mdtp: DispatchProps = {
   notify: notifyAction,
 }
 
-export default connect<{}, DispatchProps, OwnProps>(
-  null,
-  mdtp
-)(BucketCardMeta)
+export default connect<{}, DispatchProps, OwnProps>(null, mdtp)(BucketCardMeta)

ui/src/buckets/components/BucketsTab.tsx

@@ -217,7 +217,4 @@ const mdtp: DispatchProps = {
   checkBucketLimits: checkBucketLimitsAction,
 }
 
-export default connect<StateProps, DispatchProps, {}>(
-  mstp,
-  mdtp
-)(BucketsTab)
+export default connect<StateProps, DispatchProps, {}>(mstp, mdtp)(BucketsTab)

ui/src/buckets/components/RenameBucketForm.tsx

@@ -164,8 +164,5 @@ const mdtp: DispatchProps = {
 
 // state mapping requires router
 export default withRouter(
-  connect<StateProps, DispatchProps>(
-    mstp,
-    mdtp
-  )(RenameBucketForm)
+  connect<StateProps, DispatchProps>(mstp, mdtp)(RenameBucketForm)
 )

ui/src/buckets/containers/BucketsIndex.tsx

@@ -86,7 +86,4 @@ const mstp = (state: AppState) => {
   return {org, limitedResources}
 }
 
-export default connect<StateProps, {}, {}>(
-  mstp,
-  null
-)(BucketsIndex)
+export default connect<StateProps, {}, {}>(mstp, null)(BucketsIndex)

ui/src/checks/components/CheckCard.tsx

@@ -197,7 +197,4 @@ const mdtp: DispatchProps = {
   onNotify: notify,
 }
 
-export default connect<{}, DispatchProps>(
-  null,
-  mdtp
-)(withRouter(CheckCard))
+export default connect<{}, DispatchProps>(null, mdtp)(withRouter(CheckCard))

ui/src/checks/components/CheckConditionsCard.tsx

@@ -59,7 +59,4 @@ const mstp = ({alertBuilder: {type}}: AppState): StateProps => {
   return {checkType: type}
 }
 
-export default connect<StateProps, {}, {}>(
-  mstp,
-  null
-)(CheckConditionsCard)
+export default connect<StateProps, {}, {}>(mstp, null)(CheckConditionsCard)

ui/src/checks/components/CheckEOHeader.tsx

@@ -163,7 +163,4 @@ const mdtp: DispatchProps = {
   setActiveTab: setActiveTab,
 }
 
-export default connect<StateProps, DispatchProps>(
-  mstp,
-  mdtp
-)(CheckEOHeader)
+export default connect<StateProps, DispatchProps>(mstp, mdtp)(CheckEOHeader)

ui/src/checks/components/CheckMatchingRulesCard.tsx

@@ -171,7 +171,4 @@ const mstp = (state: AppState): StateProps => {
   return {tags, orgID, queryResults: files}
 }
 
-export default connect<StateProps>(
-  mstp,
-  null
-)(CheckMatchingRulesCard)
+export default connect<StateProps>(mstp, null)(CheckMatchingRulesCard)

ui/src/checks/components/CheckMetaCard.tsx

@@ -120,7 +120,4 @@ const mdtp: DispatchProps = {
   onEditTagSetByIndex: editTagSetByIndex,
 }
 
-export default connect<StateProps, DispatchProps, {}>(
-  mstp,
-  mdtp
-)(CheckMetaCard)
+export default connect<StateProps, DispatchProps, {}>(mstp, mdtp)(CheckMetaCard)

ui/src/checks/components/ChecksColumn.tsx

@@ -114,7 +114,4 @@ const mstp = (state: AppState) => {
   }
 }
 
-export default connect<StateProps>(
-  mstp,
-  null
-)(withRouter(ChecksColumn))
+export default connect<StateProps>(mstp, null)(withRouter(ChecksColumn))

ui/src/clientLibraries/components/ClientArduinoOverlay.tsx

@@ -95,7 +95,4 @@ const mstp = (state: AppState): StateProps => {
 }
 
 export {ClientArduinoOverlay}
-export default connect<StateProps, {}, Props>(
-  mstp,
-  null
-)(ClientArduinoOverlay)
+export default connect<StateProps, {}, Props>(mstp, null)(ClientArduinoOverlay)

ui/src/clientLibraries/components/ClientCSharpOverlay.tsx

@@ -110,7 +110,4 @@ const mstp = (state: AppState): StateProps => {
 }
 
 export {ClientCSharpOverlay}
-export default connect<StateProps, {}, Props>(
-  mstp,
-  null
-)(ClientCSharpOverlay)
+export default connect<StateProps, {}, Props>(mstp, null)(ClientCSharpOverlay)

ui/src/clientLibraries/components/ClientGoOverlay.tsx

@@ -83,7 +83,4 @@ const mstp = (state: AppState): StateProps => {
 }
 
 export {ClientGoOverlay}
-export default connect<StateProps, {}, Props>(
-  mstp,
-  null
-)(ClientGoOverlay)
+export default connect<StateProps, {}, Props>(mstp, null)(ClientGoOverlay)

ui/src/clientLibraries/components/ClientJSOverlay.tsx

@@ -81,7 +81,4 @@ const mstp = (state: AppState): StateProps => {
 }
 
 export {ClientJSOverlay}
-export default connect<StateProps, {}, Props>(
-  mstp,
-  null
-)(ClientJSOverlay)
+export default connect<StateProps, {}, Props>(mstp, null)(ClientJSOverlay)

ui/src/clientLibraries/components/ClientJavaOverlay.tsx

@@ -101,7 +101,4 @@ const mstp = (state: AppState): StateProps => {
 }
 
 export {ClientJavaOverlay}
-export default connect<StateProps, {}, Props>(
-  mstp,
-  null
-)(ClientJavaOverlay)
+export default connect<StateProps, {}, Props>(mstp, null)(ClientJavaOverlay)

ui/src/clientLibraries/components/ClientKotlinOverlay.tsx

@@ -80,7 +80,4 @@ const mstp = (state: AppState): StateProps => {
 }
 
 export {ClientKotlinOverlay}
-export default connect<StateProps, {}, Props>(
-  mstp,
-  null
-)(ClientKotlinOverlay)
+export default connect<StateProps, {}, Props>(mstp, null)(ClientKotlinOverlay)

ui/src/clientLibraries/components/ClientPHPOverlay.tsx

@@ -97,7 +97,4 @@ const mstp = (state: AppState): StateProps => {
 }
 
 export {ClientPHPOverlay}
-export default connect<StateProps, {}, Props>(
-  mstp,
-  null
-)(ClientPHPOverlay)
+export default connect<StateProps, {}, Props>(mstp, null)(ClientPHPOverlay)

ui/src/clientLibraries/components/ClientPythonOverlay.tsx

@@ -97,7 +97,4 @@ const mstp = (state: AppState): StateProps => {
 }
 
 export {ClientPythonOverlay}
-export default connect<StateProps, {}, Props>(
-  mstp,
-  null
-)(ClientPythonOverlay)
+export default connect<StateProps, {}, Props>(mstp, null)(ClientPythonOverlay)

ui/src/clientLibraries/components/ClientRubyOverlay.tsx

@@ -100,7 +100,4 @@ const mstp = (state: AppState): StateProps => {
 }
 
 export {ClientRubyOverlay}
-export default connect<StateProps, {}, Props>(
-  mstp,
-  null
-)(ClientRubyOverlay)
+export default connect<StateProps, {}, Props>(mstp, null)(ClientRubyOverlay)

ui/src/clientLibraries/components/ClientScalaOverlay.tsx

@@ -83,7 +83,4 @@ const mstp = (state: AppState): StateProps => {
 }
 
 export {ClientScalaOverlay}
-export default connect<StateProps, {}, Props>(
-  mstp,
-  null
-)(ClientScalaOverlay)
+export default connect<StateProps, {}, Props>(mstp, null)(ClientScalaOverlay)

ui/src/cloud/apis/demodata.ts

@@ -110,9 +110,7 @@ export const getNormalizedDemoDataBucket = async (
 
   if (resp.status !== 200) {
     throw new Error(
-      `Request for demo data bucket membership did not succeed: ${
-        resp.data.message
-      }`
+      `Request for demo data bucket membership did not succeed: ${resp.data.message}`
     )
   }
 

ui/src/cloud/components/LimitChecker.tsx

@@ -26,7 +26,4 @@ const mdtp: DispatchProps = {
   getReadWriteCardinalityLimits: getReadWriteCardinalityLimitsAction,
 }
 
-export default connect<{}, DispatchProps, {}>(
-  null,
-  mdtp
-)(LimitChecker)
+export default connect<{}, DispatchProps, {}>(null, mdtp)(LimitChecker)

ui/src/cloud/components/RateLimitAlert.tsx

@@ -72,9 +72,7 @@ class RateLimitAlert extends PureComponent<Props> {
   }
 
   private get message(): string {
-    return `Hey there, it looks like you have exceeded your plan's ${
-      this.resourceName
-    } limits.${this.additionalMessage}`
+    return `Hey there, it looks like you have exceeded your plan's ${this.resourceName} limits.${this.additionalMessage}`
   }
 
   private get additionalMessage(): string {
@@ -114,7 +112,4 @@ const mstp = (state: AppState): StateProps => {
   }
 }
 
-export default connect<StateProps, {}>(
-  mstp,
-  null
-)(RateLimitAlert)
+export default connect<StateProps, {}>(mstp, null)(RateLimitAlert)

ui/src/cloud/constants/index.ts

@@ -9,7 +9,9 @@ export const ASSET_LIMIT_ERROR_TEXT =
   'Oops. It looks like you have exceeded the asset limits allowed as part of your plan. If you would like to increase your limits, reach out to support@influxdata.com.'
 
 const WebsiteMonitoringDashboardTemplate = async (name: string) => {
-  const websiteMonitoringTemplate = await import(/* webpackPrefetch: true */ 'src/cloud/constants/websiteMonitoringTemplate')
+  const websiteMonitoringTemplate = await import(
+    /* webpackPrefetch: true */ 'src/cloud/constants/websiteMonitoringTemplate'
+  )
   websiteMonitoringTemplate.default.content.data.attributes.name = name
   return websiteMonitoringTemplate.default
 }

ui/src/dashboards/components/Dashboard.tsx

@@ -59,7 +59,4 @@ const mstp = (state: AppState): StateProps => {
   }
 }
 
-export default connect<StateProps, {}, OwnProps>(
-  mstp,
-  null
-)(DashboardComponent)
+export default connect<StateProps, {}, OwnProps>(mstp, null)(DashboardComponent)

ui/src/dashboards/components/GetTimeRange.tsx

@@ -59,8 +59,5 @@ const mdtp: DispatchProps = {
 }
 
 export default withRouter(
-  connect<StateProps, DispatchProps>(
-    mstp,
-    mdtp
-  )(GetTimeRange)
+  connect<StateProps, DispatchProps>(mstp, mdtp)(GetTimeRange)
 )

ui/src/dashboards/components/variablesControlBar/VariablesControlBar.tsx

@@ -175,8 +175,5 @@ const mstp = (state: AppState): StateProps => {
 }
 
 export default withDragDropContext(
-  connect<StateProps, DispatchProps>(
-    mstp,
-    mdtp
-  )(VariablesControlBar)
+  connect<StateProps, DispatchProps>(mstp, mdtp)(VariablesControlBar)
 )

ui/src/dataExplorer/components/DataExplorer.tsx

@@ -51,7 +51,4 @@ const mdtp: DispatchProps = {
   onSetBuilderBucketIfExists: setBuilderBucketIfExists,
 }
 
-export default connect<{}, DispatchProps, {}>(
-  null,
-  mdtp
-)(DataExplorer)
+export default connect<{}, DispatchProps, {}>(null, mdtp)(DataExplorer)

ui/src/dataExplorer/components/SaveAsCellForm.tsx

@@ -249,7 +249,4 @@ const mdtp: DispatchProps = {
   notify,
 }
 
-export default connect<StateProps, DispatchProps>(
-  mstp,
-  mdtp
-)(SaveAsCellForm)
+export default connect<StateProps, DispatchProps>(mstp, mdtp)(SaveAsCellForm)

ui/src/dataLoaders/actions/dataLoaders.ts

@@ -440,9 +440,7 @@ export const generateTelegrafToken = (configID: string) => async (
     const token = {
       name: `${telegraf.name} token`,
       orgID,
-      description: `WRITE ${bucketName} bucket / READ ${
-        telegraf.name
-      } telegraf config`,
+      description: `WRITE ${bucketName} bucket / READ ${telegraf.name} telegraf config`,
       permissions,
     }
 

ui/src/dataLoaders/components/TelegrafEditor.tsx

@@ -110,7 +110,4 @@ const mstp = (state: AppState): StateProps => {
   }
 }
 
-export default connect<StateProps, {}>(
-  mstp,
-  null
-)(TelegrafEditor)
+export default connect<StateProps, {}>(mstp, null)(TelegrafEditor)

ui/src/dataLoaders/components/TelegrafEditorMonaco.tsx

@@ -51,9 +51,7 @@ class TelegrafEditorMonaco extends PureComponent<Props> {
       return
     }
 
-    const matches: Array<
-      monacoEditor.editor.FindMatch
-    > = this._editor
+    const matches: Array<monacoEditor.editor.FindMatch> = this._editor
       .getModel()
       .findMatches(PLUGIN_REGEX as any, false, true, false, null, true)
 
@@ -151,11 +149,6 @@ const mdtp: DispatchProps = {
   onSetText: setText,
 }
 
-export default connect<StateProps, DispatchProps>(
-  mstp,
-  mdtp,
-  null,
-  {
-    withRef: true,
-  }
-)(TelegrafEditorMonaco)
+export default connect<StateProps, DispatchProps>(mstp, mdtp, null, {
+  withRef: true,
+})(TelegrafEditorMonaco)

ui/src/dataLoaders/components/TelegrafEditorSidebar.tsx

@@ -39,10 +39,7 @@ const mstp_2 = (state: AppState): PluginStateProps => {
   }
 }
 
-const AllPluginList = connect<PluginStateProps, {}>(
-  mstp_2,
-  null
-)(PluginList)
+const AllPluginList = connect<PluginStateProps, {}>(mstp_2, null)(PluginList)
 
 interface StateProps {
   filter: string

ui/src/dataLoaders/components/collectorsWizard/CollectorsWizard.tsx

@@ -18,7 +18,9 @@ const TelegrafEditor = Loadable({
 })
 const CollectorsStepSwitcher = Loadable({
   loader: () =>
-    import('src/dataLoaders/components/collectorsWizard/CollectorsStepSwitcher'),
+    import(
+      'src/dataLoaders/components/collectorsWizard/CollectorsStepSwitcher'
+    ),
   loading() {
     return spinner
   },

ui/src/dataLoaders/components/collectorsWizard/configure/PluginConfigForm.tsx

@@ -52,9 +52,7 @@ export class PluginConfigForm extends PureComponent<Props> {
               <a
                 target="_blank"
                 data-testid="docs-link"
-                href={`https://github.com/influxdata/telegraf/tree/master/plugins/inputs/${
-                  telegrafPlugin.name
-                }`}
+                href={`https://github.com/influxdata/telegraf/tree/master/plugins/inputs/${telegrafPlugin.name}`}
               >
                 Documentation
               </a>

ui/src/dataLoaders/components/collectorsWizard/configure/PluginConfigSwitcher.tsx

@@ -59,7 +59,4 @@ const mstp = ({
   telegrafPlugins,
 })
 
-export default connect<StateProps>(
-  mstp,
-  null
-)(PluginConfigSwitcher)
+export default connect<StateProps>(mstp, null)(PluginConfigSwitcher)

ui/src/dataLoaders/components/lineProtocolWizard/verify/StatusIndicator.tsx

@@ -75,7 +75,4 @@ const mstp = ({
   errorMessage: lpError,
 })
 
-export default connect<StateProps, {}, {}>(
-  mstp,
-  null
-)(StatusIndicator)
+export default connect<StateProps, {}, {}>(mstp, null)(StatusIndicator)

ui/src/eventViewer/components/EventTable.tsx

@@ -136,7 +136,4 @@ const mdtp: DispatchProps = {
   notify: notifyAction,
 }
 
-export default connect<{}, DispatchProps, OwnProps>(
-  null,
-  mdtp
-)(EventTable)
+export default connect<{}, DispatchProps, OwnProps>(null, mdtp)(EventTable)

ui/src/external/monaco.flux.syntax.ts

@@ -5,11 +5,11 @@ const LANGID = 'flux'
 async function addSyntax() {
   await register(LANGID, async () => ({
     format: 'json',
-    content: await import(/* webpackPrefetch: 0 */ 'src/external/flux.tmLanguage.json').then(
-      data => {
-        return JSON.stringify(data)
-      }
-    ),
+    content: await import(
+      /* webpackPrefetch: 0 */ 'src/external/flux.tmLanguage.json'
+    ).then(data => {
+      return JSON.stringify(data)
+    }),
   }))
 
   window.monaco.languages.setLanguageConfiguration(LANGID, {

ui/src/external/monaco.markdown.syntax.ts

@@ -4,11 +4,11 @@ const LANGID = 'markdown'
 
 register(LANGID, async () => ({
   format: 'json',
-  content: await import(/* webpackPrefetch: 0 */ 'src/external/markdown.tmLanguage.json').then(
-    data => {
-      return JSON.stringify(data)
-    }
-  ),
+  content: await import(
+    /* webpackPrefetch: 0 */ 'src/external/markdown.tmLanguage.json'
+  ).then(data => {
+    return JSON.stringify(data)
+  }),
 }))
 
 export default LANGID

ui/src/external/monaco.onigasm.ts

@@ -9,11 +9,11 @@ const grammarDefs = {}
 
 const DEFAULT_DEF = async () => ({
   format: 'json',
-  content: await import(/* webpackPrefetch: 0 */ 'src/external/plaintext.tmLanguage.json').then(
-    data => {
-      return JSON.stringify(data)
-    }
-  ),
+  content: await import(
+    /* webpackPrefetch: 0 */ 'src/external/plaintext.tmLanguage.json'
+  ).then(data => {
+    return JSON.stringify(data)
+  }),
 })
 
 // NOTE: this comes from the monaco-editor-textmate package

ui/src/external/monaco.toml.syntax.ts

@@ -4,11 +4,11 @@ const LANGID = 'toml'
 
 register(LANGID, async () => ({
   format: 'json',
-  content: await import(/* webpackPrefetch: 0 */ 'src/external/toml.tmLanguage.json').then(
-    data => {
-      return JSON.stringify(data)
-    }
-  ),
+  content: await import(
+    /* webpackPrefetch: 0 */ 'src/external/toml.tmLanguage.json'
+  ).then(data => {
+    return JSON.stringify(data)
+  }),
 }))
 
 export default LANGID

ui/src/labels/components/LabelsTab.tsx

@@ -216,7 +216,4 @@ const mdtp: DispatchProps = {
   deleteLabel: deleteLabel,
 }
 
-export default connect(
-  mstp,
-  mdtp
-)(Labels)
+export default connect(mstp, mdtp)(Labels)

ui/src/labels/containers/LabelsIndex.tsx

@@ -44,7 +44,4 @@ class LabelsIndex extends PureComponent<StateProps> {
 
 const mstp = (state: AppState) => ({org: getOrg(state)})
 
-export default connect<StateProps, {}, {}>(
-  mstp,
-  null
-)(LabelsIndex)
+export default connect<StateProps, {}, {}>(mstp, null)(LabelsIndex)

ui/src/me/components/DashboardsList.tsx

@@ -107,7 +107,4 @@ const mstp = (state: AppState): StateProps => {
   }
 }
 
-export default connect<StateProps, {}, {}>(
-  mstp,
-  null
-)(DashboardList)
+export default connect<StateProps, {}, {}>(mstp, null)(DashboardList)

ui/src/me/components/GettingStarted.tsx

@@ -134,9 +134,4 @@ const mstp = (state: AppState): StateProps => {
   }
 }
 
-export default withRouter<{}>(
-  connect(
-    mstp,
-    null
-  )(GettingStarted)
-)
+export default withRouter<{}>(connect(mstp, null)(GettingStarted))

ui/src/me/containers/MePage.tsx

@@ -78,7 +78,4 @@ const mstp = (state: AppState): StateProps => {
   return {me}
 }
 
-export default connect<StateProps>(
-  mstp,
-  null
-)(MePage)
+export default connect<StateProps>(mstp, null)(MePage)

ui/src/members/containers/MembersIndex.tsx

@@ -60,7 +60,4 @@ const mstp = (state: AppState, props: Props) => {
   }
 }
 
-export default connect<StateProps>(
-  mstp,
-  null
-)(withRouter<{}>(MembersIndex))
+export default connect<StateProps>(mstp, null)(withRouter<{}>(MembersIndex))

ui/src/notebooks/components/minimap/MiniMap.tsx

@@ -64,7 +64,4 @@ const mstp = (state: AppState): StateProps => {
   }
 }
 
-export default connect<StateProps, {}>(
-  mstp,
-  null
-)(MiniMap)
+export default connect<StateProps, {}>(mstp, null)(MiniMap)

ui/src/notebooks/components/minimap/MiniMapToggle.tsx

@@ -64,7 +64,4 @@ const mdtp: DispatchProps = {
   handleSetNotebookMiniMapState: setNotebookMiniMapState,
 }
 
-export default connect<StateProps, DispatchProps>(
-  mstp,
-  mdtp
-)(MiniMapToggle)
+export default connect<StateProps, DispatchProps>(mstp, mdtp)(MiniMapToggle)

ui/src/notifications/endpoints/components/EditEndpointOverlay.tsx

@@ -91,8 +91,5 @@ const mstp = (state: AppState, {params}: Props): StateProps => {
 }
 
 export default withRouter<Props>(
-  connect<StateProps, DispatchProps, Props>(
-    mstp,
-    mdtp
-  )(EditEndpointOverlay)
+  connect<StateProps, DispatchProps, Props>(mstp, mdtp)(EditEndpointOverlay)
 )

ui/src/notifications/endpoints/components/EndpointOverlay.reducer.ts

@@ -41,9 +41,7 @@ export const reducer = (
             return {
               ...baseProps,
               type: 'pagerduty',
-              clientURL: `${location.origin}/orgs/${
-                baseProps.orgID
-              }/alert-history`,
+              clientURL: `${location.origin}/orgs/${baseProps.orgID}/alert-history`,
               routingKey: '',
             }
           case 'http':

ui/src/notifications/rules/components/RuleCard.tsx

@@ -194,7 +194,4 @@ const mdtp: DispatchProps = {
   onCloneRule: cloneRule,
 }
 
-export default connect<{}, DispatchProps>(
-  null,
-  mdtp
-)(withRouter(RuleCard))
+export default connect<{}, DispatchProps>(null, mdtp)(withRouter(RuleCard))

ui/src/onboarding/components/SigninForm.tsx

@@ -157,7 +157,4 @@ const mdtp = {
   notify: notifyAction,
 }
 
-export default connect(
-  mstp,
-  mdtp
-)(withRouter(SigninForm))
+export default connect(mstp, mdtp)(withRouter(SigninForm))

ui/src/onboarding/containers/LoginPageContents.tsx

@@ -263,7 +263,4 @@ const mdtp: DispatchProps = {
   onNotify: notify,
 }
 
-export default connect<{}, DispatchProps>(
-  null,
-  mdtp
-)(LoginPageContents)
+export default connect<{}, DispatchProps>(null, mdtp)(LoginPageContents)

ui/src/onboarding/containers/SigninPage.tsx

@@ -88,7 +88,4 @@ class SigninPage extends PureComponent<Props, State> {
 const mdtp: DispatchProps = {
   dismissAllNotifications,
 }
-export default connect(
-  null,
-  mdtp
-)(withRouter(SigninPage))
+export default connect(null, mdtp)(withRouter(SigninPage))

ui/src/organizations/components/OrgProfileTab.tsx

@@ -132,7 +132,4 @@ const mstp = (state: AppState) => {
   }
 }
 
-export default connect<StateProps>(
-  mstp,
-  null
-)(withRouter(OrgProfileTab))
+export default connect<StateProps>(mstp, null)(withRouter(OrgProfileTab))

ui/src/organizations/containers/OrgProfilePage.tsx

@@ -45,7 +45,4 @@ class OrgProfilePage extends Component<StateProps> {
 
 const mstp = (state: AppState) => ({org: getOrg(state)})
 
-export default connect<StateProps, {}, {}>(
-  mstp,
-  null
-)(OrgProfilePage)
+export default connect<StateProps, {}, {}>(mstp, null)(OrgProfilePage)

ui/src/pageLayout/components/RenamablePageTitle.tsx

@@ -73,7 +73,10 @@ const RenamablePageTitle: FC<Props> = ({
   if (isEditing) {
     return (
       <ClickOutside onClickOutside={handleStopEditing}>
-        <div className={renamablePageTitleClass}>
+        <div
+          className={renamablePageTitleClass}
+          data-testid="renamable-page-title"
+        >
           <Input
             maxLength={maxLength}
             autoFocus={true}
@@ -84,6 +87,7 @@ const RenamablePageTitle: FC<Props> = ({
             onKeyDown={handleKeyDown}
             className="renamable-page-title--input"
             value={workingName}
+            testID="renamable-page-title--input"
           />
         </div>
       </ClickOutside>

ui/src/pageLayout/components/UserWidget.tsx

@@ -152,7 +152,4 @@ const mdtp = {
   handleDismissOverlay: dismissOverlay,
 }
 
-export default connect<StateProps, DispatchProps>(
-  mstp,
-  mdtp
-)(UserWidget)
+export default connect<StateProps, DispatchProps>(mstp, mdtp)(UserWidget)

ui/src/resources/components/GetResource.tsx

@@ -88,7 +88,4 @@ const mdtp = {
   getDashboard: getDashboard,
 }
 
-export default connect<StateProps, DispatchProps, {}>(
-  mstp,
-  mdtp
-)(GetResource)
+export default connect<StateProps, DispatchProps, {}>(mstp, mdtp)(GetResource)

ui/src/resources/components/GetResources.tsx

@@ -181,7 +181,4 @@ const mdtp = {
   getEndpoints: getEndpoints,
 }
 
-export default connect<StateProps, DispatchProps, {}>(
-  mstp,
-  mdtp
-)(GetResources)
+export default connect<StateProps, DispatchProps, {}>(mstp, mdtp)(GetResources)

ui/src/scrapers/containers/ScrapersIndex.tsx

@@ -48,7 +48,4 @@ class ScrapersIndex extends Component<StateProps> {
 
 const mstp = (state: AppState) => ({org: getOrg(state)})
 
-export default connect<StateProps, {}, {}>(
-  mstp,
-  null
-)(ScrapersIndex)
+export default connect<StateProps, {}, {}>(mstp, null)(ScrapersIndex)

ui/src/shared/components/CheckPlot.tsx

@@ -161,7 +161,4 @@ const mdtp: DispatchProps = {
   onUpdateThresholds: updateThresholds,
 }
 
-export default connect<{}, DispatchProps, {}>(
-  null,
-  mdtp
-)(CheckPlot)
+export default connect<{}, DispatchProps, {}>(null, mdtp)(CheckPlot)

ui/src/shared/components/CopyButton.tsx

@@ -84,7 +84,4 @@ const mdtp: DispatchProps = {
   notify: notifyAction,
 }
 
-export default connect<{}, DispatchProps, OwnProps>(
-  null,
-  mdtp
-)(CopyButton)
+export default connect<{}, DispatchProps, OwnProps>(null, mdtp)(CopyButton)

ui/src/shared/components/DeleteDataForm/DeleteDataForm.tsx

@@ -299,7 +299,4 @@ const mdtp: DispatchProps = {
   setTimeRange,
 }
 
-export default connect<StateProps, DispatchProps>(
-  mstp,
-  mdtp
-)(DeleteDataForm)
+export default connect<StateProps, DispatchProps>(mstp, mdtp)(DeleteDataForm)

ui/src/shared/components/DeleteDataForm/FilterRow.tsx

@@ -123,7 +123,4 @@ const FilterRow: FC<Props & DispatchProps> = ({
 
 const mdtp = {setValuesByKey}
 
-export default connect<{}, DispatchProps>(
-  null,
-  mdtp
-)(FilterRow)
+export default connect<{}, DispatchProps>(null, mdtp)(FilterRow)

ui/src/shared/components/ExportOverlay.tsx

@@ -160,7 +160,4 @@ const mdtp: DispatchProps = {
   onCreateTemplateFromResource: createTemplateFromResource,
 }
 
-export default connect<{}, DispatchProps, OwnProps>(
-  null,
-  mdtp
-)(ExportOverlay)
+export default connect<{}, DispatchProps, OwnProps>(null, mdtp)(ExportOverlay)

ui/src/shared/components/FilterList.tsx

@@ -13,7 +13,7 @@ const mstp = (state: AppState) => {
 // Typing a generic connected component proved to be tricky:
 // https://github.com/piotrwitek/react-redux-typescript-guide/issues/55
 export default function FilterListContainer<T>() {
-  return connect<StateProps>(mstp)(FilterList as new (
-    props: OwnProps<T>
-  ) => FilterList<T>)
+  return connect<StateProps>(mstp)(
+    FilterList as new (props: OwnProps<T>) => FilterList<T>
+  )
 }

ui/src/shared/components/TimeZoneDropdown.tsx

@@ -46,7 +46,4 @@ const mstp = (state: AppState): StateProps => {
 
 const mdtp = {onSetTimeZone: setTimeZone}
 
-export default connect<StateProps, DispatchProps>(
-  mstp,
-  mdtp
-)(TimeZoneDropdown)
+export default connect<StateProps, DispatchProps>(mstp, mdtp)(TimeZoneDropdown)

ui/src/shared/components/TokenCodeSnippet.tsx

@@ -87,7 +87,4 @@ const mdtp: DispatchProps = {
   onGenerateTelegrafToken: generateTelegrafToken,
 }
 
-export default connect<{}, DispatchProps>(
-  null,
-  mdtp
-)(TokenCodeSnippet)
+export default connect<{}, DispatchProps>(null, mdtp)(TokenCodeSnippet)

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

@@ -46,7 +46,10 @@ class CellComponent extends Component<Props, State> {
             onCSVDownload={this.handleCSVDownload}
           />
         </CellHeader>
-        <div className="cell--view" data-testid="cell--view-empty">
+        <div
+          className="cell--view"
+          data-testid={`cell--view-empty ${view?.properties?.type}`}
+        >
           {this.view}
         </div>
       </>
@@ -114,7 +117,4 @@ const mstp = (state: AppState, ownProps: OwnProps): StateProps => {
   return {view}
 }
 
-export default connect<StateProps, {}, OwnProps>(
-  mstp,
-  null
-)(CellComponent)
+export default connect<StateProps, {}, OwnProps>(mstp, null)(CellComponent)

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

@@ -178,8 +178,5 @@ const mdtp: DispatchProps = {
 }
 
 export default withRouter<OwnProps>(
-  connect<{}, DispatchProps>(
-    null,
-    mdtp
-  )(CellContext)
+  connect<{}, DispatchProps>(null, mdtp)(CellContext)
 )

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

@@ -12,7 +12,7 @@ interface Props {
 const CellHeader: FunctionComponent<Props> = ({name, note, children}) => {
   return (
     <div className="cell--header">
-      <div className="cell--draggable">
+      <div className="cell--draggable" data-testid={`cell--draggable ${name}`}>
         <div className="cell--dot-grid" />
         <div className="cell--dot-grid" />
         <div className="cell--dot-grid" />

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

@@ -44,7 +44,7 @@ type Props = StateProps & OwnProps & DispatchProps
 @ErrorHandling
 class Cells extends Component<Props> {
   public render() {
-    const {cells, manualRefresh} = this.props
+    const {views, cells, manualRefresh} = this.props
 
     return (
       <Grid
@@ -60,7 +60,11 @@ class Cells extends Component<Props> {
         isResizable
       >
         {fastMap(cells, cell => (
-          <div key={cell.id} className="cell">
+          <div
+            key={cell.id}
+            className="cell"
+            data-testid={`cell ${views[cell.id]?.name}`}
+          >
             <CellComponent cell={cell} manualRefresh={manualRefresh} />
             <GradientBorder />
           </div>
@@ -144,7 +148,4 @@ const mdtp: DispatchProps = {
   updateCells: updateCells,
 }
 
-export default connect<StateProps, DispatchProps, OwnProps>(
-  mstp,
-  mdtp
-)(Cells)
+export default connect<StateProps, DispatchProps, OwnProps>(mstp, mdtp)(Cells)

ui/src/shared/components/notifications/Notifications.tsx

@@ -93,7 +93,4 @@ const mdtp: DispatchProps = {
   dismissNotification: dismissNotificationAction,
 }
 
-export default connect(
-  mapStateToProps,
-  mdtp
-)(Notifications)
+export default connect(mapStateToProps, mdtp)(Notifications)

ui/src/shared/utils/duration.test.tsx

@@ -10,13 +10,31 @@ import {SELECTABLE_TIME_RANGES} from 'src/shared/constants/timeRanges'
 
 const TEST_CASES = [
   ['1d', [{magnitude: 1, unit: 'd'}]],
-  ['1mo10d', [{magnitude: 1, unit: 'mo'}, {magnitude: 10, unit: 'd'}]],
-  ['1h15m', [{magnitude: 1, unit: 'h'}, {magnitude: 15, unit: 'm'}]],
+  [
+    '1mo10d',
+    [
+      {magnitude: 1, unit: 'mo'},
+      {magnitude: 10, unit: 'd'},
+    ],
+  ],
+  [
+    '1h15m',
+    [
+      {magnitude: 1, unit: 'h'},
+      {magnitude: 15, unit: 'm'},
+    ],
+  ],
   ['10y', [{magnitude: 10, unit: 'y'}]],
   ['2w', [{magnitude: 2, unit: 'w'}]],
   ['123410012ms', [{magnitude: 123410012, unit: 'ms'}]],
   ['30m', [{magnitude: 30, unit: 'm'}]],
-  ['30m1ms', [{magnitude: 30, unit: 'm'}, {magnitude: 1, unit: 'ms'}]],
+  [
+    '30m1ms',
+    [
+      {magnitude: 30, unit: 'm'},
+      {magnitude: 1, unit: 'ms'},
+    ],
+  ],
   ['999us', [{magnitude: 999, unit: 'us'}]],
   ['999µs', [{magnitude: 999, unit: 'µs'}]],
   ['999ns', [{magnitude: 999, unit: 'ns'}]],

ui/src/tasks/containers/TaskEditPage.tsx

@@ -162,7 +162,4 @@ const mdtp: DispatchProps = {
   clearTask,
 }
 
-export default connect<StateProps, DispatchProps, {}>(
-  mstp,
-  mdtp
-)(TaskEditPage)
+export default connect<StateProps, DispatchProps, {}>(mstp, mdtp)(TaskEditPage)

ui/src/tasks/containers/TaskPage.tsx

@@ -154,7 +154,4 @@ const mdtp: DispatchProps = {
   cancel,
 }
 
-export default connect<StateProps, DispatchProps, {}>(
-  mstp,
-  mdtp
-)(TaskPage)
+export default connect<StateProps, DispatchProps, {}>(mstp, mdtp)(TaskPage)

ui/src/telegrafs/components/CollectorCard.tsx

@@ -72,9 +72,7 @@ class CollectorRow extends PureComponent<Props & WithRouterProps> {
             Bucket: {collector.metadata.buckets.join(', ')}
           </span>
           <Link
-            to={`/orgs/${org.id}/load-data/telegrafs/${
-              collector.id
-            }/instructions`}
+            to={`/orgs/${org.id}/load-data/telegrafs/${collector.id}/instructions`}
             data-testid="setup-instructions-link"
           >
             Setup Instructions

ui/src/telegrafs/components/CollectorList.tsx

@@ -96,10 +96,7 @@ const mdtp: DispatchProps = {
   onDeleteTelegraf: deleteTelegraf,
 }
 
-connect<StateProps, DispatchProps, OwnProps>(
-  mstp,
-  mdtp
-)(CollectorList)
+connect<StateProps, DispatchProps, OwnProps>(mstp, mdtp)(CollectorList)
 
 type FilteredOwnProps = OwnProps & {
   searchTerm: string

ui/src/telegrafs/components/TelegrafConfigOverlay.tsx

@@ -106,7 +106,4 @@ const mstp = (state: AppState): StateProps => {
   }
 }
 
-export default connect<StateProps, {}, {}>(
-  mstp,
-  null
-)(TelegrafConfigOverlay)
+export default connect<StateProps, {}, {}>(mstp, null)(TelegrafConfigOverlay)

ui/src/telegrafs/components/TelegrafOutputOverlay.tsx

@@ -182,7 +182,4 @@ const mstp = (state: AppState): StateProps => {
 }
 
 export {TelegrafOutputOverlay}
-export default connect<StateProps, {}, {}>(
-  mstp,
-  null
-)(TelegrafOutputOverlay)
+export default connect<StateProps, {}, {}>(mstp, null)(TelegrafOutputOverlay)

ui/src/templates/actions/thunks.ts

@@ -232,7 +232,10 @@ export const addTemplateLabelsAsync = (
   labels: Label[]
 ) => async (dispatch: Dispatch<Action>): Promise<void> => {
   try {
-    await client.templates.addLabels(templateID, labels.map(l => l.id))
+    await client.templates.addLabels(
+      templateID,
+      labels.map(l => l.id)
+    )
     const item = await client.templates.get(templateID)
     const templateSummary = normalize<
       TemplateSummary,
@@ -254,7 +257,10 @@ export const removeTemplateLabelsAsync = (
   labels: Label[]
 ) => async (dispatch: Dispatch<Action>): Promise<void> => {
   try {
-    await client.templates.removeLabels(templateID, labels.map(l => l.id))
+    await client.templates.removeLabels(
+      templateID,
+      labels.map(l => l.id)
+    )
     const item = await client.templates.get(templateID)
     const templateSummary = normalize<
       TemplateSummary,

ui/src/templates/components/TemplatesPage.tsx

@@ -217,7 +217,4 @@ const mstp = (state: AppState): StateProps => ({
   templates: getAll(state, ResourceType.Templates),
 })
 
-export default connect<StateProps>(
-  mstp,
-  null
-)(TemplatesPage)
+export default connect<StateProps>(mstp, null)(TemplatesPage)

ui/src/timeMachine/components/CustomizeCheckQueryButton.tsx

@@ -32,7 +32,4 @@ const mdtp: DispatchProps = {
   onLoadCustomCheckQueryState: loadCustomCheckQueryState,
 }
 
-export default connect<{}, DispatchProps>(
-  null,
-  mdtp
-)(CustomizeCheckQueryButton)
+export default connect<{}, DispatchProps>(null, mdtp)(CustomizeCheckQueryButton)

ui/src/timeMachine/components/FunctionSelector.tsx

@@ -196,7 +196,4 @@ const mdtp = {
   onSelectAggregateWindow: selectAggregateWindow,
 }
 
-export default connect<StateProps, DispatchProps>(
-  mstp,
-  mdtp
-)(FunctionSelector)
+export default connect<StateProps, DispatchProps>(mstp, mdtp)(FunctionSelector)

ui/src/timeMachine/components/QueryTabs.tsx

@@ -68,7 +68,4 @@ const mdtp = {
   onAddQuery: addQuery,
 }
 
-export default connect<StateProps, DispatchProps>(
-  mstp,
-  mdtp
-)(QueryTabs)
+export default connect<StateProps, DispatchProps>(mstp, mdtp)(QueryTabs)

ui/src/timeMachine/components/SubmitCheckQueryButton.tsx

@@ -93,7 +93,4 @@ const mdtp = {
   onExecuteCheckQuery: executeCheckQuery,
 }
 
-export default connect<StateProps, DispatchProps>(
-  mstp,
-  mdtp
-)(SubmitQueryButton)
+export default connect<StateProps, DispatchProps>(mstp, mdtp)(SubmitQueryButton)