chore(metrics): removed alerts and widgets info (#78607)

Author: obostjancic

static/app/views/alerts/list/rules/alertRulesList.tsx

@@ -32,6 +32,7 @@ import {useLocation} from 'sentry/utils/useLocation';
 import useOrganization from 'sentry/utils/useOrganization';
 import useRouter from 'sentry/utils/useRouter';
 
+import {MetricsRemovedAlertsWidgetsAlert} from '../../../metrics/metricsRemovedAlertsWidgetsAlert';
 import FilterBar from '../../filterBar';
 import type {CombinedAlerts} from '../../types';
 import {AlertRuleType, CombinedAlertType} from '../../types';
@@ -188,6 +189,7 @@ function AlertRulesList() {
         <AlertHeader router={router} activeTab="rules" />
         <Layout.Body>
           <Layout.Main fullWidth>
+            <MetricsRemovedAlertsWidgetsAlert organization={organization} />
             <DataConsentBanner source="alerts" />
             <FilterBar
               location={location}

static/app/views/dashboards/manage/index.tsx

@@ -33,6 +33,7 @@ import withApi from 'sentry/utils/withApi';
 import withOrganization from 'sentry/utils/withOrganization';
 import {DashboardImportButton} from 'sentry/views/dashboards/manage/dashboardImport';
 import DeprecatedAsyncView from 'sentry/views/deprecatedAsyncView';
+import {MetricsRemovedAlertsWidgetsAlert} from 'sentry/views/metrics/metricsRemovedAlertsWidgetsAlert';
 
 import {getDashboardTemplates} from '../data';
 import {assignDefaultLayout, getInitialColumnDepths} from '../layoutUtils';
@@ -353,6 +354,8 @@ class ManageDashboards extends DeprecatedAsyncView<Props, State> {
               </Layout.Header>
               <Layout.Body>
                 <Layout.Main fullWidth>
+                  <MetricsRemovedAlertsWidgetsAlert organization={organization} />
+
                   {showTemplates && this.renderTemplates()}
                   {this.renderActions()}
                   {this.renderDashboards()}

static/app/views/metrics/metricsRemovedAlertsWidgetsAlert.tsx

@@ -0,0 +1,68 @@
+import styled from '@emotion/styled';
+
+import Alert, {type AlertProps} from 'sentry/components/alert';
+import {Button} from 'sentry/components/button';
+import ExternalLink from 'sentry/components/links/externalLink';
+import {IconClose} from 'sentry/icons';
+import {t, tct} from 'sentry/locale';
+import {space} from 'sentry/styles/space';
+import type {Organization} from 'sentry/types/organization';
+import useDismissAlert from 'sentry/utils/useDismissAlert';
+
+const LOCAL_STORAGE_KEY = 'metrics-removed-alerts-wizards-info-dismissed';
+
+export function MetricsRemovedAlertsWidgetsAlert({
+  style,
+  organization,
+}: Pick<AlertProps, 'style'> & {organization: Organization}) {
+  const {dismiss, isDismissed} = useDismissAlert({
+    key: LOCAL_STORAGE_KEY,
+    expirationDays: 365,
+  });
+  const hasDeletedAlertsOrWidgets = organization.features.includes(
+    'organizations:custom-metrics-alerts-widgets-removal-info'
+  );
+
+  if (isDismissed || !hasDeletedAlertsOrWidgets) {
+    return null;
+  }
+
+  return (
+    <Alert type="info" showIcon style={style}>
+      <AlertContent>
+        <div>
+          {tct(
+            'The Metrics beta program has ended on October 7th and all alerts/dashboard widgets using custom metrics have been removed. For more details, please [link:read the FAQs]. Thank you again for participating.',
+            {
+              link: (
+                <ExternalLink href="https://sentry.zendesk.com/hc/en-us/articles/26369339769883-Metrics-Beta-Coming-to-an-End" />
+              ),
+            }
+          )}
+        </div>
+        <DismissButton
+          priority="link"
+          icon={<IconClose />}
+          onClick={dismiss}
+          aria-label={t('Dismiss Alert')}
+          title={t('Dismiss Alert')}
+        />
+      </AlertContent>
+    </Alert>
+  );
+}
+
+const DismissButton = styled(Button)`
+  color: ${p => p.theme.alert.warning.color};
+  pointer-events: all;
+  &:hover {
+    opacity: 0.5;
+  }
+`;
+
+const AlertContent = styled('div')`
+  display: grid;
+  grid-template-columns: 1fr max-content;
+  gap: ${space(1)};
+  align-items: center;
+`;