feat: Don't show the row limit warning for embedded dashboards by default (#34095)

superset-embedded-sdk/src/index.ts

@@ -46,6 +46,7 @@ export type UiConfigType = {
   urlParams?: {
     [key: string]: any;
   };
+  showRowLimitWarning?: boolean;
 };
 
 export type EmbedDashboardParams = {
@@ -133,6 +134,9 @@ export async function embedDashboard({
       if (dashboardUiConfig.emitDataMasks) {
         configNumber += 16;
       }
+      if (dashboardUiConfig.showRowLimitWarning) {
+        configNumber += 32;
+      }
     }
     return configNumber;
   }

superset-frontend/src/components/UiConfigContext/index.tsx

@@ -26,8 +26,9 @@ interface UiConfigType {
   hideTab: boolean;
   hideNav: boolean;
   hideChartControls: boolean;
-  // Only used in superset-embedded-sdk to emit data masks to the parent window
-  emitDataMasks: boolean;
+  // superset-embedded-sdk specific
+  emitDataMasks: boolean; // emit data masks to the parent window
+  showRowLimitWarning: boolean; // show the row limit warning
 }
 interface EmbeddedUiConfigProviderProps {
   children: JSX.Element;
@@ -39,6 +40,7 @@ export const UiConfigContext = createContext<UiConfigType>({
   hideNav: false,
   hideChartControls: false,
   emitDataMasks: false,
+  showRowLimitWarning: false,
 });
 
 export const useUiConfig = () => useContext(UiConfigContext);
@@ -53,6 +55,7 @@ export const EmbeddedUiConfigProvider: FC<EmbeddedUiConfigProviderProps> = ({
     hideNav: (config & 4) !== 0,
     hideChartControls: (config & 8) !== 0,
     emitDataMasks: (config & 16) !== 0,
+    showRowLimitWarning: (config & 32) !== 0,
   });
 
   return (

superset-frontend/src/dashboard/components/SliceHeader/SliceHeader.test.tsx

@@ -20,6 +20,8 @@ import { Router } from 'react-router-dom';
 import { createMemoryHistory } from 'history';
 import { getExtensionsRegistry, VizType } from '@superset-ui/core';
 import { render, screen, userEvent } from 'spec/helpers/testing-library';
+import { isEmbedded } from 'src/dashboard/util/isEmbedded';
+import { useUiConfig } from 'src/components/UiConfigContext';
 import SliceHeader from '.';
 
 jest.mock('src/dashboard/components/SliceHeaderControls', () => ({
@@ -100,6 +102,21 @@ jest.mock('src/dashboard/components/FiltersBadge', () => ({
   ),
 }));
 
+jest.mock('src/dashboard/util/isEmbedded', () => ({
+  isEmbedded: jest.fn().mockReturnValue(false),
+}));
+
+jest.mock('src/components/UiConfigContext', () => ({
+  useUiConfig: jest.fn().mockReturnValue({
+    hideTitle: false,
+    hideTab: false,
+    hideNav: false,
+    hideChartControls: false,
+    emitDataMasks: false,
+    showRowLimitWarning: false,
+  }),
+}));
+
 const MOCKED_CHART_ID = 312;
 
 const initialState = {
@@ -584,3 +601,84 @@ test('Should render RowCountLabel when row limit is hit, and hide it otherwise',
 
   expect(screen.queryByTestId('warning')).not.toBeInTheDocument();
 });
+
+test('Should hide RowCountLabel in embedded by default', () => {
+  const mockIsEmbedded = isEmbedded as jest.MockedFunction<typeof isEmbedded>;
+  mockIsEmbedded.mockReturnValue(true);
+
+  const props = createProps({
+    formData: {
+      ...createProps().formData,
+      row_limit: 10,
+    },
+  });
+  const rowCountState = {
+    ...initialState,
+    charts: {
+      [props.slice.slice_id]: {
+        queriesResponse: [
+          {
+            sql_rowcount: 10,
+          },
+        ],
+      },
+    },
+  };
+
+  render(<SliceHeader {...props} />, {
+    useRedux: true,
+    useRouter: true,
+    initialState: rowCountState,
+  });
+
+  expect(screen.queryByTestId('warning')).not.toBeInTheDocument();
+
+  mockIsEmbedded.mockRestore();
+});
+
+test('Should show RowCountLabel in embedded when uiConfig.showRowLimitWarning is true', () => {
+  const mockIsEmbedded = isEmbedded as jest.MockedFunction<typeof isEmbedded>;
+  const mockUseUiConfig = useUiConfig as jest.MockedFunction<
+    typeof useUiConfig
+  >;
+
+  mockIsEmbedded.mockReturnValue(true);
+  mockUseUiConfig.mockReturnValue({
+    hideTitle: false,
+    hideTab: false,
+    hideNav: false,
+    hideChartControls: false,
+    emitDataMasks: false,
+    showRowLimitWarning: true,
+  });
+
+  const props = createProps({
+    formData: {
+      ...createProps().formData,
+      row_limit: 10,
+    },
+  });
+  const rowCountState = {
+    ...initialState,
+    charts: {
+      [props.slice.slice_id]: {
+        queriesResponse: [
+          {
+            sql_rowcount: 10,
+          },
+        ],
+      },
+    },
+  };
+
+  render(<SliceHeader {...props} />, {
+    useRedux: true,
+    useRouter: true,
+    initialState: rowCountState,
+  });
+
+  expect(screen.getByTestId('warning')).toBeInTheDocument();
+
+  mockIsEmbedded.mockRestore();
+  mockUseUiConfig.mockRestore();
+});

superset-frontend/src/dashboard/components/SliceHeader/index.tsx

@@ -34,6 +34,7 @@ import {
   useTheme,
 } from '@superset-ui/core';
 import { useUiConfig } from 'src/components/UiConfigContext';
+import { isEmbedded } from 'src/dashboard/util/isEmbedded';
 import { Tooltip, EditableTitle, Icons } from '@superset-ui/core/components';
 import { useSelector } from 'react-redux';
 import SliceHeaderControls from 'src/dashboard/components/SliceHeaderControls';
@@ -173,6 +174,8 @@ const SliceHeader = forwardRef<HTMLDivElement, SliceHeaderProps>(
       'dashboard.slice.header',
     );
     const uiConfig = useUiConfig();
+    const shouldShowRowLimitWarning =
+      !isEmbedded() || uiConfig.showRowLimitWarning;
     const dashboardPageId = useContext(DashboardPageIdContext);
     const [headerTooltip, setHeaderTooltip] = useState<ReactNode | null>(null);
     const headerRef = useRef<HTMLDivElement>(null);
@@ -296,7 +299,7 @@ const SliceHeader = forwardRef<HTMLDivElement, SliceHeaderProps>(
                 <FiltersBadge chartId={slice.slice_id} />
               )}
 
-              {sqlRowCount === rowLimit && (
+              {shouldShowRowLimitWarning && sqlRowCount === rowLimit && (
                 <RowCountLabel
                   rowcount={sqlRowCount}
                   limit={rowLimit}