tableActions.tsx 4.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165
  1. import {Fragment} from 'react';
  2. import {Location} from 'history';
  3. import Feature from 'sentry/components/acl/feature';
  4. import FeatureDisabled from 'sentry/components/acl/featureDisabled';
  5. import GuideAnchor from 'sentry/components/assistant/guideAnchor';
  6. import {Button} from 'sentry/components/button';
  7. import DataExport, {ExportQueryType} from 'sentry/components/dataExport';
  8. import {Hovercard} from 'sentry/components/hovercard';
  9. import {IconDownload, IconStack, IconTag} from 'sentry/icons';
  10. import {t} from 'sentry/locale';
  11. import {OrganizationSummary} from 'sentry/types';
  12. import {trackAnalytics} from 'sentry/utils/analytics';
  13. import {TableData} from 'sentry/utils/discover/discoverQuery';
  14. import EventView from 'sentry/utils/discover/eventView';
  15. import {downloadAsCsv} from '../utils';
  16. type Props = {
  17. error: string | null;
  18. eventView: EventView;
  19. isLoading: boolean;
  20. location: Location;
  21. onChangeShowTags: () => void;
  22. onEdit: () => void;
  23. organization: OrganizationSummary;
  24. showTags: boolean;
  25. tableData: TableData | null | undefined;
  26. title: string;
  27. };
  28. function handleDownloadAsCsv(title: string, {organization, eventView, tableData}: Props) {
  29. trackAnalytics('discover_v2.results.download_csv', {
  30. organization: organization.id, // org summary
  31. });
  32. downloadAsCsv(tableData, eventView.getColumns(), title);
  33. }
  34. function renderDownloadButton(canEdit: boolean, props: Props) {
  35. const {tableData} = props;
  36. return (
  37. <Feature
  38. features={['organizations:discover-query']}
  39. renderDisabled={() => renderBrowserExportButton(canEdit, props)}
  40. >
  41. {tableData?.data && tableData.data.length < 50
  42. ? renderBrowserExportButton(canEdit, props)
  43. : renderAsyncExportButton(canEdit, props)}
  44. </Feature>
  45. );
  46. }
  47. function renderBrowserExportButton(canEdit: boolean, props: Props) {
  48. const {isLoading, error} = props;
  49. const disabled = isLoading || error !== null || canEdit === false;
  50. const onClick = disabled ? undefined : () => handleDownloadAsCsv(props.title, props);
  51. return (
  52. <Button
  53. size="sm"
  54. disabled={disabled}
  55. onClick={onClick}
  56. data-test-id="grid-download-csv"
  57. icon={<IconDownload size="xs" />}
  58. title={t(
  59. "There aren't that many results, start your export and it'll download immediately."
  60. )}
  61. >
  62. {t('Export All')}
  63. </Button>
  64. );
  65. }
  66. function renderAsyncExportButton(canEdit: boolean, props: Props) {
  67. const {isLoading, error, location, eventView} = props;
  68. const disabled = isLoading || error !== null || canEdit === false;
  69. return (
  70. <DataExport
  71. payload={{
  72. queryType: ExportQueryType.Discover,
  73. queryInfo: eventView.getEventsAPIPayload(location),
  74. }}
  75. disabled={disabled}
  76. icon={<IconDownload size="xs" />}
  77. >
  78. {t('Export All')}
  79. </DataExport>
  80. );
  81. }
  82. // Placate eslint proptype checking
  83. function renderEditButton(canEdit: boolean, props: Props) {
  84. const onClick = canEdit ? props.onEdit : undefined;
  85. return (
  86. <GuideAnchor target="columns_header_button">
  87. <Button
  88. size="sm"
  89. disabled={!canEdit}
  90. onClick={onClick}
  91. data-test-id="grid-edit-enable"
  92. icon={<IconStack size="xs" />}
  93. >
  94. {t('Columns')}
  95. </Button>
  96. </GuideAnchor>
  97. );
  98. }
  99. // Placate eslint proptype checking
  100. function renderSummaryButton({onChangeShowTags, showTags}: Props) {
  101. return (
  102. <Button size="sm" onClick={onChangeShowTags} icon={<IconTag size="xs" />}>
  103. {showTags ? t('Hide Tags') : t('Show Tags')}
  104. </Button>
  105. );
  106. }
  107. type FeatureWrapperProps = Props & {
  108. children: (hasFeature: boolean, props: Props) => React.ReactNode;
  109. };
  110. function FeatureWrapper(props: FeatureWrapperProps) {
  111. const noEditMessage = t('Requires discover query feature.');
  112. const editFeatures = ['organizations:discover-query'];
  113. const renderDisabled = p => (
  114. <Hovercard
  115. body={
  116. <FeatureDisabled
  117. features={p.features}
  118. hideHelpToggle
  119. message={noEditMessage}
  120. featureName={noEditMessage}
  121. />
  122. }
  123. >
  124. {p.children(p)}
  125. </Hovercard>
  126. );
  127. return (
  128. <Feature
  129. hookName="feature-disabled:grid-editable-actions"
  130. renderDisabled={renderDisabled}
  131. features={editFeatures}
  132. >
  133. {({hasFeature}) => props.children(hasFeature, props)}
  134. </Feature>
  135. );
  136. }
  137. function HeaderActions(props: Props) {
  138. return (
  139. <Fragment>
  140. <FeatureWrapper {...props} key="edit">
  141. {renderEditButton}
  142. </FeatureWrapper>
  143. <FeatureWrapper {...props} key="download">
  144. {renderDownloadButton}
  145. </FeatureWrapper>
  146. {renderSummaryButton(props)}
  147. </Fragment>
  148. );
  149. }
  150. export default HeaderActions;