feat(chart): add dynamicQueryObjectCount property to Chart Metadata (#33451)

superset-frontend/src/explore/components/DataTablesPane/components/useResultsPane.tsx

@@ -57,6 +57,7 @@ export const useResultsPane = ({
   const [isLoading, setIsLoading] = useState<boolean>(true);
   const [responseError, setResponseError] = useState<string>('');
   const queryCount = metadata?.queryObjectCount ?? 1;
+  const isQueryCountDynamic = metadata?.dynamicQueryObjectCount;
 
   useEffect(() => {
     // it's an invalid formData when gets a errorMessage
@@ -139,19 +140,21 @@ export const useResultsPane = ({
       <EmptyState image="document.svg" title={title} />,
     );
   }
-  return resultResp
-    .slice(0, queryCount)
-    .map((result, idx) => (
-      <SingleQueryResultPane
-        data={result.data}
-        colnames={result.colnames}
-        coltypes={result.coltypes}
-        rowcount={result.rowcount}
-        dataSize={dataSize}
-        datasourceId={queryFormData.datasource}
-        key={idx}
-        isVisible={isVisible}
-        canDownload={canDownload}
-      />
-    ));
+  const resultRespToDisplay = isQueryCountDynamic
+    ? resultResp
+    : resultResp.slice(0, queryCount);
+
+  return resultRespToDisplay.map((result, idx) => (
+    <SingleQueryResultPane
+      data={result.data}
+      colnames={result.colnames}
+      coltypes={result.coltypes}
+      rowcount={result.rowcount}
+      dataSize={dataSize}
+      datasourceId={queryFormData.datasource}
+      key={idx}
+      isVisible={isVisible}
+      canDownload={canDownload}
+    />
+  ));
 };

superset-frontend/src/explore/components/DataTablesPane/test/ResultsPaneOnDashboard.test.tsx

@@ -174,4 +174,33 @@ describe('ResultsPaneOnDashboard', () => {
     expect(await findByText('Results')).toBeVisible();
     expect(await findByText('Results 2')).toBeVisible();
   });
+
+  test('dynamic number of results pane', async () => {
+    const FakeChart = () => <span>test</span>;
+    const metadata = new ChartMetadata({
+      name: 'test-chart',
+      thumbnail: '',
+      dynamicQueryObjectCount: true,
+    });
+
+    const plugin = new ChartPlugin({
+      metadata,
+      Chart: FakeChart,
+    });
+    plugin.configure({ key: VizType.MixedTimeseries }).register();
+
+    const props = createResultsPaneOnDashboardProps({
+      sliceId: 196,
+      vizType: VizType.MixedTimeseries,
+    });
+    const { findByText, queryByText } = render(
+      <ResultsPaneOnDashboard {...props} />,
+      {
+        useRedux: true,
+      },
+    );
+    expect(await findByText('Results')).toBeVisible();
+    expect(await findByText('Results 2')).toBeVisible();
+    expect(queryByText('Results 3')).not.toBeInTheDocument();
+  });
 });