import React from 'react'; import styled from '@emotion/styled'; import createReactClass from 'create-react-class'; import Reflux from 'reflux'; import {bulkUpdate} from 'app/actionCreators/group'; import {addLoadingMessage, clearIndicators} from 'app/actionCreators/indicator'; import {Client} from 'app/api'; import EventOrGroupTitle from 'app/components/eventOrGroupTitle'; import ErrorLevel from 'app/components/events/errorLevel'; import Link from 'app/components/links/link'; import {PanelItem} from 'app/components/panels'; import GroupChart from 'app/components/stream/groupChart'; import {IconChat, IconMute, IconStar} from 'app/icons'; import {t} from 'app/locale'; import GroupStore from 'app/stores/groupStore'; import space from 'app/styles/space'; import {Group, LightWeightOrganization} from 'app/types'; import {getMessage} from 'app/utils/events'; import {Aliases} from 'app/utils/theme'; import withApi from 'app/utils/withApi'; import withOrganization from 'app/utils/withOrganization'; type HeaderProps = { organization: LightWeightOrganization; projectId: string; data: Group; eventId?: string; }; class CompactIssueHeader extends React.Component { render() { const {data, organization, projectId, eventId} = this.props; const basePath = `/organizations/${organization.slug}/issues/`; const issueLink = eventId ? `/organizations/${organization.slug}/projects/${projectId}/events/${eventId}/` : `${basePath}${data.id}/`; const commentColor: keyof Aliases = data.subscriptionDetails && data.subscriptionDetails.reason === 'mentioned' ? 'success' : 'textColor'; return (

{data.status === 'ignored' && } {data.isBookmarked && }

{data.project.slug} {data.numComments !== 0 && ( {data.numComments} )} {getMessage(data)}
); } } type Props = { api: Client; id: string; organization: LightWeightOrganization; statsPeriod?: string; eventId?: string; data?: Group; }; type State = { issue: Group; }; const CompactIssue = createReactClass({ displayName: 'CompactIssue', mixins: [Reflux.listenTo(GroupStore, 'onGroupChange') as any], getInitialState() { return { issue: this.props.data || GroupStore.get(this.props.id), }; }, componentWillReceiveProps(nextProps: Props) { if (nextProps.id !== this.props.id) { this.setState({ issue: GroupStore.get(this.props.id), }); } }, onGroupChange(itemIds: Set) { if (!itemIds.has(this.props.id)) { return; } const id = this.props.id; const issue = GroupStore.get(id); this.setState({ issue, }); }, onSnooze(duration) { const data: Record = { status: 'ignored', }; if (duration) { data.ignoreDuration = duration; } this.onUpdate(data); }, onUpdate(data: Record) { const issue = this.state.issue; addLoadingMessage(t('Saving changes\u2026')); bulkUpdate( this.props.api, { orgId: this.props.organization.slug, projectId: issue.project.slug, itemIds: [issue.id], data, }, { complete: () => { clearIndicators(); }, } ); }, render() { const issue = this.state.issue; const {organization} = this.props; let className = 'issue'; if (issue.isBookmarked) { className += ' isBookmarked'; } if (issue.hasSeen) { className += ' hasSeen'; } if (issue.status === 'resolved') { className += ' isResolved'; } if (issue.status === 'ignored') { className += ' isIgnored'; } if (this.props.statsPeriod) { className += ' with-graph'; } return ( {this.props.statsPeriod && (
)} {this.props.children}
); }, }); export {CompactIssue}; export default withApi(withOrganization(CompactIssue)); const IssueHeaderMetaWrapper = styled('div')` display: flex; align-items: center; `; const StyledErrorLevel = styled(ErrorLevel)` display: block; margin-right: ${space(1)}; `; const IconLink = styled(Link)` & > svg { margin-right: ${space(0.5)}; } `; const IssueRow = styled(PanelItem)` padding-top: ${space(1.5)}; padding-bottom: ${space(0.75)}; flex-direction: column; `;