Fix: Make deployment toggles visible but disabled for deployments when a user does not have update deployment permissions

src/components/DeploymentDisableToggle.vue

@@ -1,6 +1,6 @@
 <template>
   <p-tooltip :text="tooltipText" side="left">
-    <p-toggle v-if="deployment.can.update" v-model="internalValue" :state :disabled="deployment.deprecated" />
+    <p-toggle v-model="internalValue" :state :disabled="deployment.deprecated || !deployment.can.update" />
   </p-tooltip>
 </template>
 
@@ -36,6 +36,9 @@
   })
 
   const tooltipText = computed(() => {
+    if (!props.deployment.can.update) {
+      return localization.info.deploymentUpdateDisabled
+    }
     return props.deployment.disabled ? localization.info.deploymentDisabled : localization.info.deploymentEnabled
   })
 

src/components/DeploymentScheduleToggle.vue

@@ -1,6 +1,6 @@
 <template>
-  <p-tooltip text="Pause or resume this schedule" side="left">
-    <p-toggle v-if="deployment.can.update" v-model="internalValue" :disabled="loading || deployment.paused || deployment.disabled" />
+  <p-tooltip :text="tooltipText" side="left">
+    <p-toggle v-model="internalValue" :disabled="loading || deployment.paused || deployment.disabled || !deployment.can.update" />
   </p-tooltip>
 </template>
 
@@ -34,6 +34,13 @@
 
   const loading = ref(false)
 
+  const tooltipText = computed(() => {
+    if (!props.deployment.can.update) {
+      return localization.info.deploymentUpdateDisabled
+    }
+    return 'Pause or resume this schedule'
+  })
+
   const updateSchedule = async (value: boolean): Promise<void> => {
     loading.value = true
     try {

src/components/DeploymentToggle.vue

@@ -1,6 +1,6 @@
 <template>
-  <p-tooltip text="Pause or resume all schedules" side="left">
-    <p-toggle v-if="deployment.can.update" v-model="internalValue" :state :disabled="deployment.deprecated || deployment.disabled" />
+  <p-tooltip :text="tooltipText" side="left">
+    <p-toggle v-model="internalValue" :state :disabled="deployment.deprecated || deployment.disabled || !deployment.can.update" />
   </p-tooltip>
 </template>
 
@@ -33,6 +33,13 @@
 
   const state = reactive<State>({ pending: false, valid: true, validated: false })
 
+  const tooltipText = computed(() => {
+    if (!props.deployment.can.update) {
+      return localization.info.deploymentUpdateDisabled
+    }
+    return 'Pause or resume all schedules'
+  })
+
   const toggleDeploymentSchedule = async (value: boolean): Promise<void> => {
     state.pending = true
     const message = value ? localization.success.activateDeployment : localization.success.pauseDeployment

src/localization/locale/en.ts

@@ -133,6 +133,7 @@ export const en = {
     deploymentName: 'Deployment name',
     deploymentDisabled: 'Deployment disabled, click to enable',
     deploymentEnabled: 'Deployment enabled, click to disable',
+    deploymentUpdateDisabled: 'You do not have the right permissions to update this deployment',
     searchByDeploymentName: 'Search by deployment name',
     workPools: 'Work Pools',
     all: 'All',