controls.tsx 6.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245
  1. import {Fragment} from 'react';
  2. import styled from '@emotion/styled';
  3. import Feature from 'sentry/components/acl/feature';
  4. import FeatureDisabled from 'sentry/components/acl/featureDisabled';
  5. import {Button} from 'sentry/components/button';
  6. import ButtonBar from 'sentry/components/buttonBar';
  7. import Confirm from 'sentry/components/confirm';
  8. import {Hovercard} from 'sentry/components/hovercard';
  9. import {Tooltip} from 'sentry/components/tooltip';
  10. import {IconAdd, IconDownload, IconEdit} from 'sentry/icons';
  11. import {t, tct} from 'sentry/locale';
  12. import {space} from 'sentry/styles/space';
  13. import type {Organization} from 'sentry/types';
  14. import {trackAnalytics} from 'sentry/utils/analytics';
  15. import {hasCustomMetrics} from 'sentry/utils/metrics/features';
  16. import useOrganization from 'sentry/utils/useOrganization';
  17. import {AddWidgetButton} from 'sentry/views/dashboards/addWidget';
  18. import {DataSet} from 'sentry/views/dashboards/widgetBuilder/utils';
  19. import {UNSAVED_FILTERS_MESSAGE} from './detail';
  20. import exportDashboard from './exportDashboard';
  21. import type {DashboardListItem} from './types';
  22. import {DashboardState, MAX_WIDGETS} from './types';
  23. type Props = {
  24. dashboardState: DashboardState;
  25. dashboards: DashboardListItem[];
  26. onAddWidget: (dataset: DataSet) => void;
  27. onCancel: () => void;
  28. onCommit: () => void;
  29. onDelete: () => void;
  30. onEdit: () => void;
  31. organization: Organization;
  32. widgetLimitReached: boolean;
  33. hasUnsavedFilters?: boolean;
  34. };
  35. function Controls({
  36. dashboardState,
  37. dashboards,
  38. hasUnsavedFilters,
  39. widgetLimitReached,
  40. onEdit,
  41. onCommit,
  42. onDelete,
  43. onCancel,
  44. onAddWidget,
  45. }: Props) {
  46. function renderCancelButton(label = t('Cancel')) {
  47. return (
  48. <Button
  49. data-test-id="dashboard-cancel"
  50. size="sm"
  51. onClick={e => {
  52. e.preventDefault();
  53. onCancel();
  54. }}
  55. >
  56. {label}
  57. </Button>
  58. );
  59. }
  60. const organization = useOrganization();
  61. if ([DashboardState.EDIT, DashboardState.PENDING_DELETE].includes(dashboardState)) {
  62. return (
  63. <StyledButtonBar gap={1} key="edit-controls">
  64. {renderCancelButton()}
  65. <Confirm
  66. priority="danger"
  67. message={t('Are you sure you want to delete this dashboard?')}
  68. onConfirm={onDelete}
  69. disabled={dashboards.length <= 1}
  70. >
  71. <Button size="sm" data-test-id="dashboard-delete" priority="danger">
  72. {t('Delete')}
  73. </Button>
  74. </Confirm>
  75. <Button
  76. data-test-id="dashboard-commit"
  77. size="sm"
  78. onClick={e => {
  79. e.preventDefault();
  80. onCommit();
  81. }}
  82. priority="primary"
  83. >
  84. {t('Save and Finish')}
  85. </Button>
  86. </StyledButtonBar>
  87. );
  88. }
  89. if (dashboardState === DashboardState.CREATE) {
  90. return (
  91. <StyledButtonBar gap={1} key="create-controls">
  92. {renderCancelButton()}
  93. <Button
  94. data-test-id="dashboard-commit"
  95. size="sm"
  96. onClick={e => {
  97. e.preventDefault();
  98. onCommit();
  99. }}
  100. priority="primary"
  101. >
  102. {t('Save and Finish')}
  103. </Button>
  104. </StyledButtonBar>
  105. );
  106. }
  107. if (dashboardState === DashboardState.PREVIEW) {
  108. return (
  109. <StyledButtonBar gap={1} key="preview-controls">
  110. {renderCancelButton(t('Go Back'))}
  111. <Button
  112. data-test-id="dashboard-commit"
  113. size="sm"
  114. onClick={e => {
  115. e.preventDefault();
  116. onCommit();
  117. }}
  118. priority="primary"
  119. >
  120. {t('Add Dashboard')}
  121. </Button>
  122. </StyledButtonBar>
  123. );
  124. }
  125. return (
  126. <StyledButtonBar gap={1} key="controls">
  127. <DashboardEditFeature>
  128. {hasFeature => (
  129. <Fragment>
  130. <Feature features="dashboards-import">
  131. <Button
  132. data-test-id="dashboard-export"
  133. onClick={e => {
  134. e.preventDefault();
  135. exportDashboard();
  136. }}
  137. icon={<IconDownload />}
  138. priority="default"
  139. size="sm"
  140. >
  141. {t('Export Dashboard')}
  142. </Button>
  143. </Feature>
  144. <Button
  145. data-test-id="dashboard-edit"
  146. onClick={e => {
  147. e.preventDefault();
  148. onEdit();
  149. }}
  150. icon={<IconEdit />}
  151. disabled={!hasFeature || hasUnsavedFilters}
  152. title={hasUnsavedFilters && UNSAVED_FILTERS_MESSAGE}
  153. priority="default"
  154. size="sm"
  155. >
  156. {t('Edit Dashboard')}
  157. </Button>
  158. {hasFeature ? (
  159. <Tooltip
  160. title={tct('Max widgets ([maxWidgets]) per dashboard reached.', {
  161. maxWidgets: MAX_WIDGETS,
  162. })}
  163. disabled={!widgetLimitReached}
  164. >
  165. {hasCustomMetrics(organization) ? (
  166. <AddWidgetButton
  167. onAddWidget={onAddWidget}
  168. aria-label="Add Widget"
  169. priority="primary"
  170. data-test-id="add-widget-library"
  171. />
  172. ) : (
  173. <Button
  174. data-test-id="add-widget-library"
  175. priority="primary"
  176. size="sm"
  177. disabled={widgetLimitReached}
  178. icon={<IconAdd isCircled />}
  179. onClick={() => {
  180. trackAnalytics('dashboards_views.widget_library.opened', {
  181. organization,
  182. });
  183. onAddWidget(DataSet.EVENTS);
  184. }}
  185. >
  186. {t('Add Widget')}
  187. </Button>
  188. )}
  189. </Tooltip>
  190. ) : null}
  191. </Fragment>
  192. )}
  193. </DashboardEditFeature>
  194. </StyledButtonBar>
  195. );
  196. }
  197. function DashboardEditFeature({
  198. children,
  199. }: {
  200. children: (hasFeature: boolean) => React.ReactNode;
  201. }) {
  202. const renderDisabled = p => (
  203. <Hovercard
  204. body={
  205. <FeatureDisabled
  206. features={p.features}
  207. hideHelpToggle
  208. featureName={t('Dashboard Editing')}
  209. />
  210. }
  211. >
  212. {p.children(p)}
  213. </Hovercard>
  214. );
  215. return (
  216. <Feature
  217. hookName="feature-disabled:dashboards-edit"
  218. features="organizations:dashboards-edit"
  219. renderDisabled={renderDisabled}
  220. >
  221. {({hasFeature}) => children(hasFeature)}
  222. </Feature>
  223. );
  224. }
  225. const StyledButtonBar = styled(ButtonBar)`
  226. @media (max-width: ${p => p.theme.breakpoints.small}) {
  227. grid-auto-flow: row;
  228. grid-row-gap: ${space(1)};
  229. width: 100%;
  230. }
  231. `;
  232. export default Controls;