From 997cb64a57282fec550f24f880ec0993194985e2 Mon Sep 17 00:00:00 2001
From: Rares Mardare <rares.mardare@grafana.com>
Date: Mon, 27 May 2024 10:51:01 +0300
Subject: [PATCH] Fixed UserGroup selectors not showing the set value (#4394)

# What this PR does

Fix for https://github.com/grafana/oncall/issues/4371

- Fixed UserGroups' selectors not showing up the stored value - this
behavior was found in Schedule Form and Escalation Chains

## Which issue(s) this PR closes

Closes https://github.com/grafana/oncall/issues/4371
---
 .../src/components/Policy/EscalationPolicy.tsx     |  5 ++---
 .../src/containers/ScheduleForm/ScheduleForm.tsx   |  4 ++--
 grafana-plugin/src/models/user_group/user_group.ts | 14 +++++++++++++-
 3 files changed, 17 insertions(+), 6 deletions(-)

diff --git a/grafana-plugin/src/components/Policy/EscalationPolicy.tsx b/grafana-plugin/src/components/Policy/EscalationPolicy.tsx
index 098f040f..c977a767 100644
--- a/grafana-plugin/src/components/Policy/EscalationPolicy.tsx
+++ b/grafana-plugin/src/components/Policy/EscalationPolicy.tsx
@@ -383,13 +383,12 @@ class _EscalationPolicy extends React.Component<EscalationPolicyProps, any> {
 
     return (
       <WithPermissionControlTooltip key="notify_to_group" userAction={UserActions.EscalationChainsWrite}>
-        <GSelect<UserGroup[]>
+        <GSelect<UserGroup>
           allowClear
           disabled={isDisabled}
           items={userGroupStore.items}
           fetchItemsFn={userGroupStore.updateItems}
-          fetchItemFn={() => undefined}
-          // TODO: fetchItemFn
+          fetchItemFn={userGroupStore.fetchItemById}
           getSearchResult={userGroupStore.getSearchResult}
           displayField="name"
           valueField="id"
diff --git a/grafana-plugin/src/containers/ScheduleForm/ScheduleForm.tsx b/grafana-plugin/src/containers/ScheduleForm/ScheduleForm.tsx
index 420b4776..f3248a9e 100644
--- a/grafana-plugin/src/containers/ScheduleForm/ScheduleForm.tsx
+++ b/grafana-plugin/src/containers/ScheduleForm/ScheduleForm.tsx
@@ -289,11 +289,11 @@ const ScheduleNotificationSettingsFields = () => {
             invalid={!!errors.user_group}
             error={errors.user_group?.message}
           >
-            <GSelect<UserGroup[]>
+            <GSelect<UserGroup>
               allowClear
               items={userGroupStore.items}
               fetchItemsFn={userGroupStore.updateItems}
-              fetchItemFn={() => undefined}
+              fetchItemFn={userGroupStore.fetchItemById}
               getSearchResult={userGroupStore.getSearchResult}
               displayField="handle"
               placeholder="Select User Group"
diff --git a/grafana-plugin/src/models/user_group/user_group.ts b/grafana-plugin/src/models/user_group/user_group.ts
index d19b6a48..d162aa7d 100644
--- a/grafana-plugin/src/models/user_group/user_group.ts
+++ b/grafana-plugin/src/models/user_group/user_group.ts
@@ -11,7 +11,7 @@ export class UserGroupStore extends BaseStore {
   searchResult: { [key: string]: Array<UserGroup['id']> } = {};
 
   @observable.shallow
-  items?: { [id: string]: UserGroup[] } = {};
+  items?: { [id: string]: UserGroup } = {};
 
   constructor(rootStore: RootStore) {
     super(rootStore);
@@ -46,6 +46,18 @@ export class UserGroupStore extends BaseStore {
     });
   }
 
+  @action.bound
+  async fetchItemById(id: string) {
+    const item: UserGroup = await this.getById(id);
+
+    runInAction(() => {
+      this.items = {
+        ...this.items,
+        [id]: item,
+      };
+    });
+  }
+
   getSearchResult = (query = '') => {
     if (!this.searchResult[query]) {
       return undefined;