Merge remote-tracking branch 'cloudforet-io/develop' into feature-pro…

…ject-alert-manager

Signed-off-by: NaYeong,Kim <[email protected]>

.github/workflows/dispatch_preview_deploy_with_vercel.yml → .github/workflows/dispatch_deploy_to_specific_vercel_project.yaml

@@ -1,4 +1,4 @@
-name: "[Dispatch] Preview Deploy with Vercel"
+name: "[Dispatch] Deploy to specific vercel project"
 
 on:
   workflow_dispatch:

.github/workflows/check-pull-request.yml → .github/workflows/pull_request_base_check.yaml

@@ -1,5 +1,4 @@
-# .github/workflows/check-pull-request.yml
-name: Check Pull Request
+name: "[Pull Request] Base Check"
 
 on:
   pull_request_target:

.github/workflows/pull_request_code_warning.yml → .github/workflows/pull_request_code_warning.yaml

@@ -1,4 +1,4 @@
-name: "[PR] Code Warning"
+name: "[Pull Request] Code Warning"
 
 on:
   pull_request:

.github/workflows/pull_request_deploy_preview.yaml

@@ -1,4 +1,4 @@
-name: Deploy Vercel Preview on Comment
+name: "[Pull Request] Deploy Vercel Preview on Comment"
 
 on:
   issue_comment:

.github/workflows/pull_request_review.yml → .github/workflows/pull_request_review.yaml

@@ -1,4 +1,4 @@
-name: "[PR] Review"
+name: "[Pull Request] Review"
 
 on:
   pull_request:

apps/web/package.json

@@ -1,6 +1,6 @@
 {
   "name": "web",
-  "version": "2.0.0-dev256",
+  "version": "2.0.0-dev258",
   "private": true,
   "description": "Cloudforet Console Web Application",
   "author": "Cloudforet",

apps/web/src/common/components/select/DataSelector.vue

@@ -0,0 +1,90 @@
+<script setup lang="ts">
+import {
+    ref, onMounted, toRef, watch,
+} from 'vue';
+
+import { debounce } from 'lodash';
+
+import { PFieldTitle, PContextMenu, useContextMenuItems } from '@cloudforet/mirinae';
+import type { MenuAttachHandler } from '@cloudforet/mirinae/types/hooks/use-context-menu-attach/use-context-menu-attach';
+
+import type { DataSelectorItem } from '@/common/components/select/type';
+
+const props = defineProps<{
+    label?: string;
+    menu?: DataSelectorItem[];
+    handler?: MenuAttachHandler<DataSelectorItem>;
+}>();
+const emit = defineEmits<{(e: 'update:selected', value: DataSelectorItem[]): void;
+}>();
+
+const searchText = ref('');
+const selected = ref<DataSelectorItem[]>([]);
+
+const {
+    refinedMenu,
+    loading,
+    initiateMenu,
+    showMoreMenu,
+    reloadMenu,
+} = useContextMenuItems<DataSelectorItem>({
+    menu: toRef(props, 'menu'),
+    handler: toRef(props, 'handler'),
+    selected,
+    useMenuFiltering: true,
+    searchText,
+    pageSize: 10,
+    hideHeaderWithoutItems: true,
+});
+const handleUpdateSearchText = debounce((text: string) => {
+    searchText.value = text;
+    reloadMenu();
+}, 200);
+
+const handleUpdateSelected = (items: DataSelectorItem[]) => {
+    selected.value = items;
+    emit('update:selected', selected.value);
+};
+
+onMounted(() => {
+    selected.value = [];
+    emit('update:selected', selected.value);
+    initiateMenu();
+});
+
+watch([() => props.menu, () => props.handler], () => {
+    selected.value = [];
+    emit('update:selected', selected.value);
+    initiateMenu();
+});
+</script>
+
+<template>
+    <div>
+        <div class="flex flex-col gap-2">
+            <p-field-title class="py-0 px-3"
+                           :label="props.label"
+                           required
+            />
+            <p-context-menu :menu="refinedMenu"
+                            class="data-selector-context-menu"
+                            :loading="loading"
+                            :search-text="searchText"
+                            searchable
+                            :selected="selected"
+                            @click-show-more="showMoreMenu()"
+                            @update:search-text="handleUpdateSearchText"
+                            @update:selected="handleUpdateSelected"
+            />
+        </div>
+    </div>
+</template>
+
+<style lang="postcss">
+.data-selector-context-menu {
+    border: none;
+    min-height: 16rem;
+    max-height: 360px;
+    overflow-y: auto;
+}
+</style>

apps/web/src/common/components/select/type.ts

@@ -0,0 +1,6 @@
+import type { MenuItem } from '@cloudforet/mirinae/types/controls/context-menu/type';
+
+export interface DataSelectorItem extends MenuItem {
+    name: string;
+    label: string;
+}

apps/web/src/common/modules/widgets/_components/WidgetFormCostDataSourcePopper.vue

@@ -1,13 +1,8 @@
 <script lang="ts" setup>
 import {
-    computed, onMounted, reactive, toRef, watch,
+    computed, reactive, watch,
 } from 'vue';
 
-import { debounce } from 'lodash';
-
-import {
-    PFieldTitle, PContextMenu, useContextMenuController,
-} from '@cloudforet/mirinae';
 import type { MenuItem } from '@cloudforet/mirinae/types/controls/context-menu/type';
 import type { AutocompleteHandler } from '@cloudforet/mirinae/types/controls/dropdown/select-dropdown/type';
 
@@ -24,6 +19,7 @@ import {
     getVariableModelMenuHandler,
 } from '@/lib/variable-models/variable-model-menu-handler';
 
+import DataSelector from '@/common/components/select/DataSelector.vue';
 import { useProxyValue } from '@/common/composables/proxy-state';
 
 
@@ -52,7 +48,6 @@ const state = reactive({
         };
         return getVariableModelMenuHandler([variableModelInfo]);
     }),
-    dataSourceSearchText: '',
     // data type
     dataTypeMenuItems: computed<MenuItem[]>(() => {
         if (!state.selectedDataSource.length) return [];
@@ -69,38 +64,17 @@ const state = reactive({
             { type: 'item', name: 'usage_quantity', label: 'Usage' },
             ...(additionalMenuItems || []),
         ];
-        return dataTypeItems.filter((d) => d.label.toLowerCase().includes(state.dataTypeSearchText.toLowerCase()));
+        return dataTypeItems;
     }),
-    dataTypeSearchText: '',
     selectedDataType: [] as MenuItem[],
 });
-const {
-    refinedMenu,
-    initiateMenu,
-    reloadMenu,
-} = useContextMenuController({
-    targetRef: toRef(state, 'targetRef'),
-    searchText: toRef(state, 'dataSourceSearchText'),
-    handler: toRef(state, 'dataSourceMenuHandler'),
-    selected: toRef(state, 'selectedDataSource'),
-    pageSize: 10,
-});
 
 /* Event */
-const handleUpdateCostDataSourceSearchText = debounce((text: string) => {
-    state.dataSourceSearchText = text;
-    reloadMenu();
-}, 200);
-const handleSelectDataSource = () => {
+const handleSelectDataSource = (items: MenuItem[]) => {
+    state.selectedDataSource = items;
     state.selectedDataType = [];
 };
 
-onMounted(() => {
-    state.selectedDataSource = [];
-    state.selectedDataType = [];
-    initiateMenu();
-});
-
 /* Watcher */
 watch(() => state.selectedDataSource, (val) => {
     state.proxySelectedCostDataSourceId = val[0]?.name;
@@ -113,27 +87,15 @@ watch(() => state.selectedDataType, (val) => {
 <template>
     <div class="widget-form-cost-data-source-popper">
         <div class="data-source-select-col">
-            <p-field-title class="field-title"
-                           :label="i18n.t('Data Source')"
-                           required
-            />
-            <p-context-menu :menu="refinedMenu"
-                            :search-text="state.dataSourceSearchText"
-                            searchable
-                            :selected.sync="state.selectedDataSource"
-                            @update:search-text="handleUpdateCostDataSourceSearchText"
-                            @select="handleSelectDataSource"
+            <data-selector :label="i18n.t('Data Source')"
+                           :handler="state.dataSourceMenuHandler"
+                           @update:selected="handleSelectDataSource"
             />
         </div>
         <div class="data-source-select-col">
-            <p-field-title class="field-title"
-                           :label="i18n.t('Data Type')"
-                           required
-            />
-            <p-context-menu :menu="state.dataTypeMenuItems"
-                            :search-text.sync="state.dataTypeSearchText"
-                            searchable
-                            :selected.sync="state.selectedDataType"
+            <data-selector :label="i18n.t('Data Type')"
+                           :menu="state.dataTypeMenuItems"
+                           @update:selected="state.selectedDataType = $event"
             />
         </div>
     </div>
@@ -151,17 +113,9 @@ watch(() => state.selectedDataType, (val) => {
         gap: 0.5rem;
         width: 16rem;
         padding: 0.75rem 0;
-        .field-title {
-            padding: 0 0.75rem;
-        }
         &:last-child {
             @apply border-r-0;
         }
     }
 }
-
-/* custom design-system component - p-context-menu */
-:deep(.p-context-menu) {
-    border: none;
-}
 </style>

apps/web/src/lib/variable-models/variable-model-menu-handler.ts

@@ -1,3 +1,6 @@
+import type { Ref } from 'vue';
+import { isRef } from 'vue';
+
 import type { AutocompleteHandler } from '@cloudforet/mirinae/types/controls/dropdown/select-dropdown/type';
 
 import type { VariableModel } from '@/lib/variable-models/_base/types';
@@ -15,15 +18,16 @@ const _getTitle = (modelInfo: VariableModelMenuHandlerInfo) => {
     return _dataKey ? modelInfo.variableModel[_dataKey].name : modelInfo.variableModel._meta?.name;
 };
 
-export const getVariableModelMenuHandler = (variableModelInfoList: VariableModelMenuHandlerInfo[], options: Record<string, any> = {}): AutocompleteHandler => {
+type Options = Record<string, any>;
+export const getVariableModelMenuHandler = (variableModelInfoList: VariableModelMenuHandlerInfo[], options: Options|Ref<Options> = {}): AutocompleteHandler => {
     const _variableModelInfoList = variableModelInfoList;
     return async (inputText: string, pageStart, pageLimit, filters, resultIndex) => {
         const _query = {
             start: pageStart,
             limit: pageLimit ?? 10,
             search: inputText,
             filters: filters?.length ? filters.map((f) => f.name as string) : undefined,
-            options,
+            options: isRef<Options>(options) ? options.value : options,
         };
 
         // if resultIndex is empty, it means that the handler is called for the first time. so, we need to call all variableModels' list().

apps/web/src/services/cost-explorer/components/CostAnalysisHeader.vue

@@ -192,7 +192,7 @@ watch(() => state.favoriteOptions, async (favoriteOptions) => {
                                icon="ic_info-circle"
                                layout="in-section"
         >
-            {{ $t('COST_EXPLORER.COST_ANALYSIS.UNIFIED_COST_DESC') }}
+            {{ storeState.isAdminMode ? $t('COST_EXPLORER.COST_ANALYSIS.UNIFIED_COST_ADMIN_DESC') : $t('COST_EXPLORER.COST_ANALYSIS.UNIFIED_COST_DESC') }}
         </p-scoped-notification>
         <p-divider class="heading-divider" />
         <cost-analysis-query-form-modal :visible.sync="state.queryFormModalVisible"

apps/web/src/services/dashboards/DashboardsLSB.vue

@@ -229,7 +229,7 @@ callApiWithGrantGuard();
         <template v-if="!storeState.isAdminMode"
                   #slot-shared
         >
-            <l-s-b-collapsible-menu-item v-if="dashboardPageControlGetters.publicDashboardItems.length"
+            <l-s-b-collapsible-menu-item v-if="dashboardPageControlGetters.publicFolderItems.length || dashboardPageControlGetters.publicDashboardItems.length"
                                          class="category-menu-item mt-1"
                                          :item="{
                                              type: 'collapsible',
@@ -246,7 +246,7 @@ callApiWithGrantGuard();
             </l-s-b-collapsible-menu-item>
         </template>
         <template #slot-private>
-            <l-s-b-collapsible-menu-item v-if="dashboardPageControlGetters.privateFolderItems.length"
+            <l-s-b-collapsible-menu-item v-if="dashboardPageControlGetters.privateFolderItems.length || dashboardPageControlGetters.privateDashboardItems.length"
                                          class="category-menu-item mt-1"
                                          :item="{
                                              type: 'collapsible',

apps/web/src/services/project/components/ProjectDetailTabHeader.vue

@@ -67,9 +67,11 @@ interface ViewInItem {
     to: Location;
 }
 interface Props {
-    id: string;
+    id?: string;
 }
-const props = defineProps<Props>();
+const props = withDefaults(defineProps<Props>(), {
+    id: '',
+});
 // const route = useRoute();
 const router = useRouter();
 const { getProperRouteLocation } = useProperRouteLocation();
@@ -301,7 +303,7 @@ watch(() => projectDetailPageGetters.projectType, async () => {
     await Promise.allSettled([
         fetchUserList(),
     ]);
-});
+}, { immediate: true });
 
 watch(() => projectDetailPageState.projectId, async (projectId) => {
     if (projectId) {
@@ -310,7 +312,7 @@ watch(() => projectDetailPageState.projectId, async (projectId) => {
             projectDetailPageStore.getAlertCounts(projectId),
         ]);
     }
-});
+}, { immediate: true });
 
 
 watch([
@@ -404,7 +406,7 @@ watch(() => projectDetailPageState.projectId, (projectId) => {
                                          height="0.75rem"
                                          color="inherit"
                                     />
-                                    <span>{{ memberState.totalCount }}{{ $t('PROJECT.DETAIL.MEMBERS') }}</span>
+                                    <span>{{ memberState.totalCount }} {{ $t('PROJECT.DETAIL.MEMBERS') }}</span>
                                 </template>
                             </div>
                             <p-i name="ic_dot"

apps/web/src/services/project/pages/ProjectDetailTabPage.vue

@@ -183,7 +183,9 @@ onUnmounted(() => {
 
 <template>
     <div class="project-detail-tab-page">
-        <project-detail-tab-header :id="props.id" />
+        <project-detail-tab-header :id="props.id"
+                                   :key="`project-detail-tab-header-${props.id}`"
+        />
         <p-data-loader class="detail-tab-content"
                        :loading="projectDetailPageState.loading"
                        :loader-backdrop-color="BACKGROUND_COLOR"