AlertingNG: Update UX to use new PageToolbar component (#30680)

* AlertingNG: Update UX to use new PageToolbar component

* Removed unused imports

public/app/core/components/PageToolbar/PageToolbar.tsx

@@ -1,51 +0,0 @@
-import React, { FC, ReactNode } from 'react';
-import { css } from 'emotion';
-import { GrafanaTheme } from '@grafana/data';
-import { HorizontalGroup, stylesFactory, useTheme } from '@grafana/ui';
-
-interface Props {
-  title: string;
-  titlePrefix?: ReactNode;
-  actions: ReactNode[];
-  titlePadding?: 'sm' | 'lg';
-}
-
-export const PageToolbar: FC<Props> = ({ actions, title, titlePrefix, titlePadding = 'lg' }) => {
-  const styles = getStyles(useTheme(), titlePadding);
-  return (
-    <div className={styles.toolbarWrapper}>
-      <HorizontalGroup justify="space-between" align="center">
-        <div className={styles.toolbarLeft}>
-          <HorizontalGroup spacing="none">
-            {titlePrefix}
-            <span className={styles.toolbarTitle}>{title}</span>
-          </HorizontalGroup>
-        </div>
-        <HorizontalGroup spacing="sm" align="center">
-          {actions}
-        </HorizontalGroup>
-      </HorizontalGroup>
-    </div>
-  );
-};
-
-const getStyles = stylesFactory((theme: GrafanaTheme, padding: string) => {
-  const titlePadding = padding === 'sm' ? theme.spacing.sm : theme.spacing.md;
-
-  return {
-    toolbarWrapper: css`
-      display: flex;
-      padding: ${theme.spacing.sm};
-      background: ${theme.colors.panelBg};
-      justify-content: space-between;
-      border-bottom: 1px solid ${theme.colors.panelBorder};
-    `,
-    toolbarLeft: css`
-      padding-left: ${theme.spacing.sm};
-    `,
-    toolbarTitle: css`
-      font-size: ${theme.typography.size.lg};
-      padding-left: ${titlePadding};
-    `,
-  };
-});

public/app/features/alerting/NextGenAlertingPage.tsx

@@ -3,8 +3,7 @@ import { hot } from 'react-hot-loader';
 import { MapDispatchToProps, MapStateToProps } from 'react-redux';
 import { css } from 'emotion';
 import { GrafanaTheme, SelectableValue } from '@grafana/data';
-import { Button, Icon, stylesFactory } from '@grafana/ui';
+import { PageToolbar, stylesFactory, ToolbarButton } from '@grafana/ui';
-import { PageToolbar } from 'app/core/components/PageToolbar/PageToolbar';
 import { SplitPaneWrapper } from 'app/core/components/SplitPaneWrapper/SplitPaneWrapper';
 import { connectWithCleanUp } from 'app/core/components/connectWithCleanUp';
 import AlertingQueryEditor from './components/AlertingQueryEditor';
@@ -83,15 +82,15 @@ class NextGenAlertingPage extends PureComponent<Props, State> {
 
   renderToolbarActions() {
     return [
-      <Button variant="destructive" key="discard" onClick={this.onDiscard}>
+      <ToolbarButton variant="destructive" key="discard" onClick={this.onDiscard}>
         Discard
-      </Button>,
+      </ToolbarButton>,
-      <Button variant="secondary" key="test" onClick={this.onTest}>
+      <ToolbarButton key="test" onClick={this.onTest}>
         Test
-      </Button>,
+      </ToolbarButton>,
-      <Button variant="primary" key="save" onClick={this.onSaveAlert}>
+      <ToolbarButton variant="primary" key="save" onClick={this.onSaveAlert}>
         Save
-      </Button>,
+      </ToolbarButton>,
     ];
   }
 
@@ -108,12 +107,9 @@ class NextGenAlertingPage extends PureComponent<Props, State> {
 
     return (
       <div className={styles.wrapper}>
-        <PageToolbar
+        <PageToolbar title="Alert editor" pageIcon="bell">
-          title="Alert editor"
+          {this.renderToolbarActions()}
-          titlePrefix={<Icon name="bell" size="lg" />}
+        </PageToolbar>
-          actions={this.renderToolbarActions()}
-          titlePadding="sm"
-        />
         <div className={styles.splitPanesWrapper}>
           <SplitPaneWrapper
             leftPaneComponents={[

public/app/features/alerting/components/AlertDefinitionOptions.tsx

@@ -1,7 +1,7 @@
 import React, { FC, FormEvent, useMemo } from 'react';
 import { css } from 'emotion';
 import { GrafanaTheme, SelectableValue } from '@grafana/data';
-import { Field, Input, Select, TextArea, useStyles } from '@grafana/ui';
+import { Field, Input, Select, Tab, TabContent, TabsBar, TextArea, useStyles } from '@grafana/ui';
 import { AlertDefinition, NotificationChannelType, QueryGroupOptions } from 'app/types';
 
 interface Props {
@@ -26,9 +26,11 @@ export const AlertDefinitionOptions: FC<Props> = ({
   ]);
 
   return (
-    <div style={{ paddingTop: '16px' }}>
+    <div className={styles.wrapper}>
-      <div className={styles.container}>
+      <TabsBar>
-        <h4>Alert definition</h4>
+        <Tab label="Alert definition" active={true} />
+      </TabsBar>
+      <TabContent className={styles.container}>
         <Field label="Title">
           <Input width={25} name="title" value={alertDefinition.title} onChange={onChange} />
         </Field>
@@ -67,7 +69,7 @@ export const AlertDefinitionOptions: FC<Props> = ({
             />
           </div>
         </Field>
-      </div>
+      </TabContent>
     </div>
   );
 };
@@ -76,10 +78,13 @@ const getStyles = (theme: GrafanaTheme) => {
   return {
     wrapper: css`
       padding-top: ${theme.spacing.md};
+      height: 100%;
     `,
     container: css`
       padding: ${theme.spacing.md};
       background-color: ${theme.colors.panelBg};
+      height: 100%;
+      border-left: 1px solid ${theme.colors.border1};
     `,
     optionRow: css`
       display: flex;