refactor(empty): Migrate Empty component to Ant Design 5 (#31633)

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

@@ -42,7 +42,7 @@ interface QueryHistoryProps {
 
 const StyledEmptyStateWrapper = styled.div`
   height: 100%;
-  .ant-empty-image img {
+  .antd5-empty-image img {
     margin-right: 28px;
   }
 

superset-frontend/src/SqlLab/components/SouthPane/Results.tsx

@@ -37,7 +37,7 @@ type Props = {
 
 const StyledEmptyStateWrapper = styled.div`
   height: 100%;
-  .ant-empty-image img {
+  .antd5-empty-image img {
     margin-right: 28px;
   }
 

superset-frontend/src/components/EmptyState/Empty.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 { Empty } from './Empty';
+
+test('should render', () => {
+  const { container } = render(<Empty />);
+  expect(container).toBeInTheDocument();
+});

superset-frontend/src/components/EmptyState/Empty.tsx

@@ -0,0 +1,29 @@
+/**
+ * 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 { Empty as AntdEmpty } from 'antd-v5';
+import { EmptyProps } from 'antd-v5/es/empty';
+
+export const Empty = Object.assign(
+  (props: EmptyProps) => <AntdEmpty {...props} />,
+  {
+    PRESENTED_IMAGE_SIMPLE: AntdEmpty.PRESENTED_IMAGE_SIMPLE,
+    PRESENTED_IMAGE_DEFAULT: AntdEmpty.PRESENTED_IMAGE_DEFAULT,
+  },
+);

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

@@ -23,8 +23,8 @@ import {
   MouseEventHandler as ReactMouseEventHandler,
 } from 'react';
 import { styled, css, SupersetTheme, t } from '@superset-ui/core';
-import { Empty } from 'src/components';
 import Button from 'src/components/Button';
+import { Empty } from './Empty';
 
 export enum EmptyStateSize {
   Small,
@@ -60,7 +60,7 @@ const EmptyStateContainer = styled.div`
     padding: ${theme.gridUnit * 4}px;
     text-align: center;
 
-    & .ant-empty-image svg {
+    & .antd5-empty-image svg {
       width: auto;
     }
 

superset-frontend/src/components/ListView/ListView.test.jsx

@@ -22,7 +22,7 @@ import { QueryParamProvider } from 'use-query-params';
 import { supersetTheme, ThemeProvider } from '@superset-ui/core';
 
 import Button from 'src/components/Button';
-import { Empty } from 'src/components';
+import { Empty } from 'src/components/EmptyState/Empty';
 import CardCollection from 'src/components/ListView/CardCollection';
 import { CardSortSelect } from 'src/components/ListView/CardSortSelect';
 import IndeterminateCheckbox from 'src/components/IndeterminateCheckbox';

superset-frontend/src/components/ListView/ListView.tsx

@@ -67,8 +67,8 @@ const ListViewStyles = styled.div`
       overflow-x: auto;
     }
 
-    .ant-empty {
-      .ant-empty-image {
+    .antd5-empty {
+      .antd5-empty-image {
         height: auto;
       }
     }

superset-frontend/src/components/TableView/TableView.tsx

@@ -20,7 +20,7 @@ import { memo, useEffect, useRef } from 'react';
 import { isEqual } from 'lodash';
 import { styled, t } from '@superset-ui/core';
 import { useFilters, usePagination, useSortBy, useTable } from 'react-table';
-import { Empty } from 'src/components';
+import { Empty } from 'src/components/EmptyState/Empty';
 import Pagination from 'src/components/Pagination';
 import TableCollection from 'src/components/TableCollection';
 import { SortByType, ServerPagination } from './types';

superset-frontend/src/components/index.ts

@@ -34,7 +34,6 @@ export { default as Card } from './Card';
 export {
   AutoComplete,
   Col,
-  Empty,
   Grid,
   Row,
   Skeleton,

superset-frontend/src/features/home/EmptyState.tsx

@@ -18,7 +18,7 @@
  */
 import { Link } from 'react-router-dom';
 import Button from 'src/components/Button';
-import { Empty } from 'src/components';
+import { Empty } from 'src/components/EmptyState/Empty';
 import { TableTab } from 'src/views/CRUD/types';
 import { styled, t } from '@superset-ui/core';
 import { WelcomeTable } from './types';