ui2: add enforce flag (#101988)

Add a flag to opt users into UI2 and the new experience

Author: JonasBa

static/app/utils/theme/useChonkPrompt.spec.tsx

@@ -42,6 +42,25 @@ describe('useChonkPrompt', () => {
     expect(result.current.showDotIndicatorPrompt).toBe(false);
   });
 
+  it('org with chonk-ui-enforce does not show prompts', () => {
+    MockApiClient.addMockResponse({
+      url: '/organizations/org-slug/prompts-activity/',
+      body: {data: {dismissed_ts: null}},
+    });
+
+    MockApiClient.addMockResponse({
+      url: '/organizations/org-slug/prompts-activity/',
+      method: 'PUT',
+    });
+
+    const {result} = renderHookWithProviders(() => useChonkPrompt(), {
+      organization: OrganizationFixture({features: ['chonk-ui-enforce']}),
+    });
+
+    expect(result.current.showBannerPrompt).toBe(false);
+    expect(result.current.showDotIndicatorPrompt).toBe(false);
+  });
+
   it('dismissing tooltip prompt shows dot indicator prompt', async () => {
     MockApiClient.addMockResponse({
       url: '/organizations/org-slug/prompts-activity/',

static/app/utils/theme/useChonkPrompt.tsx

@@ -35,20 +35,21 @@ function promptWasDismissedWithoutSnoozing(
 export function useChonkPrompt() {
   const user = useUser();
   const organization = useOrganization({allowNull: true});
-  const hasChonkUI = organization?.features.includes('chonk-ui');
+  const hasChonkUIAccess = organization?.features.includes('chonk-ui');
+  const hasChonkUIEnforce = organization?.features.includes('chonk-ui-enforce');
 
   const bannerPrompt = usePrompt({
     organization,
     feature: 'chonk_ui_banner',
     daysToSnooze: DAYS_SINCE_DISMISS,
-    options: {enabled: hasChonkUI},
+    options: {enabled: hasChonkUIAccess && !hasChonkUIEnforce},
   });
 
   const dotIndicatorPrompt = usePrompt({
     organization,
     feature: 'chonk_ui_dot_indicator',
     daysToSnooze: DAYS_SINCE_DISMISS,
-    options: {enabled: hasChonkUI},
+    options: {enabled: hasChonkUIAccess && !hasChonkUIEnforce},
   });
 
   const bannerData = bannerPrompt.data;
@@ -61,7 +62,7 @@ export function useChonkPrompt() {
   const showDotIndicatorPrompt = dotIndicatorPrompt.showPrompt;
 
   useEffect(() => {
-    if (!hasChonkUI) {
+    if (!hasChonkUIAccess || hasChonkUIEnforce) {
       return;
     }
 
@@ -91,7 +92,8 @@ export function useChonkPrompt() {
     dotIndicatorIsPromptDismissed,
     showBannerPrompt,
     showDotIndicatorPrompt,
-    hasChonkUI,
+    hasChonkUIAccess,
+    hasChonkUIEnforce,
     user?.options?.prefersChonkUI,
   ]);
 
@@ -109,9 +111,10 @@ export function useChonkPrompt() {
 
   // User is optional because we useUser hooks reads the value from ConfigStore,
   if (
+    user?.options?.prefersChonkUI ||
     (bannerPrompt.isPromptDismissed && dotIndicatorPrompt.isPromptDismissed) ||
-    !hasChonkUI ||
-    user?.options?.prefersChonkUI
+    !hasChonkUIAccess ||
+    hasChonkUIEnforce
   ) {
     return {
       showBannerPrompt: false,

static/app/utils/theme/useThemeSwitcher.spec.tsx

@@ -102,4 +102,68 @@ describe('useChonkTheme', () => {
       expect(result.current).toBe(DO_NOT_USE_darkChonkTheme);
     });
   });
+
+  describe('enforce states', () => {
+    it('returns light chonk theme if the organization has chonk-ui-enforce feature and user prefers chonk theme', () => {
+      ConfigStore.loadInitialData(
+        ConfigFixture({
+          user: UserFixture({
+            options: {...UserFixture().options, prefersChonkUI: true, theme: 'light'},
+          }),
+        })
+      );
+      OrganizationStore.onUpdate(OrganizationFixture({features: ['chonk-ui-enforce']}));
+      const {result} = renderHookWithProviders(useThemeSwitcher);
+      expect(result.current).toBe(DO_NOT_USE_lightChonkTheme);
+    });
+
+    it('returns dark chonk theme if the organization has chonk-ui-enforce feature and user prefers chonk theme', () => {
+      ConfigStore.loadInitialData(
+        ConfigFixture({
+          user: UserFixture({
+            options: {...UserFixture().options, prefersChonkUI: true, theme: 'dark'},
+          }),
+        })
+      );
+      OrganizationStore.onUpdate(OrganizationFixture({features: ['chonk-ui-enforce']}));
+      const {result} = renderHookWithProviders(useThemeSwitcher);
+      expect(result.current).toBe(DO_NOT_USE_darkChonkTheme);
+    });
+
+    it.each(['light', 'dark', 'system'] as const)(
+      'opt-out is respected for opted out users',
+      theme => {
+        ConfigStore.loadInitialData(
+          ConfigFixture({
+            user: UserFixture({
+              options: {...UserFixture().options, prefersChonkUI: false, theme},
+            }),
+          })
+        );
+        OrganizationStore.onUpdate(OrganizationFixture({features: ['chonk-ui-enforce']}));
+        const {result} = renderHookWithProviders(useThemeSwitcher);
+        expect(result.current).toBe(
+          theme === 'light' || theme === 'system' ? lightTheme : darkTheme
+        );
+      }
+    );
+
+    it.each(['light', 'dark', 'system'] as const)(
+      'opt-out is respected for opted out users',
+      theme => {
+        ConfigStore.loadInitialData(
+          ConfigFixture({
+            user: UserFixture({
+              options: {...UserFixture().options, prefersChonkUI: false, theme},
+            }),
+          })
+        );
+        OrganizationStore.onUpdate(OrganizationFixture({features: ['chonk-ui']}));
+        const {result} = renderHookWithProviders(useThemeSwitcher);
+        expect(result.current).toBe(
+          theme === 'light' || theme === 'system' ? lightTheme : darkTheme
+        );
+      }
+    );
+  });
 });

static/app/utils/theme/useThemeSwitcher.tsx

@@ -31,8 +31,12 @@ export function useThemeSwitcher(): DO_NOT_USE_ChonkTheme | Theme {
 
   let theme: Theme | DO_NOT_USE_ChonkTheme =
     config.theme === 'dark' ? darkTheme : lightTheme;
-  // Check feature access and if chonk theme is enabled
-  if (organization?.features?.includes('chonk-ui') && user?.options?.prefersChonkUI) {
+
+  if (
+    (organization?.features?.includes('chonk-ui') ||
+      organization?.features?.includes('chonk-ui-enforce')) &&
+    user?.options?.prefersChonkUI
+  ) {
     theme =
       config.theme === 'dark' ? DO_NOT_USE_darkChonkTheme : DO_NOT_USE_lightChonkTheme;
   }
@@ -70,7 +74,8 @@ export function useThemeSwitcher(): DO_NOT_USE_ChonkTheme | Theme {
   );
 
   useHotkeys(
-    organization?.features?.includes('chonk-ui')
+    organization?.features?.includes('chonk-ui') ||
+      organization?.features?.includes('chonk-ui-enforce')
       ? [themeToggleHotkey, chonkThemeToggleHotkey]
       : [themeToggleHotkey]
   );

static/app/views/nav/primary/help.tsx

@@ -147,7 +147,7 @@ export function PrimaryNavigationHelp() {
                     key: 'new-chonk-ui',
                     label: (
                       <Fragment>
-                        {t('Try our new look')} <FeatureBadge type="beta" />
+                        {t('Try our new look')} <FeatureBadge type="new" />
                       </Fragment>
                     ),
                     textValue: 'Try our new look',