123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296 |
- import {css} from '@emotion/react';
- import styled from '@emotion/styled';
- import {openModal} from 'sentry/actionCreators/modal';
- import {Button} from 'sentry/components/button';
- import ButtonBar from 'sentry/components/buttonBar';
- import {openConfirmModal} from 'sentry/components/confirm';
- import CustomCommitsResolutionModal from 'sentry/components/customCommitsResolutionModal';
- import CustomResolutionModal from 'sentry/components/customResolutionModal';
- import {DropdownMenu, MenuItemProps} from 'sentry/components/dropdownMenu';
- import {Tooltip} from 'sentry/components/tooltip';
- import {IconChevron} from 'sentry/icons';
- import {t} from 'sentry/locale';
- import {
- GroupStatusResolution,
- Project,
- ResolutionStatus,
- ResolutionStatusDetails,
- } from 'sentry/types';
- import {trackAnalytics} from 'sentry/utils/analytics';
- import {formatVersion, isSemverRelease} from 'sentry/utils/formatters';
- import useOrganization from 'sentry/utils/useOrganization';
- export interface ResolveActionsProps {
- hasRelease: boolean;
- onUpdate: (data: GroupStatusResolution) => void;
- confirmLabel?: string;
- confirmMessage?: React.ReactNode;
- disableDropdown?: boolean;
- disabled?: boolean;
- isAutoResolved?: boolean;
- isResolved?: boolean;
- latestRelease?: Project['latestRelease'];
- priority?: 'primary';
- projectFetchError?: boolean;
- projectSlug?: string;
- shouldConfirm?: boolean;
- size?: 'xs' | 'sm';
- }
- function ResolveActions({
- size = 'xs',
- isResolved = false,
- isAutoResolved = false,
- confirmLabel = t('Resolve'),
- projectSlug,
- hasRelease,
- latestRelease,
- confirmMessage,
- shouldConfirm,
- disabled,
- disableDropdown,
- priority,
- projectFetchError,
- onUpdate,
- }: ResolveActionsProps) {
- const organization = useOrganization();
- function handleCommitResolution(statusDetails: ResolutionStatusDetails) {
- onUpdate({
- status: ResolutionStatus.RESOLVED,
- statusDetails,
- });
- }
- function handleAnotherExistingReleaseResolution(
- statusDetails: ResolutionStatusDetails
- ) {
- onUpdate({
- status: ResolutionStatus.RESOLVED,
- statusDetails,
- });
- trackAnalytics('resolve_issue', {
- organization,
- release: 'anotherExisting',
- });
- }
- function handleCurrentReleaseResolution() {
- if (hasRelease) {
- onUpdate({
- status: ResolutionStatus.RESOLVED,
- statusDetails: {
- inRelease: latestRelease ? latestRelease.version : 'latest',
- },
- });
- }
- trackAnalytics('resolve_issue', {
- organization,
- release: 'current',
- });
- }
- function handleNextReleaseResolution() {
- if (hasRelease) {
- onUpdate({
- status: ResolutionStatus.RESOLVED,
- statusDetails: {
- inNextRelease: true,
- },
- });
- }
- trackAnalytics('resolve_issue', {
- organization,
- release: 'next',
- });
- }
- function renderResolved() {
- return (
- <Tooltip
- title={
- isAutoResolved
- ? t(
- 'This event is resolved due to the Auto Resolve configuration for this project'
- )
- : t('Unresolve')
- }
- >
- <Button
- priority="primary"
- size="xs"
- aria-label={t('Unresolve')}
- disabled={isAutoResolved}
- onClick={() =>
- onUpdate({status: ResolutionStatus.UNRESOLVED, statusDetails: {}})
- }
- />
- </Tooltip>
- );
- }
- function renderDropdownMenu() {
- if (isResolved) {
- return renderResolved();
- }
- const actionTitle = !hasRelease
- ? t('Set up release tracking in order to use this feature.')
- : '';
- const onActionOrConfirm = (onAction: () => void) => {
- openConfirmModal({
- bypass: !shouldConfirm,
- onConfirm: onAction,
- message: confirmMessage,
- confirmText: confirmLabel,
- });
- };
- const isSemver = latestRelease ? isSemverRelease(latestRelease.version) : false;
- const hasIssueResolveSemver = organization.features.includes('issue-resolve-semver');
- const items: MenuItemProps[] = [
- {
- key: 'next-release',
- label: t('The next release'),
- details: actionTitle,
- onAction: () => onActionOrConfirm(handleNextReleaseResolution),
- },
- {
- key: 'current-release',
- label:
- hasIssueResolveSemver || !latestRelease
- ? t('The current release')
- : t('The current release (%s)', formatVersion(latestRelease.version)),
- details: actionTitle
- ? actionTitle
- : hasIssueResolveSemver && latestRelease
- ? `${formatVersion(latestRelease.version)} (${
- isSemver ? t('semver') : t('timestamp')
- })`
- : null,
- onAction: () => onActionOrConfirm(handleCurrentReleaseResolution),
- },
- {
- key: 'another-release',
- label: t('Another existing release\u2026'),
- onAction: () => openCustomReleaseModal(),
- },
- {
- key: 'a-commit',
- label: t('A commit\u2026'),
- onAction: () => openCustomCommitModal(),
- },
- ];
- const isDisabled = !projectSlug ? disabled : disableDropdown;
- return (
- <DropdownMenu
- items={items}
- trigger={triggerProps => (
- <DropdownTrigger
- {...triggerProps}
- size={size}
- priority={priority}
- aria-label={t('More resolve options')}
- icon={<IconChevron direction="down" size="xs" />}
- disabled={isDisabled}
- />
- )}
- disabledKeys={
- disabled || !hasRelease
- ? ['next-release', 'current-release', 'another-release']
- : []
- }
- menuTitle={t('Resolved In')}
- isDisabled={isDisabled}
- />
- );
- }
- function openCustomCommitModal() {
- openModal(deps => (
- <CustomCommitsResolutionModal
- {...deps}
- onSelected={(statusDetails: ResolutionStatusDetails) =>
- handleCommitResolution(statusDetails)
- }
- orgSlug={organization.slug}
- projectSlug={projectSlug}
- />
- ));
- }
- function openCustomReleaseModal() {
- openModal(deps => (
- <CustomResolutionModal
- {...deps}
- onSelected={(statusDetails: ResolutionStatusDetails) =>
- handleAnotherExistingReleaseResolution(statusDetails)
- }
- orgSlug={organization.slug}
- projectSlug={projectSlug}
- />
- ));
- }
- if (isResolved) {
- return renderResolved();
- }
- return (
- <Tooltip disabled={!projectFetchError} title={t('Error fetching project')}>
- <ButtonBar merged>
- <ResolveButton
- priority={priority}
- size={size}
- title={t("We'll nag you with a notification if another event is seen.")}
- tooltipProps={{delay: 1000, disabled}}
- onClick={() =>
- openConfirmModal({
- bypass: !shouldConfirm,
- onConfirm: () =>
- onUpdate({status: ResolutionStatus.RESOLVED, statusDetails: {}}),
- message: confirmMessage,
- confirmText: confirmLabel,
- })
- }
- disabled={disabled}
- >
- {t('Resolve')}
- </ResolveButton>
- {renderDropdownMenu()}
- </ButtonBar>
- </Tooltip>
- );
- }
- export default ResolveActions;
- const ResolveButton = styled(Button)<{priority?: 'primary'}>`
- box-shadow: none;
- border-radius: ${p => p.theme.borderRadiusLeft};
- ${p =>
- p.priority === 'primary' &&
- css`
- &::after {
- content: '';
- position: absolute;
- top: -1px;
- bottom: -1px;
- right: -1px;
- border-right: solid 1px currentColor;
- opacity: 0.25;
- }
- `}
- `;
- const DropdownTrigger = styled(Button)`
- box-shadow: none;
- border-radius: ${p => p.theme.borderRadiusRight};
- border-left: none;
- `;
|