From a6a09add7ab09bf444bc9f61b3b1829efbeea88a Mon Sep 17 00:00:00 2001
From: Alex Khomenko <Clarity-89@users.noreply.github.com>
Date: Mon, 9 Aug 2021 12:37:53 +0300
Subject: [PATCH 1/3] DateTimePicker: Use TZ independent formatter (#37676)

---
 .../DatePickerWithInput/DatePickerWithInput.tsx               | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/grafana-ui/src/components/DateTimePickers/DatePickerWithInput/DatePickerWithInput.tsx b/packages/grafana-ui/src/components/DateTimePickers/DatePickerWithInput/DatePickerWithInput.tsx
index dc34ddc5a45..ea76baa8bab 100644
--- a/packages/grafana-ui/src/components/DateTimePickers/DatePickerWithInput/DatePickerWithInput.tsx
+++ b/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'> {

From 80e06aa439c2abb1f5aeaf417de3940148a0b3ed Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Piotr=20Jamr=C3=B3z?= <pm.jamroz@gmail.com>
Date: Mon, 9 Aug 2021 12:39:35 +0200
Subject: [PATCH 2/3] Use block docs for better doc generation

---
 packages/grafana-ui/src/components/Segment/SegmentAsync.tsx | 6 ++++--
 .../grafana-ui/src/components/Segment/SegmentSelect.tsx     | 4 +++-
 2 files changed, 7 insertions(+), 3 deletions(-)

diff --git a/packages/grafana-ui/src/components/Segment/SegmentAsync.tsx b/packages/grafana-ui/src/components/Segment/SegmentAsync.tsx
index 67093f43ce4..b952c38367e 100644
--- a/packages/grafana-ui/src/components/Segment/SegmentAsync.tsx
+++ b/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;
diff --git a/packages/grafana-ui/src/components/Segment/SegmentSelect.tsx b/packages/grafana-ui/src/components/Segment/SegmentSelect.tsx
index fe84a6c62a1..a50d59b4285 100644
--- a/packages/grafana-ui/src/components/Segment/SegmentSelect.tsx
+++ b/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;

From 0a26cbf36c7c35367387f1291c26d7ba71ee452a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Piotr=20Jamr=C3=B3z?= <pm.jamroz@gmail.com>
Date: Mon, 9 Aug 2021 14:48:09 +0200
Subject: [PATCH 3/3] Handle undefined values provided for autocomplete

---
 .../plugins/datasource/graphite/components/TagsSection.tsx    | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/public/app/plugins/datasource/graphite/components/TagsSection.tsx b/public/app/plugins/datasource/graphite/components/TagsSection.tsx
index 247594f9d58..2a59005268d 100644
--- a/public/app/plugins/datasource/graphite/components/TagsSection.tsx
+++ b/public/app/plugins/datasource/graphite/components/TagsSection.tsx
@@ -33,8 +33,8 @@ export function TagsSection({ dispatch, 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]
   );