Chore: Remove/replace `CustomScrollbar` in alerting (#96102)

remove/replace CustomScrollbar in alerting code

public/app/features/alerting/unified/PanelAlertTabContent.test.tsx

@@ -181,7 +181,6 @@ const server = setupMswServer();
 
 describe('PanelAlertTabContent', () => {
   beforeEach(() => {
-    jest.resetAllMocks();
     grantUserPermissions([
       AccessControlAction.AlertingRuleRead,
       AccessControlAction.AlertingRuleUpdate,

public/app/features/alerting/unified/PanelAlertTabContent.tsx

@@ -2,7 +2,8 @@ import { css } from '@emotion/css';
 
 import { GrafanaTheme2 } from '@grafana/data';
 import { selectors } from '@grafana/e2e-selectors';
-import { Alert, CustomScrollbar, LoadingPlaceholder, useStyles2 } from '@grafana/ui';
+import { Alert, LoadingPlaceholder, useStyles2 } from '@grafana/ui';
+import { ScrollContainer } from '@grafana/ui/src/unstable';
 import { contextSrv } from 'app/core/services/context_srv';
 import { DashboardModel, PanelModel } from 'app/features/dashboard/state';
 
@@ -46,7 +47,7 @@ export const PanelAlertTabContent = ({ dashboard, panel }: Props) => {
 
   if (rules.length) {
     return (
-      <CustomScrollbar autoHeightMin="100%">
+      <ScrollContainer minHeight="100%">
         <div className={styles.innerWrapper}>
           {alert}
           <RulesTable rules={rules} />
@@ -54,7 +55,7 @@ export const PanelAlertTabContent = ({ dashboard, panel }: Props) => {
             <NewRuleFromPanelButton className={styles.newButton} panel={panel} dashboard={dashboard} />
           )}
         </div>
-      </CustomScrollbar>
+      </ScrollContainer>
     );
   }
 

public/app/features/alerting/unified/components/rule-editor/alert-rule-form/AlertRuleForm.tsx

@@ -5,7 +5,7 @@ import { useParams } from 'react-router-dom-v5-compat';
 
 import { GrafanaTheme2 } from '@grafana/data';
 import { config, locationService } from '@grafana/runtime';
-import { Button, ConfirmModal, CustomScrollbar, Spinner, Stack, useStyles2 } from '@grafana/ui';
+import { Button, ConfirmModal, Spinner, Stack, useStyles2 } from '@grafana/ui';
 import { AppChromeUpdate } from 'app/core/components/AppChrome/AppChromeUpdate';
 import { useAppNotification } from 'app/core/copy/appNotification';
 import { contextSrv } from 'app/core/core';
@@ -285,7 +285,6 @@ export const AlertRuleForm = ({ existing, prefill }: Props) => {
       <form onSubmit={(e) => e.preventDefault()} className={styles.form}>
         <div className={styles.contentOuter}>
           {isPaused && <InfoPausedRule />}
-          <CustomScrollbar autoHeightMin="100%" hideHorizontalTrack={true}>
           <Stack direction="column" gap={3}>
             {/* Step 1 */}
             <AlertRuleNameAndMetric />
@@ -316,7 +315,6 @@ export const AlertRuleForm = ({ existing, prefill }: Props) => {
               </>
             )}
           </Stack>
-          </CustomScrollbar>
         </div>
       </form>
       {showDeleteModal ? (

public/app/features/alerting/unified/components/rule-editor/alert-rule-form/ModifyExportRuleForm.tsx

@@ -2,7 +2,7 @@ import { memo, useCallback, useEffect, useMemo, useState } from 'react';
 import { FormProvider, useForm } from 'react-hook-form';
 import { useAsync } from 'react-use';
 
-import { Button, CustomScrollbar, LinkButton, LoadingPlaceholder, Stack } from '@grafana/ui';
+import { Button, LinkButton, LoadingPlaceholder, Stack } from '@grafana/ui';
 import { useAppNotification } from 'app/core/copy/appNotification';
 import { useQueryParams } from 'app/core/hooks/useQueryParams';
 
@@ -85,7 +85,6 @@ export function ModifyExportRuleForm({ ruleForm, alertUid }: ModifyExportRuleFor
         <AppChromeUpdate actions={actionButtons} />
         <form onSubmit={(e) => e.preventDefault()}>
           <div>
-            <CustomScrollbar autoHeightMin="100%" hideHorizontalTrack={true}>
             <Stack direction="column" gap={3}>
               {/* Step 1 */}
               <AlertRuleNameAndMetric />
@@ -106,7 +105,6 @@ export function ModifyExportRuleForm({ ruleForm, alertUid }: ModifyExportRuleFor
               {/* Annotations only for cloud and Grafana */}
               <AnnotationsStep />
             </Stack>
-            </CustomScrollbar>
           </div>
         </form>
         {exportData && <GrafanaRuleDesignExporter exportValues={exportData} onClose={onClose} uid={alertUid} />}