ui: support auto opening for AutocompleteModal

frontend/app/components/Dashboard/components/FilterSeries/FilterSeries.tsx

@@ -168,6 +168,7 @@ function FilterSeries(props: Props) {
   };
 
   const onAddFilter = (filter: any) => {
+    filter.autoOpen = true;
     series.filter.addFilter(filter);
     observeChanges();
   }

frontend/app/components/shared/Filters/FilterAutoComplete/AutocompleteModal.tsx

@@ -234,6 +234,7 @@ interface Props {
   placeholder?: string;
   modalProps?: any;
   mapValues?: (value: string) => string;
+  isAutoOpen?: boolean;
 }
 
 export function AutoCompleteContainer(props: Props) {
@@ -241,6 +242,15 @@ export function AutoCompleteContainer(props: Props) {
   const [showValueModal, setShowValueModal] = useState(false);
   const [hovered, setHovered] = useState(false);
   const isEmpty = props.value.length === 0 || !props.value[0];
+
+  React.useEffect(() => {
+    if (props.isAutoOpen) {
+      setTimeout(() => {
+        setShowValueModal(true);
+      }, 1)
+    }
+  }, [props.isAutoOpen])
+
   const onClose = () => setShowValueModal(false);
   const onApply = (values: string[]) => {
     setTimeout(() => {

frontend/app/components/shared/Filters/FilterAutoComplete/FilterAutoComplete.tsx

@@ -44,6 +44,7 @@ interface Props {
   hideOrText?: boolean;
   onApplyValues: (values: string[]) => void;
   modalProps?: Record<string, any>
+  isAutoOpen?: boolean;
 }
 
 const FilterAutoComplete = observer(

frontend/app/components/shared/Filters/FilterAutoCompleteLocal/FilterAutoCompleteLocal.tsx

@@ -18,6 +18,7 @@ interface Props {
   allowDecimals?: boolean;
   modalProps?: Record<string, any>;
   onApplyValues: (values: string[]) => void;
+  isAutoOpen?: boolean;
 }
 
 function FilterAutoCompleteLocal(props: { params: any, values: string[], onClose: () => void, onApply: (values: string[]) => void, placeholder?: string }) {

frontend/app/components/shared/Filters/FilterValue/FilterValue.tsx

@@ -18,6 +18,8 @@ interface Props {
 }
 function FilterValue(props: Props) {
   const { filter } = props;
+  const isAutoOpen = filter.autoOpen;
+
   const [durationValues, setDurationValues] = useState({
     minDuration: filter.value?.[0],
     maxDuration: filter.value.length > 1 ? filter.value[1] : filter.value[0],
@@ -99,6 +101,7 @@ function FilterValue(props: Props) {
         onSelect={(e, item, index) => debounceOnSelect(e, item, index)}
         icon={filter.icon}
         placeholder={filter.placeholder}
+        isAutoOpen={isAutoOpen}
         modalProps={{ placeholder: '' }}
         {...props}
       />
@@ -106,6 +109,7 @@ function FilterValue(props: Props) {
     const BaseDropDown = (props) => (
       <FilterValueDropdown
         value={value}
+        isAutoOpen={isAutoOpen}
         placeholder={filter.placeholder}
         options={filter.options}
         onApplyValues={onApplyValues}
@@ -157,6 +161,7 @@ function FilterValue(props: Props) {
         return (
           <FilterAutoComplete
             value={value}
+            isAutoOpen={isAutoOpen}
             showCloseButton={showCloseButton}
             showOrButton={showOrButton}
             onApplyValues={onApplyValues}

frontend/app/components/shared/LiveSessionSearch/LiveSessionSearch.tsx

@@ -13,6 +13,7 @@ function LiveSessionSearch() {
   }, []);
 
   const onAddFilter = (filter: any) => {
+    filter.autoOpen = true;
     searchStoreLive.addFilter(filter);
   };
 

frontend/app/components/shared/SessionFilters/SessionFilters.tsx

@@ -57,6 +57,7 @@ function SessionFilters() {
   }, [appliedFilter.filters]);
 
   const onAddFilter = (filter: any) => {
+    filter.autoOpen = true;
     searchStore.addFilter(filter);
   };
 

frontend/app/mstore/types/filter.ts

@@ -19,6 +19,7 @@ export interface IFilter {
   eventsHeader: string;
   page: number;
   limit: number;
+  autoOpen: boolean;
 
   merge(filter: any): void;
 
@@ -62,6 +63,7 @@ export default class Filter implements IFilter {
 
   filterId: string = '';
   name: string = '';
+  autoOpen = false;
   filters: FilterItem[] = [];
   excludes: FilterItem[] = [];
   eventsOrder: string = 'then';