[Security Solution] Invalid kql query timeline refresh bug (#105525)

* poc test

* adds disable for refresh button

Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com>

x-pack/plugins/security_solution/public/common/components/super_date_picker/index.tsx

@@ -91,6 +91,7 @@ export const SuperDatePickerComponent = React.memo<SuperDatePickerProps>(
     timelineId,
     toStr,
     updateReduxTime,
+    disabled,
   }) => {
     const [recentlyUsedRanges, setRecentlyUsedRanges] = useState<EuiSuperDatePickerRecentRange[]>(
       []
@@ -201,6 +202,7 @@ export const SuperDatePickerComponent = React.memo<SuperDatePickerProps>(
         refreshInterval={duration}
         showUpdateButton={true}
         start={startDate}
+        isDisabled={disabled}
       />
     );
   },
@@ -216,6 +218,7 @@ export const SuperDatePickerComponent = React.memo<SuperDatePickerProps>(
     prevProps.startAutoReload === nextProps.startAutoReload &&
     prevProps.stopAutoReload === nextProps.stopAutoReload &&
     prevProps.timelineId === nextProps.timelineId &&
+    prevProps.disabled === nextProps.disabled &&
     prevProps.toStr === nextProps.toStr &&
     prevProps.updateReduxTime === nextProps.updateReduxTime &&
     deepEqual(prevProps.kqlQuery, nextProps.kqlQuery) &&

x-pack/plugins/security_solution/public/timelines/components/timeline/query_tab_content/index.tsx

@@ -220,14 +220,21 @@ export const QueryTabContentComponent: React.FC<Props> = ({
   });
 
   const isBlankTimeline: boolean =
-    isEmpty(dataProviders) && isEmpty(filters) && isEmpty(kqlQuery.query);
+    isEmpty(dataProviders) &&
+    isEmpty(filters) &&
+    isEmpty(kqlQuery.query) &&
+    combinedQueries?.filterQuery === undefined;
 
-  const canQueryTimeline = () =>
+  const canQueryTimeline = useMemo(
-    combinedQueries != null &&
+    () =>
-    loadingSourcerer != null &&
+      combinedQueries != null &&
-    !loadingSourcerer &&
+      loadingSourcerer != null &&
-    !isEmpty(start) &&
+      !loadingSourcerer &&
-    !isEmpty(end);
+      !isEmpty(start) &&
+      !isEmpty(end) &&
+      combinedQueries?.filterQuery !== undefined,
+    [combinedQueries, end, loadingSourcerer, start]
+  );
 
   const getTimelineQueryFields = () => {
     const columnsHeader = isEmpty(columns) ? defaultHeaders : columns;
@@ -264,7 +271,7 @@ export const QueryTabContentComponent: React.FC<Props> = ({
     limit: itemsPerPage,
     filterQuery: combinedQueries?.filterQuery,
     startDate: start,
-    skip: !canQueryTimeline() || combinedQueries?.filterQuery === undefined,
+    skip: !canQueryTimeline,
     sort: timelineQuerySortField,
     timerangeKind,
   });
@@ -290,6 +297,10 @@ export const QueryTabContentComponent: React.FC<Props> = ({
     );
   }, [loadingSourcerer, timelineId, isQueryLoading, dispatch]);
 
+  const isDatePickerDisabled = useMemo(() => {
+    return (combinedQueries && combinedQueries.kqlError != null) || false;
+  }, [combinedQueries]);
+
   const leadingControlColumns: ControlColumnProps[] = [defaultControlColumn];
   const trailingControlColumns: ControlColumnProps[] = [];
 
@@ -304,6 +315,7 @@ export const QueryTabContentComponent: React.FC<Props> = ({
         inspect={inspect}
         loading={isQueryLoading}
         refetch={refetch}
+        skip={!canQueryTimeline}
       />
       <FullWidthFlexGroup gutterSize="none">
         <ScrollableFlexItem grow={2}>
@@ -323,7 +335,11 @@ export const QueryTabContentComponent: React.FC<Props> = ({
                 />
               )}
               <DatePicker grow={1}>
-                <SuperDatePicker id="timeline" timelineId={timelineId} />
+                <SuperDatePicker
+                  id="timeline"
+                  timelineId={timelineId}
+                  disabled={isDatePickerDisabled}
+                />
               </DatePicker>
               <EuiFlexItem grow={false}>
                 <TimelineDatePickerLock />

x-pack/plugins/security_solution/public/timelines/components/timeline/refetch_timeline.tsx

@@ -18,6 +18,7 @@ export interface TimelineRefetchProps {
   inspect: inputsModel.InspectQuery | null;
   loading: boolean;
   refetch: inputsModel.Refetch;
+  skip?: boolean;
 }
 
 const TimelineRefetchComponent: React.FC<TimelineRefetchProps> = ({
@@ -26,12 +27,15 @@ const TimelineRefetchComponent: React.FC<TimelineRefetchProps> = ({
   inspect,
   loading,
   refetch,
+  skip,
 }) => {
   const dispatch = useDispatch();
 
   useEffect(() => {
-    dispatch(inputsActions.setQuery({ id, inputId, inspect, loading, refetch }));
+    if (!skip) {
-  }, [dispatch, id, inputId, loading, refetch, inspect]);
+      dispatch(inputsActions.setQuery({ id, inputId, inspect, loading, refetch }));
+    }
+  }, [dispatch, id, inputId, loading, refetch, inspect, skip]);
 
   return null;
 };