Fixed UserGroup selectors not showing the set value (#4394)

# What this PR does Fix for #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 #4371
grafana · May 27, 2024 · 997cb64 · 997cb64
1 parent 357857f
commit 997cb64
Show file tree

Hide file tree

Showing 3 changed files with 17 additions and 6 deletions.
diff --git 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
@@ -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
@@ -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;