fix: avoid error on typing colon (#6056)

* fix: avoid error on typing colon
* Fix eslint errors
* Update CHANGELOG.md
* fix eslint error
* Requested changes from review

CHANGELOG.md

@@ -1,3 +1,7 @@
+### Bug Fixes
+
+1. [#6056](https://github.com/influxdata/chronograf/pull/6056): Fix error on typing colon
+
 ## v1.10.1
 
 ### Features

ui/package.json

@@ -71,6 +71,7 @@
     "@types/react-dnd": "^2.0.36",
     "@types/react-dnd-html5-backend": "^2.1.9",
     "@types/react-dom": "^16.8.4",
+    "@types/react-onclickoutside": "^6.7.4",
     "@types/react-router": "^3.0.15",
     "@types/react-router-redux": "4",
     "@types/react-virtualized": "^9.18.3",

ui/src/shared/components/TemplateDrawer.tsx

@@ -1,12 +1,16 @@
-import React, {FunctionComponent, MouseEvent} from 'react'
+import React, {Component, MouseEvent} from 'react'
 import OnClickOutside from 'react-onclickoutside'
 import classnames from 'classnames'
 
 import {Template} from 'src/types'
 
+interface TempVar {
+  tempVar: string
+}
+
 interface Props {
   templates: Template[]
-  selected: Template
+  selected: TempVar
   onMouseOverTempVar: (
     template: Template
   ) => (e: MouseEvent<HTMLDivElement>) => void
@@ -14,27 +18,35 @@ interface Props {
     template: Template
   ) => (e: MouseEvent<HTMLDivElement>) => void
 }
-const TemplateDrawer: FunctionComponent<Props> = ({
-  templates,
-  selected,
-  onMouseOverTempVar,
-  onClickTempVar,
-}) => (
-  <div className="template-drawer">
-    {templates.map(t => (
-      <div
-        className={classnames('template-drawer--item', {
-          'template-drawer--selected': t.tempVar === selected.tempVar,
-        })}
-        onMouseOver={onMouseOverTempVar(t)}
-        onMouseDown={onClickTempVar(t)}
-        key={t.tempVar}
-      >
-        {' '}
-        {t.tempVar}{' '}
+
+// TemplateDrawer must be a class component,
+// functional components are not supported by react-onclickoutside
+class TemplateDrawer extends Component<Props> {
+  constructor(props: Props | Readonly<Props>) {
+    super(props)
+  }
+
+  public render(): React.ReactNode {
+    const {templates, selected, onMouseOverTempVar, onClickTempVar} = this.props
+
+    return (
+      <div className="template-drawer">
+        {templates.map(t => (
+          <div
+            className={classnames('template-drawer--item', {
+              'template-drawer--selected': t.tempVar === selected.tempVar,
+            })}
+            onMouseOver={onMouseOverTempVar(t)}
+            onMouseDown={onClickTempVar(t)}
+            key={t.tempVar}
+          >
+            {' '}
+            {t.tempVar}{' '}
+          </div>
+        ))}
       </div>
-    ))}
-  </div>
-)
+    )
+  }
+}
 
 export default OnClickOutside(TemplateDrawer)

yarn.lock

@@ -2663,6 +2663,13 @@
   dependencies:
     "@types/react" "^16"
 
+"@types/react-onclickoutside@^6.7.4":
+  version "6.7.4"
+  resolved "https://registry.yarnpkg.com/@types/react-onclickoutside/-/react-onclickoutside-6.7.4.tgz#05b1ec0d31a85999873c51e166f57aefa3f037a4"
+  integrity sha512-N7EnMhxqb+TaUOGJQUV8YJeL3n5qP5+cXwtWRS/FYW+DSEAb8T3xwNsgZ6wEJMHP4/QpfVHcBaFopFjJ9XBuOg==
+  dependencies:
+    "@types/react" "*"
+
 "@types/react-redux@^7.1.20":
   version "7.1.23"
   resolved "https://registry.yarnpkg.com/@types/react-redux/-/react-redux-7.1.23.tgz#3c2bb1bcc698ae69d70735f33c5a8e95f41ac528"