Merge branch 'todo-button-design-management' into 'master'

Add To-Do toggle button to Design view

See merge request gitlab-org/gitlab!39935

app/assets/javascripts/design_management/components/design_sidebar.vue

@@ -8,6 +8,8 @@ import { extractDiscussions, extractParticipants } from '../utils/design_managem
 import { ACTIVE_DISCUSSION_SOURCE_TYPES } from '../constants';
 import DesignDiscussion from './design_notes/design_discussion.vue';
 import Participants from '~/sidebar/components/participants/participants.vue';
+import TodoButton from '~/vue_shared/components/todo_button.vue';
+import glFeatureFlagsMixin from '~/vue_shared/mixins/gl_feature_flags_mixin';
 
 export default {
   components: {
@@ -16,7 +18,9 @@ export default {
     GlCollapse,
     GlButton,
     GlPopover,
+    TodoButton,
   },
+  mixins: [glFeatureFlagsMixin()],
   props: {
     design: {
       type: Object,
@@ -59,6 +63,14 @@ export default {
     resolvedCommentsToggleIcon() {
       return this.resolvedDiscussionsExpanded ? 'chevron-down' : 'chevron-right';
     },
+    showTodoButton() {
+      return this.glFeatures.designManagementTodoButton;
+    },
+    sidebarWrapperClass() {
+      return {
+        'gl-pt-0': this.showTodoButton,
+      };
+    },
   },
   watch: {
     isResolvedCommentsPopoverHidden(newVal) {
@@ -101,7 +113,14 @@ export default {
 </script>
 
 <template>
-  <div class="image-notes" @click="handleSidebarClick">
+  <div class="image-notes" :class="sidebarWrapperClass" @click="handleSidebarClick">
+    <div
+      v-if="showTodoButton"
+      class="gl-py-4 gl-mb-4 gl-display-flex gl-justify-content-space-between gl-align-items-center gl-border-b-1 gl-border-b-solid gl-border-b-gray-100"
+    >
+      <span>{{ __('To-Do') }}</span>
+      <todo-button issuable-type="design" :issuable-id="design.iid" />
+    </div>
     <h2 class="gl-font-weight-bold gl-mt-0">
       {{ issue.title }}
     </h2>

app/controllers/projects/issues_controller.rb

@@ -49,6 +49,7 @@ class Projects::IssuesController < Projects::ApplicationController
     push_frontend_feature_flag(:vue_issuable_sidebar, project.group)
     push_frontend_feature_flag(:tribute_autocomplete, @project)
     push_frontend_feature_flag(:vue_issuables_list, project)
+    push_frontend_feature_flag(:design_management_todo_button, project)
   end
 
   before_action only: :show do

config/feature_flags/development/design_management_todo_button.yml

+---
+name: design_management_todo_button
+introduced_by_url: https://gitlab.com/gitlab-org/gitlab/-/merge_requests/39935
+rollout_issue_url: https://gitlab.com/gitlab-org/gitlab/-/issues/245074
+group: group::knowledge
+type: development
+default_enabled: false
\ No newline at end of file

spec/frontend/design_management/components/design_sidebar_spec.js

@@ -6,6 +6,7 @@ import Participants from '~/sidebar/components/participants/participants.vue';
 import DesignDiscussion from '~/design_management/components/design_notes/design_discussion.vue';
 import design from '../mock_data/design';
 import updateActiveDiscussionMutation from '~/design_management/graphql/mutations/update_active_discussion.mutation.graphql';
+import TodoButton from '~/vue_shared/components/todo_button.vue';
 
 const scrollIntoViewMock = jest.fn();
 HTMLElement.prototype.scrollIntoView = scrollIntoViewMock;
@@ -42,7 +43,7 @@ describe('Design management design sidebar component', () => {
   const findNewDiscussionDisclaimer = () =>
     wrapper.find('[data-testid="new-discussion-disclaimer"]');
 
-  function createComponent(props = {}) {
+  function createComponent(props = {}, { enableTodoButton } = {}) {
     wrapper = shallowMount(DesignSidebar, {
       propsData: {
         design,
@@ -57,6 +58,9 @@ describe('Design management design sidebar component', () => {
         },
       },
       stubs: { GlPopover },
+      provide: {
+        glFeatures: { designManagementTodoButton: enableTodoButton },
+      },
     });
   }
 
@@ -241,4 +245,23 @@ describe('Design management design sidebar component', () => {
       expect(Cookies.set).toHaveBeenCalledWith(cookieKey, 'true', { expires: 365 * 10 });
     });
   });
+
+  it('does not render To-Do button by default', () => {
+    createComponent();
+    expect(wrapper.find(TodoButton).exists()).toBe(false);
+  });
+
+  describe('when `design_management_todo_button` feature flag is enabled', () => {
+    beforeEach(() => {
+      createComponent({}, { enableTodoButton: true });
+    });
+
+    it('renders sidebar root element with no top padding', () => {
+      expect(wrapper.classes()).toContain('gl-pt-0');
+    });
+
+    it('renders todo_button component', () => {
+      expect(wrapper.find(TodoButton).exists()).toBe(true);
+    });
+  });
 });

spec/frontend/design_management/pages/design/__snapshots__/index_spec.js.snap

@@ -32,6 +32,8 @@ exports[`Design management design index page renders design index 1`] = `
   <div
     class="image-notes"
   >
+    <!---->
+     
     <h2
       class="gl-font-weight-bold gl-mt-0"
     >
@@ -179,6 +181,8 @@ exports[`Design management design index page with error GlAlert is rendered in c
   <div
     class="image-notes"
   >
+    <!---->
+     
     <h2
       class="gl-font-weight-bold gl-mt-0"
     >