abstractIntegrationDetailedView.tsx 13 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502
  1. import * as React from 'react';
  2. import {RouteComponentProps} from 'react-router';
  3. import styled from '@emotion/styled';
  4. import startCase from 'lodash/startCase';
  5. import Access from 'sentry/components/acl/access';
  6. import Alert from 'sentry/components/alert';
  7. import AsyncComponent from 'sentry/components/asyncComponent';
  8. import ExternalLink from 'sentry/components/links/externalLink';
  9. import {Panel} from 'sentry/components/panels';
  10. import Tag from 'sentry/components/tag';
  11. import Tooltip from 'sentry/components/tooltip';
  12. import {IconClose, IconDocs, IconGeneric, IconGithub, IconProject} from 'sentry/icons';
  13. import {t} from 'sentry/locale';
  14. import PluginIcon from 'sentry/plugins/components/pluginIcon';
  15. import space from 'sentry/styles/space';
  16. import {
  17. IntegrationFeature,
  18. IntegrationInstallationStatus,
  19. IntegrationType,
  20. Organization,
  21. } from 'sentry/types';
  22. import {
  23. IntegrationAnalyticsKey,
  24. IntegrationEventParameters,
  25. } from 'sentry/utils/analytics/integrationAnalyticsEvents';
  26. import {
  27. getCategories,
  28. getIntegrationFeatureGate,
  29. trackIntegrationAnalytics,
  30. } from 'sentry/utils/integrationUtil';
  31. import marked, {singleLineRenderer} from 'sentry/utils/marked';
  32. import EmptyMessage from 'sentry/views/settings/components/emptyMessage';
  33. import RequestIntegrationButton from './integrationRequest/RequestIntegrationButton';
  34. import IntegrationStatus from './integrationStatus';
  35. type Tab = 'overview' | 'configurations';
  36. type AlertType = React.ComponentProps<typeof Alert> & {
  37. text: string;
  38. };
  39. type State = {
  40. tab: Tab;
  41. } & AsyncComponent['state'];
  42. type Props = {
  43. organization: Organization;
  44. } & RouteComponentProps<{integrationSlug: string; orgId: string}, {}> &
  45. AsyncComponent['props'];
  46. class AbstractIntegrationDetailedView<
  47. P extends Props = Props,
  48. S extends State = State
  49. > extends AsyncComponent<P, S> {
  50. tabs: Tab[] = ['overview', 'configurations'];
  51. componentDidMount() {
  52. const {location} = this.props;
  53. const value = location.query.tab === 'configurations' ? 'configurations' : 'overview';
  54. // eslint-disable-next-line react/no-did-mount-set-state
  55. this.setState({tab: value});
  56. }
  57. onLoadAllEndpointsSuccess() {
  58. this.trackIntegrationAnalytics('integrations.integration_viewed', {
  59. integration_tab: this.state.tab,
  60. });
  61. }
  62. /**
  63. * Abstract methods defined below
  64. */
  65. // The analytics type used in analytics which is snake case
  66. get integrationType(): IntegrationType {
  67. // Allow children to implement this
  68. throw new Error('Not implemented');
  69. }
  70. get description(): string {
  71. // Allow children to implement this
  72. throw new Error('Not implemented');
  73. }
  74. get author(): string | undefined {
  75. // Allow children to implement this
  76. throw new Error('Not implemented');
  77. }
  78. get alerts(): AlertType[] {
  79. // default is no alerts
  80. return [];
  81. }
  82. // Returns a list of the resources displayed at the bottom of the overview card
  83. get resourceLinks(): Array<{title: string; url: string}> {
  84. // Allow children to implement this
  85. throw new Error('Not implemented');
  86. }
  87. get installationStatus(): IntegrationInstallationStatus | null {
  88. // Allow children to implement this
  89. throw new Error('Not implemented');
  90. }
  91. get integrationName(): string {
  92. // Allow children to implement this
  93. throw new Error('Not implemented');
  94. }
  95. // Returns an array of RawIntegrationFeatures which is used in feature gating
  96. // and displaying what the integration does
  97. get featureData(): IntegrationFeature[] {
  98. // Allow children to implement this
  99. throw new Error('Not implemented');
  100. }
  101. getIcon(title: string) {
  102. switch (title) {
  103. case 'View Source':
  104. return <IconProject />;
  105. case 'Report Issue':
  106. return <IconGithub />;
  107. case 'Documentation':
  108. case 'Splunk Setup Instructions':
  109. case 'Trello Setup Instructions':
  110. return <IconDocs />;
  111. default:
  112. return <IconGeneric />;
  113. }
  114. }
  115. onTabChange = (value: Tab) => {
  116. this.trackIntegrationAnalytics('integrations.integration_tab_clicked', {
  117. integration_tab: value,
  118. });
  119. this.setState({tab: value});
  120. };
  121. // Returns the string that is shown as the title of a tab
  122. getTabDisplay(tab: Tab): string {
  123. // default is return the tab
  124. return tab;
  125. }
  126. // Render the button at the top which is usually just an installation button
  127. renderTopButton(
  128. _disabledFromFeatures: boolean, // from the feature gate
  129. _userHasAccess: boolean // from user permissions
  130. ): React.ReactElement {
  131. // Allow children to implement this
  132. throw new Error('Not implemented');
  133. }
  134. // Returns the permission descriptions, only use by Sentry Apps
  135. renderPermissions(): React.ReactElement | null {
  136. // default is don't render permissions
  137. return null;
  138. }
  139. renderEmptyConfigurations() {
  140. return (
  141. <Panel>
  142. <EmptyMessage
  143. title={t("You haven't set anything up yet")}
  144. description={t(
  145. 'But that doesn’t have to be the case for long! Add an installation to get started.'
  146. )}
  147. action={this.renderAddInstallButton(true)}
  148. />
  149. </Panel>
  150. );
  151. }
  152. // Returns the list of configurations for the integration
  153. renderConfigurations() {
  154. // Allow children to implement this
  155. throw new Error('Not implemented');
  156. }
  157. /**
  158. * Actually implemented methods below
  159. */
  160. get integrationSlug() {
  161. return this.props.params.integrationSlug;
  162. }
  163. // Wrapper around trackIntegrationAnalytics that automatically provides many fields and the org
  164. trackIntegrationAnalytics = <T extends IntegrationAnalyticsKey>(
  165. eventKey: IntegrationAnalyticsKey,
  166. options?: Partial<IntegrationEventParameters[T]>
  167. ) => {
  168. options = options || {};
  169. // If we use this intermediate type we get type checking on the things we care about
  170. const params = {
  171. view: 'integrations_directory_integration_detail',
  172. integration: this.integrationSlug,
  173. integration_type: this.integrationType,
  174. already_installed: this.installationStatus !== 'Not Installed', // pending counts as installed here
  175. organization: this.props.organization,
  176. ...options,
  177. };
  178. trackIntegrationAnalytics(eventKey, params);
  179. };
  180. // Returns the props as needed by the hooks integrations:feature-gates
  181. get featureProps() {
  182. const {organization} = this.props;
  183. const featureData = this.featureData;
  184. // Prepare the features list
  185. const features = featureData.map(f => ({
  186. featureGate: f.featureGate,
  187. description: (
  188. <FeatureListItem
  189. dangerouslySetInnerHTML={{__html: singleLineRenderer(f.description)}}
  190. />
  191. ),
  192. }));
  193. return {organization, features};
  194. }
  195. cleanTags() {
  196. return getCategories(this.featureData);
  197. }
  198. renderAlert(): React.ReactNode {
  199. return null;
  200. }
  201. renderAdditionalCTA(): React.ReactNode {
  202. return null;
  203. }
  204. renderIntegrationIcon() {
  205. return <PluginIcon pluginId={this.integrationSlug} size={50} />;
  206. }
  207. renderRequestIntegrationButton() {
  208. return (
  209. <RequestIntegrationButton
  210. organization={this.props.organization}
  211. name={this.integrationName}
  212. slug={this.integrationSlug}
  213. type={this.integrationType}
  214. />
  215. );
  216. }
  217. renderAddInstallButton(hideButtonIfDisabled = false) {
  218. const {organization} = this.props;
  219. const {IntegrationDirectoryFeatures} = getIntegrationFeatureGate();
  220. return (
  221. <IntegrationDirectoryFeatures {...this.featureProps}>
  222. {({disabled, disabledReason}) => (
  223. <DisableWrapper>
  224. <Access organization={organization} access={['org:integrations']}>
  225. {({hasAccess}) => (
  226. <Tooltip
  227. title={t(
  228. 'You must be an organization owner, manager or admin to install this.'
  229. )}
  230. disabled={hasAccess}
  231. >
  232. {!hideButtonIfDisabled && disabled ? (
  233. <div />
  234. ) : (
  235. this.renderTopButton(disabled, hasAccess)
  236. )}
  237. </Tooltip>
  238. )}
  239. </Access>
  240. {disabled && <DisabledNotice reason={disabledReason} />}
  241. </DisableWrapper>
  242. )}
  243. </IntegrationDirectoryFeatures>
  244. );
  245. }
  246. // Returns the content shown in the top section of the integration detail
  247. renderTopSection() {
  248. const tags = this.cleanTags();
  249. return (
  250. <TopSectionWrapper>
  251. <Flex>
  252. {this.renderIntegrationIcon()}
  253. <NameContainer>
  254. <Flex>
  255. <Name>{this.integrationName}</Name>
  256. <StatusWrapper>
  257. {this.installationStatus && (
  258. <IntegrationStatus status={this.installationStatus} />
  259. )}
  260. </StatusWrapper>
  261. </Flex>
  262. <Flex>
  263. {tags.map(feature => (
  264. <StyledTag key={feature}>{startCase(feature)}</StyledTag>
  265. ))}
  266. </Flex>
  267. </NameContainer>
  268. </Flex>
  269. <Flex>
  270. {this.renderAddInstallButton()}
  271. {this.renderAdditionalCTA()}
  272. </Flex>
  273. </TopSectionWrapper>
  274. );
  275. }
  276. // Returns the tabs divider with the clickable tabs
  277. renderTabs() {
  278. // TODO: Convert to styled component
  279. return (
  280. <ul className="nav nav-tabs border-bottom" style={{paddingTop: '30px'}}>
  281. {this.tabs.map(tabName => (
  282. <li
  283. key={tabName}
  284. className={this.state.tab === tabName ? 'active' : ''}
  285. onClick={() => this.onTabChange(tabName)}
  286. >
  287. <CapitalizedLink>{t(this.getTabDisplay(tabName))}</CapitalizedLink>
  288. </li>
  289. ))}
  290. </ul>
  291. );
  292. }
  293. // Returns the information about the integration description and features
  294. renderInformationCard() {
  295. const {IntegrationDirectoryFeatureList} = getIntegrationFeatureGate();
  296. return (
  297. <React.Fragment>
  298. <Flex>
  299. <FlexContainer>
  300. <Description dangerouslySetInnerHTML={{__html: marked(this.description)}} />
  301. <IntegrationDirectoryFeatureList
  302. {...this.featureProps}
  303. provider={{key: this.props.params.integrationSlug}}
  304. />
  305. {this.renderPermissions()}
  306. {this.alerts.map((alert, i) => (
  307. <Alert key={i} type={alert.type} showIcon>
  308. <span
  309. dangerouslySetInnerHTML={{__html: singleLineRenderer(alert.text)}}
  310. />
  311. </Alert>
  312. ))}
  313. </FlexContainer>
  314. <Metadata>
  315. {!!this.author && (
  316. <AuthorInfo>
  317. <CreatedContainer>{t('Created By')}</CreatedContainer>
  318. <div>{this.author}</div>
  319. </AuthorInfo>
  320. )}
  321. {this.resourceLinks.map(({title, url}) => (
  322. <ExternalLinkContainer key={url}>
  323. {this.getIcon(title)}
  324. <ExternalLink href={url}>{t(title)}</ExternalLink>
  325. </ExternalLinkContainer>
  326. ))}
  327. </Metadata>
  328. </Flex>
  329. </React.Fragment>
  330. );
  331. }
  332. renderBody() {
  333. return (
  334. <React.Fragment>
  335. {this.renderAlert()}
  336. {this.renderTopSection()}
  337. {this.renderTabs()}
  338. {this.state.tab === 'overview'
  339. ? this.renderInformationCard()
  340. : this.renderConfigurations()}
  341. </React.Fragment>
  342. );
  343. }
  344. }
  345. const Flex = styled('div')`
  346. display: flex;
  347. `;
  348. const FlexContainer = styled('div')`
  349. flex: 1;
  350. `;
  351. const CapitalizedLink = styled('a')`
  352. text-transform: capitalize;
  353. `;
  354. const StyledTag = styled(Tag)`
  355. text-transform: none;
  356. &:not(:first-child) {
  357. margin-left: ${space(0.5)};
  358. }
  359. `;
  360. const NameContainer = styled('div')`
  361. display: flex;
  362. align-items: flex-start;
  363. flex-direction: column;
  364. justify-content: center;
  365. padding-left: ${space(2)};
  366. `;
  367. const Name = styled('div')`
  368. font-weight: bold;
  369. font-size: 1.4em;
  370. margin-bottom: ${space(1)};
  371. `;
  372. const IconCloseCircle = styled(IconClose)`
  373. color: ${p => p.theme.red300};
  374. margin-right: ${space(1)};
  375. `;
  376. const DisabledNotice = styled(({reason, ...p}: {reason: React.ReactNode}) => (
  377. <div
  378. style={{
  379. display: 'flex',
  380. alignItems: 'center',
  381. }}
  382. {...p}
  383. >
  384. <IconCloseCircle isCircled />
  385. <span>{reason}</span>
  386. </div>
  387. ))`
  388. padding-top: ${space(0.5)};
  389. font-size: 0.9em;
  390. `;
  391. const FeatureListItem = styled('span')`
  392. line-height: 24px;
  393. `;
  394. const Description = styled('div')`
  395. li {
  396. margin-bottom: 6px;
  397. }
  398. `;
  399. const Metadata = styled(Flex)`
  400. display: grid;
  401. grid-auto-rows: max-content;
  402. grid-auto-flow: row;
  403. gap: ${space(2)};
  404. font-size: 0.9em;
  405. margin-left: ${space(4)};
  406. margin-right: 100px;
  407. `;
  408. const AuthorInfo = styled('div')`
  409. margin-bottom: ${space(3)};
  410. `;
  411. const ExternalLinkContainer = styled('div')`
  412. display: grid;
  413. grid-template-columns: max-content 1fr;
  414. gap: ${space(1)};
  415. align-items: center;
  416. `;
  417. const StatusWrapper = styled('div')`
  418. margin-bottom: ${space(1)};
  419. padding-left: ${space(2)};
  420. line-height: 1.5em;
  421. `;
  422. const DisableWrapper = styled('div')`
  423. margin-left: auto;
  424. align-self: center;
  425. display: flex;
  426. flex-direction: column;
  427. align-items: center;
  428. `;
  429. const CreatedContainer = styled('div')`
  430. text-transform: uppercase;
  431. padding-bottom: ${space(1)};
  432. color: ${p => p.theme.gray300};
  433. font-weight: 600;
  434. font-size: 12px;
  435. `;
  436. const TopSectionWrapper = styled('div')`
  437. display: flex;
  438. justify-content: space-between;
  439. `;
  440. export default AbstractIntegrationDetailedView;