Explore: Update styling of buttons (#30493)

* Switch deprecared toggle group for radio buttons

* Create transparent version of field, label and witch

* Replace divs wiith components

* Move styling from scss to js

* Update buttons

* Remove log generating file

* Update level button

public/app/features/explore/Logs.tsx

@@ -1,5 +1,5 @@
 import React, { PureComponent } from 'react';
-import { css, cx } from 'emotion';
+import { css } from 'emotion';
 import { capitalize } from 'lodash';
 
 import {
@@ -17,11 +17,20 @@ import {
   GraphSeriesXY,
   LinkModel,
   Field,
+  GrafanaTheme,
 } from '@grafana/data';
-import { LegacyForms, LogLabels, ToggleButtonGroup, ToggleButton, LogRows, Button } from '@grafana/ui';
-const { Switch } = LegacyForms;
+import {
+  LogLabels,
+  RadioButtonGroup,
+  LogRows,
+  Button,
+  InlineField,
+  InlineFieldRow,
+  InlineSwitch,
+  withTheme,
+  stylesFactory,
+} from '@grafana/ui';
 import store from 'app/core/store';
-
 import { ExploreGraphPanel } from './ExploreGraphPanel';
 import { MetaInfoText } from './MetaInfoText';
 import { RowContextOptions } from '@grafana/ui/src/components/Logs/LogRowContextProvider';
@@ -52,8 +61,8 @@ interface Props {
   logsSeries?: GraphSeriesXY[];
   dedupedRows?: LogRowModel[];
   visibleRange?: AbsoluteTimeRange;
-
   width: number;
+  theme: GrafanaTheme;
   highlighterExpressions?: string[];
   loading: boolean;
   absoluteRange: AbsoluteTimeRange;
@@ -82,7 +91,7 @@ interface State {
   showDetectedFields: string[];
 }
 
-export class Logs extends PureComponent<Props, State> {
+export class UnthemedLogs extends PureComponent<Props, State> {
   flipOrderTimer: NodeJS.Timeout;
   cancelFlippingTimer: NodeJS.Timeout;
 
@@ -224,14 +233,16 @@ export class Logs extends PureComponent<Props, State> {
       absoluteRange,
       onChangeTime,
       getFieldLinks,
+      dedupStrategy,
+      theme,
     } = this.props;
 
+    const { showLabels, showTime, wrapLogMessage, logsSortOrder, isFlipping, showDetectedFields } = this.state;
+
     if (!logRows) {
       return null;
     }
 
-    const { showLabels, showTime, wrapLogMessage, logsSortOrder, isFlipping, showDetectedFields } = this.state;
-    const { dedupStrategy } = this.props;
     const hasData = logRows && logRows.length > 0;
     const dedupCount = dedupedRows
       ? dedupedRows.reduce((sum, row) => (row.duplicates ? sum + row.duplicates : sum), 0)
@@ -256,60 +267,57 @@ export class Logs extends PureComponent<Props, State> {
 
     const scanText = scanRange ? `Scanning ${rangeUtil.describeTimeRange(scanRange)}` : 'Scanning...';
     const series = logsSeries ? logsSeries : [];
+    const styles = getStyles(theme);
 
     return (
-      <div className="logs-panel">
-        <div className="logs-panel-graph">
-          <ExploreGraphPanel
-            series={series}
-            width={width}
-            onHiddenSeriesChanged={this.onToggleLogLevel}
-            loading={loading}
-            absoluteRange={visibleRange || absoluteRange}
-            isStacked={true}
-            showPanel={false}
-            timeZone={timeZone}
-            showBars={true}
-            showLines={false}
-            onUpdateTimeRange={onChangeTime}
-          />
-        </div>
-        <div className="logs-panel-options">
-          <div className="logs-panel-controls">
-            <div className="logs-panel-controls-main">
-              <Switch label="Time" checked={showTime} onChange={this.onChangeTime} transparent />
-              <Switch label="Unique labels" checked={showLabels} onChange={this.onChangeLabels} transparent />
-              <Switch label="Wrap lines" checked={wrapLogMessage} onChange={this.onChangewrapLogMessage} transparent />
-              <ToggleButtonGroup label="Dedup" transparent={true}>
-                {Object.keys(LogsDedupStrategy).map((dedupType: string, i) => (
-                  <ToggleButton
-                    key={i}
-                    value={dedupType}
-                    onChange={this.onChangeDedup}
-                    selected={dedupStrategy === dedupType}
-                    // @ts-ignore
-                    tooltip={LogsDedupDescription[dedupType]}
-                  >
-                    {capitalize(dedupType)}
-                  </ToggleButton>
-                ))}
-              </ToggleButtonGroup>
-            </div>
-            <button
-              disabled={isFlipping}
-              title={logsSortOrder === LogsSortOrder.Ascending ? 'Change to newest first' : 'Change to oldest first'}
-              aria-label="Flip results order"
-              className={cx(
-                'gf-form-label gf-form-label--btn',
-                css`
-                  margin-top: 4px;
-                `
-              )}
-              onClick={this.onChangeLogsSortOrder}
-            >
-              <span className="btn-title">{isFlipping ? 'Flipping...' : 'Flip results order'}</span>
-            </button>
-          </div>
+      <>
+        <ExploreGraphPanel
+          series={series}
+          width={width}
+          onHiddenSeriesChanged={this.onToggleLogLevel}
+          loading={loading}
+          absoluteRange={visibleRange || absoluteRange}
+          isStacked={true}
+          showPanel={false}
+          timeZone={timeZone}
+          showBars={true}
+          showLines={false}
+          onUpdateTimeRange={onChangeTime}
+        />
+        <div className={styles.logOptions}>
+          <InlineFieldRow>
+            <InlineField label="Time" transparent>
+              <InlineSwitch value={showTime} onChange={this.onChangeTime} transparent />
+            </InlineField>
+            <InlineField label="Unique labels" transparent>
+              <InlineSwitch value={showLabels} onChange={this.onChangeLabels} transparent />
+            </InlineField>
+            <InlineField label="Wrap lines" transparent>
+              <InlineSwitch value={wrapLogMessage} onChange={this.onChangewrapLogMessage} transparent />
+            </InlineField>
+            <InlineField label="Dedup" transparent>
+              <RadioButtonGroup
+                options={Object.keys(LogsDedupStrategy).map((dedupType: LogsDedupStrategy) => ({
+                  label: capitalize(dedupType),
+                  value: dedupType,
+                  description: LogsDedupDescription[dedupType],
+                }))}
+                value={dedupStrategy}
+                onChange={this.onChangeDedup}
+                className={styles.radioButtons}
+              />
+            </InlineField>
+          </InlineFieldRow>
+          <Button
+            variant="secondary"
+            disabled={isFlipping}
+            title={logsSortOrder === LogsSortOrder.Ascending ? 'Change to newest first' : 'Change to oldest first'}
+            aria-label="Flip results order"
+            className={styles.flipButton}
+            onClick={this.onChangeLogsSortOrder}
+          >
+            {isFlipping ? 'Flipping...' : 'Flip results order'}
+          </Button>
         </div>
 
         {meta && (
@@ -323,7 +331,7 @@ export class Logs extends PureComponent<Props, State> {
           />
         )}
 
-        {showDetectedFields && showDetectedFields.length > 0 && (
+        {showDetectedFields?.length > 0 && (
           <MetaInfoText
             metaItems={[
               {
@@ -364,7 +372,7 @@ export class Logs extends PureComponent<Props, State> {
         />
 
         {!loading && !hasData && !scanning && (
-          <div className="logs-panel-nodata">
+          <div className={styles.noData}>
             No logs found.
             <Button size="xs" variant="link" onClick={this.onClickScan}>
               Scan for older logs
@@ -373,14 +381,43 @@ export class Logs extends PureComponent<Props, State> {
         )}
 
         {scanning && (
-          <div className="logs-panel-nodata">
+          <div className={styles.noData}>
             <span>{scanText}</span>
             <Button size="xs" variant="link" onClick={this.onClickStopScan}>
               Stop scan
             </Button>
           </div>
         )}
-      </div>
+      </>
     );
   }
 }
+
+export const Logs = withTheme(UnthemedLogs);
+
+const getStyles = stylesFactory((theme: GrafanaTheme) => {
+  return {
+    noData: css`
+      > * {
+        margin-left: 0.5em;
+      }
+    `,
+    logOptions: css`
+      display: flex;
+      justify-content: space-between;
+      align-items: baseline;
+      flex-wrap: wrap;
+      background-color: ${theme.colors.bg1};
+      padding: ${theme.spacing.sm} ${theme.spacing.md};
+      border-radius: ${theme.border.radius.md};
+      margin: ${theme.spacing.md} 0 ${theme.spacing.sm};
+      border: 1px solid ${theme.colors.panelBorder};
+    `,
+    flipButton: css`
+      margin: ${theme.spacing.xs} 0 0 ${theme.spacing.sm};
+    `,
+    radioButtons: css`
+      margin: 0 ${theme.spacing.sm};
+    `,
+  };
+});

public/app/features/explore/SecondaryActions.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import { css, cx } from 'emotion';
-import { stylesFactory, Icon } from '@grafana/ui';
+import { GrafanaTheme } from '@grafana/data';
+import { stylesFactory, Button, HorizontalGroup, useTheme } from '@grafana/ui';
 
 type Props = {
   addQueryRowButtonDisabled?: boolean;
@@ -13,48 +14,49 @@ type Props = {
   onClickQueryInspectorButton: () => void;
 };
 
-const getStyles = stylesFactory(() => {
+const getStyles = stylesFactory((theme: GrafanaTheme) => {
   return {
-    button: css`
-      margin: 1em 4px 0 0;
+    containerMargin: css`
+      margin-top: ${theme.spacing.md};
     `,
   };
 });
 export function SecondaryActions(props: Props) {
-  const styles = getStyles();
+  const theme = useTheme();
+  const styles = getStyles(theme);
   return (
-    <div className="gf-form">
-      {!props.addQueryRowButtonHidden && (
-        <button
-          aria-label="Add row button"
-          className={`gf-form-label gf-form-label--btn ${styles.button}`}
-          onClick={props.onClickAddQueryRowButton}
-          disabled={props.addQueryRowButtonDisabled}
+    <div className={styles.containerMargin}>
+      <HorizontalGroup>
+        {!props.addQueryRowButtonHidden && (
+          <Button
+            variant="secondary"
+            aria-label="Add row button"
+            onClick={props.onClickAddQueryRowButton}
+            disabled={props.addQueryRowButtonDisabled}
+            icon="plus"
+          >
+            Add query
+          </Button>
+        )}
+        <Button
+          variant="secondary"
+          aria-label="Rich history button"
+          className={cx({ ['explore-active-button']: props.richHistoryButtonActive })}
+          onClick={props.onClickRichHistoryButton}
+          icon="history"
         >
-          <Icon className="icon-margin-right" name="plus" size="sm" />
-          <span className="btn-title">{'\xA0' + 'Add query'}</span>
-        </button>
-      )}
-      <button
-        aria-label="Rich history button"
-        className={cx(`gf-form-label gf-form-label--btn ${styles.button}`, {
-          ['explore-active-button']: props.richHistoryButtonActive,
-        })}
-        onClick={props.onClickRichHistoryButton}
-      >
-        <Icon className="icon-margin-right" name="history" size="sm" />
-        <span className="btn-title">{'\xA0' + 'Query history'}</span>
-      </button>
-      <button
-        aria-label="Query inspector button"
-        className={cx(`gf-form-label gf-form-label--btn ${styles.button}`, {
-          ['explore-active-button']: props.queryInspectorButtonActive,
-        })}
-        onClick={props.onClickQueryInspectorButton}
-      >
-        <Icon className="icon-margin-right" name="info-circle" size="sm" />
-        <span className="btn-title">{'\xA0' + 'Query inspector'}</span>
-      </button>
+          Query history
+        </Button>
+        <Button
+          variant="secondary"
+          aria-label="Query inspector button"
+          className={cx({ ['explore-active-button']: props.queryInspectorButtonActive })}
+          onClick={props.onClickQueryInspectorButton}
+          icon="info-circle"
+        >
+          Query inspector
+        </Button>
+      </HorizontalGroup>
     </div>
   );
 }