Repository: apache/superset
File: superset-frontend/src/pages/AnnotationLayerList/index.tsx (TypeScript)

Code before:
        operator: FilterOperator.RelationOneMany,
        unfilteredLabel: t('All'),
        fetchSelects: createFetchRelated(
          'annotation_layer',
          'changed_by',
          createErrorHandler(errMsg =>
            t(
              'An error occurred while fetching dataset datasource values: %s',
              errMsg,
            ),
          ),
          user,
        ),
        paginate: true,
        dropdownStyle: { minWidth: WIDER_DROPDOWN_WIDTH },
      },
    ],
    [],
  );

  const emptyState = {
    title: t('No annotation layers yet'),
    image: 'filter-results.svg',
    buttonAction: () => handleAnnotationLayerEdit(null),
    buttonText: (
      <span className="ant-btn-icon">
        <Icons.PlusOutlined iconSize="m" />
        {t('Annotation layer')}
      </span>
    ),
  };

  const onLayerAdd = (id?: number) => {
    navigateTo(`/annotationlayer/${id}/annotation`);
  };

  const onModalHide = () => {
    refreshData();
    setAnnotationLayerModalOpen(false);
  };

  return (
    <>
      <SubMenu name={t('Annotation layers')} buttons={subMenuButtons} />
      <AnnotationLayerModal
        addDangerToast={addDangerToast}
        layer={currentAnnotationLayer}
        onLayerAdd={onLayerAdd}
        onHide={onModalHide}
        show={annotationLayerModalOpen}
      />

Review comment (suggestion):
Here maybe it would be better to have `EmptyState` receive a full `Button` object, so that the caller can craft the button properly, using the `icon` prop on the button. Seems like the pattern of passing props to a parent component for a children component within it isn't great, seems better to simply pass in the component (?)

Code after:
        operator: FilterOperator.RelationOneMany,
        unfilteredLabel: t('All'),
        fetchSelects: createFetchRelated(
          'annotation_layer',
          'changed_by',
          createErrorHandler(errMsg =>
            t(
              'An error occurred while fetching dataset datasource values: %s',
              errMsg,
            ),
          ),
          user,
        ),
        paginate: true,
        dropdownStyle: { minWidth: WIDER_DROPDOWN_WIDTH },
      },
    ],
    [],
  );

  const emptyState = {
    title: t('No annotation layers yet'),
    image: 'filter-results.svg',
    buttonAction: () => handleAnnotationLayerEdit(null),
    buttonText: t('Annotation layer'),
    buttonIcon: <Icons.PlusOutlined iconSize="m" />,
  };

  const onLayerAdd = (id?: number) => {
    navigateTo(`/annotationlayer/${id}/annotation`);
  };

  const onModalHide = () => {
    refreshData();
    setAnnotationLayerModalOpen(false);
  };

  return (
    <>
      <SubMenu name={t('Annotation layers')} buttons={subMenuButtons} />
      <AnnotationLayerModal
        addDangerToast={addDangerToast}
        layer={currentAnnotationLayer}
        onLayerAdd={onLayerAdd}
        onHide={onModalHide}
        show={annotationLayerModalOpen}
      />
      {layerCurrentlyDeleting && (
        <DeleteModal
          description={t('This action will permanently delete the layer.')}
          onConfirm={() => {