feat: Keep searching result

superset-frontend/src/SqlLab/actions/sqlLab.js

@@ -62,6 +62,7 @@ export const QUERY_EDITOR_SET_SQL = 'QUERY_EDITOR_SET_SQL';
 export const QUERY_EDITOR_SET_CURSOR_POSITION =
   'QUERY_EDITOR_SET_CURSOR_POSITION';
 export const QUERY_EDITOR_SET_QUERY_LIMIT = 'QUERY_EDITOR_SET_QUERY_LIMIT';
+export const QUERY_EDITOR_SET_RESULT_SEARCH = 'QUERY_EDITOR_SET_RESULT_SEARCH';
 export const QUERY_EDITOR_SET_TEMPLATE_PARAMS =
   'QUERY_EDITOR_SET_TEMPLATE_PARAMS';
 export const QUERY_EDITOR_SET_SELECTED_TEXT = 'QUERY_EDITOR_SET_SELECTED_TEXT';
@@ -933,6 +934,10 @@ export function queryEditorSetQueryLimit(queryEditor, queryLimit) {
   };
 }
 
+export function queryEditorSetResultSearch(queryEditor, resultSearch) {
+  return { type: QUERY_EDITOR_SET_RESULT_SEARCH, queryEditor, resultSearch };
+}
+
 export function queryEditorSetTemplateParams(queryEditor, templateParams) {
   return {
     type: QUERY_EDITOR_SET_TEMPLATE_PARAMS,

superset-frontend/src/SqlLab/components/ResultSet/index.tsx

@@ -17,7 +17,7 @@
  * under the License.
  */
 import React, { useCallback, useEffect, useState } from 'react';
-import { useDispatch } from 'react-redux';
+import { useDispatch, useSelector } from 'react-redux';
 import { useHistory } from 'react-router-dom';
 import ButtonGroup from 'src/components/ButtonGroup';
 import Alert from 'src/components/Alert';
@@ -42,7 +42,7 @@ import {
   SaveDatasetModal,
 } from 'src/SqlLab/components/SaveDatasetModal';
 import { UserWithPermissionsAndRoles } from 'src/types/bootstrapTypes';
-import { EXPLORE_CHART_DEFAULT } from 'src/SqlLab/types';
+import { EXPLORE_CHART_DEFAULT, SqlLabRootState } from 'src/SqlLab/types';
 import { mountExploreUrl } from 'src/explore/exploreUtils';
 import { postFormData } from 'src/explore/exploreUtils/formData';
 import ProgressBar from 'src/components/ProgressBar';
@@ -61,6 +61,7 @@ import {
   fetchQueryResults,
   reFetchQueryResults,
   reRunQuery,
+  queryEditorSetResultSearch,
 } from 'src/SqlLab/actions/sqlLab';
 import { URL_PARAMS } from 'src/constants';
 import Icons from 'src/components/Icons';
@@ -83,6 +84,7 @@ export interface ResultSetProps {
   displayLimit: number;
   height: number;
   query: QueryResponse;
+  queryEditorId?: string;
   search?: boolean;
   showSql?: boolean;
   showSqlInline?: boolean;
@@ -146,6 +148,7 @@ const ResultSet = ({
   displayLimit,
   height,
   query,
+  queryEditorId,
   search = true,
   showSql = false,
   showSqlInline = false,
@@ -156,14 +159,25 @@ const ResultSet = ({
   const ResultTable =
     extensionsRegistry.get('sqleditor.extension.resultTable') ??
     FilterableTable;
+  const dispatch = useDispatch();
   const theme = useTheme();
-  const [searchText, setSearchText] = useState('');
+  const { resultSearch, queryEditor } = useSelector(
+    (state: SqlLabRootState) => {
+      const queryEditor = state.sqlLab.queryEditors.find(
+        ({ id }) => id === queryEditorId,
+      );
+      return {
+        resultSearch: queryEditor?.resultSearch,
+        queryEditor,
+      };
+    },
+  );
+  const [searchText, setSearchText] = useState(resultSearch);
   const [cachedData, setCachedData] = useState<Record<string, unknown>[]>([]);
   const [showSaveDatasetModal, setShowSaveDatasetModal] = useState(false);
   const [alertIsOpen, setAlertIsOpen] = useState(false);
 
   const history = useHistory();
-  const dispatch = useDispatch();
 
   const reRunQueryIfSessionTimeoutErrorOnMount = useCallback(() => {
     if (
@@ -215,6 +229,7 @@ const ResultSet = ({
 
   const changeSearch = (event: React.ChangeEvent<HTMLInputElement>) => {
     setSearchText(event.target.value);
+    dispatch(queryEditorSetResultSearch(queryEditor, event.target.value));
   };
 
   const createExploreResultsOnClick = async (clickEvent: React.MouseEvent) => {

superset-frontend/src/SqlLab/components/SouthPane/index.tsx

@@ -191,6 +191,7 @@ const SouthPane = ({
             defaultQueryLimit={defaultQueryLimit}
             showSql
             showSqlInline
+            queryEditorId={queryEditorId}
           />
         );
       }
@@ -222,6 +223,7 @@ const SouthPane = ({
           height={innerTabContentHeight}
           displayLimit={displayLimit}
           defaultQueryLimit={defaultQueryLimit}
+          queryEditorId={queryEditorId}
         />
       </Tabs.TabPane>
     ));

superset-frontend/src/SqlLab/reducers/getInitialState.ts

@@ -66,6 +66,7 @@ export default function getInitialState({
     hideLeftBar: false,
     remoteId: null,
     cursorPosition: { row: 0, column: 0 },
+    resultSearch: '',
   };
   let unsavedQueryEditor: UnsavedQueryEditor = {};
 
@@ -94,6 +95,7 @@ export default function getInitialState({
         queryLimit: activeTab.query_limit,
         hideLeftBar: activeTab.hide_left_bar,
         updatedAt: activeTab.extra_json?.updatedAt,
+        resultSearch: activeTab.result_search || '',
       };
     } else {
       // dummy state, actual state will be loaded on tab switch

superset-frontend/src/SqlLab/reducers/sqlLab.js

@@ -556,6 +556,18 @@ export default function sqlLabReducer(state = {}, action) {
         ),
       };
     },
+    [actions.QUERY_EDITOR_SET_RESULT_SEARCH]() {
+      return {
+        ...state,
+        ...alterUnsavedQueryEditorState(
+          state,
+          {
+            resultSearch: action.resultSearch,
+          },
+          action.queryEditor.id,
+        ),
+      };
+    },
     [actions.QUERY_EDITOR_SET_QUERY_LIMIT]() {
       return {
         ...state,

superset-frontend/src/SqlLab/types.ts

@@ -62,6 +62,7 @@ export interface QueryEditor {
   southPercent?: number;
   updatedAt?: number;
   cursorPosition?: CursorPosition;
+  resultSearch?: string;
 }
 
 export type toastState = {

superset-frontend/src/hooks/apiResources/sqlLab.ts

@@ -51,6 +51,7 @@ export type InitialState = {
     hide_left_bar?: boolean;
     saved_query: { id: number } | null;
     extra_json?: Record<string, any>;
+    result_search?: string;
   };
   databases: object[];
   queries: Record<