chore(event-rule): apply 'hasReadWriteAccess' at order button

Signed-off-by: NaYeong,Kim <[email protected]>
cloudforet-io · Jan 20, 2025 · daf43bb · daf43bb
1 parent 2e84dde
commit daf43bb
Showing 1 changed file with 18 additions and 16 deletions.
diff --git a/apps/web/src/services/alert-manager/components/ServiceDetailTabsSettingsEventRuleSidebar.vue b/apps/web/src/services/alert-manager/components/ServiceDetailTabsSettingsEventRuleSidebar.vue
@@ -22,6 +22,7 @@ import type { WebhookReferenceMap } from '@/store/reference/webhook-reference-st
 import { replaceUrlQuery } from '@/lib/router-query-string';
 
 import ErrorHandler from '@/common/composables/error/errorHandler';
+import { usePageEditableStatus } from '@/common/composables/page-editable-status';
 import { useProperRouteLocation } from '@/common/composables/proper-route-location';
 import { useProxyValue } from '@/common/composables/proxy-state';
 
@@ -32,8 +33,6 @@ import { ALERT_MANAGER_ROUTE } from '@/services/alert-manager/routes/route-const
 import { useServiceDetailPageStore } from '@/services/alert-manager/stores/service-detail-page-store';
 import type { TreeNode } from '@/services/project/tree/type';
 
-
-
 interface Props {
   hideSidebar: boolean;
   items: EventRuleModel[];
@@ -51,6 +50,7 @@ const serviceDetailPageState = serviceDetailPageStore.state;
 
 const { width } = useWindowSize();
 const { getProperRouteLocation } = useProperRouteLocation();
+const { hasReadWriteAccess } = usePageEditableStatus();
 
 const route = useRoute();
 const router = useRouter();
@@ -238,19 +238,21 @@ watch(() => state.isMobileSize, (isMobileSize) => {
                     <p class="font-bold">
                         {{ $t('ALERT_MANAGER.EVENT_RULE.SIDE_BAR_TITLE') }}
                     </p>
-                    <p-button v-if="!state.isEditMode"
-                              size="sm"
-                              style-type="tertiary"
-                              @click="state.isEditMode = true"
-                    >
-                        {{ $t('ALERT_MANAGER.EVENT_RULE.SET_ORDER') }}
-                    </p-button>
-                    <p-button v-else
-                              size="sm"
-                              @click="handleSaveOrder"
-                    >
-                        {{ $t('ALERT_MANAGER.EVENT_RULE.SAVE') }}
-                    </p-button>
+                    <template v-if="hasReadWriteAccess">
+                        <p-button v-if="!state.isEditMode"
+                                  size="sm"
+                                  style-type="tertiary"
+                                  @click="state.isEditMode = true"
+                        >
+                            {{ $t('ALERT_MANAGER.EVENT_RULE.SET_ORDER') }}
+                        </p-button>
+                        <p-button v-else
+                                  size="sm"
+                                  @click="handleSaveOrder"
+                        >
+                            {{ $t('ALERT_MANAGER.EVENT_RULE.SAVE') }}
+                        </p-button>
+                    </template>
                 </div>
                 <p-search class="namespace-search"
                           block
@@ -283,7 +285,7 @@ watch(() => state.isMobileSize, (isMobileSize) => {
                                         width="1rem"
                                         height="1rem"
                             />
-                            <span class="ml-1">{{ title.id === 'global' ? $t('ALERT_MANAGER.EVENT_RULE.GLOBAL') : storeState.webhook[title.id].label }}</span>
+                            <span class="ml-1">{{ title.id === 'global' ? $t('ALERT_MANAGER.EVENT_RULE.GLOBAL') : storeState.webhook[title.id]?.label }}</span>
                         </div>
                         <draggable v-if="title.isOpen"
                                    v-model="title.children"