From 07388a90adc005ed2edf42c633efeea2f03f1734 Mon Sep 17 00:00:00 2001
From: Yulia Shanyrova <yulia.shanyrova@grafana.com>
Date: Thu, 8 Sep 2022 11:37:52 +0200
Subject: [PATCH] Users from search results have been added to the state of
 options

---
 .../src/containers/RemoteSelect/RemoteSelect.tsx | 16 ++++++++++++----
 1 file changed, 12 insertions(+), 4 deletions(-)

diff --git a/grafana-plugin/src/containers/RemoteSelect/RemoteSelect.tsx b/grafana-plugin/src/containers/RemoteSelect/RemoteSelect.tsx
index 7f061eb5..bc3e47e7 100644
--- a/grafana-plugin/src/containers/RemoteSelect/RemoteSelect.tsx
+++ b/grafana-plugin/src/containers/RemoteSelect/RemoteSelect.tsx
@@ -1,4 +1,4 @@
-import React, { useCallback, useEffect, useMemo, useState } from 'react';
+import React, { useCallback, useEffect, useMemo, useReducer } from 'react';
 
 import { SelectableValue } from '@grafana/data';
 import { AsyncMultiSelect, AsyncSelect } from '@grafana/ui';
@@ -48,8 +48,6 @@ const RemoteSelect = inject('store')(
       openMenuOnFocus = true,
     } = props;
 
-    const [options, setOptions] = useState<SelectableValue[] | undefined>();
-
     const getOptions = (data: any[]) => {
       return data.map((option: any) => ({
         value: option[valueField],
@@ -58,6 +56,13 @@ const RemoteSelect = inject('store')(
       }));
     };
 
+    function mergeOptions(oldOptions: SelectableValue[], newOptions: SelectableValue[]) {
+      const existedValues = oldOptions.map((o) => o.value);
+      return newOptions.filter(({ value }) => !existedValues.includes(value)).concat(oldOptions);
+    }
+
+    const [options, setOptions] = useReducer(mergeOptions, []);
+
     useEffect(() => {
       makeRequest(href, {}).then((data) => {
         setOptions(getOptions(data.results || data));
@@ -65,7 +70,10 @@ const RemoteSelect = inject('store')(
     }, []);
 
     const loadOptionsCallback = useCallback((query: string) => {
-      return makeRequest(href, { params: { search: query } }).then((data) => getOptions(data.results || data));
+      return makeRequest(href, { params: { search: query } }).then((data) => {
+        setOptions(getOptions(data.results || data));
+        return getOptions(data.results || data);
+      });
     }, []);
 
     const onChangeCallback = useCallback(