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

Code before:
        handleBulkChartExport={handleBulkChartExport}
      />
    ),
    [
      addDangerToast,
      addSuccessToast,
      bulkSelectEnabled,
      favoriteStatus,
      hasPerm,
      loading,
    ],
  );

  const subMenuButtons: SubMenuProps['buttons'] = [];
  if (canDelete || canExport) {
    subMenuButtons.push({
      name: t('Bulk select'),
      buttonStyle: 'secondary',
      'data-test': 'bulk-select',
      onClick: toggleBulkSelect,
    });
  }
  if (canCreate) {
    subMenuButtons.push({
      name: (
        <span
          style={{
            display: 'inline-flex',
            alignItems: 'center',
            lineHeight: 0,
            verticalAlign: 'middle',
          }}
        >
          <Icons.PlusOutlined iconSize="m" />
          <span>{t('Chart')}</span>
        </span>
      ),
      buttonStyle: 'primary',
      onClick: () => {
        history.push('/chart/add');
      },
    });

    subMenuButtons.push({
      name: (
        <Tooltip
          id="import-tooltip"
          title={t('Import charts')}
          placement="bottomRight"
        >
          <Icons.DownloadOutlined iconSize="l" data-test="import-button" />

Review comment (security):
Here it seems that we could either change the `SubMenu` components to receive actual buttons directly (instead of data structures that get turned into buttons (not sure why someone created this indirection?)), or you could extend it to expect receiving a `icon` key in as part of the object.

Seems passing in an array of buttons is more reasonable, but looks like SubMenu is used in many places:
```
12:06 $ git grep "<SubMenu"
superset-frontend/packages/superset-ui-core/src/ui-overrides/types.ts:  'home.submenu': ComponentType<SubMenuProps>;
superset-frontend/src/features/home/ActivityTable.tsx:      <SubMenu
superset-frontend/src/features/home/ChartTable.tsx:      <SubMenu
superset-frontend/src/features/home/DashboardTable.tsx:      <SubMenu
superset-frontend/src/features/home/LanguagePicker.tsx:    <SubMenu
superset-frontend/src/features/home/SavedQueries.tsx:      <SubMenu
superset-frontend/src/features/home/SubMenu.test.tsx:      <SubMenu {...props} />
superset-frontend/src/features/home/SubMenu.tsx:const SubMenuComponent: FunctionComponent<SubMenuProps> = props => {
superset-frontend/src/features/home/SubMenu.tsx:              <SubMenu
superset-frontend/src/pages/ActionLog/index.tsx:      <SubMenu name={t('Action Logs')} buttons={subMenuButtons} />
superset-frontend/src/pages/AlertReportList/index.tsx:      <SubMenu
superset-frontend/src/pages/AnnotationLayerList/index.tsx:      <SubMenu name={t('Annotation layers')} buttons={subMenuButtons} />
superset-frontend/src/pages/AnnotationList/index.tsx:      <SubMenu
superset-frontend/src/pages/ChartList/index.tsx:      <SubMenu name={t('Charts')} buttons={subMenuButtons} />
superset-frontend/src/pages/CssTemplateList/index.tsx:      <SubMenu {...menuData} />
superset-frontend/src/pages/DashboardList/index.tsx:      <SubMenu name={t('Dashboards')} buttons={subMenuButtons} />
superset-frontend/src/pages/DatabaseList/index.tsx:      <SubMenu {...menuData} />
superset-frontend/src/pages/DatasetList/index.tsx:      <SubMenu {...menuData} />
superset-frontend/src/pages/ExecutionLogList/index.tsx:      <SubMenu
superset-frontend/src/pages/GroupsList/index.tsx:      <SubMenu name={t('List Groups')} buttons={subMenuButtons} />
superset-frontend/src/pages/Home/index.tsx:        <SubMenu {...menuData} />
superset-frontend/src/pages/QueryHistoryList/index.tsx:      <SubMenu {...menuData} />
superset-frontend/src/pages/RolesList/index.tsx:      <SubMenu name={t('List Roles')} buttons={subMenuButtons} />
superset-frontend/src/pages/RowLevelSecurityList/index.tsx:      <SubMenu name={t('Row Level Security')} buttons={subMenuButtons} />
superset-frontend/src/pages/SavedQueryList/index.tsx:      <SubMenu {...menuData} />
superset-frontend/src/pages/Tags/index.tsx:      <SubMenu name={t('Tags')} buttons={subMenuButtons} />
superset-frontend/src/pages/UserInfo/index.tsx:      <SubMenu buttons={SubMenuButtons} />
superset-frontend/src/pages/UserRegistrations/index.tsx:      <SubMenu name={t('User registrations')} />
superset-frontend/src/pages/UsersList/index.tsx:      <SubMenu name={t('List Users')} buttons={subMenuButtons} />
```

Code after:
        favoriteStatus={favoriteStatus[chart.id]}
        saveFavoriteStatus={saveFavoriteStatus}
        handleBulkChartExport={handleBulkChartExport}
      />
    ),
    [
      addDangerToast,
      addSuccessToast,
      bulkSelectEnabled,
      favoriteStatus,
      hasPerm,
      loading,
    ],
  );

  const subMenuButtons: SubMenuProps['buttons'] = [];
  if (canDelete || canExport) {
    subMenuButtons.push({
      name: t('Bulk select'),
      buttonStyle: 'secondary',
      'data-test': 'bulk-select',
      onClick: toggleBulkSelect,
    });
  }
  if (canCreate) {
    subMenuButtons.push({
      icon: <Icons.PlusOutlined iconSize="m" />,
      name: t('Chart'),
      buttonStyle: 'primary',
      onClick: () => {
        history.push('/chart/add');
      },
    });

    subMenuButtons.push({
      name: (
        <Tooltip
          id="import-tooltip"
          title={t('Import charts')}
          placement="bottomRight"
        >
          <Icons.DownloadOutlined iconSize="l" data-test="import-button" />
        </Tooltip>
      ),
      buttonStyle: 'link',
      onClick: openChartImportModal,
    });
  }

  return (
    <>