From 9407cdd51cf1926a46b6f6489ccd290b2c01a3e0 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Torkel=20=C3=96degaard?= <torkel@grafana.org>
Date: Fri, 29 Jan 2021 15:02:01 +0100
Subject: [PATCH] AlertingNG: Update UX to use new PageToolbar component
 (#30680)

* AlertingNG: Update UX to use new PageToolbar component

* Removed unused imports
---
 .../components/PageToolbar/PageToolbar.tsx    | 51 -------------------
 .../features/alerting/NextGenAlertingPage.tsx | 24 ++++-----
 .../components/AlertDefinitionOptions.tsx     | 15 ++++--
 3 files changed, 20 insertions(+), 70 deletions(-)
 delete mode 100644 public/app/core/components/PageToolbar/PageToolbar.tsx

diff --git a/public/app/core/components/PageToolbar/PageToolbar.tsx b/public/app/core/components/PageToolbar/PageToolbar.tsx
deleted file mode 100644
index 8255d33f635..00000000000
--- a/public/app/core/components/PageToolbar/PageToolbar.tsx
+++ /dev/null
@@ -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};
-    `,
-  };
-});
diff --git a/public/app/features/alerting/NextGenAlertingPage.tsx b/public/app/features/alerting/NextGenAlertingPage.tsx
index 59352247da8..d458462ebeb 100644
--- a/public/app/features/alerting/NextGenAlertingPage.tsx
+++ b/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 } from 'app/core/components/PageToolbar/PageToolbar';
+import { PageToolbar, stylesFactory, ToolbarButton } from '@grafana/ui';
 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>,
-      <Button variant="secondary" key="test" onClick={this.onTest}>
+      </ToolbarButton>,
+      <ToolbarButton key="test" onClick={this.onTest}>
         Test
-      </Button>,
-      <Button variant="primary" key="save" onClick={this.onSaveAlert}>
+      </ToolbarButton>,
+      <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
-          title="Alert editor"
-          titlePrefix={<Icon name="bell" size="lg" />}
-          actions={this.renderToolbarActions()}
-          titlePadding="sm"
-        />
+        <PageToolbar title="Alert editor" pageIcon="bell">
+          {this.renderToolbarActions()}
+        </PageToolbar>
         <div className={styles.splitPanesWrapper}>
           <SplitPaneWrapper
             leftPaneComponents={[
diff --git a/public/app/features/alerting/components/AlertDefinitionOptions.tsx b/public/app/features/alerting/components/AlertDefinitionOptions.tsx
index cadf51ed10d..5a33165a8c8 100644
--- a/public/app/features/alerting/components/AlertDefinitionOptions.tsx
+++ b/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.container}>
-        <h4>Alert definition</h4>
+    <div className={styles.wrapper}>
+      <TabsBar>
+        <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;