Merge branch 'master' into enxdev/fix/view-as-table

superset-frontend/packages/superset-ui-core/src/components/Select/types.ts

@@ -65,6 +65,7 @@ export type AntdExposedProps = Pick<
   | 'onOpenChange'
   | 'optionRender'
   | 'placeholder'
+  | 'prefix'
   | 'showArrow'
   | 'showSearch'
   | 'tokenSeparators'

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

@@ -68,6 +68,7 @@ export const TableControls = ({
   canDownload,
   rowLimit,
   rowLimitOptions,
+  effectiveRowLimit,
   onRowLimitChange,
   onDownloadCSV,
   onDownloadXLSX,
@@ -111,14 +112,18 @@ export const TableControls = ({
             value={rowLimit}
             onChange={onRowLimitChange}
             options={rowLimitOptions ?? []}
+            // Labelled as the applied limit to avoid a second row count next to RowCountLabel.
+            prefix={t('Limit')}
             css={css`
-              min-width: 110px;
+              min-width: 160px;
             `}
           />
         )}
-        {(!onRowLimitChange || rowcount < (rowLimit ?? Infinity)) && (
-          <RowCountLabel rowcount={rowcount} loading={isLoading} />
-        )}
+        <RowCountLabel
+          rowcount={rowcount}
+          limit={effectiveRowLimit ?? rowLimit}
+          loading={isLoading}
+        />
         {canDownload && onDownloadCSV && onDownloadXLSX && (
           <DownloadDropdown
             onDownloadCSV={onDownloadCSV}

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

@@ -56,6 +56,7 @@ export const SingleQueryResultPane = ({
   columnDisplayNames,
   rowLimit,
   rowLimitOptions,
+  effectiveRowLimit,
   onRowLimitChange,
   onDownloadCSV,
   onDownloadXLSX,
@@ -86,6 +87,7 @@ export const SingleQueryResultPane = ({
         canDownload={canDownload}
         rowLimit={rowLimit}
         rowLimitOptions={rowLimitOptions}
+        effectiveRowLimit={effectiveRowLimit}
         onRowLimitChange={onRowLimitChange}
         onDownloadCSV={onDownloadCSV}
         onDownloadXLSX={onDownloadXLSX}

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

@@ -236,6 +236,7 @@ export const useResultsPane = ({
         columnDisplayNames={columnDisplayNames}
         rowLimit={rowLimit}
         rowLimitOptions={ROW_LIMIT_OPTIONS}
+        effectiveRowLimit={effectiveRowLimit}
         onRowLimitChange={handleRowLimitChange}
       />
     </StyledDiv>

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

@@ -0,0 +1,83 @@
+/**
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+import { render, screen, userEvent } from 'spec/helpers/testing-library';
+import { GenericDataType } from '@apache-superset/core/common';
+import {
+  TableControls,
+  ROW_LIMIT_OPTIONS,
+} from '../components/DataTableControls';
+import { TableControlsProps } from '../types';
+
+const setup = (overrides: Partial<TableControlsProps> = {}) =>
+  render(
+    <TableControls
+      data={[]}
+      columnNames={['name']}
+      columnTypes={[GenericDataType.String]}
+      rowcount={0}
+      onInputChange={jest.fn()}
+      isLoading={false}
+      canDownload
+      rowLimit={100}
+      rowLimitOptions={ROW_LIMIT_OPTIONS}
+      onRowLimitChange={jest.fn()}
+      {...overrides}
+    />,
+    { useRedux: true },
+  );
+
+test('shows the row count when the result fills the selected row limit', () => {
+  setup({ rowcount: 100, rowLimit: 100 });
+
+  expect(screen.getByTestId('row-count-label')).toHaveTextContent('100 rows');
+});
+
+test('warns that the row limit was reached when the result fills it', async () => {
+  setup({ rowcount: 100, rowLimit: 100 });
+
+  userEvent.hover(screen.getByTestId('row-count-label'));
+
+  expect(await screen.findByRole('tooltip')).toHaveTextContent(
+    'The row limit set for the chart was reached',
+  );
+});
+
+test('does not warn when the result is smaller than the selected row limit', () => {
+  setup({ rowcount: 42, rowLimit: 100 });
+
+  expect(screen.getByTestId('row-count-label')).toHaveTextContent('42 rows');
+  userEvent.hover(screen.getByTestId('row-count-label'));
+  expect(screen.queryByRole('tooltip')).not.toBeInTheDocument();
+});
+
+test("warns when the chart's own row limit truncates below the selected row limit", async () => {
+  setup({ rowcount: 250, rowLimit: 1000, effectiveRowLimit: 250 });
+
+  userEvent.hover(screen.getByTestId('row-count-label'));
+
+  expect(await screen.findByRole('tooltip')).toHaveTextContent(
+    'The row limit set for the chart was reached',
+  );
+});
+
+test('labels the row limit selector so it is not read as a second row count', () => {
+  setup({ rowcount: 100, rowLimit: 100 });
+
+  expect(screen.getByText('Limit')).toBeInTheDocument();
+});

superset-frontend/src/explore/components/DataTablesPane/types.ts

@@ -84,6 +84,9 @@ export interface TableControlsProps extends DrillControlsProps {
   canDownload: boolean;
   rowLimit?: number;
   rowLimitOptions?: { value: number; label: string }[];
+  // Effective result limit, capped by the chart's row limit.
+  // Defaults to `rowLimit` and controls the "row limit reached" warning.
+  effectiveRowLimit?: number;
   onRowLimitChange?: (limit: number) => void;
 }
 
@@ -104,5 +107,6 @@ export interface SingleQueryResultPaneProp
   columnDisplayNames?: Record<string, string>;
   rowLimit?: number;
   rowLimitOptions?: { value: number; label: string }[];
+  effectiveRowLimit?: number;
   onRowLimitChange?: (limit: number) => void;
 }