(null);
+ // https://prismjs.com/plugins/line-highlight/
+ useEffect(() => {
+ if (linesToHighlight) {
+ import('prismjs/plugins/line-highlight/prism-line-highlight');
+ }
+ }, [linesToHighlight]);
+
useEffect(() => {
const element = ref.current;
if (!element) {
@@ -169,7 +181,10 @@ export function CodeSnippet({
)}
-
+
hiddenOptions?: Set;
isLoading?: boolean;
loadingMessage?: string;
+ /**
+ * Footer to be rendered at the bottom of the menu.
+ * @closeOverlay is a function that closes the menu
+ */
+ menuFooter?:
+ | React.ReactNode
+ | ((actions: {closeOverlay: () => void}) => React.ReactNode);
menuSize?: FormSize;
menuWidth?: string;
size?: FormSize;
@@ -67,6 +74,7 @@ function ComboBox({
menuWidth,
hiddenOptions,
hasSearch,
+ menuFooter,
...props
}: ComboBoxProps) {
const theme = useTheme();
@@ -201,6 +209,13 @@ function ComboBox({
/>
No items found
+ {menuFooter && (
+
+ {typeof menuFooter === 'function'
+ ? menuFooter({closeOverlay: state.close})
+ : menuFooter}
+
+ )}
@@ -464,4 +479,11 @@ const StyledLoadingIndicator = styled(LoadingIndicator)`
width: 12px;
}
`;
+
+const MenuFooter = styled('div')`
+ box-shadow: 0 -1px 0 ${p => p.theme.translucentInnerBorder};
+ padding: ${space(1)} ${space(1.5)};
+ z-index: 2;
+`;
+
export {ControlledComboBox as ComboBox};
diff --git a/static/app/components/createAlertButton.spec.tsx b/static/app/components/createAlertButton.spec.tsx
index 24a69be02e55a2..02ba61ee94f0c6 100644
--- a/static/app/components/createAlertButton.spec.tsx
+++ b/static/app/components/createAlertButton.spec.tsx
@@ -25,6 +25,7 @@ describe('CreateAlertFromViewButton', () => {
jest.mocked(useProjects).mockReturnValue({
projects: [],
onSearch: jest.fn(),
+ reloadProjects: jest.fn(),
placeholders: [],
fetching: false,
hasMore: null,
@@ -72,6 +73,7 @@ describe('CreateAlertFromViewButton', () => {
jest.mocked(useProjects).mockReturnValue({
projects,
onSearch: jest.fn(),
+ reloadProjects: jest.fn(),
placeholders: [],
fetching: false,
hasMore: null,
@@ -107,6 +109,7 @@ describe('CreateAlertFromViewButton', () => {
jest.mocked(useProjects).mockReturnValue({
projects,
onSearch: jest.fn(),
+ reloadProjects: jest.fn(),
placeholders: [],
fetching: false,
hasMore: null,
@@ -155,6 +158,7 @@ describe('CreateAlertFromViewButton', () => {
jest.mocked(useProjects).mockReturnValue({
projects,
onSearch: jest.fn(),
+ reloadProjects: jest.fn(),
placeholders: [],
fetching: false,
hasMore: null,
@@ -257,6 +261,7 @@ describe('CreateAlertFromViewButton', () => {
jest.mocked(useProjects).mockReturnValue({
projects,
onSearch: jest.fn(),
+ reloadProjects: jest.fn(),
placeholders: [],
fetching: false,
hasMore: null,
diff --git a/static/app/components/devtoolbar/components/featureFlags/customOverride.tsx b/static/app/components/devtoolbar/components/featureFlags/customOverride.tsx
new file mode 100644
index 00000000000000..9369615126c03f
--- /dev/null
+++ b/static/app/components/devtoolbar/components/featureFlags/customOverride.tsx
@@ -0,0 +1,60 @@
+import {useContext, useState} from 'react';
+
+import {Button} from 'sentry/components/button';
+import Input from 'sentry/components/input';
+import Switch from 'sentry/components/switchButton';
+import {IconAdd} from 'sentry/icons';
+
+import useConfiguration from '../../hooks/useConfiguration';
+import {AnalyticsContext} from '../analyticsProvider';
+
+import {useFeatureFlagsContext} from './featureFlagsContext';
+
+export default function CustomOverride() {
+ const {eventName, eventKey} = useContext(AnalyticsContext);
+ const {trackAnalytics} = useConfiguration();
+ const {setOverride} = useFeatureFlagsContext();
+
+ const [name, setName] = useState('');
+ const [isActive, setIsActive] = useState(false);
+
+ return (
+
+ );
+}
diff --git a/static/app/components/devtoolbar/components/featureFlags/featureFlagItem.tsx b/static/app/components/devtoolbar/components/featureFlags/featureFlagItem.tsx
new file mode 100644
index 00000000000000..f1617c6e42d3b6
--- /dev/null
+++ b/static/app/components/devtoolbar/components/featureFlags/featureFlagItem.tsx
@@ -0,0 +1,105 @@
+import {Fragment, useContext, useState} from 'react';
+
+import AnalyticsProvider, {
+ AnalyticsContext,
+} from 'sentry/components/devtoolbar/components/analyticsProvider';
+import ExternalLink from 'sentry/components/links/externalLink';
+import {Cell} from 'sentry/components/replays/virtualizedGrid/bodyCell';
+import Switch from 'sentry/components/switchButton';
+
+import useConfiguration from '../../hooks/useConfiguration';
+import {inlineLinkCss} from '../../styles/link';
+import {panelInsetContentCss} from '../../styles/panel';
+import {smallCss} from '../../styles/typography';
+import type {FlagValue} from '../../types';
+
+import {useFeatureFlagsContext} from './featureFlagsContext';
+
+type FeatureFlag = {name: string; override: FlagValue; value: FlagValue};
+
+export default function FeatureFlagItem({flag}: {flag: FeatureFlag}) {
+ const {featureFlags, trackAnalytics} = useConfiguration();
+ const {eventName, eventKey} = useContext(AnalyticsContext);
+
+ return (
+
+ |
+ {featureFlags?.urlTemplate?.(flag.name) ? (
+ {
+ trackAnalytics?.({
+ eventKey: eventKey + '.click',
+ eventName: eventName + ' clicked',
+ });
+ }}
+ >
+ {flag.name}
+
+ ) : (
+ {flag.name}
+ )}
+ |
+
+
+ |
+
+ );
+}
+
+function FlagValueInput({flag}: {flag: FeatureFlag}) {
+ if (
+ typeof flag.value === 'boolean' ||
+ flag.override === true ||
+ flag.override === false
+ ) {
+ return (
+
+
+
+ );
+ }
+
+ return (
+
+ {flag.override !== undefined ? String(flag.override) : String(flag.value)}
+
+ );
+}
+
+function FlagValueBooleanInput({flag}: {flag: FeatureFlag}) {
+ const {eventName, eventKey} = useContext(AnalyticsContext);
+ const {trackAnalytics} = useConfiguration();
+ const {setOverride} = useFeatureFlagsContext();
+
+ const [isActive, setIsActive] = useState(
+ flag.override !== undefined ? Boolean(flag.override) : Boolean(flag.value)
+ );
+
+ return (
+
+ );
+}
diff --git a/static/app/components/devtoolbar/components/featureFlags/featureFlagsContext.tsx b/static/app/components/devtoolbar/components/featureFlags/featureFlagsContext.tsx
new file mode 100644
index 00000000000000..6bff7124aee061
--- /dev/null
+++ b/static/app/components/devtoolbar/components/featureFlags/featureFlagsContext.tsx
@@ -0,0 +1,74 @@
+import type {ReactNode} from 'react';
+import {createContext, useCallback, useContext, useState} from 'react';
+
+import useConfiguration from 'sentry/components/devtoolbar/hooks/useConfiguration';
+import type {FeatureFlagMap, FlagValue} from 'sentry/components/devtoolbar/types';
+
+interface Context {
+ /**
+ * Call through to the user-supplied clearOverrides() function to reset override state.
+ */
+ clearOverrides: () => void;
+
+ /**
+ * The map of effective feature flags.
+ */
+ featureFlagMap: FeatureFlagMap;
+
+ /**
+ * Whether the state of overridden flags has changed in this session. After
+ * state is changed you must reload the page to ensure that you're getting a
+ * consistent experience.
+ */
+ isDirty: boolean;
+
+ /**
+ * Set an override. Marks the state as dirty.
+ *
+ * Setting an override back to default will not un-mark the dirty flag.
+ */
+ setOverride: (name: string, value: FlagValue) => void;
+}
+
+const FeatureFlagContext = createContext({
+ clearOverrides: () => {},
+ featureFlagMap: {},
+ isDirty: false,
+ setOverride: () => {},
+});
+
+export function FeatureFlagsContextProvider({children}: {children: ReactNode}) {
+ const {featureFlags} = useConfiguration();
+
+ const [isDirty, setIsDirty] = useState(false);
+ const [featureFlagMap, setFeatureFlagMap] = useState(
+ () => featureFlags?.getFeatureFlagMap?.() ?? {}
+ );
+
+ const setOverride = useCallback(
+ (name: string, value: FlagValue) => {
+ featureFlags?.setOverrideValue?.(name, value);
+ setIsDirty(true);
+ setFeatureFlagMap(featureFlags?.getFeatureFlagMap?.() ?? {});
+ },
+ [featureFlags]
+ );
+
+ const clearOverrides = useCallback(() => {
+ featureFlags?.clearOverrides?.();
+ setIsDirty(true);
+ setFeatureFlagMap(featureFlags?.getFeatureFlagMap?.() ?? {});
+ }, [featureFlags]);
+
+ return (
+
+ {children}
+
+ );
+}
+
+export function useFeatureFlagsContext() {
+ return useContext(FeatureFlagContext);
+}
diff --git a/static/app/components/devtoolbar/components/featureFlags/featureFlagsPanel.tsx b/static/app/components/devtoolbar/components/featureFlags/featureFlagsPanel.tsx
index b437c18292088d..9045f2a2bea400 100644
--- a/static/app/components/devtoolbar/components/featureFlags/featureFlagsPanel.tsx
+++ b/static/app/components/devtoolbar/components/featureFlags/featureFlagsPanel.tsx
@@ -1,82 +1,159 @@
-import {useRef, useState} from 'react';
+import {type Dispatch, Fragment, type SetStateAction, useState} from 'react';
-import AnalyticsProvider from 'sentry/components/devtoolbar/components/analyticsProvider';
-import useEnabledFeatureFlags from 'sentry/components/devtoolbar/components/featureFlags/useEnabledFeatureFlags';
-import {inlineLinkCss} from 'sentry/components/devtoolbar/styles/link';
-import EmptyStateWarning from 'sentry/components/emptyStateWarning';
+import {Button} from 'sentry/components/button';
import Input from 'sentry/components/input';
-import ExternalLink from 'sentry/components/links/externalLink';
import {PanelTable} from 'sentry/components/panels/panelTable';
-import {Cell} from 'sentry/components/replays/virtualizedGrid/bodyCell';
+import {SegmentedControl} from 'sentry/components/segmentedControl';
-import useConfiguration from '../../hooks/useConfiguration';
import {panelInsetContentCss, panelSectionCss} from '../../styles/panel';
import {smallCss} from '../../styles/typography';
+import AnalyticsProvider from '../analyticsProvider';
import PanelLayout from '../panelLayout';
+import CustomOverride from './customOverride';
+import FeatureFlagItem from './featureFlagItem';
+import {FeatureFlagsContextProvider, useFeatureFlagsContext} from './featureFlagsContext';
+
+type Prefilter = 'all' | 'overrides';
+
export default function FeatureFlagsPanel() {
- const featureFlags = useEnabledFeatureFlags();
- const {organizationSlug, featureFlagTemplateUrl} = useConfiguration();
+ const [prefilter, setPrefilter] = useState('all');
const [searchTerm, setSearchTerm] = useState('');
- const searchInput = useRef(null);
- const filteredItems = featureFlags
- ?.filter(s => s.toLowerCase().includes(searchTerm))
- .sort();
+ return (
+
+
+
+
+
+ );
+}
+
+function IsDirtyMessage() {
+ const {isDirty} = useFeatureFlagsContext();
+
+ return isDirty ? (
+
+ Reload to see changes
+
+ ) : (
+
+ );
+}
+function Filters({
+ setPrefilter,
+ prefilter,
+ setSearchTerm,
+}: {
+ prefilter: Prefilter;
+ setPrefilter: Dispatch>;
+ setSearchTerm: Dispatch>;
+}) {
+ const {clearOverrides} = useFeatureFlagsContext();
return (
-
-
-
- Flags enabled for {organizationSlug}
-
+
+
+
onChange={setPrefilter} size="xs" value={prefilter}>
+ All Flags
+ Overrides Only
+
-
+
{snippet.snippet}
);
}
-function CauseSuggestedFix({
- fixNumber,
- suggestedFix,
- groupId,
- runId,
- causeId,
-}: {
- causeId: string;
- fixNumber: number;
- groupId: string;
- runId: string;
- suggestedFix: AutofixRootCauseSuggestedFix;
-}) {
- const {isLoading, mutate: handleSelectFix} = useSelectCause({groupId, runId});
-
- return (
-
-
-
-
-
-
- {suggestedFix.snippet && }
-
- );
-}
-
function CauseOption({
cause,
selected,
@@ -215,6 +204,8 @@ function CauseOption({
selected: boolean;
setSelectedId: (id: string) => void;
}) {
+ const {isLoading, mutate: handleSelectFix} = useSelectCause({groupId, runId});
+
return (
setSelectedId(cause.id)}>
{!selected && }
@@ -224,13 +215,26 @@ function CauseOption({
__html: singleLineRenderer(cause.title),
}}
/>
- }
- aria-label={t('Select root cause')}
- aria-expanded={selected}
- size="zero"
- borderless
- />
+
+
+ }
+ aria-label={t('Select root cause')}
+ aria-expanded={selected}
+ size="zero"
+ borderless
+ style={{marginLeft: 8}}
+ />
+
- {cause.suggested_fixes?.map((fix, index) => (
-
- )) ?? null}
+
);
@@ -255,10 +250,10 @@ function CauseOption({
function SelectedRootCauseOption({
selectedCause,
- selectedFix,
+ codeContext,
}: {
+ codeContext: AutofixRootCauseCodeContext[];
selectedCause: AutofixRootCauseData;
- selectedFix: AutofixRootCauseSuggestedFix;
}) {
return (
@@ -272,21 +267,7 @@ function SelectedRootCauseOption({
__html: marked(selectedCause.description),
}}
/>
-
-
-
-
-
- {selectedFix.snippet && }
-
+
);
}
@@ -337,8 +318,10 @@ function ProvideYourOwn({
analyticsEventName="Autofix: Root Cause Custom Cause Provided"
analyticsEventKey="autofix.root_cause_custom_cause_provided"
analyticsParams={{group_id: groupId}}
+ aria-describedby="continue-custom-root-cause"
+ id="continue-custom-root-cause"
>
- {t('Continue With This Fix')}
+ {t('Continue with a fix')}
@@ -367,11 +350,8 @@ function AutofixRootCauseDisplay({
}
const selectedCause = causes.find(cause => cause.id === rootCauseSelection.cause_id);
- const selectedFix = selectedCause?.suggested_fixes?.find(
- fix => fix.id === rootCauseSelection.fix_id
- );
- if (!selectedCause || !selectedFix) {
+ if (!selectedCause) {
return {t('Selected root cause not found.')};
}
@@ -380,7 +360,7 @@ function AutofixRootCauseDisplay({
return (
{otherCauses.length > 0 && (
@@ -397,23 +377,7 @@ function AutofixRootCauseDisplay({
__html: marked(cause.description),
}}
/>
- {cause.suggested_fixes?.map(fix => (
-
-
-
-
-
- {fix.snippet && }
-
- ))}
+
))}
@@ -469,6 +433,35 @@ export function AutofixRootCause(props: AutofixRootCauseProps) {
return ;
}
+export function AutofixRootCauseCodeContexts({
+ codeContext,
+}: {
+ codeContext: AutofixRootCauseCodeContext[];
+}) {
+ return codeContext?.map((fix, index) => (
+
+
+
+
+
+ {fix.snippet && (
+
+ )}
+
+ ));
+}
+
const NoCausesPadding = styled('div')`
padding: 0 ${space(2)};
`;
@@ -567,3 +560,8 @@ const OptionFooter = styled('div')`
const CustomRootCausePadding = styled('div')`
padding: 0 ${space(2)} ${space(2)} ${space(2)};
`;
+
+const RootCauseOptionsRow = styled('div')`
+ display: flex;
+ flex-direction: row;
+`;
diff --git a/static/app/components/events/autofix/autofixSteps.tsx b/static/app/components/events/autofix/autofixSteps.tsx
index 671b742470a213..8c37ed7d8dff6e 100644
--- a/static/app/components/events/autofix/autofixSteps.tsx
+++ b/static/app/components/events/autofix/autofixSteps.tsx
@@ -215,7 +215,9 @@ export function ExpandableStep({
{activeLog && !isExpanded && (
)}
diff --git a/static/app/components/events/autofix/index.spec.tsx b/static/app/components/events/autofix/index.spec.tsx
index 82c1a6aefb93c3..cbc95ed82ec46c 100644
--- a/static/app/components/events/autofix/index.spec.tsx
+++ b/static/app/components/events/autofix/index.spec.tsx
@@ -169,12 +169,11 @@ describe('Autofix', () => {
likelihood: 1,
title: 'Test Cause Title',
description: 'Test Cause Description',
- suggested_fixes: [
+ code_context: [
{
id: 'fix-1',
title: 'Test Fix Title',
description: 'Test Fix Description',
- elegance: 1,
snippet: {
file_path: 'test/file/path.py',
snippet: 'two = 1 + 1',
diff --git a/static/app/components/events/autofix/types.ts b/static/app/components/events/autofix/types.ts
index f6d256d7c3ef72..dd6ffa7c30be5d 100644
--- a/static/app/components/events/autofix/types.ts
+++ b/static/app/components/events/autofix/types.ts
@@ -89,7 +89,6 @@ export interface AutofixDefaultStep extends BaseStep {
export type AutofixRootCauseSelection =
| {
cause_id: string;
- fix_id: string;
}
| {custom_root_cause: string}
| null;
@@ -122,25 +121,24 @@ export interface AutofixUserResponseStep extends BaseStep {
user_id: number;
}
-export type AutofixRootCauseSuggestedFixSnippet = {
+export type AutofixRootCauseCodeContextSnippet = {
file_path: string;
snippet: string;
};
-export type AutofixRootCauseSuggestedFix = {
+export type AutofixRootCauseCodeContext = {
description: string;
- elegance: number;
id: string;
title: string;
- snippet?: AutofixRootCauseSuggestedFixSnippet;
+ snippet?: AutofixRootCauseCodeContextSnippet;
};
export type AutofixRootCauseData = {
actionability: number;
+ code_context: AutofixRootCauseCodeContext[];
description: string;
id: string;
likelihood: number;
- suggested_fixes: AutofixRootCauseSuggestedFix[];
title: string;
};
diff --git a/static/app/components/events/errorLevel.tsx b/static/app/components/events/errorLevel.tsx
index b010c541745469..86879c9aa5e94f 100644
--- a/static/app/components/events/errorLevel.tsx
+++ b/static/app/components/events/errorLevel.tsx
@@ -1,21 +1,42 @@
+import {Fragment} from 'react';
import styled from '@emotion/styled';
+import Divider from 'sentry/components/events/interfaces/debugMeta/debugImageDetails/candidate/information/divider';
+import UnhandledTag from 'sentry/components/group/inboxBadges/unhandledTag';
import {Tooltip} from 'sentry/components/tooltip';
import {tct} from 'sentry/locale';
import type {Level} from 'sentry/types/event';
import {capitalize} from 'sentry/utils/string/capitalize';
+import {useHasStreamlinedUI} from 'sentry/views/issueDetails/utils';
const DEFAULT_SIZE = '13px';
type Props = {
className?: string;
level?: Level;
+ showUnhandled?: boolean;
size?: string;
};
-function ErrorLevel({className, level = 'unknown', size = '11px'}: Props) {
+function ErrorLevel({className, showUnhandled, level = 'unknown', size = '11px'}: Props) {
+ const hasStreamlinedUI = useHasStreamlinedUI();
const levelLabel = tct('Level: [level]', {level: capitalize(level)});
+ if (hasStreamlinedUI) {
+ return (
+
+ {showUnhandled ? (
+
+
+
+
+ ) : null}
+ {capitalize(level)}
+
+
+ );
+ }
+
return (
diff --git a/static/app/components/events/eventMessage.tsx b/static/app/components/events/eventMessage.tsx
index 288c7a462dbbdd..47398836103565 100644
--- a/static/app/components/events/eventMessage.tsx
+++ b/static/app/components/events/eventMessage.tsx
@@ -5,6 +5,7 @@ import UnhandledTag from 'sentry/components/group/inboxBadges/unhandledTag';
import {t} from 'sentry/locale';
import {space} from 'sentry/styles/space';
import {EventOrGroupType, type Level} from 'sentry/types/event';
+import {useHasStreamlinedUI} from 'sentry/views/issueDetails/utils';
type Props = {
type: EventOrGroupType;
@@ -31,9 +32,12 @@ function EventOrGroupLevel({
level,
levelIndicatorSize,
type,
-}: Pick) {
+ showUnhandled,
+}: Pick) {
if (level && EVENT_TYPES_WITH_LOG_LEVEL.has(type)) {
- return ;
+ return (
+
+ );
}
return null;
@@ -48,14 +52,16 @@ function EventMessage({
type,
showUnhandled = false,
}: Props) {
+ const hasStreamlinedUI = useHasStreamlinedUI();
return (
- {showUnhandled ? : null}
+ {showUnhandled && !hasStreamlinedUI ? : null}
{message ? (
{message}
) : (
diff --git a/static/app/components/events/eventReplay/index.spec.tsx b/static/app/components/events/eventReplay/index.spec.tsx
index af75b7c7116b35..e78c310e58dae0 100644
--- a/static/app/components/events/eventReplay/index.spec.tsx
+++ b/static/app/components/events/eventReplay/index.spec.tsx
@@ -135,6 +135,7 @@ describe('EventReplay', function () {
hasMore: false,
initiallyLoaded: false,
onSearch: () => Promise.resolve(),
+ reloadProjects: jest.fn(),
placeholders: [],
projects: [project],
});
diff --git a/static/app/components/events/interfaces/breadcrumbs/breadcrumbs.spec.tsx b/static/app/components/events/interfaces/breadcrumbs/breadcrumbs.spec.tsx
index d41ee11eec7e9a..2a254deb77ccd9 100644
--- a/static/app/components/events/interfaces/breadcrumbs/breadcrumbs.spec.tsx
+++ b/static/app/components/events/interfaces/breadcrumbs/breadcrumbs.spec.tsx
@@ -36,6 +36,7 @@ describe('Breadcrumbs', () => {
hasMore: false,
initiallyLoaded: false,
onSearch: () => Promise.resolve(),
+ reloadProjects: jest.fn(),
placeholders: [],
projects: [project],
});
diff --git a/static/app/components/group/assignedTo.tsx b/static/app/components/group/assignedTo.tsx
index 5cea17eeabe2ec..ff89ce648eb2b6 100644
--- a/static/app/components/group/assignedTo.tsx
+++ b/static/app/components/group/assignedTo.tsx
@@ -1,14 +1,10 @@
import {useEffect, useState} from 'react';
import styled from '@emotion/styled';
-import {assignToActor, clearAssignment} from 'sentry/actionCreators/group';
-import {addErrorMessage} from 'sentry/actionCreators/indicator';
import {fetchOrgMembers} from 'sentry/actionCreators/members';
import {openIssueOwnershipRuleModal} from 'sentry/actionCreators/modal';
import Access from 'sentry/components/acl/access';
-import AssigneeSelectorDropdown, {
- type AssignableEntity,
-} from 'sentry/components/assigneeSelectorDropdown';
+import AssigneeSelectorDropdown from 'sentry/components/assigneeSelectorDropdown';
import GuideAnchor from 'sentry/components/assistant/guideAnchor';
import ActorAvatar from 'sentry/components/avatar/actorAvatar';
import {Button} from 'sentry/components/button';
@@ -17,6 +13,7 @@ import type {
OnAssignCallback,
SuggestedAssignee,
} from 'sentry/components/deprecatedAssigneeSelectorDropdown';
+import {useHandleAssigneeChange} from 'sentry/components/group/assigneeSelector';
import LoadingIndicator from 'sentry/components/loadingIndicator';
import * as SidebarSection from 'sentry/components/sidebarSection';
import {IconSettings, IconUser} from 'sentry/icons';
@@ -28,8 +25,6 @@ import type {Actor, Commit, Committer, Group, Project} from 'sentry/types';
import type {Event} from 'sentry/types/event';
import {defined} from 'sentry/utils';
import type {FeedbackIssue} from 'sentry/utils/feedback/types';
-import {useMutation} from 'sentry/utils/queryClient';
-import type RequestError from 'sentry/utils/requestError/requestError';
import {toTitleCase} from 'sentry/utils/string/toTitleCase';
import useApi from 'sentry/utils/useApi';
import useCommitters from 'sentry/utils/useCommitters';
@@ -191,35 +186,10 @@ function AssignedTo({
}
);
- const {mutate: handleAssigneeChange, isLoading: assigneeLoading} = useMutation<
- AssignableEntity | null,
- RequestError,
- AssignableEntity | null
- >({
- mutationFn: async (
- newAssignee: AssignableEntity | null
- ): Promise => {
- if (newAssignee) {
- await assignToActor({
- id: group.id,
- orgSlug: organization.slug,
- actor: {id: newAssignee.id, type: newAssignee.type},
- assignedBy: 'assignee_selector',
- });
- return Promise.resolve(newAssignee);
- }
-
- await clearAssignment(group.id, organization.slug, 'assignee_selector');
- return Promise.resolve(null);
- },
- onSuccess: (newAssignee: AssignableEntity | null) => {
- if (onAssign && newAssignee) {
- onAssign(newAssignee.type, newAssignee.assignee, newAssignee.suggestedAssignee);
- }
- },
- onError: () => {
- addErrorMessage('Failed to update assignee');
- },
+ const {handleAssigneeChange, assigneeLoading} = useHandleAssigneeChange({
+ organization,
+ group,
+ onAssign,
});
useEffect(() => {
diff --git a/static/app/components/group/assigneeSelector.tsx b/static/app/components/group/assigneeSelector.tsx
new file mode 100644
index 00000000000000..fe02a4b1bc3eaf
--- /dev/null
+++ b/static/app/components/group/assigneeSelector.tsx
@@ -0,0 +1,117 @@
+import styled from '@emotion/styled';
+
+import {assignToActor, clearAssignment} from 'sentry/actionCreators/group';
+import {addErrorMessage} from 'sentry/actionCreators/indicator';
+import {AssigneeBadge} from 'sentry/components/assigneeBadge';
+import AssigneeSelectorDropdown, {
+ type AssignableEntity,
+} from 'sentry/components/assigneeSelectorDropdown';
+import {Button} from 'sentry/components/button';
+import type {OnAssignCallback} from 'sentry/components/deprecatedAssigneeSelectorDropdown';
+import {t} from 'sentry/locale';
+import type {Group} from 'sentry/types/group';
+import type {Organization} from 'sentry/types/organization';
+import type {User} from 'sentry/types/user';
+import {useMutation} from 'sentry/utils/queryClient';
+import type RequestError from 'sentry/utils/requestError/requestError';
+
+interface AssigneeSelectorProps {
+ assigneeLoading: boolean;
+ group: Group;
+ handleAssigneeChange: (assignedActor: AssignableEntity | null) => void;
+ memberList?: User[];
+}
+
+export function useHandleAssigneeChange({
+ organization,
+ group,
+ onAssign,
+}: {
+ group: Group;
+ organization: Organization;
+ onAssign?: OnAssignCallback;
+}) {
+ const {mutate: handleAssigneeChange, isLoading: assigneeLoading} = useMutation<
+ AssignableEntity | null,
+ RequestError,
+ AssignableEntity | null
+ >({
+ mutationFn: async (
+ newAssignee: AssignableEntity | null
+ ): Promise => {
+ if (newAssignee) {
+ await assignToActor({
+ id: group.id,
+ orgSlug: organization.slug,
+ actor: {id: newAssignee.id, type: newAssignee.type},
+ assignedBy: 'assignee_selector',
+ });
+ return Promise.resolve(newAssignee);
+ }
+
+ await clearAssignment(group.id, organization.slug, 'assignee_selector');
+ return Promise.resolve(null);
+ },
+ onSuccess: (newAssignee: AssignableEntity | null) => {
+ if (onAssign && newAssignee) {
+ onAssign(newAssignee.type, newAssignee.assignee, newAssignee.suggestedAssignee);
+ }
+ },
+ onError: () => {
+ addErrorMessage('Failed to update assignee');
+ },
+ });
+
+ return {handleAssigneeChange, assigneeLoading};
+}
+
+/**
+ * Assignee selector used on issue details + issue stream. Uses `AssigneeSelectorDropdown` which controls most of the logic while this is primarily responsible for the design.
+ */
+export function AssigneeSelector({
+ group,
+ memberList,
+ assigneeLoading,
+ handleAssigneeChange,
+}: AssigneeSelectorProps) {
+ return (
+
+ handleAssigneeChange(assignedActor)
+ }
+ onClear={() => handleAssigneeChange(null)}
+ trigger={(props, isOpen) => (
+
+ {
+ const [_ownershipType, ownerId] = owner.owner.split(':');
+ return ownerId === group.assignedTo?.id;
+ })?.type
+ }
+ loading={assigneeLoading}
+ chevronDirection={isOpen ? 'up' : 'down'}
+ />
+
+ )}
+ />
+ );
+}
+
+const StyledDropdownButton = styled(Button)`
+ font-weight: ${p => p.theme.fontWeightNormal};
+ border: none;
+ padding: 0;
+ height: unset;
+ border-radius: 10px;
+ box-shadow: none;
+`;
diff --git a/static/app/components/group/inboxBadges/unhandledTag.tsx b/static/app/components/group/inboxBadges/unhandledTag.tsx
index 120e07e7e65891..3e75586defa307 100644
--- a/static/app/components/group/inboxBadges/unhandledTag.tsx
+++ b/static/app/components/group/inboxBadges/unhandledTag.tsx
@@ -3,12 +3,14 @@ import styled from '@emotion/styled';
import {Tooltip} from 'sentry/components/tooltip';
import {IconFatal} from 'sentry/icons';
import {t} from 'sentry/locale';
+import {useHasStreamlinedUI} from 'sentry/views/issueDetails/utils';
function UnhandledTag() {
+ const hasStreamlinedUI = useHasStreamlinedUI();
return (
-
+ {!hasStreamlinedUI && }
{t('Unhandled')}
diff --git a/static/app/components/group/releaseStats.tsx b/static/app/components/group/releaseStats.tsx
index 50ab1e92742cdc..2198991628937f 100644
--- a/static/app/components/group/releaseStats.tsx
+++ b/static/app/components/group/releaseStats.tsx
@@ -13,6 +13,7 @@ import type {CurrentRelease, Group, Organization, Project, Release} from 'sentry
import {defined} from 'sentry/utils';
import getDynamicText from 'sentry/utils/getDynamicText';
import {useApiQuery} from 'sentry/utils/queryClient';
+import {useHasStreamlinedUI} from 'sentry/views/issueDetails/utils';
import QuestionTooltip from '../questionTooltip';
@@ -60,6 +61,8 @@ function GroupReleaseStats({
}
);
+ const hasStreamlinedUI = useHasStreamlinedUI();
+
const firstRelease = groupReleaseData?.firstRelease;
const lastRelease = groupReleaseData?.lastRelease;
@@ -103,59 +106,62 @@ function GroupReleaseStats({
lastSeen={group.lastSeen}
/>
-
-
-
-
- {t('Last Seen')}
-
-
-
-
-
-
-
-
-
- {t('First Seen')}
-
-
-
-
-
-
+ {!hasStreamlinedUI && (
+
+
+
+
+ {t('Last Seen')}
+
+
+
+
+
+
+
+
+
+ {t('First Seen')}
+
+
+
+
+
+
+
+ )}
{!hasRelease ? (
{t('Releases')}
diff --git a/static/app/components/metrics/mriSelect/index.spec.tsx b/static/app/components/metrics/mriSelect/index.spec.tsx
index 09b5e850de5b51..b041b4f3b3de12 100644
--- a/static/app/components/metrics/mriSelect/index.spec.tsx
+++ b/static/app/components/metrics/mriSelect/index.spec.tsx
@@ -1,6 +1,14 @@
+import {initializeOrg} from 'sentry-test/initializeOrg';
+import {
+ render,
+ renderGlobalModal,
+ screen,
+ userEvent,
+} from 'sentry-test/reactTestingLibrary';
+
import type {MetricMeta, UseCase} from 'sentry/types/metrics';
-import {getMetricsWithDuplicateNames} from '.';
+import {getMetricsWithDuplicateNames, MRISelect} from '.';
function createMetricMeta(
name: string,
@@ -72,4 +80,44 @@ describe('getMetricsWithDuplicateNames', () => {
const result = getMetricsWithDuplicateNames(metrics);
expect(result).toEqual(new Set([]));
});
+
+ it('by clicking on the "create metric" button the metric modal shall be opened', async function () {
+ const {project, organization} = initializeOrg({
+ organization: {features: ['metrics-new-inputs']},
+ });
+
+ render(
+ ,
+ {
+ organization,
+ }
+ );
+
+ renderGlobalModal();
+
+ await userEvent.click(screen.getByLabelText('Metric'));
+ await userEvent.click(screen.getByRole('button', {name: 'Create Metric'}));
+ expect(screen.getByText(/Don’t see your span attribute/)).toBeInTheDocument();
+
+ expect(
+ await screen.findByRole('heading', {name: 'Create Metric'})
+ ).toBeInTheDocument();
+ });
});
diff --git a/static/app/components/metrics/mriSelect/index.tsx b/static/app/components/metrics/mriSelect/index.tsx
index 25e1d5e1d4e8df..436cdd02e7e01c 100644
--- a/static/app/components/metrics/mriSelect/index.tsx
+++ b/static/app/components/metrics/mriSelect/index.tsx
@@ -1,13 +1,15 @@
import {memo, useCallback, useEffect, useMemo, useState} from 'react';
-import {css} from '@emotion/react';
+import {css, useTheme} from '@emotion/react';
import styled from '@emotion/styled';
+import {Button} from 'sentry/components/button';
import {ComboBox} from 'sentry/components/comboBox';
import type {ComboBoxOption} from 'sentry/components/comboBox/types';
import ProjectBadge from 'sentry/components/idBadge/projectBadge';
import {QueryFieldGroup} from 'sentry/components/metrics/queryFieldGroup';
-import {IconProject, IconWarning} from 'sentry/icons';
+import {IconAdd, IconInfo, IconProject, IconWarning} from 'sentry/icons';
import {t} from 'sentry/locale';
+import {space} from 'sentry/styles/space';
import type {MetricMeta, MRI} from 'sentry/types/metrics';
import {type Fuse, useFuzzySearch} from 'sentry/utils/fuzzySearch';
import {
@@ -28,6 +30,7 @@ import {middleEllipsis} from 'sentry/utils/string/middleEllipsis';
import useKeyPress from 'sentry/utils/useKeyPress';
import useOrganization from 'sentry/utils/useOrganization';
import useProjects from 'sentry/utils/useProjects';
+import {openExtractionRuleCreateModal} from 'sentry/views/settings/projectMetrics/metricsExtractionRuleCreateModal';
import {MetricListItemDetails} from './metricListItemDetails';
@@ -155,6 +158,7 @@ export const MRISelect = memo(function MRISelect({
isLoading,
value,
}: MRISelectProps) {
+ const theme = useTheme();
const organization = useOrganization();
const {projects} = useProjects();
const mriMode = useMriMode();
@@ -315,7 +319,7 @@ export const MRISelect = memo(function MRISelect({
isLoading={isLoading}
loadingMessage={t('Loading\u2026')}
menuSize="sm"
- menuWidth="450px"
+ menuWidth="450px" // TODO(priscilawebdev): update this value for small screens
onChange={handleMRIChange}
onInputChange={setInputValue}
onOpenChange={onOpenMenu}
@@ -324,6 +328,31 @@ export const MRISelect = memo(function MRISelect({
size="md"
sizeLimit={100}
value={value}
+ menuFooter={({closeOverlay}) => (
+
+ }
+ priority="primary"
+ onClick={() => {
+ closeOverlay();
+ openExtractionRuleCreateModal({});
+ }}
+ size="xs"
+ >
+ {t('Create Metric')}
+
+
+
+ {t('Don’t see your span attribute? Create Metric.')}
+
+
+ )}
/>
);
}
@@ -356,3 +385,9 @@ export const MRISelect = memo(function MRISelect({
const CustomMetricInfoText = styled('span')`
color: ${p => p.theme.subText};
`;
+
+const FlexBlock = styled('div')`
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+`;
diff --git a/static/app/components/onboarding/productSelection.spec.tsx b/static/app/components/onboarding/productSelection.spec.tsx
index fbcab1e4b57563..97fb76c6d11ff3 100644
--- a/static/app/components/onboarding/productSelection.spec.tsx
+++ b/static/app/components/onboarding/productSelection.spec.tsx
@@ -60,18 +60,18 @@ describe('Onboarding Product Selection', function () {
await userEvent.click(screen.getByRole('checkbox', {name: 'Error Monitoring'}));
await waitFor(() => expect(router.push).not.toHaveBeenCalled());
- // Performance monitoring shall be checked and enabled by default
- expect(screen.getByRole('checkbox', {name: 'Performance Monitoring'})).toBeChecked();
- expect(screen.getByRole('checkbox', {name: 'Performance Monitoring'})).toBeEnabled();
+ // Tracing shall be checked and enabled by default
+ expect(screen.getByRole('checkbox', {name: 'Tracing'})).toBeChecked();
+ expect(screen.getByRole('checkbox', {name: 'Tracing'})).toBeEnabled();
// Tooltip with explanation shall be displayed on hover
- await userEvent.hover(screen.getByRole('checkbox', {name: 'Performance Monitoring'}));
+ await userEvent.hover(screen.getByRole('checkbox', {name: 'Tracing'}));
expect(
await screen.findByText(/Automatic performance issue detection/)
).toBeInTheDocument();
- // Uncheck performance monitoring
- await userEvent.click(screen.getByRole('checkbox', {name: 'Performance Monitoring'}));
+ // Uncheck tracing
+ await userEvent.click(screen.getByRole('checkbox', {name: 'Tracing'}));
await waitFor(() =>
expect(router.replace).toHaveBeenCalledWith({
pathname: undefined,
@@ -172,12 +172,10 @@ describe('Onboarding Product Selection', function () {
}
);
- // Performance Monitoring shall be unchecked and disabled by default
- expect(screen.getByRole('checkbox', {name: 'Performance Monitoring'})).toBeDisabled();
- expect(
- screen.getByRole('checkbox', {name: 'Performance Monitoring'})
- ).not.toBeChecked();
- await userEvent.hover(screen.getByRole('checkbox', {name: 'Performance Monitoring'}));
+ // Tracing shall be unchecked and disabled by default
+ expect(screen.getByRole('checkbox', {name: 'Tracing'})).toBeDisabled();
+ expect(screen.getByRole('checkbox', {name: 'Tracing'})).not.toBeChecked();
+ await userEvent.hover(screen.getByRole('checkbox', {name: 'Tracing'}));
// A tooltip with explanation why the option is disabled shall be displayed on hover
expect(
@@ -185,9 +183,9 @@ describe('Onboarding Product Selection', function () {
disabledProducts[ProductSolution.PERFORMANCE_MONITORING].reason
)
).toBeInTheDocument();
- await userEvent.click(screen.getByRole('checkbox', {name: 'Performance Monitoring'}));
+ await userEvent.click(screen.getByRole('checkbox', {name: 'Tracing'}));
- // Try to uncheck performance monitoring
+ // Try to uncheck tracing
await waitFor(() => expect(router.push).not.toHaveBeenCalled());
});
@@ -272,7 +270,7 @@ describe('Onboarding Product Selection', function () {
expect(screen.getByRole('checkbox', {name: 'Error Monitoring'})).toBeEnabled();
- expect(screen.getByRole('checkbox', {name: 'Performance Monitoring'})).toBeDisabled();
+ expect(screen.getByRole('checkbox', {name: 'Tracing'})).toBeDisabled();
expect(screen.getByRole('checkbox', {name: 'Session Replay'})).toBeDisabled();
});
diff --git a/static/app/components/onboarding/productSelection.tsx b/static/app/components/onboarding/productSelection.tsx
index ebd1201d277ec8..529e5a218cce15 100644
--- a/static/app/components/onboarding/productSelection.tsx
+++ b/static/app/components/onboarding/productSelection.tsx
@@ -69,10 +69,7 @@ function getDisabledProducts(organization: Organization): DisabledProducts {
if (!hasPerformance) {
disabledProducts[ProductSolution.PERFORMANCE_MONITORING] = {
reason,
- onClick: createClickHandler(
- 'organizations:performance-view',
- 'Performance Monitoring'
- ),
+ onClick: createClickHandler('organizations:performance-view', 'Tracing'),
};
}
if (!hasProfiling) {
@@ -358,7 +355,7 @@ export function ProductSelection({
);
if (defaultProducts?.includes(ProductSolution.PROFILING)) {
- // Ensure that if profiling is enabled, performance monitoring is also enabled
+ // Ensure that if profiling is enabled, tracing is also enabled
if (
product === ProductSolution.PROFILING &&
newProduct.has(ProductSolution.PROFILING)
@@ -434,7 +431,7 @@ export function ProductSelection({
/>
{products.includes(ProductSolution.PERFORMANCE_MONITORING) && (
,
}
diff --git a/static/app/components/performanceOnboarding/sidebar.tsx b/static/app/components/performanceOnboarding/sidebar.tsx
index 824a9c02d96f46..fd8cad4ea16ab6 100644
--- a/static/app/components/performanceOnboarding/sidebar.tsx
+++ b/static/app/components/performanceOnboarding/sidebar.tsx
@@ -1,6 +1,5 @@
import {Fragment, useEffect, useMemo, useState} from 'react';
import styled from '@emotion/styled';
-import qs from 'qs';
import HighlightTopRightPattern from 'sentry-images/pattern/highlight-top-right.svg';
@@ -25,6 +24,7 @@ import {space} from 'sentry/styles/space';
import type {Project} from 'sentry/types/project';
import EventWaiter from 'sentry/utils/eventWaiter';
import useApi from 'sentry/utils/useApi';
+import {useLocation} from 'sentry/utils/useLocation';
import useOrganization from 'sentry/utils/useOrganization';
import usePrevious from 'sentry/utils/usePrevious';
import useProjects from 'sentry/utils/useProjects';
@@ -48,7 +48,7 @@ function PerformanceOnboardingSidebar(props: CommonSidebarProps) {
const isActive = currentPanel === SidebarPanelKey.PERFORMANCE_ONBOARDING;
const organization = useOrganization();
const hasProjectAccess = organization.access.includes('project:read');
-
+ const location = useLocation<{project: string[] | null}>();
const {projects, initiallyLoaded: projectsLoaded} = useProjects();
const [currentProject, setCurrentProject] = useState(undefined);
@@ -59,10 +59,9 @@ function PerformanceOnboardingSidebar(props: CommonSidebarProps) {
filterProjects(projects);
const priorityProjectIds: Set | null = useMemo(() => {
- const queryParams = qs.parse(location.search);
- const decodedProjectIds = decodeProjectIds(queryParams.project);
+ const decodedProjectIds = decodeProjectIds(location.query.project);
return decodedProjectIds === null ? null : new Set(decodedProjectIds);
- }, []);
+ }, [location.query.project]);
useEffect(() => {
if (
diff --git a/static/app/components/replays/header/errorCounts.spec.tsx b/static/app/components/replays/header/errorCounts.spec.tsx
index d79677c131764f..afe8f7060dcb51 100644
--- a/static/app/components/replays/header/errorCounts.spec.tsx
+++ b/static/app/components/replays/header/errorCounts.spec.tsx
@@ -40,6 +40,7 @@ describe('ErrorCounts', () => {
hasMore: false,
initiallyLoaded: true,
onSearch: () => Promise.resolve(),
+ reloadProjects: jest.fn(),
placeholders: [],
});
});
diff --git a/static/app/components/replays/replayContext.tsx b/static/app/components/replays/replayContext.tsx
index 9d2f547a020762..9344c00e305eca 100644
--- a/static/app/components/replays/replayContext.tsx
+++ b/static/app/components/replays/replayContext.tsx
@@ -544,9 +544,10 @@ export function Provider({
user_email: user.email,
play,
context: analyticsContext,
+ mobile: isVideoReplay,
});
},
- [organization, user.email, analyticsContext, getCurrentPlayerTime]
+ [organization, user.email, analyticsContext, getCurrentPlayerTime, isVideoReplay]
);
useEffect(() => {
diff --git a/static/app/components/sidebar/index.spec.tsx b/static/app/components/sidebar/index.spec.tsx
index eee4238ca4fe80..ae569ec8efae6c 100644
--- a/static/app/components/sidebar/index.spec.tsx
+++ b/static/app/components/sidebar/index.spec.tsx
@@ -65,7 +65,7 @@ describe('Sidebar', function () {
};
beforeEach(function () {
- mockUseLocation.mockReset();
+ mockUseLocation.mockReturnValue(LocationFixture());
jest.spyOn(incidentsHook, 'useServiceIncidents').mockImplementation(
() =>
({
@@ -87,6 +87,10 @@ describe('Sidebar', function () {
});
});
+ afterEach(function () {
+ mockUseLocation.mockReset();
+ });
+
it('renders', async function () {
renderSidebar({organization});
expect(await screen.findByTestId('sidebar-dropdown')).toBeInTheDocument();
@@ -301,7 +305,7 @@ describe('Sidebar', function () {
ConfigStore.set('features', new Set([]));
ConfigStore.set('user', user);
- mockUseLocation.mockReturnValue(LocationFixture());
+ mockUseLocation.mockReturnValue({...LocationFixture()});
});
it('renders navigation', async function () {
diff --git a/static/app/components/stream/group.tsx b/static/app/components/stream/group.tsx
index 0f873d2fe4bead..0dcb160e45b8b3 100644
--- a/static/app/components/stream/group.tsx
+++ b/static/app/components/stream/group.tsx
@@ -6,17 +6,14 @@ import type {LocationDescriptor} from 'history';
import {assignToActor, clearAssignment} from 'sentry/actionCreators/group';
import {addErrorMessage} from 'sentry/actionCreators/indicator';
-import {AssigneeBadge} from 'sentry/components/assigneeBadge';
-import AssigneeSelectorDropdown, {
- type AssignableEntity,
-} from 'sentry/components/assigneeSelectorDropdown';
+import type {AssignableEntity} from 'sentry/components/assigneeSelectorDropdown';
import GuideAnchor from 'sentry/components/assistant/guideAnchor';
-import {Button} from 'sentry/components/button';
import GroupStatusChart from 'sentry/components/charts/groupStatusChart';
import Checkbox from 'sentry/components/checkbox';
import Count from 'sentry/components/count';
import EventOrGroupExtraDetails from 'sentry/components/eventOrGroupExtraDetails';
import EventOrGroupHeader from 'sentry/components/eventOrGroupHeader';
+import {AssigneeSelector} from 'sentry/components/group/assigneeSelector';
import {getBadgeProperties} from 'sentry/components/group/inboxBadges/statusBadge';
import type {GroupListColumn} from 'sentry/components/issues/groupList';
import Link from 'sentry/components/links/link';
@@ -548,34 +545,11 @@ function BaseGroupRow({
) : null}
{withColumns.includes('assignee') && (
-
- handleAssigneeChange(assignedActor)
- }
- onClear={() => handleAssigneeChange(null)}
- trigger={(props, isOpen) => (
-
- {
- const [_ownershipType, ownerId] = owner.owner.split(':');
- return ownerId === group.assignedTo?.id;
- })?.type
- }
- loading={assigneeLoading}
- chevronDirection={isOpen ? 'up' : 'down'}
- />
-
- )}
/>
)}
@@ -590,15 +564,6 @@ const StreamGroup = withOrganization(BaseGroupRow);
export default StreamGroup;
-const StyledDropdownButton = styled(Button)`
- font-weight: ${p => p.theme.fontWeightNormal};
- border: none;
- padding: 0;
- height: unset;
- border-radius: 10px;
- box-shadow: none;
-`;
-
// Position for wrapper is relative for overlay actions
const Wrapper = styled(PanelItem)<{
reviewed: boolean;
diff --git a/static/app/styles/global.tsx b/static/app/styles/global.tsx
index dc5f0fc4fc5f6e..e0b65f130ec1bd 100644
--- a/static/app/styles/global.tsx
+++ b/static/app/styles/global.tsx
@@ -22,7 +22,6 @@ const prismStyles = (theme: Theme) => css`
code {
background: unset;
- vertical-align: middle;
}
}
diff --git a/static/app/utils/analytics/replayAnalyticsEvents.tsx b/static/app/utils/analytics/replayAnalyticsEvents.tsx
index 4d393a4f087e4f..3db84d3e7ef3f3 100644
--- a/static/app/utils/analytics/replayAnalyticsEvents.tsx
+++ b/static/app/utils/analytics/replayAnalyticsEvents.tsx
@@ -51,6 +51,7 @@ export type ReplayEventParameters = {
title: string;
};
'replay.details-tab-changed': {
+ mobile: boolean;
tab: string;
};
'replay.details-time-spent': {
@@ -88,6 +89,7 @@ export type ReplayEventParameters = {
'replay.list-view-setup-sidebar': {};
'replay.play-pause': {
context: string;
+ mobile: boolean;
play: boolean;
user_email: string;
};
diff --git a/static/app/utils/analytics/tracingEventMap.tsx b/static/app/utils/analytics/tracingEventMap.tsx
index 4013224be4e440..f79e62ee24f8df 100644
--- a/static/app/utils/analytics/tracingEventMap.tsx
+++ b/static/app/utils/analytics/tracingEventMap.tsx
@@ -6,8 +6,18 @@ export type TracingEventParameters = {
shape: string;
trace_duration_seconds: number;
};
+ 'trace.quality.performance_setup.banner_loaded': {};
'trace.quality.performance_setup.checklist_triggered': {};
'trace.quality.performance_setup.learn_more_clicked': {};
+ 'trace.quality.quota_exceeded.banner_loaded': {
+ traceType: string;
+ };
+ 'trace.quality.quota_exceeded.increase_budget_clicked': {
+ traceType: string;
+ };
+ 'trace.quality.quota_exceeded.learn_more_clicked': {
+ traceType: string;
+ };
'trace.trace_layout.change': {
layout: string;
};
@@ -88,6 +98,13 @@ export const tracingEventMap: Record = {
'Triggered Performance Setup Checklist',
'trace.quality.performance_setup.learn_more_clicked':
'Clicked Learn More in Performance Setup Banner',
+ 'trace.quality.performance_setup.banner_loaded': 'Performance Setup Banner Loaded',
+ 'trace.quality.quota_exceeded.increase_budget_clicked':
+ 'Clicked Increase Budget in Quota Exceeded Banner',
+ 'trace.quality.quota_exceeded.learn_more_clicked':
+ 'Clicked Learn More in Quota Exceeded Banner',
+ 'trace.quality.quota_exceeded.banner_loaded':
+ 'Clicked Learn More in Performance Setup Banner',
'trace.trace_layout.view_shortcuts': 'Viewed Trace Shortcuts',
'trace.trace_warning_type': 'Viewed Trace Warning Type',
'trace.trace_layout.zoom_to_fill': 'Trace Zoom to Fill',
diff --git a/static/app/utils/analytics/workflowAnalyticsEvents.tsx b/static/app/utils/analytics/workflowAnalyticsEvents.tsx
index 5e001aaa45dea2..135675be4bc061 100644
--- a/static/app/utils/analytics/workflowAnalyticsEvents.tsx
+++ b/static/app/utils/analytics/workflowAnalyticsEvents.tsx
@@ -47,6 +47,7 @@ export type BaseEventAnalyticsParams = {
frames_without_source_maps_percent?: number;
has_graphql_request?: boolean;
has_otel?: boolean;
+ mobile?: boolean;
release_user_agent?: string;
sdk_name?: string;
sdk_version?: string;
diff --git a/static/app/utils/events.tsx b/static/app/utils/events.tsx
index 42ac576fac3e8e..4fa385049623d1 100644
--- a/static/app/utils/events.tsx
+++ b/static/app/utils/events.tsx
@@ -464,6 +464,7 @@ export function getAnalyticsDataForEvent(event?: Event | null): BaseEventAnalyti
sdk_version: event?.sdk?.version,
release_user_agent: event?.release?.userAgent,
resolved_with: event?.resolvedWith ?? [],
+ mobile: isMobilePlatform(event?.platform),
error_has_replay: Boolean(getReplayIdFromEvent(event)),
error_has_user_feedback: defined(event?.userReport),
has_otel: event?.contexts?.otel !== undefined,
diff --git a/static/app/utils/featureFlagOverrides.spec.ts b/static/app/utils/featureFlagOverrides.spec.ts
new file mode 100644
index 00000000000000..156736974cf60f
--- /dev/null
+++ b/static/app/utils/featureFlagOverrides.spec.ts
@@ -0,0 +1,161 @@
+import {OrganizationFixture} from 'sentry-fixture/organization';
+
+import FeatureFlagOverrides from 'sentry/utils/featureFlagOverrides';
+import localStorageWrapper from 'sentry/utils/localStorage';
+
+const LOCALSTORAGE_KEY = 'feature-flag-overrides';
+
+describe('FeatureFlagOverrides', () => {
+ let organization;
+ beforeEach(() => {
+ localStorage.clear();
+
+ organization = OrganizationFixture({
+ features: ['enable-issues', 'enable-profiling', 'enable-replay'],
+ });
+ });
+
+ describe('setStoredOverride', () => {
+ it('should insert new flag names into localstorage', () => {
+ expect(localStorageWrapper.getItem(LOCALSTORAGE_KEY)).toBeNull();
+ const inst = new FeatureFlagOverrides();
+
+ inst.setStoredOverride('enable-issues', false);
+ expect(localStorageWrapper.getItem(LOCALSTORAGE_KEY)).toBe(
+ '{"enable-issues":false}'
+ );
+
+ inst.setStoredOverride('enable-issues', true);
+ expect(localStorageWrapper.getItem(LOCALSTORAGE_KEY)).toBe(
+ '{"enable-issues":true}'
+ );
+ });
+
+ it('should preserve other flag overrides in localstorage', () => {
+ localStorageWrapper.setItem(
+ LOCALSTORAGE_KEY,
+ '{"enable-issues":true,"enable-profiling":false}'
+ );
+ const inst = new FeatureFlagOverrides();
+
+ inst.setStoredOverride('enable-replay', false);
+ expect(localStorageWrapper.getItem(LOCALSTORAGE_KEY)).toEqual(
+ '{"enable-issues":true,"enable-profiling":false,"enable-replay":false}'
+ );
+
+ inst.setStoredOverride('enable-replay', true);
+ expect(localStorageWrapper.getItem(LOCALSTORAGE_KEY)).toEqual(
+ '{"enable-issues":true,"enable-profiling":false,"enable-replay":true}'
+ );
+ });
+
+ it('should set localstorage, even if the original value is malformed', () => {
+ localStorageWrapper.setItem(LOCALSTORAGE_KEY, 'this is not an object {}');
+ const inst = new FeatureFlagOverrides();
+
+ inst.setStoredOverride('enable-issues', false);
+ expect(localStorageWrapper.getItem(LOCALSTORAGE_KEY)).toEqual(
+ '{"enable-issues":false}'
+ );
+ });
+ });
+
+ describe('getFeatureFlagMap', () => {
+ it('should combine & remove features that are disabled locally', () => {
+ localStorageWrapper.setItem(
+ LOCALSTORAGE_KEY,
+ '{"enable-issues":false,"enable-profiling":true}'
+ );
+ const inst = new FeatureFlagOverrides();
+
+ expect(inst.getFeatureFlagMap(organization)).toEqual({
+ 'enable-issues': {value: true, override: false},
+ 'enable-profiling': {value: true, override: true},
+ 'enable-replay': {value: true, override: undefined},
+ });
+ });
+
+ it('should combine & add features that are listed locally, but not in the org', () => {
+ localStorageWrapper.setItem(
+ LOCALSTORAGE_KEY,
+ '{"enable-issues":false,"secret-new-feature":true,"local-only-feature":false}'
+ );
+ const inst = new FeatureFlagOverrides();
+
+ expect(inst.getFeatureFlagMap(organization)).toEqual({
+ 'enable-issues': {value: true, override: false},
+ 'enable-profiling': {value: true, override: undefined},
+ 'enable-replay': {value: true, override: undefined},
+ 'secret-new-feature': {value: undefined, override: true},
+ 'local-only-feature': {value: undefined, override: false},
+ });
+ });
+ });
+
+ describe('getEnabledFeatureFlagList', () => {
+ it('should combine & remove features that are disabled locally', () => {
+ localStorageWrapper.setItem(
+ LOCALSTORAGE_KEY,
+ '{"enable-issues":false,"enable-profiling":true}'
+ );
+ const inst = new FeatureFlagOverrides();
+
+ expect(inst.getEnabledFeatureFlagList(organization)).toEqual([
+ 'enable-profiling',
+ 'enable-replay',
+ ]);
+ });
+
+ it('should combine & add features that are listed locally, but not in the org', () => {
+ localStorageWrapper.setItem(
+ LOCALSTORAGE_KEY,
+ '{"enable-issues":false,"secret-new-feature":true,"local-only-feature":false}'
+ );
+ const inst = new FeatureFlagOverrides();
+
+ expect(inst.getEnabledFeatureFlagList(organization)).toEqual([
+ 'enable-profiling',
+ 'enable-replay',
+ 'secret-new-feature',
+ ]);
+ });
+ });
+
+ describe('loadOrg', () => {
+ it('should override the features on an org with the combined list', () => {
+ localStorageWrapper.setItem(
+ LOCALSTORAGE_KEY,
+ '{"enable-issues":false,"secret-new-feature":true,"local-only-feature":false}'
+ );
+ const inst = new FeatureFlagOverrides();
+
+ expect(organization.features).toEqual([
+ 'enable-issues',
+ 'enable-profiling',
+ 'enable-replay',
+ ]);
+
+ inst.loadOrg(organization);
+
+ expect(organization.features).toEqual([
+ 'enable-profiling',
+ 'enable-replay',
+ 'secret-new-feature',
+ ]);
+
+ expect(inst.getFeatureFlagMap(organization)).toEqual({
+ 'enable-issues': {value: true, override: false},
+ 'enable-profiling': {value: true, override: undefined},
+ 'enable-replay': {value: true, override: undefined},
+ 'secret-new-feature': {value: undefined, override: true},
+ 'local-only-feature': {value: undefined, override: false},
+ });
+
+ expect(inst.getEnabledFeatureFlagList(organization)).toEqual([
+ 'enable-profiling',
+ 'enable-replay',
+ 'secret-new-feature',
+ ]);
+ });
+ });
+});
diff --git a/static/app/utils/featureFlagOverrides.ts b/static/app/utils/featureFlagOverrides.ts
new file mode 100644
index 00000000000000..55dff4e784b8ed
--- /dev/null
+++ b/static/app/utils/featureFlagOverrides.ts
@@ -0,0 +1,118 @@
+import type {Organization} from 'sentry/types/organization';
+import localStorageWrapper from 'sentry/utils/localStorage';
+
+type OverrideState = Record;
+
+// TODO(ryan953): this should import from the devtoolbar definition
+type FlagValue = boolean | string | number | undefined;
+export type FeatureFlagMap = Record;
+
+const LOCALSTORAGE_KEY = 'feature-flag-overrides';
+
+let __SINGLETON: FeatureFlagOverrides | null = null;
+
+export default class FeatureFlagOverrides {
+ /**
+ * Return the same instance of FeatureFlagOverrides in each part of the app.
+ *
+ * Multiple instances of FeatureFlagOverrides are needed by tests only.
+ */
+ public static singleton() {
+ if (!__SINGLETON) {
+ __SINGLETON = new FeatureFlagOverrides();
+ }
+ return __SINGLETON;
+ }
+
+ /**
+ * Instead of storing the original & overridden values on the org itself we're
+ * using this cache instead. Having the cache on the side means we don't need
+ * to change the Organization type to add a pr
+ */
+ private _originalValues = new WeakMap();
+
+ /**
+ * Set an override value into localStorage, so that the next time the page
+ * loads we can read it and apply it to the org.
+ */
+ public setStoredOverride(name: string, value: boolean): void {
+ try {
+ const prev = this._getStoredOverrides();
+ const updated: OverrideState = {...prev, [name]: value};
+ localStorageWrapper.setItem(LOCALSTORAGE_KEY, JSON.stringify(updated));
+ } catch {
+ //
+ }
+ }
+
+ public clear(): void {
+ localStorageWrapper.setItem(LOCALSTORAGE_KEY, '{}');
+ }
+
+ private _getStoredOverrides(): OverrideState {
+ try {
+ return JSON.parse(localStorageWrapper.getItem(LOCALSTORAGE_KEY) ?? '{}');
+ } catch {
+ return {};
+ }
+ }
+
+ /**
+ * Convert the list of enabled org-features into a FeatureFlapMap and cache it
+ * This cached list is only the original values that the server told us, but
+ * in a format we can add overrides to later.
+ */
+ private _getNonOverriddenFeatures(organization: Organization): FeatureFlagMap {
+ if (this._originalValues.has(organization)) {
+ // @ts-expect-error: We just checked .has(), so it shouldn't be undefined
+ return this._originalValues.get(organization);
+ }
+
+ const nonOverriddenFeatures = Object.fromEntries(
+ organization.features.map(name => [name, {value: true, override: undefined}])
+ );
+ this._originalValues.set(organization, nonOverriddenFeatures);
+ return nonOverriddenFeatures;
+ }
+
+ /**
+ * Return the effective featureFlags as a map, for the toolbar
+ */
+ public getFeatureFlagMap(organization: Organization): FeatureFlagMap {
+ const nonOverriddenFeatures = this._getNonOverriddenFeatures(organization);
+ const overrides = this._getStoredOverrides();
+
+ const clone: FeatureFlagMap = {...nonOverriddenFeatures};
+
+ for (const [name, override] of Object.entries(overrides)) {
+ clone[name] = {value: clone[name]?.value, override};
+ }
+ return clone;
+ }
+
+ /**
+ * Return the effective featureFlags as an array, for `organization.features`
+ */
+ public getEnabledFeatureFlagList(organization: Organization): string[] {
+ const nonOverriddenFeatures = this._getNonOverriddenFeatures(organization);
+ const overrides = this._getStoredOverrides();
+
+ const names = new Set(Object.keys(nonOverriddenFeatures));
+
+ for (const [name, override] of Object.entries(overrides)) {
+ if (override) {
+ names.add(name);
+ } else {
+ names.delete(name);
+ }
+ }
+ return Array.from(names);
+ }
+
+ /**
+ * Stash the original list of features & override organization.features with the effective list of features
+ */
+ public loadOrg(organization: Organization) {
+ organization.features = this.getEnabledFeatureFlagList(organization);
+ }
+}
diff --git a/static/app/utils/fields/index.ts b/static/app/utils/fields/index.ts
index b03d606d46e6fc..d75d50060d7a1c 100644
--- a/static/app/utils/fields/index.ts
+++ b/static/app/utils/fields/index.ts
@@ -1123,7 +1123,7 @@ const EVENT_FIELD_DEFINITIONS: Record = {
valueType: FieldValueType.STRING,
},
[FieldKey.TRANSACTION_DURATION]: {
- desc: t('Duration, in milliseconds, of the transaction'),
+ desc: t('Duration of the transaction'),
kind: FieldKind.FIELD,
valueType: FieldValueType.DURATION,
},
diff --git a/static/app/utils/replays/hooks/useReplayData.spec.tsx b/static/app/utils/replays/hooks/useReplayData.spec.tsx
index baa9fa88b36391..2c1d204db73265 100644
--- a/static/app/utils/replays/hooks/useReplayData.spec.tsx
+++ b/static/app/utils/replays/hooks/useReplayData.spec.tsx
@@ -29,6 +29,7 @@ jest.mocked(useProjects).mockReturnValue({
hasMore: false,
initiallyLoaded: true,
onSearch: () => Promise.resolve(),
+ reloadProjects: jest.fn(),
placeholders: [],
});
diff --git a/static/app/utils/useDevToolbar.tsx b/static/app/utils/useDevToolbar.tsx
index bc4724ff3e89ee..beb2c345a3f797 100644
--- a/static/app/utils/useDevToolbar.tsx
+++ b/static/app/utils/useDevToolbar.tsx
@@ -3,6 +3,7 @@ import * as Sentry from '@sentry/react';
import DevToolbar from 'sentry/components/devtoolbar';
import {rawTrackAnalyticsEvent} from 'sentry/utils/analytics';
+import FeatureFlagOverrides from 'sentry/utils/featureFlagOverrides';
import useOrganization from 'sentry/utils/useOrganization';
import {useUser} from 'sentry/utils/useUser';
@@ -28,10 +29,21 @@ export default function useDevToolbar({enabled}: {enabled: boolean}) {
projectId: 11276,
projectPlatform: 'javascript',
projectSlug: 'javascript',
- featureFlags: organization.features,
- featureFlagTemplateUrl: flag =>
- `https://github.com/search?q=repo%3Agetsentry%2Fsentry-options-automator+OR+repo%3Agetsentry%2Fsentry+${flag}&type=code`,
-
+ featureFlags: {
+ getFeatureFlagMap: () =>
+ FeatureFlagOverrides.singleton().getFeatureFlagMap(organization),
+ urlTemplate: flag =>
+ `https://github.com/search?q=repo%3Agetsentry%2Fsentry-options-automator+OR+repo%3Agetsentry%2Fsentry+${flag}&type=code`,
+ setOverrideValue: (name, value) => {
+ // only boolean flags in sentry
+ if (typeof value === 'boolean') {
+ FeatureFlagOverrides.singleton().setStoredOverride(name, value);
+ }
+ },
+ clearOverrides: () => {
+ FeatureFlagOverrides.singleton().clear();
+ },
+ },
trackAnalytics: (props: {eventKey: string; eventName: string}) =>
rawTrackAnalyticsEvent({...props, email, organization}),
});
diff --git a/static/app/utils/useProjects.tsx b/static/app/utils/useProjects.tsx
index cdcfa7be2dabff..9bdb30d2706a81 100644
--- a/static/app/utils/useProjects.tsx
+++ b/static/app/utils/useProjects.tsx
@@ -58,6 +58,10 @@ type Result = {
* The loaded projects list
*/
projects: Project[];
+ /**
+ * Allows consumers to force refetch project data.
+ */
+ reloadProjects: () => Promise;
} & Pick;
type Options = {
@@ -199,7 +203,8 @@ function useProjects({limit, slugs, orgId: propOrgId}: Options = {}) {
limit,
});
- const fetchedProjects = uniqBy([...store.projects, ...results], ({slug}) => slug);
+ // Note the order of uniqBy: we prioritize project data recently fetched over previously cached data
+ const fetchedProjects = uniqBy([...results, ...store.projects], ({slug}) => slug);
ProjectsStore.loadInitialData(fetchedProjects);
setState(prev => ({
@@ -308,6 +313,7 @@ function useProjects({limit, slugs, orgId: propOrgId}: Options = {}) {
fetchError,
hasMore,
onSearch: handleSearch,
+ reloadProjects: loadProjectsBySlug,
};
return result;
diff --git a/static/app/views/alerts/rules/issue/index.tsx b/static/app/views/alerts/rules/issue/index.tsx
index 4b7cad61047706..9f9126e9c3516f 100644
--- a/static/app/views/alerts/rules/issue/index.tsx
+++ b/static/app/views/alerts/rules/issue/index.tsx
@@ -323,7 +323,7 @@ class IssueRuleEditor extends DeprecatedAsyncView {
// now that we've loaded all the possible conditions, we can populate the
// value of conditions for a new alert
const hasSeerBasedPriority =
- this.props.organization.features.includes('seer-based-priority');
+ this.props.organization.features.includes('priority-ga-features');
const hasHighPriorityIssueAlerts =
this.props.organization.features.includes('default-high-priority-alerts') ||
this.props.project.features.includes('high-priority-alerts');
diff --git a/static/app/views/insights/browser/resources/views/resourcesLandingPage.spec.tsx b/static/app/views/insights/browser/resources/views/resourcesLandingPage.spec.tsx
index 8c53b748456c06..c72736e791d4db 100644
--- a/static/app/views/insights/browser/resources/views/resourcesLandingPage.spec.tsx
+++ b/static/app/views/insights/browser/resources/views/resourcesLandingPage.spec.tsx
@@ -168,6 +168,7 @@ const setupMocks = () => {
initiallyLoaded: true,
projects: [ProjectFixture({hasInsightsAssets: true})],
onSearch: jest.fn(),
+ reloadProjects: jest.fn(),
placeholders: [],
});
};
diff --git a/static/app/views/insights/browser/webVitals/components/tables/pagePerformanceTable.spec.tsx b/static/app/views/insights/browser/webVitals/components/tables/pagePerformanceTable.spec.tsx
index 52c2b26f31b651..151fb100538624 100644
--- a/static/app/views/insights/browser/webVitals/components/tables/pagePerformanceTable.spec.tsx
+++ b/static/app/views/insights/browser/webVitals/components/tables/pagePerformanceTable.spec.tsx
@@ -60,6 +60,7 @@ describe('PagePerformanceTable', function () {
}),
],
onSearch: jest.fn(),
+ reloadProjects: jest.fn(),
placeholders: [],
fetching: false,
hasMore: null,
diff --git a/static/app/views/insights/browser/webVitals/views/webVitalsLandingPage.spec.tsx b/static/app/views/insights/browser/webVitals/views/webVitalsLandingPage.spec.tsx
index 55caaab03a1d22..97cd80613804c1 100644
--- a/static/app/views/insights/browser/webVitals/views/webVitalsLandingPage.spec.tsx
+++ b/static/app/views/insights/browser/webVitals/views/webVitalsLandingPage.spec.tsx
@@ -26,6 +26,7 @@ describe('WebVitalsLandingPage', function () {
jest.mocked(useProjects).mockReturnValue({
projects: [ProjectFixture({hasInsightsVitals: true})],
onSearch: jest.fn(),
+ reloadProjects: jest.fn(),
placeholders: [],
fetching: false,
hasMore: null,
diff --git a/static/app/views/insights/cache/views/cacheLandingPage.spec.tsx b/static/app/views/insights/cache/views/cacheLandingPage.spec.tsx
index 91646ebce390ec..b8db986b5f2086 100644
--- a/static/app/views/insights/cache/views/cacheLandingPage.spec.tsx
+++ b/static/app/views/insights/cache/views/cacheLandingPage.spec.tsx
@@ -71,6 +71,7 @@ describe('CacheLandingPage', function () {
}),
],
onSearch: jest.fn(),
+ reloadProjects: jest.fn(),
placeholders: [],
fetching: false,
hasMore: null,
@@ -302,6 +303,7 @@ describe('CacheLandingPage', function () {
}),
],
onSearch: jest.fn(),
+ reloadProjects: jest.fn(),
placeholders: [],
fetching: false,
hasMore: null,
diff --git a/static/app/views/insights/common/components/modulesOnboarding.spec.tsx b/static/app/views/insights/common/components/modulesOnboarding.spec.tsx
index 0fdac56dd94f7f..b1d8f1ea48ca10 100644
--- a/static/app/views/insights/common/components/modulesOnboarding.spec.tsx
+++ b/static/app/views/insights/common/components/modulesOnboarding.spec.tsx
@@ -26,6 +26,7 @@ describe('ModulesOnboarding', () => {
jest.mocked(useProjects).mockReturnValue({
projects: [project],
onSearch: jest.fn(),
+ reloadProjects: jest.fn(),
placeholders: [],
fetching: false,
hasMore: null,
@@ -66,6 +67,7 @@ describe('ModulesOnboarding', () => {
jest.mocked(useProjects).mockReturnValue({
projects: [project],
onSearch: jest.fn(),
+ reloadProjects: jest.fn(),
placeholders: [],
fetching: false,
hasMore: null,
@@ -105,6 +107,7 @@ describe('ModulesOnboarding', () => {
jest.mocked(useProjects).mockReturnValue({
projects: [project],
onSearch: jest.fn(),
+ reloadProjects: jest.fn(),
placeholders: [],
fetching: false,
hasMore: null,
diff --git a/static/app/views/insights/common/components/modulesOnboarding.tsx b/static/app/views/insights/common/components/modulesOnboarding.tsx
index 7edbd0243ed9f5..39d4415e83a51c 100644
--- a/static/app/views/insights/common/components/modulesOnboarding.tsx
+++ b/static/app/views/insights/common/components/modulesOnboarding.tsx
@@ -1,4 +1,4 @@
-import {Fragment, useState} from 'react';
+import {Fragment, useEffect, useState} from 'react';
import styled from '@emotion/styled';
import startCase from 'lodash/startCase';
import {PlatformIcon} from 'platformicons';
@@ -21,6 +21,7 @@ import {t, tct} from 'sentry/locale';
import {space} from 'sentry/styles/space';
import type {PlatformKey} from 'sentry/types/project';
import useOrganization from 'sentry/utils/useOrganization';
+import useProjects from 'sentry/utils/useProjects';
import * as ModuleLayout from 'sentry/views/insights/common/components/moduleLayout';
import type {TitleableModuleNames} from 'sentry/views/insights/common/components/modulePageProviders';
import {useHasFirstSpan} from 'sentry/views/insights/common/queries/useHasFirstSpan';
@@ -42,8 +43,19 @@ export function ModulesOnboarding({
}) {
const organization = useOrganization();
const onboardingProject = useOnboardingProject();
+ const {reloadProjects} = useProjects();
const hasData = useHasFirstSpan(moduleName);
+ // Refetch the project metadata if the selected project does not have insights data, because
+ // we may have received insight data (and subsequently updated `Project.hasInsightxx`)
+ // after the initial project fetch.
+ useEffect(() => {
+ if (!hasData) {
+ reloadProjects();
+ }
+ // eslint-disable-next-line react-hooks/exhaustive-deps
+ }, [hasData]);
+
if (onboardingProject) {
return (
diff --git a/static/app/views/insights/database/views/databaseLandingPage.spec.tsx b/static/app/views/insights/database/views/databaseLandingPage.spec.tsx
index efe0cd118b15ab..31595a29e08fff 100644
--- a/static/app/views/insights/database/views/databaseLandingPage.spec.tsx
+++ b/static/app/views/insights/database/views/databaseLandingPage.spec.tsx
@@ -22,6 +22,7 @@ describe('DatabaseLandingPage', function () {
jest.mocked(useProjects).mockReturnValue({
projects: [ProjectFixture({hasInsightsDb: true})],
onSearch: jest.fn(),
+ reloadProjects: jest.fn(),
placeholders: [],
fetching: false,
hasMore: null,
diff --git a/static/app/views/insights/http/views/httpLandingPage.spec.tsx b/static/app/views/insights/http/views/httpLandingPage.spec.tsx
index 5d254c03a27490..d232a6ca709385 100644
--- a/static/app/views/insights/http/views/httpLandingPage.spec.tsx
+++ b/static/app/views/insights/http/views/httpLandingPage.spec.tsx
@@ -60,6 +60,7 @@ describe('HTTPLandingPage', function () {
}),
],
onSearch: jest.fn(),
+ reloadProjects: jest.fn(),
placeholders: [],
fetching: false,
hasMore: null,
diff --git a/static/app/views/insights/mobile/common/queries/useCrossPlatformProject.spec.tsx b/static/app/views/insights/mobile/common/queries/useCrossPlatformProject.spec.tsx
index 596ab581bb7fee..c5965687805af2 100644
--- a/static/app/views/insights/mobile/common/queries/useCrossPlatformProject.spec.tsx
+++ b/static/app/views/insights/mobile/common/queries/useCrossPlatformProject.spec.tsx
@@ -39,6 +39,7 @@ function mockProjects(projects: Project[]) {
hasMore: false,
initiallyLoaded: false,
onSearch: jest.fn(),
+ reloadProjects: jest.fn(),
placeholders: [],
projects,
});
diff --git a/static/app/views/insights/mobile/screenload/views/screenLoadSpansPage.spec.tsx b/static/app/views/insights/mobile/screenload/views/screenLoadSpansPage.spec.tsx
index 4a909fd70e1df3..75e560676ff57e 100644
--- a/static/app/views/insights/mobile/screenload/views/screenLoadSpansPage.spec.tsx
+++ b/static/app/views/insights/mobile/screenload/views/screenLoadSpansPage.spec.tsx
@@ -26,6 +26,7 @@ function mockResponses(organization, project) {
hasMore: false,
initiallyLoaded: false,
onSearch: jest.fn(),
+ reloadProjects: jest.fn(),
placeholders: [],
projects: [project],
});
diff --git a/static/app/views/insights/mobile/screenload/views/screenloadLandingPage.spec.tsx b/static/app/views/insights/mobile/screenload/views/screenloadLandingPage.spec.tsx
index 92d626e0ae1024..ad3310810ecf74 100644
--- a/static/app/views/insights/mobile/screenload/views/screenloadLandingPage.spec.tsx
+++ b/static/app/views/insights/mobile/screenload/views/screenloadLandingPage.spec.tsx
@@ -31,6 +31,7 @@ describe('PageloadModule', function () {
hasMore: false,
initiallyLoaded: false,
onSearch: jest.fn(),
+ reloadProjects: jest.fn(),
placeholders: [],
projects: [project],
});
diff --git a/static/app/views/insights/queues/views/destinationSummaryPage.spec.tsx b/static/app/views/insights/queues/views/destinationSummaryPage.spec.tsx
index 6922be5ba916e2..f6c0af83557baf 100644
--- a/static/app/views/insights/queues/views/destinationSummaryPage.spec.tsx
+++ b/static/app/views/insights/queues/views/destinationSummaryPage.spec.tsx
@@ -46,6 +46,7 @@ describe('destinationSummaryPage', () => {
jest.mocked(useProjects).mockReturnValue({
projects: [],
onSearch: jest.fn(),
+ reloadProjects: jest.fn(),
placeholders: [],
fetching: false,
hasMore: null,
diff --git a/static/app/views/insights/queues/views/queuesLandingPage.spec.tsx b/static/app/views/insights/queues/views/queuesLandingPage.spec.tsx
index 5db67954157c7d..66d70bec26d1ab 100644
--- a/static/app/views/insights/queues/views/queuesLandingPage.spec.tsx
+++ b/static/app/views/insights/queues/views/queuesLandingPage.spec.tsx
@@ -50,6 +50,7 @@ describe('queuesLandingPage', () => {
jest.mocked(useProjects).mockReturnValue({
projects: [project],
onSearch: jest.fn(),
+ reloadProjects: jest.fn(),
placeholders: [],
fetching: false,
hasMore: null,
diff --git a/static/app/views/issueDetails/actions/index.tsx b/static/app/views/issueDetails/actions/index.tsx
index 1e2c4bcc35e2cf..b4feb993cd57fd 100644
--- a/static/app/views/issueDetails/actions/index.tsx
+++ b/static/app/views/issueDetails/actions/index.tsx
@@ -16,8 +16,14 @@ import ResolveActions from 'sentry/components/actions/resolve';
import GuideAnchor from 'sentry/components/assistant/guideAnchor';
import {Button} from 'sentry/components/button';
import {DropdownMenu} from 'sentry/components/dropdownMenu';
+import Divider from 'sentry/components/events/interfaces/debugMeta/debugImageDetails/candidate/information/divider';
import {EnvironmentPageFilter} from 'sentry/components/organizations/environmentPageFilter';
-import {IconEllipsis, IconSubscribed, IconUnsubscribed} from 'sentry/icons';
+import {
+ IconCheckmark,
+ IconEllipsis,
+ IconSubscribed,
+ IconUnsubscribed,
+} from 'sentry/icons';
import {t} from 'sentry/locale';
import GroupStore from 'sentry/stores/groupStore';
import IssueListCacheStore from 'sentry/stores/IssueListCacheStore';
@@ -47,6 +53,7 @@ import withApi from 'sentry/utils/withApi';
import withOrganization from 'sentry/utils/withOrganization';
import {hasDatasetSelector} from 'sentry/views/dashboards/utils';
import {NewIssueExperienceButton} from 'sentry/views/issueDetails/actions/newIssueExperienceButton';
+import {useHasStreamlinedUI} from 'sentry/views/issueDetails/utils';
import ShareIssueModal from './shareModal';
import SubscribeAction from './subscribeAction';
@@ -87,6 +94,8 @@ export function Actions(props: Props) {
const config = useMemo(() => getConfigForIssueType(group, project), [group, project]);
+ const hasStreamlinedUI = useHasStreamlinedUI();
+
const {
actions: {
archiveUntilOccurrence: archiveUntilOccurrenceCap,
@@ -361,6 +370,67 @@ export function Actions(props: Props) {
});
return (
+ {hasStreamlinedUI &&
+ (isResolved || isIgnored ? (
+
+
+
+ {isResolved ? t('Resolved') : t('Archived')}
+
+
+
+ onUpdate({
+ status: GroupStatus.UNRESOLVED,
+
+ statusDetails: {},
+
+ substatus: GroupSubstatus.ONGOING,
+ })
+ }
+ >
+ {isResolved ? t('Unresolve') : t('Unarchive')}
+
+
+ ) : (
+
+
+
+
+
+
+ : }
+ size="sm"
+ />
+
+ ))}
- {organization.features.includes('issue-details-new-experience-toggle') ? (
-
- ) : null}
- : }
- size="sm"
- />
-
-
-
- {discoverCap.enabled && (
-
- trackIssueAction('open_in_discover')}
- size="sm"
- >
- {t('Open in Discover')}
-
-
- )}
- {isResolved || isIgnored ? (
-
- onUpdate({
- status: GroupStatus.UNRESOLVED,
- statusDetails: {},
- substatus: GroupSubstatus.ONGOING,
- })
- }
- >
- {isIgnored ? t('Archived') : t('Resolved')}
-
- ) : (
+ {!hasStreamlinedUI && (
-
+ ) : null}
+ : }
+ size="sm"
/>
-
-
+
+
+ {discoverCap.enabled && (
+
+ trackIssueAction('open_in_discover')}
+ size="sm"
+ >
+
+ {t('Open in Discover')}
+
+
+
+ )}
+ {isResolved || isIgnored ? (
+
-
+ title={
+ isAutoResolved
+ ? t(
+ 'This event is resolved due to the Auto Resolve configuration for this project'
+ )
+ : t('Change status to unresolved')
+ }
+ size="sm"
+ disabled={disabled || isAutoResolved}
+ onClick={() =>
+ onUpdate({
+ status: GroupStatus.UNRESOLVED,
+ statusDetails: {},
+ substatus: GroupSubstatus.ONGOING,
+ })
+ }
+ >
+ {isIgnored ? t('Archived') : t('Resolved')}
+
+ ) : (
+
+
+
+
+
+
+ )}
)}
@@ -531,4 +607,19 @@ const ActionWrapper = styled('div')`
gap: ${space(0.5)};
`;
+const ResolvedWrapper = styled('div')`
+ display: flex;
+ gap: ${space(0.5)};
+ align-items: center;
+ color: ${p => p.theme.green400};
+ font-weight: bold;
+ font-size: ${p => p.theme.fontSizeLarge};
+`;
+
+const ResolvedActionWapper = styled('div')`
+ display: flex;
+ gap: ${space(1)};
+ align-items: center;
+`;
+
export default withApi(withOrganization(Actions));
diff --git a/static/app/views/issueDetails/eventNavigation.tsx b/static/app/views/issueDetails/eventNavigation.tsx
index 5f0dff3c46a151..7c7c2725ea7faa 100644
--- a/static/app/views/issueDetails/eventNavigation.tsx
+++ b/static/app/views/issueDetails/eventNavigation.tsx
@@ -44,8 +44,8 @@ enum EventNavOptions {
const EventNavLabels = {
[EventNavOptions.RECOMMENDED]: t('Recommended Event'),
- [EventNavOptions.LATEST]: t('Last Event'),
[EventNavOptions.OLDEST]: t('First Event'),
+ [EventNavOptions.LATEST]: t('Last Event'),
};
const eventDataSections: SectionDefinition[] = [
diff --git a/static/app/views/issueDetails/groupDetails.tsx b/static/app/views/issueDetails/groupDetails.tsx
index 7c46e537f6660e..f2b67316b6d7ee 100644
--- a/static/app/views/issueDetails/groupDetails.tsx
+++ b/static/app/views/issueDetails/groupDetails.tsx
@@ -53,11 +53,11 @@ import {useParams} from 'sentry/utils/useParams';
import useProjects from 'sentry/utils/useProjects';
import useRouter from 'sentry/utils/useRouter';
import {useUser} from 'sentry/utils/useUser';
-
-import {ERROR_TYPES} from './constants';
-import GroupHeader from './header';
-import SampleEventAlert from './sampleEventAlert';
-import {Tab, TabPaths} from './types';
+import GroupHeader from 'sentry/views/issueDetails//header';
+import {ERROR_TYPES} from 'sentry/views/issueDetails/constants';
+import SampleEventAlert from 'sentry/views/issueDetails/sampleEventAlert';
+import StreamlinedGroupHeader from 'sentry/views/issueDetails/streamlinedHeader';
+import {Tab, TabPaths} from 'sentry/views/issueDetails/types';
import {
getGroupDetailsQueryData,
getGroupEventDetailsQueryData,
@@ -67,7 +67,8 @@ import {
useDefaultIssueEvent,
useEnvironmentsFromUrl,
useFetchIssueTagsForDetailsPage,
-} from './utils';
+ useHasStreamlinedUI,
+} from 'sentry/views/issueDetails/utils';
type Error = (typeof ERROR_TYPES)[keyof typeof ERROR_TYPES] | null;
@@ -683,6 +684,8 @@ function GroupDetailsContent({
const environments = useEnvironmentsFromUrl();
+ const hasStreamlinedUI = useHasStreamlinedUI();
+
useTrackView({group, event, project, tab: currentTab});
const childProps = {
@@ -702,14 +705,23 @@ function GroupDetailsContent({
value={currentTab}
onChange={tab => trackTabChanged({tab, group, project, event, organization})}
>
-
+ {hasStreamlinedUI ? (
+
+ ) : (
+
+ )}
{isValidElement(children) ? cloneElement(children, childProps) : children}
diff --git a/static/app/views/issueDetails/groupEventDetails/groupEventDetails.tsx b/static/app/views/issueDetails/groupEventDetails/groupEventDetails.tsx
index 6b0a5ea980b0f5..2bcc697e2326ea 100644
--- a/static/app/views/issueDetails/groupEventDetails/groupEventDetails.tsx
+++ b/static/app/views/issueDetails/groupEventDetails/groupEventDetails.tsx
@@ -186,7 +186,7 @@ function GroupEventDetails(props: GroupEventDetailsProps) {
) : (
- {renderGroupStatusBanner()}
+ {!hasStreamlinedUI && renderGroupStatusBanner()}
{eventWithMeta && issueTypeConfig.stats.enabled && (
{
@@ -257,7 +262,9 @@ export default function GroupSidebar({
return (
-
+ {!hasStreamlinedUI && (
+
+ )}
{issueTypeConfig.stats.enabled && (
)}
- {renderParticipantData()}
- {renderSeenByList()}
+ {!hasStreamlinedUI && renderParticipantData()}
+ {!hasStreamlinedUI && renderSeenByList()}
);
}
diff --git a/static/app/views/issueDetails/header.tsx b/static/app/views/issueDetails/header.tsx
index 8f8852c671c8e0..bc647a5fcb8fc6 100644
--- a/static/app/views/issueDetails/header.tsx
+++ b/static/app/views/issueDetails/header.tsx
@@ -1,4 +1,4 @@
-import {Fragment, useEffect, useMemo} from 'react';
+import {Fragment, useEffect} from 'react';
import styled from '@emotion/styled';
import type {LocationDescriptor} from 'history';
import omit from 'lodash/omit';
@@ -22,7 +22,6 @@ import {space} from 'sentry/styles/space';
import type {Event, Group, Organization, Project} from 'sentry/types';
import {IssueCategory, IssueType} from 'sentry/types/group';
import {trackAnalytics} from 'sentry/utils/analytics';
-import {getMessage} from 'sentry/utils/events';
import {getConfigForIssueType} from 'sentry/utils/issueTypeConfig';
import useReplayCountForIssues from 'sentry/utils/replayCount/useReplayCountForIssues';
import {projectCanLinkToReplay} from 'sentry/utils/replays/projectSupportsReplay';
@@ -30,11 +29,11 @@ import useRouteAnalyticsParams from 'sentry/utils/routeAnalytics/useRouteAnalyti
import {useLocation} from 'sentry/utils/useLocation';
import useOrganization from 'sentry/utils/useOrganization';
import GroupPriority from 'sentry/views/issueDetails/groupPriority';
+import {useIssueDetailsHeader} from 'sentry/views/issueDetails/useIssueDetailsHeader';
import GroupActions from './actions';
-import {ShortIdBreadcrumb} from './shortIdBreadcrumb';
import {Tab} from './types';
-import {ReprocessingStatus} from './utils';
+import type {ReprocessingStatus} from './utils';
type Props = {
baseUrl: string;
@@ -50,7 +49,7 @@ interface GroupHeaderTabsProps extends Pick {
- if (groupReprocessingStatus === ReprocessingStatus.REPROCESSING) {
- return [
- Tab.ACTIVITY,
- Tab.USER_FEEDBACK,
- Tab.ATTACHMENTS,
- Tab.EVENTS,
- Tab.MERGED,
- Tab.SIMILAR_ISSUES,
- Tab.TAGS,
- ];
- }
-
- if (groupReprocessingStatus === ReprocessingStatus.REPROCESSED_AND_HASNT_EVENT) {
- return [
- Tab.DETAILS,
- Tab.ATTACHMENTS,
- Tab.EVENTS,
- Tab.MERGED,
- Tab.SIMILAR_ISSUES,
- Tab.TAGS,
- Tab.USER_FEEDBACK,
- ];
- }
-
- return [];
- }, [groupReprocessingStatus]);
-
- const eventRoute = useMemo(() => {
- const searchTermWithoutQuery = omit(location.query, 'query');
- return {
- pathname: `${baseUrl}events/`,
- query: searchTermWithoutQuery,
- };
- }, [location, baseUrl]);
+ const {
+ disabledTabs,
+ message,
+ eventRoute,
+ disableActions,
+ shortIdBreadcrumb,
+ className,
+ } = useIssueDetailsHeader({
+ group,
+ groupReprocessingStatus,
+ baseUrl,
+ project,
+ });
const {userCount} = group;
- let className = 'group-detail';
-
- if (group.hasSeen) {
- className += ' hasSeen';
- }
-
- if (group.status === 'resolved') {
- className += ' isResolved';
- }
-
- const message = getMessage(group);
-
- const disableActions = !!disabledTabs.length;
-
- const shortIdBreadcrumb = (
-
- );
-
const issueTypeConfig = getConfigForIssueType(group, project);
const NEW_ISSUE_TYPES = [IssueType.REPLAY_HYDRATION_ERROR]; // adds a "new" banner next to the title
diff --git a/static/app/views/issueDetails/streamlinedHeader.spec.tsx b/static/app/views/issueDetails/streamlinedHeader.spec.tsx
new file mode 100644
index 00000000000000..b9be24350caa39
--- /dev/null
+++ b/static/app/views/issueDetails/streamlinedHeader.spec.tsx
@@ -0,0 +1,104 @@
+import {GroupFixture} from 'sentry-fixture/group';
+import {OrganizationFixture} from 'sentry-fixture/organization';
+import {ProjectFixture} from 'sentry-fixture/project';
+import {TeamFixture} from 'sentry-fixture/team';
+import {UserFixture} from 'sentry-fixture/user';
+
+import {render, screen} from 'sentry-test/reactTestingLibrary';
+
+import type {TeamParticipant, UserParticipant} from 'sentry/types';
+import {IssueCategory} from 'sentry/types';
+import StreamlinedGroupHeader from 'sentry/views/issueDetails/streamlinedHeader';
+import {ReprocessingStatus} from 'sentry/views/issueDetails/utils';
+
+describe('UpdatedGroupHeader', () => {
+ const baseUrl = 'BASE_URL/';
+ const organization = OrganizationFixture({features: ['issue-details-streamline']});
+ const project = ProjectFixture({
+ platform: 'javascript',
+ teams: [TeamFixture()],
+ });
+ const group = GroupFixture({issueCategory: IssueCategory.ERROR, isUnhandled: true});
+
+ describe('JS Project Error Issue', () => {
+ const defaultProps = {
+ organization,
+ baseUrl,
+ groupReprocessingStatus: ReprocessingStatus.NO_STATUS,
+ project,
+ };
+
+ beforeEach(() => {
+ MockApiClient.addMockResponse({
+ url: `/organizations/${organization.slug}/issues/${group.id}/first-last-release/`,
+ method: 'GET',
+ body: {},
+ });
+
+ MockApiClient.addMockResponse({
+ url: '/organizations/org-slug/replay-count/',
+ body: {},
+ });
+ });
+
+ it('shows all elements of header', async () => {
+ const teams: TeamParticipant[] = [{...TeamFixture(), type: 'team'}];
+ const users: UserParticipant[] = [
+ {
+ ...UserFixture({
+ id: '2',
+ name: 'John Smith',
+ email: 'johnsmith@example.com',
+ }),
+ type: 'user',
+ },
+ {
+ ...UserFixture({
+ id: '3',
+ name: 'Sohn Jmith',
+ email: 'sohnjmith@example.com',
+ }),
+ type: 'user',
+ },
+ ];
+
+ const participantGroup = {
+ ...group,
+ participants: [...teams, ...users],
+ seenBy: users,
+ };
+
+ render(
+ ,
+ {
+ organization,
+ }
+ );
+
+ expect(await screen.findByText('RequestError')).toBeInTheDocument();
+
+ expect(await screen.findByText('Warning')).toBeInTheDocument();
+ expect(await screen.findByText('Unhandled')).toBeInTheDocument();
+
+ expect(await screen.findByText('First Seen in')).toBeInTheDocument();
+ expect(await screen.findByText('Last Seen in')).toBeInTheDocument();
+
+ expect(
+ await screen.findByRole('button', {name: 'Modify issue priority'})
+ ).toBeInTheDocument();
+ expect(
+ await screen.findByRole('button', {name: 'Modify issue assignee'})
+ ).toBeInTheDocument();
+
+ expect(await screen.findByText('Participants')).toBeInTheDocument();
+ expect(await screen.findByText('Viewers')).toBeInTheDocument();
+
+ expect(await screen.findByRole('button', {name: 'Resolve'})).toBeInTheDocument();
+ expect(await screen.findByRole('button', {name: 'Archive'})).toBeInTheDocument();
+ });
+ });
+});
diff --git a/static/app/views/issueDetails/streamlinedHeader.tsx b/static/app/views/issueDetails/streamlinedHeader.tsx
new file mode 100644
index 00000000000000..2c2a76700e6a62
--- /dev/null
+++ b/static/app/views/issueDetails/streamlinedHeader.tsx
@@ -0,0 +1,247 @@
+import {useMemo} from 'react';
+import styled from '@emotion/styled';
+
+import AvatarList from 'sentry/components/avatar/avatarList';
+import {Breadcrumbs} from 'sentry/components/breadcrumbs';
+import EventOrGroupTitle from 'sentry/components/eventOrGroupTitle';
+import EventMessage from 'sentry/components/events/eventMessage';
+import Divider from 'sentry/components/events/interfaces/debugMeta/debugImageDetails/candidate/information/divider';
+import {
+ AssigneeSelector,
+ useHandleAssigneeChange,
+} from 'sentry/components/group/assigneeSelector';
+import * as Layout from 'sentry/components/layouts/thirds';
+import Version from 'sentry/components/version';
+import {t} from 'sentry/locale';
+import ConfigStore from 'sentry/stores/configStore';
+import {space} from 'sentry/styles/space';
+import type {
+ Event,
+ Group,
+ Project,
+ Release,
+ TeamParticipant,
+ UserParticipant,
+} from 'sentry/types';
+import {useApiQuery} from 'sentry/utils/queryClient';
+import {useLocation} from 'sentry/utils/useLocation';
+import useOrganization from 'sentry/utils/useOrganization';
+import GroupActions from 'sentry/views/issueDetails/actions/index';
+import GroupPriority from 'sentry/views/issueDetails/groupPriority';
+import {GroupHeaderTabs} from 'sentry/views/issueDetails/header';
+import {useIssueDetailsHeader} from 'sentry/views/issueDetails/useIssueDetailsHeader';
+import type {ReprocessingStatus} from 'sentry/views/issueDetails/utils';
+
+interface GroupRelease {
+ firstRelease: Release;
+ lastRelease: Release;
+}
+
+interface GroupHeaderProps {
+ baseUrl: string;
+ group: Group;
+ groupReprocessingStatus: ReprocessingStatus;
+ project: Project;
+ event?: Event;
+}
+
+export default function StreamlinedGroupHeader({
+ group,
+ project,
+ baseUrl,
+ groupReprocessingStatus,
+ event,
+}: GroupHeaderProps) {
+ const location = useLocation();
+ const organization = useOrganization();
+ const {sort: _sort, ...query} = location.query;
+
+ const {data: groupReleaseData} = useApiQuery(
+ [`/organizations/${organization.slug}/issues/${group.id}/first-last-release/`],
+ {
+ staleTime: 30000,
+ cacheTime: 30000,
+ }
+ );
+
+ const {firstRelease, lastRelease} = groupReleaseData || {};
+
+ const {handleAssigneeChange, assigneeLoading} = useHandleAssigneeChange({
+ organization,
+ group,
+ });
+
+ const {disabledTabs, message, eventRoute, disableActions, shortIdBreadcrumb} =
+ useIssueDetailsHeader({
+ group,
+ groupReprocessingStatus,
+ baseUrl,
+ project,
+ });
+
+ const activeUser = ConfigStore.get('user');
+
+ const {userParticipants, teamParticipants, displayUsers} = useMemo(() => {
+ return {
+ userParticipants: group.participants.filter(
+ (p): p is UserParticipant => p.type === 'user'
+ ),
+ teamParticipants: group.participants.filter(
+ (p): p is TeamParticipant => p.type === 'team'
+ ),
+ displayUsers: group.seenBy.filter(user => activeUser.id !== user.id),
+ };
+ }, [group, activeUser.id]);
+
+ return (
+
+
+
+
+
+
+
+
+
+
+
+ {t('First Seen in')}
+
+
+ {t('Last Seen in')}
+
+
+
+
+
+
+
+ {t('Priority')}
+
+
+
+ {t('Assignee')}
+
+
+ {group.participants.length > 0 && (
+
+ {t('Participants')}
+
+
+
+
+ )}
+ {displayUsers.length > 0 && (
+
+ {t('Viewers')}
+
+
+ )}
+
+
+
+