index.tsx 2.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081
  1. import {Component, Fragment} from 'react';
  2. import {RouteComponentProps} from 'react-router';
  3. import {disablePlugin, enablePlugin, fetchPlugins} from 'sentry/actionCreators/plugins';
  4. import SentryDocumentTitle from 'sentry/components/sentryDocumentTitle';
  5. import {t} from 'sentry/locale';
  6. import {Organization, Plugin, Project} from 'sentry/types';
  7. import {trackIntegrationAnalytics} from 'sentry/utils/integrationUtil';
  8. import withPlugins from 'sentry/utils/withPlugins';
  9. import SettingsPageHeader from 'sentry/views/settings/components/settingsPageHeader';
  10. import PermissionAlert from 'sentry/views/settings/project/permissionAlert';
  11. import ProjectPlugins from './projectPlugins';
  12. type Props = RouteComponentProps<{projectId: string}, {}> & {
  13. organization: Organization;
  14. plugins: {
  15. error: React.ComponentProps<typeof ProjectPlugins>['error'];
  16. loading: boolean;
  17. plugins: Plugin[];
  18. };
  19. project: Project;
  20. };
  21. class ProjectPluginsContainer extends Component<Props> {
  22. componentDidMount() {
  23. this.fetchData();
  24. }
  25. fetchData = async () => {
  26. const {organization, params} = this.props;
  27. const plugins = await fetchPlugins({...params, orgId: organization.slug});
  28. const installCount = plugins.filter(
  29. plugin => plugin.hasConfiguration && plugin.enabled
  30. ).length;
  31. trackIntegrationAnalytics(
  32. 'integrations.index_viewed',
  33. {
  34. integrations_installed: installCount,
  35. view: 'legacy_integrations',
  36. organization: this.props.organization,
  37. },
  38. {startSession: true}
  39. );
  40. };
  41. handleChange = (pluginId: string, shouldEnable: boolean) => {
  42. const {organization, params} = this.props;
  43. const actionCreator = shouldEnable ? enablePlugin : disablePlugin;
  44. actionCreator({projectId: params.projectId, orgId: organization.slug, pluginId});
  45. };
  46. render() {
  47. const {loading, error, plugins} = this.props.plugins || {};
  48. const {organization, project} = this.props;
  49. const title = t('Legacy Integrations');
  50. return (
  51. <Fragment>
  52. <SentryDocumentTitle title={title} orgSlug={organization.slug} />
  53. <SettingsPageHeader title={title} />
  54. <PermissionAlert project={project} />
  55. <ProjectPlugins
  56. {...this.props}
  57. onChange={this.handleChange}
  58. loading={loading}
  59. error={error}
  60. plugins={plugins}
  61. />
  62. </Fragment>
  63. );
  64. }
  65. }
  66. export {ProjectPluginsContainer};
  67. export default withPlugins(ProjectPluginsContainer);