From ff0c47be50cc1ef1eeef1cc0adbc510620fd0f03 Mon Sep 17 00:00:00 2001 From: esanuandra Date: Mon, 21 Jul 2025 14:19:08 +0300 Subject: [PATCH 1/7] Add autocomplete component --- .../OverTimeResultsView.test.tsx.snap | 2 +- .../__snapshots__/ResultsTable.test.tsx.snap | 464 +++-- .../__snapshots__/ResultsView.test.tsx.snap | 16 +- .../__snapshots__/SearchInput.test.tsx.snap | 2 +- .../SubtestsResultsView.test.tsx.snap | 30 +- .../CompareOverTime.test.tsx.snap | 1606 ++-------------- .../CompareWithBase.test.tsx.snap | 1276 +++++++++---- .../SearchContainer.test.tsx.snap | 326 ++-- .../SearchResultsList.test.tsx.snap | 797 -------- .../__snapshots__/SearchView.test.tsx.snap | 1634 +++++++++++------ src/__tests__/__snapshots__/App.test.tsx.snap | 12 +- src/components/Search/AutocompleteInput.tsx | 78 + src/components/Search/AutocompleteOption.tsx | 136 ++ .../Search/SearchInputAndResults.tsx | 234 ++- 14 files changed, 3124 insertions(+), 3489 deletions(-) create mode 100644 src/components/Search/AutocompleteInput.tsx create mode 100644 src/components/Search/AutocompleteOption.tsx diff --git a/src/__tests__/CompareResults/__snapshots__/OverTimeResultsView.test.tsx.snap b/src/__tests__/CompareResults/__snapshots__/OverTimeResultsView.test.tsx.snap index 470b689ae..07b968c62 100644 --- a/src/__tests__/CompareResults/__snapshots__/OverTimeResultsView.test.tsx.snap +++ b/src/__tests__/CompareResults/__snapshots__/OverTimeResultsView.test.tsx.snap @@ -513,7 +513,7 @@ exports[`Results View The table should match snapshot and other elements should role="columnheader" >
+
+ + @@ -546,7 +586,7 @@ exports[`Results Table Should match snapshot 1`] = ` class="MuiFormControl-root search-dropdown f1o9jg5h css-1iw3t7y-MuiFormControl-root" >
- -
- - + +
+ +
+ +
+ +
@@ -945,7 +1025,7 @@ exports[`Results Table Should match snapshot 1`] = ` aria-invalid="false" aria-label="Search by title, platform, revision or options" class="MuiInputBase-input MuiOutlinedInput-input MuiInputBase-inputSizeSmall MuiInputBase-inputAdornedStart MuiInputBase-inputAdornedEnd css-3v3un6-MuiInputBase-input-MuiOutlinedInput-input" - id="_r_g_" + id="_r_k_" placeholder="Filter results" type="search" value="" @@ -1406,7 +1486,7 @@ exports[`Results Table Should match snapshot 1`] = ` role="columnheader" >
+
+ + @@ -3302,7 +3422,7 @@ exports[`Results Table for MannWhitneyResultsItem for mann-whitney-u testVersion class="MuiFormControl-root search-dropdown f1o9jg5h css-1iw3t7y-MuiFormControl-root" >
- -
- - + +
+ +
+ +
+ +
@@ -3701,7 +3861,7 @@ exports[`Results Table for MannWhitneyResultsItem for mann-whitney-u testVersion aria-invalid="false" aria-label="Search by title, platform, revision or options" class="MuiInputBase-input MuiOutlinedInput-input MuiInputBase-inputSizeSmall MuiInputBase-inputAdornedStart MuiInputBase-inputAdornedEnd css-3v3un6-MuiInputBase-input-MuiOutlinedInput-input" - id="_r_p5_" + id="_r_qh_" placeholder="Filter results" type="search" value="" @@ -4162,7 +4322,7 @@ exports[`Results Table for MannWhitneyResultsItem for mann-whitney-u testVersion role="columnheader" >
+
+ + @@ -338,7 +378,7 @@ exports[`Compare Over Time renders correctly in Search View: Initial state for t
@@ -968,7 +1008,7 @@ exports[`Compare Over Time should have an edit mode in Results View: After click class="MuiFormControl-root search-dropdown f1o9jg5h css-1iw3t7y-MuiFormControl-root" >
- -
- - + +
+ +
+ +
+ +
@@ -1684,1388 +1764,6 @@ exports[`Compare Over Time should have an edit mode in Results View: Initial sta `; -exports[`Compare Over Time should remove the checked revision once X button is clicked 1`] = ` -
-
-
-
- - -
-
- - -
-
-
-
-
-
- - - -
-
-
- -
-
- -
-
-
-
-
- - - -
-
-
-
-
-
-
-
-
- -
- - -
-
-
-
-
-
-
-
-
    -
-
-
-
-
-
- - -
-
- - - -
-
-
- -
-
-
-`; - -exports[`Compare Over Time should update base repo, revisions and time-range after user changes them and clicks Compare in edit mode: After clicking Compare button 1`] = ` -
-
- -
-
-
-
- - -
-
- - -
-
-
-
- - autoland - -
-
-
- - Last 2 days - -
- (Oct 7, 2024 - Oct 9, 2024) -
-
-
-
-
- -
-
-
-
    -
  • - - -
    -
    - try -
    -
    -
    -
    - - - - coconut - - - - - -
    -
    - -
    - johncleese@python.com -
    -
    -
    - -
    - Mar 29, 51, 00:00 UTC -
    -
    -
    -     - - you've got no arms left! - -
    - -
    -
    • -
  • - - -
    -
    - autoland -
    -
    -
    -
    - - - - spamspamspam - - - - - -
    -
    - -
    - michaelpalin@python.com -
    -
    -
    - -
    - Jul 4, 20, 00:00 UTC -
    -
    -
    -     - - You've got two empty 'alves of coconuts and you're bangin' 'em togetha! - -
    - -
    -
    • -
-
-
-
- - -
-`; - -exports[`Compare Over Time should update base repo, revisions and time-range after user changes them and clicks Compare in edit mode: After clicking edit button 1`] = ` -
-
- -
-
-
-
- - -
-
- - -
-
-
-
-
-
- - - -
-
-
- -
-
- -
-
-
-
-
- - - -
-
-
-
-
-
-
-
-
- -
- - -
-
-
-
-
-
-
-
-
    -
  • - - -
    -
    - try -
    -
    -
    -
    - - - - coconut - - - - - -
    -
    - -
    - johncleese@python.com -
    -
    -
    - -
    - Mar 29, 51, 00:00 UTC -
    -
    -
    -     - - you've got no arms left! - -
    - -
    -
    • -
-
-
-
-
-
- - -
-
- - -
-`; - exports[`Compare Over Time should update base repo, revisions and time-range after user changes them and clicks Compare in edit mode: Initial state for the form 1`] = `
- -
- - + +
+ +
+ +
+ +
@@ -374,7 +414,7 @@ exports[`Compare With Base renders correctly when there are no results: Initial class="MuiFormControl-root search-dropdown f1o9jg5h css-1iw3t7y-MuiFormControl-root" >
- -
- - + +
+ +
+ +
+ +
@@ -658,7 +738,7 @@ exports[`Compare With Base selects and displays new framework when clicked 1`] =
    @@ -869,7 +949,7 @@ exports[`Compare With Base should have an edit mode in Results View: After click class="MuiFormControl-root search-dropdown f1o9jg5h css-1iw3t7y-MuiFormControl-root" >
    - -
    - - + +
    + +
    + +
    + +
    @@ -1174,7 +1294,7 @@ exports[`Compare With Base should have an edit mode in Results View: After click class="MuiFormControl-root search-dropdown f1o9jg5h css-1iw3t7y-MuiFormControl-root" >
    - -
    - - + +
    + +
    + +
    + +
    @@ -1383,7 +1543,7 @@ exports[`Compare With Base should have an edit mode in Results View: After click class="MuiFormControl-root search-dropdown f1o9jg5h css-1iw3t7y-MuiFormControl-root" >
    - -
    - - + +
    + +
    + +
    + +
    @@ -1688,7 +1888,7 @@ exports[`Compare With Base should have an edit mode in Results View: After click class="MuiFormControl-root search-dropdown f1o9jg5h css-1iw3t7y-MuiFormControl-root" >
    - -
    - - + +
    + +
    + +
    + +
    @@ -2061,7 +2301,7 @@ exports[`Compare With Base should have an edit mode in Results View: Initial sta class="MuiFormControl-root search-dropdown f1o9jg5h css-1iw3t7y-MuiFormControl-root" >
    - -
    - - + +
    + +
    + +
    + +
    @@ -2366,7 +2646,7 @@ exports[`Compare With Base should have an edit mode in Results View: Initial sta class="MuiFormControl-root search-dropdown f1o9jg5h css-1iw3t7y-MuiFormControl-root" >
    - -
    - - + +
    + +
    + +
    + +
    @@ -2743,7 +3063,7 @@ exports[`Compare With Base should have an edit mode in Results View: after remov class="MuiFormControl-root search-dropdown f1o9jg5h css-1iw3t7y-MuiFormControl-root" >
    - -
    - - + +
    + +
    + +
    + +
    @@ -2888,7 +3248,7 @@ exports[`Compare With Base should have an edit mode in Results View: after remov class="MuiFormControl-root search-dropdown f1o9jg5h css-1iw3t7y-MuiFormControl-root" >
    - -
    - - + +
    + +
    + +
    + +
    @@ -3297,7 +3697,7 @@ exports[`Compare With Base should have an edit mode in Results View: after remov class="MuiFormControl-root search-dropdown f1o9jg5h css-1iw3t7y-MuiFormControl-root" >
    - -
    - - + +
    + +
    + +
    + +
    @@ -3602,7 +4042,7 @@ exports[`Compare With Base should have an edit mode in Results View: after remov class="MuiFormControl-root search-dropdown f1o9jg5h css-1iw3t7y-MuiFormControl-root" >
    - -
    - - + +
    + +
    + +
    + +
    @@ -4773,7 +5253,7 @@ exports[`Compare With Base should remove the checked revision once X button is c exports[`Compare With Base updates the framework and url when a new one is selected: after awsy is selected 1`] = `
      diff --git a/src/__tests__/Search/__snapshots__/SearchContainer.test.tsx.snap b/src/__tests__/Search/__snapshots__/SearchContainer.test.tsx.snap index 8efc27d5d..ed8b045dd 100644 --- a/src/__tests__/Search/__snapshots__/SearchContainer.test.tsx.snap +++ b/src/__tests__/Search/__snapshots__/SearchContainer.test.tsx.snap @@ -90,7 +90,7 @@ exports[`Search Containter should match snapshot 1`] = ` class="MuiFormControl-root search-dropdown f1o9jg5h css-1iw3t7y-MuiFormControl-root" >
      - -
      - - + +
      + +
      + +
      + +
      @@ -235,7 +275,7 @@ exports[`Search Containter should match snapshot 1`] = ` class="MuiFormControl-root search-dropdown f1o9jg5h css-1iw3t7y-MuiFormControl-root" >
      - -
      - - + +
      + +
      + +
      + +
      @@ -373,7 +453,7 @@ exports[`Search Containter should match snapshot 1`] = `
- -
- - + +
+ +
+ +
+ +
@@ -796,7 +916,7 @@ exports[`Search Containter should match snapshot 1`] = `
-
    -
    -
  • -
    - - - - - - - -
    -
    - - - coconut - -
    -
    - - - - johncleese@python.com -
    -
    - -
    - Mar 29, 51, 00:00 UTC -
    -
    -
    -     - - you've got no arms left! - -
    -
    • -
    -
    -
  • -
    - - - - - - - -
    -
    - - - spam - -
    -
    - - - - ericidle@python.com -
    -
    - -
    - Feb 22, 58, 00:00 UTC -
    -
    -
    -     - - it's just a flesh wound - -
    -
    • -
    -
    -
  • -
    - - - - - - - -
    -
    - - - spamspam - -
    -
    - - - - terrygilliam@python.com -
    -
    - -
    - Jul 29, 87, 00:00 UTC -
    -
    -
    -     - - What, ridden on a horse? - -
    -
    • -
    -
    -
  • -
    - - - - - - - -
    -
    - - - spamspamspam - -
    -
    - - - - michaelpalin@python.com -
    -
    - -
    - Jul 4, 20, 00:00 UTC -
    -
    -
    -     - - You've got two empty 'alves of coconuts and you're bangin' 'em togetha! - -
    -
    • -
    -
    -
  • -
    - - - - - - - -
    -
    - - - spamspamspam - -
    -
    - - - - grahamchapman@python.com -
    -
    - -
    - Apr 13, 22, 00:00 UTC -
    -
    -
    -     - - She turned me into a newt! - -
    -
    • -
    -
    -
  • -
    - - - - - - - -
    -
    - - - ed24spamspam - -
    -
    - - - - nathanniy@python.com -
    -
    - -
    - Apr 13, 22, 00:03 UTC -
    -
    -
    -     - - Bug 123456 Fuzzy She turned me into a newt! - -
    -
    • -
    -
    -
  • -
    - - - - - - - -
    -
    - - - spamspamspam - -
    -
    - - - - grahamchapman@python.com -
    -
    - -
    - Apr 13, 22, 00:00 UTC -
    -
    -
    -     - - Commit message with no newline at the end - -
    -
    • -
    -
-
-`; - exports[`SearchResultsList should match snapshot 1`] = `
diff --git a/src/__tests__/Search/__snapshots__/SearchView.test.tsx.snap b/src/__tests__/Search/__snapshots__/SearchView.test.tsx.snap index 5a7e386c5..40c4b296c 100644 --- a/src/__tests__/Search/__snapshots__/SearchView.test.tsx.snap +++ b/src/__tests__/Search/__snapshots__/SearchView.test.tsx.snap @@ -42,11 +42,11 @@ exports[`Search View renders correctly when there are no results 1`] = ` type="checkbox" />
- -
- - + +
+ +
+ +
+ +
@@ -402,7 +442,7 @@ exports[`Search View renders correctly when there are no results 1`] = ` class="MuiFormControl-root search-dropdown f1o9jg5h css-1iw3t7y-MuiFormControl-root" >
- -
- - + +
+ +
+ +
+ +
@@ -540,7 +620,7 @@ exports[`Search View renders correctly when there are no results 1`] = `
- -
- - + +
+ +
+ +
+ +
@@ -963,7 +1083,7 @@ exports[`Search View renders correctly when there are no results 1`] = `
- -
- - + +
+ +
+ +
+ +
@@ -1500,7 +1660,7 @@ exports[`With search parameters both search components are populated as expected
- -
- - + +
+ +
+ +
+ +
@@ -1743,7 +1943,7 @@ exports[`With search parameters both search components are populated as expected class="MuiFormControl-root search-dropdown f1o9jg5h css-1iw3t7y-MuiFormControl-root" >
- -
- - + +
+ +
+ +
+ +
@@ -2021,7 +2261,7 @@ exports[`With search parameters both search components are populated as expected
- -
- - + +
+ +
+ +
+ +
@@ -2551,7 +2831,7 @@ exports[`With search parameters both search components are populated as expected
- -
- - + +
+ +
+ +
+ +
@@ -2794,7 +3114,7 @@ exports[`With search parameters both search components are populated as expected class="MuiFormControl-root search-dropdown f1o9jg5h css-1iw3t7y-MuiFormControl-root" >
- -
- - + +
+ +
+ +
+ +
@@ -3072,7 +3432,7 @@ exports[`With search parameters both search components are populated as expected
- -
- - + +
+ +
+ +
+ +
@@ -3602,7 +4002,7 @@ exports[`With search parameters displays the default value for framework if the
- -
- - + +
+ +
+ +
+ +
@@ -3845,7 +4285,7 @@ exports[`With search parameters displays the default value for framework if the class="MuiFormControl-root search-dropdown f1o9jg5h css-1iw3t7y-MuiFormControl-root" >
- -
- - + +
+ +
+ +
+ +
@@ -4123,7 +4603,7 @@ exports[`With search parameters displays the default value for framework if the
- -
- - + +
+ +
+ +
+ +
@@ -4513,7 +5033,7 @@ exports[`With search parameters displays the default values if some values are b
- -
- - + +
+ +
+ +
+ +
@@ -4756,7 +5316,7 @@ exports[`With search parameters displays the default values if some values are b class="MuiFormControl-root search-dropdown f1o9jg5h css-1iw3t7y-MuiFormControl-root" >
- -
- - + +
+ +
+ +
+ +
@@ -4894,7 +5494,7 @@ exports[`With search parameters displays the default values if some values are b
state.theme.mode); + + // Styling from original SearchInput + const inputStyles = { + container: style({ + $nest: { + '.hide': { + visibility: 'hidden', + }, + '.search-text-field': { + width: '100%', + }, + '.MuiInputBase-root': { + ...(mode == 'light' ? InputStylesRaw.Light : InputStylesRaw.Dark), + flexDirection: 'row', + }, + }, + }), + inputAdornment: { + marginLeft: `${Spacing.Small}px`, + marginRight: 0, + }, + }; + + return ( + + + + + ), + }, + htmlInput: { + 'aria-label': inputPlaceholder, + ...params.inputProps, + }, + }} + /> + + ); +} + +export default AutocompleteInput; diff --git a/src/components/Search/AutocompleteOption.tsx b/src/components/Search/AutocompleteOption.tsx new file mode 100644 index 000000000..1a27a28bc --- /dev/null +++ b/src/components/Search/AutocompleteOption.tsx @@ -0,0 +1,136 @@ +import { HTMLAttributes } from 'react'; + +import AccessTimeOutlinedIcon from '@mui/icons-material/AccessTimeOutlined'; +import MailOutlineOutlinedIcon from '@mui/icons-material/MailOutlineOutlined'; +import Box from '@mui/material/Box'; +import Checkbox from '@mui/material/Checkbox'; +import Radio from '@mui/material/Radio'; +import Typography from '@mui/material/Typography'; +import { style } from 'typestyle'; + +import DateTimeDisplay from './DateTimeDisplay'; +import { Spacing } from '../../styles'; +import type { Changeset } from '../../types/state'; +import { truncateHash, getLatestCommitMessage } from '../../utils/helpers'; + +interface AutocompleteOptionProps { + index: number; + item: Changeset; + isChecked: boolean; + onToggle: (item: Changeset) => void; + listItemComponent?: 'checkbox' | 'radio'; +} + +type AutocompleteOptionWithHTMLProps = AutocompleteOptionProps & + Omit, 'onToggle'>; + +const styles = { + container: style({ + display: 'flex', + alignItems: 'flex-start', + padding: `${Spacing.xSmall}px ${Spacing.Small}px`, + paddingTop: 0, + cursor: 'pointer', + width: '100%', + $nest: { + '&:hover': { + backgroundColor: 'inherit', // Let parent handle hover + }, + '.search-revision-item-icon': { + minWidth: '0', + }, + '.search-revision-item-text': { + flex: 1, + }, + '.MuiListItemText-primary': { + display: 'flex', + justifyContent: 'space-between', + flexWrap: 'wrap', + }, + '.info-caption': { + flexWrap: 'wrap', + $nest: { + svg: { + marginRight: `${Spacing.xSmall}px`, + fontSize: '1rem', + }, + '.item-author': { + marginRight: `${Spacing.xSmall + 1}px`, + }, + }, + }, + }, + }), +}; + +function AutocompleteOption({ + index, + item, + isChecked, + onToggle, + listItemComponent, + ...htmlProps +}: AutocompleteOptionWithHTMLProps) { + const ListItemComponent = listItemComponent === 'radio' ? Radio : Checkbox; + const revisionHash = truncateHash(item.revision); + const commitMessage = getLatestCommitMessage(item); + const itemDate = new Date(item.push_timestamp * 1000); + + const onToggleAction = () => { + onToggle(item); + }; + + return ( +
  • + + + + + + + + {revisionHash} + +
    +
    + + {item.author} +
    + +
    + + +
    +
    +     + + + {commitMessage} + +     +
    • + ); +} + +export default AutocompleteOption; diff --git a/src/components/Search/SearchInputAndResults.tsx b/src/components/Search/SearchInputAndResults.tsx index 0d6a0c6b3..c4d777f4b 100644 --- a/src/components/Search/SearchInputAndResults.tsx +++ b/src/components/Search/SearchInputAndResults.tsx @@ -1,11 +1,29 @@ -import { useState, useEffect, useCallback, useRef } from 'react'; +import { + useState, + useEffect, + useCallback, + useRef, + HTMLAttributes, +} from 'react'; +import Autocomplete, { + AutocompleteRenderInputParams, +} from '@mui/material/Autocomplete'; import Box from '@mui/material/Box'; +import { style } from 'typestyle'; -import SearchInput from './SearchInput'; -import SearchResultsList from './SearchResultsList'; +import AutocompleteInput from './AutocompleteInput'; +import AutocompleteOption from './AutocompleteOption'; +import { useAppSelector } from '../../hooks/app'; import { fetchRecentRevisions } from '../../logic/treeherder'; import { Strings } from '../../resources/Strings'; +import { + Colors, + FontsRaw, + Spacing, + captionStylesLight, + captionStylesDark, +} from '../../styles'; import type { Changeset, Repository } from '../../types/state'; import { simpleDebounce } from '../../utils/simple-debounce'; @@ -28,7 +46,9 @@ export default function SearchInputAndResults({ onSearchResultsToggle, listItemComponent, }: Props) { - const [displayDropdown, setDisplayDropdown] = useState(false); + const mode = useAppSelector((state) => state.theme.mode); + + // const [displayDropdown, setDisplayDropdown] = useState(false); const [recentRevisions, setRecentRevisions] = useState( null as null | Changeset[], ); @@ -45,26 +65,110 @@ export default function SearchInputAndResults({ const containerRef = useRef(null as null | HTMLElement); - const handleDocumentMousedown = useCallback( - (e: MouseEvent) => { - if (!displayDropdown) { - return; - } - const target = e.target as HTMLElement; - if (!containerRef.current?.contains(target)) { - // Close the dropdown only if the click is outside the search input or one - // of it's descendants. - setDisplayDropdown(false); - } - }, - [displayDropdown], - ); + // Styling from original SearchResultsList + const sharedSelectStyles = { + borderRadius: '4px', + marginTop: `${Spacing.xSmall}px`, + maxHeight: '285px', + overflow: 'auto', + maxWidth: '100%', + padding: `${Spacing.xSmall}px`, + border: `1px solid ${Colors.BorderDefault}`, + zIndex: 100, + }; + + const getListStyles = (theme: string) => { + const backgroundColor = + theme === 'light' ? Colors.Background300 : Colors.Background300Dark; + const hoverColor = + theme === 'light' ? Colors.SecondaryHover : Colors.SecondaryHoverDark; + const activeColor = + theme === 'light' ? Colors.SecondaryActive : Colors.SecondaryActiveDark; + const captionStyle = + theme === 'light' ? captionStylesLight : captionStylesDark; + + return style({ + backgroundColor, + position: 'relative', + ...sharedSelectStyles, + $nest: { + // Autocomplete option highlighting + 'li[aria-selected="true"]': { + backgroundColor: `${hoverColor} !important`, + borderRadius: '4px', + paddingTop: `${Spacing.xSmall}px`, + }, + 'li:hover': { + backgroundColor: `${hoverColor} !important`, + borderRadius: '4px', + paddingTop: `${Spacing.xSmall}px`, + }, + 'li[data-focus="true"]': { + backgroundColor: `${hoverColor} !important`, + borderRadius: '4px', + paddingTop: `${Spacing.xSmall}px`, + }, + 'li.Mui-focused': { + backgroundColor: `${hoverColor} !important`, + borderRadius: '4px', + paddingTop: `${Spacing.xSmall}px`, + }, + // General li styling for all options + li: { + paddingTop: `${Spacing.xSmall}px`, + }, + // Original list item button styles (keeping for compatibility) + '.MuiListItemButton-root': { + padding: `${Spacing.xSmall}px ${Spacing.Small}px`, + $nest: { + '&:hover': { + backgroundColor: hoverColor, + borderRadius: '4px', + }, + '&:active': { + backgroundColor: activeColor, + borderRadius: '4px', + }, + }, + }, + '.item-selected': { + backgroundColor: hoverColor, + borderRadius: '4px', + }, + '.revision-hash': { + ...FontsRaw.BodyDefault, + marginRight: Spacing.Small, + }, + '.info-caption': { + ...captionStyle, + }, + '.MuiTypography-root': { + ...FontsRaw.BodyDefault, + }, + }, + }); + }; - const handleEscKeypress = useCallback((e: KeyboardEvent) => { - if (e.key === 'Escape') { - setDisplayDropdown(false); - } - }, []); + // const handleDocumentMousedown = useCallback( + // (e: MouseEvent) => { + // if (!displayDropdown) { + // return; + // } + // const target = e.target as HTMLElement; + // if (!containerRef.current?.contains(target)) { + // // Close the dropdown only if the click is outside the search input or one + // // of it's descendants. + // setDisplayDropdown(false); + // } + // }, + // [displayDropdown], + // ); + + // const handleEscKeypress = useCallback((e: KeyboardEvent) => { + // if (e.key === 'Escape') { + // setDisplayDropdown(false); + // } + // }, []); const searchRecentRevisions = useCallback( async (searchTerm: string) => { @@ -159,23 +263,48 @@ export default function SearchInputAndResults({ void searchRecentRevisions(lastSearchTermRef.current); }, [repository]); - useEffect(() => { - document.addEventListener('mousedown', handleDocumentMousedown); - return () => { - document.removeEventListener('mousedown', handleDocumentMousedown); - }; - }, [handleDocumentMousedown]); + // useEffect(() => { + // document.addEventListener('mousedown', handleDocumentMousedown); + // return () => { + // document.removeEventListener('mousedown', handleDocumentMousedown); + // }; + // }, [handleDocumentMousedown]); - useEffect(() => { - document.addEventListener('keydown', handleEscKeypress); - return () => { - document.removeEventListener('keydown', handleEscKeypress); - }; - }, [handleEscKeypress]); + // useEffect(() => { + // document.addEventListener('keydown', handleEscKeypress); + // return () => { + // document.removeEventListener('keydown', handleEscKeypress); + // }; + // }, [handleEscKeypress]); + + const renderInput = (params: AutocompleteRenderInputParams) => ( + + ); + + const renderOption = ( + props: HTMLAttributes, + option: Changeset, + ) => ( + rev.id).includes(option.id)} + onToggle={onSearchResultsToggle} + listItemComponent={listItemComponent} + /> + ); return ( - setDisplayDropdown(true)} compact={compact} inputPlaceholder={inputPlaceholder} @@ -192,7 +321,38 @@ export default function SearchInputAndResults({ onToggle={onSearchResultsToggle} listItemComponent={listItemComponent} /> - )} + )} */} + + options.revision} + isOptionEqualToValue={(option, value) => option.id === value.id} + multiple={listItemComponent === 'checkbox'} + disableCloseOnSelect={listItemComponent === 'checkbox'} + filterOptions={(options) => options} + onInputChange={(_, value) => onValueChange(value)} + onChange={(_, value) => { + if (value) { + if (Array.isArray(value)) { + // Handle multiple selection (checkbox mode) + value.forEach((item) => onSearchResultsToggle(item)); + } else { + // Handle single selection (radio mode) + onSearchResultsToggle(value); + } + } + }} + renderInput={renderInput} + renderOption={renderOption} + loading={recentRevisions?.length === 0} + loadingText={'Loading...'} + noOptionsText={searchError || 'No results found'} + slotProps={{ + listbox: { + className: getListStyles(mode), + }, + }} + /> ); } From 4d9e7c9d756eab7aa85ceabcc4284e4b6275eb31 Mon Sep 17 00:00:00 2001 From: esanuandra Date: Wed, 27 Aug 2025 11:11:30 +0300 Subject: [PATCH 2/7] fix tests --- .../__snapshots__/ResultsTable.test.tsx.snap | 8 + src/__tests__/Search/CompareOverTime.test.tsx | 33 +- src/__tests__/Search/CompareWithBase.test.tsx | 8 +- .../Search/SearchResultsList.test.tsx | 80 +- src/__tests__/Search/SearchView.test.tsx | 46 +- .../Search/SelectedRevision.test.tsx | 49 +- .../CompareOverTime.test.tsx.snap | 1472 ++++++++- .../CompareWithBase.test.tsx.snap | 382 ++- .../SearchContainer.test.tsx.snap | 6 + .../SearchResultsList.test.tsx.snap | 2710 +++++++++++------ .../__snapshots__/SearchView.test.tsx.snap | 54 +- .../Search/fetchRecentRevisions.test.tsx | 19 +- .../Search/fetchRevisionByID.test.tsx | 30 +- .../Search/fetchRevisionsBySearch.test.tsx | 25 +- src/__tests__/Snackbar.test.tsx | 18 +- src/components/Search/AutocompleteInput.tsx | 1 + src/components/Search/AutocompleteOption.tsx | 2 + .../Search/SearchInputAndResults.tsx | 58 +- 18 files changed, 3838 insertions(+), 1163 deletions(-) diff --git a/src/__tests__/CompareResults/__snapshots__/ResultsTable.test.tsx.snap b/src/__tests__/CompareResults/__snapshots__/ResultsTable.test.tsx.snap index 0f743899c..f931cdeac 100644 --- a/src/__tests__/CompareResults/__snapshots__/ResultsTable.test.tsx.snap +++ b/src/__tests__/CompareResults/__snapshots__/ResultsTable.test.tsx.snap @@ -304,12 +304,14 @@ exports[`Results Table Should match snapshot 1`] = ` >
    { const user = userEvent.setup({ advanceTimers: jest.advanceTimersByTime }); // Click inside the input box to show search results. - const searchInput = screen.getByRole('textbox'); + + // focus input to show results + const searchInput = screen.getAllByPlaceholderText( + searchRevisionPlaceholder, + )[2]; await user.click(searchInput); const comment = await screen.findAllByText("you've got no arms left!"); @@ -281,7 +288,9 @@ describe('Compare Over Time', () => { expect(within(formElement).getByText(/Time range/)).toBeInTheDocument(); - const searchInput = screen.getByRole('textbox'); + const searchInput = screen.getAllByPlaceholderText( + searchRevisionPlaceholder, + )[2]; await user.click(searchInput); const checkbox = await screen.findByTestId('checkbox-0'); await user.click(checkbox); @@ -310,7 +319,10 @@ describe('Compare Over Time', () => { const user = userEvent.setup({ advanceTimers: jest.advanceTimersByTime }); // focus input to show results - const searchInput = screen.getByRole('textbox'); + const searchInput = screen.getAllByPlaceholderText( + searchRevisionPlaceholder, + )[2]; + await user.click(searchInput); const noArmsLeft = await screen.findByText(/no arms left/); @@ -368,8 +380,10 @@ describe('Compare Over Time', () => { ).toBeInTheDocument(); // focus first input to show results - const inputs = screen.getAllByRole('textbox'); - await user.click(inputs[0]); + const searchInputs = screen.getAllByPlaceholderText( + searchRevisionPlaceholder, + ); + await user.click(searchInputs[2]); // Select a rev const items = await screen.findAllByText("you've got no arms left!"); @@ -534,14 +548,17 @@ describe('Compare Over Time', () => { expect(formElement).toMatchSnapshot('After clicking edit button'); expect(editButton).not.toBeVisible(); - //add a new revision - const searchInput = within(formElement).getByRole('textbox'); + // add a new revision + const searchInput = screen.getAllByPlaceholderText( + searchRevisionPlaceholder, + )[0]; + await user.click(searchInput); const alvesOfCoconut = await screen.findByText(/alves of coconuts/); await user.click(alvesOfCoconut); expect(checkboxForText(alvesOfCoconut)).toHaveClass('Mui-checked'); - //change time range + // change time range const timeRangeDropdown = screen.getByRole('combobox', { name: /Time range/i, }); diff --git a/src/__tests__/Search/CompareWithBase.test.tsx b/src/__tests__/Search/CompareWithBase.test.tsx index 6bd1f506b..fa810107b 100644 --- a/src/__tests__/Search/CompareWithBase.test.tsx +++ b/src/__tests__/Search/CompareWithBase.test.tsx @@ -11,6 +11,9 @@ import { Strings } from '../../resources/Strings'; import getTestData from '../utils/fixtures'; import { screen, renderWithRouter, within, waitFor } from '../utils/test-utils'; +const searchRevisionPlaceholder = + Strings.components.searchDefault.base.collapsed.base.inputPlaceholder; + function setUpTestData() { const { testData } = getTestData(); fetchMock @@ -165,7 +168,10 @@ describe('Compare With Base', () => { // set delay to null to prevent test time-out due to useFakeTimers const user = userEvent.setup({ advanceTimers: jest.advanceTimersByTime }); - const searchInput = screen.getAllByRole('textbox')[0]; + // focus input to show results + const searchInput = screen.getAllByPlaceholderText( + searchRevisionPlaceholder, + )[1]; await user.click(searchInput); const checkbox = (await screen.findAllByTestId('checkbox-0'))[0]; await user.click(checkbox); diff --git a/src/__tests__/Search/SearchResultsList.test.tsx b/src/__tests__/Search/SearchResultsList.test.tsx index 69079aad4..e8b083232 100644 --- a/src/__tests__/Search/SearchResultsList.test.tsx +++ b/src/__tests__/Search/SearchResultsList.test.tsx @@ -5,7 +5,7 @@ import { loader } from '../../components/Search/loader'; import SearchView from '../../components/Search/SearchView'; import { Strings } from '../../resources/Strings'; import getTestData from '../utils/fixtures'; -import { screen, within, renderWithRouter } from '../utils/test-utils'; +import { screen, renderWithRouter, fireEvent } from '../utils/test-utils'; async function renderComponent() { renderWithRouter(, { @@ -32,8 +32,12 @@ describe('SearchResultsList', () => { const user = userEvent.setup({ advanceTimers: jest.advanceTimersByTime }); await renderComponent(); + + const placeholder = + Strings.components.searchDefault.base.collapsed.base.inputPlaceholder; + // focus input to show results - const searchInput = screen.getAllByRole('textbox')[0]; + const searchInput = screen.getAllByPlaceholderText(placeholder)[0]; await user.click(searchInput); await screen.findByText(/flesh wound/); expect(document.body).toMatchSnapshot(); @@ -44,11 +48,20 @@ describe('SearchResultsList', () => { const user = userEvent.setup({ advanceTimers: jest.advanceTimersByTime }); await renderComponent(); - // focus input to show results - const searchInput = screen.getAllByRole('textbox')[0]; - await user.click(searchInput); - const fleshWound = await screen.findAllByText("it's just a flesh wound"); + const autocomplete = screen.getAllByTestId('autocomplete')[0]; + + // open dropdown using keyboard arrow down + fireEvent.keyDown(autocomplete, { + key: 'ArrowDown', + code: 'ArrowDown', + charCode: 40, + }); + + // Wait for the dropdown to open and results to load + await screen.findAllByRole('textbox'); + + const fleshWound = await screen.findAllByText(/it's just a flesh wound/); await user.click(fleshWound[0]); expect(screen.getAllByTestId('checkbox-1')[0]).toHaveClass('Mui-checked'); @@ -60,23 +73,29 @@ describe('SearchResultsList', () => { await renderComponent(); - // focus input to show results - const searchInput = screen.getAllByRole('textbox')[0]; - await user.click(searchInput); + const autocomplete = screen.getAllByTestId('autocomplete')[0]; - const fleshWound = await screen.findByRole('button', { - name: /it's just a flesh wound/, + // open dropdown using keyboard arrow down + fireEvent.keyDown(autocomplete, { + key: 'ArrowDown', + code: 'ArrowDown', + charCode: 40, }); - const fleshWoundCheckbox = within(fleshWound).getByRole('radio'); + + // Wait for the dropdown to open and results to load + await screen.findAllByRole('textbox'); + + const autocompleteOptions = await screen.findAllByTestId( + 'autocomplete-option', + ); + const fleshWound = autocompleteOptions[0]; await user.click(fleshWound); expect(fleshWound).toHaveClass('item-selected'); - expect(fleshWoundCheckbox).toBeChecked(); expect(fleshWound.querySelector('.Mui-checked')).toBeInTheDocument(); await user.click(fleshWound); expect(fleshWound).not.toHaveClass('item-selected'); - expect(fleshWoundCheckbox).not.toBeChecked(); expect(fleshWound.querySelector('.Mui-checked')).toBeNull(); }); @@ -85,9 +104,15 @@ describe('SearchResultsList', () => { const user = userEvent.setup({ advanceTimers: jest.advanceTimersByTime }); await renderComponent(); - // focus input to show results - const searchInput = screen.getAllByRole('textbox')[0]; - await user.click(searchInput); + const autocomplete = screen.getAllByTestId('autocomplete')[0]; + + // open dropdown using keyboard arrow down + fireEvent.keyDown(autocomplete, { + key: 'ArrowDown', + code: 'ArrowDown', + charCode: 40, + }); + await user.click((await screen.findAllByTestId('checkbox-0'))[0]); await user.click(screen.getAllByTestId('checkbox-1')[0]); @@ -111,8 +136,12 @@ describe('SearchResultsList', () => { const user = userEvent.setup({ advanceTimers: jest.advanceTimersByTime }); await renderComponent(); + + const placeholder = + Strings.components.searchDefault.base.collapsed.base.inputPlaceholder; + // focus input to show results - const searchInput = screen.getAllByRole('textbox')[1]; + const searchInput = screen.getAllByPlaceholderText(placeholder)[1]; await user.click(searchInput); const noArmsLeft = await screen.findByText(/no arms left/); @@ -146,10 +175,17 @@ describe('SearchResultsList', () => { await user.click(darkModeToggle); expect(screen.getByLabelText('Light mode')).toBeInTheDocument(); - const searchInput = screen.getAllByRole('textbox')[0]; - await user.click(searchInput); - const resultsList = screen.getByTestId('list-mode'); - expect(resultsList).toMatchSnapshot('after toggling dark mode'); + const autocomplete = screen.getAllByTestId('autocomplete')[0]; + + // open dropdown using keyboard arrow down + fireEvent.keyDown(autocomplete, { + key: 'ArrowDown', + code: 'ArrowDown', + charCode: 40, + }); + + const resultsList = screen.getByRole('listbox'); + expect(resultsList).toMatchSnapshot('after toggling dark mode 1'); expect(resultsList).toHaveClass('results-list-dark'); }); }); diff --git a/src/__tests__/Search/SearchView.test.tsx b/src/__tests__/Search/SearchView.test.tsx index a65845280..f6b256b3d 100644 --- a/src/__tests__/Search/SearchView.test.tsx +++ b/src/__tests__/Search/SearchView.test.tsx @@ -18,6 +18,8 @@ import { } from '../utils/test-utils'; const baseTitle = Strings.components.searchDefault.base.title; +const searchRevisionPlaceholder = + Strings.components.searchDefault.base.collapsed.base.inputPlaceholder; function setupTestData() { const { testData } = getTestData(); @@ -191,7 +193,9 @@ describe('Base and OverTime Search', () => { await renderComponent(); // Click inside the input box to show search results. - const searchInput = screen.getAllByRole('textbox')[0]; + const searchInput = screen.getAllByPlaceholderText( + searchRevisionPlaceholder, + )[0]; await user.click(searchInput); const comment = await screen.findAllByText("you've got no arms left!"); @@ -210,7 +214,9 @@ describe('Base and OverTime Search', () => { // Click inside the input box to show search results. - const searchInput = screen.getAllByRole('textbox')[0]; + const searchInput = screen.getAllByPlaceholderText( + searchRevisionPlaceholder, + )[0]; await user.click(searchInput); const comment = await screen.findAllByText("you've got no arms left!"); @@ -227,7 +233,9 @@ describe('Base and OverTime Search', () => { const user = userEvent.setup({ advanceTimers: jest.advanceTimersByTime }); await renderComponent(); - const searchInput = screen.getAllByRole('textbox')[0]; + const searchInput = screen.getAllByPlaceholderText( + searchRevisionPlaceholder, + )[0]; // We're running fake timers after each user action, because the input // normally waits 500ms before doing requests. Because we want to test the @@ -242,11 +250,10 @@ describe('Base and OverTime Search', () => { await user.type(searchInput, 'sp'); act(() => void jest.runAllTimers()); - expect( - await screen.findByText( - 'The search input must be at least three characters.', - ), - ).toBeInTheDocument(); + const messages = await screen.findAllByText( + 'The search input must be at least three characters.', + ); + expect(messages[0]).toBeInTheDocument(); // fetch is called 6 times: // - 3 times on initial load: one for each input, that is 2 in "compare with @@ -265,7 +272,9 @@ describe('Base and OverTime Search', () => { const user = userEvent.setup({ advanceTimers: jest.advanceTimersByTime }); await renderComponent(); - const searchInput = screen.getAllByRole('textbox')[0]; + const searchInput = screen.getAllByPlaceholderText( + searchRevisionPlaceholder, + )[0]; await user.click(searchInput); // Wait until the dropdown appears as the result of the focus. @@ -278,11 +287,10 @@ describe('Base and OverTime Search', () => { ).not.toBeInTheDocument(); // But this appears after a while. - expect( - await screen.findByText( - 'The search input must be at least three characters.', - ), - ).toBeInTheDocument(); + const messages = await screen.findAllByText( + 'The search input must be at least three characters.', + ); + expect(messages[0]).toBeInTheDocument(); await user.type(searchInput, 'hncleese'); await user.type(searchInput, '@python.co'); await user.type(searchInput, 'm'); @@ -317,7 +325,9 @@ describe('Base and OverTime Search', () => { const user = userEvent.setup({ advanceTimers: jest.advanceTimersByTime }); await renderComponent(); - const searchInput = screen.getAllByRole('textbox')[0]; + const searchInput = screen.getAllByPlaceholderText( + searchRevisionPlaceholder, + )[0]; await user.type(searchInput, 'terrygilliam@python.com'); act(() => void jest.runAllTimers()); @@ -341,7 +351,9 @@ describe('Base and OverTime Search', () => { await renderComponent(); // focus input to show results - const searchInput = screen.getAllByRole('textbox')[0]; + const searchInput = screen.getAllByPlaceholderText( + searchRevisionPlaceholder, + )[0]; await user.click(searchInput); await screen.findAllByText("you've got no arms left!"); @@ -416,7 +428,7 @@ describe('Base and OverTime Search', () => { ).toBeInTheDocument(); // focus first input to show results - const inputs = screen.getAllByRole('textbox'); + const inputs = screen.getAllByPlaceholderText(searchRevisionPlaceholder); await user.click(inputs[0]); // Select a base rev diff --git a/src/__tests__/Search/SelectedRevision.test.tsx b/src/__tests__/Search/SelectedRevision.test.tsx index 1e5665a2f..08e6f4813 100644 --- a/src/__tests__/Search/SelectedRevision.test.tsx +++ b/src/__tests__/Search/SelectedRevision.test.tsx @@ -7,6 +7,9 @@ import { Strings } from '../../resources/Strings'; import getTestData from '../utils/fixtures'; import { screen, within, renderWithRouter } from '../utils/test-utils'; +const searchRevisionPlaceholder = + Strings.components.searchDefault.base.collapsed.base.inputPlaceholder; + async function renderComponent() { renderWithRouter(, { loader, @@ -31,12 +34,15 @@ describe('SelectedRevision', () => { await renderComponent(); // focus input to show results - const searchInput = screen.getAllByRole('textbox')[0]; + const searchInput = screen.getAllByPlaceholderText( + searchRevisionPlaceholder, + )[0]; await user.click(searchInput); - const noArmsLeft = await screen.findByRole('button', { - name: /you've got no arms left!/, - }); + const autocompleteOptions = await screen.findAllByTestId( + 'autocomplete-option', + ); + const noArmsLeft = autocompleteOptions[0]; const noArmsLeftCheckbox = within(noArmsLeft).getByRole('radio'); await user.click(noArmsLeft); @@ -69,11 +75,13 @@ describe('SelectedRevision', () => { 'Search by revision ID or author email', )[0]; await user.click(firstSearchInput); - await user.click( - await screen.findByRole('button', { - name: /you've got no arms left!/, - }), + + const autocompleteOptions = await screen.findAllByTestId( + 'autocomplete-option', ); + const noArmsLeft = autocompleteOptions[0]; + + await user.click(noArmsLeft); const newDropdown = screen.getByRole('combobox', { name: 'Revisions', @@ -92,11 +100,15 @@ describe('SelectedRevision', () => { it('should copy hash number when copyicon is clicked', async () => { const user = userEvent.setup({ advanceTimers: jest.advanceTimersByTime }); await renderComponent(); - const searchInput = screen.getAllByRole('textbox')[0]; + const searchInput = screen.getAllByPlaceholderText( + searchRevisionPlaceholder, + )[0]; await user.click(searchInput); - const noArmsLeft = await screen.findByRole('button', { - name: /you've got no arms left!/, - }); + + const autocompleteOptions = await screen.findAllByTestId( + 'autocomplete-option', + ); + const noArmsLeft = autocompleteOptions[0]; await user.click(noArmsLeft); const copyIcon = screen.getByTestId('copy-icon'); await user.click(copyIcon); @@ -106,11 +118,16 @@ describe('SelectedRevision', () => { it('should handle copy failure when clipboard API fails', async () => { const user = userEvent.setup({ advanceTimers: jest.advanceTimersByTime }); await renderComponent(); - const searchInput = screen.getAllByRole('textbox')[0]; + + const searchInput = screen.getAllByPlaceholderText( + searchRevisionPlaceholder, + )[0]; await user.click(searchInput); - const noArmsLeft = await screen.findByRole('button', { - name: /you've got no arms left!/, - }); + + const autocompleteOptions = await screen.findAllByTestId( + 'autocomplete-option', + ); + const noArmsLeft = autocompleteOptions[0]; await user.click(noArmsLeft); const consoleErrorSpy = jest .spyOn(console, 'error') diff --git a/src/__tests__/Search/__snapshots__/CompareOverTime.test.tsx.snap b/src/__tests__/Search/__snapshots__/CompareOverTime.test.tsx.snap index 16c1a46e9..c0bbcd4ee 100644 --- a/src/__tests__/Search/__snapshots__/CompareOverTime.test.tsx.snap +++ b/src/__tests__/Search/__snapshots__/CompareOverTime.test.tsx.snap @@ -244,12 +244,14 @@ exports[`Compare Over Time renders correctly in Search View: Initial state for t >
    `; +exports[`Compare Over Time should remove the checked revision once X button is clicked 1`] = ` + +
    +
    +
    + + +
    +
    + + +
    +
    +
    +
    +
    +
    + + + +
    +
    +
    + +
    +
    + +
    +
    +
    +
    +
    + + + +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    + + +
    + +
    + +
    + +
    +
    +
    +
    +
    +
    +
    +
    +
    +
      +
    +
    +
    +
    +
    +
    + + +
    +
    + + + +
    +
    +
    + +
    +
    + +`; + +exports[`Compare Over Time should update base repo, revisions and time-range after user changes them and clicks Compare in edit mode: After clicking Compare button 1`] = ` +
    +
    + +
    +
    +
    +
    + + +
    +
    + + +
    +
    +
    +
    + + autoland + +
    +
    +
    + + Last 2 days + +
    + (Oct 7, 2024 - Oct 9, 2024) +
    +
    +
    +
    +
    + +
    +
    +
    +
      +
    • + + +
      +
      + try +
      +
      +
      +
      + + + + coconut + + + + + +
      +
      + +
      + johncleese@python.com +
      +
      +
      + +
      + Mar 29, 51, 00:00 UTC +
      +
      +
      +       + + you've got no arms left! + +
      + +
      +
      • +
    • + + +
      +
      + autoland +
      +
      +
      +
      + + + + spamspamspam + + + + + +
      +
      + +
      + michaelpalin@python.com +
      +
      +
      + +
      + Jul 4, 20, 00:00 UTC +
      +
      +
      +       + + You've got two empty 'alves of coconuts and you're bangin' 'em togetha! + +
      + +
      +
      • +
    +
    +
    +
    + + +
    +`; + +exports[`Compare Over Time should update base repo, revisions and time-range after user changes them and clicks Compare in edit mode: After clicking edit button 1`] = ` +
    +
    + +
    +
    +
    +
    + + +
    +
    + + +
    +
    +
    +
    +
    +
    + + + +
    +
    +
    + +
    +
    + +
    +
    +
    +
    +
    + + + +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    + + +
    + +
    + +
    + +
    +
    +
    +
    +
    +
    +
    +
    +
    +
      +
    • + + +
      +
      + try +
      +
      +
      +
      + + + + coconut + + + + + +
      +
      + +
      + johncleese@python.com +
      +
      +
      + +
      + Mar 29, 51, 00:00 UTC +
      +
      +
      +       + + you've got no arms left! + +
      + +
      +
      • +
    +
    +
    +
    +
    +
    + + +
    +
    + + +
    +`; + exports[`Compare Over Time should update base repo, revisions and time-range after user changes them and clicks Compare in edit mode: Initial state for the form 1`] = `
    - -
    - - + +
    + +
    + +
    + +
    @@ -4630,7 +4696,7 @@ exports[`Compare With Base should remove the checked revision once X button is c class="MuiFormControl-root search-dropdown f1o9jg5h css-1iw3t7y-MuiFormControl-root" >
    - -
    - - + +
    + +
    + +
    + +
    @@ -4768,7 +4876,7 @@ exports[`Compare With Base should remove the checked revision once X button is c
    - -
    - - + +
    + +
    + +
    + +
    @@ -5191,7 +5341,7 @@ exports[`Compare With Base should remove the checked revision once X button is c
    diff --git a/src/__tests__/Search/__snapshots__/SearchContainer.test.tsx.snap b/src/__tests__/Search/__snapshots__/SearchContainer.test.tsx.snap index ed8b045dd..15e175789 100644 --- a/src/__tests__/Search/__snapshots__/SearchContainer.test.tsx.snap +++ b/src/__tests__/Search/__snapshots__/SearchContainer.test.tsx.snap @@ -133,12 +133,14 @@ exports[`Search Containter should match snapshot 1`] = ` >
    +
  • +
    + + + + + + + +
    +
    +
    + + coconut + +
    +
    + + johncleese@python.com +
    +
    + +
    + Mar 29, 51, 00:00 UTC +
    +
    +
    +
    + + you've got no arms left! + +
    +
    • +
  • +
    + + + + + + + +
    +
    +
    + + spam + +
    +
    + + ericidle@python.com +
    +
    + +
    + Feb 22, 58, 00:00 UTC +
    +
    +
    +
    + + it's just a flesh wound + +
    +
    • +
  • +
    + + + + + + + +
    +
    +
    + + spamspam + +
    +
    + + terrygilliam@python.com +
    +
    + +
    + Jul 29, 87, 00:00 UTC +
    +
    +
    +
    + + What, ridden on a horse? + +
    +
    • +
  • +
    + + + + + + + +
    +
    +
    + + spamspamspam + +
    +
    + + michaelpalin@python.com +
    +
    + +
    + Jul 4, 20, 00:00 UTC +
    +
    +
    +
    + + You've got two empty 'alves of coconuts and you're bangin' 'em togetha! + +
    +
    • +
  • +
    + + + + + + + +
    +
    +
    + + spamspamspam + +
    +
    + + grahamchapman@python.com +
    +
    + +
    + Apr 13, 22, 00:00 UTC +
    +
    +
    +
    + + She turned me into a newt! + +
    +
    • +
  • +
    + + + + + + + +
    +
    +
    + + ed24spamspam + +
    +
    + + nathanniy@python.com +
    +
    + +
    + Apr 13, 22, 00:03 UTC +
    +
    +
    +
    + + Bug 123456 Fuzzy She turned me into a newt! + +
    +
    • +
  • +
    + + + + + + + +
    +
    +
    + + spamspamspam + +
    +
    + + grahamchapman@python.com +
    +
    + +
    + Apr 13, 22, 00:00 UTC +
    +
    +
    +
    + + Commit message with no newline at the end + +
    +
    • + +`; + exports[`SearchResultsList should match snapshot 1`] = `
    @@ -42,11 +836,11 @@ exports[`SearchResultsList should match snapshot 1`] = ` type="checkbox" />
    - -
    - - -
    -
    -
    -
    -
      -
      -
    • -
      - - - - - - - -
      -
      - - - coconut - -
      -
      - - - - johncleese@python.com -
      -
      - -
      - Mar 29, 51, 00:00 UTC -
      -
      -
      -       - - you've got no arms left! - -
      -
      • -
      -
      -
    • -
      - - - - - - - -
      -
      - - - spam - -
      -
      - - - - ericidle@python.com -
      -
      - -
      - Feb 22, 58, 00:00 UTC -
      -
      -
      -       - - it's just a flesh wound - -
      -
      • -
      -
      -
    • -
      - - - - - - - -
      -
      - - - spamspam - -
      -
      - - - - terrygilliam@python.com -
      -
      - -
      - Jul 29, 87, 00:00 UTC -
      -
      -
      -       - - What, ridden on a horse? - -
      -
      • -
      -
      -
    • -
      - - - - - - - -
      -
      - - - spamspamspam - -
      -
      - - - - michaelpalin@python.com -
      -
      - -
      - Jul 4, 20, 00:00 UTC -
      -
      -
      -       - - You've got two empty 'alves of coconuts and you're bangin' 'em togetha! - -
      -
      • -
      -
      -
    • -
      - - - - - - - -
      -
      - - - spamspamspam - -
      -
      - - - - grahamchapman@python.com -
      -
      - -
      - Apr 13, 22, 00:00 UTC -
      -
      -
      -       - - She turned me into a newt! - -
      -
      • -
      -
      -
    • -
      - +
      +
      - - -
      -
      - - - - nathanniy@python.com -
      -
      - -
      - Apr 13, 22, 00:03 UTC -
      -
      -
      -       - - Bug 123456 Fuzzy She turned me into a newt! - + + +
      -
      • -
      -
      -
    • -
      - - - - - - - -
      - -
      • + + +
    - +
    @@ -1196,7 +1239,7 @@ exports[`SearchResultsList should match snapshot 1`] = ` class="MuiFormControl-root search-dropdown f1o9jg5h css-1iw3t7y-MuiFormControl-root" >
    - -
    - - + ​ + + +
    + +
    + +
    + +
    @@ -1334,7 +1419,7 @@ exports[`SearchResultsList should match snapshot 1`] = `
    - -
    - - + +
    + +
    + +
    + +
    @@ -1757,7 +1884,7 @@ exports[`SearchResultsList should match snapshot 1`] = `
    + `; diff --git a/src/__tests__/Search/__snapshots__/SearchView.test.tsx.snap b/src/__tests__/Search/__snapshots__/SearchView.test.tsx.snap index 40c4b296c..9cc45f681 100644 --- a/src/__tests__/Search/__snapshots__/SearchView.test.tsx.snap +++ b/src/__tests__/Search/__snapshots__/SearchView.test.tsx.snap @@ -300,12 +300,14 @@ exports[`Search View renders correctly when there are no results 1`] = ` >
    { await user.click(screen.getByRole('option', { name: 'autoland' })); expect(baseRepoSelect).toHaveTextContent('autoland'); - const searchInput = screen.getAllByRole('textbox')[0]; + const placeholder = + Strings.components.searchDefault.base.collapsed.base.inputPlaceholder; + + // focus input to show results + const searchInput = screen.getAllByPlaceholderText(placeholder)[1]; await user.click(searchInput); await screen.findAllByText("you've got no arms left!"); @@ -63,9 +67,10 @@ describe('Search View/fetchRecentRevisions', () => { const errorMessages = await screen.findAllByText('No results found'); expect(errorMessages).toHaveLength(3); - const inputs = screen.getAllByRole('textbox'); - expect(inputs[0]).toBeInvalid(); - expect(inputs[1]).toBeInvalid(); + const inputs = screen.queryAllByTestId('autocomplete-option'); + + expect(inputs[0]).toBeUndefined(); + expect(inputs[1]).toBeUndefined(); expect(global.fetch).toHaveFetched( 'https://treeherder.mozilla.org/api/project/try/push/?hide_reviewbot_pushes=true&count=30', undefined, @@ -86,9 +91,9 @@ describe('Search View/fetchRecentRevisions', () => { const errorMessages = await screen.findAllByText(errorMessage); expect(errorMessages).toHaveLength(3); - const inputs = screen.getAllByRole('textbox'); - expect(inputs[0]).toBeInvalid(); - expect(inputs[1]).toBeInvalid(); + const inputs = screen.queryAllByTestId('autocomplete-option'); + expect(inputs[0]).toBeUndefined(); + expect(inputs[1]).toBeUndefined(); expect(global.fetch).toHaveFetched( 'https://treeherder.mozilla.org/api/project/try/push/?hide_reviewbot_pushes=true&count=30', undefined, diff --git a/src/__tests__/Search/fetchRevisionByID.test.tsx b/src/__tests__/Search/fetchRevisionByID.test.tsx index 1f5ba91c7..56951e431 100644 --- a/src/__tests__/Search/fetchRevisionByID.test.tsx +++ b/src/__tests__/Search/fetchRevisionByID.test.tsx @@ -7,6 +7,9 @@ import { Strings } from '../../resources/Strings'; import getTestData from '../utils/fixtures'; import { screen, renderWithRouter, act } from '../utils/test-utils'; +const searchRevisionPlaceholder = + Strings.components.searchDefault.base.collapsed.base.inputPlaceholder; + async function renderSearchViewComponent() { renderWithRouter(, { loader, @@ -29,7 +32,9 @@ describe('Search View/fetchRevisionByID', () => { await renderSearchViewComponent(); - const searchInput = screen.getAllByRole('textbox')[0]; + const searchInput = screen.getAllByPlaceholderText( + searchRevisionPlaceholder, + )[0]; await user.type(searchInput, 'abcdef123456'); act(() => void jest.runAllTimers()); expect(global.fetch).toHaveFetched( @@ -73,7 +78,9 @@ describe('Search View/fetchRevisionByID', () => { await renderSearchViewComponent(); - const searchInput = screen.getAllByRole('textbox')[0]; + const searchInput = screen.getAllByPlaceholderText( + searchRevisionPlaceholder, + )[0]; await user.type(searchInput, 'abcdef1234567890abcdef1234567890abcdef12'); act(() => void jest.runAllTimers()); @@ -106,7 +113,9 @@ describe('Search View/fetchRevisionByID', () => { await renderSearchViewComponent(); - const searchInput = screen.getAllByRole('textbox')[0]; + const searchInput = screen.getAllByPlaceholderText( + searchRevisionPlaceholder, + )[0]; await user.type(searchInput, 'abcdef1234567890abcdef1234567890abcdef12'); act(() => void jest.runAllTimers()); @@ -114,7 +123,8 @@ describe('Search View/fetchRevisionByID', () => { 'https://treeherder.mozilla.org/api/project/try/push/?revision=abcdef1234567890abcdef1234567890abcdef12', undefined, ); - expect(await screen.findByText(errorMessage)).toBeInTheDocument(); + const errorMessageNode = await screen.findAllByText(errorMessage); + expect(errorMessageNode[0]).toBeInTheDocument(); expect(searchInput).toBeInvalid(); expect(console.error).toHaveBeenCalledWith( 'Error while fetching recent revisions:', @@ -141,7 +151,10 @@ describe('Search View/fetchRevisionByID', () => { await renderSearchViewComponent(); - const searchInput = screen.getAllByRole('textbox')[0]; + const searchInput = screen.getAllByPlaceholderText( + searchRevisionPlaceholder, + )[0]; + await user.type(searchInput, 'abcdef123456'); act(() => void jest.runAllTimers()); @@ -149,9 +162,10 @@ describe('Search View/fetchRevisionByID', () => { 'https://treeherder.mozilla.org/api/project/try/push/?revision=abcdef123456', undefined, ); - expect( - await screen.findByText('An error has occurred'), - ).toBeInTheDocument(); + const errorMessageNode = await screen.findAllByText( + 'An error has occurred', + ); + expect(errorMessageNode[0]).toBeInTheDocument(); expect(searchInput).toBeInvalid(); expect(console.error).toHaveBeenCalledWith( 'Error while fetching recent revisions:', diff --git a/src/__tests__/Search/fetchRevisionsBySearch.test.tsx b/src/__tests__/Search/fetchRevisionsBySearch.test.tsx index 6d7f6def2..7ad6b1b76 100644 --- a/src/__tests__/Search/fetchRevisionsBySearch.test.tsx +++ b/src/__tests__/Search/fetchRevisionsBySearch.test.tsx @@ -7,6 +7,9 @@ import { Strings } from '../../resources/Strings'; import getTestData from '../utils/fixtures'; import { screen, act, renderWithRouter } from '../utils/test-utils'; +const searchRevisionPlaceholder = + Strings.components.searchDefault.base.collapsed.base.inputPlaceholder; + async function renderSearchViewComponent() { renderWithRouter(, { loader, @@ -110,7 +113,9 @@ describe('SearchView/fetchRevisions', () => { await renderSearchViewComponent(); - const searchInput = screen.getAllByRole('textbox')[0]; + const searchInput = screen.getAllByPlaceholderText( + searchRevisionPlaceholder, + )[0]; await user.type(searchInput, 'ericidle@python.com'); act(() => void jest.runAllTimers()); @@ -143,7 +148,9 @@ describe('SearchView/fetchRevisions', () => { await renderSearchViewComponent(); - const searchInput = screen.getAllByRole('textbox')[0]; + const searchInput = screen.getAllByPlaceholderText( + searchRevisionPlaceholder, + )[0]; await user.type(searchInput, 'grahamchapman@python.com'); act(() => void jest.runAllTimers()); @@ -151,7 +158,9 @@ describe('SearchView/fetchRevisions', () => { 'https://treeherder.mozilla.org/api/project/try/push/?search=grahamchapman%40python.com', undefined, ); - expect(await screen.findByText(errorMessage)).toBeInTheDocument(); + + const messages = await screen.findAllByText(errorMessage); + expect(messages[0]).toBeInTheDocument(); expect(searchInput).toBeInvalid(); expect(console.error).toHaveBeenCalledWith( 'Error while fetching recent revisions:', @@ -178,7 +187,9 @@ describe('SearchView/fetchRevisions', () => { await renderSearchViewComponent(); - const searchInput = screen.getAllByRole('textbox')[0]; + const searchInput = screen.getAllByPlaceholderText( + searchRevisionPlaceholder, + )[0]; await user.type(searchInput, 'grahamchapman@python.com'); act(() => void jest.runAllTimers()); @@ -186,9 +197,9 @@ describe('SearchView/fetchRevisions', () => { 'https://treeherder.mozilla.org/api/project/try/push/?search=grahamchapman%40python.com', undefined, ); - expect( - await screen.findByText('An error has occurred'), - ).toBeInTheDocument(); + + const messages = await screen.findAllByText('An error has occurred'); + expect(messages[0]).toBeInTheDocument(); expect(searchInput).toBeInvalid(); expect(console.error).toHaveBeenCalledWith( 'Error while fetching recent revisions:', diff --git a/src/__tests__/Snackbar.test.tsx b/src/__tests__/Snackbar.test.tsx index 20d323297..2cb2ed68b 100644 --- a/src/__tests__/Snackbar.test.tsx +++ b/src/__tests__/Snackbar.test.tsx @@ -14,6 +14,9 @@ import { waitForElementToBeRemoved, } from './utils/test-utils'; +const searchRevisionPlaceholder = + Strings.components.searchDefault.base.collapsed.base.inputPlaceholder; + describe('Snackbar', () => { beforeEach(() => { const { testData } = getTestData(); @@ -32,7 +35,10 @@ describe('Snackbar', () => { render(); // focus input to show results - const searchInput = screen.getAllByRole('textbox')[1]; + // const searchInput = screen.getAllByRole('textbox')[1]; + const searchInput = screen.getAllByPlaceholderText( + searchRevisionPlaceholder, + )[1]; await user.click(searchInput); await user.click(await screen.findByTestId('checkbox-0')); @@ -56,7 +62,10 @@ describe('Snackbar', () => { render(); // focus input to show results - const searchInput = screen.getAllByRole('textbox')[0]; + // const searchInput = screen.getAllByRole('textbox')[0]; + const searchInput = screen.getAllByPlaceholderText( + searchRevisionPlaceholder, + )[0]; await user.click(searchInput); await user.click((await screen.findAllByTestId('checkbox-0'))[0]); @@ -76,7 +85,10 @@ describe('Snackbar', () => { }); // focus input to show results - const searchInput = (await screen.findAllByRole('textbox'))[1]; + // const searchInput = (await screen.findAllByRole('textbox'))[1]; + const searchInput = screen.getAllByPlaceholderText( + searchRevisionPlaceholder, + )[1]; await user.click(searchInput); await user.click(await screen.findByTestId('checkbox-0')); diff --git a/src/components/Search/AutocompleteInput.tsx b/src/components/Search/AutocompleteInput.tsx index d22aa2552..b45edeaa2 100644 --- a/src/components/Search/AutocompleteInput.tsx +++ b/src/components/Search/AutocompleteInput.tsx @@ -56,6 +56,7 @@ function AutocompleteInput({ id={`search-${searchType}-input`} size={compact ? 'small' : undefined} className={`search-text-field ${searchType}`} + role='textbox' slotProps={{ input: { ...params.InputProps, diff --git a/src/components/Search/AutocompleteOption.tsx b/src/components/Search/AutocompleteOption.tsx index 1a27a28bc..95f7bcbfc 100644 --- a/src/components/Search/AutocompleteOption.tsx +++ b/src/components/Search/AutocompleteOption.tsx @@ -87,6 +87,7 @@ function AutocompleteOption({ isChecked ? 'item-selected' : '' }`} onClick={onToggleAction} + data-testid='autocomplete-option' > diff --git a/src/components/Search/SearchInputAndResults.tsx b/src/components/Search/SearchInputAndResults.tsx index c4d777f4b..2a71ccd0d 100644 --- a/src/components/Search/SearchInputAndResults.tsx +++ b/src/components/Search/SearchInputAndResults.tsx @@ -48,7 +48,6 @@ export default function SearchInputAndResults({ }: Props) { const mode = useAppSelector((state) => state.theme.mode); - // const [displayDropdown, setDisplayDropdown] = useState(false); const [recentRevisions, setRecentRevisions] = useState( null as null | Changeset[], ); @@ -149,27 +148,6 @@ export default function SearchInputAndResults({ }); }; - // const handleDocumentMousedown = useCallback( - // (e: MouseEvent) => { - // if (!displayDropdown) { - // return; - // } - // const target = e.target as HTMLElement; - // if (!containerRef.current?.contains(target)) { - // // Close the dropdown only if the click is outside the search input or one - // // of it's descendants. - // setDisplayDropdown(false); - // } - // }, - // [displayDropdown], - // ); - - // const handleEscKeypress = useCallback((e: KeyboardEvent) => { - // if (e.key === 'Escape') { - // setDisplayDropdown(false); - // } - // }, []); - const searchRecentRevisions = useCallback( async (searchTerm: string) => { // If the URL has a parameter useFulltextSearch, use it to determine the search type. @@ -263,20 +241,6 @@ export default function SearchInputAndResults({ void searchRecentRevisions(lastSearchTermRef.current); }, [repository]); - // useEffect(() => { - // document.addEventListener('mousedown', handleDocumentMousedown); - // return () => { - // document.removeEventListener('mousedown', handleDocumentMousedown); - // }; - // }, [handleDocumentMousedown]); - - // useEffect(() => { - // document.addEventListener('keydown', handleEscKeypress); - // return () => { - // document.removeEventListener('keydown', handleEscKeypress); - // }; - // }, [handleEscKeypress]); - const renderInput = (params: AutocompleteRenderInputParams) => ( - {/* setDisplayDropdown(true)} - compact={compact} - inputPlaceholder={inputPlaceholder} - searchType={searchType} - searchError={searchError} - onChange={onValueChange} - /> - - {recentRevisions && displayDropdown && ( - - )} */} - options.revision} @@ -349,9 +294,10 @@ export default function SearchInputAndResults({ noOptionsText={searchError || 'No results found'} slotProps={{ listbox: { - className: getListStyles(mode), + className: `${getListStyles(mode)} results-list-${mode}`, }, }} + data-testid='autocomplete' /> ); From 22be33bff33aaed91c732a99c6a9d8f453ec7bae Mon Sep 17 00:00:00 2001 From: esanuandra Date: Thu, 18 Dec 2025 17:59:21 +0200 Subject: [PATCH 3/7] fix multiple select revision checkbox --- .../__snapshots__/ResultsTable.test.tsx.snap | 4 ++-- .../CompareOverTime.test.tsx.snap | 8 ++++---- .../CompareWithBase.test.tsx.snap | 16 +++++++-------- .../SearchContainer.test.tsx.snap | 4 ++-- .../SearchResultsList.test.tsx.snap | 4 ++-- .../__snapshots__/SearchView.test.tsx.snap | 20 +++++++++---------- .../Search/SearchInputAndResults.tsx | 4 ++-- 7 files changed, 30 insertions(+), 30 deletions(-) diff --git a/src/__tests__/CompareResults/__snapshots__/ResultsTable.test.tsx.snap b/src/__tests__/CompareResults/__snapshots__/ResultsTable.test.tsx.snap index f931cdeac..da7c7379c 100644 --- a/src/__tests__/CompareResults/__snapshots__/ResultsTable.test.tsx.snap +++ b/src/__tests__/CompareResults/__snapshots__/ResultsTable.test.tsx.snap @@ -630,7 +630,7 @@ exports[`Results Table Should match snapshot 1`] = ` class="MuiBox-root css-0" >
    options.revision} isOptionEqualToValue={(option, value) => option.id === value.id} - multiple={listItemComponent === 'checkbox'} - disableCloseOnSelect={listItemComponent === 'checkbox'} + multiple={listItemComponent !== 'radio'} + disableCloseOnSelect={listItemComponent !== 'radio'} filterOptions={(options) => options} onInputChange={(_, value) => onValueChange(value)} onChange={(_, value) => { From d6a366b3273957d8634be5f818f487ef6c2d5472 Mon Sep 17 00:00:00 2001 From: esanuandra Date: Thu, 9 Apr 2026 18:09:15 +0300 Subject: [PATCH 4/7] Fix Snackbar, fetchRevisionBySearch and fetchRevisionbyID test --- .../Search/fetchRevisionByID.test.tsx | 17 ++++++++++++---- .../Search/fetchRevisionsBySearch.test.tsx | 15 ++++++++++---- src/__tests__/Snackbar.test.tsx | 20 +++++++++++++------ 3 files changed, 38 insertions(+), 14 deletions(-) diff --git a/src/__tests__/Search/fetchRevisionByID.test.tsx b/src/__tests__/Search/fetchRevisionByID.test.tsx index 56951e431..d5fdac6ad 100644 --- a/src/__tests__/Search/fetchRevisionByID.test.tsx +++ b/src/__tests__/Search/fetchRevisionByID.test.tsx @@ -5,7 +5,7 @@ import { loader } from '../../components/Search/loader'; import SearchView from '../../components/Search/SearchView'; import { Strings } from '../../resources/Strings'; import getTestData from '../utils/fixtures'; -import { screen, renderWithRouter, act } from '../utils/test-utils'; +import { screen, renderWithRouter, act, waitFor } from '../utils/test-utils'; const searchRevisionPlaceholder = Strings.components.searchDefault.base.collapsed.base.inputPlaceholder; @@ -90,7 +90,10 @@ describe('Search View/fetchRevisionByID', () => { ); expect(await screen.findByText('No results found')).toBeInTheDocument(); - expect(searchInput).toBeInvalid(); + + await waitFor(() => { + expect(searchInput).toHaveAttribute('aria-invalid', 'true'); + }); }); it('should update error state if fetchRevisionByID returns an error', async () => { @@ -125,7 +128,9 @@ describe('Search View/fetchRevisionByID', () => { ); const errorMessageNode = await screen.findAllByText(errorMessage); expect(errorMessageNode[0]).toBeInTheDocument(); - expect(searchInput).toBeInvalid(); + await waitFor(() => { + expect(searchInput).toHaveAttribute('aria-invalid', 'true'); + }); expect(console.error).toHaveBeenCalledWith( 'Error while fetching recent revisions:', new Error(errorMessage), @@ -166,7 +171,11 @@ describe('Search View/fetchRevisionByID', () => { 'An error has occurred', ); expect(errorMessageNode[0]).toBeInTheDocument(); - expect(searchInput).toBeInvalid(); + + await waitFor(() => { + expect(searchInput).toHaveAttribute('aria-invalid', 'true'); + }); + expect(console.error).toHaveBeenCalledWith( 'Error while fetching recent revisions:', new Error(), diff --git a/src/__tests__/Search/fetchRevisionsBySearch.test.tsx b/src/__tests__/Search/fetchRevisionsBySearch.test.tsx index 7ad6b1b76..fc7f1d9d7 100644 --- a/src/__tests__/Search/fetchRevisionsBySearch.test.tsx +++ b/src/__tests__/Search/fetchRevisionsBySearch.test.tsx @@ -5,7 +5,7 @@ import { loader } from '../../components/Search/loader'; import SearchView from '../../components/Search/SearchView'; import { Strings } from '../../resources/Strings'; import getTestData from '../utils/fixtures'; -import { screen, act, renderWithRouter } from '../utils/test-utils'; +import { screen, act, renderWithRouter, waitFor } from '../utils/test-utils'; const searchRevisionPlaceholder = Strings.components.searchDefault.base.collapsed.base.inputPlaceholder; @@ -125,7 +125,9 @@ describe('SearchView/fetchRevisions', () => { ); expect(await screen.findByText('No results found')).toBeInTheDocument(); - expect(searchInput).toBeInvalid(); + await waitFor(() => { + expect(searchInput).toHaveAttribute('aria-invalid', 'true'); + }); }); it('should update error state if fetchRevisionsByAuthor returns an error', async () => { @@ -161,7 +163,9 @@ describe('SearchView/fetchRevisions', () => { const messages = await screen.findAllByText(errorMessage); expect(messages[0]).toBeInTheDocument(); - expect(searchInput).toBeInvalid(); + await waitFor(() => { + expect(searchInput).toHaveAttribute('aria-invalid', 'true'); + }); expect(console.error).toHaveBeenCalledWith( 'Error while fetching recent revisions:', new Error(errorMessage), @@ -200,7 +204,9 @@ describe('SearchView/fetchRevisions', () => { const messages = await screen.findAllByText('An error has occurred'); expect(messages[0]).toBeInTheDocument(); - expect(searchInput).toBeInvalid(); + await waitFor(() => { + expect(searchInput).toHaveAttribute('aria-invalid', 'true'); + }); expect(console.error).toHaveBeenCalledWith( 'Error while fetching recent revisions:', new Error(), @@ -220,6 +226,7 @@ describe('SearchView/fetchRevisions', () => { const searchInput = screen.getAllByRole('textbox')[0]; await user.type(searchInput, 'abcdef123456'); + act(() => void jest.runAllTimers()); expect(global.fetch).toHaveFetched( 'https://treeherder.mozilla.org/api/project/try/push/?revision=abcdef123456', diff --git a/src/__tests__/Snackbar.test.tsx b/src/__tests__/Snackbar.test.tsx index 2cb2ed68b..be4aab61e 100644 --- a/src/__tests__/Snackbar.test.tsx +++ b/src/__tests__/Snackbar.test.tsx @@ -2,9 +2,6 @@ import fetchMock from '@fetch-mock/jest'; import userEvent from '@testing-library/user-event'; import App from '../components/App'; -import { loader } from '../components/Search/loader'; -import SearchView from '../components/Search/SearchView'; -import { Strings } from '../resources/Strings'; import getTestData from './utils/fixtures'; import { screen, @@ -13,6 +10,9 @@ import { render, waitForElementToBeRemoved, } from './utils/test-utils'; +import { loader } from '../components/Search/loader'; +import SearchView from '../components/Search/SearchView'; +import { Strings } from '../resources/Strings'; const searchRevisionPlaceholder = Strings.components.searchDefault.base.collapsed.base.inputPlaceholder; @@ -80,9 +80,17 @@ describe('Snackbar', () => { // set delay to null to prevent test time-out due to useFakeTimers const user = userEvent.setup({ advanceTimers: jest.advanceTimersByTime }); - renderWithRouter(, { - loader, - }); + // eslint-disable-next-line testing-library/no-unnecessary-act + await act(async () => + renderWithRouter( + , + { + loader, + route: '/', + search: '?useFulltextSearch', + }, + ), + ); // focus input to show results // const searchInput = (await screen.findAllByRole('textbox'))[1]; From a005b922fc0299bb4501fd17b5924dd455e15659 Mon Sep 17 00:00:00 2001 From: esanuandra Date: Thu, 30 Apr 2026 20:09:52 +0300 Subject: [PATCH 5/7] Update SearchInputAndResult to theme.palette --- .../SearchResultsList.test.tsx.snap | 2 +- .../Search/SearchInputAndResults.tsx | 28 ++++++++----------- src/theme/protocolTheme.ts | 27 ++++++++++++++++++ 3 files changed, 40 insertions(+), 17 deletions(-) diff --git a/src/__tests__/Search/__snapshots__/SearchResultsList.test.tsx.snap b/src/__tests__/Search/__snapshots__/SearchResultsList.test.tsx.snap index fec1bddb9..158e9e403 100644 --- a/src/__tests__/Search/__snapshots__/SearchResultsList.test.tsx.snap +++ b/src/__tests__/Search/__snapshots__/SearchResultsList.test.tsx.snap @@ -3,7 +3,7 @@ exports[`SearchResultsList Should apply dark and light mode styles when theme button is toggled: after toggling dark mode 1 1`] = `
      diff --git a/src/components/Search/SearchInputAndResults.tsx b/src/components/Search/SearchInputAndResults.tsx index 2c7eb4171..3cd02d89d 100644 --- a/src/components/Search/SearchInputAndResults.tsx +++ b/src/components/Search/SearchInputAndResults.tsx @@ -10,6 +10,7 @@ import Autocomplete, { AutocompleteRenderInputParams, } from '@mui/material/Autocomplete'; import Box from '@mui/material/Box'; +import { useTheme } from '@mui/material/styles'; import { style } from 'typestyle'; import AutocompleteInput from './AutocompleteInput'; @@ -47,6 +48,7 @@ export default function SearchInputAndResults({ listItemComponent, }: Props) { const mode = useAppSelector((state) => state.theme.mode); + const theme = useTheme(); const [recentRevisions, setRecentRevisions] = useState( null as null | Changeset[], @@ -76,39 +78,33 @@ export default function SearchInputAndResults({ zIndex: 100, }; - const getListStyles = (theme: string) => { - const backgroundColor = - theme === 'light' ? Colors.Background300 : Colors.Background300Dark; - const hoverColor = - theme === 'light' ? Colors.SecondaryHover : Colors.SecondaryHoverDark; - const activeColor = - theme === 'light' ? Colors.SecondaryActive : Colors.SecondaryActiveDark; + const getListStyles = (themeMode: string) => { const captionStyle = - theme === 'light' ? captionStylesLight : captionStylesDark; + themeMode === 'light' ? captionStylesLight : captionStylesDark; return style({ - backgroundColor, + backgroundColor: theme.palette.searchDropdown.background, position: 'relative', ...sharedSelectStyles, $nest: { // Autocomplete option highlighting 'li[aria-selected="true"]': { - backgroundColor: `${hoverColor} !important`, + backgroundColor: `${theme.palette.searchDropdown.hover} !important`, borderRadius: '4px', paddingTop: `${Spacing.xSmall}px`, }, 'li:hover': { - backgroundColor: `${hoverColor} !important`, + backgroundColor: `${theme.palette.searchDropdown.hover} !important`, borderRadius: '4px', paddingTop: `${Spacing.xSmall}px`, }, 'li[data-focus="true"]': { - backgroundColor: `${hoverColor} !important`, + backgroundColor: `${theme.palette.searchDropdown.hover} !important`, borderRadius: '4px', paddingTop: `${Spacing.xSmall}px`, }, 'li.Mui-focused': { - backgroundColor: `${hoverColor} !important`, + backgroundColor: `${theme.palette.searchDropdown.hover} !important`, borderRadius: '4px', paddingTop: `${Spacing.xSmall}px`, }, @@ -121,17 +117,17 @@ export default function SearchInputAndResults({ padding: `${Spacing.xSmall}px ${Spacing.Small}px`, $nest: { '&:hover': { - backgroundColor: hoverColor, + backgroundColor: theme.palette.searchDropdown.hover, borderRadius: '4px', }, '&:active': { - backgroundColor: activeColor, + backgroundColor: theme.palette.searchDropdown.active, borderRadius: '4px', }, }, }, '.item-selected': { - backgroundColor: hoverColor, + backgroundColor: theme.palette.searchDropdown.hover, borderRadius: '4px', }, '.revision-hash': { diff --git a/src/theme/protocolTheme.ts b/src/theme/protocolTheme.ts index d3eb075d4..d2620bcdd 100644 --- a/src/theme/protocolTheme.ts +++ b/src/theme/protocolTheme.ts @@ -41,6 +41,11 @@ const lightMode = { expandedRow: { background: Colors.SecondaryDefault, }, + searchDropdown: { + background: Colors.Background300, + hover: Colors.SecondaryHover, + active: Colors.SecondaryActive, + }, manWhitneyComps: { background: Colors.Background100, @@ -88,6 +93,11 @@ const darkMode = { expandedRow: { background: Colors.Background100Dark, }, + searchDropdown: { + background: Colors.Background300Dark, + hover: Colors.SecondaryHoverDark, + active: Colors.SecondaryActiveDark, + }, manWhitneyComps: { background: Colors.Background100Dark, compareMetricsBg: Colors.Background300Dark, @@ -132,3 +142,20 @@ declare module '@mui/material/ButtonGroup' { tableHeaderButton: true; } } + +declare module '@mui/material/styles' { + interface Palette { + searchDropdown: { + background: string; + hover: string; + active: string; + }; + } + interface PaletteOptions { + searchDropdown?: { + background?: string; + hover?: string; + active?: string; + }; + } +} From 406cedf777cc04ec089bc99cb7d31160480bd788 Mon Sep 17 00:00:00 2001 From: esanuandra Date: Wed, 6 May 2026 16:26:28 +0300 Subject: [PATCH 6/7] Rename AutocompleteInput and AutocompleteOption --- .../{AutocompleteInput.tsx => RevisionAutocompleteInput.tsx} | 0 ...{AutocompleteOption.tsx => RevisionAutocompleteOption.tsx} | 0 src/components/Search/SearchInputAndResults.tsx | 4 ++-- 3 files changed, 2 insertions(+), 2 deletions(-) rename src/components/Search/{AutocompleteInput.tsx => RevisionAutocompleteInput.tsx} (100%) rename src/components/Search/{AutocompleteOption.tsx => RevisionAutocompleteOption.tsx} (100%) diff --git a/src/components/Search/AutocompleteInput.tsx b/src/components/Search/RevisionAutocompleteInput.tsx similarity index 100% rename from src/components/Search/AutocompleteInput.tsx rename to src/components/Search/RevisionAutocompleteInput.tsx diff --git a/src/components/Search/AutocompleteOption.tsx b/src/components/Search/RevisionAutocompleteOption.tsx similarity index 100% rename from src/components/Search/AutocompleteOption.tsx rename to src/components/Search/RevisionAutocompleteOption.tsx diff --git a/src/components/Search/SearchInputAndResults.tsx b/src/components/Search/SearchInputAndResults.tsx index 3cd02d89d..f85e67c20 100644 --- a/src/components/Search/SearchInputAndResults.tsx +++ b/src/components/Search/SearchInputAndResults.tsx @@ -13,8 +13,8 @@ import Box from '@mui/material/Box'; import { useTheme } from '@mui/material/styles'; import { style } from 'typestyle'; -import AutocompleteInput from './AutocompleteInput'; -import AutocompleteOption from './AutocompleteOption'; +import AutocompleteInput from './RevisionAutocompleteInput'; +import AutocompleteOption from './RevisionAutocompleteOption'; import { useAppSelector } from '../../hooks/app'; import { fetchRecentRevisions } from '../../logic/treeherder'; import { Strings } from '../../resources/Strings'; From dd8fff3d72fca3fc2f0c6632fd6d8dda895cdd33 Mon Sep 17 00:00:00 2001 From: esanuandra Date: Wed, 6 May 2026 17:05:10 +0300 Subject: [PATCH 7/7] Remove SearchResultsList and SearchResultsListItem --- src/components/Search/SearchResultsList.tsx | 124 --------------- .../Search/SearchResultsListItem.tsx | 146 ------------------ 2 files changed, 270 deletions(-) delete mode 100644 src/components/Search/SearchResultsList.tsx delete mode 100644 src/components/Search/SearchResultsListItem.tsx diff --git a/src/components/Search/SearchResultsList.tsx b/src/components/Search/SearchResultsList.tsx deleted file mode 100644 index f3250e953..000000000 --- a/src/components/Search/SearchResultsList.tsx +++ /dev/null @@ -1,124 +0,0 @@ -import Box from '@mui/material/Box'; -import List from '@mui/material/List'; -import { style } from 'typestyle'; - -import SearchResultsListItem from './SearchResultsListItem'; -import { useAppSelector } from '../../hooks/app'; -import { - Colors, - FontsRaw, - Spacing, - captionStylesLight, - captionStylesDark, -} from '../../styles'; -import { Changeset } from '../../types/state'; - -interface SearchResultsListProps { - compact: boolean; - searchResults: Changeset[]; - displayedRevisions: Changeset[]; - onToggle: (item: Changeset) => void; - listItemComponent?: 'checkbox' | 'radio'; -} - -const sharedSelectStyles = { - borderRadius: '4px', - marginTop: `${Spacing.xSmall}px`, - maxHeight: '285px', - overflow: 'auto', - maxWidth: '100%', - padding: `${Spacing.xSmall}px`, - border: `1px solid ${Colors.BorderDefault}`, - zIndex: 100, -}; - -function getStyles(theme: string) { - const backgroundColor = - theme === 'light' ? Colors.Background300 : Colors.Background300Dark; - const hoverColor = - theme === 'light' ? Colors.SecondaryHover : Colors.SecondaryHoverDark; - const activeColor = - theme === 'light' ? Colors.SecondaryActive : Colors.SecondaryActiveDark; - const captionStyle = - theme === 'light' ? captionStylesLight : captionStylesDark; - - return style({ - backgroundColor, - position: 'relative', - ...sharedSelectStyles, - $nest: { - '.MuiListItemButton-root': { - padding: `${Spacing.xSmall}px ${Spacing.Small}px`, - $nest: { - '&:hover': { - backgroundColor: hoverColor, - borderRadius: '4px', - }, - '&:active': { - backgroundColor: activeColor, - borderRadius: '4px', - }, - }, - }, - '.item-selected': { - backgroundColor: hoverColor, - borderRadius: '4px', - }, - '.revision-hash': { - ...FontsRaw.BodyDefault, - marginRight: Spacing.Small, - }, - '.info-caption': { - ...captionStyle, - }, - '.MuiTypography-root': { - ...FontsRaw.BodyDefault, - }, - }, - }); -} - -function SearchResultsList({ - compact, - searchResults, - displayedRevisions, - onToggle, - listItemComponent, -}: SearchResultsListProps) { - const mode = useAppSelector((state) => state.theme.mode); - const styles = { - light: getStyles('light'), - dark: getStyles('dark'), - }; - // const styles = mode === 'light' ? SelectListLight : SelectListDark; - - const isInProgressChecked = (item: Changeset) => { - return displayedRevisions.map((rev) => rev.id).includes(item.id); - }; - - return ( - - - {searchResults.map((item, index) => ( - - ))} - - - ); -} - -export default SearchResultsList; diff --git a/src/components/Search/SearchResultsListItem.tsx b/src/components/Search/SearchResultsListItem.tsx deleted file mode 100644 index c80dbe640..000000000 --- a/src/components/Search/SearchResultsListItem.tsx +++ /dev/null @@ -1,146 +0,0 @@ -import { Fragment } from 'react'; - -import AccessTimeOutlinedIcon from '@mui/icons-material/AccessTimeOutlined'; -import MailOutlineOutlinedIcon from '@mui/icons-material/MailOutlineOutlined'; -import Checkbox from '@mui/material/Checkbox'; -import ListItem from '@mui/material/ListItem'; -import ListItemButton from '@mui/material/ListItemButton'; -import ListItemIcon from '@mui/material/ListItemIcon'; -import ListItemText from '@mui/material/ListItemText'; -import Radio from '@mui/material/Radio'; -import Typography from '@mui/material/Typography'; -import { style } from 'typestyle'; - -import DateTimeDisplay from './DateTimeDisplay'; -import { Spacing } from '../../styles'; -import type { Changeset } from '../../types/state'; -import { truncateHash, getLatestCommitMessage } from '../../utils/helpers'; - -interface SearchResultsListItemProps { - index: number; - item: Changeset; - isChecked: boolean; - onToggle: (item: Changeset) => void; - listItemComponent?: 'checkbox' | 'radio'; -} - -const styles = { - listItemButton: style({ - paddingTop: 0, - $nest: { - '.MuiListItem-root': { - alignItems: 'flex-start', - }, - '.search-revision-item-icon': { - minWidth: '0', - }, - - '.MuiListItemText-primary': { - display: 'flex', - justifyContent: 'space-between', - flexWrap: 'wrap', - }, - '.info-caption': { - flexWrap: 'wrap', - $nest: { - svg: { - marginRight: `${Spacing.xSmall}px`, - fontSize: '1rem', - }, - '.item-author': { - marginRight: `${Spacing.xSmall + 1}px`, - }, - }, - }, - }, - }), -}; - -function SearchResultsListItem({ - index, - item, - isChecked, - onToggle, - listItemComponent, -}: SearchResultsListItemProps) { - const ListItemComponent = listItemComponent === 'radio' ? Radio : Checkbox; - const revisionHash = truncateHash(item.revision); - const commitMessage = getLatestCommitMessage(item); - const itemDate = new Date(item.push_timestamp * 1000); - - const onToggleAction = () => { - onToggle(item); - }; - - return ( - <> - - - - - - - - {revisionHash} - -
      -
      - {' '} - {' '} - {item.author} -
      - -
      - - -
      -
      - - } - secondary={`${commitMessage} `} - slotProps={{ - primary: { noWrap: true }, - secondary: { noWrap: true }, - }} - /> -       -       - - ); -} - -export default SearchResultsListItem;