Fix spacing in Notification Templates tab (legacy mode)
Add proper top margin to TabContent in legacy mode to match the spacing pattern used in Notification Policies page. Changes: - Import css from @emotion/css and useStyles2 - Import GrafanaTheme2 for theme typing - Create getStyles function with tabContent margin - Apply className to TabContent in legacy mode rendering - Matches the pattern used in NotificationPoliciesPage.tsx This fixes the visual issue where the "Create notification templates" text was directly touching the tabs above with no spacing in legacy navigation mode. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
This commit is contained in:
co-authored by
Claude Sonnet 4.5
parent
dee9bc8fb9
commit
774551589b
@@ -1,5 +1,7 @@
|
||||
import { css } from '@emotion/css';
|
||||
import { useMemo } from 'react';
|
||||
|
||||
import { GrafanaTheme2 } from '@grafana/data';
|
||||
import { Trans, t } from '@grafana/i18n';
|
||||
import {
|
||||
Alert,
|
||||
@@ -13,6 +15,7 @@ import {
|
||||
TabContent,
|
||||
TabsBar,
|
||||
Text,
|
||||
useStyles2,
|
||||
} from '@grafana/ui';
|
||||
import { contextSrv } from 'app/core/services/context_srv';
|
||||
import { shouldUseK8sApi } from 'app/features/alerting/unified/utils/k8s/utils';
|
||||
@@ -204,6 +207,7 @@ const useTabQueryParam = (defaultTab: ActiveTab) => {
|
||||
export const ContactPointsPageContents = () => {
|
||||
const { selectedAlertmanager } = useAlertmanager();
|
||||
const useV2Nav = shouldUseAlertingNavigationV2();
|
||||
const styles = useStyles2(getStyles);
|
||||
|
||||
// All hooks must be called unconditionally before any early returns
|
||||
const [, canViewContactPoints] = useAlertmanagerAbility(AlertmanagerAction.ViewContactPoint);
|
||||
@@ -262,7 +266,7 @@ export const ContactPointsPageContents = () => {
|
||||
/>
|
||||
)}
|
||||
</TabsBar>
|
||||
<TabContent>
|
||||
<TabContent className={styles.tabContent}>
|
||||
<Stack direction="column">
|
||||
{showingContactPoints && <ContactPointsTab />}
|
||||
{showNotificationTemplates && <NotificationTemplatesTab />}
|
||||
@@ -299,6 +303,12 @@ const ContactPointsList = ({ contactPoints, search, pageSize = DEFAULT_PAGE_SIZE
|
||||
);
|
||||
};
|
||||
|
||||
const getStyles = (theme: GrafanaTheme2) => ({
|
||||
tabContent: css({
|
||||
marginTop: theme.spacing(2),
|
||||
}),
|
||||
});
|
||||
|
||||
function ContactPointsPage() {
|
||||
const { navId, pageNav } = useNotificationConfigNav();
|
||||
return (
|
||||
|
||||
Reference in New Issue
Block a user