From 83f1a32e96e567243543a40041a5224e83d0e431 Mon Sep 17 00:00:00 2001
From: Dahyun Yu <yuda@megazone.com>
Date: Wed, 23 Oct 2024 14:42:46 +0900
Subject: [PATCH] feat: use PScopedNotification in pages (#4895)

* feat: use PScopedNotification in pages

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

* feat: delete ScopedNotification console component

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

---------

Signed-off-by: yuda <yuda@megazone.com>
---
 .../ScopedNotification.vue                    | 177 ------------------
 .../modules/TopBarSearchWorkspaceFilter.vue   |  30 +--
 .../WorkspaceGroupAddUsersModal.vue           |  14 +-
 .../pages/CollectorDetailPage.vue             |  14 +-
 .../components/CostAnalysisQuerySection.vue   |  19 +-
 .../cost-explorer/pages/BudgetDetailPage.vue  |  14 +-
 ...nAdvancedSettingsCurrencyConverterPage.vue |  17 +-
 .../LandingWorkspaceGroupAddUsersModal.vue    |  16 +-
 packages/mirinae/src/components.ts            |   1 +
 9 files changed, 45 insertions(+), 257 deletions(-)
 delete mode 100644 apps/web/src/common/components/scoped-notification/ScopedNotification.vue

diff --git a/apps/web/src/common/components/scoped-notification/ScopedNotification.vue b/apps/web/src/common/components/scoped-notification/ScopedNotification.vue
deleted file mode 100644
index 7c4b058710..0000000000
--- a/apps/web/src/common/components/scoped-notification/ScopedNotification.vue
+++ /dev/null
@@ -1,177 +0,0 @@
-<script setup lang="ts">
-import { reactive } from 'vue';
-import type { TranslateResult } from 'vue-i18n';
-
-import { PIconButton, PI } from '@cloudforet/mirinae';
-
-import { useProxyValue } from '@/common/composables/proxy-state';
-
-import {
-    gray, indigo, red, yellow,
-} from '@/styles/colors';
-
-interface Props {
-    titleIcon?: string;
-    title?: string|TranslateResult;
-    type?: 'info' | 'danger' | 'warning';
-    hideHeaderCloseButton?: boolean;
-    noTitle?: boolean;
-    visible?: boolean;
-    layout?: 'in-section' | 'full-width';
-}
-
-const props = withDefaults(defineProps<Props>(), {
-    titleIcon: '',
-    title: '',
-    type: 'info',
-    hideHeaderCloseButton: false,
-    noTitle: false,
-    visible: true,
-    layout: 'full-width',
-});
-
-const emit = defineEmits<{(e: 'close'): void;
-    (e: 'update:visible', value: boolean): void;
-}>();
-
-const iconColorMap = {
-    info: indigo[500],
-    danger: red[400],
-    warning: yellow[500],
-};
-
-const state = reactive({
-    proxyVisible: useProxyValue('visible', props, emit),
-});
-
-const handleCloseClick = () => {
-    emit('close');
-    state.proxyVisible = false;
-};
-</script>
-
-<template>
-    <div class="scoped-notification"
-         :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 self-start"
-             width="1.25rem"
-             height="1.25rem"
-             :color="iconColorMap[props.type]"
-             :name="props.titleIcon"
-        />
-        <div class="content-wrapper"
-             :class="{'hide-title-case': props.noTitle}"
-        >
-            <div class="left-part">
-                <div v-if="!props.noTitle"
-                     class="title-wrapper"
-                >
-                    {{ props.title }}
-                </div>
-                <div :class="{'hide-title-case': props.noTitle}"
-                     class="body-wrapper"
-                >
-                    <slot />
-                </div>
-            </div>
-            <div class="right-part">
-                <slot name="right" />
-            </div>
-        </div>
-        <p-icon-button v-if="!props.hideHeaderCloseButton"
-                       name="ic_close"
-                       :color="gray[400]"
-                       class="close-button"
-                       @click.stop="handleCloseClick"
-        />
-    </div>
-</template>
-
-<style scoped lang="postcss">
-.scoped-notification {
-    @apply flex gap-2;
-    padding: 1.125rem 1.5rem;
-
-    .left-icon {
-        margin: 0.125rem 0;
-        flex-shrink: 0;
-    }
-
-    .content-wrapper {
-        @apply flex flex-grow;
-        margin-top: 0.125rem;
-        justify-content: space-between;
-        .left-part {
-            .title-wrapper {
-                @apply text-label-lg font-bold;
-                line-height: 1.25rem;
-            }
-
-            .body-wrapper {
-                @apply text-paragraph-md mt-1;
-
-                &.hide-title-case {
-                    @apply mt-0;
-                }
-            }
-        }
-        .right-part {
-            @apply flex-shrink-0 flex items-center;
-        }
-
-        &.hide-title-case {
-            @apply mt-0;
-        }
-    }
-
-    /* type */
-    &.info {
-        @apply bg-indigo-100;
-        .title-wrapper {
-            @apply text-indigo-600;
-        }
-    }
-
-    &.waring {
-        @apply bg-yellow-100;
-        .title-wrapper {
-            @apply text-yellow-700;
-        }
-    }
-
-    &.danger {
-        @apply bg-red-100;
-        .title-wrapper {
-            @apply text-label-md font-bold text-red-500;
-        }
-    }
-
-    /* layout */
-    &.in-section {
-        @apply rounded gap-1;
-        padding: 0.5rem 1rem;
-
-        .content-wrapper {
-            @apply flex flex-grow;
-            justify-content: space-between;
-            margin-top: 0.125rem;
-
-            .left-part {
-                .body-wrapper {
-                    @apply mt-1;
-
-                    &.hide-title-case {
-                        @apply mt-0;
-                    }
-                }
-            }
-
-            &.hide-title-case {
-                @apply mt-0;
-            }
-        }
-    }
-}
-</style>
diff --git a/apps/web/src/common/modules/navigations/top-bar/modules/top-bar-search/modules/top-bar-search-dropdown/modules/TopBarSearchWorkspaceFilter.vue b/apps/web/src/common/modules/navigations/top-bar/modules/top-bar-search/modules/top-bar-search-dropdown/modules/TopBarSearchWorkspaceFilter.vue
index 8519597a7e..4c0c850ea5 100644
--- a/apps/web/src/common/modules/navigations/top-bar/modules/top-bar-search/modules/top-bar-search-dropdown/modules/TopBarSearchWorkspaceFilter.vue
+++ b/apps/web/src/common/modules/navigations/top-bar/modules/top-bar-search/modules/top-bar-search-dropdown/modules/TopBarSearchWorkspaceFilter.vue
@@ -8,7 +8,7 @@ import {
 
 import { SpaceConnector } from '@cloudforet/core-lib/space-connector';
 import {
-    PCheckboxGroup, PCheckbox, PTooltip, PToggleButton, PTextButton, PContextMenu, PIconButton,
+    PCheckboxGroup, PCheckbox, PTooltip, PToggleButton, PTextButton, PContextMenu, PIconButton, PScopedNotification,
 } from '@cloudforet/mirinae';
 import type { MenuItem } from '@cloudforet/mirinae/src/inputs/context-menu/type';
 
@@ -18,7 +18,6 @@ import type { ResourceModel } from '@/schema/search/resource/model';
 
 import { useAllReferenceStore } from '@/store/reference/all-reference-store';
 
-import ScopedNotification from '@/common/components/scoped-notification/ScopedNotification.vue';
 import ErrorHandler from '@/common/composables/error/errorHandler';
 import WorkspaceLogoIcon from '@/common/modules/navigations/top-bar/modules/top-bar-header/WorkspaceLogoIcon.vue';
 import {
@@ -218,19 +217,14 @@ watch(() => state.searchText, (val) => {
                     </span>
                 </template>
             </p-context-menu>
-            <div v-if="storeState.selectedWorkspaces.length >= STAGED_WORKSPACE_LIMIT"
-                 class="limit-description-card"
+            <p-scoped-notification v-if="storeState.selectedWorkspaces.length >= STAGED_WORKSPACE_LIMIT"
+                                   type="warning"
+                                   :title="$t('COMMON.NAVIGATIONS.TOP_BAR.WORKSPACE_FILTER_WARNING_TITLE')"
+                                   icon="ic_warning-filled"
+                                   layout="in-section"
             >
-                <scoped-notification type="warning"
-                                     :title="$t('COMMON.NAVIGATIONS.TOP_BAR.WORKSPACE_FILTER_WARNING_TITLE')"
-                                     title-icon="ic_warning-filled"
-                                     :visible="true"
-                                     layout="in-section"
-                                     hide-header-close-button
-                >
-                    <span class="text">{{ $t('COMMON.NAVIGATIONS.TOP_BAR.WORKSPACE_FILTER_WARNING_DESC') }}</span>
-                </scoped-notification>
-            </div>
+                {{ $t('COMMON.NAVIGATIONS.TOP_BAR.WORKSPACE_FILTER_WARNING_DESC') }}
+            </p-scoped-notification>
         </div>
     </div>
 </template>
@@ -309,14 +303,6 @@ watch(() => state.searchText, (val) => {
                 }
             }
         }
-
-        .limit-description-card {
-            width: 100%;
-
-            .text {
-                @apply text-paragraph-md;
-            }
-        }
     }
 }
 </style>
diff --git a/apps/web/src/services/advanced/components/WorkspaceGroupAddUsersModal.vue b/apps/web/src/services/advanced/components/WorkspaceGroupAddUsersModal.vue
index c574598bf1..016eaf8ec6 100644
--- a/apps/web/src/services/advanced/components/WorkspaceGroupAddUsersModal.vue
+++ b/apps/web/src/services/advanced/components/WorkspaceGroupAddUsersModal.vue
@@ -4,7 +4,7 @@ import { computed, reactive, watch } from 'vue';
 
 import { SpaceConnector } from '@cloudforet/core-lib/space-connector';
 import {
-    PButtonModal, PFieldGroup, PSelectDropdown, PIconButton, PAvatar, PTextInput,
+    PButtonModal, PFieldGroup, PSelectDropdown, PIconButton, PAvatar, PTextInput, PScopedNotification,
 } from '@cloudforet/mirinae';
 import type { MenuItem } from '@cloudforet/mirinae/types/inputs/context-menu/type';
 
@@ -20,7 +20,6 @@ import { i18n } from '@/translations';
 
 import { showSuccessMessage } from '@/lib/helper/notice-alert-helper';
 
-import ScopedNotification from '@/common/components/scoped-notification/ScopedNotification.vue';
 import ErrorHandler from '@/common/composables/error/errorHandler';
 
 import { useSelectDropDownList } from '@/services/advanced/composables/use-select-drop-down-list';
@@ -167,15 +166,12 @@ watch(() => workspaceGroupPageState.modal.visible, async (visible) => {
     >
         <template #body>
             <div class="form-wrapper">
-                <scoped-notification type="info"
-                                     title-icon="ic_info-circle"
-                                     hide-header-close-button
-                                     no-title
-                                     title="Title"
-                                     layout="in-section"
+                <p-scoped-notification type="information"
+                                       icon="ic_info-circle"
+                                       layout="in-section"
                 >
                     {{ $t('IAM.WORKSPACE_GROUP.MODAL.ADD_USERS_DESCRIPTION') }}
-                </scoped-notification>
+                </p-scoped-notification>
                 <p-field-group required
                                :label="$t('IAM.WORKSPACE_GROUP.MODAL.USER_SELECT_DROP_DOWN_TITLE')"
                                class="mt-4"
diff --git a/apps/web/src/services/asset-inventory/pages/CollectorDetailPage.vue b/apps/web/src/services/asset-inventory/pages/CollectorDetailPage.vue
index a574b0d787..98986b6f94 100644
--- a/apps/web/src/services/asset-inventory/pages/CollectorDetailPage.vue
+++ b/apps/web/src/services/asset-inventory/pages/CollectorDetailPage.vue
@@ -32,7 +32,7 @@ import { clone } from 'lodash';
 import { QueryHelper } from '@cloudforet/core-lib/query';
 import { SpaceConnector } from '@cloudforet/core-lib/space-connector';
 import {
-    PHeading, PSkeleton, PButton, PIconButton, PDoubleCheckModal, PLink, PHeadingLayout,
+    PHeading, PSkeleton, PButton, PIconButton, PDoubleCheckModal, PLink, PHeadingLayout, PScopedNotification,
 } from '@cloudforet/mirinae';
 
 import { SpaceRouter } from '@/router';
@@ -49,7 +49,6 @@ import { showSuccessMessage } from '@/lib/helper/notice-alert-helper';
 import type { MenuId } from '@/lib/menu/config';
 import { MENU_ID } from '@/lib/menu/config';
 
-import ScopedNotification from '@/common/components/scoped-notification/ScopedNotification.vue';
 import ErrorHandler from '@/common/composables/error/errorHandler';
 import { useGoBack } from '@/common/composables/go-back';
 
@@ -255,11 +254,10 @@ onUnmounted(() => {
 <template>
     <div class="collector-detail-page">
         <portal to="page-top-notification">
-            <scoped-notification v-if="state.isNotiVisible"
-                                 :title="i18n.t('INVENTORY.COLLECTOR.DETAIL.PAGE_NOTIFICATION')"
-                                 title-icon="ic_info-circle"
-                                 type="info"
-                                 hide-header-close-button
+            <p-scoped-notification v-if="state.isNotiVisible"
+                                   type="information"
+                                   :title="$t('INVENTORY.COLLECTOR.DETAIL.PAGE_NOTIFICATION')"
+                                   icon="ic_info-circle"
             >
                 <template #right>
                     <p-link v-if="state.isDomainAdmin"
@@ -271,7 +269,7 @@ onUnmounted(() => {
                             new-tab
                     />
                 </template>
-            </scoped-notification>
+            </p-scoped-notification>
         </portal>
         <p-heading-layout class="mb-6">
             <template #heading>
diff --git a/apps/web/src/services/cost-explorer/components/CostAnalysisQuerySection.vue b/apps/web/src/services/cost-explorer/components/CostAnalysisQuerySection.vue
index dc28481d33..d451b41a07 100644
--- a/apps/web/src/services/cost-explorer/components/CostAnalysisQuerySection.vue
+++ b/apps/web/src/services/cost-explorer/components/CostAnalysisQuerySection.vue
@@ -12,7 +12,7 @@ import { clone } from 'lodash';
 import { SpaceConnector } from '@cloudforet/core-lib/space-connector';
 import {
     PButton, PContextMenu, PIconButton, PPopover, PBadge, PSelectDropdown, PFieldTitle,
-    useContextMenuController, PCheckbox, PButtonModal,
+    useContextMenuController, PCheckbox, PButtonModal, PScopedNotification,
 } from '@cloudforet/mirinae';
 import type { MenuItem } from '@cloudforet/mirinae/types/inputs/context-menu/type';
 
@@ -28,7 +28,6 @@ import { showSuccessMessage } from '@/lib/helper/notice-alert-helper';
 import type { MenuId } from '@/lib/menu/config';
 import { MENU_ID } from '@/lib/menu/config';
 
-import ScopedNotification from '@/common/components/scoped-notification/ScopedNotification.vue';
 import ErrorHandler from '@/common/composables/error/errorHandler';
 import { useProperRouteLocation } from '@/common/composables/proper-route-location';
 import WorkspaceLogoIcon from '@/common/modules/navigations/top-bar/modules/top-bar-header/WorkspaceLogoIcon.vue';
@@ -347,16 +346,12 @@ onMounted(async () => {
             @confirm="handleConfirmIsAllWorkspaceSelected"
         >
             <template #body>
-                <div>
-                    <scoped-notification type="warning"
-                                         title-icon="ic_warning-filled"
-                                         no-title
-                                         layout="in-section"
-                                         hide-header-close-button
-                    >
-                        {{ $t('BILLING.COST_MANAGEMENT.COST_ANALYSIS.ALL_WORKSPACE_SELECTED_WARNING') }}
-                    </scoped-notification>
-                </div>
+                <p-scoped-notification type="warning"
+                                       icon="ic_warning-filled"
+                                       layout="in-section"
+                >
+                    {{ $t('BILLING.COST_MANAGEMENT.COST_ANALYSIS.ALL_WORKSPACE_SELECTED_WARNING') }}
+                </p-scoped-notification>
             </template>
         </p-button-modal>
     </div>
diff --git a/apps/web/src/services/cost-explorer/pages/BudgetDetailPage.vue b/apps/web/src/services/cost-explorer/pages/BudgetDetailPage.vue
index 6dcc01fad1..2a1545c098 100644
--- a/apps/web/src/services/cost-explorer/pages/BudgetDetailPage.vue
+++ b/apps/web/src/services/cost-explorer/pages/BudgetDetailPage.vue
@@ -2,7 +2,7 @@
 import { computed, reactive } from 'vue';
 import type { Location } from 'vue-router';
 
-import { PLink } from '@cloudforet/mirinae';
+import { PLink, PScopedNotification } from '@cloudforet/mirinae';
 import { ACTION_ICON } from '@cloudforet/mirinae/src/inputs/link/type';
 
 import type { BudgetModel } from '@/schema/cost-analysis/budget/model';
@@ -11,7 +11,6 @@ import { i18n } from '@/translations';
 
 import { makeAdminRouteName } from '@/router/helpers/route-helper';
 
-import ScopedNotification from '@/common/components/scoped-notification/ScopedNotification.vue';
 import ErrorHandler from '@/common/composables/error/errorHandler';
 
 import BudgetDetailHeading from '@/services/cost-explorer/components/BudgetDetailHeading.vue';
@@ -64,11 +63,10 @@ const state = reactive({
 <template>
     <div>
         <portal to="page-top-notification">
-            <scoped-notification v-if="state.isWorkspaceTarget"
-                                 :title="i18n.t('BILLING.COST_MANAGEMENT.BUDGET.DETAIL.PAGE_NOTIFICATION')"
-                                 title-icon="ic_info-circle"
-                                 type="info"
-                                 hide-header-close-button
+            <p-scoped-notification v-if="state.isWorkspaceTarget"
+                                   type="information"
+                                   :title="i18n.t('BILLING.COST_MANAGEMENT.BUDGET.DETAIL.PAGE_NOTIFICATION')"
+                                   icon="ic_info-circle"
             >
                 <template v-if="store.getters['user/isDomainAdmin']"
                           #right
@@ -82,7 +80,7 @@ const state = reactive({
                         {{ $t('BILLING.COST_MANAGEMENT.BUDGET.DETAIL.VIEW_IN_ADMIN_MODE') }}
                     </p-link>
                 </template>
-            </scoped-notification>
+            </p-scoped-notification>
         </portal>
         <budget-detail-heading :loading="state.loading" />
         <section class="content">
diff --git a/apps/web/src/services/cost-explorer/pages/admin/AdminAdvancedSettingsCurrencyConverterPage.vue b/apps/web/src/services/cost-explorer/pages/admin/AdminAdvancedSettingsCurrencyConverterPage.vue
index 967ed3992b..711c172b71 100644
--- a/apps/web/src/services/cost-explorer/pages/admin/AdminAdvancedSettingsCurrencyConverterPage.vue
+++ b/apps/web/src/services/cost-explorer/pages/admin/AdminAdvancedSettingsCurrencyConverterPage.vue
@@ -7,10 +7,9 @@ import dayjs from 'dayjs';
 
 import {
     PFieldGroup, PCheckbox, PRadioGroup, PRadio, PBadge,
-    PPaneLayout, PTextInput, PSelectDropdown, PButton,
+    PPaneLayout, PTextInput, PSelectDropdown, PButton, PScopedNotification,
 } from '@cloudforet/mirinae';
 
-
 import { CURRENCY, CURRENCY_SYMBOL } from '@/store/modules/display/config';
 import type { Currency } from '@/store/modules/display/type';
 import { usePreferencesStore } from '@/store/preferences/preferences-store';
@@ -18,7 +17,6 @@ import { usePreferencesStore } from '@/store/preferences/preferences-store';
 import config from '@/lib/config';
 import { initDomain } from '@/lib/site-initializer/domain';
 
-import ScopedNotification from '@/common/components/scoped-notification/ScopedNotification.vue';
 import ErrorHandler from '@/common/composables/error/errorHandler';
 
 import type { UnifiedCostConfig } from '@/services/advanced/types/preferences-type';
@@ -114,16 +112,13 @@ watch(() => state.originUnifiedCostConfig, (unifiedCostConfig) => {
 <template>
     <p-pane-layout class="admin-domain-settings-currency-converter-page">
         <div class="content-wrapper">
-            <scoped-notification type="info"
-                                 title-icon="ic_info-circle"
-                                 hide-header-close-button
-                                 no-title
-                                 title="Title"
-                                 layout="in-section"
-                                 class="mb-6"
+            <p-scoped-notification type="information"
+                                   icon="ic_info-circle"
+                                   layout="in-section"
+                                   class="mb-6"
             >
                 {{ $t('COST_EXPLORER.CURRENCY_CONVERTER_PAGE.NOTIFICATION') }}
-            </scoped-notification>
+            </p-scoped-notification>
             <p-field-group :label="$t('COMMON.GNB.ACCOUNT.LABEL_CURRENCY')"
                            required
             >
diff --git a/apps/web/src/services/landing/components/workspace-landing/landing-group-workspaces/LandingWorkspaceGroupAddUsersModal.vue b/apps/web/src/services/landing/components/workspace-landing/landing-group-workspaces/LandingWorkspaceGroupAddUsersModal.vue
index 037b891541..0a8af35d64 100644
--- a/apps/web/src/services/landing/components/workspace-landing/landing-group-workspaces/LandingWorkspaceGroupAddUsersModal.vue
+++ b/apps/web/src/services/landing/components/workspace-landing/landing-group-workspaces/LandingWorkspaceGroupAddUsersModal.vue
@@ -5,7 +5,7 @@ import { debounce } from 'lodash';
 
 import { SpaceConnector } from '@cloudforet/core-lib/space-connector';
 import {
-    PButtonModal, PFieldGroup, PSelectDropdown, PIconButton, PAvatar, PTextInput,
+    PButtonModal, PFieldGroup, PSelectDropdown, PIconButton, PAvatar, PTextInput, PScopedNotification,
 } from '@cloudforet/mirinae';
 import type { MenuItem } from '@cloudforet/mirinae/types/inputs/context-menu/type';
 
@@ -25,7 +25,6 @@ import { i18n } from '@/translations';
 
 import { showSuccessMessage } from '@/lib/helper/notice-alert-helper';
 
-import ScopedNotification from '@/common/components/scoped-notification/ScopedNotification.vue';
 import ErrorHandler from '@/common/composables/error/errorHandler';
 import { useProxyValue } from '@/common/composables/proxy-state';
 
@@ -173,16 +172,13 @@ watch(() => userDropdownState.searchText, debounce(async () => {
     >
         <template #body>
             <div class="form-wrapper">
-                <scoped-notification type="info"
-                                     title-icon="ic_info-circle"
-                                     hide-header-close-button
-                                     no-title
-                                     title="Title"
-                                     layout="in-section"
-                                     class="mt-4"
+                <p-scoped-notification type="information"
+                                       icon="ic_info-circle"
+                                       layout="in-section"
+                                       class="mt-4"
                 >
                     {{ $t('IAM.WORKSPACE_GROUP.MODAL.ADD_USERS_DESCRIPTION') }}
-                </scoped-notification>
+                </p-scoped-notification>
                 <p-field-group required
                                :label="$t('IAM.WORKSPACE_GROUP.MODAL.USER_SELECT_DROP_DOWN_TITLE')"
                                class="mt-4"
diff --git a/packages/mirinae/src/components.ts b/packages/mirinae/src/components.ts
index 1eeb801c2d..2c8f6e59d4 100644
--- a/packages/mirinae/src/components.ts
+++ b/packages/mirinae/src/components.ts
@@ -43,6 +43,7 @@ export { default as PIconModal } from './feedbacks/modals/icon-modal/PIconModal.
 export { default as PDoubleCheckModal } from './feedbacks/modals/advanced/double-check-modal/PDoubleCheckModal.vue';
 export { default as PTableCheckModal } from './feedbacks/modals/advanced/table-check-modal/PTableCheckModal.vue';
 export { default as PNotificationBar } from './feedbacks/notification-bar/PNotificationBar.vue';
+export { default as PScopedNotification } from './feedbacks/scoped-notification/PScopedNotification.vue';
 
 
 /* Foundation */