Run experiment on Create Board cta

Introduces a feature flag to bring create board
button outside the switch dropdown

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

+<script>
+import { GlButton, GlModalDirective } from '@gitlab/ui';
+import { formType } from '~/boards/constants';
+import eventHub from '~/boards/eventhub';
+import { s__ } from '~/locale';
+import Tracking from '~/tracking';
+import GitlabExperiment from '~/experimentation/components/gitlab_experiment.vue';
+
+export default {
+  components: {
+    GlButton,
+    GitlabExperiment,
+  },
+  directives: {
+    GlModalDirective,
+  },
+  mixins: [Tracking.mixin()],
+  inject: ['multipleIssueBoardsAvailable', 'canAdminBoard'],
+  computed: {
+    canShowCreateButton() {
+      return this.canAdminBoard && this.multipleIssueBoardsAvailable;
+    },
+    createButtonText() {
+      return s__('Boards|New board');
+    },
+  },
+  methods: {
+    showDialog() {
+      this.track('click_button', { label: 'create_board' });
+      eventHub.$emit('showBoardModal', formType.new);
+    },
+  },
+};
+</script>
+
+<template>
+  <gitlab-experiment name="prominent_create_board_btn">
+    <template #control> </template>
+    <template #candidate>
+      <div v-if="canShowCreateButton" class="gl-ml-1 gl-mr-3 gl-display-flex gl-align-items-center">
+        <gl-button data-qa-selector="new_board_button" @click.prevent="showDialog">
+          {{ createButtonText }}
+        </gl-button>
+      </div>
+    </template>
+  </gitlab-experiment>
+</template>

app/assets/javascripts/boards/index.js

@@ -16,6 +16,7 @@ import toggleFocusMode from '~/boards/toggle_focus';
 import { NavigationType, parseBoolean } from '~/lib/utils/common_utils';
 import { fullBoardId } from './boards_util';
 import boardConfigToggle from './config_toggle';
+import initNewBoard from './new_board';
 import { gqlClient } from './graphql';
 import mountMultipleBoardsSwitcher from './mount_multiple_boards_switcher';
 
@@ -130,6 +131,7 @@ export default () => {
   }
 
   boardConfigToggle();
+  initNewBoard();
 
   toggleFocusMode();
   toggleLabels();

app/assets/javascripts/boards/new_board.js

+import Vue from 'vue';
+import { parseBoolean } from '~/lib/utils/common_utils';
+import { getExperimentVariant } from '~/experimentation/utils';
+import { CANDIDATE_VARIANT } from '~/experimentation/constants';
+import NewBoardButton from './components/new_board_button.vue';
+
+export default () => {
+  if (getExperimentVariant('prominent_create_board_btn') !== CANDIDATE_VARIANT) {
+    return;
+  }
+
+  const el = document.querySelector('.js-new-board');
+
+  if (!el) {
+    return;
+  }
+
+  // eslint-disable-next-line no-new
+  new Vue({
+    el,
+    provide: {
+      multipleIssueBoardsAvailable: parseBoolean(el.dataset.multipleIssueBoardsAvailable),
+      canAdminBoard: parseBoolean(el.dataset.canAdminBoard),
+    },
+    render(h) {
+      return h(NewBoardButton);
+    },
+  });
+};

app/controllers/groups/boards_controller.rb

@@ -12,6 +12,10 @@ class Groups::BoardsController < Groups::ApplicationController
     push_frontend_feature_flag(:swimlanes_buffered_rendering, group, default_enabled: :yaml)
     push_frontend_feature_flag(:iteration_cadences, group, default_enabled: :yaml)
     push_frontend_feature_flag(:labels_widget, group, default_enabled: :yaml)
+    experiment(:prominent_create_board_btn, subject: current_user) do |e|
+      e.use { }
+      e.try { }
+    end.run
   end
 
   feature_category :boards

app/controllers/projects/boards_controller.rb

@@ -12,6 +12,10 @@ class Projects::BoardsController < Projects::ApplicationController
     push_frontend_feature_flag(:board_multi_select, project, default_enabled: :yaml)
     push_frontend_feature_flag(:iteration_cadences, project&.group, default_enabled: :yaml)
     push_frontend_feature_flag(:labels_widget, project, default_enabled: :yaml)
+    experiment(:prominent_create_board_btn, subject: current_user) do |e|
+      e.use { }
+      e.try { }
+    end.run
   end
 
   feature_category :boards

app/views/shared/issuable/_search_bar.html.haml

@@ -15,6 +15,7 @@
     .d-flex.flex-column.flex-md-row.flex-grow-1.mb-lg-0.mb-md-2.mb-sm-0.w-100
       - if type == :boards
         = render "shared/boards/switcher", board: board
+        .js-new-board{ data: { multiple_issue_boards_available: parent.multiple_issue_boards_available?.to_s, can_admin_board: can?(current_user, :admin_issue_board, parent).to_s, } }
       = form_tag page_filter_path, method: :get, class: 'filter-form js-filter-form w-100' do
         - if params[:search].present?
           = hidden_field_tag :search, params[:search]

config/feature_flags/experiment/prominent_create_board_btn.yml

+---
+name: prominent_create_board_btn
+introduced_by_url: "https://gitlab.com/gitlab-org/gitlab/-/merge_requests/72683"
+rollout_issue_url: "https://gitlab.com/gitlab-org/gitlab/-/issues/343415"
+milestone: "14.5"
+type: experiment
+group: group::product planning
+default_enabled: false

locale/gitlab.pot

@@ -5582,6 +5582,9 @@ msgstr ""
 msgid "Boards|Failed to fetch blocking %{issuableType}s"
 msgstr ""
 
+msgid "Boards|New board"
+msgstr ""
+
 msgid "Boards|New epic"
 msgstr ""
 

spec/frontend/boards/components/new_board_button_spec.js

+import { mount } from '@vue/test-utils';
+import { GlButton } from '@gitlab/ui';
+import NewBoardButton from '~/boards/components/new_board_button.vue';
+import { extendedWrapper } from 'helpers/vue_test_utils_helper';
+import { assignGitlabExperiment } from 'helpers/experimentation_helper';
+import eventHub from '~/boards/eventhub';
+
+const FEATURE = 'prominent_create_board_btn';
+
+describe('NewBoardButton', () => {
+  let wrapper;
+
+  const createComponent = (args = {}) =>
+    extendedWrapper(
+      mount(NewBoardButton, {
+        provide: {
+          canAdminBoard: true,
+          multipleIssueBoardsAvailable: true,
+          ...args,
+        },
+      }),
+    );
+
+  afterEach(() => {
+    if (wrapper) {
+      wrapper.destroy();
+    }
+  });
+
+  describe('control variant', () => {
+    assignGitlabExperiment(FEATURE, 'control');
+
+    it('renders nothing', () => {
+      wrapper = createComponent();
+
+      expect(wrapper.text()).toBe('');
+    });
+  });
+
+  describe('candidate variant', () => {
+    assignGitlabExperiment(FEATURE, 'candidate');
+
+    it('renders New board button when `candidate` variant', () => {
+      wrapper = createComponent();
+
+      expect(wrapper.text()).toBe('New board');
+    });
+
+    it('renders nothing when `canAdminBoard` is `false`', () => {
+      wrapper = createComponent({ canAdminBoard: false });
+
+      expect(wrapper.find(GlButton).exists()).toBe(false);
+    });
+
+    it('renders nothing when `multipleIssueBoardsAvailable` is `false`', () => {
+      wrapper = createComponent({ multipleIssueBoardsAvailable: false });
+
+      expect(wrapper.find(GlButton).exists()).toBe(false);
+    });
+
+    it('emits `showBoardModal` when button is clicked', () => {
+      jest.spyOn(eventHub, '$emit').mockImplementation();
+
+      wrapper = createComponent();
+
+      wrapper.find(GlButton).vm.$emit('click', { preventDefault: () => {} });
+
+      expect(eventHub.$emit).toHaveBeenCalledWith('showBoardModal', 'new');
+    });
+  });
+});