chore(ui): upgrade clockface (#14578)

* chore: upgrade clockface and fix type errors

* fix(clockface): types for TextArea onChange callback

ui/package.json

@@ -157,7 +157,7 @@
     "webpack-merge": "^4.2.1"
   },
   "dependencies": {
-    "@influxdata/clockface": "0.0.19",
+    "@influxdata/clockface": "0.0.23",
     "@influxdata/flux-parser": "^0.3.0",
     "@influxdata/giraffe": "0.16.2",
     "@influxdata/influx": "0.5.5",

ui/src/alerting/components/CheckCard.tsx

@@ -84,7 +84,7 @@ const CheckCard: FunctionComponent<Props> = ({
         />
       }
       description={
-        <ResourceCard.Description
+        <ResourceCard.EditableDescription
           onUpdate={onUpdateDescription}
           description={check.description}
           placeholder={`Describe ${check.name}`}

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

@@ -1,5 +1,5 @@
 // Libraries
-import React, {FC} from 'react'
+import React, {FC, ChangeEvent} from 'react'
 import {connect} from 'react-redux'
 
 // Components
@@ -48,7 +48,8 @@ const CheckMetaCard: FC<Props> = ({updateCurrentCheck, check}) => {
     updateCurrentCheck({name: e.target.value})
   }
 
-  const handleChangeMessage = (statusMessageTemplate: string) => {
+  const handleChangeMessage = (e: ChangeEvent<HTMLTextAreaElement>) => {
+    const statusMessageTemplate = e.target.value
     updateCurrentCheck({statusMessageTemplate})
   }
 

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

@@ -67,7 +67,7 @@ class DashboardCard extends PureComponent<Props> {
           />
         }
         description={
-          <ResourceCard.Description
+          <ResourceCard.EditableDescription
             onUpdate={this.handleUpdateDescription}
             description={dashboard.description}
             placeholder={`Describe ${dashboard.name}`}

ui/src/dataLoaders/components/lineProtocolWizard/configure/TabBody.tsx

@@ -80,9 +80,9 @@ export default class extends PureComponent<Props> {
     this.props.onURLChange(value)
   }
 
-  private handleTextChange = async (lpBody: string) => {
+  private handleTextChange = async (e: ChangeEvent<HTMLTextAreaElement>) => {
     const {setLineProtocolBody} = this.props
-    setLineProtocolBody(lpBody)
+    setLineProtocolBody(e.target.value)
   }
 
   private handleSetLineProtocol = (lpBody: string) => {

ui/src/shared/components/DragAndDrop.tsx

@@ -10,7 +10,7 @@ import {
 interface Props {
   fileTypesToAccept?: string
   containerClass?: string
-  handleSubmit: (uploadContent: string | ArrayBuffer, fileName: string) => void
+  handleSubmit: (uploadContent: string) => void
   submitText: string
   submitOnDrop: boolean
   submitOnUpload: boolean
@@ -171,9 +171,9 @@ class DragAndDrop extends PureComponent<Props, State> {
 
   private handleSubmit = () => {
     const {handleSubmit} = this.props
-    const {uploadContent, fileName} = this.state
+    const {uploadContent} = this.state
 
-    handleSubmit(uploadContent, fileName)
+    handleSubmit(uploadContent as string)
   }
 
   private handleFileClick = (e: any): void => {

ui/src/shared/components/ImportOverlay.tsx

@@ -1,5 +1,5 @@
 // Libraries
-import React, {PureComponent} from 'react'
+import React, {PureComponent, ChangeEvent} from 'react'
 import {withRouter, WithRouterProps} from 'react-router'
 
 // Components
@@ -102,14 +102,18 @@ class ImportOverlay extends PureComponent<Props, State> {
     }
     if (selectedImportOption === ImportOption.Paste) {
       return (
-        <TextArea
-          value={importContent}
-          onChange={this.handleSetImportContent}
-        />
+        <TextArea value={importContent} onChange={this.handleChangeTextArea} />
       )
     }
   }
 
+  private handleChangeTextArea = (
+    e: ChangeEvent<HTMLTextAreaElement>
+  ): void => {
+    const importContent = e.target.value
+    this.handleSetImportContent(importContent)
+  }
+
   private get submitButton(): JSX.Element {
     const {resourceName} = this.props
     const {selectedImportOption, importContent} = this.state
@@ -142,7 +146,7 @@ class ImportOverlay extends PureComponent<Props, State> {
   }
 
   private clearImportContent = () => {
-    this.handleSetImportContent('')
+    this.setState({importContent: ''})
   }
 
   private onDismiss = () => {
@@ -156,7 +160,7 @@ class ImportOverlay extends PureComponent<Props, State> {
     this.setState({selectedImportOption})
   }
 
-  private handleSetImportContent = (importContent: string): void => {
+  private handleSetImportContent = (importContent: string) => {
     this.setState({importContent})
   }
 }

ui/src/telegrafs/components/CollectorCard.tsx

@@ -67,7 +67,7 @@ class CollectorRow extends PureComponent<Props & WithRouterProps> {
           />
         }
         description={
-          <ResourceCard.Description
+          <ResourceCard.EditableDescription
             onUpdate={this.handleUpdateDescription}
             description={collector.description}
             placeholder={`Describe ${collector.name}`}

ui/src/templates/components/StaticTemplateCard.tsx

@@ -85,12 +85,8 @@ class StaticTemplateCard extends PureComponent<Props & WithRouterProps> {
     const {template} = this.props
     const description = _.get(template, 'content.data.attributes.description')
 
-    // TODO: Replace this with the view only description component when it is available
     return (
-      <ResourceCard.Description
-        description={description || 'No description'}
-        onUpdate={() => {}}
-      />
+      <ResourceCard.Description description={description || 'No description'} />
     )
   }
 

ui/src/templates/components/TemplateCard.tsx

@@ -119,7 +119,7 @@ class TemplateCard extends PureComponent<Props & WithRouterProps> {
     const name = _.get(template, 'meta.name', '')
 
     return (
-      <ResourceCard.Description
+      <ResourceCard.EditableDescription
         onUpdate={this.handleUpdateTemplateDescription}
         description={description}
         placeholder={`Describe ${name} Template`}

ui/src/variables/components/CSVVariableBuilder.tsx

@@ -1,4 +1,4 @@
-import React, {PureComponent} from 'react'
+import React, {PureComponent, ChangeEvent} from 'react'
 import Papa from 'papaparse'
 import _ from 'lodash'
 
@@ -87,7 +87,8 @@ export default class CSVTemplateBuilder extends PureComponent<Props, State> {
     onChange(update)
   }
 
-  private handleChange = (csv: string): void => {
+  private handleChange = (e: ChangeEvent<HTMLTextAreaElement>): void => {
+    const csv = e.target.value
     this.setState({csv})
   }
 

ui/src/variables/components/MapVariableBuilder.tsx

@@ -1,4 +1,4 @@
-import React, {PureComponent} from 'react'
+import React, {PureComponent, ChangeEvent} from 'react'
 import _ from 'lodash'
 import {connect} from 'react-redux'
 
@@ -134,7 +134,8 @@ class MapVariableBuilder extends PureComponent<Props, State> {
     onChange(update)
   }
 
-  private handleChange = (templateValuesString: string): void => {
+  private handleChange = (e: ChangeEvent<HTMLTextAreaElement>): void => {
+    const templateValuesString = e.target.value
     this.setState({templateValuesString})
   }
 

ui/yarn.lock

@@ -1090,10 +1090,10 @@
   resolved "https://registry.yarnpkg.com/@iarna/toml/-/toml-2.2.3.tgz#f060bf6eaafae4d56a7dac618980838b0696e2ab"
   integrity sha512-FmuxfCuolpLl0AnQ2NHSzoUKWEJDFl63qXjzdoWBVyFCXzMGm1spBzk7LeHNoVCiWCF7mRVms9e6jEV9+MoPbg==
 
-"@influxdata/clockface@0.0.19":
-  version "0.0.19"
-  resolved "https://registry.yarnpkg.com/@influxdata/clockface/-/clockface-0.0.19.tgz#eb1beaceaf677c88a54f5f923b97ab5bc67b8173"
-  integrity sha512-MI3Qx4rzZWQIHRpAi0TRQ4h2Wn9f9mUftCN4fNydifqY5iFKcy9qeQFBDkLPEtQz+DcKhdNYBWGrsmS8B2EUfw==
+"@influxdata/clockface@0.0.23":
+  version "0.0.23"
+  resolved "https://registry.yarnpkg.com/@influxdata/clockface/-/clockface-0.0.23.tgz#10fd83daa2f1a177d97ae874af0f8d8313aaa3c8"
+  integrity sha512-SR+1V8mrtQ8zLlIENUKSF5bwFj++02sgEq1MxvlAeq5fUPEsHYRlO1JgnWLlnbS2W/njnuHFDnLQnTB2E6qb6Q==
 
 "@influxdata/flux-parser@^0.3.0":
   version "0.3.0"