From 87f51fb7afa4c6a2aedcea729cce6ea40fe2acce Mon Sep 17 00:00:00 2001
From: "NaYeong,Kim" <nayeongkim@megazone.com>
Date: Wed, 18 Dec 2024 13:51:47 +0900
Subject: [PATCH] feat: update user select dropdown (#5246)

* chore: update translations

Signed-off-by: NaYeong,Kim <nayeongkim@megazone.com>

* feat: create user group reference store

Signed-off-by: NaYeong,Kim <nayeongkim@megazone.com>

* feat: update user select dropdown

Signed-off-by: NaYeong,Kim <nayeongkim@megazone.com>

* chore: update translations

Signed-off-by: NaYeong,Kim <nayeongkim@megazone.com>

* refactor: cleanup code(add type, apply props)

Signed-off-by: NaYeong,Kim <nayeongkim@megazone.com>

* refactor: return type change

Signed-off-by: NaYeong,Kim <nayeongkim@megazone.com>

---------

Signed-off-by: NaYeong,Kim <nayeongkim@megazone.com>
---
 .../modules/user/UserSelectDropdown.vue       | 277 +++++++++++++-----
 apps/web/src/common/modules/user/typte.ts     |   4 +
 .../base-managed-model-config.ts              |   2 +
 .../user-group-variable-model.ts              |  20 ++
 .../stores/all-reference-type-info-store.ts   |   5 +-
 .../store/reference/all-reference-store.ts    |  10 +
 .../reference/user-group-reference-store.ts   | 106 +++++++
 .../console-translation-2.8.babel             |  76 ++++-
 packages/language-pack/en.json                |   5 +
 packages/language-pack/ja.json                |   5 +
 packages/language-pack/ko.json                |   5 +
 11 files changed, 439 insertions(+), 76 deletions(-)
 create mode 100644 apps/web/src/common/modules/user/typte.ts
 create mode 100644 apps/web/src/lib/variable-models/managed-model/resource-model/user-group-variable-model.ts
 create mode 100644 apps/web/src/store/reference/user-group-reference-store.ts

diff --git a/apps/web/src/common/modules/user/UserSelectDropdown.vue b/apps/web/src/common/modules/user/UserSelectDropdown.vue
index 8ef8cf9179..6c2f2bb72e 100644
--- a/apps/web/src/common/modules/user/UserSelectDropdown.vue
+++ b/apps/web/src/common/modules/user/UserSelectDropdown.vue
@@ -1,118 +1,190 @@
 <script setup lang="ts">
-import type { Ref } from 'vue';
 import {
-    ref, computed, toRef, watch,
+    computed, reactive, watch,
 } from 'vue';
 
 import { isEqual } from 'lodash';
 
-import { PSelectDropdown, getTextHighlightRegex } from '@cloudforet/mirinae';
-import type { AutocompleteHandler, SelectDropdownMenuItem } from '@cloudforet/mirinae/types/controls/dropdown/select-dropdown/type';
+import {
+    getTextHighlightRegex, PAvatar, PSelectDropdown, PTag,
+} from '@cloudforet/mirinae';
+import type {
+    AutocompleteHandler,
+    SelectDropdownMenuItem,
+} from '@cloudforet/mirinae/types/controls/dropdown/select-dropdown/type';
+
+import { i18n } from '@/translations';
 
+import { useAllReferenceStore } from '@/store/reference/all-reference-store';
+import type { UserGroupReferenceMap } from '@/store/reference/user-group-reference-store';
 import type { UserReferenceMap } from '@/store/reference/user-reference-store';
-import { useUserReferenceStore } from '@/store/reference/user-reference-store';
 
-import ErrorHandler from '@/common/composables/error/errorHandler';
+import type { SelectedUserDropdownIdsType } from '@/common/modules/user/typte';
+
+import { indigo } from '@/styles/colors';
 
-interface UserDropdownItem extends SelectDropdownMenuItem {
+interface DropdownItem extends SelectDropdownMenuItem {
     name: string;
     label: string;
+    members?: number;
+    userName?: string;
 }
+type DropdownCategoriesType = {
+    key: string;
+    title: string;
+};
 
 const props = withDefaults(defineProps<{
-     userId?: string;
-     userIds?: string[];
+     selectedId?: SelectedUserDropdownIdsType;
+     selectedIds?: SelectedUserDropdownIdsType[];
      selectionType?: 'single'|'multiple';
      useFixedMenuStyle?: boolean;
      invalid?: boolean;
      disabled?: boolean;
      readonly?: boolean;
      userPool?: string[];
+     appearanceType?: 'badge'|'stack';
+     showUserList?: boolean;
+     showUserGroupList?: boolean;
+     showCategoryTitle?: boolean;
 }>(), {
-    userId: '',
-    userIds: () => [],
+    selectedId: undefined,
+    selectedIds: undefined,
     selectionType: 'single',
     useFixedMenuStyle: false,
     invalid: false,
     disabled: false,
     userPool: undefined,
+    appearanceType: 'badge',
+    showUserList: true,
+    showUserGroupList: true,
+    showCategoryTitle: true,
 });
 
-const emit = defineEmits<{(event: 'update:user-ids', value: string[]): void;
-    (event: 'update:user-id', value: string): void;
+const emit = defineEmits<{(event: 'update:selected-ids', value: SelectedUserDropdownIdsType[]): void;
+    (event: 'update:selected-id', value?: SelectedUserDropdownIdsType): void;
 }>();
 
-const userReferenceStore = useUserReferenceStore();
-const loading = computed(() => userReferenceStore.getters.loading);
-const userReferenceMap: Ref<Readonly<UserReferenceMap>> = toRef(userReferenceStore.getters, 'userItems');
-const allUserItems = computed<UserDropdownItem[]>(() => {
-    if (props.userPool && props.userPool.length > 0) {
-        return props.userPool.map((userId) => ({
-            name: userId,
-            label: userReferenceMap.value[userId]?.label ?? userId,
+const allReferenceStore = useAllReferenceStore();
+const allReferenceGetters = allReferenceStore.getters;
+
+const storeState = reactive({
+    userReferenceMap: computed<UserReferenceMap>(() => allReferenceGetters.user),
+    userGroupReferenceMap: computed<UserGroupReferenceMap>(() => allReferenceGetters.user_group),
+});
+const state = reactive({
+    dropdownCategories: computed<DropdownCategoriesType[]>(() => {
+        const result: DropdownCategoriesType[] = [];
+        if (props.showUserList) {
+            result.push({
+                key: 'user',
+                title: i18n.t('COMMON.USER_SELECT_DROPDOWN.USER') as string,
+            });
+        }
+        if (props.showUserGroupList) {
+            result.push({
+                key: 'user_group',
+                title: i18n.t('COMMON.USER_SELECT_DROPDOWN.USER_GROUP') as string,
+            });
+        }
+        return result;
+    }),
+    allUserItems: computed<DropdownItem[]>(() => {
+        if (!props.showUserList) return [];
+        if (props.userPool && props.userPool.length > 0) {
+            return props.userPool.map((userId) => ({
+                name: userId,
+                label: storeState.userReferenceMap[userId]?.label ?? userId,
+            }));
+        }
+        return Object.values(storeState.userReferenceMap).map((u: UserReferenceMap[string]) => ({
+            name: u.key,
+            label: u.key,
+            userName: u.name,
         }));
-    }
-    return Object.values(userReferenceMap.value).map((u: UserReferenceMap[string]) => ({
-        name: u.key,
-        label: u.label,
-    }));
+    }),
+    allUserGroupItems: computed<DropdownItem[]>(() => {
+        if (!props.showUserGroupList) return [];
+        return Object.values(storeState.userGroupReferenceMap).map((u: UserGroupReferenceMap[string]) => ({
+            name: u.key,
+            label: u.label,
+            members: u.data.users?.length,
+        }));
+    }),
+    selectedItems: [] as SelectDropdownMenuItem[],
 });
-const selectedUserItems = ref<SelectDropdownMenuItem[]>([]);
-const userMenuItemsHandler: AutocompleteHandler = async (keyword: string, pageStart = 1, pageLimit = 10) => {
-    const filteredItems = allUserItems.value.filter((item) => getTextHighlightRegex(keyword).test(item.label));
+
+const menuItemsHandler = (): AutocompleteHandler => async (keyword: string, pageStart = 1, pageLimit = 10, filters, resultIndex) => {
     const _totalCount = pageStart - 1 + pageLimit;
-    const _slicedResults = filteredItems.slice(pageStart - 1, _totalCount);
-    return {
-        results: _slicedResults,
-        more: _totalCount < filteredItems.length,
-    };
+    const filterItems = (items: DropdownItem[]) => items.filter((item) => getTextHighlightRegex(keyword).test(item.name)).slice(pageStart - 1, _totalCount);
+
+    if (resultIndex === undefined) {
+        return state.dropdownCategories.map((c, idx) => {
+            const items = c.key === 'user' ? state.allUserItems : state.allUserGroupItems;
+            const _slicedItems = filterItems(items);
+            if (props.showCategoryTitle) {
+                _slicedItems.unshift({ type: 'header', label: c.title, name: 'header' });
+            }
+            if (idx !== 0) {
+                _slicedItems.unshift({ type: 'divider', label: '', name: '' });
+            }
+            return {
+                results: _slicedItems,
+                more: _totalCount < items.length,
+            };
+        });
+    }
+
+    return state.dropdownCategories.map((c, i) => {
+        const items = c.key === 'user' ? state.allUserItems : state.allUserGroupItems;
+        const _slicedItems = filterItems(items);
+        if (i !== resultIndex) return { results: [], title: c.title };
+        return {
+            results: _slicedItems,
+            more: _totalCount < items.length,
+        };
+    });
 };
 
-const currentUserIds = computed<string[]>(() => selectedUserItems.value.map((item) => item.name));
-const currentUserId = computed<string | undefined>(() => currentUserIds.value[0]);
+const currentUserIds = computed<SelectedUserDropdownIdsType[]>(() => state.selectedItems.map((item) => ({ value: item.name, type: checkUserGroup(item.name) ? 'USER_GROUP' : 'USER' })));
+const currentUserId = computed<SelectedUserDropdownIdsType|undefined>(() => ({ value: state.selectedItems[0]?.name, type: checkUserGroup(state.selectedItems[0]?.name) ? 'USER_GROUP' : 'USER' }));
 
 const handleUpdateSelectedUserItems = (selectedUsers: SelectDropdownMenuItem[]) => {
-    if (isEqual(selectedUsers, selectedUserItems.value)) return; // prevent unnecessary update
-    selectedUserItems.value = selectedUsers; // it updates currentUserId and currentUserIds automatically
+    if (isEqual(selectedUsers, state.selectedItems)) return; // prevent unnecessary update
+    state.selectedItems = selectedUsers; // it updates currentUserId and currentUserIds automatically
     if (props.selectionType === 'single') {
-        if (currentUserId.value === props.userId) return; // prevent unnecessary update
-        emit('update:user-id', selectedUsers[0]?.name ?? '');
+        if (currentUserId?.value === props.selectedId) return; // prevent unnecessary update
+        emit('update:selected-id', currentUserId?.value);
     } else {
-        if (isEqual(currentUserIds.value, props.userIds)) return; // prevent unnecessary update
-        emit('update:user-ids', currentUserIds.value);
+        if (isEqual(currentUserIds.value, props.selectedIds)) return; // prevent unnecessary update
+        emit('update:selected-ids', currentUserIds.value);
     }
 };
-const initSingleType = (_userId?: string) => {
-    if (currentUserId.value === _userId) {
-        return;
+const handleTagDelete = (idx: number) => {
+    state.selectedItems.splice(idx, 1);
+    emit('update:selected-ids', currentUserIds.value);
+};
+const initSingleType = (_userId?: SelectedUserDropdownIdsType) => {
+    if (currentUserId?.value !== _userId?.value) {
+        state.selectedItems = _userId?.value
+            ? [{ name: _userId?.value, label: storeState.userReferenceMap[_userId?.value]?.label ?? _userId?.value }]
+            : [];
     }
-    selectedUserItems.value = _userId ? [{
-        name: _userId,
-        label: userReferenceMap.value[_userId]?.label ?? _userId,
-    }] : [];
 };
-const initMultipleType = (_userIds?: string[]) => {
-    try {
-        if (!Array.isArray(_userIds)) {
-            throw new Error('userIds should be an array');
-        }
-        if (isEqual(currentUserIds.value, _userIds)) {
-            return;
-        }
-        selectedUserItems.value = _userIds.map((userId) => ({
-            name: userId,
-            label: userReferenceMap.value[userId]?.label ?? userId,
-            selected: true,
+const initMultipleType = (_userIds?: SelectedUserDropdownIdsType[]) => {
+    if (!Array.isArray(_userIds)) throw new Error('userIds should be an array');
+    if (!isEqual(currentUserIds.value, _userIds)) {
+        state.selectedItems = _userIds.map((userId) => ({
+            name: userId.value,
+            label: storeState.userReferenceMap[userId.value]?.label ?? userId.value,
         }));
-    } catch (e) {
-        ErrorHandler.handleError(e);
     }
 };
+const checkUserGroup = (id: string): boolean => state.allUserGroupItems.some((i) => i.name === id);
 
-watch([loading, () => props.userId, () => props.userIds], ([_loading, newUserId, newUserIds]) => {
-    if (_loading) return;
+watch([() => props.selectedId, () => props.selectedIds], ([newUserId, newUserIds]) => {
     if (props.selectionType === 'single') {
-        if (currentUserId.value === newUserId) return; // prevent infinite loop
+        if (currentUserId?.value === newUserId) return; // prevent infinite loop
         initSingleType(newUserId);
     } else {
         if (isEqual(currentUserIds.value, newUserIds)) return; // prevent infinite loop
@@ -123,16 +195,79 @@ watch([loading, () => props.userId, () => props.userIds], ([_loading, newUserId,
 
 <template>
     <p-select-dropdown show-select-marker
-                       :selected="selectedUserItems"
-                       :handler="userMenuItemsHandler"
+                       class="user-select-dropdown"
+                       :selected="state.selectedItems"
+                       :handler="menuItemsHandler()"
                        is-filterable
                        :invalid="props.invalid"
                        :disabled="props.disabled"
                        :readonly="props.readonly"
-                       :use-fixed-menu-style="useFixedMenuStyle"
+                       page-size="10"
+                       :use-fixed-menu-style="props.useFixedMenuStyle"
                        show-delete-all-button
                        :multi-selectable="props.selectionType === 'multiple'"
-                       appearance-type="badge"
+                       :appearance-type="props.appearanceType"
                        @update:selected="handleUpdateSelectedUserItems"
-    />
+    >
+        <template v-if="props.appearanceType === 'stack'"
+                  #dropdown-button
+        >
+            <div class="flex flex-wrap py-1 gap-y-2">
+                <p-tag v-for="(item, idx) in state.selectedItems"
+                       :key="item.name"
+                       :outline="!checkUserGroup(item.name)"
+                       class="tag border-none"
+                       selected
+                       :deletable="!props.disabled"
+                       @delete="handleTagDelete(idx)"
+                >
+                    <div class="member-menu-item h-4">
+                        <p-avatar v-if="checkUserGroup(item.name)"
+                                  icon="ic_member"
+                                  :color="indigo[300]"
+                                  size="xs"
+                        />
+                        <p-avatar v-else
+                                  size="xs"
+                        />
+                        <span class="leading-4">{{ item.label }}</span>
+                    </div>
+                </p-tag>
+            </div>
+        </template>
+        <template #menu-item--format="{ item }">
+            <div class="member-menu-item">
+                <div>
+                    <p-avatar v-if="checkUserGroup(item.name)"
+                              class="menu-icon"
+                              icon="ic_member"
+                              :color="indigo[300]"
+                              size="xs"
+                    />
+                    <p-avatar v-else
+                              class="menu-icon"
+                              size="xs"
+                    />
+                </div>
+                <span>{{ item.label }}</span>
+                <span class="text-gray-500">
+                    <span v-if="checkUserGroup(item.name)">({{ item?.members || 0 }} {{ $t('ALERT_MANAGER.ALERTS.MEMBERS') }})</span>
+                    <span v-else-if="item?.userName">({{ item?.userName }})</span>
+                </span>
+            </div>
+        </template>
+    </p-select-dropdown>
 </template>
+
+<style scoped lang="postcss">
+.user-select-dropdown {
+    .member-menu-item {
+        @apply flex items-center;
+        gap: 0.25rem;
+    }
+    .tag {
+        padding-top: 0.125rem;
+        padding-bottom: 0.125rem;
+    }
+}
+</style>
diff --git a/apps/web/src/common/modules/user/typte.ts b/apps/web/src/common/modules/user/typte.ts
new file mode 100644
index 0000000000..b7ff735180
--- /dev/null
+++ b/apps/web/src/common/modules/user/typte.ts
@@ -0,0 +1,4 @@
+export type SelectedUserDropdownIdsType = {
+    value: string;
+    type: 'USER'|'USER_GROUP';
+};
diff --git a/apps/web/src/lib/variable-models/managed-model-config/base-managed-model-config.ts b/apps/web/src/lib/variable-models/managed-model-config/base-managed-model-config.ts
index ac3793c0a8..ff4df799f6 100644
--- a/apps/web/src/lib/variable-models/managed-model-config/base-managed-model-config.ts
+++ b/apps/web/src/lib/variable-models/managed-model-config/base-managed-model-config.ts
@@ -22,6 +22,7 @@ import RoleVariableModel from '@/lib/variable-models/managed-model/resource-mode
 import SecretVariableModel from '@/lib/variable-models/managed-model/resource-model/secret-variable-model';
 import ServiceAccountVariableModel from '@/lib/variable-models/managed-model/resource-model/service-account-variable-model';
 import UnifiedCostVariableModel from '@/lib/variable-models/managed-model/resource-model/unified-cost-variable-model';
+import UserGroupVariableModel from '@/lib/variable-models/managed-model/resource-model/user-group-variable-model';
 import UserVariableModel from '@/lib/variable-models/managed-model/resource-model/user-variable-model';
 import WebhookVariableModel from '@/lib/variable-models/managed-model/resource-model/webhook-variable-model';
 import WorkspaceGroupVariableModel from '@/lib/variable-models/managed-model/resource-model/workspace-group-variable-model';
@@ -47,6 +48,7 @@ const RESOURCE_VARIABLE_MODELS = {
     secret: SecretVariableModel,
     service_account: ServiceAccountVariableModel,
     user: UserVariableModel,
+    user_group: UserGroupVariableModel,
     webhook: WebhookVariableModel,
     workspace: WorkspaceVariableModel,
     workspace_group: WorkspaceGroupVariableModel,
diff --git a/apps/web/src/lib/variable-models/managed-model/resource-model/user-group-variable-model.ts b/apps/web/src/lib/variable-models/managed-model/resource-model/user-group-variable-model.ts
new file mode 100644
index 0000000000..524e3a0972
--- /dev/null
+++ b/apps/web/src/lib/variable-models/managed-model/resource-model/user-group-variable-model.ts
@@ -0,0 +1,20 @@
+import type { UserGroupModel } from '@/schema/identity/user-group/model';
+
+import ResourceVariableModel from '@/lib/variable-models/_base/resource-variable-model';
+import type { VariableModelConstructorConfig } from '@/lib/variable-models/_base/types';
+
+
+export default class UserGroupVariableModel extends ResourceVariableModel<UserGroupModel> {
+    static meta = {
+        key: 'user_group',
+        name: 'User Group',
+        resourceType: 'identity.UserGroup',
+        idKey: 'user_group_id',
+        nameKey: 'name',
+    };
+
+    constructor(config: VariableModelConstructorConfig = {}) {
+        super(config);
+        this._meta = UserGroupVariableModel.meta;
+    }
+}
diff --git a/apps/web/src/services/dashboards/stores/all-reference-type-info-store.ts b/apps/web/src/services/dashboards/stores/all-reference-type-info-store.ts
index f4ae21f9c7..44ebb4f924 100644
--- a/apps/web/src/services/dashboards/stores/all-reference-type-info-store.ts
+++ b/apps/web/src/services/dashboards/stores/all-reference-type-info-store.ts
@@ -17,13 +17,13 @@ import { useRegionReferenceStore } from '@/store/reference/region-reference-stor
 import { useSecretReferenceStore } from '@/store/reference/secret-reference-store';
 import { useServiceAccountReferenceStore } from '@/store/reference/service-account-reference-store';
 import type { ReferenceTypeInfo } from '@/store/reference/type';
+import { useUserGroupReferenceStore } from '@/store/reference/user-group-reference-store';
 import { useUserReferenceStore } from '@/store/reference/user-reference-store';
 import { useWebhookReferenceStore } from '@/store/reference/webhook-reference-store';
 import { useWorkspaceReferenceStore } from '@/store/reference/workspace-reference-store';
 
 import type { ManagedVariableModelKey } from '@/lib/variable-models/managed-model-config/base-managed-model-config';
 
-
 export type ReferenceType = Extract<ManagedVariableModelKey,
     | 'protocol'
     | 'cloud_service_type'
@@ -36,6 +36,7 @@ export type ReferenceType = Extract<ManagedVariableModelKey,
     | 'project_group'
     | 'project'
     | 'user'
+    | 'user_group'
     | 'cost_data_source'
     | 'cloud_service_query_set'
     | 'workspace'
@@ -57,6 +58,7 @@ export const useAllReferenceTypeInfoStore = defineStore('all-reference-type-info
     const providerReferenceStore = useProviderReferenceStore();
     const workspaceReferenceStore = useWorkspaceReferenceStore();
     const userReferenceStore = useUserReferenceStore();
+    const userGroupReferenceStore = useUserGroupReferenceStore();
     const serviceAccountReferenceStore = useServiceAccountReferenceStore();
     const webhookReferenceStore = useWebhookReferenceStore();
     const secretReferenceStore = useSecretReferenceStore();
@@ -75,6 +77,7 @@ export const useAllReferenceTypeInfoStore = defineStore('all-reference-type-info
             project_group: projectGroupReferenceStore.getters.projectGroupTypeInfo,
             project: projectReferenceStore.getters.projectTypeInfo,
             user: userReferenceStore.getters.userTypeInfo,
+            user_group: userGroupReferenceStore.getters.userGroupTypeInfo,
             cost_data_source: costDataSourceReferenceStore.getters.costDataSourceTypeInfo,
             cloud_service_query_set: cloudServiceQuerySetReferenceStore.getters.cloudServiceQuerySetTypeInfo,
             workspace: workspaceReferenceStore.getters.workspaceTypeInfo,
diff --git a/apps/web/src/store/reference/all-reference-store.ts b/apps/web/src/store/reference/all-reference-store.ts
index 5b9312d0ee..3bdd742e1c 100644
--- a/apps/web/src/store/reference/all-reference-store.ts
+++ b/apps/web/src/store/reference/all-reference-store.ts
@@ -35,6 +35,8 @@ import { useSecretReferenceStore } from '@/store/reference/secret-reference-stor
 import { useServiceAccountReferenceStore } from '@/store/reference/service-account-reference-store';
 import { useTrustedAccountReferenceStore } from '@/store/reference/trusted-account-reference-store';
 import type { ReferenceLoadOptions } from '@/store/reference/type';
+import type { UserGroupReferenceMap } from '@/store/reference/user-group-reference-store';
+import { useUserGroupReferenceStore } from '@/store/reference/user-group-reference-store';
 import type { UserReferenceMap } from '@/store/reference/user-reference-store';
 import { useUserReferenceStore } from '@/store/reference/user-reference-store';
 import { useWebhookReferenceStore } from '@/store/reference/webhook-reference-store';
@@ -61,6 +63,7 @@ type PiniaStoreReferenceType =
     |'service_account'
     |'trusted_account'
     |'user'
+    |'user_group'
     |'webhook'
     |'workspace'
     |'escalation_policy'
@@ -81,6 +84,7 @@ export const useAllReferenceStore = defineStore('all-reference-store', () => {
     const providerReferenceStore = useProviderReferenceStore();
     const workspaceReferenceStore = useWorkspaceReferenceStore();
     const userReferenceStore = useUserReferenceStore();
+    const userGroupReferenceStore = useUserGroupReferenceStore();
     const publicDashboardReferenceStore = usePublicDashboardReferenceStore();
     const publicFolderReferenceStore = usePublicFolderReferenceStore();
     const serviceAccountReferenceStore = useServiceAccountReferenceStore();
@@ -106,6 +110,7 @@ export const useAllReferenceStore = defineStore('all-reference-store', () => {
         protocol: computed(() => protocolReferenceStore.getters.protocolItems),
         provider: computed(() => providerReferenceStore.getters.providerItems),
         user: computed<UserReferenceMap>(() => userReferenceStore.getters.userItems),
+        user_group: computed<UserGroupReferenceMap>(() => userGroupReferenceStore.getters.userGroupItems),
         costDataSource: computed<CostDataSourceReferenceMap>(() => costDataSourceReferenceStore.getters.costDataSourceItems),
         cost_data_source: computed<CostDataSourceReferenceMap>(() => costDataSourceReferenceStore.getters.costDataSourceItems),
         cloudServiceQuerySet: computed<CloudServiceQuerySetReferenceMap>(() => cloudServiceQuerySetReferenceStore.getters.cloudServiceQuerySetItems),
@@ -154,6 +159,8 @@ export const useAllReferenceStore = defineStore('all-reference-store', () => {
                 await workspaceGroupReferenceStore.sync(data); break;
             case 'user':
                 await userReferenceStore.sync(data); break;
+            case 'user_group':
+                await userGroupReferenceStore.sync(data); break;
             case 'public_dashboard':
                 await publicDashboardReferenceStore.sync(data); break;
             case 'public_folder':
@@ -203,6 +210,8 @@ export const useAllReferenceStore = defineStore('all-reference-store', () => {
                 await workspaceGroupReferenceStore.load(options); break;
             case 'user':
                 await userReferenceStore.load(options); break;
+            case 'user_group':
+                await userGroupReferenceStore.load(options); break;
             case 'public_dashboard':
                 await publicDashboardReferenceStore.load(options); break;
             case 'public_folder':
@@ -243,6 +252,7 @@ export const useAllReferenceStore = defineStore('all-reference-store', () => {
             workspaceReferenceStore.flush();
             workspaceGroupReferenceStore.flush();
             userReferenceStore.flush();
+            userGroupReferenceStore.flush();
             publicDashboardReferenceStore.flush();
             publicFolderReferenceStore.flush();
             serviceAccountReferenceStore.flush();
diff --git a/apps/web/src/store/reference/user-group-reference-store.ts b/apps/web/src/store/reference/user-group-reference-store.ts
new file mode 100644
index 0000000000..cc25d738c6
--- /dev/null
+++ b/apps/web/src/store/reference/user-group-reference-store.ts
@@ -0,0 +1,106 @@
+import { asyncComputed } from '@vueuse/core';
+import { computed, reactive } from 'vue';
+
+import { defineStore } from 'pinia';
+
+import { SpaceConnector } from '@cloudforet/core-lib/space-connector';
+
+import type { ListResponse } from '@/schema/_common/api-verbs/list';
+import type { UserGroupListParameters } from '@/schema/identity/user-group/api-verbs/list';
+import type { UserGroupModel } from '@/schema/identity/user-group/model';
+
+import type {
+    ReferenceItem, ReferenceLoadOptions, ReferenceMap, ReferenceTypeInfo,
+} from '@/store/reference/type';
+import { useUserStore } from '@/store/user/user-store';
+
+import { MANAGED_VARIABLE_MODELS } from '@/lib/variable-models/managed-model-config/base-managed-model-config';
+
+type UserGroupReferenceItem = Required<Pick<ReferenceItem<UserGroupModel>, 'key'|'label'|'name'|'data'>>;
+export type UserGroupReferenceMap = ReferenceMap<UserGroupReferenceItem>;
+
+const LOAD_TTL = 1000 * 60 * 60 * 3; // 3 hours
+let lastLoadedTime = 0;
+
+export const useUserGroupReferenceStore = defineStore('reference-user-group', () => {
+    const userStore = useUserStore();
+
+    const state = reactive({
+        items: null as UserGroupReferenceMap | null,
+    });
+
+    const getters = reactive({
+        userGroupItems: asyncComputed<UserGroupReferenceMap>(async () => {
+            if (!userStore.state.currentGrantInfo?.scope || userStore.state.currentGrantInfo?.scope === 'USER') return {};
+            if (state.items === null) await load();
+            return state.items ?? {};
+        }, {}, { lazy: true }),
+        userGroupTypeInfo: computed<ReferenceTypeInfo>(() => ({
+            type: MANAGED_VARIABLE_MODELS.user_group.meta.key,
+            key: MANAGED_VARIABLE_MODELS.user_group.meta.idKey,
+            name: MANAGED_VARIABLE_MODELS.user_group.meta.name,
+            referenceMap: getters.userGroupItems,
+        })),
+    });
+
+    const load = async (options?: ReferenceLoadOptions) => {
+        const currentTime = new Date().getTime();
+        if (
+            ((lastLoadedTime !== 0 && currentTime - lastLoadedTime < LOAD_TTL)
+                || (options?.lazyLoad && state.items)
+            ) && !options?.force
+        ) return;
+
+        const params: UserGroupListParameters = {
+            query: {
+                only: ['user_group_id', 'name', 'users'],
+            },
+        };
+
+        const fetcher = SpaceConnector.clientV2.identity.userGroup.list;
+        const { results } = await fetcher<UserGroupListParameters, ListResponse<UserGroupModel>>(params);
+
+        const referenceMap: UserGroupReferenceMap = {};
+        results?.forEach((userGroupInfo): void => {
+            referenceMap[userGroupInfo.user_group_id] = {
+                key: userGroupInfo.user_group_id,
+                label: userGroupInfo.name,
+                name: userGroupInfo.name,
+                data: userGroupInfo,
+            };
+        });
+        state.items = referenceMap;
+
+        lastLoadedTime = currentTime;
+    };
+
+    const sync = async (userGroupInfo: UserGroupModel) => {
+        state.items = {
+            ...state.items,
+            [userGroupInfo.user_group_id]: {
+                key: userGroupInfo.user_group_id,
+                label: userGroupInfo.name,
+                name: userGroupInfo.name,
+                data: userGroupInfo,
+            },
+        };
+    };
+
+    const flush = () => {
+        state.items = null;
+        lastLoadedTime = 0;
+    };
+
+    const actions = {
+        load,
+        sync,
+        flush,
+    };
+
+    return {
+        state,
+        getters,
+        ...actions,
+    };
+});
+
diff --git a/packages/language-pack/console-translation-2.8.babel b/packages/language-pack/console-translation-2.8.babel
index f4e716c417..591cffd37e 100644
--- a/packages/language-pack/console-translation-2.8.babel
+++ b/packages/language-pack/console-translation-2.8.babel
@@ -631,6 +631,27 @@
                                     </translation>
                                 </translations>
                             </concept_node>
+                            <concept_node>
+                                <name>MEMBERS</name>
+                                <definition_loaded>false</definition_loaded>
+                                <description/>
+                                <comment/>
+                                <default_text/>
+                                <translations>
+                                    <translation>
+                                        <language>en-US</language>
+                                        <approved>true</approved>
+                                    </translation>
+                                    <translation>
+                                        <language>ja-JP</language>
+                                        <approved>true</approved>
+                                    </translation>
+                                    <translation>
+                                        <language>ko-KR</language>
+                                        <approved>true</approved>
+                                    </translation>
+                                </translations>
+                            </concept_node>
                             <concept_node>
                                 <name>MODAL_DELETE_ALERT</name>
                                 <definition_loaded>false</definition_loaded>
@@ -23071,6 +23092,53 @@
                             </concept_node>
                         </children>
                     </folder_node>
+                    <folder_node>
+                        <name>USER_SELECT_DROPDOWN</name>
+                        <children>
+                            <concept_node>
+                                <name>USER</name>
+                                <definition_loaded>false</definition_loaded>
+                                <description/>
+                                <comment/>
+                                <default_text/>
+                                <translations>
+                                    <translation>
+                                        <language>en-US</language>
+                                        <approved>false</approved>
+                                    </translation>
+                                    <translation>
+                                        <language>ja-JP</language>
+                                        <approved>false</approved>
+                                    </translation>
+                                    <translation>
+                                        <language>ko-KR</language>
+                                        <approved>false</approved>
+                                    </translation>
+                                </translations>
+                            </concept_node>
+                            <concept_node>
+                                <name>USER_GROUP</name>
+                                <definition_loaded>false</definition_loaded>
+                                <description/>
+                                <comment/>
+                                <default_text/>
+                                <translations>
+                                    <translation>
+                                        <language>en-US</language>
+                                        <approved>false</approved>
+                                    </translation>
+                                    <translation>
+                                        <language>ja-JP</language>
+                                        <approved>false</approved>
+                                    </translation>
+                                    <translation>
+                                        <language>ko-KR</language>
+                                        <approved>false</approved>
+                                    </translation>
+                                </translations>
+                            </concept_node>
+                        </children>
+                    </folder_node>
                     <folder_node>
                         <name>WIDGETS</name>
                         <children>
@@ -54651,11 +54719,11 @@
                                                     </translation>
                                                     <translation>
                                                         <language>ja-JP</language>
-                                                        <approved>false</approved>
+                                                        <approved>true</approved>
                                                     </translation>
                                                     <translation>
                                                         <language>ko-KR</language>
-                                                        <approved>false</approved>
+                                                        <approved>true</approved>
                                                     </translation>
                                                 </translations>
                                             </concept_node>
@@ -54672,11 +54740,11 @@
                                                     </translation>
                                                     <translation>
                                                         <language>ja-JP</language>
-                                                        <approved>false</approved>
+                                                        <approved>true</approved>
                                                     </translation>
                                                     <translation>
                                                         <language>ko-KR</language>
-                                                        <approved>false</approved>
+                                                        <approved>true</approved>
                                                     </translation>
                                                 </translations>
                                             </concept_node>
diff --git a/packages/language-pack/en.json b/packages/language-pack/en.json
index 265bf37a0a..5e86d1f4a6 100644
--- a/packages/language-pack/en.json
+++ b/packages/language-pack/en.json
@@ -30,6 +30,7 @@
 			"LABEL_URGENCY": "Urgency",
 			"LOW": "Low",
 			"MANUALLY": "do it Manually",
+			"MEMBERS": "members",
 			"MODAL_DELETE_ALERT": "Are you sure you want to delete this alert?",
 			"MODAL_DELETE_NOTE": "Are you sure you want to delete selected item?",
 			"MODAL_EDIT_ALERT": "Edit Alert Name",
@@ -1288,6 +1289,10 @@
 			"SELECT_PROJECT": "Select Project",
 			"TITLE": "Change Project"
 		},
+		"USER_SELECT_DROPDOWN": {
+			"USER": "User",
+			"USER_GROUP": "User Group"
+		},
 		"WIDGETS": {
 			"ACTUAL": "Actual",
 			"ADD_WIDGET": "Add Widget",
diff --git a/packages/language-pack/ja.json b/packages/language-pack/ja.json
index 7f0942e01a..8a32b8f773 100644
--- a/packages/language-pack/ja.json
+++ b/packages/language-pack/ja.json
@@ -30,6 +30,7 @@
 			"LABEL_URGENCY": "緊急度",
 			"LOW": "低い",
 			"MANUALLY": "手動で行います。",
+			"MEMBERS": "構成員",
 			"MODAL_DELETE_ALERT": "",
 			"MODAL_DELETE_NOTE": "選択した項目を削除しますか？",
 			"MODAL_EDIT_ALERT": "アラート名を修正",
@@ -1288,6 +1289,10 @@
 			"SELECT_PROJECT": "プロジェクト選択",
 			"TITLE": "プロジェクト変更"
 		},
+		"USER_SELECT_DROPDOWN": {
+			"USER": "ユーザー",
+			"USER_GROUP": ""
+		},
 		"WIDGETS": {
 			"ACTUAL": "実際のサイズ",
 			"ADD_WIDGET": "ウィジェットを追加する",
diff --git a/packages/language-pack/ko.json b/packages/language-pack/ko.json
index 5a32497f42..5bb88d7c71 100644
--- a/packages/language-pack/ko.json
+++ b/packages/language-pack/ko.json
@@ -30,6 +30,7 @@
 			"LABEL_URGENCY": "긴급도",
 			"LOW": "낮음",
 			"MANUALLY": "직접 완료합니다.",
+			"MEMBERS": "멤버",
 			"MODAL_DELETE_ALERT": "",
 			"MODAL_DELETE_NOTE": "선택한 항목을 삭제하시겠습니까?",
 			"MODAL_EDIT_ALERT": "얼럿 이름 수정",
@@ -1288,6 +1289,10 @@
 			"SELECT_PROJECT": "프로젝트 선택",
 			"TITLE": "프로젝트 변경"
 		},
+		"USER_SELECT_DROPDOWN": {
+			"USER": "사용자",
+			"USER_GROUP": ""
+		},
 		"WIDGETS": {
 			"ACTUAL": "실제 크기",
 			"ADD_WIDGET": "위젯 추가",