Hide add oncall schedule buttons for unathorised users

ee/app/assets/javascripts/oncall_schedules/components/oncall_schedule.vue

@@ -86,6 +86,10 @@ export default {
       type: Number,
       required: true,
     },
+    userCanCreateSchedule: {
+      type: Boolean,
+      required: true,
+    },
   },
   apollo: {
     rotations: {
@@ -323,7 +327,7 @@ export default {
               data-testid="rotationsHeader"
             >
               <h6 class="gl-m-0">{{ $options.i18n.rotationTitle }}</h6>
-              <gl-button v-gl-modal="addRotationModalId" variant="link"
+              <gl-button v-gl-modal="addRotationModalId" variant="link" v-if="userCanCreateSchedule"
                 >{{ $options.i18n.addARotation }}
               </gl-button>
             </div>

ee/app/assets/javascripts/oncall_schedules/components/oncall_schedules_wrapper.vue

@@ -26,6 +26,11 @@ export const i18n = {
   emptyState: {
     title: s__('OnCallSchedules|Create on-call schedules in GitLab'),
     description: s__('OnCallSchedules|Route alerts directly to specific members of your team'),
+    unauthorizedDescription(projectOwnerName, projectOwnerUsername) {
+      return s__(
+        `OnCallSchedules|Route alerts directly to specific members of your team. To access this feature, ask the [${projectOwnerName}](#${projectOwnerUsername}) to grant you at least the Maintainer role.`,
+      );
+    },
   },
   successNotification: {
     title: s__('OnCallSchedules|Try adding a rotation'),
@@ -52,7 +57,14 @@ export default {
     GlModal: GlModalDirective,
     GlTooltip: GlTooltipDirective,
   },
-  inject: ['emptyOncallSchedulesSvgPath', 'projectPath', 'escalationPoliciesPath'],
+  inject: [
+    'emptyOncallSchedulesSvgPath',
+    'projectPath',
+    'escalationPoliciesPath',
+    'userCanCreateSchedule',
+    'projectOwnerName',
+    'projectOwnerUsername',
+  ],
   data() {
     return {
       schedules: [],
@@ -84,6 +96,14 @@ export default {
     hasSchedules() {
       return this.schedules.length;
     },
+    emptyStateDescription() {
+      return this.userCanCreateSchedule
+        ? this.$options.i18n.emptyState.description
+        : this.$options.i18n.emptyState.unauthorizedDescription(
+            this.projectOwnerName,
+            this.projectOwnerUsername,
+          );
+    },
   },
   methods: {
     onRotationUpdate(message) {
@@ -103,6 +123,7 @@ export default {
       <div class="gl-display-flex gl-justify-content-space-between gl-align-items-center">
         <h2>{{ $options.i18n.title }}</h2>
         <gl-button
+          v-if="userCanCreateSchedule"
           v-gl-modal="$options.addScheduleModalId"
           v-gl-tooltip.left.viewport.hover
           :title="$options.i18n.add.tooltip"
@@ -146,6 +167,7 @@ export default {
         :key="schedule.iid"
         :schedule="schedule"
         :schedule-index="scheduleIndex"
+        :user-can-create-schedule="userCanCreateSchedule"
         @rotation-updated="onRotationUpdate"
       />
     </template>
@@ -153,11 +175,15 @@ export default {
     <gl-empty-state
       v-else
       :title="$options.i18n.emptyState.title"
-      :description="$options.i18n.emptyState.description"
+      :description="emptyStateDescription"
       :svg-path="emptyOncallSchedulesSvgPath"
     >
       <template #actions>
-        <gl-button v-gl-modal="$options.addScheduleModalId" variant="confirm">
+        <gl-button
+          v-gl-modal="$options.addScheduleModalId"
+          variant="confirm"
+          v-if="userCanCreateSchedule"
+        >
           {{ $options.i18n.add.button }}
         </gl-button>
       </template>

ee/app/assets/javascripts/oncall_schedules/index.js

 import Vue from 'vue';
 import VueApollo from 'vue-apollo';
+import { parseBoolean } from '~/lib/utils/common_utils';
 import OnCallSchedulesWrapper from './components/oncall_schedules_wrapper.vue';
 import apolloProvider from './graphql';
 import getTimelineWidthQuery from './graphql/queries/get_timeline_width.query.graphql';
@@ -16,6 +17,9 @@ export default () => {
     emptyOncallSchedulesSvgPath,
     timezones,
     escalationPoliciesPath,
+    userCanCreateSchedule,
+    projectOwnerName,
+    projectOwnerUsername,
   } = el.dataset;
 
   apolloProvider.clients.defaultClient.cache.writeQuery({
@@ -33,6 +37,9 @@ export default () => {
       emptyOncallSchedulesSvgPath,
       timezones: JSON.parse(timezones),
       escalationPoliciesPath,
+      userCanCreateSchedule: parseBoolean(userCanCreateSchedule),
+      projectOwnerName,
+      projectOwnerUsername,
     },
     render(createElement) {
       return createElement(OnCallSchedulesWrapper);

ee/app/helpers/incident_management/oncall_schedule_helper.rb

@@ -7,7 +7,10 @@ def oncall_schedule_data(project)
         'project-path' => project.full_path,
         'empty-oncall-schedules-svg-path' => image_path('illustrations/empty-state/empty-on-call.svg'),
         'timezones' => timezone_data(format: :full).to_json,
-        'escalation-policies-path' => project_incident_management_escalation_policies_path(project)
+        'escalation-policies-path' => project_incident_management_escalation_policies_path(project),
+        'user_can_create_schedule' =>  can?(current_user, :admin_incident_management_oncall_schedule, project).to_s,
+        'project-owner-name' => project.owners[0].name,
+        'project-owner-username' => project.owners[0].username
       }
     end
   end