Disable board configuration options for users without edit permission

app/assets/javascripts/boards/components/board_configuration_options.vue

@@ -14,6 +14,10 @@ export default {
       type: Boolean,
       required: true,
     },
+    readonly: {
+      type: Boolean,
+      required: true,
+    },
   },
 };
 </script>
@@ -28,12 +32,14 @@ export default {
     </p>
     <gl-form-checkbox
       :checked="!hideBacklogList"
+      :disabled="readonly"
       data-testid="backlog-list-checkbox"
       @change="$emit('update:hideBacklogList', !hideBacklogList)"
       >{{ __('Show the Open list') }}
     </gl-form-checkbox>
     <gl-form-checkbox
       :checked="!hideClosedList"
+      :disabled="readonly"
       data-testid="closed-list-checkbox"
       @change="$emit('update:hideClosedList', !hideClosedList)"
       >{{ __('Show the Closed list') }}

app/assets/javascripts/boards/components/board_form.vue

@@ -308,6 +308,7 @@ export default {
       <board-configuration-options
         :hide-backlog-list.sync="board.hide_backlog_list"
         :hide-closed-list.sync="board.hide_closed_list"
+        :readonly="readonly"
       />
 
       <board-scope

changelogs/unreleased/298790-the-options-to-show-hide-the-open-and-closed-lists-in-boards-shoul.yml

+---
+title: Disable board configuration options for users without edit permission
+merge_request: 52077
+author:
+type: fixed

spec/frontend/boards/components/board_configuration_options_spec.js

@@ -7,6 +7,7 @@ describe('BoardConfigurationOptions', () => {
   const defaultProps = {
     hideBacklogList: false,
     hideClosedList: false,
+    readonly: false,
   };
 
   const createComponent = (props = {}) => {
@@ -61,4 +62,18 @@ describe('BoardConfigurationOptions', () => {
 
     expect(wrapper.emitted('update:hideClosedList')).toEqual([[true]]);
   });
+
+  it('renders checkboxes disabled when user does not have edit rights', () => {
+    createComponent({ readonly: true });
+
+    expect(closedListCheckbox().attributes('disabled')).toBe('true');
+    expect(backlogListCheckbox().attributes('disabled')).toBe('true');
+  });
+
+  it('renders checkboxes enabled when user has edit rights', () => {
+    createComponent();
+
+    expect(closedListCheckbox().attributes('disabled')).toBeUndefined();
+    expect(backlogListCheckbox().attributes('disabled')).toBeUndefined();
+  });
 });