Skip to content

Commit

Permalink
ref(issues) Extra group times into a reusable component
Browse files Browse the repository at this point in the history 
I need this exact same logic and presentation in the events-v2 modal.
Having a separate display component will help with that.

Refs SEN-708
  • Loading branch information
@markstory
markstory committed Jun 3, 2019
1 parent e0fbb21 commit 5556bde
Show file tree
Hide file tree
Showing 3 changed files with 82 additions and 54 deletions.
38 changes: 3 additions & 35 deletions src/sentry/static/sentry/app/components/eventOrGroupExtraDetails.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,12 +4,11 @@ import {Link, withRouter} from 'react-router';
import styled from 'react-emotion';
import {Flex, Box} from 'grid-emotion';

import TimeSince from 'app/components/timeSince';
import ShortId from 'app/components/shortId';
import overflowEllipsis from 'app/styles/overflowEllipsis';
import {t, tct} from 'app/locale';
import {tct} from 'app/locale';
import InlineSvg from 'app/components/inlineSvg';
import ProjectBadge from 'app/components/idBadge/projectBadge';
import Times from 'app/components/group/times';
import SentryTypes from 'app/sentryTypes';
import space from 'app/styles/space';

Expand Down Expand Up @@ -69,26 +68,7 @@ class EventOrGroupExtraDetails extends React.Component {
}
/>
)}
<Times>
<div css={overflowEllipsis}>
{lastSeen && (
<React.Fragment>
<GroupTimeIcon src="icon-clock-sm" />
<TimeSince date={lastSeen} suffix={t('ago')} />
</React.Fragment>
)}
{firstSeen && lastSeen && (
<span className="hidden-xs hidden-sm">&nbsp;—&nbsp;</span>
)}
{firstSeen && (
<TimeSince
date={firstSeen}
suffix={t('old')}
className="hidden-xs hidden-sm"
/>
)}
</div>
</Times>
<Times lastSeen={lastSeen} firstSeen={firstSeen} />
<GroupExtraCommentsAndLogger>
{numComments > 0 && (
<Box mr={2}>
Expand Down Expand Up @@ -159,12 +139,6 @@ const CommentsLink = styled(Link)`
flex-shrink: 0;
`;

const Times = styled('div')`
margin-right: ${space(2)};
flex-shrink: 1;
min-width: 0; /* flex-hack for overflow-ellipsised children */
`;

const GroupShortId = styled(ShortId)`
margin-right: ${space(2)};
flex-shrink: 0;
Expand All @@ -178,10 +152,4 @@ const GroupExtraIcon = styled(InlineSvg)`
margin-right: 4px;
`;

const GroupTimeIcon = styled(GroupExtraIcon)`
/* this is solely for optics, since TimeSince always begins
with a number, and numbers do not have descenders */
transform: translateY(-1px);
`;

export default withRouter(EventOrGroupExtraDetails);
55 changes: 55 additions & 0 deletions src/sentry/static/sentry/app/components/group/times.jsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,55 @@
import React from 'react';
import styled from 'react-emotion';
import PropTypes from 'prop-types';

import {t} from 'app/locale';
import InlineSvg from 'app/components/inlineSvg';
import TimeSince from 'app/components/timeSince';
import space from 'app/styles/space';
import overflowEllipsis from 'app/styles/overflowEllipsis';

/**
* Renders the first & last seen times for a group or event with
* a clock icon.
*/
const Times = props => {
const {lastSeen, firstSeen} = props;
return (
<Container>
<div css={overflowEllipsis}>
{lastSeen && (
<React.Fragment>
<GroupTimeIcon src="icon-clock-sm" />
<TimeSince date={lastSeen} suffix={t('ago')} />
</React.Fragment>
)}
{firstSeen && lastSeen && (
<span className="hidden-xs hidden-sm">&nbsp;—&nbsp;</span>
)}
{firstSeen && (
<TimeSince date={firstSeen} suffix={t('old')} className="hidden-xs hidden-sm" />
)}
</div>
</Container>
);
};
Times.propTypes = {
lastSeen: PropTypes.string,
firstSeen: PropTypes.string,
};

const Container = styled('div')`
margin-right: ${space(2)};
flex-shrink: 1;
min-width: 0; /* flex-hack for overflow-ellipsised children */
`;

const GroupTimeIcon = styled(InlineSvg)`
/* this is solely for optics, since TimeSince always begins
with a number, and numbers do not have descenders */
font-size: 11px;
margin-right: 4px;
transform: translateY(-1px);
`;

export default Times;
43 changes: 24 additions & 19 deletions tests/js/spec/views/groupDetails/__snapshots__/groupSimilar.spec.jsx.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1274,7 +1274,7 @@ exports[`Issues Similar View renders with mocked data 1`] = `
}
/>
}
className="css-yd3bt1-GroupShortId eec9orn4"
className="css-yd3bt1-GroupShortId eec9orn3"
shortId="INTERNAL-4G"
>
<StyledShortId
Expand All @@ -1293,12 +1293,12 @@ exports[`Issues Similar View renders with mocked data 1`] = `
}
/>
}
className="css-yd3bt1-GroupShortId eec9orn4"
className="css-yd3bt1-GroupShortId eec9orn3"
onClick={[Function]}
shortId="INTERNAL-4G"
>
<div
className="eec9orn4 css-1p4nhlc-StyledShortId-GroupShortId ebuncw00"
className="eec9orn3 css-1p4nhlc-StyledShortId-GroupShortId ebuncw00"
onClick={[Function]}
>
<ProjectBadge
Expand Down Expand Up @@ -1478,28 +1478,33 @@ exports[`Issues Similar View renders with mocked data 1`] = `
</StyledShortId>
</ShortId>
</GroupShortId>
<Times>
<div
className="css-5uof9j-Times eec9orn3"
>
<Times
firstSeen="2017-07-10T18:32:43Z"
lastSeen={null}
>
<Container>
<div
className="css-77t6iv"
className="css-1l1pep4-Container e1f1on0q0"
>
<TimeSince
className="hidden-xs hidden-sm"
date="2017-07-10T18:32:43Z"
suffix="old"
<div
className="css-77t6iv"
>
<time
<TimeSince
className="hidden-xs hidden-sm"
dateTime="2017-07-10T18:32:43.000Z"
title="July 10, 2017 6:32 PM UTC"
date="2017-07-10T18:32:43Z"
suffix="old"
>
3 months old
</time>
</TimeSince>
<time
className="hidden-xs hidden-sm"
dateTime="2017-07-10T18:32:43.000Z"
title="July 10, 2017 6:32 PM UTC"
>
3 months old
</time>
</TimeSince>
</div>
</div>
</div>
</Container>
</Times>
<GroupExtraCommentsAndLogger>
<Base
Expand Down

0 comments on commit 5556bde

Please sign in to comment.