refactor(Avatar): migrate Avatar to Ant Design 5

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

@@ -36,7 +36,7 @@ import {
   useTableExtendedMetadataQuery,
   useTableMetadataQuery,
 } from 'src/hooks/apiResources';
-import { Tooltip } from 'src/components/Tooltip';
+import { Tooltip, TooltipTrigger } from 'src/components/Tooltip';
 import CopyToClipboard from 'src/components/CopyToClipboard';
 import { IconTooltip } from 'src/components/IconTooltip';
 import ModalTrigger from 'src/components/ModalTrigger';
@@ -326,7 +326,7 @@ const TableElement = ({ table, ...props }: TableElementProps) => {
 
   const renderHeader = () => {
     const element: HTMLInputElement | null = tableNameRef.current;
-    let trigger: string[] = [];
+    let trigger: TooltipTrigger = [];
     if (element && element.offsetWidth < element.scrollWidth) {
       trigger = ['hover'];
     }

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

@@ -0,0 +1,42 @@
+/**
+ * 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 { Avatar, AvatarProps } from '.';
+
+export default {
+  title: 'Avatar',
+  component: Avatar,
+};
+
+export const InteractiveAvatar = (args: AvatarProps) => <Avatar {...args} />;
+
+InteractiveAvatar.args = {
+  alt: '',
+  gap: 4,
+  shape: 'circle',
+  size: 'default',
+  src: '',
+  draggable: false,
+};
+
+InteractiveAvatar.argTypes = {
+  shape: {
+    options: ['circle', 'square'],
+    control: { type: 'select' },
+  },
+};

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

@@ -0,0 +1,26 @@
+/**
+ * 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 } from 'spec/helpers/testing-library';
+import { Avatar } from 'src/components/Avatar';
+
+test('renders with default props', async () => {
+  const { container } = render(<Avatar />);
+
+  expect(container).toBeInTheDocument();
+});

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

@@ -0,0 +1,31 @@
+/**
+ * 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 { Avatar as AntdAvatar } from 'antd-v5';
+import { AvatarProps, GroupProps, Group } from 'antd-v5/lib/avatar';
+
+export function Avatar(props: AvatarProps) {
+  return <AntdAvatar {...props} />;
+}
+
+export function AvatarGroup(props: GroupProps) {
+  return <Group {...props} />;
+}
+
+export type { AvatarProps, GroupProps };

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

@@ -19,14 +19,12 @@
 import type Owner from 'src/types/Owner';
 import {
   getCategoricalSchemeRegistry,
-  styled,
   isFeatureEnabled,
   FeatureFlag,
-  SupersetTheme,
 } from '@superset-ui/core';
 import getOwnerName from 'src/utils/getOwnerName';
 import { Tooltip } from 'src/components/Tooltip';
-import { Avatar } from 'src/components';
+import { Avatar, AvatarGroup } from 'src/components/Avatar';
 import { getRandomColor } from './utils';
 
 interface FacePileProps {
@@ -36,29 +34,9 @@ interface FacePileProps {
 
 const colorList = getCategoricalSchemeRegistry().get()?.colors ?? [];
 
-const customAvatarStyler = (theme: SupersetTheme) => {
-  const size = theme.gridUnit * 8;
-  return `
-  width: ${size}px;
-  height: ${size}px;
-  line-height: ${size}px;
-  font-size: ${theme.typography.sizes.s}px;`;
-};
-
-const StyledAvatar = styled(Avatar)`
-  ${({ theme }) => customAvatarStyler(theme)}
-`;
-
-// to apply styling to the maxCount avatar
-const StyledGroup = styled(Avatar.Group)`
-  .ant-avatar {
-    ${({ theme }) => customAvatarStyler(theme)}
-  }
-`;
-
 export default function FacePile({ users, maxCount = 4 }: FacePileProps) {
   return (
-    <StyledGroup maxCount={maxCount}>
+    <AvatarGroup max={{ count: maxCount }}>
       {users.map(user => {
         const { first_name, last_name, id } = user;
         const name = getOwnerName(user);
@@ -69,7 +47,7 @@ export default function FacePile({ users, maxCount = 4 }: FacePileProps) {
           : undefined;
         return (
           <Tooltip key={name} title={name} placement="top">
-            <StyledAvatar
+            <Avatar
               key={name}
               style={{
                 backgroundColor: color,
@@ -79,10 +57,10 @@ export default function FacePile({ users, maxCount = 4 }: FacePileProps) {
             >
               {first_name?.[0]?.toLocaleUpperCase()}
               {last_name?.[0]?.toLocaleUpperCase()}
-            </StyledAvatar>
+            </Avatar>
           </Tooltip>
         );
       })}
-    </StyledGroup>
+    </AvatarGroup>
   );
 }

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

@@ -18,7 +18,7 @@
  */
 
 import { styled, useTheme } from '@superset-ui/core';
-import { Tooltip } from 'src/components/Tooltip';
+import { Tooltip, TooltipTrigger } from 'src/components/Tooltip';
 import Icons from 'src/components/Icons';
 
 export interface InfoTooltipProps {
@@ -38,7 +38,7 @@ export interface InfoTooltipProps {
     | 'rightTop'
     | 'rightBottom'
     | undefined;
-  trigger?: string | Array<string>;
+  trigger?: TooltipTrigger;
   overlayStyle?: any;
   bgColor?: string;
   viewBox?: string;

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

@@ -17,7 +17,7 @@
  * under the License.
  */
 import Button from 'src/components/Button';
-import { TooltipProps, TooltipPlacement } from 'antd/lib/tooltip';
+import { TooltipProps, TooltipPlacement } from 'antd-v5/lib/tooltip';
 import { Tooltip } from './index';
 
 export default {

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

@@ -17,14 +17,15 @@
  * under the License.
  */
 import { useTheme, css } from '@superset-ui/core';
-import { Tooltip as AntdTooltip } from 'antd';
+import { Tooltip as AntdTooltip } from 'antd-v5';
 import {
   TooltipProps,
   TooltipPlacement as AntdTooltipPlacement,
-} from 'antd/lib/tooltip';
+} from 'antd-v5/lib/tooltip';
 import { Global } from '@emotion/react';
 
 export type TooltipPlacement = AntdTooltipPlacement;
+export type TooltipTrigger = TooltipProps['trigger'];
 
 export const Tooltip = (props: TooltipProps) => {
   const theme = useTheme();

superset-frontend/src/components/index.ts

@@ -33,7 +33,6 @@ export { default as Button } from './Button';
  */
 export {
   AutoComplete,
-  Avatar,
   Col,
   Divider,
   Empty,

superset-frontend/src/dashboard/components/nativeFilters/FilterCard/TooltipWithTruncation.tsx

@@ -16,7 +16,7 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-import { TooltipProps } from 'antd/lib/tooltip';
+import { TooltipProps } from 'antd-v5/lib/tooltip';
 import { Tooltip } from 'src/components/Tooltip';
 import { TooltipTrigger } from './Styles';
 

superset-frontend/src/theme/index.ts

@@ -52,6 +52,11 @@ const baseConfig: ThemeConfig = {
     zIndexPopupBase: supersetTheme.zIndex.max,
   },
   components: {
+    Avatar: {
+      containerSize: 32,
+      fontSize: supersetTheme.typography.sizes.s,
+      lineHeight: 32,
+    },
     Badge: {
       paddingXS: supersetTheme.gridUnit * 2,
     },