Field config API: add slider editor (#28007)

* Field config: implementation slider editor (#27592)

* PR-28007 feedback fixed

* Field config: implementation slider editor (#27592)

* PR-28007 feedback fixed

* processed review PR-28007

* Field config: implementation slider editor (#27592)

* PR-28007 feedback fixed

* Field config: implementation slider editor (#27592)

* processed review PR-28007

* fixing leftover number[] bugs

* RichHistoryQueriesTab.test fix + slider vertical feat fixed

* fixed Slider.test.tsx expectation

* Added @docs to prevent build-frontend-docs from failing

Co-authored-by: Isa Ozler <contactme@isaozler.com>

packages/grafana-ui/src/components/OptionsUI/slider.tsx

@@ -0,0 +1,27 @@
+import React, { useCallback } from 'react';
+import { FieldConfigEditorProps, SliderFieldConfigSettings } from '@grafana/data';
+import { Slider } from '../Slider/Slider';
+
+export const SliderValueEditor: React.FC<FieldConfigEditorProps<number, SliderFieldConfigSettings>> = ({
+  value,
+  onChange,
+  item,
+}) => {
+  const { settings } = item;
+  const onValueAfterChange = useCallback(
+    (value?: number) => {
+      onChange(value);
+    },
+    [onChange]
+  );
+  const initialValue = typeof value === 'number' ? value : typeof value === 'string' ? +value : 0;
+  return (
+    <Slider
+      value={initialValue}
+      min={settings?.min || 0}
+      max={settings?.max || 100}
+      step={settings?.step}
+      onAfterChange={onValueAfterChange}
+    />
+  );
+};

packages/grafana-ui/src/components/Slider/RangeSlider.mdx

@@ -0,0 +1,12 @@
+import { Meta, Props } from '@storybook/addon-docs/blocks';
+import { RangeSliderProps } from './types';
+
+<Meta title="MDX|RangeSlider" />
+
+# Range-slider
+
+The `Range-slider` component is an input element where users can manipulate two values on a one-dimensional axis.
+
+`Range-slider` can be implemented in horizontal or vertical orientation. You can set the default starting values for the slider with the `value` prop.
+
+<Props of={RangeSliderProps} />

packages/grafana-ui/src/components/Slider/RangeSlider.story.tsx

@@ -0,0 +1,30 @@
+import React from 'react';
+import { RangeSlider } from '@grafana/ui';
+import { select, number, boolean } from '@storybook/addon-knobs';
+
+export default {
+  title: 'Forms/Slider/Range',
+  component: RangeSlider,
+};
+
+const getKnobs = () => {
+  return {
+    min: number('min', 0),
+    max: number('max', 100),
+    step: boolean('enable step', false),
+    orientation: select('orientation', ['horizontal', 'vertical'], 'horizontal'),
+    reverse: boolean('reverse', false),
+  };
+};
+
+const SliderWrapper = () => {
+  const { min, max, orientation, reverse, step } = getKnobs();
+  const stepValue = step ? 10 : undefined;
+  return (
+    <div style={{ width: '200px', height: '200px' }}>
+      <RangeSlider min={min} max={max} step={stepValue} orientation={orientation} value={[10, 20]} reverse={reverse} />
+    </div>
+  );
+};
+
+export const basic = () => <SliderWrapper />;

packages/grafana-ui/src/components/Slider/RangeSlider.test.tsx

@@ -0,0 +1,17 @@
+import React from 'react';
+import { RangeSlider } from './RangeSlider';
+import { RangeSliderProps } from './types';
+import { render } from '@testing-library/react';
+
+const sliderProps: RangeSliderProps = {
+  min: 10,
+  max: 20,
+};
+
+describe('RangeSlider', () => {
+  it('renders without error', () => {
+    expect(() => {
+      render(<RangeSlider {...sliderProps} />);
+    });
+  });
+});

packages/grafana-ui/src/components/Slider/RangeSlider.tsx

@@ -0,0 +1,53 @@
+import React, { FunctionComponent } from 'react';
+import { Range as RangeComponent, createSliderWithTooltip } from 'rc-slider';
+import { cx } from 'emotion';
+import { Global } from '@emotion/core';
+import { useTheme } from '../../themes/ThemeContext';
+import { getStyles } from './styles';
+import { RangeSliderProps } from './types';
+
+/**
+ * @public
+ *
+ * RichHistoryQueriesTab uses this Range Component
+ */
+export const RangeSlider: FunctionComponent<RangeSliderProps> = ({
+  min,
+  max,
+  onChange,
+  onAfterChange,
+  orientation = 'horizontal',
+  reverse,
+  step,
+  formatTooltipResult,
+  value,
+  tooltipAlwaysVisible = true,
+}) => {
+  const isHorizontal = orientation === 'horizontal';
+  const theme = useTheme();
+  const styles = getStyles(theme, isHorizontal);
+  const RangeWithTooltip = createSliderWithTooltip(RangeComponent);
+  return (
+    <div className={cx(styles.container, styles.slider)}>
+      {/** Slider tooltip's parent component is body and therefore we need Global component to do css overrides for it. */}
+      <Global styles={styles.tooltip} />
+      <RangeWithTooltip
+        tipProps={{
+          visible: tooltipAlwaysVisible,
+          placement: isHorizontal ? 'top' : 'right',
+        }}
+        min={min}
+        max={max}
+        step={step}
+        defaultValue={value}
+        tipFormatter={(value: number) => (formatTooltipResult ? formatTooltipResult(value) : value)}
+        onChange={onChange}
+        onAfterChange={onAfterChange}
+        vertical={!isHorizontal}
+        reverse={reverse}
+      />
+    </div>
+  );
+};
+
+RangeSlider.displayName = 'Range';

packages/grafana-ui/src/components/Slider/Slider.mdx

@@ -1,12 +1,12 @@
 import { Meta, Props } from '@storybook/addon-docs/blocks';
-import { Slider } from './Slider';
+import { SliderProps } from './types';
 
 <Meta title="MDX|Slider" />
 
 # Slider
 
-The `Slider` component is an input element where users can manipulate one or two values on a one-dimensional axis. 
+The `Slider` component is an input element where users can manipulate one value on a one-dimensional axis.
 
-`Slider` can be implemented in horizontal or vertical orientation. You can set the default starting value(s) for the slider with the `value` prop. 
+`Slider` can be implemented in horizontal or vertical orientation. You can set the default starting value(s) for the slider with the `value` prop.
 
-<Props of={Slider} />
+<Props of={SliderProps} />

packages/grafana-ui/src/components/Slider/Slider.story.tsx

@@ -13,24 +13,16 @@ const getKnobs = () => {
     max: number('max', 100),
     step: boolean('enable step', false),
     orientation: select('orientation', ['horizontal', 'vertical'], 'horizontal'),
-    reverse: boolean('reverse', true),
-    singleValue: boolean('single value', false),
+    reverse: boolean('reverse', false),
   };
 };
 
 const SliderWrapper = () => {
-  const { min, max, orientation, reverse, singleValue, step } = getKnobs();
+  const { min, max, orientation, reverse, step } = getKnobs();
   const stepValue = step ? 10 : undefined;
   return (
     <div style={{ width: '200px', height: '200px' }}>
-      <Slider
-        min={min}
-        max={max}
-        step={stepValue}
-        orientation={orientation}
-        value={singleValue ? [10] : undefined}
-        reverse={reverse}
-      />
+      <Slider min={min} max={max} step={stepValue} orientation={orientation} value={10} reverse={reverse} />
     </div>
   );
 };

packages/grafana-ui/src/components/Slider/Slider.test.tsx

@@ -1,8 +1,9 @@
 import React from 'react';
-import { Slider, Props } from './Slider';
+import { Slider } from './Slider';
+import { SliderProps } from './types';
 import { mount } from 'enzyme';
 
-const sliderProps: Props = {
+const sliderProps: SliderProps = {
   min: 10,
   max: 20,
 };
@@ -17,11 +18,10 @@ describe('Slider', () => {
     expect(wrapper.html()).toContain('aria-valuemin="10"');
     expect(wrapper.html()).toContain('aria-valuemax="20"');
     expect(wrapper.html()).toContain('aria-valuenow="10"');
-    expect(wrapper.html()).toContain('aria-valuenow="20"');
   });
 
   it('renders correct contents with a value', () => {
-    const wrapper = mount(<Slider {...sliderProps} value={[15]} />);
+    const wrapper = mount(<Slider {...sliderProps} value={15} />);
     expect(wrapper.html()).toContain('aria-valuenow="15"');
     expect(wrapper.html()).not.toContain('aria-valuenow="20"');
     expect(wrapper.html()).not.toContain('aria-valuenow="10"');

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

@@ -1,104 +1,15 @@
-import React, { FunctionComponent } from 'react';
-import { Range, createSliderWithTooltip } from 'rc-slider';
-import { cx, css } from 'emotion';
-import { Global, css as cssCore } from '@emotion/core';
-import { stylesFactory } from '../../themes';
-import { GrafanaTheme } from '@grafana/data';
+import React, { useState, useCallback, ChangeEvent, FunctionComponent } from 'react';
+import SliderComponent from 'rc-slider';
+import { cx } from 'emotion';
+import { Global } from '@emotion/core';
 import { useTheme } from '../../themes/ThemeContext';
-import { Orientation } from '../../types/orientation';
+import { getStyles } from './styles';
+import { SliderProps } from './types';
 
-export interface Props {
-  min: number;
-  max: number;
-  orientation?: Orientation;
-  /** Set current positions of handle(s). If only 1 value supplied, only 1 handle displayed. */
-  value?: number[];
-  reverse?: boolean;
-  step?: number;
-  tooltipAlwaysVisible?: boolean;
-  formatTooltipResult?: (value: number) => number | string;
-  onChange?: (values: number[]) => void;
-  onAfterChange?: (values: number[]) => void;
-}
-
-const getStyles = stylesFactory((theme: GrafanaTheme, isHorizontal: boolean) => {
-  const trackColor = theme.isLight ? theme.palette.gray5 : theme.palette.dark6;
-  const container = isHorizontal
-    ? css`
-        width: 100%;
-        margin: ${theme.spacing.lg} ${theme.spacing.sm} ${theme.spacing.sm} ${theme.spacing.sm};
-      `
-    : css`
-        height: 100%;
-        margin: ${theme.spacing.sm} ${theme.spacing.lg} ${theme.spacing.sm} ${theme.spacing.sm};
-      `;
-
-  return {
-    container,
-    slider: css`
-      .rc-slider-vertical .rc-slider-handle {
-        margin-top: -10px;
-      }
-      .rc-slider-handle {
-        border: solid 2px ${theme.palette.blue77};
-        background-color: ${theme.palette.blue77};
-      }
-      .rc-slider-handle:hover {
-        border-color: ${theme.palette.blue77};
-      }
-      .rc-slider-handle:focus {
-        border-color: ${theme.palette.blue77};
-        box-shadow: none;
-      }
-      .rc-slider-handle:active {
-        border-color: ${theme.palette.blue77};
-        box-shadow: none;
-      }
-      .rc-slider-handle-click-focused:focus {
-        border-color: ${theme.palette.blue77};
-      }
-      .rc-slider-dot-active {
-        border-color: ${theme.palette.blue77};
-      }
-      .rc-slider-track {
-        background-color: ${theme.palette.blue77};
-      }
-      .rc-slider-rail {
-        background-color: ${trackColor};
-        border: 1px solid ${trackColor};
-      }
-    `,
-    /** Global component from @emotion/core doesn't accept computed classname string returned from css from emotion.
-     * It accepts object containing the computed name and flattened styles returned from css from @emotion/core
-     * */
-    tooltip: cssCore`
-    body {
-      .rc-slider-tooltip {
-        cursor: grab;
-        user-select: none;
-        z-index: ${theme.zIndex.tooltip};
-      }
-
-      .rc-slider-tooltip-inner {
-        color: ${theme.colors.text};
-        background-color: transparent !important;
-        border-radius: 0;
-        box-shadow: none;
-      }
-
-      .rc-slider-tooltip-placement-top .rc-slider-tooltip-arrow {
-        display: none;
-      }
-
-      .rc-slider-tooltip-placement-top {
-        padding: 0;
-      }
-    }
-  `,
-  };
-});
-
-export const Slider: FunctionComponent<Props> = ({
+/**
+ * @public
+ */
+export const Slider: FunctionComponent<SliderProps> = ({
   min,
   max,
   onChange,
@@ -106,33 +17,63 @@ export const Slider: FunctionComponent<Props> = ({
   orientation = 'horizontal',
   reverse,
   step,
-  formatTooltipResult,
   value,
-  tooltipAlwaysVisible = true,
 }) => {
   const isHorizontal = orientation === 'horizontal';
   const theme = useTheme();
   const styles = getStyles(theme, isHorizontal);
-  const RangeWithTooltip = createSliderWithTooltip(Range);
+  const SliderWithTooltip = SliderComponent;
+  const [slidervalue, setSliderValue] = useState<number>(value || min);
+  const onSliderChange = useCallback((v: number) => {
+    setSliderValue(v);
+
+    if (onChange) {
+      onChange(v);
+    }
+  }, []);
+  const onSliderInputChange = useCallback((e: ChangeEvent<HTMLInputElement>) => {
+    let v = +e.target.value;
+
+    v > max && (v = max);
+    v < min && (v = min);
+
+    setSliderValue(v);
+
+    if (onChange) {
+      onChange(v);
+    }
+
+    if (onAfterChange) {
+      onAfterChange(v);
+    }
+  }, []);
+  const sliderInputClassNames = !isHorizontal ? [styles.sliderInputVertical] : [];
+  const sliderInputFieldClassNames = !isHorizontal ? [styles.sliderInputFieldVertical] : [];
   return (
     <div className={cx(styles.container, styles.slider)}>
       {/** Slider tooltip's parent component is body and therefore we need Global component to do css overrides for it. */}
       <Global styles={styles.tooltip} />
-      <RangeWithTooltip
-        tipProps={{
-          visible: tooltipAlwaysVisible,
-          placement: isHorizontal ? 'top' : 'right',
-        }}
-        min={min}
-        max={max}
-        step={step}
-        defaultValue={value || [min, max]}
-        tipFormatter={(value: number) => (formatTooltipResult ? formatTooltipResult(value) : value)}
-        onChange={onChange}
-        onAfterChange={onAfterChange}
-        vertical={!isHorizontal}
-        reverse={reverse}
-      />
+      <label className={cx(styles.sliderInput, ...sliderInputClassNames)}>
+        <SliderWithTooltip
+          min={min}
+          max={max}
+          step={step}
+          defaultValue={value}
+          value={slidervalue}
+          onChange={onSliderChange}
+          onAfterChange={onAfterChange}
+          vertical={!isHorizontal}
+          reverse={reverse}
+        />
+        <input
+          className={cx(styles.sliderInputField, ...sliderInputFieldClassNames)}
+          type="number"
+          value={`${slidervalue}`} // to fix the react leading zero issue
+          onChange={onSliderInputChange}
+          min={min}
+          max={max}
+        />
+      </label>
     </div>
   );
 };

packages/grafana-ui/src/components/Slider/styles.ts

@@ -0,0 +1,122 @@
+import { stylesFactory } from '../../themes';
+import { GrafanaTheme } from '@grafana/data';
+import { focusCss } from '../../themes/mixins';
+import { css as cssCore } from '@emotion/core';
+import { css } from 'emotion';
+
+export const getFocusStyle = (theme: GrafanaTheme) => css`
+  &:focus {
+    ${focusCss(theme)}
+  }
+`;
+
+export const getStyles = stylesFactory((theme: GrafanaTheme, isHorizontal: boolean) => {
+  const trackColor = theme.isLight ? theme.palette.gray5 : theme.palette.dark6;
+  const container = isHorizontal
+    ? css`
+        width: 100%;
+      `
+    : css`
+        height: 100%;
+        margin: ${theme.spacing.sm} ${theme.spacing.lg} ${theme.spacing.sm} ${theme.spacing.sm};
+      `;
+
+  return {
+    container,
+    slider: css`
+      .rc-slider {
+        display: flex;
+        flex-grow: 1;
+        margin-left: 7px; // half the size of the handle to align handle to the left on 0 value
+      }
+      .rc-slider-vertical .rc-slider-handle {
+        margin-top: -10px;
+      }
+      .rc-slider-handle {
+        border: solid 2px ${theme.palette.blue77};
+        background-color: ${theme.palette.blue77};
+      }
+      .rc-slider-handle:hover {
+        border-color: ${theme.palette.blue77};
+      }
+      .rc-slider-handle:focus {
+        border-color: ${theme.palette.blue77};
+        box-shadow: none;
+      }
+      .rc-slider-handle:active {
+        border-color: ${theme.palette.blue77};
+        box-shadow: none;
+      }
+      .rc-slider-handle-click-focused:focus {
+        border-color: ${theme.palette.blue77};
+      }
+      .rc-slider-dot-active {
+        border-color: ${theme.palette.blue77};
+      }
+      .rc-slider-track {
+        background-color: ${theme.palette.blue77};
+      }
+      .rc-slider-rail {
+        background-color: ${trackColor};
+        border: 1px solid ${trackColor};
+      }
+    `,
+    /** Global component from @emotion/core doesn't accept computed classname string returned from css from emotion.
+     * It accepts object containing the computed name and flattened styles returned from css from @emotion/core
+     * */
+    tooltip: cssCore`
+      body {
+        .rc-slider-tooltip {
+          cursor: grab;
+          user-select: none;
+          z-index: ${theme.zIndex.tooltip};
+        }
+
+        .rc-slider-tooltip-inner {
+          color: ${theme.colors.text};
+          background-color: transparent !important;
+          border-radius: 0;
+          box-shadow: none;
+        }
+
+        .rc-slider-tooltip-placement-top .rc-slider-tooltip-arrow {
+          display: none;
+        }
+
+        .rc-slider-tooltip-placement-top {
+          padding: 0;
+        }
+      }
+    `,
+    sliderInput: css`
+      display: flex;
+      flex-direction: row;
+      align-items: center;
+      width: 100%;
+    `,
+    sliderInputVertical: css`
+      flex-direction: column;
+      height: 100%;
+
+      .rc-slider {
+        margin: 0;
+        order: 2;
+      }
+    `,
+    sliderInputField: css`
+      display: flex;
+      flex-grow: 0;
+      flex-basis: 50px;
+      margin-left: ${theme.spacing.lg};
+      height: ${theme.spacing.formInputHeight}px;
+      text-align: center;
+      border-radius: ${theme.border.radius.sm};
+      border: 1px solid ${theme.colors.formInputBorder};
+      ${getFocusStyle(theme)};
+    `,
+    sliderInputFieldVertical: css`
+      margin: 0 0 ${theme.spacing.lg} 0;
+      order: 1;
+    `,
+  };
+});

packages/grafana-ui/src/components/Slider/types.ts

@@ -0,0 +1,29 @@
+import { Orientation } from '../../types/orientation';
+
+export interface SliderProps {
+  min: number;
+  max: number;
+  orientation?: Orientation;
+  /** Set current positions of handle(s). If only 1 value supplied, only 1 handle displayed. */
+  value?: number;
+  reverse?: boolean;
+  step?: number;
+  tooltipAlwaysVisible?: boolean;
+  formatTooltipResult?: (value: number) => number;
+  onChange?: (value: number) => void;
+  onAfterChange?: (value?: number) => void;
+}
+
+export interface RangeSliderProps {
+  min: number;
+  max: number;
+  orientation?: Orientation;
+  /** Set current positions of handle(s). If only 1 value supplied, only 1 handle displayed. */
+  value?: number[];
+  reverse?: boolean;
+  step?: number;
+  tooltipAlwaysVisible?: boolean;
+  formatTooltipResult?: (value: number) => number | string;
+  onChange?: (value: number[]) => void;
+  onAfterChange?: (value: number[]) => void;
+}

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

@@ -126,11 +126,13 @@ export { default as Chart } from './Chart';
 export { TooltipContainer } from './Chart/TooltipContainer';
 export { Drawer } from './Drawer/Drawer';
 export { Slider } from './Slider/Slider';
+export { RangeSlider } from './Slider/RangeSlider';
 
 // TODO: namespace!!
 export { StringValueEditor } from './OptionsUI/string';
 export { StringArrayEditor } from './OptionsUI/strings';
 export { NumberValueEditor } from './OptionsUI/number';
+export { SliderValueEditor } from './OptionsUI/slider';
 export { SelectValueEditor } from './OptionsUI/select';
 export { FieldConfigItemHeaderTitle } from './FieldConfigs/FieldConfigItemHeaderTitle';
 

packages/grafana-ui/src/utils/standardEditors.tsx

@@ -25,6 +25,7 @@ import {
 import { Switch } from '../components/Switch/Switch';
 import {
   NumberValueEditor,
+  SliderValueEditor,
   RadioButtonGroup,
   StringValueEditor,
   StringArrayEditor,
@@ -229,6 +230,13 @@ export const getStandardOptionEditors = () => {
     editor: NumberValueEditor as any,
   };
 
+  const slider: StandardEditorsRegistryItem<number> = {
+    id: 'slider',
+    name: 'Slider',
+    description: 'Allows numeric values input',
+    editor: SliderValueEditor as any,
+  };
+
   const text: StandardEditorsRegistryItem<string> = {
     id: 'text',
     name: 'Text',
@@ -323,6 +331,7 @@ export const getStandardOptionEditors = () => {
   return [
     text,
     number,
+    slider,
     boolean,
     radio,
     select,