utils.tsx 3.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145
  1. import React from 'react';
  2. import {IconClock, IconStar, IconTag, IconToggle, IconUser} from 'app/icons';
  3. import {t} from 'app/locale';
  4. import {ItemType, SearchGroup, SearchItem} from './types';
  5. export function addSpace(query = '') {
  6. if (query.length !== 0 && query[query.length - 1] !== ' ') {
  7. return query + ' ';
  8. } else {
  9. return query;
  10. }
  11. }
  12. export function removeSpace(query = '') {
  13. if (query[query.length - 1] === ' ') {
  14. return query.slice(0, query.length - 1);
  15. } else {
  16. return query;
  17. }
  18. }
  19. function getTitleForType(type: ItemType) {
  20. if (type === 'tag-value') {
  21. return t('Tag Values');
  22. }
  23. if (type === 'recent-search') {
  24. return t('Recent Searches');
  25. }
  26. if (type === 'default') {
  27. return t('Common Search Terms');
  28. }
  29. return t('Tags');
  30. }
  31. function getIconForTypeAndTag(type: ItemType, tagName: string) {
  32. if (type === 'recent-search') {
  33. return <IconClock size="xs" />;
  34. }
  35. if (type === 'default') {
  36. return <IconStar size="xs" />;
  37. }
  38. // Change based on tagName and default to "icon-tag"
  39. switch (tagName) {
  40. case 'is':
  41. return <IconToggle size="xs" />;
  42. case 'assigned':
  43. case 'bookmarks':
  44. return <IconUser size="xs" />;
  45. case 'firstSeen':
  46. case 'lastSeen':
  47. case 'event.timestamp':
  48. return <IconClock size="xs" />;
  49. default:
  50. return <IconTag size="xs" />;
  51. }
  52. }
  53. export function createSearchGroups(
  54. searchItems: SearchItem[],
  55. recentSearchItems: SearchItem[] | undefined,
  56. tagName: string,
  57. type: ItemType,
  58. maxSearchItems: number | undefined,
  59. queryCharsLeft?: number
  60. ) {
  61. const activeSearchItem = 0;
  62. if (maxSearchItems && maxSearchItems > 0) {
  63. searchItems = searchItems.filter(
  64. (value: SearchItem, index: number) =>
  65. index < maxSearchItems || value.ignoreMaxSearchItems
  66. );
  67. }
  68. if (queryCharsLeft || queryCharsLeft === 0) {
  69. searchItems = searchItems.filter(
  70. (value: SearchItem) => value.value.length <= queryCharsLeft
  71. );
  72. if (recentSearchItems) {
  73. recentSearchItems = recentSearchItems.filter(
  74. (value: SearchItem) => value.value.length <= queryCharsLeft
  75. );
  76. }
  77. }
  78. const searchGroup: SearchGroup = {
  79. title: getTitleForType(type),
  80. type: type === 'invalid-tag' ? type : 'header',
  81. icon: getIconForTypeAndTag(type, tagName),
  82. children: [...searchItems],
  83. };
  84. const recentSearchGroup: SearchGroup | undefined = recentSearchItems && {
  85. title: t('Recent Searches'),
  86. type: 'header',
  87. icon: <IconClock size="xs" />,
  88. children: [...recentSearchItems],
  89. };
  90. if (searchGroup.children && !!searchGroup.children.length) {
  91. searchGroup.children[activeSearchItem] = {
  92. ...searchGroup.children[activeSearchItem],
  93. };
  94. }
  95. return {
  96. searchGroups: [searchGroup, ...(recentSearchGroup ? [recentSearchGroup] : [])],
  97. flatSearchItems: [...searchItems, ...(recentSearchItems ? recentSearchItems : [])],
  98. activeSearchItem: -1,
  99. };
  100. }
  101. /**
  102. * Items is a list of dropdown groups that have a `children` field. Only the
  103. * `children` are selectable, so we need to find which child is selected given
  104. * an index that is in range of the sum of all `children` lengths
  105. *
  106. * @return Returns a tuple of [groupIndex, childrenIndex]
  107. */
  108. export function filterSearchGroupsByIndex(items: SearchGroup[], index: number) {
  109. let _index = index;
  110. let foundSearchItem: [number?, number?] = [undefined, undefined];
  111. items.find(({children}, i) => {
  112. if (!children || !children.length) {
  113. return false;
  114. }
  115. if (_index < children.length) {
  116. foundSearchItem = [i, _index];
  117. return true;
  118. }
  119. _index -= children.length;
  120. return false;
  121. });
  122. return foundSearchItem;
  123. }