feat(issues): Remove inbox reason, related props (#63343)

static/app/components/eventOrGroupExtraDetails.tsx

@@ -2,7 +2,6 @@ import styled from '@emotion/styled';
 
 import EventAnnotation from 'sentry/components/events/eventAnnotation';
 import GlobalSelectionLink from 'sentry/components/globalSelectionLink';
-import InboxReason from 'sentry/components/group/inboxBadges/inboxReason';
 import InboxShortId from 'sentry/components/group/inboxBadges/shortId';
 import {GroupStatusBadge} from 'sentry/components/group/inboxBadges/statusBadge';
 import TimesTag from 'sentry/components/group/inboxBadges/timesTag';
@@ -23,15 +22,9 @@ type Props = {
   data: Event | Group;
   organization: Organization;
   showAssignee?: boolean;
-  showInboxTime?: boolean;
 };
 
-function EventOrGroupExtraDetails({
-  data,
-  showAssignee,
-  showInboxTime,
-  organization,
-}: Props) {
+function EventOrGroupExtraDetails({data, showAssignee, organization}: Props) {
   const {
     id,
     lastSeen,
@@ -45,7 +38,6 @@ function EventOrGroupExtraDetails({
     project,
     lifetime,
     isUnhandled,
-    inbox,
     status,
     substatus,
   } = data as Group;
@@ -57,8 +49,7 @@ function EventOrGroupExtraDetails({
 
   return (
     <GroupExtra>
-      {inbox && <InboxReason inbox={inbox} showDateAdded={showInboxTime} />}
-      {<GroupStatusBadge status={status} substatus={substatus} />}
+      <GroupStatusBadge status={status} substatus={substatus} />
       {shortId && (
         <InboxShortId
           shortId={shortId}

static/app/components/feedback/feedbackItem/crashReportSection.tsx

@@ -46,7 +46,7 @@ export default function CrashReportSection({
         data={groupData}
         size="normal"
       />
-      <EventOrGroupExtraDetails data={groupData} showInboxTime />
+      <EventOrGroupExtraDetails data={groupData} />
     </IssueDetailsContainer>
   );
 }

static/app/components/group/inboxBadges/inboxReason.spec.tsx

@@ -1,58 +0,0 @@
-import {render, screen, userEvent} from 'sentry-test/reactTestingLibrary';
-
-import InboxReason from 'sentry/components/group/inboxBadges/inboxReason';
-import {GroupInboxReason} from 'sentry/types';
-
-describe('InboxReason', () => {
-  const inbox = {
-    reason: GroupInboxReason.NEW,
-    date_added: new Date().toISOString(),
-    reason_details: {},
-  };
-
-  it('displays new issue inbox reason', () => {
-    render(<InboxReason inbox={inbox} />);
-    expect(screen.getByText('New Issue')).toBeInTheDocument();
-  });
-
-  it('displays time added to inbox', () => {
-    render(<InboxReason showDateAdded inbox={inbox} />);
-    // Use a pattern so we can work around slowness between beforeEach and here.
-    expect(screen.getByText(/\d+(s|ms|m)/i)).toBeInTheDocument();
-  });
-
-  it('has affected user count', async () => {
-    render(
-      <InboxReason
-        inbox={{
-          ...inbox,
-          reason: 1,
-          reason_details: {
-            count: null,
-            until: null,
-            user_count: 10,
-            user_window: null,
-            window: null,
-          },
-        }}
-      />
-    );
-    const tag = screen.getByText('Unignored');
-    await userEvent.hover(tag);
-
-    expect(await screen.findByText('Affected 10 user(s)')).toBeInTheDocument();
-  });
-
-  it('renders unignored with null reason details', () => {
-    render(
-      <InboxReason
-        inbox={{
-          ...inbox,
-          reason: GroupInboxReason.UNIGNORED,
-          reason_details: null,
-        }}
-      />
-    );
-    expect(screen.getByText('Unignored')).toBeInTheDocument();
-  });
-});

static/app/components/group/inboxBadges/inboxReason.tsx

@@ -1,206 +0,0 @@
-import styled from '@emotion/styled';
-
-import DateTime from 'sentry/components/dateTime';
-import {GroupStatusTag} from 'sentry/components/group/inboxBadges/groupStatusTag';
-import Tag from 'sentry/components/tag';
-import TimeSince from 'sentry/components/timeSince';
-import {t, tct} from 'sentry/locale';
-import {GroupInboxReason, InboxDetails} from 'sentry/types';
-import {getDuration} from 'sentry/utils/formatters';
-import getDynamicText from 'sentry/utils/getDynamicText';
-
-type Props = {
-  inbox: InboxDetails;
-  fontSize?: 'sm' | 'md';
-  /** Displays the time an issue was added to inbox */
-  showDateAdded?: boolean;
-};
-
-const EVENT_ROUND_LIMIT = 1000;
-
-function InboxReason({inbox, fontSize = 'sm', showDateAdded}: Props) {
-  const {reason, reason_details: reasonDetails, date_added: dateAdded} = inbox;
-  const relativeDateAdded = getDynamicText({
-    value: dateAdded && (
-      <TimeSince date={dateAdded} disabledAbsoluteTooltip unitStyle="short" />
-    ),
-    fixed: '3s ago',
-  });
-
-  const getCountText = (count: number) =>
-    count > EVENT_ROUND_LIMIT
-      ? `More than ${Math.round(count / EVENT_ROUND_LIMIT)}k`
-      : `${count}`;
-
-  function getTooltipDescription() {
-    const {
-      until,
-      count,
-      window,
-      user_count: userCount,
-      user_window: userWindow,
-    } = reasonDetails ?? {};
-    if (until) {
-      // Was ignored until `until` has passed.
-      // `until` format: "2021-01-20T03:59:03+00:00"
-      return tct('Was ignored until [window]', {
-        window: <DateTime date={until} dateOnly />,
-      });
-    }
-
-    if (count) {
-      // Was ignored until `count` events occurred
-      // If `window` is defined, than `count` events occurred in `window` minutes.
-      // else `count` events occurred since it was ignored.
-      if (window) {
-        return tct('Occurred [count] time(s) in [duration]', {
-          count: getCountText(count),
-          duration: getDuration(window * 60, 0, true),
-        });
-      }
-
-      return tct('Occurred [count] time(s)', {
-        count: getCountText(count),
-      });
-    }
-
-    if (userCount) {
-      // Was ignored until `user_count` users were affected
-      // If `user_window` is defined, than `user_count` users affected in `user_window` minutes.
-      // else `user_count` events occurred since it was ignored.
-      if (userWindow) {
-        return tct('Affected [count] user(s) in [duration]', {
-          count: getCountText(userCount),
-          duration: getDuration(userWindow * 60, 0, true),
-        });
-      }
-      return tct('Affected [count] user(s)', {
-        count: getCountText(userCount),
-      });
-    }
-
-    return undefined;
-  }
-
-  function getReasonDetails(): {
-    reasonBadgeText: string;
-    tagType: React.ComponentProps<typeof Tag>['type'];
-    tooltipDescription?: string | React.ReactNode;
-    tooltipText?: string;
-  } {
-    switch (reason) {
-      case GroupInboxReason.UNIGNORED:
-        return {
-          tagType: 'default',
-          reasonBadgeText: t('Unignored'),
-          tooltipText:
-            dateAdded && t('Unignored %(relative)s', {relative: relativeDateAdded}),
-          tooltipDescription: getTooltipDescription(),
-        };
-      case GroupInboxReason.REGRESSION:
-        return {
-          tagType: 'error',
-          reasonBadgeText: t('Regression'),
-          tooltipText:
-            dateAdded &&
-            t('Regressed %(relative)s', {
-              relative: relativeDateAdded,
-            }),
-          // TODO: Add tooltip description for regression move when resolver is added to reason
-          // Resolved by {full_name} {time} ago.
-        };
-      // TODO: Manual moves will go away, remove this then
-      case GroupInboxReason.MANUAL:
-        return {
-          tagType: 'highlight',
-          reasonBadgeText: t('Manual'),
-          tooltipText:
-            dateAdded && t('Moved %(relative)s', {relative: relativeDateAdded}),
-          // TODO: IF manual moves stay then add tooltip description for manual move
-          // Moved to inbox by {full_name}.
-        };
-      case GroupInboxReason.REPROCESSED:
-        return {
-          tagType: 'info',
-          reasonBadgeText: t('Reprocessed'),
-          tooltipText:
-            dateAdded &&
-            t('Reprocessed %(relative)s', {
-              relative: relativeDateAdded,
-            }),
-        };
-      case GroupInboxReason.ESCALATING:
-        return {
-          tagType: 'error',
-          reasonBadgeText: t('Escalating'),
-          tooltipText:
-            dateAdded &&
-            t('Escalating %(relative)s', {
-              relative: relativeDateAdded,
-            }),
-        };
-      case GroupInboxReason.NEW:
-        return {
-          tagType: 'warning',
-          reasonBadgeText: t('New Issue'),
-          tooltipText:
-            dateAdded &&
-            t('Created %(relative)s', {
-              relative: relativeDateAdded,
-            }),
-        };
-      case GroupInboxReason.ONGOING:
-        return {
-          tagType: 'info',
-          reasonBadgeText: t('Ongoing'),
-          tooltipText:
-            dateAdded &&
-            t('Created %(relative)s', {
-              relative: relativeDateAdded,
-            }),
-        };
-      default:
-        return {
-          tagType: 'warning',
-          reasonBadgeText: t('New Issue'),
-          tooltipText:
-            dateAdded &&
-            t('Created %(relative)s', {
-              relative: relativeDateAdded,
-            }),
-        };
-    }
-  }
-
-  const {tooltipText, tooltipDescription, reasonBadgeText, tagType} = getReasonDetails();
-
-  const tooltip = (tooltipText || tooltipDescription) && (
-    <TooltipWrapper>
-      {tooltipText && <div>{tooltipText}</div>}
-      {tooltipDescription && (
-        <TooltipDescription>{tooltipDescription}</TooltipDescription>
-      )}
-    </TooltipWrapper>
-  );
-
-  return (
-    <GroupStatusTag
-      type={tagType}
-      fontSize={fontSize}
-      tooltip={tooltip}
-      dateAdded={showDateAdded ? dateAdded : undefined}
-    >
-      {reasonBadgeText}
-    </GroupStatusTag>
-  );
-}
-
-export default InboxReason;
-
-const TooltipWrapper = styled('div')`
-  text-align: left;
-`;
-
-const TooltipDescription = styled('div')`
-  color: ${p => p.theme.subText};
-`;

static/app/components/group/inboxBadges/statusBadge.tsx

@@ -59,10 +59,6 @@ function getBadgeProperties(
   return undefined;
 }
 
-/**
- * A replacement for the inbox badge that uses the group substatus
- * instead of the group inbox reason.
- */
 export function GroupStatusBadge(props: SubstatusBadgeProps) {
   const badge = getBadgeProperties(props.status, props.substatus);
   if (!badge) {

static/app/components/stream/group.tsx

@@ -63,7 +63,6 @@ type Props = {
   narrowGroups?: boolean;
   query?: string;
   queryFilterDescription?: string;
-  showInboxTime?: boolean;
   showLastTriggered?: boolean;
   source?: string;
   statsPeriod?: string;
@@ -83,7 +82,6 @@ function BaseGroupRow({
   memberList,
   query,
   queryFilterDescription,
-  showInboxTime,
   source,
   statsPeriod = DEFAULT_STREAM_GROUP_STATS_PERIOD,
   canSelect = true,
@@ -430,7 +428,7 @@ function BaseGroupRow({
           size="normal"
           source={referrer}
         />
-        <EventOrGroupExtraDetails data={group} showInboxTime={showInboxTime} />
+        <EventOrGroupExtraDetails data={group} />
       </GroupSummary>
       {hasGuideAnchor && issueStreamAnchor}
 

static/app/views/issueList/groupListBody.tsx

@@ -12,7 +12,7 @@ import useOrganization from 'sentry/utils/useOrganization';
 import {useSyncedLocalStorageState} from 'sentry/utils/useSyncedLocalStorageState';
 
 import NoGroupsHandler from './noGroupsHandler';
-import {IssueSortOptions, SAVED_SEARCHES_SIDEBAR_OPEN_LOCALSTORAGE_KEY} from './utils';
+import {SAVED_SEARCHES_SIDEBAR_OPEN_LOCALSTORAGE_KEY} from './utils';
 
 type GroupListBodyProps = {
   displayReprocessingLayout: boolean;
@@ -24,7 +24,6 @@ type GroupListBodyProps = {
   query: string;
   refetchGroups: () => void;
   selectedProjectIds: number[];
-  sort: string;
 };
 
 type GroupListProps = {
@@ -33,14 +32,12 @@ type GroupListProps = {
   groupStatsPeriod: string;
   memberList: IndexedMembersByProject;
   query: string;
-  sort: string;
 };
 
 function GroupListBody({
   groupIds,
   memberList,
   query,
-  sort,
   displayReprocessingLayout,
   groupStatsPeriod,
   loading,
@@ -76,7 +73,6 @@ function GroupListBody({
       groupIds={groupIds}
       memberList={memberList}
       query={query}
-      sort={sort}
       displayReprocessingLayout={displayReprocessingLayout}
       groupStatsPeriod={groupStatsPeriod}
     />
@@ -87,7 +83,6 @@ function GroupList({
   groupIds,
   memberList,
   query,
-  sort,
   displayReprocessingLayout,
   groupStatsPeriod,
 }: GroupListProps) {
@@ -96,7 +91,6 @@ function GroupList({
     false
   );
   const topIssue = groupIds[0];
-  const showInboxTime = sort === IssueSortOptions.INBOX;
   const canSelect = !useMedia(
     `(max-width: ${
       isSavedSearchesOpen ? theme.breakpoints.large : theme.breakpoints.small
@@ -120,7 +114,6 @@ function GroupList({
             memberList={group?.project ? memberList[group.project.slug] : undefined}
             displayReprocessingLayout={displayReprocessingLayout}
             useFilteredStats
-            showInboxTime={showInboxTime}
             canSelect={canSelect}
             narrowGroups={isSavedSearchesOpen}
           />

static/app/views/issueList/overview.tsx

@@ -1301,7 +1301,6 @@ class IssueListOverview extends Component<Props, State> {
                     groupIds={groupIds}
                     displayReprocessingLayout={displayReprocessingActions}
                     query={query}
-                    sort={this.getSort()}
                     selectedProjectIds={selection.projects}
                     loading={issuesLoading}
                     error={error}