fix(SQLLab): most recent queries at the top in Query History without refreshing the page (#36359)

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

@@ -133,3 +133,112 @@ test('fetches the query history by the tabViewId', async () => {
   expect(queryResultText).toBeInTheDocument();
   isFeatureEnabledMock.mockClear();
 });
+
+test('displays multiple queries with newest query first', async () => {
+  const isFeatureEnabledMock = mockedIsFeatureEnabled.mockImplementation(
+    featureFlag => featureFlag === FeatureFlag.SqllabBackendPersistence,
+  );
+
+  const multipleQueriesApiResult = {
+    count: 2,
+    ids: [694, 693],
+    result: [
+      {
+        changed_on: '2024-03-12T20:10:02.497775',
+        client_id: 'd2ZDzRYzn',
+        database: {
+          database_name: 'examples',
+          id: 1,
+        },
+        end_time: '1710274202496.047852',
+        error_message: null,
+        executed_sql: 'SELECT COUNT(*) from "FCC 2018 Survey"\nLIMIT 1001',
+        id: 694,
+        limit: 1000,
+        limiting_factor: 'DROPDOWN',
+        progress: 100,
+        results_key: null,
+        rows: 1,
+        schema: 'main',
+        select_as_cta: false,
+        sql: 'SELECT COUNT(*) from "FCC 2018 Survey"',
+        sql_editor_id: '22',
+        start_time: '1710274202445.992920',
+        status: QueryState.Success,
+        tab_name: 'Untitled Query 2',
+        tmp_table_name: null,
+        tracking_url: null,
+        user: {
+          first_name: 'admin',
+          id: 1,
+          last_name: 'user',
+        },
+      },
+      {
+        changed_on: '2024-03-12T20:01:02.497775',
+        client_id: 'b0ZDzRYzn',
+        database: {
+          database_name: 'examples',
+          id: 1,
+        },
+        end_time: '1710273662496.047852',
+        error_message: null,
+        executed_sql: 'SELECT * from "FCC 2018 Survey"\nLIMIT 1001',
+        id: 693,
+        limit: 1000,
+        limiting_factor: 'DROPDOWN',
+        progress: 100,
+        results_key: null,
+        rows: 443,
+        schema: 'main',
+        select_as_cta: false,
+        sql: 'SELECT * from "FCC 2018 Survey"',
+        sql_editor_id: '22',
+        start_time: '1710273662445.992920',
+        status: QueryState.Success,
+        tab_name: 'Untitled Query 1',
+        tmp_table_name: null,
+        tracking_url: null,
+        user: {
+          first_name: 'admin',
+          id: 1,
+          last_name: 'user',
+        },
+      },
+    ],
+  };
+
+  const editorQueryApiRoute = `glob:*/api/v1/query/?q=*`;
+  fetchMock.get(editorQueryApiRoute, multipleQueriesApiResult);
+  const { container } = render(setup(), { useRedux: true, initialState });
+
+  await waitFor(() =>
+    expect(fetchMock.calls(editorQueryApiRoute).length).toBe(1),
+  );
+
+  expect(screen.getByTestId('listview-table')).toBeVisible();
+  expect(screen.getByRole('table')).toBeVisible();
+
+  const tableRows = container.querySelectorAll(
+    'table > tbody > tr:not(.ant-table-measure-row)',
+  );
+  expect(tableRows).toHaveLength(2);
+
+  // Check that both queries are present
+  const olderQueryRow = screen.getByText('443');
+  const newerQueryElements = screen.getAllByText('1');
+  expect(olderQueryRow).toBeInTheDocument();
+  expect(newerQueryElements.length).toBeGreaterThan(0);
+
+  // Verify ordering: newer query (1 row) should appear before older query (443 rows)
+  // Find the actual row elements to check their order
+  const firstDataRow = tableRows[0];
+  const secondDataRow = tableRows[1];
+
+  // The newer query should be in the first row (has 1 result row)
+  expect(firstDataRow).toHaveTextContent('1');
+  // The older query should be in the second row (has 443 result rows)
+  expect(secondDataRow).toHaveTextContent('443');
+
+  isFeatureEnabledMock.mockClear();
+});

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

@@ -91,7 +91,11 @@ const QueryHistory = ({
             editorId,
           )
             .concat(data.result)
-            .reverse()
+            .sort((a, b) => {
+              const aTime = a.startDttm || 0;
+              const bTime = b.startDttm || 0;
+              return aTime - bTime;
+            })
         : getEditorQueries(queries, editorId),
     [queries, data, editorId],
   );