[Canvas] Dropdown filter refactor (#105707)

* Refactered from `recompose` to `react hooks`.

Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com>

x-pack/plugins/canvas/canvas_plugin_src/renderers/filters/dropdown_filter/component/__stories__/__snapshots__/dropdown_filter.stories.storyshot

@@ -8,6 +8,7 @@ exports[`Storyshots renderers/DropdownFilter default 1`] = `
     className="canvasDropdownFilter__select"
     data-test-subj="canvasDropdownFilter__select"
     onChange={[Function]}
+    value=""
   >
     <option
       aria-selected={false}
@@ -31,6 +32,7 @@ exports[`Storyshots renderers/DropdownFilter with choices 1`] = `
     className="canvasDropdownFilter__select"
     data-test-subj="canvasDropdownFilter__select"
     onChange={[Function]}
+    value=""
   >
     <option
       aria-selected={false}

x-pack/plugins/canvas/canvas_plugin_src/renderers/filters/dropdown_filter/component/__stories__/dropdown_filter.stories.tsx

@@ -5,9 +5,9 @@
  * 2.0.
  */
 
-import { action } from '@storybook/addon-actions';
-import { storiesOf } from '@storybook/react';
 import React from 'react';
+import { storiesOf } from '@storybook/react';
+import { action } from '@storybook/addon-actions';
 import { DropdownFilter } from '../dropdown_filter';
 
 const choices: Array<[string, string]> = [
@@ -17,26 +17,14 @@ const choices: Array<[string, string]> = [
 ];
 
 storiesOf('renderers/DropdownFilter', module)
-  .add('default', () => <DropdownFilter onChange={action('onChange')} commit={action('commit')} />)
+  .add('default', () => <DropdownFilter commit={action('commit')} />)
   .add('with new value', () => (
-    <DropdownFilter onChange={action('onChange')} commit={action('commit')} value="selectedValue" />
-  ))
-  .add('with choices', () => (
-    <DropdownFilter onChange={action('onChange')} commit={action('commit')} choices={choices} />
+    <DropdownFilter commit={action('commit')} initialValue="selectedValue" />
   ))
+  .add('with choices', () => <DropdownFilter commit={action('commit')} choices={choices} />)
   .add('with choices and value', () => (
-    <DropdownFilter
-      onChange={action('onChange')}
-      commit={action('commit')}
-      choices={choices}
-      value="Item Two"
-    />
+    <DropdownFilter commit={action('commit')} choices={choices} initialValue="Item Two" />
   ))
   .add('with choices and new value', () => (
-    <DropdownFilter
-      onChange={action('onChange')}
-      commit={action('commit')}
-      choices={choices}
-      value="selectedValue"
-    />
+    <DropdownFilter commit={action('commit')} choices={choices} initialValue="selectedValue" />
   ));

x-pack/plugins/canvas/canvas_plugin_src/renderers/filters/dropdown_filter/component/dropdown_filter.scss

@@ -11,6 +11,7 @@
     border-radius: $euiBorderRadius;
     appearance: none;
     font-size: inherit;
+    color: $euiTextColor;
 
     &:after {
       display: none;

x-pack/plugins/canvas/canvas_plugin_src/renderers/filters/dropdown_filter/component/dropdown_filter.tsx

@@ -5,7 +5,7 @@
  * 2.0.
  */
 
-import React, { ChangeEvent, FocusEvent, FunctionComponent } from 'react';
+import React, { ChangeEvent, FocusEvent, FunctionComponent, useEffect, useState } from 'react';
 import PropTypes from 'prop-types';
 import { EuiIcon } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
@@ -28,19 +28,22 @@ export interface Props {
    * Optional value for the component. If the value is not present in the
    * choices collection, it will be discarded.
    */
-  value?: string;
-  /** Function to invoke when the dropdown value is changed */
-  onChange: (value: string) => void;
+  initialValue?: string;
   /** Function to invoke when the dropdown value is committed */
   commit: (value: string) => void;
 }
 
 export const DropdownFilter: FunctionComponent<Props> = ({
-  value,
-  onChange,
+  initialValue = '',
   commit,
   choices = [],
 }) => {
+  const [value, setValue] = useState<string>(initialValue);
+
+  useEffect(() => {
+    setValue(initialValue);
+  }, [initialValue]);
+
   let options = [
     { value: '%%CANVAS_MATCH_ALL%%', text: `-- ${strings.getMatchAllOptionLabel()} --` },
   ];
@@ -49,7 +52,7 @@ export const DropdownFilter: FunctionComponent<Props> = ({
   const changeHandler = (e: FocusEvent<HTMLSelectElement> | ChangeEvent<HTMLSelectElement>) => {
     if (e && e.target) {
       const target = e.target as HTMLSelectElement;
-      onChange(target.value);
+      setValue(target.value);
       commit(target.value);
     }
   };
@@ -84,7 +87,6 @@ export const DropdownFilter: FunctionComponent<Props> = ({
 
 DropdownFilter.propTypes = {
   choices: PropTypes.array,
-  value: PropTypes.string,
-  onChange: PropTypes.func.isRequired,
+  initialValue: PropTypes.string,
   commit: PropTypes.func.isRequired,
 };

x-pack/plugins/canvas/canvas_plugin_src/renderers/filters/dropdown_filter/component/index.ts

@@ -5,24 +5,4 @@
  * 2.0.
  */
 
-import { compose, withState } from 'recompose';
-import { DropdownFilter as Component, Props as ComponentProps } from './dropdown_filter';
-
-export interface Props {
-  /**
-   * A collection of choices to display in the dropdown
-   * @default []
-   */
-  choices?: string[];
-  /**
-   * Optional value for the component. If the value is not present in the
-   * choices collection, it will be discarded.
-   */
-  value?: string;
-  /** Function to invoke when the dropdown value is committed */
-  commit: (value: string) => void;
-}
-
-export const DropdownFilter = compose<ComponentProps, Props>(
-  withState('value', 'onChange', ({ value }) => value || '')
-)(Component);
+export { DropdownFilter } from './dropdown_filter';

x-pack/plugins/canvas/canvas_plugin_src/renderers/filters/dropdown_filter/index.tsx

@@ -23,7 +23,7 @@ export interface Config {
    * A collection of choices to display in the dropdown
    * @default []
    */
-  choices: string[];
+  choices: Array<[string, string]>;
   filterGroup: string;
 }
 
@@ -88,7 +88,7 @@ export const dropdownFilter: RendererFactory<Config> = () => ({
       <DropdownFilter
         commit={commit}
         choices={config.choices || []}
-        value={getFilterValue(filterExpression)}
+        initialValue={getFilterValue(filterExpression)}
       />,
       domNode,
       () => handlers.done()