Alerting: Swap templates and contact points places (#61808)

Alerting: swap templates and contact points places

public/app/features/alerting/unified/components/receivers/ReceiversAndTemplatesView.tsx

@@ -1,8 +1,7 @@
-import { css } from '@emotion/css';
 import React, { FC } from 'react';
 
-import { GrafanaTheme2 } from '@grafana/data';
-import { Alert, LinkButton, useStyles2 } from '@grafana/ui';
+import { Stack } from '@grafana/experimental';
+import { Alert, LinkButton } from '@grafana/ui';
 import { AlertManagerCortexConfig } from 'app/plugins/datasource/alertmanager/types';
 import { AccessControlAction } from 'app/types';
 
@@ -20,15 +19,15 @@ interface Props {
 
 export const ReceiversAndTemplatesView: FC<Props> = ({ config, alertManagerName }) => {
   const isCloud = alertManagerName !== GRAFANA_RULES_SOURCE_NAME;
-  const styles = useStyles2(getStyles);
   const isVanillaAM = isVanillaPrometheusAlertManagerDataSource(alertManagerName);
+
   return (
-    <>
-      {!isVanillaAM && <TemplatesTable config={config} alertManagerName={alertManagerName} />}
+    <Stack direction="column" gap={4}>
       <ReceiversTable config={config} alertManagerName={alertManagerName} />
+      {!isVanillaAM && <TemplatesTable config={config} alertManagerName={alertManagerName} />}
       {isCloud && (
         <Authorize actions={[AccessControlAction.AlertingNotificationsExternalWrite]}>
-          <Alert className={styles.section} severity="info" title="Global config for contact points">
+          <Alert severity="info" title="Global config for contact points">
             <p>
               For each external Alertmanager you can define global settings, like server addresses, usernames and
               password, for all the supported contact points.
@@ -39,12 +38,6 @@ export const ReceiversAndTemplatesView: FC<Props> = ({ config, alertManagerName
           </Alert>
         </Authorize>
       )}
-    </>
+    </Stack>
   );
 };
-
-const getStyles = (theme: GrafanaTheme2) => ({
-  section: css`
-    margin-top: ${theme.spacing(4)};
-  `,
-});

public/app/features/alerting/unified/components/receivers/ReceiversSection.tsx

@@ -3,6 +3,7 @@ import React from 'react';
 import { Link } from 'react-router-dom';
 
 import { GrafanaTheme2 } from '@grafana/data';
+import { Stack } from '@grafana/experimental';
 import { Button, useStyles2 } from '@grafana/ui';
 
 interface Props {
@@ -25,11 +26,11 @@ export const ReceiversSection = ({
 }: React.PropsWithChildren<Props>) => {
   const styles = useStyles2(getStyles);
   return (
-    <>
+    <Stack direction="column" gap={2}>
       <div className={cx(styles.heading, className)}>
         <div>
           <h4>{title}</h4>
-          <p className={styles.description}>{description}</p>
+          <div className={styles.description}>{description}</div>
         </div>
         {showButton && (
           <Link to={addButtonTo}>
@@ -40,7 +41,7 @@ export const ReceiversSection = ({
         )}
       </div>
       {children}
-    </>
+    </Stack>
   );
 };
 
@@ -48,6 +49,7 @@ const getStyles = (theme: GrafanaTheme2) => ({
   heading: css`
     display: flex;
     justify-content: space-between;
+    align-items: flex-end;
   `,
   description: css`
     color: ${theme.colors.text.secondary};

public/app/features/alerting/unified/components/receivers/ReceiversTable.tsx

@@ -1,8 +1,7 @@
-import { css } from '@emotion/css';
 import pluralize from 'pluralize';
 import React, { FC, useMemo, useState } from 'react';
 
-import { GrafanaTheme2, dateTime, dateTimeFormat } from '@grafana/data';
+import { dateTime, dateTimeFormat } from '@grafana/data';
 import { Stack } from '@grafana/experimental';
 import { Button, ConfirmModal, Modal, useStyles2, Badge, Icon } from '@grafana/ui';
 import { contextSrv } from 'app/core/services/context_srv';
@@ -241,7 +240,6 @@ interface Props {
 
 export const ReceiversTable: FC<Props> = ({ config, alertManagerName }) => {
   const dispatch = useDispatch();
-  const styles = useStyles2(getStyles);
   const isVanillaAM = isVanillaPrometheusAlertManagerDataSource(alertManagerName);
   const permissions = getNotificationsPermissions(alertManagerName);
   const grafanaNotifiers = useUnifiedAlertingSelector((state) => state.grafanaNotifiers);
@@ -299,7 +297,6 @@ export const ReceiversTable: FC<Props> = ({ config, alertManagerName }) => {
 
   return (
     <ReceiversSection
-      className={styles.section}
       title="Contact points"
       description="Define where the notifications will be sent to, for example email or Slack."
       showButton={!isVanillaAM && contextSrv.hasPermission(permissions.create)}
@@ -436,23 +433,3 @@ function useGetColumns(
     },
   ];
 }
-
-const getStyles = (theme: GrafanaTheme2) => ({
-  section: css`
-    margin-top: ${theme.spacing(4)};
-  `,
-  warning: css`
-    color: ${theme.colors.warning.text};
-  `,
-  countMessage: css``,
-  onCallBadgeWrapper: css`
-    text-align: left;
-    height: 22px;
-    display: inline-flex;
-    padding: 1px 4px;
-    border-radius: 3px;
-    border: 1px solid rgba(245, 95, 62, 1);
-    color: rgba(245, 95, 62, 1);
-    font-weight: ${theme.typography.fontWeightRegular};
-  `,
-});