Repository: apache/superset
File: superset-frontend/src/components/ListView/ListView.tsx (TypeScript)

Code before:
 * 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 { t } from '@superset-ui/core';
import { styled, Alert } from '@apache-superset/core/ui';
import { useCallback, useEffect, useRef, useState, ReactNode } from 'react';
import cx from 'classnames';
import TableCollection from '@superset-ui/core/components/TableCollection';
import BulkTagModal from 'src/features/tags/BulkTagModal';
import {
  Button,
  Checkbox,
  Icons,
  EmptyState,
  Loading,
  type EmptyStateProps,
} from '@superset-ui/core/components';
import { Pagination } from 'antd';
import CardCollection from './CardCollection';
import FilterControls from './Filters';
import { CardSortSelect } from './CardSortSelect';
import {
  ListViewFetchDataConfig as FetchDataConfig,
  ListViewFilters as Filters,
  SortColumn,
  CardSortSelectOption,
  ViewModeType,
} from './types';
import { ListViewError, useListViewState } from './utils';

const ListViewStyles = styled.div`
  ${({ theme }) => `
    text-align: center;
    background-color: ${theme.colorBgLayout};
    padding-top: ${theme.paddingXS}px;

    .superset-list-view {
      text-align: left;
      border-radius: 4px 0;
      margin: 0 ${theme.sizeUnit * 4}px;

      .header {
        display: flex;

Review comment (suggestion):
This should have been caught by an eslint/oxc rule (I'll look into that), but we should be importing from.

We should definitely not import antd components directly, and should probably re-export the antd component from our shared components, for use in other parts of Superset (so we can style it centrally, or do whatever's needed to keep things consistent).

Code after:
 * 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 { t } from '@superset-ui/core';
import { styled, Alert } from '@apache-superset/core/ui';
import { useCallback, useEffect, useRef, useState, ReactNode } from 'react';
import cx from 'classnames';
import TableCollection from '@superset-ui/core/components/TableCollection';
import BulkTagModal from 'src/features/tags/BulkTagModal';
import {
  Button,
  Checkbox,
  Icons,
  EmptyState,
  Loading,
  Pagination,
  type EmptyStateProps,
} from '@superset-ui/core/components';
import CardCollection from './CardCollection';
import FilterControls from './Filters';
import { CardSortSelect } from './CardSortSelect';
import {
  ListViewFetchDataConfig as FetchDataConfig,
  ListViewFilters as Filters,
  SortColumn,
  CardSortSelectOption,
  ViewModeType,
} from './types';
import { ListViewError, useListViewState } from './utils';

const ListViewStyles = styled.div`
  ${({ theme }) => `
    text-align: center;
    background-color: ${theme.colorBgLayout};
    padding-top: ${theme.paddingXS}px;

    .superset-list-view {
      text-align: left;
      border-radius: 4px 0;
      margin: 0 ${theme.sizeUnit * 4}px;

      .header {
        display: flex;