AlertRules: Update design to align it with recent changes to lists and tables (#66461)

* AlertRules: Update design to be less boxy

* tag alignment fix

* Minor tweak

packages/grafana-data/src/themes/createComponents.ts

@@ -49,6 +49,9 @@ export interface ThemeComponents {
   horizontalDrawer: {
     defaultHeight: number;
   };
+  table: {
+    rowHoverBackground: string;
+  };
 }
 
 export function createComponents(colors: ThemeColors, shadows: ThemeShadows): ThemeComponents {
@@ -102,5 +105,8 @@ export function createComponents(colors: ThemeColors, shadows: ThemeShadows): Th
     horizontalDrawer: {
       defaultHeight: 400,
     },
+    table: {
+      rowHoverBackground: colors.emphasize(colors.background.primary, 0.03),
+    },
   };
 }

packages/grafana-ui/src/components/Table/styles.ts

@@ -10,7 +10,6 @@ export function useTableStyles(theme: GrafanaTheme2, cellHeightOption: TableCell
   const cellHeight = getCellHeight(theme, cellHeightOption, cellPadding);
   const rowHeight = cellHeight + 2;
   const headerHeight = 28;
-  const rowHoverBg = theme.colors.emphasize(theme.colors.background.primary, 0.03);
 
   const buildCellContainerStyle = (color?: string, background?: string, overflowOnHover?: boolean) => {
     const cellActionsOverflow: CSSObject = {
@@ -28,7 +27,7 @@ export function useTableStyles(theme: GrafanaTheme2, cellHeightOption: TableCell
       overflow: 'visible',
       width: 'auto !important',
       boxShadow: `0 0 2px ${theme.colors.primary.main}`,
-      background: background ?? rowHoverBg,
+      background: background ?? theme.components.table.rowHoverBackground,
       zIndex: 1,
     };
 
@@ -231,7 +230,7 @@ export function useTableStyles(theme: GrafanaTheme2, cellHeightOption: TableCell
       border-bottom: 1px solid ${borderColor};
 
       &:hover {
-        background-color: ${rowHoverBg};
+        background-color: ${theme.components.table.rowHoverBackground};
       }
 
       &:last-child {

public/app/features/alerting/unified/components/DynamicTable.tsx

@@ -122,7 +122,7 @@ export const DynamicTable = <T extends object>({
                 <div className={cx(styles.cell, styles.expandCell)}>
                   <IconButton
                     aria-label={`${isItemExpanded ? 'Collapse' : 'Expand'} row`}
-                    size="xl"
+                    size="lg"
                     data-testid="collapse-toggle"
                     className={styles.expandButton}
                     name={isItemExpanded ? 'angle-down' : 'angle-right'}
@@ -186,7 +186,7 @@ const getStyles = <T extends unknown>(
 
   return (theme: GrafanaTheme2) => ({
     container: css`
-      border: 1px solid ${theme.colors.border.strong};
+      border: 1px solid ${theme.colors.border.weak};
       border-radius: ${theme.shape.borderRadius()};
       color: ${theme.colors.text.secondary};
     `,
@@ -226,6 +226,7 @@ const getStyles = <T extends unknown>(
       padding: ${theme.spacing(1)};
     `,
     cell: css`
+      display: flex;
       align-items: center;
       padding: ${theme.spacing(1)};
 

public/app/features/alerting/unified/components/DynamicTableWithGuidelines.tsx

@@ -49,7 +49,7 @@ export const getStyles = (theme: GrafanaTheme2) => ({
   `,
   guideline: css`
     left: -19px;
-    border-left: 1px solid ${theme.colors.border.medium};
+    border-left: 1px solid ${theme.colors.border.weak};
     position: absolute;
 
     ${theme.breakpoints.down('md')} {
@@ -72,7 +72,7 @@ export const getStyles = (theme: GrafanaTheme2) => ({
     left: -49px !important;
   `,
   headerGuideline: css`
-    top: -25px;
+    top: -17px;
     bottom: 0;
   `,
 });

public/app/features/alerting/unified/components/rules/GrafanaRules.tsx

@@ -81,6 +81,7 @@ const getStyles = (theme: GrafanaTheme2) => ({
   sectionHeader: css`
     display: flex;
     justify-content: space-between;
+    margin-bottom: ${theme.spacing(1)};
   `,
   wrapper: css`
     margin-bottom: ${theme.spacing(4)};

public/app/features/alerting/unified/components/rules/RuleState.tsx

@@ -2,7 +2,8 @@ import { css } from '@emotion/css';
 import React, { useMemo } from 'react';
 
 import { GrafanaTheme2, intervalToAbbreviatedDurationString } from '@grafana/data';
-import { HorizontalGroup, Spinner, useStyles2 } from '@grafana/ui';
+import { Stack } from '@grafana/experimental';
+import { Spinner, useStyles2 } from '@grafana/ui';
 import { CombinedRule } from 'app/types/unified-alerting';
 import { PromAlertingRuleState } from 'app/types/unified-alerting-dto';
 
@@ -53,25 +54,24 @@ export const RuleState = ({ rule, isDeleting, isCreating, isPaused }: Props) =>
 
   if (isDeleting) {
     return (
-      <HorizontalGroup align="flex-start">
+      <Stack gap={1}>
         <Spinner />
-        deleting
-      </HorizontalGroup>
+        Deleting
+      </Stack>
     );
   } else if (isCreating) {
     return (
-      <HorizontalGroup align="flex-start">
-        {' '}
+      <Stack gap={1}>
         <Spinner />
-        creating
-      </HorizontalGroup>
+        Creating
+      </Stack>
     );
   } else if (promRule && isAlertingRule(promRule)) {
     return (
-      <HorizontalGroup align="flex-start">
+      <Stack gap={1}>
         <AlertStateTag state={promRule.state} isPaused={isPaused} />
         {forTime}
-      </HorizontalGroup>
+      </Stack>
     );
   } else if (promRule && isRecordingRule(promRule)) {
     return <>Recording rule</>;

public/app/features/alerting/unified/components/rules/RulesGroup.tsx

@@ -209,9 +209,12 @@ export const RulesGroup = React.memo(({ group, namespace, expandAll, viewMode }:
             />
           </Tooltip>
         )}
-        <h6 className={styles.heading}>
-          {isFederated && <Badge color="purple" text="Federated" />} {groupName}
-        </h6>
+        {
+          // eslint-disable-next-line
+          <div className={styles.groupName} onClick={() => setIsCollapsed(!isCollapsed)}>
+            {isFederated && <Badge color="purple" text="Federated" />} {groupName}
+          </div>
+        }
         <div className={styles.spacer} />
         <div className={styles.headerStats}>
           <RuleStats group={group} />
@@ -275,68 +278,70 @@ export const RulesGroup = React.memo(({ group, namespace, expandAll, viewMode }:
 
 RulesGroup.displayName = 'RulesGroup';
 
-export const getStyles = (theme: GrafanaTheme2) => ({
-  wrapper: css`
-    & + & {
-      margin-top: ${theme.spacing(2)};
-    }
-  `,
-  header: css`
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-    padding: ${theme.spacing(1)} ${theme.spacing(1)} ${theme.spacing(1)} 0;
-    background-color: ${theme.colors.background.secondary};
-    flex-wrap: wrap;
-  `,
-  headerStats: css`
-    span {
-      vertical-align: middle;
-    }
-
-    ${theme.breakpoints.down('sm')} {
-      order: 2;
-      width: 100%;
-      padding-left: ${theme.spacing(1)};
-    }
-  `,
-  heading: css`
-    margin-left: ${theme.spacing(1)};
-    margin-bottom: 0;
-  `,
-  spacer: css`
-    flex: 1;
-  `,
-  collapseToggle: css`
-    background: none;
-    border: none;
-    margin-top: -${theme.spacing(1)};
-    margin-bottom: -${theme.spacing(1)};
+export const getStyles = (theme: GrafanaTheme2) => {
+  return {
+    wrapper: css``,
+    header: css`
+      display: flex;
+      flex-direction: row;
+      align-items: center;
+      padding: ${theme.spacing(1)} ${theme.spacing(1)} ${theme.spacing(1)} 0;
+      flex-wrap: wrap;
+      border-bottom: 1px solid ${theme.colors.border.weak};
+      &:hover {
+        background-color: ${theme.components.table.rowHoverBackground};
+      }
+    `,
+    headerStats: css`
+      span {
+        vertical-align: middle;
+      }
 
-    svg {
+      ${theme.breakpoints.down('sm')} {
+        order: 2;
+        width: 100%;
+        padding-left: ${theme.spacing(1)};
+      }
+    `,
+    groupName: css`
+      margin-left: ${theme.spacing(1)};
       margin-bottom: 0;
-    }
-  `,
-  dataSourceIcon: css`
-    width: ${theme.spacing(2)};
-    height: ${theme.spacing(2)};
-    margin-left: ${theme.spacing(2)};
-  `,
-  dataSourceOrigin: css`
-    margin-right: 1em;
-    color: ${theme.colors.text.disabled};
-  `,
-  actionsSeparator: css`
-    margin: 0 ${theme.spacing(2)};
-  `,
-  actionIcons: css`
-    width: 80px;
-    align-items: center;
-  `,
-  rulesTable: css`
-    margin-top: ${theme.spacing(3)};
-  `,
-  rotate90: css`
-    transform: rotate(90deg);
-  `,
-});
+      cursor: pointer;
+    `,
+    spacer: css`
+      flex: 1;
+    `,
+    collapseToggle: css`
+      background: none;
+      border: none;
+      margin-top: -${theme.spacing(1)};
+      margin-bottom: -${theme.spacing(1)};
+
+      svg {
+        margin-bottom: 0;
+      }
+    `,
+    dataSourceIcon: css`
+      width: ${theme.spacing(2)};
+      height: ${theme.spacing(2)};
+      margin-left: ${theme.spacing(2)};
+    `,
+    dataSourceOrigin: css`
+      margin-right: 1em;
+      color: ${theme.colors.text.disabled};
+    `,
+    actionsSeparator: css`
+      margin: 0 ${theme.spacing(2)};
+    `,
+    actionIcons: css`
+      width: 80px;
+      align-items: center;
+    `,
+    rulesTable: css`
+      margin: ${theme.spacing(2, 0)};
+    `,
+    rotate90: css`
+      transform: rotate(90deg);
+    `,
+  };
+};

public/app/features/alerting/unified/components/rules/RulesTable.tsx

@@ -106,9 +106,9 @@ export const getStyles = (theme: GrafanaTheme2) => ({
     padding-top: ${theme.spacing(1)};
     padding-bottom: ${theme.spacing(0.25)};
     justify-content: center;
-    border-left: 1px solid ${theme.colors.border.strong};
-    border-right: 1px solid ${theme.colors.border.strong};
-    border-bottom: 1px solid ${theme.colors.border.strong};
+    border-left: 1px solid ${theme.colors.border.medium};
+    border-right: 1px solid ${theme.colors.border.medium};
+    border-bottom: 1px solid ${theme.colors.border.medium};
   `,
 });