NewPanelEditor: Make variables wrap and small layout refactor (#23862)

* NewPanelEditor: Make variables wrap  and small layout refactor

* review fix

packages/grafana-ui/src/components/Layout/Layout.tsx

@@ -33,7 +33,7 @@ export const Layout: React.FC<LayoutProps> = ({
   justify = 'flex-start',
   align = 'normal',
   wrap = false,
-  width = 'auto',
+  width = '100%',
   ...rest
 }) => {
   const theme = useTheme();

public/app/core/components/QueryOperationRow/QueryOperationRow.tsx

 import React, { useState } from 'react';
-import { renderOrCallToRender, Icon, stylesFactory, useTheme } from '@grafana/ui';
+import { renderOrCallToRender, Icon, stylesFactory, useTheme, HorizontalGroup } from '@grafana/ui';
 import { GrafanaTheme } from '@grafana/data';
 import { css } from 'emotion';
 import { useUpdateEffect } from 'react-use';
@@ -54,17 +54,19 @@ export const QueryOperationRow: React.FC<QueryOperationRowProps> = ({
   return (
     <div className={styles.wrapper}>
       <div className={styles.header}>
-        <div
-          className={styles.titleWrapper}
-          onClick={() => {
-            setIsContentVisible(!isContentVisible);
-          }}
-          aria-label="Query operation row title"
-        >
-          <Icon name={isContentVisible ? 'angle-down' : 'angle-right'} className={styles.collapseIcon} />
-          {title && <span className={styles.title}>{titleElement}</span>}
-        </div>
-        {actions && actionsElement}
+        <HorizontalGroup justify="space-between">
+          <div
+            className={styles.titleWrapper}
+            onClick={() => {
+              setIsContentVisible(!isContentVisible);
+            }}
+            aria-label="Query operation row title"
+          >
+            <Icon name={isContentVisible ? 'angle-down' : 'angle-right'} className={styles.collapseIcon} />
+            {title && <span className={styles.title}>{titleElement}</span>}
+          </div>
+          {actions && actionsElement}
+        </HorizontalGroup>
       </div>
       {isContentVisible && <div className={styles.content}>{children}</div>}
     </div>

public/app/features/dashboard/components/PanelEditor/PanelEditor.tsx

 import React, { PureComponent } from 'react';
 import { FieldConfigSource, GrafanaTheme, PanelData, PanelPlugin } from '@grafana/data';
-import { Button, Icon, RadioButtonGroup, stylesFactory } from '@grafana/ui';
+import { Button, HorizontalGroup, Icon, RadioButtonGroup, stylesFactory } from '@grafana/ui';
 import { css, cx } from 'emotion';
 import config from 'app/core/config';
 import AutoSizer from 'react-virtualized-auto-sizer';
@@ -221,25 +221,26 @@ export class PanelEditorUnconnected extends PureComponent<Props> {
   }
 
   renderPanelToolbar(styles: EditorStyles) {
-    const { dashboard, location, uiState } = this.props;
-
+    const { dashboard, location, uiState, variables } = this.props;
     return (
       <div className={styles.panelToolbar}>
-        {this.renderTemplateVariables(styles)}
-        <div className="flex-grow-1" />
-        <div className={styles.toolbarItem}>
-          <RadioButtonGroup value={uiState.mode} options={displayModes} onChange={this.onDiplayModeChange} />
-        </div>
-        <div className={styles.toolbarItem}>
-          <DashNavTimeControls dashboard={dashboard} location={location} updateLocation={updateLocation} />
-        </div>
-        {!uiState.isPanelOptionsVisible && (
-          <div className={styles.toolbarItem}>
-            <DashNavButton onClick={this.onTogglePanelOptions} tooltip="Open options pane" classSuffix="close-options">
-              <Icon name="angle-left" /> <span style={{ paddingLeft: '6px' }}>Show options</span>
-            </DashNavButton>
-          </div>
-        )}
+        <HorizontalGroup justify={variables.length > 0 ? 'space-between' : 'flex-end'} align="flex-start">
+          {this.renderTemplateVariables(styles)}
+
+          <HorizontalGroup>
+            <RadioButtonGroup value={uiState.mode} options={displayModes} onChange={this.onDiplayModeChange} />
+            <DashNavTimeControls dashboard={dashboard} location={location} updateLocation={updateLocation} />
+            {!uiState.isPanelOptionsVisible && (
+              <DashNavButton
+                onClick={this.onTogglePanelOptions}
+                tooltip="Open options pane"
+                classSuffix="close-options"
+              >
+                <Icon name="angle-left" /> <span style={{ paddingLeft: '6px' }}>Show options</span>
+              </DashNavButton>
+            )}
+          </HorizontalGroup>
+        </HorizontalGroup>
       </div>
     );
   }
@@ -249,35 +250,34 @@ export class PanelEditorUnconnected extends PureComponent<Props> {
 
     return (
       <div className={styles.editorToolbar}>
-        <div className={styles.toolbarLeft}>
-          <BackButton onClick={this.onPanelExit} surface="panel" />
-          <span className={styles.editorTitle}>{dashboard.title} / Edit Panel</span>
-        </div>
-        <div className={styles.toolbarLeft}>
-          <div className={styles.toolbarItem}>
-            <Button
-              icon="cog"
-              onClick={this.onOpenDashboardSettings}
-              variant="secondary"
-              title="Open dashboad settings"
-            />
-          </div>
-          <div className={styles.toolbarItem}>
-            <Button onClick={this.onDiscard} variant="secondary" title="Undo all changes">
-              Discard
-            </Button>
-          </div>
-          <div className={styles.toolbarItem}>
-            <Button onClick={this.onSaveDashboard} variant="secondary" title="Apply changes and save dashboard">
-              Save
-            </Button>
-          </div>
-          <div className={styles.toolbarItem}>
-            <Button onClick={this.onPanelExit} title="Apply changes and go back to dashboard">
-              Apply
-            </Button>
+        <HorizontalGroup justify="space-between" align="center">
+          <div className={styles.toolbarLeft}>
+            <HorizontalGroup spacing="none">
+              <BackButton onClick={this.onPanelExit} surface="panel" />
+              <span className={styles.editorTitle}>{dashboard.title} / Edit Panel</span>
+            </HorizontalGroup>
           </div>
-        </div>
+
+          <HorizontalGroup>
+            <HorizontalGroup spacing="sm" align="center">
+              <Button
+                icon="cog"
+                onClick={this.onOpenDashboardSettings}
+                variant="secondary"
+                title="Open dashboad settings"
+              />
+              <Button onClick={this.onDiscard} variant="secondary" title="Undo all changes">
+                Discard
+              </Button>
+              <Button onClick={this.onSaveDashboard} variant="secondary" title="Apply changes and save dashboard">
+                Save
+              </Button>
+              <Button onClick={this.onPanelExit} title="Apply changes and go back to dashboard">
+                Apply
+              </Button>
+            </HorizontalGroup>
+          </HorizontalGroup>
+        </HorizontalGroup>
       </div>
     );
   }
@@ -429,7 +429,10 @@ export const getStyles = stylesFactory((theme: GrafanaTheme, props: Props) => {
       padding-bottom: ${paneSpacing};
     `,
     variablesWrapper: css`
+      label: variablesWrapper;
       display: flex;
+      flex-grow: 1;
+      flex-wrap: wrap;
     `,
     panelWrapper: css`
       flex: 1 1 0;
@@ -477,15 +480,6 @@ export const getStyles = stylesFactory((theme: GrafanaTheme, props: Props) => {
     `,
     toolbarLeft: css`
       padding-left: ${theme.spacing.sm};
-      display: flex;
-      align-items: center;
-    `,
-    toolbarItem: css`
-      margin-right: ${theme.spacing.sm};
-
-      &:last-child {
-        margin-right: 0;
-      }
     `,
     centeringContainer: css`
       display: flex;

public/sass/components/_submenu.scss

@@ -31,7 +31,7 @@
     padding-left: 8px;
   }
 
-  .gf-form {
+  .gf-form-inline .gf-form {
     margin-bottom: 0;
   }
 }