pluginDetailedView.tsx 5.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189
  1. import {Fragment} from 'react';
  2. import styled from '@emotion/styled';
  3. import * as modal from 'sentry/actionCreators/modal';
  4. import {Button} from 'sentry/components/button';
  5. import ContextPickerModal from 'sentry/components/contextPickerModal';
  6. import DeprecatedAsyncComponent from 'sentry/components/deprecatedAsyncComponent';
  7. import {t} from 'sentry/locale';
  8. import {space} from 'sentry/styles/space';
  9. import {PluginProjectItem, PluginWithProjectList} from 'sentry/types';
  10. import {normalizeUrl} from 'sentry/utils/withDomainRequired';
  11. import withOrganization from 'sentry/utils/withOrganization';
  12. import AbstractIntegrationDetailedView from './abstractIntegrationDetailedView';
  13. import InstalledPlugin from './installedPlugin';
  14. import PluginDeprecationAlert from './pluginDeprecationAlert';
  15. type State = {
  16. plugins: PluginWithProjectList[];
  17. };
  18. type Tab = AbstractIntegrationDetailedView['state']['tab'];
  19. class PluginDetailedView extends AbstractIntegrationDetailedView<
  20. AbstractIntegrationDetailedView['props'],
  21. State & AbstractIntegrationDetailedView['state']
  22. > {
  23. getEndpoints(): ReturnType<DeprecatedAsyncComponent['getEndpoints']> {
  24. const {organization} = this.props;
  25. const {integrationSlug} = this.props.params;
  26. return [
  27. [
  28. 'plugins',
  29. `/organizations/${organization.slug}/plugins/configs/?plugins=${integrationSlug}`,
  30. ],
  31. ];
  32. }
  33. get integrationType() {
  34. return 'plugin' as const;
  35. }
  36. get plugin() {
  37. return this.state.plugins[0];
  38. }
  39. get description() {
  40. return this.plugin.description || '';
  41. }
  42. get author() {
  43. return this.plugin.author?.name;
  44. }
  45. get resourceLinks() {
  46. return this.plugin.resourceLinks || [];
  47. }
  48. get installationStatus() {
  49. return this.plugin.projectList.length > 0 ? 'Installed' : 'Not Installed';
  50. }
  51. get integrationName() {
  52. return `${this.plugin.name}${this.plugin.isHidden ? ' (Legacy)' : ''}`;
  53. }
  54. get featureData() {
  55. return this.plugin.featureDescriptions;
  56. }
  57. handleResetConfiguration = (projectId: string) => {
  58. // make a copy of our project list
  59. const projectList = this.plugin.projectList.slice();
  60. // find the index of the project
  61. const index = projectList.findIndex(item => item.projectId === projectId);
  62. // should match but quit if it doesn't
  63. if (index < 0) {
  64. return;
  65. }
  66. // remove from array
  67. projectList.splice(index, 1);
  68. // update state
  69. this.setState({
  70. plugins: [{...this.state.plugins[0], projectList}],
  71. });
  72. };
  73. handlePluginEnableStatus = (projectId: string, enable: boolean = true) => {
  74. // make a copy of our project list
  75. const projectList = this.plugin.projectList.slice();
  76. // find the index of the project
  77. const index = projectList.findIndex(item => item.projectId === projectId);
  78. // should match but quit if it doesn't
  79. if (index < 0) {
  80. return;
  81. }
  82. // update item in array
  83. projectList[index] = {
  84. ...projectList[index],
  85. enabled: enable,
  86. };
  87. // update state
  88. this.setState({
  89. plugins: [{...this.state.plugins[0], projectList}],
  90. });
  91. };
  92. handleAddToProject = () => {
  93. const plugin = this.plugin;
  94. const {organization, router} = this.props;
  95. this.trackIntegrationAnalytics('integrations.plugin_add_to_project_clicked');
  96. modal.openModal(
  97. modalProps => (
  98. <ContextPickerModal
  99. {...modalProps}
  100. nextPath={`/settings/${organization.slug}/projects/:projectId/plugins/${plugin.id}/`}
  101. needProject
  102. needOrg={false}
  103. onFinish={path => {
  104. modalProps.closeModal();
  105. router.push(normalizeUrl(path));
  106. }}
  107. />
  108. ),
  109. {closeEvents: 'escape-key'}
  110. );
  111. };
  112. getTabDisplay(tab: Tab) {
  113. // we want to show project configurations to make it more clear
  114. if (tab === 'configurations') {
  115. return 'project configurations';
  116. }
  117. return 'overview';
  118. }
  119. renderTopButton(disabledFromFeatures: boolean, userHasAccess: boolean) {
  120. if (userHasAccess) {
  121. return (
  122. <AddButton
  123. data-test-id="install-button"
  124. disabled={disabledFromFeatures}
  125. onClick={this.handleAddToProject}
  126. size="sm"
  127. priority="primary"
  128. >
  129. {t('Add to Project')}
  130. </AddButton>
  131. );
  132. }
  133. return this.renderRequestIntegrationButton();
  134. }
  135. renderConfigurations() {
  136. const plugin = this.plugin;
  137. const {organization} = this.props;
  138. if (plugin.projectList.length) {
  139. return (
  140. <Fragment>
  141. <PluginDeprecationAlert organization={organization} plugin={plugin} />
  142. <div>
  143. {plugin.projectList.map((projectItem: PluginProjectItem) => (
  144. <InstalledPlugin
  145. key={projectItem.projectId}
  146. organization={organization}
  147. plugin={plugin}
  148. projectItem={projectItem}
  149. onResetConfiguration={this.handleResetConfiguration}
  150. onPluginEnableStatusChange={this.handlePluginEnableStatus}
  151. trackIntegrationAnalytics={this.trackIntegrationAnalytics}
  152. />
  153. ))}
  154. </div>
  155. </Fragment>
  156. );
  157. }
  158. return this.renderEmptyConfigurations();
  159. }
  160. }
  161. const AddButton = styled(Button)`
  162. margin-bottom: ${space(1)};
  163. `;
  164. export default withOrganization(PluginDetailedView);