From f43762f39abad43f99b85cbcff6ca30c56f9d75f Mon Sep 17 00:00:00 2001 From: Tom Ratcliffe Date: Thu, 25 Apr 2024 11:51:02 +0100 Subject: [PATCH] Remove (most) occurrences of `HorizontalGroup` within Alerting --- .betterer.results | 19 ++++--------------- .../components/receivers/GlobalConfigForm.tsx | 6 +++--- .../components/rule-editor/PreviewRule.tsx | 6 +++--- .../alert-rule-form/AlertRuleForm.tsx | 7 +++---- .../rules/MultipleDataSourcePicker.tsx | 6 +++--- .../unified/components/rules/RulesGroup.tsx | 6 +++--- 6 files changed, 19 insertions(+), 31 deletions(-) diff --git a/.betterer.results b/.betterer.results index 92b2bf70fc3..196f50c692f 100644 --- a/.betterer.results +++ b/.betterer.results @@ -1712,9 +1712,6 @@ exports[`better eslint`] = { [0, 0, 0, "Styles should be written using objects.", "16"], [0, 0, 0, "Styles should be written using objects.", "17"] ], - "public/app/features/alerting/unified/components/receivers/GlobalConfigForm.tsx:5381": [ - [0, 0, 0, "\'HorizontalGroup\' import from \'@grafana/ui\' is restricted from being used by a pattern. Use Stack component instead.", "0"] - ], "public/app/features/alerting/unified/components/receivers/PayloadEditor.tsx:5381": [ [0, 0, 0, "Styles should be written using objects.", "0"], [0, 0, 0, "Styles should be written using objects.", "1"], @@ -1893,9 +1890,8 @@ exports[`better eslint`] = { [0, 0, 0, "Styles should be written using objects.", "1"] ], "public/app/features/alerting/unified/components/rule-editor/PreviewRule.tsx:5381": [ - [0, 0, 0, "\'HorizontalGroup\' import from \'@grafana/ui\' is restricted from being used by a pattern. Use Stack component instead.", "0"], - [0, 0, 0, "Unexpected any. Specify a different type.", "1"], - [0, 0, 0, "Styles should be written using objects.", "2"] + [0, 0, 0, "Unexpected any. Specify a different type.", "0"], + [0, 0, 0, "Styles should be written using objects.", "1"] ], "public/app/features/alerting/unified/components/rule-editor/PreviewRuleResult.tsx:5381": [ [0, 0, 0, "Styles should be written using objects.", "0"], @@ -1935,9 +1931,6 @@ exports[`better eslint`] = { [0, 0, 0, "Styles should be written using objects.", "0"], [0, 0, 0, "Styles should be written using objects.", "1"] ], - "public/app/features/alerting/unified/components/rule-editor/alert-rule-form/AlertRuleForm.tsx:5381": [ - [0, 0, 0, "\'HorizontalGroup\' import from \'@grafana/ui\' is restricted from being used by a pattern. Use Stack component instead.", "0"] - ], "public/app/features/alerting/unified/components/rule-editor/notificaton-preview/NotificationPolicyMatchers.tsx:5381": [ [0, 0, 0, "Styles should be written using objects.", "0"], [0, 0, 0, "Styles should be written using objects.", "1"] @@ -2028,9 +2021,6 @@ exports[`better eslint`] = { [0, 0, 0, "Styles should be written using objects.", "2"], [0, 0, 0, "Styles should be written using objects.", "3"] ], - "public/app/features/alerting/unified/components/rules/MultipleDataSourcePicker.tsx:5381": [ - [0, 0, 0, "\'HorizontalGroup\' import from \'@grafana/ui\' is restricted from being used by a pattern. Use Stack component instead.", "0"] - ], "public/app/features/alerting/unified/components/rules/NoRulesCTA.tsx:5381": [ [0, 0, 0, "Styles should be written using objects.", "0"] ], @@ -2092,7 +2082,7 @@ exports[`better eslint`] = { [0, 0, 0, "Styles should be written using objects.", "0"] ], "public/app/features/alerting/unified/components/rules/RulesGroup.tsx:5381": [ - [0, 0, 0, "\'HorizontalGroup\' import from \'@grafana/ui\' is restricted from being used by a pattern. Use Stack component instead.", "0"], + [0, 0, 0, "Styles should be written using objects.", "0"], [0, 0, 0, "Styles should be written using objects.", "1"], [0, 0, 0, "Styles should be written using objects.", "2"], [0, 0, 0, "Styles should be written using objects.", "3"], @@ -2103,8 +2093,7 @@ exports[`better eslint`] = { [0, 0, 0, "Styles should be written using objects.", "8"], [0, 0, 0, "Styles should be written using objects.", "9"], [0, 0, 0, "Styles should be written using objects.", "10"], - [0, 0, 0, "Styles should be written using objects.", "11"], - [0, 0, 0, "Styles should be written using objects.", "12"] + [0, 0, 0, "Styles should be written using objects.", "11"] ], "public/app/features/alerting/unified/components/rules/RulesTable.tsx:5381": [ [0, 0, 0, "Styles should be written using objects.", "0"], diff --git a/public/app/features/alerting/unified/components/receivers/GlobalConfigForm.tsx b/public/app/features/alerting/unified/components/receivers/GlobalConfigForm.tsx index e0c4975a04d..7974cf27a8a 100644 --- a/public/app/features/alerting/unified/components/receivers/GlobalConfigForm.tsx +++ b/public/app/features/alerting/unified/components/receivers/GlobalConfigForm.tsx @@ -1,7 +1,7 @@ import React from 'react'; import { useForm, FormProvider } from 'react-hook-form'; -import { Alert, Button, HorizontalGroup, LinkButton } from '@grafana/ui'; +import { Alert, Button, Stack, LinkButton } from '@grafana/ui'; import { useCleanup } from 'app/core/hooks/useCleanup'; import { AlertManagerCortexConfig } from 'app/plugins/datasource/alertmanager/types'; import { useDispatch } from 'app/types'; @@ -87,7 +87,7 @@ export const GlobalConfigForm = ({ config, alertManagerSourceName }: Props) => { /> ))}
- + {!readOnly && ( <> {loading && ( @@ -106,7 +106,7 @@ export const GlobalConfigForm = ({ config, alertManagerSourceName }: Props) => { > Cancel - +
diff --git a/public/app/features/alerting/unified/components/rule-editor/PreviewRule.tsx b/public/app/features/alerting/unified/components/rule-editor/PreviewRule.tsx index dcb979db88c..aef426bc1e6 100644 --- a/public/app/features/alerting/unified/components/rule-editor/PreviewRule.tsx +++ b/public/app/features/alerting/unified/components/rule-editor/PreviewRule.tsx @@ -6,7 +6,7 @@ import { takeWhile } from 'rxjs/operators'; import { dateTimeFormatISO, GrafanaTheme2, LoadingState } from '@grafana/data'; import { getDataSourceSrv } from '@grafana/runtime'; -import { Alert, Button, HorizontalGroup, useStyles2 } from '@grafana/ui'; +import { Alert, Button, Stack, useStyles2 } from '@grafana/ui'; import { previewAlertRule } from '../../api/preview'; import { useAlertQueriesStatus } from '../../hooks/useAlertQueriesStatus'; @@ -32,7 +32,7 @@ export function PreviewRule(): React.ReactElement | null { return (
- + {allDataSourcesAvailable && (
); diff --git a/public/app/features/alerting/unified/components/rule-editor/alert-rule-form/AlertRuleForm.tsx b/public/app/features/alerting/unified/components/rule-editor/alert-rule-form/AlertRuleForm.tsx index 6c1a1434f02..1753714d312 100644 --- a/public/app/features/alerting/unified/components/rule-editor/alert-rule-form/AlertRuleForm.tsx +++ b/public/app/features/alerting/unified/components/rule-editor/alert-rule-form/AlertRuleForm.tsx @@ -5,7 +5,7 @@ import { Link, useParams } from 'react-router-dom'; import { GrafanaTheme2 } from '@grafana/data'; import { config } from '@grafana/runtime'; -import { Button, ConfirmModal, CustomScrollbar, HorizontalGroup, Spinner, Stack, useStyles2 } from '@grafana/ui'; +import { Button, ConfirmModal, CustomScrollbar, 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'; @@ -184,7 +184,7 @@ export const AlertRuleForm = ({ existing, prefill }: Props) => { useEffect(() => setEvaluateEvery(evaluateEveryInForm), [evaluateEveryInForm]); const actionButtons = ( - + {existing && ( ) : null} - {existing && isCortexLokiOrRecordingRule(watch) && ( )} - + ); const isPaused = existing && isGrafanaRulerRule(existing.rule) && isGrafanaRulerRulePaused(existing.rule); diff --git a/public/app/features/alerting/unified/components/rules/MultipleDataSourcePicker.tsx b/public/app/features/alerting/unified/components/rules/MultipleDataSourcePicker.tsx index 119d0fc8ec0..72124081a5a 100644 --- a/public/app/features/alerting/unified/components/rules/MultipleDataSourcePicker.tsx +++ b/public/app/features/alerting/unified/components/rules/MultipleDataSourcePicker.tsx @@ -10,7 +10,7 @@ import { import { selectors } from '@grafana/e2e-selectors'; import { getDataSourceSrv, DataSourcePickerState, DataSourcePickerProps } from '@grafana/runtime'; import { ExpressionDatasourceRef } from '@grafana/runtime/src/utils/DataSourceWithBackend'; -import { ActionMeta, HorizontalGroup, PluginSignatureBadge, MultiSelect } from '@grafana/ui'; +import { ActionMeta, Stack, PluginSignatureBadge, MultiSelect } from '@grafana/ui'; import { isDataSourceManagingAlerts } from '../../utils/datasource'; @@ -168,9 +168,9 @@ export const MultipleDataSourcePicker = (props: MultipleDataSourcePickerProps) = getOptionLabel={(o) => { if (o.meta && isUnsignedPluginSignature(o.meta.signature) && o !== value) { return ( - + {o.label} - + ); } return o.label || ''; diff --git a/public/app/features/alerting/unified/components/rules/RulesGroup.tsx b/public/app/features/alerting/unified/components/rules/RulesGroup.tsx index dab832d4298..2ca8d1ca3f9 100644 --- a/public/app/features/alerting/unified/components/rules/RulesGroup.tsx +++ b/public/app/features/alerting/unified/components/rules/RulesGroup.tsx @@ -4,7 +4,7 @@ import React, { useEffect, useState } from 'react'; import { GrafanaTheme2 } from '@grafana/data'; import { selectors } from '@grafana/e2e-selectors'; -import { Badge, ConfirmModal, HorizontalGroup, Icon, Spinner, Stack, Tooltip, useStyles2 } from '@grafana/ui'; +import { Badge, ConfirmModal, Icon, Spinner, Stack, Tooltip, useStyles2 } from '@grafana/ui'; import { useDispatch } from 'app/types'; import { CombinedRuleGroup, CombinedRuleNamespace } from 'app/types/unified-alerting'; @@ -83,10 +83,10 @@ export const RulesGroup = React.memo(({ group, namespace, expandAll, viewMode }: // for grafana, link to folder views if (isDeleting) { actionIcons.push( - + deleting - + ); } else if (rulesSource === GRAFANA_RULES_SOURCE_NAME) { if (folderUID) {