fix(sqllab): flaky json explore modal due to over-rendering (#26156)

superset-frontend/src/SqlLab/components/QueryHistory/QueryHistory.test.tsx

@@ -19,9 +19,10 @@
 import React from 'react';
 import { render, screen } from 'spec/helpers/testing-library';
 import QueryHistory from 'src/SqlLab/components/QueryHistory';
+import { initialState } from 'src/SqlLab/fixtures';
 
 const mockedProps = {
-  queries: [],
+  queryEditorId: 123,
   displayLimit: 1000,
   latestQueryId: 'yhMUZCGb',
 };
@@ -32,7 +33,7 @@ const setup = (overrides = {}) => (
 
 describe('QueryHistory', () => {
   it('Renders an empty state for query history', () => {
-    render(setup());
+    render(setup(), { useRedux: true, initialState });
 
     const emptyStateText = screen.getByText(
       /run a query to display query history/i,

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

@@ -16,13 +16,15 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-import React from 'react';
+import React, { useMemo } from 'react';
+import { shallowEqual, useSelector } from 'react-redux';
 import { EmptyStateMedium } from 'src/components/EmptyState';
-import { t, styled, QueryResponse } from '@superset-ui/core';
+import { t, styled } from '@superset-ui/core';
 import QueryTable from 'src/SqlLab/components/QueryTable';
+import { SqlLabRootState } from 'src/SqlLab/types';
 
 interface QueryHistoryProps {
-  queries: QueryResponse[];
+  queryEditorId: string | number;
   displayLimit: number;
   latestQueryId: string | undefined;
 }
@@ -39,11 +41,23 @@ const StyledEmptyStateWrapper = styled.div`
 `;
 
 const QueryHistory = ({
-  queries,
+  queryEditorId,
   displayLimit,
   latestQueryId,
-}: QueryHistoryProps) =>
-  queries.length > 0 ? (
+}: QueryHistoryProps) => {
+  const queries = useSelector(
+    ({ sqlLab: { queries } }: SqlLabRootState) => queries,
+    shallowEqual,
+  );
+  const editorQueries = useMemo(
+    () =>
+      Object.values(queries).filter(
+        ({ sqlEditorId }) => String(sqlEditorId) === String(queryEditorId),
+      ),
+    [queries, queryEditorId],
+  );
+
+  return editorQueries.length > 0 ? (
     <QueryTable
       columns={[
         'state',
@@ -55,7 +69,7 @@ const QueryHistory = ({
         'results',
         'actions',
       ]}
-      queries={queries}
+      queries={editorQueries}
       displayLimit={displayLimit}
       latestQueryId={latestQueryId}
     />
@@ -67,5 +81,6 @@ const QueryHistory = ({
       />
     </StyledEmptyStateWrapper>
   );
+};
 
 export default QueryHistory;