Repository: apache/superset
File: superset-frontend/src/dashboard/components/nativeFilters/FiltersConfigModal/FiltersConfigForm/DatasetSelect.tsx (TypeScript)

Code before:

  const loadDatasetOptions = async (
    search: string,
    page: number,
    pageSize: number,
  ) => {
    const query = rison.encode({
      columns: ['id', 'table_name', 'database.database_name', 'schema'],
      filters: [{ col: 'table_name', opr: 'ct', value: search }],
      page,
      page_size: pageSize,
      order_column: 'table_name',
      order_direction: 'asc',
    });
    return cachedSupersetGet({
      endpoint: `/api/v1/dataset/?q=${query}`,
    })
      .then((response: JsonResponse) => {
        const list: {
          label: string | ReactNode;
          value: string | number;
          customLabel: string;
        }[] = response.json.result.map((item: Dataset) => ({
          label: DatasetSelectLabel(item),
          value: item.id,
          customLabel: item.table_name,
        }));
        return {
          data: list,
          totalCount: response.json.count,
        };
      })
      .catch(async error => {
        const errorMessage = getErrorMessage(await getClientErrorObject(error));
        throw new Error(errorMessage);
      });
  };

  return (
    <AsyncSelect
      ariaLabel={t('Dataset')}
      value={value}
      options={loadDatasetOptions}
      onChange={onChange}
      optionFilterProps={['customLabel']}
      notFoundContent={t('No compatible datasets found')}
      placeholder={t('Select a dataset')}
    />
  );
};


Review comment (suggestion):
@msyavuz @rebenitez1802 Previously, you could load the Select options with [label and customLabel](https://github.com/apache/superset/blob/49df35d01298c997b79a3369d754815dc25a2742/superset-frontend/src/components/Select/utils.tsx#L210). `label` was used to searching and `customLabel` to rendering the option using a React component. There were multiple places using the `customLabel` logic. We need to check if the Ant Design migration broke this logic.

Code after:
      }
      return errorText;
    },
    [],
  );

  const loadDatasetOptions = useCallback(
    async (search: string, page: number, pageSize: number) => {
      const query = rison.encode({
        columns: ['id', 'table_name', 'database.database_name', 'schema'],
        filters: [{ col: 'table_name', opr: 'ct', value: search }],
        page,
        page_size: pageSize,
        order_column: 'table_name',
        order_direction: 'asc',
      });
      return cachedSupersetGet({
        endpoint: `/api/v1/dataset/?q=${query}`,
      })
        .then((response: JsonResponse) => {
          const filteredResult = response.json.result.filter(
            (item: Dataset) => !excludeDatasetIds.includes(item.id),
          );

          const list: {
            label: string | ReactNode;
            value: string | number;
            table_name: string;
          }[] = filteredResult.map((item: Dataset) => ({
            ...item,
            label: DatasetSelectLabel(item),
            value: item.id,
            table_name: item.table_name,
          }));
          return {
            data: list,
            totalCount: filteredResult.length,
          };
        })
        .catch(async error => {
          const errorMessage = getErrorMessage(
            await getClientErrorObject(error),
          );
          throw new Error(errorMessage);
        });
    },
    [excludeDatasetIds, getErrorMessage],
  );

  return (
    <AsyncSelect