refactor(List): Upgrade List from antdesign4 to antdesign5 (#30963)

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

@@ -0,0 +1,80 @@
+/**
+ * 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 { List, ListProps } from '.';
+
+export default {
+  title: 'List',
+  component: List,
+};
+
+const dataSource = ['Item 1', 'Item 2', 'Item 3'];
+
+export const InteractiveList = (args: ListProps<any>) => (
+  <List
+    {...args}
+    dataSource={dataSource}
+    renderItem={item => <List.Item>{item}</List.Item>}
+  />
+);
+
+InteractiveList.args = {
+  bordered: false,
+  split: true,
+  itemLayout: 'horizontal',
+  size: 'default',
+  loading: false,
+};
+
+InteractiveList.argTypes = {
+  bordered: {
+    control: { type: 'boolean' },
+  },
+  split: {
+    control: { type: 'boolean' },
+  },
+  loading: {
+    control: { type: 'boolean' },
+  },
+  itemLayout: {
+    control: { type: 'select' },
+    options: ['horizontal', 'vertical'],
+  },
+  size: {
+    control: { type: 'select' },
+    options: ['default', 'small', 'large'],
+  },
+};
+
+export const InteractiveListWithPagination = (args: ListProps<any>) => (
+  <List
+    {...args}
+    dataSource={dataSource}
+    renderItem={item => <List.Item>{item}</List.Item>}
+    pagination={{ pageSize: 2 }}
+  />
+);
+
+InteractiveListWithPagination.args = {
+  ...InteractiveList.args,
+};
+
+InteractiveListWithPagination.argTypes = {
+  ...InteractiveList.argTypes,
+};

superset-frontend/src/components/List/List.test.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 { render, screen } from 'spec/helpers/testing-library';
+import { ListProps } from 'antd-v5/lib/list';
+import { List } from '.';
+
+const mockedProps: ListProps<any> = {
+  dataSource: ['Item 1', 'Item 2', 'Item 3'],
+  renderItem: item => <div>{item}</div>,
+};
+
+test('should render', () => {
+  const { container } = render(<List {...mockedProps} />);
+  expect(container).toBeInTheDocument();
+});
+
+test('should render the correct number of items', () => {
+  render(<List {...mockedProps} />);
+
+  const listItemElements = screen.getAllByText(/Item \d/);
+
+  expect(listItemElements.length).toBe(3);
+  listItemElements.forEach((item, index) => {
+    expect(item).toHaveTextContent(`Item ${index + 1}`);
+  });
+});

superset-frontend/src/components/List/index.ts

@@ -0,0 +1,27 @@
+/**
+ * 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 { ListProps, ListItemProps, ListItemMetaProps } from 'antd-v5/lib/list';
+import { List as AntdList } from 'antd-v5';
+
+export type { ListProps, ListItemProps, ListItemMetaProps };
+
+export const List = Object.assign(AntdList, {
+  Item: AntdList.Item,
+  ItemMeta: AntdList.Item.Meta,
+});

superset-frontend/src/components/index.ts

@@ -37,7 +37,6 @@ export {
   Divider,
   Empty,
   Grid,
-  List,
   Row,
   Skeleton,
   Space,
@@ -72,7 +71,6 @@ export {
 
 // Exported types
 export type { FormInstance } from 'antd/lib/form';
-export type { ListItemProps } from 'antd/lib/list';
 export type { ModalProps as AntdModalProps } from 'antd/lib/modal';
 export type { DropDownProps as AntdDropdownProps } from 'antd/lib/dropdown';
 export type { RadioChangeEvent } from 'antd/lib/radio';

superset-frontend/src/explore/components/controls/AnnotationLayerControl/index.tsx

@@ -16,7 +16,7 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-import { List } from 'src/components';
+import { List } from 'src/components/List';
 import { connect } from 'react-redux';
 import { PureComponent } from 'react';
 import {

superset-frontend/src/explore/components/controls/CollectionControl/index.jsx

@@ -18,7 +18,7 @@
  */
 import { Component } from 'react';
 import PropTypes from 'prop-types';
-import { List } from 'src/components';
+import { List } from 'src/components/List';
 import { nanoid } from 'nanoid';
 import { t, withTheme } from '@superset-ui/core';
 import {
@@ -118,7 +118,11 @@ class CollectionControl extends Component {
           return (
             <SortableListItem
               className="clearfix"
-              css={{ justifyContent: 'flex-start' }}
+              css={theme => ({
+                justifyContent: 'flex-start',
+                display: '-webkit-flex',
+                paddingInline: theme.gridUnit * 3,
+              })}
               key={this.props.keyAccessor(o)}
               index={i}
             >

superset-frontend/src/explore/components/controls/CustomListItem/index.tsx

@@ -17,7 +17,7 @@
  * under the License.
  */
 import { useTheme } from '@superset-ui/core';
-import { List, ListItemProps } from 'src/components';
+import { ListItemProps, List } from 'src/components/List';
 
 export interface CustomListItemProps extends ListItemProps {
   selectable: boolean;
@@ -27,8 +27,7 @@ export default function CustomListItem(props: CustomListItemProps) {
   const { selectable, children, ...rest } = props;
   const theme = useTheme();
   const css = {
-    '&.ant-list-item': {
-      padding: `${theme.gridUnit + 2}px ${theme.gridUnit * 3}px`,
+    '&.antd5-list-item': {
       ':first-of-type': {
         borderTopLeftRadius: theme.gridUnit,
         borderTopRightRadius: theme.gridUnit,

superset-frontend/src/theme/index.ts

@@ -81,6 +81,12 @@ const baseConfig: ThemeConfig = {
         supersetTheme.colors.primary.light3
       }`,
     },
+    List: {
+      itemPadding: `${supersetTheme.gridUnit + 2}px ${supersetTheme.gridUnit * 3}px`,
+      paddingLG: supersetTheme.gridUnit * 3,
+      colorSplit: supersetTheme.colors.grayscale.light3,
+      colorText: supersetTheme.colors.grayscale.dark1,
+    },
     Tag: {
       borderRadiusSM: 2,
       defaultBg: supersetTheme.colors.grayscale.light4,