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,38 +285,36 @@ 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 />
-              {/* Step 2 */}
-              <QueryAndExpressionsStep editingExistingRule={!!existing} onDataChange={checkAlertCondition} />
-              {/* Step 3-4-5 */}
-              {showDataSourceDependantStep && (
-                <>
-                  {/* Step 3 */}
-                  {isGrafanaManagedRuleByType(type) && (
-                    <GrafanaEvaluationBehavior
-                      evaluateEvery={evaluateEvery}
-                      setEvaluateEvery={setEvaluateEvery}
-                      existing={Boolean(existing)}
-                      enableProvisionedGroups={false}
-                    />
-                  )}
+          <Stack direction="column" gap={3}>
+            {/* Step 1 */}
+            <AlertRuleNameAndMetric />
+            {/* Step 2 */}
+            <QueryAndExpressionsStep editingExistingRule={!!existing} onDataChange={checkAlertCondition} />
+            {/* Step 3-4-5 */}
+            {showDataSourceDependantStep && (
+              <>
+                {/* Step 3 */}
+                {isGrafanaManagedRuleByType(type) && (
+                  <GrafanaEvaluationBehavior
+                    evaluateEvery={evaluateEvery}
+                    setEvaluateEvery={setEvaluateEvery}
+                    existing={Boolean(existing)}
+                    enableProvisionedGroups={false}
+                  />
+                )}
 
-                  {type === RuleFormType.cloudAlerting && <CloudEvaluationBehavior />}
+                {type === RuleFormType.cloudAlerting && <CloudEvaluationBehavior />}
 
-                  {type === RuleFormType.cloudRecording && <RecordingRulesNameSpaceAndGroupStep />}
+                {type === RuleFormType.cloudRecording && <RecordingRulesNameSpaceAndGroupStep />}
 
-                  {/* Step 4 & 5 */}
-                  {/* Notifications step*/}
-                  <NotificationsStep alertUid={uidFromParams} />
-                  {/* Annotations only for cloud and Grafana */}
-                  {!isRecordingRuleByType(type) && <AnnotationsStep />}
-                </>
-              )}
-            </Stack>
-          </CustomScrollbar>
+                {/* Step 4 & 5 */}
+                {/* Notifications step*/}
+                <NotificationsStep alertUid={uidFromParams} />
+                {/* Annotations only for cloud and Grafana */}
+                {!isRecordingRuleByType(type) && <AnnotationsStep />}
+              </>
+            )}
+          </Stack>
         </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,28 +85,26 @@ 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 />
-                {/* Step 2 */}
-                <QueryAndExpressionsStep editingExistingRule={existing} onDataChange={checkAlertCondition} />
-                {/* Step 3-4-5 */}
+            <Stack direction="column" gap={3}>
+              {/* Step 1 */}
+              <AlertRuleNameAndMetric />
+              {/* Step 2 */}
+              <QueryAndExpressionsStep editingExistingRule={existing} onDataChange={checkAlertCondition} />
+              {/* Step 3-4-5 */}
 
-                <GrafanaEvaluationBehavior
-                  evaluateEvery={evaluateEvery}
-                  setEvaluateEvery={setEvaluateEvery}
-                  existing={Boolean(existing)}
-                  enableProvisionedGroups={true}
-                />
+              <GrafanaEvaluationBehavior
+                evaluateEvery={evaluateEvery}
+                setEvaluateEvery={setEvaluateEvery}
+                existing={Boolean(existing)}
+                enableProvisionedGroups={true}
+              />
 
-                {/* Step 4 & 5 */}
-                {/* Notifications step*/}
-                <NotificationsStep alertUid={alertUid} />
-                {/* Annotations only for cloud and Grafana */}
-                <AnnotationsStep />
-              </Stack>
-            </CustomScrollbar>
+              {/* Step 4 & 5 */}
+              {/* Notifications step*/}
+              <NotificationsStep alertUid={alertUid} />
+              {/* Annotations only for cloud and Grafana */}
+              <AnnotationsStep />
+            </Stack>
           </div>
         </form>
         {exportData && <GrafanaRuleDesignExporter exportValues={exportData} onClose={onClose} uid={alertUid} />}