InlineForms: Changes to make inline forms more flexible for query editors (#29782)

* Chore: Remove internal import for QueryEditorRow

* WIP inline forms fixes

* Added segment group component

* Added component status doc tag

* Chore: add as prop to InlineLabel to control rendered element (#29876)

* Use div for InlineLabel & fix iconbuttons positioning

Co-authored-by: Elfo404 <gio.ricci@grafana.com>

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

@@ -59,19 +59,11 @@ const getStyles = (theme: GrafanaTheme, grow?: boolean) => {
     container: css`
       display: flex;
       flex-direction: row;
-      align-items: center;
+      align-items: flex-start;
       text-align: left;
       position: relative;
       flex: ${grow ? 1 : 0} 0 auto;
       margin: 0 ${theme.spacing.xs} ${theme.spacing.xs} 0;
     `,
-    wrapper: css`
-      display: flex;
-      width: 100%;
-    `,
-
-    fillContainer: css`
-      flex-grow: 1;
-    `,
   };
 };

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

 import React, { FC, HTMLProps, ReactNode } from 'react';
 import { css, cx } from 'emotion';
 import { useStyles } from '../../themes';
+import { GrafanaTheme } from '@grafana/data';
 
 export interface Props extends Omit<HTMLProps<HTMLDivElement>, 'css'> {
   children: ReactNode | ReactNode[];
@@ -15,7 +16,7 @@ export const InlineFieldRow: FC<Props> = ({ children, className, ...htmlProps })
   );
 };
 
-const getStyles = () => {
+const getStyles = (theme: GrafanaTheme) => {
   return {
     container: css`
       label: InlineFieldRow;

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

@@ -18,21 +18,31 @@ export interface Props extends Omit<LabelProps, 'css' | 'description' | 'categor
   /** @deprecated */
   /** This prop is deprecated and is not used anymore */
   isInvalid?: boolean;
+  /** @beta */
+  /** Controls which element the InlineLabel should be rendered into */
+  as?: React.ElementType;
 }
 
-export const InlineLabel: FunctionComponent<Props> = ({ children, className, tooltip, width, ...rest }) => {
+export const InlineLabel: FunctionComponent<Props> = ({
+  children,
+  className,
+  tooltip,
+  width,
+  as: Component = 'label',
+  ...rest
+}) => {
   const theme = useTheme();
   const styles = getInlineLabelStyles(theme, width);
 
   return (
-    <label className={cx(styles.label, className)} {...rest}>
+    <Component className={cx(styles.label, className)} {...rest}>
       {children}
       {tooltip && (
         <Tooltip placement="top" content={tooltip} theme="info">
           <Icon name="info-circle" size="sm" className={styles.icon} />
         </Tooltip>
       )}
-    </label>
+    </Component>
   );
 };
 

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

+import React, { FC } from 'react';
+import { cx, css } from 'emotion';
+import { GrafanaTheme } from '@grafana/data';
+import { useTheme } from '../../themes';
+
+export interface Props {
+  grow?: boolean;
+  className?: string;
+}
+
+/** @beta */
+export const InlineSegmentGroup: FC<Props> = ({ children, className, grow, ...htmlProps }) => {
+  const theme = useTheme();
+  const styles = getStyles(theme, grow);
+
+  return (
+    <div className={cx(styles.container, className)} {...htmlProps}>
+      {children}
+    </div>
+  );
+};
+
+InlineSegmentGroup.displayName = 'InlineSegmentGroup';
+
+const getStyles = (theme: GrafanaTheme, grow?: boolean) => {
+  return {
+    container: css`
+      display: flex;
+      flex-direction: row;
+      align-items: flex-start;
+      text-align: left;
+      position: relative;
+      flex: ${grow ? 1 : 0} 0 auto;
+      margin-bottom: ${theme.spacing.xs};
+    `,
+  };
+};

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

@@ -152,6 +152,7 @@ export { Legend } from './Forms/Legend';
 export { FieldSet } from './Forms/FieldSet';
 export { FieldValidationMessage } from './Forms/FieldValidationMessage';
 export { InlineField } from './Forms/InlineField';
+export { InlineSegmentGroup } from './Forms/InlineSegmentGroup';
 export { InlineLabel } from './Forms/InlineLabel';
 export { InlineFieldRow } from './Forms/InlineFieldRow';
 export { FieldArray } from './Forms/FieldArray';

public/app/plugins/datasource/elasticsearch/components/QueryEditor/BucketAggregationsEditor/BucketAggregationEditor.tsx

 import { MetricFindValue, SelectableValue } from '@grafana/data';
-import { Segment, SegmentAsync } from '@grafana/ui';
+import { InlineSegmentGroup, Segment, SegmentAsync } from '@grafana/ui';
 import React, { FunctionComponent } from 'react';
 import { useDispatch } from '../../../hooks/useStatelessReducer';
 import { useDatasource } from '../ElasticsearchQueryContext';
@@ -53,6 +53,7 @@ export const BucketAggregationEditor: FunctionComponent<QueryMetricEditorProps>
 
   return (
     <>
+      <InlineSegmentGroup>
         <Segment
           className={segmentStyles}
           options={bucketAggOptions}
@@ -69,6 +70,7 @@ export const BucketAggregationEditor: FunctionComponent<QueryMetricEditorProps>
             value={value.field}
           />
         )}
+      </InlineSegmentGroup>
 
       <SettingsEditor bucketAgg={value} />
     </>

public/app/plugins/datasource/elasticsearch/components/QueryEditor/MetricAggregationsEditor/MetricEditor.tsx

 import { MetricFindValue, SelectableValue } from '@grafana/data';
-import { Segment, SegmentAsync, useTheme } from '@grafana/ui';
+import { InlineSegmentGroup, Segment, SegmentAsync, useTheme } from '@grafana/ui';
 import { cx } from 'emotion';
 import React, { FunctionComponent } from 'react';
 import { useDatasource, useQuery } from '../ElasticsearchQueryContext';
@@ -88,6 +88,7 @@ export const MetricEditor: FunctionComponent<Props> = ({ value }) => {
 
   return (
     <>
+      <InlineSegmentGroup>
         <Segment
           className={cx(styles.color, segmentStyles)}
           options={getTypeOptions(previousMetrics, datasource.esVersion)}
@@ -113,6 +114,7 @@ export const MetricEditor: FunctionComponent<Props> = ({ value }) => {
             value={value.field}
           />
         )}
+      </InlineSegmentGroup>
 
       {isMetricAggregationWithSettings(value) && <SettingsEditor metric={value} previousMetrics={previousMetrics} />}
     </>

public/app/plugins/datasource/elasticsearch/components/QueryEditor/QueryEditorRow.tsx

 import { GrafanaTheme } from '@grafana/data';
-import { IconButton, stylesFactory, useTheme } from '@grafana/ui';
-import { getInlineLabelStyles } from '@grafana/ui/src/components/Forms/InlineLabel';
+import { IconButton, InlineFieldRow, InlineLabel, InlineSegmentGroup, stylesFactory, useTheme } from '@grafana/ui';
 import { css } from 'emotion';
 import { noop } from 'lodash';
 import React, { FunctionComponent } from 'react';
@@ -23,9 +22,11 @@ export const QueryEditorRow: FunctionComponent<Props> = ({
   const styles = getStyles(theme);
 
   return (
-    <fieldset className={styles.root}>
-      <div className={getInlineLabelStyles(theme, 17).label}>
-        <legend className={styles.label}>{label}</legend>
+    <InlineFieldRow>
+      <InlineSegmentGroup>
+        <InlineLabel width={17} as="div">
+          <span>{label}</span>
+          <span className={styles.iconWrapper}>
             {onHideClick && (
               <IconButton
                 name={hidden ? 'eye-slash' : 'eye'}
@@ -46,21 +47,18 @@ export const QueryEditorRow: FunctionComponent<Props> = ({
               disabled={!onRemoveClick}
               aria-label="remove metric"
             />
-      </div>
+          </span>
+        </InlineLabel>
+      </InlineSegmentGroup>
       {children}
-    </fieldset>
+    </InlineFieldRow>
   );
 };
 
 const getStyles = stylesFactory((theme: GrafanaTheme) => {
   return {
-    root: css`
+    iconWrapper: css`
       display: flex;
-      margin-bottom: ${theme.spacing.xs};
-    `,
-    label: css`
-      font-size: ${theme.typography.size.sm};
-      margin: 0;
     `,
     icon: css`
       color: ${theme.colors.textWeak};

public/app/plugins/datasource/elasticsearch/components/QueryEditor/SettingsEditorContainer.tsx

 import { GrafanaTheme } from '@grafana/data';
-import { Icon, stylesFactory, useTheme } from '@grafana/ui';
+import { Icon, InlineSegmentGroup, stylesFactory, useTheme } from '@grafana/ui';
 import { css, cx } from 'emotion';
 import React, { FunctionComponent, useState } from 'react';
 import { segmentStyles } from './styles';
@@ -32,10 +32,10 @@ interface Props {
 
 export const SettingsEditorContainer: FunctionComponent<Props> = ({ label, children, hidden = false }) => {
   const [open, setOpen] = useState(false);
-
   const styles = getStyles(useTheme(), hidden);
 
   return (
+    <InlineSegmentGroup>
       <div className={cx(styles.wrapper)}>
         <button
           className={cx('gf-form-label query-part', styles.button, segmentStyles)}
@@ -48,5 +48,6 @@ export const SettingsEditorContainer: FunctionComponent<Props> = ({ label, child
 
         {open && <div className={styles.settingsWrapper}>{children}</div>}
       </div>
+    </InlineSegmentGroup>
   );
 };