From cfa12062e5d6989b3f9c14a2bd5ca2abf6dd7865 Mon Sep 17 00:00:00 2001
From: sulmo <50662170+sulmoJ@users.noreply.github.com>
Date: Thu, 17 Oct 2024 16:42:27 +0900
Subject: [PATCH] fix: fix qa issues (unified-cost) (#4865)

* fix: fix currency load logic for userMode

Signed-off-by: sulmo <sulmo@megazone.com>

* feat: update unifiedCost resource Id

Signed-off-by: sulmo <sulmo@megazone.com>

* feat: add unified cost icon to header

Signed-off-by: sulmo <sulmo@megazone.com>

* fix: fix z-index bug & fix ui bug

Signed-off-by: sulmo <sulmo@megazone.com>

---------

Signed-off-by: sulmo <sulmo@megazone.com>
---
 apps/web/src/App.vue                                 |  2 +-
 .../scoped-notification/ScopedNotification.vue       |  2 +-
 .../common/modules/page-layouts/LayoutContainer.vue  |  2 +-
 .../cost-explorer/components/CostAnalysisContent.vue |  6 ------
 .../cost-explorer/components/CostAnalysisHeader.vue  |  8 +++++++-
 .../cost-explorer/components/CostAnalysisLSB.vue     |  8 ++++----
 .../components/CostAnalysisQuerySection.vue          |  1 -
 .../components/CostReportSettingsModal.vue           | 12 +++---------
 .../constants/cost-explorer-constant.ts              |  2 +-
 .../cost-explorer/stores/cost-analysis-page-store.ts |  8 ++++----
 apps/web/src/store/domain/domain-store.ts            |  2 ++
 11 files changed, 24 insertions(+), 29 deletions(-)

diff --git a/apps/web/src/App.vue b/apps/web/src/App.vue
index 280f477942..b5c5b1fa53 100755
--- a/apps/web/src/App.vue
+++ b/apps/web/src/App.vue
@@ -215,7 +215,7 @@ watch(() => state.userId, (userId) => {
         position: fixed;
         width: 100%;
         height: $top-bar-height;
-        z-index: 100;
+        z-index: 1030;
         flex-shrink: 0;
         top: 0;
     }
diff --git a/apps/web/src/common/components/scoped-notification/ScopedNotification.vue b/apps/web/src/common/components/scoped-notification/ScopedNotification.vue
index a0f68c8602..e5e8d9e3ad 100644
--- a/apps/web/src/common/components/scoped-notification/ScopedNotification.vue
+++ b/apps/web/src/common/components/scoped-notification/ScopedNotification.vue
@@ -52,7 +52,7 @@ const handleCloseClick = () => {
 
 <template>
     <div class="scoped-notification"
-         :class="{info: props.type==='info', waring: props.type ==='warning', danger: props.type ==='danger', 'in-section': props.layout === 'in-section'}"
+         :class="{info: props.type==='info', waring: props.type ==='warning', danger: props.type ==='danger', 'in-section': props.layout === 'in-section', 'items-center': props.noTitle}"
     >
         <p-i v-if="props.titleIcon"
              class="left-icon"
diff --git a/apps/web/src/common/modules/page-layouts/LayoutContainer.vue b/apps/web/src/common/modules/page-layouts/LayoutContainer.vue
index 08cdd67daf..2c728fb79a 100644
--- a/apps/web/src/common/modules/page-layouts/LayoutContainer.vue
+++ b/apps/web/src/common/modules/page-layouts/LayoutContainer.vue
@@ -64,7 +64,7 @@ onBeforeMount(async () => {
 
 <style scoped lang="postcss">
 .gnb {
-    z-index: 50;
+    z-index: 1020;
     .g-n-b-item {
         @apply absolute flex border-gray-200;
     }
diff --git a/apps/web/src/services/cost-explorer/components/CostAnalysisContent.vue b/apps/web/src/services/cost-explorer/components/CostAnalysisContent.vue
index 3325acb57b..eb0b44cdee 100644
--- a/apps/web/src/services/cost-explorer/components/CostAnalysisContent.vue
+++ b/apps/web/src/services/cost-explorer/components/CostAnalysisContent.vue
@@ -6,8 +6,6 @@ import { useRoute, useRouter } from 'vue-router/composables';
 
 import type { CostQuerySetModel } from '@/schema/cost-analysis/cost-query-set/model';
 
-import { usePreferencesStore } from '@/store/preferences/preferences-store';
-
 import {
     queryStringToArray,
     queryStringToObject,
@@ -32,7 +30,6 @@ const router = useRouter();
 
 const costAnalysisPageStore = useCostAnalysisPageStore();
 const costAnalysisPageGetters = costAnalysisPageStore.getters;
-const domainConfigStore = usePreferencesStore();
 
 /* util */
 const getQueryOptionsFromUrlQuery = (urlQuery: CostAnalysisPageUrlQuery): CostQuerySetModel['options'] => ({
@@ -58,9 +55,6 @@ watch(() => costAnalysisPageGetters.selectedQuerySet, async (selectedQuerySet) =
     }
 }, { immediate: true });
 
-(() => {
-    domainConfigStore.fetchPreferences();
-})();
 </script>
 
 <template>
diff --git a/apps/web/src/services/cost-explorer/components/CostAnalysisHeader.vue b/apps/web/src/services/cost-explorer/components/CostAnalysisHeader.vue
index c2f0666082..03034c402f 100644
--- a/apps/web/src/services/cost-explorer/components/CostAnalysisHeader.vue
+++ b/apps/web/src/services/cost-explorer/components/CostAnalysisHeader.vue
@@ -143,10 +143,16 @@ watch(() => state.favoriteOptions, async (favoriteOptions) => {
             <p-heading :title="state.title">
                 <template #title-left-extra>
                     <div class="title-left-extra">
-                        <p-lazy-img :src="state.dataSourceImage"
+                        <p-lazy-img v-if="state.dataSourceImage"
+                                    :src="state.dataSourceImage"
                                     width="2rem"
                                     height="2rem"
                         />
+                        <p-i v-else
+                             name="ic_unified-cost"
+                             width="2rem"
+                             height="2rem"
+                        />
                         <p-i v-if="state.managedCostQuerySetList.some((item) => item.name === (state.title || ''))"
                              name="ic_main-filled"
                              width="1rem"
diff --git a/apps/web/src/services/cost-explorer/components/CostAnalysisLSB.vue b/apps/web/src/services/cost-explorer/components/CostAnalysisLSB.vue
index b3541736d4..e63623fcfb 100644
--- a/apps/web/src/services/cost-explorer/components/CostAnalysisLSB.vue
+++ b/apps/web/src/services/cost-explorer/components/CostAnalysisLSB.vue
@@ -13,8 +13,8 @@ import { i18n } from '@/translations';
 import { makeAdminRouteName } from '@/router/helpers/route-helper';
 
 import { useAppContextStore } from '@/store/app-context/app-context-store';
+import { useDomainStore } from '@/store/domain/domain-store';
 import { CURRENCY, CURRENCY_SYMBOL } from '@/store/modules/display/config';
-import { usePreferencesStore } from '@/store/preferences/preferences-store';
 import { useAllReferenceStore } from '@/store/reference/all-reference-store';
 import type { CostDataSourceReferenceMap } from '@/store/reference/cost-data-source-reference-store';
 import type { PluginReferenceMap } from '@/store/reference/plugin-reference-store';
@@ -53,8 +53,8 @@ const costQuerySetState = costQuerySetStore.state;
 const allReferenceStore = useAllReferenceStore();
 const favoriteStore = useFavoriteStore();
 const favoriteGetters = favoriteStore.getters;
-const domainConfigStore = usePreferencesStore();
-const domainConfigGetters = domainConfigStore.getters;
+const domainStore = useDomainStore();
+const domainGetters = domainStore.getters;
 
 const router = useRouter();
 const route = useRoute();
@@ -68,7 +68,7 @@ const storeState = reactive({
     favoriteItems: computed(() => favoriteGetters.costAnalysisItems),
     plugins: computed<PluginReferenceMap>(() => allReferenceStore.getters.plugin),
     dataSourceMap: computed<CostDataSourceReferenceMap>(() => allReferenceStore.getters.costDataSource),
-    unifiedCostCurrency: computed(() => domainConfigGetters.unifiedCostConfig?.currency ?? DEFAULT_UNIFIED_COST_CURRENCY),
+    unifiedCostCurrency: computed(() => domainGetters.domainUnifiedCostCurrency ?? DEFAULT_UNIFIED_COST_CURRENCY),
     isAdminUser: computed(() => store.state.user.roleType === 'DOMAIN_ADMIN'),
 });
 const state = reactive({
diff --git a/apps/web/src/services/cost-explorer/components/CostAnalysisQuerySection.vue b/apps/web/src/services/cost-explorer/components/CostAnalysisQuerySection.vue
index bc46c81cdf..59eb46bef6 100644
--- a/apps/web/src/services/cost-explorer/components/CostAnalysisQuerySection.vue
+++ b/apps/web/src/services/cost-explorer/components/CostAnalysisQuerySection.vue
@@ -332,7 +332,6 @@ onMounted(async () => {
 .cost-analysis-query-section {
     position: relative;
     margin-top: 1.5rem;
-    z-index: 1;
 
     .scope-wrapper {
         margin-bottom: 1rem;
diff --git a/apps/web/src/services/cost-explorer/components/CostReportSettingsModal.vue b/apps/web/src/services/cost-explorer/components/CostReportSettingsModal.vue
index 71e7425e48..9eb5cbe01e 100644
--- a/apps/web/src/services/cost-explorer/components/CostReportSettingsModal.vue
+++ b/apps/web/src/services/cost-explorer/components/CostReportSettingsModal.vue
@@ -163,6 +163,8 @@ watch(() => props.visible, (visible) => {
                                       :disabled="state.enableLastDay"
                                       type="number"
                                       class="input-field"
+                                      min="1"
+                                      max="31"
                                       @update:value="setForm('issueDay', $event)"
                         />
                         <p-checkbox class="checkbox"
@@ -195,19 +197,11 @@ watch(() => props.visible, (visible) => {
     </p-button-modal>
 </template>
 
-<style lang="scss" scoped>
+<style lang="postcss" scoped>
 .input-field {
     width: 10rem;
 }
 
-/* custom design-system component - p-text-input */
-:deep(.p-text-input) {
-    .input-container {
-        .tag-container {
-            width: 90%;
-        }
-    }
-}
 .checkbox {
     padding-left: 0.5rem;
 }
diff --git a/apps/web/src/services/cost-explorer/constants/cost-explorer-constant.ts b/apps/web/src/services/cost-explorer/constants/cost-explorer-constant.ts
index aaf9f54a4d..87609b446b 100644
--- a/apps/web/src/services/cost-explorer/constants/cost-explorer-constant.ts
+++ b/apps/web/src/services/cost-explorer/constants/cost-explorer-constant.ts
@@ -53,4 +53,4 @@ export const FILTER = {
 } as const;
 
 export const DEFAULT_UNIFIED_COST_CURRENCY = CURRENCY.KRW;
-export const UNIFIED_COST_KEY = 'unifiedCost';
+export const UNIFIED_COST_KEY = 'unified-cost-data-source';
diff --git a/apps/web/src/services/cost-explorer/stores/cost-analysis-page-store.ts b/apps/web/src/services/cost-explorer/stores/cost-analysis-page-store.ts
index e8acb28010..1de71a3fdb 100644
--- a/apps/web/src/services/cost-explorer/stores/cost-analysis-page-store.ts
+++ b/apps/web/src/services/cost-explorer/stores/cost-analysis-page-store.ts
@@ -14,8 +14,8 @@ import type { WorkspaceModel } from '@/schema/identity/workspace/model';
 
 import { useAppContextStore } from '@/store/app-context/app-context-store';
 import { useUserWorkspaceStore } from '@/store/app-context/workspace/user-workspace-store';
+import { useDomainStore } from '@/store/domain/domain-store';
 import type { Currency } from '@/store/modules/display/type';
-import { usePreferencesStore } from '@/store/preferences/preferences-store';
 import { useAllReferenceStore } from '@/store/reference/all-reference-store';
 
 
@@ -54,8 +54,8 @@ export const useCostAnalysisPageStore = defineStore('page-cost-analysis', () =>
     const appContextStore = useAppContextStore();
     const userWorkspaceStore = useUserWorkspaceStore();
     const workspaceStoreGetters = userWorkspaceStore.getters;
-    const domainConfigStore = usePreferencesStore();
-    const domainConfigGetters = domainConfigStore.getters;
+    const domainStore = useDomainStore();
+    const domainGetters = domainStore.getters;
 
     const _state = reactive({
         isAdminMode: computed(() => appContextStore.getters.isAdminMode),
@@ -84,7 +84,7 @@ export const useCostAnalysisPageStore = defineStore('page-cost-analysis', () =>
         currency: computed<Currency>(() => {
             if (costQuerySetState.selectedDataSourceId) {
                 const targetDataSource = allReferenceStore.getters.costDataSource[costQuerySetState.selectedDataSourceId ?? ''];
-                if (costQuerySetState.selectedDataSourceId === UNIFIED_COST_KEY) return (domainConfigGetters.unifiedCostConfig?.currency ?? DEFAULT_UNIFIED_COST_CURRENCY);
+                if (costQuerySetState.selectedDataSourceId === UNIFIED_COST_KEY) return (domainGetters.domainUnifiedCostCurrency ?? DEFAULT_UNIFIED_COST_CURRENCY);
                 return targetDataSource?.data?.plugin_info?.metadata?.currency ?? 'USD';
             }
             return 'USD';
diff --git a/apps/web/src/store/domain/domain-store.ts b/apps/web/src/store/domain/domain-store.ts
index 4ef1728e56..ce3969621b 100644
--- a/apps/web/src/store/domain/domain-store.ts
+++ b/apps/web/src/store/domain/domain-store.ts
@@ -12,6 +12,7 @@ import type {
 
 import type { ExtendedAuthType, ExtraMenuSet } from '@/store/domain/type';
 import { DOMAIN_CONFIG_TYPE } from '@/store/domain/type';
+import type { Currency } from '@/store/modules/display/type';
 
 import config from '@/lib/config';
 
@@ -78,6 +79,7 @@ export const useDomainStore = defineStore('domain-store', () => {
 
             return undefined;
         }),
+        domainUnifiedCostCurrency: computed<Currency|undefined>(() => state.config?.settings?.unified_cost_config?.currency),
     });
 
     /* Mutation */