feat(replay): Allow jetpack compose warning to be dismissable (#94232)

This allows the jetpack compose alert to be dismissable since the
warning notice is so broad reaching, it should allow affect a pretty
small amount of our android SDK users.

Author: billyvg

static/app/components/replays/replayView.tsx

@@ -14,13 +14,14 @@ import {ReplaySidebarToggleButton} from 'sentry/components/replays/replaySidebar
 import TextCopyInput from 'sentry/components/textCopyInput';
 import {tct} from 'sentry/locale';
 import {space} from 'sentry/styles/space';
-import {MIN_JETPACK_COMPOSE_VIEW_HIERARCHY_PII_FIX} from 'sentry/utils/replays/sdkVersions';
-import {semverCompare} from 'sentry/utils/versions/semverCompare';
 import useIsFullscreen from 'sentry/utils/window/useIsFullscreen';
 import Breadcrumbs from 'sentry/views/replays/detail/breadcrumbs';
 import BrowserOSIcons from 'sentry/views/replays/detail/browserOSIcons';
 import FluidHeight from 'sentry/views/replays/detail/layout/fluidHeight';
-import {JetpackComposePiiNotice} from 'sentry/views/replays/jetpackComposePiiNotice';
+import {
+  JetpackComposePiiNotice,
+  useNeedsJetpackComposePiiNotice,
+} from 'sentry/views/replays/jetpackComposePiiNotice';
 
 import {CanvasSupportNotice} from './canvasSupportNotice';
 
@@ -34,6 +35,9 @@ function ReplayView({toggleFullscreen, isLoading}: Props) {
   const [isSidebarOpen, setIsSidebarOpen] = useState(true);
   const {isFetching, replay} = useReplayContext();
   const isVideoReplay = replay?.isVideoReplay();
+  const needsJetpackComposePiiWarning = useNeedsJetpackComposePiiNotice({
+    replays: replay ? [replay.getReplay()] : [],
+  });
 
   return (
     <Fragment>
@@ -85,12 +89,7 @@ function ReplayView({toggleFullscreen, isLoading}: Props) {
             <ReplayProcessingError processingErrors={replay.processingErrors()} />
           ) : (
             <FluidHeight>
-              {isVideoReplay &&
-              replay?.getReplay()?.sdk.name === 'sentry.java.android' &&
-              semverCompare(
-                replay?.getReplay()?.sdk.version || '',
-                MIN_JETPACK_COMPOSE_VIEW_HIERARCHY_PII_FIX.minVersion
-              ) === -1 ? (
+              {isVideoReplay && needsJetpackComposePiiWarning ? (
                 <JetpackComposePiiNotice />
               ) : null}
               <CanvasSupportNotice />

static/app/views/replays/jetpackComposePiiNotice.tsx

@@ -1,14 +1,36 @@
 import {Alert} from 'sentry/components/core/alert';
+import {Button} from 'sentry/components/core/button';
 import ExternalLink from 'sentry/components/links/externalLink';
-import {tct} from 'sentry/locale';
+import {IconClose} from 'sentry/icons';
+import {t, tct} from 'sentry/locale';
 import {MIN_JETPACK_COMPOSE_VIEW_HIERARCHY_PII_FIX} from 'sentry/utils/replays/sdkVersions';
+import useDismissAlert from 'sentry/utils/useDismissAlert';
 import {semverCompare} from 'sentry/utils/versions/semverCompare';
 import type {ReplayListRecord} from 'sentry/views/replays/types';
 
 export function JetpackComposePiiNotice() {
+  const LOCAL_STORAGE_KEY = 'jetpack-compose-pii-warning-dismissed';
+  const {dismiss, isDismissed} = useDismissAlert({key: LOCAL_STORAGE_KEY});
+
+  if (isDismissed) {
+    return null;
+  }
+
   return (
     <Alert.Container>
-      <Alert type="error" showIcon>
+      <Alert
+        type="error"
+        showIcon
+        trailingItems={
+          <Button
+            aria-label={t('Dismiss')}
+            icon={<IconClose />}
+            onClick={dismiss}
+            size="zero"
+            borderless
+          />
+        }
+      >
         {tct(
           'There is a [advisory:known PII/masking issue] with [jetpack:Jetpack Compose versions 1.8 and above]. [link:Update your Sentry SDK to version 8.14.0 or later] to ensure replays are properly masked.',
           {

static/app/views/replays/list/replaysList.tsx

@@ -90,7 +90,9 @@ function ReplaysList() {
         ReplayColumn.ACTIVITY,
       ];
 
-  const needsJetpackComposePiiWarning = useNeedsJetpackComposePiiNotice({replays});
+  const needsJetpackComposePiiWarning = useNeedsJetpackComposePiiNotice({
+    replays,
+  });
 
   return (
     <Fragment>