chore(issue-details): Update streamline util to better support enforcing new experience (#87336)

we previously defaulted to "false" in the backend, but that doesn't
allow us to properly show the experience to users with the "enforced"
flag. now, we will be able to see if a user has the option defined or
not, and show them the correct experience based off that.

Author: roggenkemper

static/app/types/user.tsx

@@ -53,7 +53,7 @@ export interface User extends Omit<AvatarUser, 'options'> {
     clock24Hours: boolean;
     defaultIssueEvent: 'recommended' | 'latest' | 'oldest';
     language: string;
-    prefersIssueDetailsStreamlinedUI: boolean;
+    prefersIssueDetailsStreamlinedUI: boolean | null;
     prefersSpecializedProjectOverview: {[projectId: string]: boolean};
     prefersStackedNavigation: boolean;
     quickStartDisplay: QuickStartDisplay;

static/app/views/issueDetails/groupEventAttachments/groupEventAttachments.spec.tsx

@@ -3,16 +3,19 @@ import {EventAttachmentFixture} from 'sentry-fixture/eventAttachment';
 import {GroupFixture} from 'sentry-fixture/group';
 import {ProjectFixture} from 'sentry-fixture/project';
 import {TagsFixture} from 'sentry-fixture/tags';
+import {UserFixture} from 'sentry-fixture/user';
 
 import {initializeOrg} from 'sentry-test/initializeOrg';
 import {
+  act,
   render,
   renderGlobalModal,
   screen,
   userEvent,
   within,
 } from 'sentry-test/reactTestingLibrary';
 
+import ConfigStore from 'sentry/stores/configStore';
 import GroupStore from 'sentry/stores/groupStore';
 import ModalStore from 'sentry/stores/modalStore';
 import ProjectsStore from 'sentry/stores/projectsStore';
@@ -150,6 +153,11 @@ describe('GroupEventAttachments', function () {
   });
 
   it('filters by date/query when using Streamlined UI', function () {
+    ConfigStore.init();
+    const user = UserFixture();
+    user.options.prefersIssueDetailsStreamlinedUI = true;
+    act(() => ConfigStore.set('user', user));
+
     render(<GroupEventAttachments project={project} group={group} />, {
       disableRouterMocks: true,
       initialRouterConfig: {

static/app/views/issueDetails/utils.spec.tsx

@@ -67,22 +67,38 @@ describe('useHasStreamlinedUI', () => {
     expect(prefersStreamlineButQueryParamDisabled.current).toBe(false);
   });
 
-  it('ignores preferences if enforce flag is set', () => {
+  it('ignores preferences if enforce flag is set and user has not opted out', () => {
     const enforceOrg = OrganizationFixture({
       features: ['issue-details-streamline-enforce'],
     });
     jest.mocked(useOrganization).mockReturnValue(enforceOrg);
 
     ConfigStore.init();
     const user = UserFixture();
-    user.options.prefersIssueDetailsStreamlinedUI = false;
+    user.options.prefersIssueDetailsStreamlinedUI = null;
     act(() => ConfigStore.set('user', user));
 
     jest.mocked(useLocation).mockReturnValue(LocationFixture());
     const {result} = renderHook(useHasStreamlinedUI);
     expect(result.current).toBe(true);
   });
 
+  it('respects preferences if enforce flag is set and user has opted out', () => {
+    const enforceOrg = OrganizationFixture({
+      features: ['issue-details-streamline-enforce'],
+    });
+    jest.mocked(useOrganization).mockReturnValue(enforceOrg);
+
+    ConfigStore.init();
+    const user = UserFixture();
+    user.options.prefersIssueDetailsStreamlinedUI = false;
+    act(() => ConfigStore.set('user', user));
+
+    jest.mocked(useLocation).mockReturnValue(LocationFixture());
+    const {result} = renderHook(useHasStreamlinedUI);
+    expect(result.current).toBe(false);
+  });
+
   it('ignores preferences if organization option is set to true', () => {
     jest.mocked(useLocation).mockReturnValue(LocationFixture());
 

static/app/views/issueDetails/utils.tsx

@@ -274,6 +274,7 @@ export function useHasStreamlinedUI() {
   const location = useLocation();
   const user = useUser();
   const organization = useOrganization();
+  const userStreamlinedUIOption = user?.options?.prefersIssueDetailsStreamlinedUI;
 
   // Allow query param to override all other settings to set the UI.
   if (defined(location.query.streamline)) {
@@ -286,12 +287,15 @@ export function useHasStreamlinedUI() {
   }
 
   // If the enforce flag is set for the organization, ignore user preferences and enable the UI
-  if (organization.features.includes('issue-details-streamline-enforce')) {
+  if (
+    userStreamlinedUIOption !== false &&
+    organization.features.includes('issue-details-streamline-enforce')
+  ) {
     return true;
   }
 
   // Apply the UI based on user preferences
-  return !!user?.options?.prefersIssueDetailsStreamlinedUI;
+  return userStreamlinedUIOption ?? false;
 }
 
 export function useIsSampleEvent(): boolean {