arithmeticInput.tsx 13 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482
  1. import {createRef, Fragment, PureComponent} from 'react';
  2. import styled from '@emotion/styled';
  3. import isEqual from 'lodash/isEqual';
  4. import type {InputProps} from 'sentry/components/input';
  5. import Input from 'sentry/components/input';
  6. import {t} from 'sentry/locale';
  7. import {space} from 'sentry/styles/space';
  8. import type {Column} from 'sentry/utils/discover/fields';
  9. import {generateFieldAsString, isLegalEquationColumn} from 'sentry/utils/discover/fields';
  10. const NONE_SELECTED = -1;
  11. type DropdownOption = {
  12. active: boolean;
  13. kind: 'field' | 'operator';
  14. value: string;
  15. };
  16. type DropdownOptionGroup = {
  17. options: DropdownOption[];
  18. title: string;
  19. };
  20. type DefaultProps = {
  21. options: Column[];
  22. className?: string;
  23. };
  24. type Props = DefaultProps &
  25. InputProps & {
  26. onUpdate: (value: string) => void;
  27. value: string;
  28. hideFieldOptions?: boolean;
  29. };
  30. type State = {
  31. activeSelection: number;
  32. dropdownOptionGroups: DropdownOptionGroup[];
  33. dropdownVisible: boolean;
  34. partialTerm: string | null;
  35. query: string;
  36. rawOptions: Column[];
  37. };
  38. export default class ArithmeticInput extends PureComponent<Props, State> {
  39. static defaultProps: DefaultProps = {
  40. options: [],
  41. };
  42. static getDerivedStateFromProps(props: Readonly<Props>, state: State): State {
  43. const changed = !isEqual(state.rawOptions, props.options);
  44. if (changed) {
  45. return {
  46. ...state,
  47. rawOptions: props.options,
  48. dropdownOptionGroups: makeOptions(
  49. props.options,
  50. state.partialTerm,
  51. props.hideFieldOptions
  52. ),
  53. activeSelection: NONE_SELECTED,
  54. };
  55. }
  56. return {...state};
  57. }
  58. state: State = {
  59. query: this.props.value,
  60. partialTerm: null,
  61. rawOptions: this.props.options,
  62. dropdownVisible: false,
  63. dropdownOptionGroups: makeOptions(
  64. this.props.options,
  65. null,
  66. this.props.hideFieldOptions
  67. ),
  68. activeSelection: NONE_SELECTED,
  69. };
  70. input = createRef<HTMLInputElement>();
  71. blur = () => {
  72. this.input.current?.blur();
  73. };
  74. focus = (position: number) => {
  75. this.input.current?.focus();
  76. this.input.current?.setSelectionRange(position, position);
  77. };
  78. getCursorPosition(): number {
  79. return this.input.current?.selectionStart ?? -1;
  80. }
  81. splitQuery() {
  82. const {query} = this.state;
  83. const currentPosition = this.getCursorPosition();
  84. // The current term is delimited by whitespaces. So if no spaces are found,
  85. // the entire string is taken to be 1 term.
  86. //
  87. // TODO: add support for when there are no spaces
  88. const matches = [...query.substring(0, currentPosition).matchAll(/\s|^/g)];
  89. const match = matches[matches.length - 1]!;
  90. const startOfTerm = match[0] === '' ? 0 : (match.index || 0) + 1;
  91. const cursorOffset = query.slice(currentPosition).search(/\s|$/);
  92. const endOfTerm = currentPosition + (cursorOffset === -1 ? 0 : cursorOffset);
  93. return {
  94. startOfTerm,
  95. endOfTerm,
  96. prefix: query.substring(0, startOfTerm),
  97. term: query.substring(startOfTerm, endOfTerm),
  98. suffix: query.substring(endOfTerm),
  99. };
  100. }
  101. handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
  102. const query = event.target.value.replace('\n', '');
  103. this.setState({query}, this.updateAutocompleteOptions);
  104. };
  105. handleClick = () => {
  106. this.updateAutocompleteOptions();
  107. };
  108. handleFocus = () => {
  109. this.setState({dropdownVisible: true});
  110. };
  111. handleBlur = () => {
  112. this.props.onUpdate(this.state.query);
  113. this.setState({dropdownVisible: false});
  114. };
  115. getSelection(selection: number): DropdownOption | null {
  116. const {dropdownOptionGroups} = this.state;
  117. for (const group of dropdownOptionGroups) {
  118. if (selection >= group.options.length) {
  119. selection -= group.options.length;
  120. continue;
  121. }
  122. return group.options[selection]!;
  123. }
  124. return null;
  125. }
  126. handleKeyDown = (event: React.KeyboardEvent<HTMLInputElement>) => {
  127. const {key} = event;
  128. const {options, hideFieldOptions} = this.props;
  129. const {activeSelection, partialTerm} = this.state;
  130. const startedSelection = activeSelection >= 0;
  131. // handle arrow navigation
  132. if (key === 'ArrowDown' || key === 'ArrowUp') {
  133. event.preventDefault();
  134. const newOptionGroups = makeOptions(options, partialTerm, hideFieldOptions);
  135. const flattenedOptions = newOptionGroups.flatMap(group => group.options);
  136. if (flattenedOptions.length === 0) {
  137. return;
  138. }
  139. let newSelection;
  140. if (!startedSelection) {
  141. newSelection = key === 'ArrowUp' ? flattenedOptions.length - 1 : 0;
  142. } else {
  143. newSelection =
  144. key === 'ArrowUp'
  145. ? (activeSelection - 1 + flattenedOptions.length) % flattenedOptions.length
  146. : (activeSelection + 1) % flattenedOptions.length;
  147. }
  148. // This is modifying the `active` value of the references so make sure to
  149. // use `newOptionGroups` at the end.
  150. flattenedOptions[newSelection]!.active = true;
  151. this.setState({
  152. activeSelection: newSelection,
  153. dropdownOptionGroups: newOptionGroups,
  154. });
  155. return;
  156. }
  157. // handle selection
  158. if (startedSelection && (key === 'Tab' || key === 'Enter')) {
  159. event.preventDefault();
  160. const selection = this.getSelection(activeSelection);
  161. if (selection) {
  162. this.handleSelect(selection);
  163. }
  164. return;
  165. }
  166. if (key === 'Enter') {
  167. this.blur();
  168. return;
  169. }
  170. if (key === 'ArrowLeft' || key === 'ArrowRight') {
  171. this.updateAutocompleteOptions();
  172. }
  173. };
  174. handleKeyUp = (event: React.KeyboardEvent<HTMLInputElement>) => {
  175. // Other keys are managed at handleKeyDown function
  176. if (event.key !== 'Escape') {
  177. return;
  178. }
  179. event.preventDefault();
  180. const {activeSelection} = this.state;
  181. const startedSelection = activeSelection >= 0;
  182. if (!startedSelection) {
  183. this.blur();
  184. return;
  185. }
  186. };
  187. handleSelect = (option: DropdownOption) => {
  188. const {prefix, suffix} = this.splitQuery();
  189. this.setState(
  190. {
  191. // make sure to insert a space after the autocompleted term
  192. query: `${prefix}${option.value} ${suffix}`,
  193. activeSelection: NONE_SELECTED,
  194. },
  195. () => {
  196. // updating the query will cause the input to lose focus
  197. // and make sure to move the cursor behind the space after
  198. // the end of the autocompleted term
  199. this.focus(prefix.length + option.value.length + 1);
  200. this.updateAutocompleteOptions();
  201. }
  202. );
  203. };
  204. updateAutocompleteOptions() {
  205. const {options, hideFieldOptions} = this.props;
  206. const {term} = this.splitQuery();
  207. const partialTerm = term || null;
  208. this.setState({
  209. dropdownOptionGroups: makeOptions(options, partialTerm, hideFieldOptions),
  210. partialTerm,
  211. });
  212. }
  213. render() {
  214. const {onUpdate: _onUpdate, options: _options, className, ...props} = this.props;
  215. const {dropdownVisible, dropdownOptionGroups} = this.state;
  216. return (
  217. <Container isOpen={dropdownVisible} className={className}>
  218. <Input
  219. {...props}
  220. ref={this.input}
  221. autoComplete="off"
  222. className="form-control"
  223. value={this.state.query}
  224. onClick={this.handleClick}
  225. onChange={this.handleChange}
  226. onBlur={this.handleBlur}
  227. onFocus={this.handleFocus}
  228. onKeyDown={this.handleKeyDown}
  229. spellCheck={false}
  230. />
  231. <TermDropdown
  232. isOpen={dropdownVisible}
  233. optionGroups={dropdownOptionGroups}
  234. handleSelect={this.handleSelect}
  235. />
  236. </Container>
  237. );
  238. }
  239. }
  240. const Container = styled('div')<{isOpen: boolean}>`
  241. background: ${p => p.theme.background};
  242. position: relative;
  243. border-radius: ${p =>
  244. p.isOpen
  245. ? `${p.theme.borderRadius} ${p.theme.borderRadius} 0 0`
  246. : p.theme.borderRadius};
  247. .show-sidebar & {
  248. background: ${p => p.theme.backgroundSecondary};
  249. }
  250. `;
  251. type TermDropdownProps = {
  252. handleSelect: (option: DropdownOption) => void;
  253. isOpen: boolean;
  254. optionGroups: DropdownOptionGroup[];
  255. };
  256. function TermDropdown({isOpen, optionGroups, handleSelect}: TermDropdownProps) {
  257. return (
  258. <DropdownContainer isOpen={isOpen}>
  259. {isOpen && (
  260. <DropdownItemsList>
  261. {optionGroups.map(group => {
  262. const {title, options} = group;
  263. return (
  264. <Fragment key={title}>
  265. <ListItem>
  266. <DropdownTitle aria-label={title}>{title}</DropdownTitle>
  267. </ListItem>
  268. {options.map(option => {
  269. return (
  270. <DropdownListItem
  271. key={option.value}
  272. className={option.active ? 'active' : undefined}
  273. onClick={() => handleSelect(option)}
  274. // prevent the blur event on the input from firing
  275. onMouseDown={event => event.preventDefault()}
  276. // scroll into view if it is the active element
  277. ref={element =>
  278. option.active && element?.scrollIntoView?.({block: 'nearest'})
  279. }
  280. aria-label={option.value}
  281. >
  282. <DropdownItemTitleWrapper>{option.value}</DropdownItemTitleWrapper>
  283. </DropdownListItem>
  284. );
  285. })}
  286. {options.length === 0 && <Info>{t('No items found')}</Info>}
  287. </Fragment>
  288. );
  289. })}
  290. </DropdownItemsList>
  291. )}
  292. </DropdownContainer>
  293. );
  294. }
  295. function makeFieldOptions(
  296. columns: Column[],
  297. partialTerm: string | null
  298. ): DropdownOptionGroup {
  299. const fieldValues = new Set<string>();
  300. const options = columns
  301. .filter(({kind}) => kind !== 'equation')
  302. .filter(isLegalEquationColumn)
  303. .map(option => ({
  304. kind: 'field' as const,
  305. active: false,
  306. value: generateFieldAsString(option),
  307. }))
  308. .filter(({value}) => {
  309. if (fieldValues.has(value)) {
  310. return false;
  311. }
  312. fieldValues.add(value);
  313. return true;
  314. })
  315. .filter(({value}) => (partialTerm ? value.includes(partialTerm) : true));
  316. return {
  317. title: 'Fields',
  318. options,
  319. };
  320. }
  321. function makeOperatorOptions(partialTerm: string | null): DropdownOptionGroup {
  322. const options = ['+', '-', '*', '/', '(', ')']
  323. .filter(operator => (partialTerm ? operator.includes(partialTerm) : true))
  324. .map(operator => ({
  325. kind: 'operator' as const,
  326. active: false,
  327. value: operator,
  328. }));
  329. return {
  330. title: 'Operators',
  331. options,
  332. };
  333. }
  334. function makeOptions(
  335. columns: Column[],
  336. partialTerm: string | null,
  337. hideFieldOptions?: boolean
  338. ): DropdownOptionGroup[] {
  339. if (hideFieldOptions) {
  340. return [makeOperatorOptions(partialTerm)];
  341. }
  342. return [makeFieldOptions(columns, partialTerm), makeOperatorOptions(partialTerm)];
  343. }
  344. const DropdownContainer = styled('div')<{isOpen: boolean}>`
  345. /* Container has a border that we need to account for */
  346. display: ${p => (p.isOpen ? 'block' : 'none')};
  347. position: absolute;
  348. top: 100%;
  349. left: -1px;
  350. right: -1px;
  351. z-index: ${p => p.theme.zIndex.dropdown};
  352. background: ${p => p.theme.backgroundElevated};
  353. box-shadow: ${p => p.theme.dropShadowHeavy};
  354. border: 1px solid ${p => p.theme.border};
  355. border-radius: ${p => p.theme.borderRadius};
  356. margin-top: ${space(1)};
  357. max-height: 300px;
  358. overflow-y: auto;
  359. `;
  360. const DropdownItemsList = styled('ul')`
  361. padding-left: 0;
  362. list-style: none;
  363. margin-bottom: 0;
  364. `;
  365. const ListItem = styled('li')`
  366. &:not(:last-child) {
  367. border-bottom: 1px solid ${p => p.theme.innerBorder};
  368. }
  369. `;
  370. const DropdownTitle = styled('header')`
  371. display: flex;
  372. align-items: center;
  373. background-color: ${p => p.theme.backgroundSecondary};
  374. color: ${p => p.theme.gray300};
  375. font-weight: ${p => p.theme.fontWeightNormal};
  376. font-size: ${p => p.theme.fontSizeMedium};
  377. margin: 0;
  378. padding: ${space(1)} ${space(2)};
  379. & > svg {
  380. margin-right: ${space(1)};
  381. }
  382. `;
  383. const DropdownListItem = styled(ListItem)`
  384. scroll-margin: 40px 0;
  385. font-size: ${p => p.theme.fontSizeLarge};
  386. padding: ${space(1)} ${space(2)};
  387. cursor: pointer;
  388. &:hover,
  389. &.active {
  390. background: ${p => p.theme.hover};
  391. }
  392. `;
  393. const DropdownItemTitleWrapper = styled('div')`
  394. color: ${p => p.theme.textColor};
  395. font-weight: ${p => p.theme.fontWeightNormal};
  396. font-size: ${p => p.theme.fontSizeMedium};
  397. margin: 0;
  398. line-height: ${p => p.theme.text.lineHeightHeading};
  399. ${p => p.theme.overflowEllipsis};
  400. `;
  401. const Info = styled('div')`
  402. display: flex;
  403. padding: ${space(1)} ${space(2)};
  404. font-size: ${p => p.theme.fontSizeLarge};
  405. color: ${p => p.theme.gray300};
  406. &:not(:last-child) {
  407. border-bottom: 1px solid ${p => p.theme.innerBorder};
  408. }
  409. `;