feat: use PScopedNotification in pages (#4895)

* feat: use PScopedNotification in pages Signed-off-by: yuda <[email protected]> * feat: delete ScopedNotification console component Signed-off-by: yuda <[email protected]> --------- Signed-off-by: yuda <[email protected]>
cloudforet-io · Oct 23, 2024 · 83f1a32 · 83f1a32
1 parent 6d969ea
commit 83f1a32
Show file tree

Hide file tree

Showing 9 changed files with 45 additions and 257 deletions.
diff --git a/apps/web/src/common/components/scoped-notification/ScopedNotification.vue b/apps/web/src/common/components/scoped-notification/ScopedNotification.vue
diff --git a/...es/top-bar-search/modules/top-bar-search-dropdown/modules/TopBarSearchWorkspaceFilter.vue b/...es/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
@@ -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
@@ -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
@@ -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
@@ -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">