feat: add params requirement to tool tip (#4347)

Author: blegesse-w

src/flows/pipes/RawFluxEditor/FunctionsList/perFunction/FluxDocsTooltipContent.tsx

@@ -1,5 +1,6 @@
 // Libraries
 import React, {FC, useEffect} from 'react'
+import classnames from 'classnames'
 
 // Component
 import {DapperScrollbars} from '@influxdata/clockface'
@@ -24,11 +25,18 @@ const FluxDocsTooltipContent: FC<TooltipProps> = ({
   }, [])
   const argComponent = () => {
     if (func.fluxParameters.length > 0) {
+      let param = 'Optional'
       return func.fluxParameters.map(arg => {
         const description = arg.headline.slice(arg.name.length + 1)
+        arg.required ? (param = 'Required') : param
+
+        const paramClass = classnames('param', {
+          isRequired: param === 'Required' ? true : false,
+        })
         return (
           <div className="flux-function-docs--arguments" key={arg.name}>
             <span>{arg.name}:</span>
+            <span className={paramClass}>({param})</span>
             <div>{description}</div>
           </div>
         )

src/style/chronograf.scss

@@ -80,6 +80,7 @@
 @import 'src/timeMachine/components/TimeMachine.scss';
 @import 'src/timeMachine/components/QueryBuilder.scss';
 @import 'src/timeMachine/components/fluxFunctionsToolbar/FluxFunctionsToolbar.scss';
+@import 'src/timeMachine/components/dynamicFluxFunctionsToolbar/FluxFunctionsToolbar.scss';
 @import 'src/timeMachine/components/ViewOptions.scss';
 @import 'src/visualization/components/ViewTypeDropdown.scss';
 @import 'src/timeMachine/components/builderCard/BuilderCard.scss';

src/timeMachine/components/dynamicFluxFunctionsToolbar/FluxFunctionsToolbar.scss

@@ -33,9 +33,13 @@
   }
 
   span:nth-child(2) {
-    color: $c-rainforest;
+    color: $c-pool;
     font-style: italic;
     margin-right: $cf-border;
+
+    &.isRequired {
+      color: $c-fire;
+    }
   }
 
   div {

src/timeMachine/components/dynamicFluxFunctionsToolbar/TooltipArguments.tsx

@@ -1,5 +1,5 @@
 import React, {PureComponent} from 'react'
-
+import classnames from 'classnames'
 interface Args {
   headline: string
   name: string
@@ -23,11 +23,18 @@ class TooltipArguments extends PureComponent<Props> {
     const {argsList} = this.props
 
     if (argsList.length > 0) {
+      let param = 'Optional'
       return argsList.map(argument => {
         const description = argument.headline.slice(argument.name.length + 1)
+        argument.required ? (param = 'Required') : param
+
+        const paramClass = classnames('param', {
+          isRequired: param === 'Required' ? true : false,
+        })
         return (
           <div className="flux-function-docs--arguments" key={argument.name}>
             <span>{argument.name}:</span>
+            <span className={paramClass}>({param})</span>
             <div>{description}</div>
           </div>
         )