From 1529510d25fa25b47738828201bf5d62cd34656d Mon Sep 17 00:00:00 2001 From: sylenien Date: Thu, 12 May 2022 16:31:46 +0200 Subject: [PATCH] removed browser autocomplete from filter inputs, removed timezone picker from main page --- .../BugFinder/AutoComplete/AutoComplete.js | 28 +++++++++---------- .../SessionList/SessionListHeader.js | 6 +--- .../EventFilter/AutoComplete/AutoComplete.js | 28 +++++++++---------- .../FilterAutoComplete/FilterAutoComplete.tsx | 15 +++++----- 4 files changed, 37 insertions(+), 40 deletions(-) diff --git a/frontend/app/components/BugFinder/AutoComplete/AutoComplete.js b/frontend/app/components/BugFinder/AutoComplete/AutoComplete.js index b528e7bb9..dbd6f9729 100644 --- a/frontend/app/components/BugFinder/AutoComplete/AutoComplete.js +++ b/frontend/app/components/BugFinder/AutoComplete/AutoComplete.js @@ -14,7 +14,7 @@ const SOME_ERROR_MSG = "Some error occured."; const defaultValueToText = value => value; const defaultOptionMapping = (values, valueToText) => values.map(value => ({ text: valueToText(value), value })); -const hiddenStyle = { +const hiddenStyle = { whiteSpace: 'pre-wrap', opacity: 0, position: 'fixed', left: '-3000px' }; @@ -32,10 +32,10 @@ class AutoComplete extends React.PureComponent { values: [], noResultsMessage: TYPE_TO_SEARCH_MSG, ddOpen: false, - query: this.props.value, + query: this.props.value, loading: false, error: false - } + } componentWillReceiveProps(newProps) { if (this.props.value !== newProps.value) { @@ -49,8 +49,8 @@ class AutoComplete extends React.PureComponent { requestValues = (q) => { const { params, endpoint, method } = this.props; - this.setState({ - loading: true, + this.setState({ + loading: true, error: false, }); return new APIClient()[ method.toLowerCase() ](endpoint, { ...params, q }) @@ -72,7 +72,7 @@ class AutoComplete extends React.PureComponent { debouncedRequestValues = debounce(this.requestValues, 1000) - setError = () => this.setState({ + setError = () => this.setState({ loading: false, error: true, noResultsMessage: SOME_ERROR_MSG, @@ -98,7 +98,7 @@ class AutoComplete extends React.PureComponent { const _value = value.trim(); onSelect(null, {name, value: _value}); } - + changed = false; pasted = false; } @@ -126,10 +126,10 @@ class AutoComplete extends React.PureComponent { } = this.props; const options = optionMapping(values, valueToText) - + return ( - {/* */} @@ -140,7 +140,6 @@ class AutoComplete extends React.PureComponent { onFocus={ () => this.setState({ddOpen: true})} onChange={ this.onInputChange } onBlur={ this.onBlur } - onFocus={ () => this.setState({ddOpen: true})} value={ query } autoFocus={ true } type="text" @@ -150,6 +149,7 @@ class AutoComplete extends React.PureComponent { this.hiddenInput.value = text; pasted = true; // to use only the hidden input } } + autocomplete="do-not-autofill-bad-chrome" />
{ showCloseButton ? : or} @@ -182,11 +182,11 @@ class AutoComplete extends React.PureComponent { { headerText && headerText } { options.map(item => ( - this.onItemClick(e, item) } - /> + onClick={ (e) => this.onItemClick(e, item) } + /> )) }
diff --git a/frontend/app/components/BugFinder/SessionList/SessionListHeader.js b/frontend/app/components/BugFinder/SessionList/SessionListHeader.js index e4f949473..57d1a21b4 100644 --- a/frontend/app/components/BugFinder/SessionList/SessionListHeader.js +++ b/frontend/app/components/BugFinder/SessionList/SessionListHeader.js @@ -13,7 +13,7 @@ const sortOptionsMap = { 'startTs-desc': 'Newest', 'startTs-asc': 'Oldest', 'eventsCount-asc': 'Events Ascending', - 'eventsCount-desc': 'Events Descending', + 'eventsCount-desc': 'Events Descending', }; const sortOptions = Object.entries(sortOptionsMap) .map(([ value, text ]) => ({ value, text })); @@ -50,10 +50,6 @@ function SessionListHeader({ value='list' /> */} -
- Timezone - -
Sort By diff --git a/frontend/app/components/shared/EventFilter/AutoComplete/AutoComplete.js b/frontend/app/components/shared/EventFilter/AutoComplete/AutoComplete.js index e075b17bd..c4588354b 100644 --- a/frontend/app/components/shared/EventFilter/AutoComplete/AutoComplete.js +++ b/frontend/app/components/shared/EventFilter/AutoComplete/AutoComplete.js @@ -13,7 +13,7 @@ const SOME_ERROR_MSG = "Some error occured."; const defaultValueToText = value => value; const defaultOptionMapping = (values, valueToText) => values.map(value => ({ text: valueToText(value), value })); -const hiddenStyle = { +const hiddenStyle = { whiteSpace: 'pre-wrap', opacity: 0, position: 'fixed', left: '-3000px' }; @@ -31,10 +31,10 @@ class AutoComplete extends React.PureComponent { values: [], noResultsMessage: TYPE_TO_SEARCH_MSG, ddOpen: false, - query: this.props.value, + query: this.props.value, loading: false, error: false - } + } componentWillReceiveProps(newProps) { if (this.props.value !== newProps.value) { @@ -48,8 +48,8 @@ class AutoComplete extends React.PureComponent { requestValues = (q) => { const { params, endpoint, method } = this.props; - this.setState({ - loading: true, + this.setState({ + loading: true, error: false, }); return new APIClient()[ method.toLowerCase() ](endpoint, { ...params, q }) @@ -71,13 +71,13 @@ class AutoComplete extends React.PureComponent { debouncedRequestValues = debounce(this.requestValues, 1000) - setError = () => this.setState({ + setError = () => this.setState({ loading: false, error: true, noResultsMessage: SOME_ERROR_MSG, }) - onInputChange = ({ target: { value } }) => { + onInputChange = ({ target: { value } }) => { changed = true; this.setState({ query: value, updated: true }) const _value = value.trim(); @@ -96,7 +96,7 @@ class AutoComplete extends React.PureComponent { const _value = value.trim(); onSelect(null, {name, value: _value}); } - + changed = false; pasted = false; } @@ -123,10 +123,10 @@ class AutoComplete extends React.PureComponent { } = this.props; const options = optionMapping(values, valueToText) - + return ( - {/* this.setState({ddOpen: true})} onChange={ this.onInputChange } onBlur={ this.onBlur } - onFocus={ () => this.setState({ddOpen: true})} value={ query } autoFocus={ true } type="text" @@ -163,6 +162,7 @@ class AutoComplete extends React.PureComponent { this.hiddenInput.value = text; pasted = true; // to use only the hidden input } } + autocomplete="do-not-autofill-bad-chrome" />
{/* */} @@ -175,10 +175,10 @@ class AutoComplete extends React.PureComponent { { headerText && headerText } { options.map(item => ( - this.onItemClick(e, item) } + onClick={ (e) => this.onItemClick(e, item) } /> // this.onItemClick(e, item) } /> )) diff --git a/frontend/app/components/shared/Filters/FilterAutoComplete/FilterAutoComplete.tsx b/frontend/app/components/shared/Filters/FilterAutoComplete/FilterAutoComplete.tsx index a97f3573c..fb0eb4a6b 100644 --- a/frontend/app/components/shared/Filters/FilterAutoComplete/FilterAutoComplete.tsx +++ b/frontend/app/components/shared/Filters/FilterAutoComplete/FilterAutoComplete.tsx @@ -5,7 +5,7 @@ import { debounce } from 'App/utils'; import stl from './FilterAutoComplete.css'; import cn from 'classnames'; -const hiddenStyle = { +const hiddenStyle = { whiteSpace: 'pre-wrap', opacity: 0, position: 'fixed', left: '-3000px' }; @@ -43,8 +43,8 @@ function FilterAutoComplete(props: Props) { const [loading, setLoading] = useState(false) const [options, setOptions] = useState([]); const [query, setQuery] = useState(value); - - const requestValues = (q) => { + + const requestValues = (q) => { setLoading(true); return new APIClient()[method?.toLocaleLowerCase()](endpoint, { ...params, q }) @@ -90,7 +90,7 @@ function FilterAutoComplete(props: Props) { e.preventDefault(); if (query !== item.value) { - setQuery(item.value); + setQuery(item.value); } props.onSelect(e, item); @@ -107,6 +107,7 @@ function FilterAutoComplete(props: Props) { autoFocus={ true } type="text" placeholder={ placeholder } + autoComplete="do-not-autofill-bad-chrome" // onPaste={(e) => { // const text = e.clipboardData.getData('Text'); // // this.hiddenInput.value = text; @@ -139,11 +140,11 @@ function FilterAutoComplete(props: Props) { > { icon && } { item.value } -
+
)) } - )} + )} )} @@ -151,4 +152,4 @@ function FilterAutoComplete(props: Props) { ); } -export default FilterAutoComplete; \ No newline at end of file +export default FilterAutoComplete;