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

packages/grafana-ui/src/components/DateTimePickers/DatePickerWithInput/DatePickerWithInput.tsx

@@ -1,11 +1,11 @@
 import React, { ChangeEvent } from 'react';
 import { css } from '@emotion/css';
-import { dateTime, dateTimeFormat } from '@grafana/data';
+import { dateTime } from '@grafana/data';
 import { DatePicker } from '../DatePicker/DatePicker';
 import { Props as InputProps, Input } from '../../Input/Input';
 import { useStyles } from '../../../themes';
 
-export const formatDate = (date: Date | string) => dateTimeFormat(date, { format: 'L' });
+export const formatDate = (date: Date | string) => dateTime(date).format('L');
 
 /** @public */
 export interface DatePickerWithInputProps extends Omit<InputProps, 'ref' | 'value' | 'onChange'> {

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

@@ -13,8 +13,10 @@ import { useStyles } from '../../themes';
 export interface SegmentAsyncProps<T> extends SegmentProps<T>, Omit<HTMLProps<HTMLDivElement>, 'value' | 'onChange'> {
   value?: T | SelectableValue<T>;
   loadOptions: (query?: string) => Promise<Array<SelectableValue<T>>>;
-  // if true, options will be reloaded when user changes the value in the input,
-  // otherwise, options will be loaded when the segment is clicked
+  /**
+   *  If true options will be reloaded when user changes the value in the input,
+   *  otherwise, options will be loaded when the segment is clicked
+   */
   reloadOptionsOnChange?: boolean;
   onChange: (item: SelectableValue<T>) => void;
   noOptionMessageHandler?: (state: AsyncState<Array<SelectableValue<T>>>) => string;

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

@@ -11,7 +11,9 @@ export interface Props<T> extends Omit<HTMLProps<HTMLDivElement>, 'value' | 'onC
   value?: SelectableValue<T>;
   options: Array<SelectableValue<T>>;
   onChange: (item: SelectableValue<T>) => void;
-  // if provided - AsyncSelect will be used allowing to reload options when the value in the input changes
+  /**
+   * If provided - AsyncSelect will be used allowing to reload options when the value in the input changes
+   */
   loadOptions?: (inputValue: string) => Promise<Array<SelectableValue<T>>>;
   onClickOutside: () => void;
   width: number;

public/app/plugins/datasource/graphite/components/TagsSection.tsx

@@ -34,8 +34,8 @@ export function TagsSection({ tags, state, addTagSegments }: Props) {
   // Options are reloaded while user is typing with backend taking care of auto-complete (auto-complete cannot be
   // implemented in front-end because backend returns only limited number of entries)
   const getTagsAsSegmentsOptions = useCallback(
-    (inputValue: string) => {
-      return getTagsAsSegmentsSelectables(state, inputValue);
+    (inputValue?: string) => {
+      return getTagsAsSegmentsSelectables(state, inputValue || '');
     },
     [state]
   );