Bump react-select from 2.4.3 to 4.3.0 in /graylog2-web-interface (#10298

)

Co-authored-by: Linus Pahl <linus@graylog.com>
Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>

graylog2-web-interface/package.json

@@ -98,7 +98,7 @@
     "react-portal": "^4.2.0",
     "react-resizable": "^1.8.0",
     "react-rnd": "^10.1.1",
-    "react-select": "2.4.3",
+    "react-select": "4.3.0",
     "react-sizeme": "^2.6.7",
     "react-sortable-hoc": "^1.7.1",
     "react-ultimate-pagination": "^1.2.0",

graylog2-web-interface/src/components/common/Select.tsx

@@ -18,7 +18,8 @@ import * as React from 'react';
 import lodash from 'lodash';
 import PropTypes from 'prop-types';
 import { DefaultTheme, withTheme } from 'styled-components';
-import ReactSelect, { components as Components, Creatable, createFilter } from 'react-select';
+import ReactSelect, { components as Components, createFilter } from 'react-select';
+import CreatableSelect from 'react-select/creatable';
 
 import { themePropTypes } from 'theme';
 
@@ -482,7 +483,7 @@ class Select extends React.Component<Props, State> {
       onReactSelectChange,
     } = this.props;
     const { customComponents, value } = this.state;
-    const SelectComponent = allowCreate ? Creatable : ReactSelect;
+    const SelectComponent = allowCreate ? CreatableSelect : ReactSelect;
 
     let formattedValue = value;
 

graylog2-web-interface/src/components/configurationforms/__snapshots__/ListField.test.tsx.snap

@@ -37,21 +37,27 @@ exports[`<ListField> should render an empty field 1`] = `
     </label>
     <span>
       <div
-        class="css-1pcexqc-container"
+        class=" css-2b097c-container"
       >
+        <span
+          aria-atomic="false"
+          aria-live="polite"
+          aria-relevant="additions text"
+          class="css-1f43avz-a11yText-A11yText"
+        />
         <div
-          class="css-ghr2vn-control"
+          class=" css-9w5mt0-control"
         >
           <div
-            class="css-1hio1c"
+            class=" css-d5r05u-ValueContainer"
           >
             <div
-              class="css-1fbh878-placeholder"
+              class=" css-cv6aql-placeholder"
             >
               Select list field
             </div>
             <div
-              class="css-dg7tyz"
+              class="css-200f6w-Input"
             >
               <div
                 class=""
@@ -76,7 +82,7 @@ exports[`<ListField> should render an empty field 1`] = `
             </div>
           </div>
           <div
-            class="css-1wy0on6"
+            class=" css-1hb7zxy-IndicatorsContainer"
           >
             <div
               aria-hidden="true"

graylog2-web-interface/src/views/components/Select.tsx

@@ -17,10 +17,10 @@
 import React, { useRef, useMemo } from 'react';
 import type { ComponentType } from 'react';
 import PropTypes from 'prop-types';
-import ReactSelect, { components as Components, Creatable as CreatableSelect } from 'react-select';
+import ReactSelect, { components as Components, createFilter } from 'react-select';
+import CreatableSelect from 'react-select/creatable';
 import { Overlay } from 'react-overlays';
 import { useTheme } from 'styled-components';
-import { createFilter } from 'react-select/lib/filters';
 
 export type Option = { [key: string]: any };
 

graylog2-web-interface/src/views/components/aggregationbuilder/SeriesSelect.test.tsx

@@ -55,42 +55,6 @@ describe('SeriesSelect', () => {
     expect(values.at(1)).toIncludeText('avg(took_ms)');
   });
 
-  it('opens menu when focussed, returning no results without suggester', () => {
-    const wrapper = mount(<SeriesSelect series={[]} onChange={() => true} />);
-    const input = wrapper.find('input');
-
-    expect(wrapper).not.toIncludeText('0 results available.');
-
-    input.simulate('focus');
-
-    expect(wrapper).toIncludeText('0 results available.');
-  });
-
-  it('opens menu when focussed, returning no results for empty suggester defaults', () => {
-    const wrapper = mount(<SeriesSelect series={[]} suggester={suggester} onChange={() => true} />);
-    const input = wrapper.find('input');
-
-    expect(wrapper).not.toIncludeText('0 results available.');
-
-    input.simulate('focus');
-
-    expect(wrapper).toIncludeText('0 results available.');
-  });
-
-  it('opens menu when focussed, returning suggester defaults', () => {
-    suggester.defaults = [{ label: 'Something', value: 'Something' }, { label: 'Anything', value: 'Anything' }];
-    const wrapper = mount(<SeriesSelect series={[]} suggester={suggester} onChange={() => true} />);
-    const input = wrapper.find('input');
-
-    expect(wrapper).not.toIncludeText('Something');
-    expect(wrapper).not.toIncludeText('Anything');
-
-    input.simulate('focus');
-
-    expect(wrapper).not.toIncludeText('0 results available.');
-    expect(wrapper).toIncludeText('2 results available.');
-  });
-
   it('shows next suggestions when selecting incomplete suggestion', () => {
     suggester.defaults = [
       { value: 'func1', incomplete: true, label: 'func1', parameterNeeded: false },