[Upgrade Assistant] Fix filter deprecations search filter (#57541)

* Made eui search field not a controlled component Added validateRegExpString util * Update error message display. Use EuiCallOut and i18n to replicate other search filter behaviour, e.g. index management. * Remove unused variable * Update Jest snapshot * Updated layout for callout The previous callout layout looked off-center next to the controls in the table. * Update copy and remove intl Update "Filter Invalid:" to sentence case Remove inject intl wrapper from CheckupControls component Remove unnecessary grow={true} * Updated Jest component snapshot Co-authored-by: Elastic Machine <[email protected]>
elastic · Feb 17, 2020 · 26fdc4a · 26fdc4a
1 parent 84be262
commit 26fdc4a
Show file tree

Hide file tree

Showing 5 changed files with 121 additions and 45 deletions.
diff --git a/...blic/np_ready/application/components/tabs/checkup/__snapshots__/checkup_tab.test.tsx.snap b/...blic/np_ready/application/components/tabs/checkup/__snapshots__/checkup_tab.test.tsx.snap
diff --git a/...ins/upgrade_assistant/public/np_ready/application/components/tabs/checkup/checkup_tab.tsx b/...ins/upgrade_assistant/public/np_ready/application/components/tabs/checkup/checkup_tab.tsx
@@ -68,7 +68,7 @@ export class CheckupTab extends UpgradeAssistantTabComponent<CheckupTabProps, Ch
       setSelectedTabIndex,
       showBackupWarning = false,
     } = this.props;
-    const { currentFilter, search, currentGroupBy } = this.state;
+    const { currentFilter, currentGroupBy } = this.state;
 
     return (
       <Fragment>
@@ -143,7 +143,6 @@ export class CheckupTab extends UpgradeAssistantTabComponent<CheckupTabProps, Ch
                   loadData={refreshCheckupData}
                   currentFilter={currentFilter}
                   onFilterChange={this.changeFilter}
-                  search={search}
                   onSearchChange={this.changeSearch}
                   availableGroupByOptions={this.availableGroupByOptions()}
                   currentGroupBy={currentGroupBy}

diff --git a/...lugins/upgrade_assistant/public/np_ready/application/components/tabs/checkup/controls.tsx b/...lugins/upgrade_assistant/public/np_ready/application/components/tabs/checkup/controls.tsx
@@ -3,73 +3,112 @@
  * or more contributor license agreements. Licensed under the Elastic License;
  * you may not use this file except in compliance with the Elastic License.
  */
-import React, { FunctionComponent } from 'react';
 
-import { EuiButton, EuiFieldSearch, EuiFlexGroup, EuiFlexItem } from '@elastic/eui';
-import { FormattedMessage, injectI18n } from '@kbn/i18n/react';
+import React, { FunctionComponent, useState } from 'react';
+import { i18n } from '@kbn/i18n';
+import { EuiButton, EuiFieldSearch, EuiFlexGroup, EuiFlexItem, EuiCallOut } from '@elastic/eui';
+import { FormattedMessage } from '@kbn/i18n/react';
 
 import { DeprecationInfo } from 'src/legacy/core_plugins/elasticsearch';
 import { GroupByOption, LevelFilterOption, LoadingState } from '../../types';
 import { FilterBar } from './filter_bar';
 import { GroupByBar } from './group_by_bar';
 
-interface CheckupControlsProps extends ReactIntl.InjectedIntlProps {
+import { validateRegExpString } from '../../../utils';
+
+interface CheckupControlsProps {
   allDeprecations?: DeprecationInfo[];
   loadingState: LoadingState;
   loadData: () => void;
   currentFilter: LevelFilterOption;
   onFilterChange: (filter: LevelFilterOption) => void;
-  search: string;
   onSearchChange: (filter: string) => void;
   availableGroupByOptions: GroupByOption[];
   currentGroupBy: GroupByOption;
   onGroupByChange: (groupBy: GroupByOption) => void;
 }
 
-export const CheckupControlsUI: FunctionComponent<CheckupControlsProps> = ({
+export const CheckupControls: FunctionComponent<CheckupControlsProps> = ({
   allDeprecations,
   loadingState,
   loadData,
   currentFilter,
   onFilterChange,
-  search,
   onSearchChange,
   availableGroupByOptions,
   currentGroupBy,
   onGroupByChange,
-  intl,
-}) => (
-  <EuiFlexGroup alignItems="center" wrap={true} responsive={false}>
-    <EuiFlexItem grow={true}>
-      <EuiFieldSearch
-        aria-label="Filter"
-        placeholder={intl.formatMessage({
-          id: 'xpack.upgradeAssistant.checkupTab.controls.searchBarPlaceholder',
-          defaultMessage: 'Filter',
-        })}
-        value={search}
-        onChange={e => onSearchChange(e.target.value)}
-      />
-    </EuiFlexItem>
-
-    {/* These two components provide their own EuiFlexItem wrappers */}
-    <FilterBar {...{ allDeprecations, currentFilter, onFilterChange }} />
-    <GroupByBar {...{ availableGroupByOptions, currentGroupBy, onGroupByChange }} />
+}) => {
+  const [searchTermError, setSearchTermError] = useState<null | string>(null);
+  const filterInvalid = Boolean(searchTermError);
+  return (
+    <EuiFlexGroup direction="column" responsive={false}>
+      <EuiFlexItem grow={true}>
+        <EuiFlexGroup alignItems="center" wrap={true} responsive={false}>
+          <EuiFlexItem>
+            <EuiFieldSearch
+              isInvalid={filterInvalid}
+              aria-label={i18n.translate(
+                'xpack.upgradeAssistant.checkupTab.controls.searchBarPlaceholderAriaLabel',
+                { defaultMessage: 'Filter' }
+              )}
+              placeholder={i18n.translate(
+                'xpack.upgradeAssistant.checkupTab.controls.searchBarPlaceholder',
+                {
+                  defaultMessage: 'Filter',
+                }
+              )}
+              onChange={e => {
+                const string = e.target.value;
+                const errorMessage = validateRegExpString(string);
+                if (errorMessage) {
+                  // Emit an empty search term to listeners if search term is invalid.
+                  onSearchChange('');
+                  setSearchTermError(errorMessage);
+                } else {
+                  onSearchChange(e.target.value);
+                  if (searchTermError) {
+                    setSearchTermError(null);
+                  }
+                }
+              }}
+            />
+          </EuiFlexItem>
 
-    <EuiFlexItem grow={false}>
-      <EuiButton
-        fill
-        onClick={loadData}
-        iconType="refresh"
-        isLoading={loadingState === LoadingState.Loading}
-      >
-        <FormattedMessage
-          id="xpack.upgradeAssistant.checkupTab.controls.refreshButtonLabel"
-          defaultMessage="Refresh"
-        />
-      </EuiButton>
-    </EuiFlexItem>
-  </EuiFlexGroup>
-);
+          {/* These two components provide their own EuiFlexItem wrappers */}
+          <FilterBar {...{ allDeprecations, currentFilter, onFilterChange }} />
+          <GroupByBar {...{ availableGroupByOptions, currentGroupBy, onGroupByChange }} />
 
-export const CheckupControls = injectI18n(CheckupControlsUI);
+          <EuiFlexItem grow={false}>
+            <EuiButton
+              fill
+              onClick={loadData}
+              iconType="refresh"
+              isLoading={loadingState === LoadingState.Loading}
+            >
+              <FormattedMessage
+                id="xpack.upgradeAssistant.checkupTab.controls.refreshButtonLabel"
+                defaultMessage="Refresh"
+              />
+            </EuiButton>
+          </EuiFlexItem>
+        </EuiFlexGroup>
+      </EuiFlexItem>
+      {filterInvalid && (
+        <EuiFlexItem grow={false}>
+          <EuiCallOut
+            color="danger"
+            title={i18n.translate(
+              'xpack.upgradeAssistant.checkupTab.controls.filterErrorMessageLabel',
+              {
+                defaultMessage: 'Filter invalid: {searchTermError}',
+                values: { searchTermError },
+              }
+            )}
+            iconType="faceSad"
+          />
+        </EuiFlexItem>
+      )}
+    </EuiFlexGroup>
+  );
+};
diff --git a/x-pack/legacy/plugins/upgrade_assistant/public/np_ready/application/utils.test.ts b/x-pack/legacy/plugins/upgrade_assistant/public/np_ready/application/utils.test.ts
@@ -0,0 +1,20 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+import { validateRegExpString } from './utils';
+
+describe('validRegExpString', () => {
+  it('correctly returns false for invalid strings', () => {
+    expect(validateRegExpString('?asd')).toContain(`Invalid regular expression`);
+    expect(validateRegExpString('*asd')).toContain(`Invalid regular expression`);
+    expect(validateRegExpString('(')).toContain(`Invalid regular expression`);
+  });
+
+  it('correctly returns true for valid strings', () => {
+    expect(validateRegExpString('asd')).toBe('');
+    expect(validateRegExpString('.*asd')).toBe('');
+    expect(validateRegExpString('')).toBe('');
+  });
+});
diff --git a/x-pack/legacy/plugins/upgrade_assistant/public/np_ready/application/utils.ts b/x-pack/legacy/plugins/upgrade_assistant/public/np_ready/application/utils.ts
@@ -0,0 +1,19 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+import { pipe } from 'fp-ts/lib/pipeable';
+import { tryCatch, fold } from 'fp-ts/lib/Either';
+
+export const validateRegExpString = (s: string) =>
+  pipe(
+    tryCatch(
+      () => new RegExp(s),
+      e => (e as Error).message
+    ),
+    fold(
+      (errorMessage: string) => errorMessage,
+      () => ''
+    )
+  );