Merge branch 'ifrost/graphite-on-react-4' into ifrost/graphite-on-react-6

packages/grafana-ui/src/components/Forms/InlineFieldRow.tsx

@@ -24,6 +24,7 @@ const getStyles = (theme: GrafanaTheme) => {
       flex-direction: row;
       flex-wrap: wrap;
       align-content: flex-start;
+      row-gap: ${theme.spacing.xs};
     `,
   };
 };

packages/grafana-ui/src/components/Segment/SegmentSection.tsx

@@ -1,9 +1,9 @@
 import React from 'react';
 import { css } from '@emotion/css';
 import { GrafanaTheme2 } from '@grafana/data';
-import { SegmentSectionFill } from './SegmentSectionFill';
-import { SegmentSectionLabel } from './SegmentSectionLabel';
 import { useStyles2 } from '../../themes';
+import { InlineLabel } from '../Forms/InlineLabel';
+import { InlineFieldRow } from '../Forms/InlineFieldRow';
 
 /**
  * Horizontal section for editor components.
@@ -25,20 +25,27 @@ export const SegmentSection = ({
   const styles = useStyles2(getStyles);
   return (
     <>
-      <div className={styles.container}>
-        <SegmentSectionLabel name={label} className="width-7" />
+      <InlineFieldRow>
+        <InlineLabel width={12} className={styles.label}>
+          {label}
+        </InlineLabel>
         {children}
-        {fill && <SegmentSectionFill />}
-      </div>
+        {fill && (
+          <div className={styles.fill}>
+            <InlineLabel>{''}</InlineLabel>
+          </div>
+        )}
+      </InlineFieldRow>
     </>
   );
 };
 
 const getStyles = (theme: GrafanaTheme2) => ({
-  container: css`
-    display: flex;
-    flex-wrap: wrap;
-    row-gap: ${theme.spacing(0.5)};
-    align-content: flex-start;
+  label: css`
+    color: ${theme.colors.primary.text};
+  `,
+  fill: css`
+    flex-grow: 1;
+    margin-bottom: ${theme.spacing(0.5)};
   `,
 });

packages/grafana-ui/src/components/Segment/SegmentSectionFill.tsx

@@ -1,10 +0,0 @@
-import React from 'react';
-
-/**
- * @alpha
- */
-export const SegmentSectionFill = () => (
-  <div className="gf-form gf-form--grow">
-    <label className="gf-form-label gf-form-label--grow" />
-  </div>
-);

packages/grafana-ui/src/components/Segment/SegmentSectionLabel.tsx

@@ -1,9 +0,0 @@
-import React from 'react';
-import { cx } from '@emotion/css';
-
-/**
- * @alpha
- */
-export const SegmentSectionLabel = ({ name, className }: { name: string; className?: string }) => (
-  <label className={cx('gf-form-label query-keyword', className)}>{name}</label>
-);

packages/grafana-ui/src/components/Segment/index.ts

@@ -3,6 +3,5 @@ export { SegmentAsync } from './SegmentAsync';
 export { SegmentSelect } from './SegmentSelect';
 export { SegmentInput } from './SegmentInput';
 export { SegmentSection } from './SegmentSection';
-export { SegmentSectionLabel } from './SegmentSectionLabel';
 export { SegmentProps } from './types';
 export { useExpandableLabel } from './useExpandableLabel';

packages/grafana-ui/src/components/index.ts

@@ -152,7 +152,7 @@ export { CertificationKey } from './DataSourceSettings/CertificationKey';
 export { Spinner } from './Spinner/Spinner';
 export { FadeTransition } from './transitions/FadeTransition';
 export { SlideOutTransition } from './transitions/SlideOutTransition';
-export { Segment, SegmentAsync, SegmentInput, SegmentSelect, SegmentSection, SegmentSectionLabel } from './Segment/';
+export { Segment, SegmentAsync, SegmentInput, SegmentSelect, SegmentSection } from './Segment/';
 export { Drawer } from './Drawer/Drawer';
 export { Slider } from './Slider/Slider';
 export { RangeSlider } from './Slider/RangeSlider';

public/app/plugins/datasource/influxdb/components/VisualInfluxQLEditor/Editor.tsx

@@ -26,7 +26,9 @@ import {
 import { FormatAsSection } from './FormatAsSection';
 import { DEFAULT_RESULT_FORMAT } from '../constants';
 import { getNewSelectPartOptions, getNewGroupByPartOptions, makePartList } from './partListUtils';
-import { SegmentSection, SegmentSectionLabel } from '@grafana/ui';
+import { InlineLabel, SegmentSection, useStyles2 } from '@grafana/ui';
+import { GrafanaTheme2 } from '@grafana/data';
+import { css } from '@emotion/css';
 
 type Props = {
   query: InfluxQuery;
@@ -51,6 +53,7 @@ function withTemplateVariableOptions(optionsPromise: Promise<string[]>): Promise
 }
 
 export const Editor = (props: Props): JSX.Element => {
+  const styles = useStyles2(getStyles);
   const query = normalizeQuery(props.query);
   const { datasource } = props;
   const { measurement, policy } = query;
@@ -115,7 +118,9 @@ export const Editor = (props: Props): JSX.Element => {
           }
           onChange={handleFromSectionChange}
         />
-        <SegmentSectionLabel name="WHERE" />
+        <InlineLabel width="auto" className={styles.inlineLabel}>
+          WHERE
+        </InlineLabel>
         <TagsSection
           tags={query.tags ?? []}
           onChange={handleTagsSectionChange}
@@ -167,7 +172,9 @@ export const Editor = (props: Props): JSX.Element => {
             onAppliedChange({ ...query, tz });
           }}
         />
-        <SegmentSectionLabel name="ORDER BY TIME" />
+        <InlineLabel width="auto" className={styles.inlineLabel}>
+          ORDER BY TIME
+        </InlineLabel>
         <OrderByTimeSection
           value={query.orderByTime === 'DESC' ? 'DESC' : 'ASC' /* FIXME: make this shared with influx_query_model */}
           onChange={(v) => {
@@ -188,7 +195,9 @@ export const Editor = (props: Props): JSX.Element => {
             onAppliedChange({ ...query, limit });
           }}
         />
-        <SegmentSectionLabel name="SLIMIT" />
+        <InlineLabel width="auto" className={styles.inlineLabel}>
+          SLIMIT
+        </InlineLabel>
         <InputSection
           placeholder="(optional)"
           value={query.slimit?.toString()}
@@ -206,7 +215,9 @@ export const Editor = (props: Props): JSX.Element => {
         />
         {query.resultFormat !== 'table' && (
           <>
-            <SegmentSectionLabel name="ALIAS" />
+            <InlineLabel width="auto" className={styles.inlineLabel}>
+              ALIAS
+            </InlineLabel>
             <InputSection
               isWide
               placeholder="Naming pattern"
@@ -221,3 +232,11 @@ export const Editor = (props: Props): JSX.Element => {
     </div>
   );
 };
+
+function getStyles(theme: GrafanaTheme2) {
+  return {
+    inlineLabel: css`
+      color: ${theme.colors.primary.text};
+    `,
+  };
+}