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

remove/replace CustomScrollbar in alerting code
This commit is contained in:
Ashley Harrison 2024-11-08 16:45:30 +00:00 committed by GitHub
parent 95692b3d68
commit 4a362d41a6
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
4 changed files with 51 additions and 55 deletions

View File

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

View File

@ -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>
);
}

View File

@ -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 ? (

View File

@ -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} />}