chore: rebase onto master

apps/web/package.json

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

apps/web/src/common/components/bookmark/BookmarkDeleteModal.vue

@@ -196,6 +196,7 @@ const handleClose = () => {
             }
             .text-wrapper {
                 @apply flex flex-col text-label-md;
+                max-width: calc(100% - 3rem);
                 .link {
                     @apply truncate text-label-sm text-gray-500;
                     max-width: 22rem;

apps/web/src/common/modules/navigations/top-bar/modules/top-bar-toolset/modules/top-bar-favorite/TopBarFavorite.vue

@@ -107,5 +107,13 @@ const handleRecentFavoriteButtonClick = () => {
         margin-right: -0.5rem;
         z-index: 1000;
     }
+
+    @screen mobile {
+        position: initial;
+        .favorite-content {
+            width: 100%;
+            left: 0;
+        }
+    }
 }
 </style>

apps/web/src/common/modules/navigations/top-bar/modules/top-bar-toolset/modules/top-bar-integration/TopBarIntegration.vue

@@ -116,5 +116,13 @@ const handleIntegrationButtonClick = () => {
         margin-right: -0.5rem;
         z-index: 1000;
     }
+
+    @screen mobile {
+        position: initial;
+        .integration-content {
+            width: 100%;
+            left: 0;
+        }
+    }
 }
 </style>

apps/web/src/common/modules/navigations/top-bar/modules/top-bar-toolset/modules/top-bar-notice/TopBarNotice.vue

@@ -166,5 +166,13 @@ watch(() => store.state.user.isSessionExpired, (isSessionExpired) => {
         margin-right: -0.5rem;
         z-index: 1000;
     }
+
+    @screen mobile {
+        position: initial;
+        .notice-content {
+            width: 100%;
+            left: 0;
+        }
+    }
 }
 </style>

apps/web/src/common/modules/navigations/top-bar/modules/top-bar-toolset/modules/top-bar-notifications/TopBarNotifications.vue

@@ -178,5 +178,13 @@ watch(() => store.state.user.isSessionExpired, (isSessionExpired) => {
         margin-right: -0.5rem;
         z-index: 1000;
     }
+
+    @screen mobile {
+        position: initial;
+        .notification-content {
+            width: 100%;
+            left: 0;
+        }
+    }
 }
 </style>

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

@@ -3,7 +3,7 @@ import {
     computed, reactive,
 } from 'vue';
 
-import { sortBy } from 'lodash';
+import { sortBy, startCase, toLower } from 'lodash';
 
 import {
     PFieldTitle, PContextMenu,
@@ -43,6 +43,7 @@ const state = reactive({
             .map((namespace) => namespace.data.group);
         const _groupMenuItems: MenuItem[] = [];
         const _uniqueGroups = Array.from(new Set(groups));
+
         sortBy(_uniqueGroups, (group) => group !== 'common').forEach((group) => {
             if (group === 'common') {
                 _groupMenuItems.push({
@@ -51,16 +52,13 @@ const state = reactive({
                     label: i18n.t('DASHBOARDS.WIDGET.OVERLAY.STEP_1.COMMON'),
                 });
             } else {
-                // provider case
                 const providerData = storeState.providers[group];
-                if (providerData) {
-                    _groupMenuItems.push({
-                        type: 'item',
-                        name: providerData.key,
-                        label: providerData.label,
-                        imageUrl: providerData.data.icon,
-                    });
-                }
+                _groupMenuItems.push({
+                    type: 'item',
+                    name: providerData?.key || group,
+                    label: providerData?.label || customSnakeToTitleCase(group),
+                    imageUrl: providerData?.data?.icon,
+                });
             }
         });
         return _groupMenuItems.filter((d) => d.label.toLowerCase().includes(state.categorySearchText.toLowerCase()));
@@ -98,6 +96,9 @@ const state = reactive({
     metricSearchText: '',
 });
 
+const customSnakeToTitleCase = (title: string) => startCase(toLower(title.replace(/_/g, ' ')));
+
+
 /* Event */
 const handleSelectCategory = (item: MenuItem) => {
     state.selectedCategory = item.name;

apps/web/src/common/modules/widgets/_store/widget-generate-store.ts

@@ -44,7 +44,8 @@ type DataTableModel = PublicDataTableModel|PrivateDataTableModel;
 type WidgetModel = PublicWidgetModel|PrivateWidgetModel;
 type WidgetUpdateParameters = PublicWidgetUpdateParameters|PrivateWidgetUpdateParameters;
 export const useWidgetGenerateStore = defineStore('widget-generate', () => {
-    const dashboardDetailGetters = useDashboardDetailInfoStore().getters;
+    const dashboardDetailStore = useDashboardDetailInfoStore();
+    const dashboardDetailGetters = dashboardDetailStore.getters;
     const state = reactive({
         // display
         showOverlay: false,

apps/web/src/lib/variable-models/_base/resource-variable-model.ts

@@ -44,14 +44,15 @@ export default class ResourceVariableModel<T=any> implements IResourceVariableMo
     }
 
     generateProperty(options: PropertyOptions<T>): PropertyObject<T> {
-        const _isDataKey = typeof options.isDataKey === 'boolean' ? options.isDataKey : true;
-        const _isFilter = typeof options.isFilter === 'boolean' ? options.isFilter : true;
+        // const _isDataKey = typeof options.isDataKey === 'boolean' ? options.isDataKey : true;
+        // const _isFilter = typeof options.isFilter === 'boolean' ? options.isFilter : true;
         const propertyObject: PropertyObject<T> = {
             key: options.key,
             name: options.name,
-            isDataKey: _isDataKey,
-            isFilter: _isFilter,
-            values: _isDataKey ? this.stat(options.key as string, options.presetValues) : undefined,
+            // isDataKey: _isDataKey,
+            // isFilter: _isFilter,
+            // values: _isDataKey ? this.stat(options.key as string, options.presetValues) : undefined,
+            values: this.stat(options.key as string, options.presetValues),
         };
 
         // TODO: keys method binding

apps/web/src/services/advanced/components/WorkspaceGroupTabWorkspace.vue

@@ -271,7 +271,7 @@ onMounted(async () => {
             <template #col-name-format="{ value, item }">
                 <div class="name-wrapper">
                     <workspace-logo-icon :text="value"
-                                         :theme="item?.tags.theme"
+                                         :theme="item?.tags?.theme"
                                          size="xs"
                     />
                     <p-link :text="value"

apps/web/src/services/asset-inventory/components/CollectorAdditionalRuleForm.vue

@@ -26,7 +26,7 @@ import type {
 } from '@/schema/inventory/collector-rule/type';
 import type { RegionListParameters } from '@/schema/inventory/region/api-verbs/list';
 import type { RegionModel } from '@/schema/inventory/region/model';
-import { i18n, i18n as _i18n } from '@/translations';
+import { i18n } from '@/translations';
 
 import { useAppContextStore } from '@/store/app-context/app-context-store';
 import { useAllReferenceStore } from '@/store/reference/all-reference-store';
@@ -108,8 +108,8 @@ const state = reactive({
         return isConditionTooltipVisible;
     }),
     conditionPolicies: computed(() => ({
-        [COLLECTOR_RULE_CONDITION_POLICY.ALL]: _i18n.t('INVENTORY.COLLECTOR.COLLECTOR_RULE.ALL'),
-        [COLLECTOR_RULE_CONDITION_POLICY.ANY]: _i18n.t('INVENTORY.COLLECTOR.COLLECTOR_RULE.ANY'),
+        [COLLECTOR_RULE_CONDITION_POLICY.ALL]: i18n.t('INVENTORY.COLLECTOR.COLLECTOR_RULE.ALL'),
+        [COLLECTOR_RULE_CONDITION_POLICY.ANY]: i18n.t('INVENTORY.COLLECTOR.COLLECTOR_RULE.ANY'),
     })),
     selectedConditionRadioIdx: props.data?.conditions_policy ?? COLLECTOR_RULE_CONDITION_POLICY.ALL as CollectorRuleConditionPolicy,
     conditionKeyMenu: computed<SelectDropdownMenuItem[]>(() => {

apps/web/src/services/dashboards/components/dashboard-detail/DashboardWidgetContainerV2.vue

@@ -74,8 +74,6 @@ const widgetGenerateStore = useWidgetGenerateStore();
 const widgetGenerateState = widgetGenerateStore.state;
 const allReferenceTypeInfoStore = useAllReferenceTypeInfoStore();
 const allReferenceStore = useAllReferenceStore();
-// const dashboardSettings = useDashboardSettingsStore();
-// const dashboardSettingsState = dashboardSettings.state;
 
 /* State */
 const containerRef = ref<HTMLElement|null>(null);
@@ -88,8 +86,7 @@ const state = reactive({
     mountedWidgetMap: {} as Record<string, boolean>,
     intersectedWidgetMap: {} as Record<string, boolean>,
     isAllWidgetsMounted: computed<boolean>(() => Object.values(state.mountedWidgetMap).every((d) => d)),
-    refinedWidgetInfoList: computed<RefinedWidgetInfo[]>(() => getRefinedWidgetInfoList(dashboardDetailState.dashboardWidgets)),
-    widgetLoading: true,
+    refinedWidgetInfoList: undefined as RefinedWidgetInfo[]|undefined,
     overlayType: 'EDIT' as 'EDIT' | 'EXPAND',
     showExpandOverlay: false,
     remountWidgetId: undefined as string|undefined,
@@ -102,9 +99,8 @@ const widgetDeleteState = reactive({
 
 /* Util */
 const { containerWidth } = useDashboardContainerWidth({ containerRef, observeResize: true });
-const getRefinedWidgetInfoList = (dashboardWidgets: Array<PublicWidgetModel|PrivateWidgetModel>): RefinedWidgetInfo[] => {
+const getRefinedWidgetInfoList = (dashboardWidgets: Array<PublicWidgetModel|PrivateWidgetModel>): RefinedWidgetInfo[]|undefined => {
     if (!dashboardWidgets.length) {
-        state.widgetLoading = false;
         return [];
     }
     const _refinedWidgets: RefinedWidgetInfo[] = [];
@@ -134,7 +130,6 @@ const getRefinedWidgetInfoList = (dashboardWidgets: Array<PublicWidgetModel|Priv
         widget.width = _widths[idx];
     });
 
-    state.widgetLoading = false;
     return _refinedWidgets;
 };
 const getWidgetLoading = () => {
@@ -350,18 +345,11 @@ const handleClickAddWidget = () => {
     widgetGenerateStore.setOverlayType('ADD');
     widgetGenerateStore.setShowOverlay(true);
 };
-// const handleChangeDoNotShowDateRangeWarning = (value: boolean) => {
-//     dashboardSettings.updateDoNotShowDateRangeWarning(value);
-// };
-
 
 /* Watcher */
-watch(() => dashboardDetailState.dashboardId, (dashboardId) => {
-    if (dashboardId) {
-        state.widgetLoading = true;
-        dashboardDetailStore.listDashboardWidgets();
-    }
-}, { immediate: true });
+watch(() => dashboardDetailState.dashboardWidgets, (widgets) => {
+    state.refinedWidgetInfoList = getRefinedWidgetInfoList(widgets);
+});
 watch(() => widgetGenerateState.showOverlay, async (showOverlay) => {
     if (!showOverlay && widgetGenerateState.overlayType !== 'EXPAND') {
         state.remountWidgetId = widgetGenerateState.latestWidgetId;
@@ -413,30 +401,7 @@ defineExpose({
     <div ref="containerRef"
          class="dashboard-widget-container"
     >
-        <!--        <p-scoped-notification v-if="!dashboardSettingsState.doNotShowDateRangeWarning && dashboardDetailState.showDateRangeNotification"-->
-        <!--                               type="information"-->
-        <!--                               icon="ic_info-circle"-->
-        <!--                               show-close-button-->
-        <!--                               :title="$t('DASHBOARDS.DETAIL.DATE_RANGE_NOTIFICATION_TITLE')"-->
-        <!--                               class="w-full"-->
-        <!--                               :visible="dashboardDetailState.showDateRangeNotification"-->
-        <!--                               @update:visible="dashboardDetailState.showDateRangeNotification = $event"-->
-        <!--        >-->
-        <!--            <div>-->
-        <!--                <p>{{ $t('DASHBOARDS.DETAIL.DATE_RANGE_NOTIFICATION_DESC1') }}</p>-->
-        <!--                <p>{{ $t('DASHBOARDS.DETAIL.DATE_RANGE_NOTIFICATION_DESC2') }} <b>({{ $t('DASHBOARDS.DETAIL.DATE_RANGE_NOTIFICATION_DESC3') }})</b></p>-->
-        <!--            </div>-->
-        <!--            <template #right>-->
-        <!--                <p-checkbox :selected="dashboardSettingsState.doNotShowDateRangeWarning"-->
-        <!--                            :value="true"-->
-        <!--                            class="pt-2"-->
-        <!--                            @change="handleChangeDoNotShowDateRangeWarning"-->
-        <!--                >-->
-        <!--                    {{ $t('DASHBOARDS.DETAIL.DO_NOT_SHOW_AGAIN') }}-->
-        <!--                </p-checkbox>-->
-        <!--            </template>-->
-        <!--        </p-scoped-notification>-->
-        <p-data-loader :loading="dashboardDetailState.loadingDashboard || state.widgetLoading"
+        <p-data-loader :loading="dashboardDetailState.loadingDashboard || dashboardDetailState.loadingWidgets"
                        :data="state.refinedWidgetInfoList"
                        loader-backdrop-color="gray.100"
                        disable-empty-case
@@ -459,7 +424,7 @@ defineExpose({
                                :loading="getWidgetLoading()"
                                :dashboard-options="dashboardDetailState.options"
                                :dashboard-vars="dashboardDetailGetters.refinedVars"
-                               :disable-refresh-on-variable-change="widgetGenerateState.showOverlay"
+                               :disable-refresh-on-variable-change="widgetGenerateState.showOverlay || dashboardDetailState.loadingDashboard"
                                :disable-manage-buttons="dashboardDetailGetters.disableManageButtons"
                                :all-reference-type-info="state.allReferenceTypeInfo"
                                @mounted="handleWidgetMounted(widget.widget_id)"
@@ -472,7 +437,7 @@ defineExpose({
                 </template>
             </div>
         </p-data-loader>
-        <div v-if="!(dashboardDetailState.loadingDashboard || state.widgetLoading) && !state.refinedWidgetInfoList?.length"
+        <div v-if="!(dashboardDetailState.loadingDashboard || dashboardDetailState.loadingWidgets) && !state.refinedWidgetInfoList?.length"
              class="no-data-wrapper"
         >
             <p-empty show-image
@@ -500,7 +465,7 @@ defineExpose({
         />
         <widget-form-overlay />
         <dashboard-reorder-sidebar
-            :widget-info-list="state.refinedWidgetInfoList"
+            :widget-info-list="state.refinedWidgetInfoList ?? []"
         />
     </div>
 </template>

apps/web/src/services/dashboards/pages/DashboardDetailPage.vue

@@ -60,9 +60,9 @@ const state = reactive({
     dashboardVariablesLoading: false,
 });
 
-const getDashboardData = async (dashboardId: string) => {
+const getDashboardDataAndListWidget = async (dashboardId: string) => {
     try {
-        await dashboardDetailStore.getDashboardInfo(dashboardId);
+        await dashboardDetailStore.getDashboardInfo({ dashboardId, fetchWidgets: true });
     } catch (e) {
         ErrorHandler.handleError(e);
         await SpaceRouter.router.push(getProperRouteLocation({ name: DASHBOARDS_ROUTE._NAME }));
@@ -92,7 +92,7 @@ watch(() => props.dashboardId, async (dashboardId, prevDashboardId) => {
     if (dashboardId && !prevDashboardId) { // this includes all three cases
         dashboardDetailStore.reset();
     }
-    await getDashboardData(dashboardId);
+    await getDashboardDataAndListWidget(dashboardId);
     // Set Dashboard Detail Custom breadcrumbs
     gnbStore.setBreadcrumbs(breadcrumbs.value);
 }, { immediate: true });
@@ -144,7 +144,9 @@ onUnmounted(() => {
                 />
             </div>
         </div>
-        <div class="dashboard-selectors">
+        <div v-if="!dashboardDetailState.loadingDashboard"
+             class="dashboard-selectors"
+        >
             <dashboard-variables v-if="dashboardDetailGetters.isDeprecatedDashboard"
                                  class="variable-selector-wrapper"
                                  :loading="state.dashboardVariablesLoading"

apps/web/src/services/dashboards/stores/dashboard-detail-info-store.ts

@@ -97,6 +97,7 @@ export const useDashboardDetailInfoStore = defineStore('dashboard-detail-info',
     const state = reactive({
         loadingDashboard: false,
         dashboardId: '' as string | undefined,
+        dashboard: undefined as PublicDashboardModel|PrivateDashboardModel|undefined,
         projectId: undefined as string | undefined,
         options: DASHBOARD_DEFAULT.options as DashboardOptions,
         vars: {} as DashboardVars,
@@ -120,7 +121,7 @@ export const useDashboardDetailInfoStore = defineStore('dashboard-detail-info',
     const getters = reactive({
         dashboardInfo: computed<PublicDashboardModel|PrivateDashboardModel|undefined>(() => {
             const _allDashboardItems = [...dashboardState.privateDashboardItems, ...dashboardState.publicDashboardItems];
-            return _allDashboardItems.find((d) => d.dashboard_id === state.dashboardId);
+            return _allDashboardItems.find((d) => d.dashboard_id === state.dashboardId) || state.dashboard;
         }),
         dashboardName: computed<string>(() => getters.dashboardInfo?.name || ''),
         dashboardLabels: computed<string[]>(() => getters.dashboardInfo?.labels || []),
@@ -225,6 +226,7 @@ export const useDashboardDetailInfoStore = defineStore('dashboard-detail-info',
             return;
         }
         state.vars = dashboardInfo.vars ?? {};
+        state.dashboard = dashboardInfo;
         const _dashboardInfo = cloneDeep(dashboardInfo);
         state.dashboardId = _dashboardInfo.dashboard_id;
         state.options = {
@@ -243,6 +245,7 @@ export const useDashboardDetailInfoStore = defineStore('dashboard-detail-info',
 
         const _dashboardInfo = cloneDeep(dashboardInfo);
         state.dashboardId = _dashboardInfo.dashboard_id;
+        state.dashboard = _dashboardInfo;
         state.options = {
             date_range: {
                 start: _dashboardInfo.options?.date_range?.start,
@@ -271,14 +274,15 @@ export const useDashboardDetailInfoStore = defineStore('dashboard-detail-info',
     };
     const privateDashboardGetFetcher = getCancellableFetcher(SpaceConnector.clientV2.dashboard.privateDashboard.get);
     const publicDashboardGetFetcher = getCancellableFetcher(SpaceConnector.clientV2.dashboard.publicDashboard.get);
-    const getDashboardInfo = async (dashboardId: undefined|string) => {
+    const getDashboardInfo = async ({ dashboardId, fetchWidgets = false }: { dashboardId: undefined|string, fetchWidgets?: boolean}) => {
         if (dashboardId === state.dashboardId || dashboardId === undefined) return;
 
         const isPrivate = dashboardId?.startsWith('private');
         const fetcher = isPrivate ? privateDashboardGetFetcher : publicDashboardGetFetcher;
         // WARN:: from under this line, beware using originState. originState could reference irrelevant dashboard data
         state.dashboardId = dashboardId;
         state.loadingDashboard = true;
+        if (fetchWidgets) setDashboardWidgets([]);
         try {
             const params: GetDashboardParameters = { dashboard_id: dashboardId as string };
             const { status, response } = await fetcher<GetDashboardParameters, DashboardModel>(params);
@@ -288,6 +292,9 @@ export const useDashboardDetailInfoStore = defineStore('dashboard-detail-info',
                 } else {
                     _setDashboardInfoStoreStateV2(response);
                 }
+                if (fetchWidgets) {
+                    await listDashboardWidgets();
+                }
             }
         } catch (e) {
             reset();