Explore: Fix a bug where Typeahead crashes when a large amount of ite… (#29637)

* Explore: Fix a bug where Typeahead crashes when a large amount of items is given

* Fix format

* Improve memory efficiency of flattenGroupItems

packages/grafana-ui/src/components/Typeahead/Typeahead.test.tsx

@@ -3,7 +3,7 @@ import { mount } from 'enzyme';
 
 
 import { Typeahead, State } from './Typeahead';
 import { Typeahead, State } from './Typeahead';
 import { TypeaheadItem } from './TypeaheadItem';
 import { TypeaheadItem } from './TypeaheadItem';
-import { CompletionItemKind } from '../../types';
+import { CompletionItemGroup, CompletionItemKind } from '../../types';
 
 
 describe('Typeahead', () => {
 describe('Typeahead', () => {
   const completionItemGroups = [{ label: 'my group', items: [{ label: 'first item' }] }];
   const completionItemGroups = [{ label: 'my group', items: [{ label: 'first item' }] }];
@@ -43,4 +43,14 @@ describe('Typeahead', () => {
     expect(items.get(0).props.isSelected).toBeFalsy();
     expect(items.get(0).props.isSelected).toBeFalsy();
     expect(items.get(1).props.isSelected).toBeTruthy();
     expect(items.get(1).props.isSelected).toBeTruthy();
   });
   });
+  it('can be rendered properly even if the size of items is large', () => {
+    const completionItemGroups: CompletionItemGroup[] = [{ label: 'my group', items: [] }];
+    const itemsSize = 1000000;
+    for (let i = 0; i < itemsSize; i++) {
+      completionItemGroups[0].items.push({ label: 'item' + i });
+    }
+
+    const component = mount(<Typeahead origin="test" groupedItems={completionItemGroups} isOpen />);
+    expect(component.find('.typeahead')).toHaveLength(1);
+  });
 });
 });

packages/grafana-ui/src/utils/typeahead.ts

@@ -4,12 +4,14 @@ import { GrafanaTheme } from '@grafana/data';
 
 
 export const flattenGroupItems = (groupedItems: CompletionItemGroup[]): CompletionItem[] => {
 export const flattenGroupItems = (groupedItems: CompletionItemGroup[]): CompletionItem[] => {
   return groupedItems.reduce((all: CompletionItem[], { items, label }) => {
   return groupedItems.reduce((all: CompletionItem[], { items, label }) => {
-    const titleItem: CompletionItem = {
+    all.push({
       label,
       label,
       kind: CompletionItemKind.GroupTitle,
       kind: CompletionItemKind.GroupTitle,
-    };
-    all.push(titleItem, ...items);
+    });
+    return items.reduce((all, item) => {
+      all.push(item);
       return all;
       return all;
+    }, all);
   }, []);
   }, []);
 };
 };