feat(rollback): Display dismissable banner in sidebar (#81061)

With the rollback flag, displays a banner on the sidebar itself to draw
attention to the feature. When dismissed, it will display a dot on the
org dropdown to show the user that the rollback is still available in
the dropdown. Once that is opened, the dot will go away.

Author: malwilley

static/app/actionCreators/prompts.tsx

@@ -2,6 +2,7 @@ import {useCallback} from 'react';
 
 import type {Client} from 'sentry/api';
 import type {Organization, OrganizationSummary} from 'sentry/types/organization';
+import {defined} from 'sentry/utils';
 import {promptIsDismissed} from 'sentry/utils/promptIsDismissed';
 import type {ApiQueryKey, UseApiQueryOptions} from 'sentry/utils/queryClient';
 import {setApiQueryData, useApiQuery, useQueryClient} from 'sentry/utils/queryClient';
@@ -41,7 +42,7 @@ type PromptCheckParams = {
    * The prompt feature name
    */
   feature: string | string[];
-  organization: OrganizationSummary;
+  organization: OrganizationSummary | null;
   /**
    * The numeric project ID as a string
    */
@@ -89,10 +90,10 @@ export async function promptsCheck(
 ): Promise<PromptData> {
   const query = {
     feature: params.feature,
-    organization_id: params.organization.id,
+    organization_id: params.organization?.id,
     ...(params.projectId === undefined ? {} : {project_id: params.projectId}),
   };
-  const url = `/organizations/${params.organization.slug}/prompts-activity/`;
+  const url = `/organizations/${params.organization?.slug}/prompts-activity/`;
   const response: PromptResponse = await api.requestPromise(url, {
     query,
   });
@@ -112,22 +113,23 @@ export const makePromptsCheckQueryKey = ({
   organization,
   projectId,
 }: PromptCheckParams): ApiQueryKey => {
-  const url = `/organizations/${organization.slug}/prompts-activity/`;
+  const url = `/organizations/${organization?.slug}/prompts-activity/`;
   return [
     url,
-    {query: {feature, organization_id: organization.id, project_id: projectId}},
+    {query: {feature, organization_id: organization?.id, project_id: projectId}},
   ];
 };
 
 export function usePromptsCheck(
   {feature, organization, projectId}: PromptCheckParams,
-  options: Partial<UseApiQueryOptions<PromptResponse>> = {}
+  {enabled = true, ...options}: Partial<UseApiQueryOptions<PromptResponse>> = {}
 ) {
   return useApiQuery<PromptResponse>(
     makePromptsCheckQueryKey({feature, organization, projectId}),
     {
       staleTime: 120000,
       retry: false,
+      enabled: defined(organization) && enabled,
       ...options,
     }
   );
@@ -141,7 +143,7 @@ export function usePrompt({
   options,
 }: {
   feature: string;
-  organization: Organization;
+  organization: Organization | null;
   daysToSnooze?: number;
   options?: Partial<UseApiQueryOptions<PromptResponse>>;
   projectId?: string;
@@ -162,6 +164,9 @@ export function usePrompt({
       : undefined;
 
   const dismissPrompt = useCallback(() => {
+    if (!organization) {
+      return;
+    }
     promptsUpdate(api, {
       organization,
       projectId,
@@ -189,6 +194,9 @@ export function usePrompt({
   }, [api, feature, organization, projectId, queryClient]);
 
   const snoozePrompt = useCallback(() => {
+    if (!organization) {
+      return;
+    }
     promptsUpdate(api, {
       organization,
       projectId,
@@ -216,6 +224,9 @@ export function usePrompt({
   }, [api, feature, organization, projectId, queryClient]);
 
   const showPrompt = useCallback(() => {
+    if (!organization) {
+      return;
+    }
     promptsUpdate(api, {
       organization,
       projectId,

static/app/components/sidebar/index.spec.tsx

@@ -11,6 +11,7 @@ import {logout} from 'sentry/actionCreators/account';
 import {OnboardingContextProvider} from 'sentry/components/onboarding/onboardingContext';
 import SidebarContainer from 'sentry/components/sidebar';
 import ConfigStore from 'sentry/stores/configStore';
+import PreferenceStore from 'sentry/stores/preferencesStore';
 import type {Organization} from 'sentry/types/organization';
 import type {StatuspageIncident} from 'sentry/types/system';
 import localStorage from 'sentry/utils/localStorage';
@@ -438,4 +439,100 @@ describe('Sidebar', function () {
       expect(await screen.findByTestId('floating-accordion')).toBeInTheDocument();
     });
   });
+
+  describe('Rollback prompts', () => {
+    beforeEach(() => {
+      PreferenceStore.showSidebar();
+    });
+
+    it('should render the sidebar banner with no dismissed prompts and an existing rollback', async () => {
+      MockApiClient.addMockResponse({
+        url: `/organizations/${organization.slug}/prompts-activity/`,
+        body: {data: {}},
+      });
+
+      MockApiClient.addMockResponse({
+        url: `/organizations/${organization.slug}/user-rollback/`,
+        body: {data: {}},
+      });
+
+      renderSidebarWithFeatures(['sentry-rollback-2024']);
+
+      expect(await screen.findByText(/Your 2024 Rollback/)).toBeInTheDocument();
+    });
+
+    it('will not render anything if the user does not have a rollback', async () => {
+      MockApiClient.addMockResponse({
+        url: `/organizations/${organization.slug}/prompts-activity/`,
+        body: {data: {}},
+      });
+
+      MockApiClient.addMockResponse({
+        url: `/organizations/${organization.slug}/user-rollback/`,
+        statusCode: 404,
+      });
+
+      renderSidebarWithFeatures(['sentry-rollback-2024']);
+
+      await screen.findByText('OS');
+
+      await waitFor(() => {
+        expect(screen.queryByText(/Your 2024 Rollback/)).not.toBeInTheDocument();
+      });
+    });
+
+    it('will not render sidebar banner when collapsed', async () => {
+      MockApiClient.addMockResponse({
+        url: `/organizations/${organization.slug}/prompts-activity/`,
+        body: {data: {}},
+      });
+
+      MockApiClient.addMockResponse({
+        url: `/organizations/${organization.slug}/user-rollback/`,
+        body: {data: {}},
+      });
+
+      renderSidebarWithFeatures(['sentry-rollback-2024']);
+
+      await userEvent.click(screen.getByTestId('sidebar-collapse'));
+
+      await waitFor(() => {
+        expect(screen.queryByText(/Your 2024 Rollback/)).not.toBeInTheDocument();
+      });
+    });
+
+    it('should show dot on org dropdown after dismissing sidebar banner', async () => {
+      MockApiClient.addMockResponse({
+        url: `/organizations/${organization.slug}/prompts-activity/`,
+        body: {data: {}},
+      });
+
+      MockApiClient.addMockResponse({
+        url: `/organizations/${organization.slug}/user-rollback/`,
+        body: {data: {}},
+      });
+
+      const dismissMock = MockApiClient.addMockResponse({
+        url: `/organizations/${organization.slug}/prompts-activity/`,
+        method: 'PUT',
+        body: {},
+      });
+
+      renderSidebarWithFeatures(['sentry-rollback-2024']);
+
+      await userEvent.click(await screen.findByRole('button', {name: /Dismiss/}));
+
+      expect(await screen.findByTestId('rollback-notification-dot')).toBeInTheDocument();
+      expect(screen.queryByText(/Your 2024 Rollback/)).not.toBeInTheDocument();
+      expect(dismissMock).toHaveBeenCalled();
+
+      // Opening the org dropdown will remove the dot
+      await userEvent.click(screen.getByTestId('sidebar-dropdown'));
+      await waitFor(() => {
+        expect(screen.queryByTestId('rollback-notification-dot')).not.toBeInTheDocument();
+      });
+
+      expect(dismissMock).toHaveBeenCalledTimes(2);
+    });
+  });
 });

static/app/components/sidebar/index.tsx

@@ -19,6 +19,7 @@ import {
   ExpandedContextProvider,
 } from 'sentry/components/sidebar/expandedContextProvider';
 import {NewOnboardingStatus} from 'sentry/components/sidebar/newOnboardingStatus';
+import {DismissableRollbackBanner} from 'sentry/components/sidebar/rollback/dismissableBanner';
 import {isDone} from 'sentry/components/sidebar/utils';
 import {
   IconDashboard,
@@ -721,6 +722,13 @@ function Sidebar() {
             )}
           </DropdownSidebarSection>
 
+          {organization ? (
+            <DismissableRollbackBanner
+              organization={organization}
+              collapsed={collapsed}
+            />
+          ) : null}
+
           <PrimaryItems>
             {hasOrganization && (
               <Fragment>

static/app/components/sidebar/rollback/banner.tsx

@@ -1,36 +1,25 @@
 import styled from '@emotion/styled';
 
-import {LinkButton} from 'sentry/components/button';
+import {Button, LinkButton} from 'sentry/components/button';
 import Panel from 'sentry/components/panels/panel';
-import {IconOpen} from 'sentry/icons';
+import {IconClose, IconOpen} from 'sentry/icons';
 import {t} from 'sentry/locale';
 import {space} from 'sentry/styles/space';
-import {useApiQuery} from 'sentry/utils/queryClient';
-import useOrganization from 'sentry/utils/useOrganization';
+import type {Organization} from 'sentry/types/organization';
 
-type RollbackBannerProps = {};
-
-function useRollback() {
-  const organization = useOrganization();
-
-  return useApiQuery([`/organizations/${organization.slug}/user-rollback/`], {
-    staleTime: Infinity,
-    retry: false,
-    enabled: organization.features.includes('sentry-rollback-2024'),
-    retryOnMount: false,
-  });
-}
-
-export function RollbackBanner({}: RollbackBannerProps) {
-  const organization = useOrganization();
-  const {data} = useRollback();
-
-  if (!data) {
-    return null;
-  }
+type RollbackBannerProps = {
+  organization: Organization;
+  className?: string;
+  handleDismiss?: () => void;
+};
 
+export function RollbackBanner({
+  className,
+  handleDismiss,
+  organization,
+}: RollbackBannerProps) {
   return (
-    <StyledPanel>
+    <StyledPanel className={className}>
       <Title>🥳 {t('Your 2024 Rollback')}</Title>
       <Description>
         {t("See what you did (and didn't do) with %s this year.", organization.name)}
@@ -40,30 +29,47 @@ export function RollbackBanner({}: RollbackBannerProps) {
         href={`https://rollback.sentry.io/${organization.slug}/`}
         icon={<IconOpen />}
         priority="primary"
-        size="sm"
+        size="xs"
+        analyticsEventKey="rollback.sidebar_view_clicked"
+        analyticsEventName="Rollback: Sidebar View Clicked"
       >
         {t('View My Rollback')}
       </RollbackButton>
+      {handleDismiss ? (
+        <DismissButton
+          icon={<IconClose />}
+          aria-label={t('Dismiss')}
+          onClick={handleDismiss}
+          size="xs"
+          borderless
+          analyticsEventKey="rollback.sidebar_dismiss_clicked"
+          analyticsEventName="Rollback: Sidebar Dismiss Clicked"
+        />
+      ) : null}
     </StyledPanel>
   );
 }
 
 const StyledPanel = styled(Panel)`
+  position: relative;
   background: linear-gradient(
     269.35deg,
     ${p => p.theme.backgroundTertiary} 0.32%,
     rgba(245, 243, 247, 0) 99.69%
   );
   padding: ${space(1)};
   margin: ${space(1)};
+  color: ${p => p.theme.textColor};
 `;
 
 const Title = styled('p')`
+  font-size: ${p => p.theme.fontSizeSmall};
   font-weight: ${p => p.theme.fontWeightBold};
   margin: 0;
 `;
 
 const Description = styled('p')`
+  font-size: ${p => p.theme.fontSizeSmall};
   margin: ${space(0.5)} 0;
 `;
 
@@ -77,3 +83,15 @@ const RollbackButton = styled(LinkButton)`
     border-color: #ff45a8;
   }
 `;
+
+const DismissButton = styled(Button)`
+  position: absolute;
+  top: 0;
+  right: 0;
+
+  color: currentColor;
+
+  &:hover {
+    color: currentColor;
+  }
+`;

static/app/components/sidebar/rollback/dismissableBanner.tsx

@@ -0,0 +1,50 @@
+import styled from '@emotion/styled';
+
+import {RollbackBanner} from 'sentry/components/sidebar/rollback/banner';
+import {useRollbackPrompts} from 'sentry/components/sidebar/rollback/useRollbackPrompts';
+import ConfigStore from 'sentry/stores/configStore';
+import {useLegacyStore} from 'sentry/stores/useLegacyStore';
+import {space} from 'sentry/styles/space';
+import type {Organization} from 'sentry/types/organization';
+
+type DismissableRollbackBannerProps = {collapsed: boolean; organization: Organization};
+
+export function DismissableRollbackBanner({
+  collapsed,
+  organization,
+}: DismissableRollbackBannerProps) {
+  const config = useLegacyStore(ConfigStore);
+
+  const isDarkMode = config.theme === 'dark';
+
+  const {shouldShowSidebarBanner, onDismissSidebarBanner} = useRollbackPrompts({
+    collapsed,
+    organization,
+  });
+
+  if (!shouldShowSidebarBanner || !organization) {
+    return null;
+  }
+
+  return (
+    <Wrapper>
+      <TranslucentBackgroundBanner
+        organization={organization}
+        isDarkMode={isDarkMode}
+        handleDismiss={onDismissSidebarBanner}
+      />
+    </Wrapper>
+  );
+}
+
+const Wrapper = styled('div')`
+  padding: 0 ${space(1)};
+`;
+
+const TranslucentBackgroundBanner = styled(RollbackBanner)<{isDarkMode: boolean}>`
+  position: relative;
+  background: rgba(245, 243, 247, ${p => (p.isDarkMode ? 0.05 : 0.1)});
+  border: 1px solid rgba(245, 243, 247, ${p => (p.isDarkMode ? 0.1 : 0.15)});
+  color: ${p => (p.isDarkMode ? p.theme.textColor : '#ebe6ef')};
+  margin: ${space(0.5)} ${space(1)};
+`;