refactor: Upgrade Badge component to Ant Design 5 (#29124)

Co-authored-by: Evan Rusackas <evan@rusackas.com>

superset-frontend/cypress-base/cypress/e2e/dashboard/nativeFilters.test.ts

@@ -355,7 +355,7 @@ describe('Horizontal FilterBar', () => {
     applyNativeFilterValueWithIndex(8, testItems.filterDefaultValue);
     cy.get(nativeFilters.applyFilter).click({ force: true });
     cy.wait('@chart');
-    cy.get('.ant-scroll-number.ant-badge-count').should(
+    cy.get('.antd5-scroll-number.antd5-badge-count').should(
       'have.attr',
       'title',
       '1',

superset-frontend/cypress-base/cypress/support/directories.ts

@@ -48,7 +48,7 @@ export const profile = {
   favoritesSpace: '#rc-tabs-0-panel-2',
 };
 export const securityAccess = {
-  rolesBubble: '.ant-badge-count',
+  rolesBubble: '.antd5-badge-count',
 };
 export const homePage = {
   homeSection: {

superset-frontend/src/components/Badge/Badge.stories.tsx

@@ -16,6 +16,7 @@
  * specific language governing permissions and limitations
  * under the License.
  */
+import { AntdThemeProvider } from 'src/components/AntdThemeProvider';
 import Badge, { BadgeProps } from '.';
 
 export default {
@@ -58,15 +59,20 @@ const SIZES = {
   defaultValue: undefined,
 };
 
-export const InteractiveBadge = (args: BadgeProps) => <Badge {...args} />;
+export const InteractiveBadge = (args: BadgeProps) => (
+  <AntdThemeProvider>
+    <Badge {...args} />
+  </AntdThemeProvider>
+);
 
 InteractiveBadge.args = {
-  count: null,
+  count: undefined,
-  color: null,
+  color: undefined,
   text: 'Text',
-  textColor: null,
   status: 'success',
   size: 'default',
+  showZero: false,
+  overflowCount: 99,
 };
 
 InteractiveBadge.argTypes = {
@@ -75,6 +81,8 @@ InteractiveBadge.argTypes = {
       type: 'select',
     },
     options: [undefined, ...STATUSES],
+    description:
+      'only works if `count` is `undefined` (or is set to 0) and `color` is set to `undefined`',
   },
   size: {
     control: {
@@ -88,17 +96,22 @@ InteractiveBadge.argTypes = {
     },
     options: [undefined, ...COLORS.options],
   },
-  textColor: {
-    control: {
-      type: 'select',
-    },
-    options: [undefined, ...COLORS.options],
-  },
   count: {
     control: {
       type: 'select',
+      defaultValue: undefined,
     },
     options: [undefined, ...Array(100).keys()],
+    defaultValue: undefined,
+  },
+  showZero: {
+    control: 'boolean',
+    defaultValue: false,
+  },
+  overflowCount: {
+    control: 'number',
+    description:
+      'The threshold at which the number overflows with a `+` e.g if you set this to 10, and the value is 11, you get `11+`',
   },
 };
 
@@ -107,33 +120,21 @@ export const BadgeGallery = () => (
     {SIZES.options.map(size => (
       <div key={size} style={{ marginBottom: 40 }}>
         <h4>{size}</h4>
-        {COLORS.options.map(color => (
+        <AntdThemeProvider>
-          <Badge
+          {COLORS.options.map(color => (
-            count={9}
+            <Badge
-            textColor={color}
+              count={9}
-            size={size}
+              size={size}
-            key={`${color}_${size}`}
+              key={`${color}_${size}`}
-            style={{ marginRight: '15px' }}
+              style={{ marginRight: '15px' }}
-          />
+            />
-        ))}
+          ))}
+        </AntdThemeProvider>
       </div>
     ))}
   </>
 );
 
-export const BadgeTextGallery = () => (
-  <>
-    {COLORS.options.map(color => (
-      <Badge
-        text="Hello"
-        color={color}
-        key={color}
-        style={{ marginRight: '15px' }}
-      />
-    ))}
-  </>
-);
-
 BadgeGallery.parameters = {
   actions: {
     disable: true,
@@ -142,12 +143,3 @@ BadgeGallery.parameters = {
     disable: true,
   },
 };
-
-BadgeTextGallery.parameters = {
-  actions: {
-    disable: true,
-  },
-  controls: {
-    disable: true,
-  },
-};

superset-frontend/src/components/Badge/Badge.test.tsx

@@ -22,7 +22,6 @@ import Badge from '.';
 const mockedProps = {
   count: 9,
   text: 'Text',
-  textColor: 'orange',
 };
 
 test('should render', () => {
@@ -39,11 +38,3 @@ test('should render the text', () => {
   render(<Badge {...mockedProps} />);
   expect(screen.getByText('Text')).toBeInTheDocument();
 });
-
-test('should render with the chosen textColor', () => {
-  render(<Badge {...mockedProps} />);
-  const badge = screen.getAllByText('9')[0];
-  expect(badge).toHaveStyle(`
-    color: 'orange';
-  `);
-});

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

@@ -17,25 +17,22 @@
  * under the License.
  */
 import { styled } from '@superset-ui/core';
-import { Badge as AntdBadge } from 'antd';
+import { Badge as AntdBadge } from 'antd-v5';
-import { BadgeProps as AntdBadgeProps } from 'antd/lib/badge';
+import { BadgeProps as AntdBadgeProps } from 'antd-v5/lib/badge';
 
-export interface BadgeProps extends AntdBadgeProps {
+export type { AntdBadgeProps as BadgeProps };
-  textColor?: string;
-}
 
-const Badge = styled(
+const Badge = styled((props: AntdBadgeProps) => <AntdBadge {...props} />)`
-  (
+  ${({ theme, color, count }) => `
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    & > sup,
-    { textColor, color, text, ...props }: BadgeProps,
+    & > sup.antd5-badge-count {
-  ) => <AntdBadge text={text} color={text ? color : undefined} {...props} />,
+      ${
-)`
+        count !== undefined
-  & > sup {
+          ? `background: ${color || theme.colors.primary.base};`
-    padding: 0 ${({ theme }) => theme.gridUnit * 2}px;
+          : ''
-    background: ${({ theme, color }) => color || theme.colors.primary.base};
+      }
-    color: ${({ theme, textColor }) =>
+    }
-      textColor || theme.colors.grayscale.light5};
+  `}
-  }
 `;
 
 export default Badge;

superset-frontend/src/components/Datasource/DatasourceEditor.jsx

@@ -94,7 +94,7 @@ const StyledTableTabs = styled(Tabs)`
 `;
 
 const StyledBadge = styled(Badge)`
-  .ant-badge-count {
+  .antd5-badge-count {
     line-height: ${({ theme }) => theme.gridUnit * 4}px;
     height: ${({ theme }) => theme.gridUnit * 4}px;
     margin-left: ${({ theme }) => theme.gridUnit}px;

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

@@ -84,9 +84,8 @@ const StyledFilterCount = styled.div`
 
 const StyledBadge = styled(Badge)`
   ${({ theme }) => `
-    vertical-align: middle;
     margin-left: ${theme.gridUnit * 2}px;
-    &>sup {
+    &>sup.antd5-badge-count {
       padding: 0 ${theme.gridUnit}px;
       min-width: ${theme.gridUnit * 4}px;
       height: ${theme.gridUnit * 4}px;
@@ -94,6 +93,7 @@ const StyledBadge = styled(Badge)`
       font-weight: ${theme.typography.weights.medium};
       font-size: ${theme.typography.sizes.s - 1}px;
       box-shadow: none;
+      padding: 0 ${theme.gridUnit}px;
     }
   `}
 `;