removed browser autocomplete from filter inputs, removed timezone picker from main page

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 (
-      <OutsideClickDetectingDiv 
-        className={ cn("relative flex items-center", { "flex-1" : fullWidth }) } 
+      <OutsideClickDetectingDiv
+        className={ cn("relative flex items-center", { "flex-1" : fullWidth }) }
         onClickOutside={this.onClickOutside}
       >
         {/* <EventSearchInput /> */}
@@ -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"
           />
           <div className={stl.right} onClick={showCloseButton ? onRemoveValue : onAddValue}>
             { showCloseButton ? <Icon name="close" size="14" /> : <span className="px-1">or</span>}
@@ -182,11 +182,11 @@ class AutoComplete extends React.PureComponent {
             { headerText && headerText }
             {
               options.map(item => (
-                <FilterItem 
+                <FilterItem
                   label={ item.value }
                   icon={ item.icon }
-                  onClick={ (e) => this.onItemClick(e, item) } 
-                />                
+                  onClick={ (e) => this.onItemClick(e, item) }
+                />
               ))
             }
           </div>

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'
           />
         </div> */}
-        <div className="flex items-center">
-          <span className="mr-2 color-gray-medium">Timezone</span>
-          <TimezoneDropdown />
-        </div>
         <div className="flex items-center ml-6">
           <span className="mr-2 color-gray-medium">Sort By</span>
           <SortDropdown options={ sortOptions }/>

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 (
-      <OutsideClickDetectingDiv 
-        className={ cn("relative", { "flex-1" : fullWidth }) } 
+      <OutsideClickDetectingDiv
+        className={ cn("relative", { "flex-1" : fullWidth }) }
         onClickOutside={this.onClickOutside}
       >
         {/* <Input
@@ -153,7 +153,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"
@@ -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"
           />
           <div className={cn(stl.right, 'cursor-pointer')} onLick={onAddOrRemove}>
             {/* <Icon name="close" size="18" /> */}
@@ -175,10 +175,10 @@ class AutoComplete extends React.PureComponent {
             { headerText && headerText }
             {
               options.map(item => (
-                <FilterItem 
+                <FilterItem
                   label={ item.value }
                   icon={ item.icon }
-                  onClick={ (e) => this.onItemClick(e, item) } 
+                  onClick={ (e) => this.onItemClick(e, item) }
                 />
                 // <DropdownItem key={ item.value } value={ item.value } onSelect={ (e) => this.onItemClick(e, item) } />
               ))

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<any>([]);
   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 && <Icon name={ icon } size="16" marginRight="8" /> }
                       <span className={ stl.label }>{ item.value }</span>
-                    </div>             
+                    </div>
                   ))
                 }
               </div>
-            )} 
+            )}
           </Loader>
         </div>
       )}
@@ -151,4 +152,4 @@ function FilterAutoComplete(props: Props) {
   );
 }
 
-export default FilterAutoComplete;
+export default FilterAutoComplete;