1 files changed, 65 insertions, 0 deletions
diff --git a/app/assets/javascripts/boards/components/board_configuration_options.vue b/app/assets/javascripts/boards/components/board_configuration_options.vue
new file mode 100644
index 00000000000..ad3d653b905
--- /dev/null
+++ b/app/assets/javascripts/boards/components/board_configuration_options.vue
@@ -0,0 +1,65 @@
+<script>
+import { GlFormCheckbox } from '@gitlab/ui';
+
+export default {
+  components: {
+    GlFormCheckbox,
+  },
+  props: {
+    currentBoard: {
+      type: Object,
+      required: true,
+    },
+    board: {
+      type: Object,
+      required: true,
+    },
+    isNewForm: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+  },
+  data() {
+    const { hide_backlog_list: hideBacklogList, hide_closed_list: hideClosedList } = this.isNewForm
+      ? this.board
+      : this.currentBoard;
+
+    return {
+      hideClosedList,
+      hideBacklogList,
+    };
+  },
+  methods: {
+    changeClosedList(checked) {
+      this.board.hideClosedList = !checked;
+    },
+    changeBacklogList(checked) {
+      this.board.hideBacklogList = !checked;
+    },
+  },
+};
+</script>
+
+<template>
+  <div class="append-bottom-20">
+    <label class="form-section-title label-bold" for="board-new-name">
+      {{ __('List options') }}
+    </label>
+    <p class="text-secondary gl-mb-3">
+      {{ __('Configure which lists are shown for anyone who visits this board') }}
+    </p>
+    <gl-form-checkbox
+      :checked="!hideBacklogList"
+      data-testid="backlog-list-checkbox"
+      @change="changeBacklogList"
+      >{{ __('Show the Open list') }}
+    </gl-form-checkbox>
+    <gl-form-checkbox
+      :checked="!hideClosedList"
+      data-testid="closed-list-checkbox"
+      @change="changeClosedList"
+      >{{ __('Show the Closed list') }}
+    </gl-form-checkbox>
+  </div>
+</template>