feat(sqllab): primary/secondary action extensions (#36644)

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

@@ -30,6 +30,7 @@ import { initialState, defaultQueryEditor } from 'src/SqlLab/fixtures';
 import QueryLimitSelect, {
   QueryLimitSelectProps,
   convertToNumWithSpaces,
+  convertToShortNum,
 } from 'src/SqlLab/components/QueryLimitSelect';
 
 const middlewares = [thunk];
@@ -102,7 +103,7 @@ describe('QueryLimitSelect', () => {
         },
       }),
     );
-    expect(getByText(convertToNumWithSpaces(queryLimit))).toBeInTheDocument();
+    expect(getByText(convertToShortNum(queryLimit))).toBeInTheDocument();
   });
 
   test('renders dropdown select', async () => {

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

@@ -34,6 +34,19 @@ export function convertToNumWithSpaces(num: number) {
   return num.toString().replace(/(\d)(?=(\d{3})+(?!\d))/g, '$1 ');
 }
 
+export function convertToShortNum(num: number) {
+  if (num < 1000) {
+    return num;
+  }
+  if (num < 1_000_000) {
+    return `${num / 1000}K`;
+  }
+  if (num < 1_000_000_000) {
+    return `${num / 1000_000}M`;
+  }
+  return num;
+}
+
 function renderQueryLimit(
   maxRow: number,
   setQueryLimit: (limit: number) => void,
@@ -74,12 +87,15 @@ const QueryLimitSelect = ({
       popupRender={() => renderQueryLimit(maxRow, setQueryLimit)}
       trigger={['click']}
     >
-      <Button size="small" showMarginRight={false} buttonStyle="link">
-        <span>{t('LIMIT')}:</span>
-        <span className="limitDropdown">
-          {convertToNumWithSpaces(queryLimit)}
-        </span>
-        <Icons.CaretDownOutlined iconSize="m" />
+      <Button
+        size="small"
+        color="primary"
+        variant="text"
+        showMarginRight={false}
+      >
+        <span>{t('Limit')}</span>
+        <span className="limitDropdown">{convertToShortNum(queryLimit)}</span>
+        <Icons.DownOutlined iconSize="m" />
       </Button>
     </Dropdown>
   );