From 1d8bddbdcf27ec5a8c1f2033bb767a966186d523 Mon Sep 17 00:00:00 2001
From: Michael Sun <55160142+MichaelSun48@users.noreply.github.com>
Date: Tue, 8 Oct 2024 15:44:16 -0700
Subject: [PATCH] feat(issue-stream): Update priority badge/selector (#78726)

closes #77819

Creates the new design for the issue priority badge under the `variant`
prop within the `<GroupPriorityBadge/>` component. This design is
currently under a feature flag, so it is not visible.

Demo with flag manually set to true:


https://github.com/user-attachments/assets/d6f388a7-7c21-498c-afd2-7fc2f6faef23
---
 static/app/components/badge/groupPriority.tsx | 46 ++++++++++++++++---
 static/app/icons/iconCellSignal.tsx           | 26 +++++++++++
 .../app/views/issueList/actions/actionSet.tsx |  5 ++
 3 files changed, 70 insertions(+), 7 deletions(-)
 create mode 100644 static/app/icons/iconCellSignal.tsx

diff --git a/static/app/components/badge/groupPriority.tsx b/static/app/components/badge/groupPriority.tsx
index a4eada534f3f8..1eeb3ceba2dd3 100644
--- a/static/app/components/badge/groupPriority.tsx
+++ b/static/app/components/badge/groupPriority.tsx
@@ -1,6 +1,7 @@
 import {Fragment, useMemo} from 'react';
 import type {Theme} from '@emotion/react';
 import styled from '@emotion/styled';
+import {VisuallyHidden} from '@react-aria/visually-hidden';
 
 import bannerStar from 'sentry-images/spot/banner-star.svg';
 
@@ -15,6 +16,7 @@ import HookOrDefault from 'sentry/components/hookOrDefault';
 import Placeholder from 'sentry/components/placeholder';
 import {Tooltip} from 'sentry/components/tooltip';
 import {IconClose} from 'sentry/icons';
+import {IconCellSignal} from 'sentry/icons/iconCellSignal';
 import {t, tct} from 'sentry/locale';
 import {space} from 'sentry/styles/space';
 import type {Activity} from 'sentry/types/group';
@@ -34,6 +36,8 @@ type GroupPriorityDropdownProps = {
 type GroupPriorityBadgeProps = {
   priority: PriorityLevel;
   children?: React.ReactNode;
+  showLabel?: boolean;
+  variant?: 'default' | 'signal';
 };
 
 const PRIORITY_KEY_TO_LABEL: Record<PriorityLevel, string> = {
@@ -85,21 +89,40 @@ function useLastEditedBy({
 
 export function makeGroupPriorityDropdownOptions({
   onChange,
+  hasIssueStreamTableLayout,
 }: {
+  hasIssueStreamTableLayout: boolean;
   onChange: (value: PriorityLevel) => void;
 }) {
   return PRIORITY_OPTIONS.map(priority => ({
     textValue: PRIORITY_KEY_TO_LABEL[priority],
     key: priority,
-    label: <GroupPriorityBadge priority={priority} />,
+    label: (
+      <GroupPriorityBadge
+        variant={hasIssueStreamTableLayout ? 'signal' : 'default'}
+        priority={priority}
+      />
+    ),
     onAction: () => onChange(priority),
   }));
 }
 
-export function GroupPriorityBadge({priority, children}: GroupPriorityBadgeProps) {
+export function GroupPriorityBadge({
+  priority,
+  showLabel = true,
+  variant = 'default',
+  children,
+}: GroupPriorityBadgeProps) {
+  const bars =
+    priority === PriorityLevel.HIGH ? 3 : priority === PriorityLevel.MEDIUM ? 2 : 1;
+  const label = PRIORITY_KEY_TO_LABEL[priority] ?? t('Unknown');
+
   return (
-    <StyledTag type={getTagTypeForPriority(priority)}>
-      {PRIORITY_KEY_TO_LABEL[priority] ?? t('Unknown')}
+    <StyledTag
+      type={variant === 'signal' ? 'default' : getTagTypeForPriority(priority)}
+      icon={variant === 'signal' && <IconCellSignal bars={bars} />}
+    >
+      {showLabel ? label : <VisuallyHidden>{label}</VisuallyHidden>}
       {children}
     </StyledTag>
   );
@@ -187,9 +210,14 @@ export function GroupPriorityDropdown({
   onChange,
   lastEditedBy,
 }: GroupPriorityDropdownProps) {
+  const organization = useOrganization();
+  const hasIssueStreamTableLayout = organization.features.includes(
+    'issue-stream-table-layout'
+  );
+
   const options: MenuItemProps[] = useMemo(
-    () => makeGroupPriorityDropdownOptions({onChange}),
-    [onChange]
+    () => makeGroupPriorityDropdownOptions({onChange, hasIssueStreamTableLayout}),
+    [onChange, hasIssueStreamTableLayout]
   );
 
   return (
@@ -207,7 +235,11 @@ export function GroupPriorityDropdown({
           aria-label={t('Modify issue priority')}
           size="zero"
         >
-          <GroupPriorityBadge priority={value}>
+          <GroupPriorityBadge
+            showLabel={!hasIssueStreamTableLayout}
+            variant={hasIssueStreamTableLayout ? 'signal' : 'default'}
+            priority={value}
+          >
             <Chevron light direction={isOpen ? 'up' : 'down'} size="small" />
           </GroupPriorityBadge>
         </DropdownButton>
diff --git a/static/app/icons/iconCellSignal.tsx b/static/app/icons/iconCellSignal.tsx
new file mode 100644
index 0000000000000..a2cb0d846a044
--- /dev/null
+++ b/static/app/icons/iconCellSignal.tsx
@@ -0,0 +1,26 @@
+import {forwardRef} from 'react';
+import {useTheme} from '@emotion/react';
+
+import {SvgIcon, type SVGIconProps} from 'sentry/icons/svgIcon';
+
+interface Props extends SVGIconProps {
+  bars?: 0 | 1 | 2 | 3;
+}
+const IconCellSignal = forwardRef<SVGSVGElement, Props>(({bars = 3, ...props}, ref) => {
+  const theme = useTheme();
+  const firstBarColor = bars > 0 ? theme.gray300 : theme.gray100;
+  const secondBarColor = bars > 1 ? theme.gray300 : theme.gray100;
+  const thirdBarColor = bars > 2 ? theme.gray300 : theme.gray100;
+
+  return (
+    <SvgIcon {...props} ref={ref}>
+      <rect x="0" y="10" width="4" height="5" fill={firstBarColor} rx="1" />
+      <rect x="6.2" y="5" width="4" height="10" fill={secondBarColor} rx="1" />
+      <rect x="12.4" y="0" width="4" height="15" fill={thirdBarColor} rx="1" />
+    </SvgIcon>
+  );
+});
+
+IconCellSignal.displayName = 'IconCellSignal';
+
+export {IconCellSignal};
diff --git a/static/app/views/issueList/actions/actionSet.tsx b/static/app/views/issueList/actions/actionSet.tsx
index 914f415610f0a..adba058f902be 100644
--- a/static/app/views/issueList/actions/actionSet.tsx
+++ b/static/app/views/issueList/actions/actionSet.tsx
@@ -13,6 +13,7 @@ import type {BaseGroup} from 'sentry/types/group';
 import {GroupStatus} from 'sentry/types/group';
 import {getConfigForIssueType} from 'sentry/utils/issueTypeConfig';
 import type {IssueTypeConfig} from 'sentry/utils/issueTypeConfig/types';
+import useOrganization from 'sentry/utils/useOrganization';
 import type {IssueUpdateData} from 'sentry/views/issueList/types';
 import {FOR_REVIEW_QUERIES} from 'sentry/views/issueList/utils';
 
@@ -47,6 +48,7 @@ function ActionSet({
   onMerge,
   selectedProjectSlug,
 }: Props) {
+  const organization = useOrganization();
   const numIssues = issues.size;
   const confirm = getConfirm({
     numIssues,
@@ -232,6 +234,9 @@ function ActionSet({
               confirmText: label('reprioritize'),
             });
           },
+          hasIssueStreamTableLayout: organization.features.includes(
+            'issue-stream-table-layout'
+          ),
         })}
       />
       {!nestReview && <ReviewAction disabled={!canMarkReviewed} onUpdate={onUpdate} />}