Merge branch 'polish-sidebar-toggle' into 'master'

Polish sidebar toggle

Closes #28046

See merge request !12242

app/assets/javascripts/sidebar/components/assignees/assignee_title.js

@@ -14,6 +14,11 @@ export default {
       type: Boolean,
       required: true,
     },
+    showToggle: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
   },
   computed: {
     assigneeTitle() {
@@ -36,6 +41,19 @@ export default {
       >
         Edit
       </a>
+      <a
+        v-if="showToggle"
+        aria-label="Toggle sidebar"
+        class="gutter-toggle pull-right js-sidebar-toggle"
+        href="#"
+        role="button"
+      >
+        <i
+          aria-hidden="true"
+          data-hidden="true"
+          class="fa fa-angle-double-right"
+        />
+      </a>
     </div>
   `,
 };

app/assets/javascripts/sidebar/components/assignees/sidebar_assignees.js

@@ -64,6 +64,7 @@ export default {
   },
   beforeMount() {
     this.field = this.$el.dataset.field;
+    this.signedIn = typeof this.$el.dataset.signedIn !== 'undefined';
   },
   template: `
     <div>
@@ -71,6 +72,7 @@ export default {
         :number-of-assignees="store.assignees.length"
         :loading="loading || store.isFetching.assignees"
         :editable="store.editable"
+        :show-toggle="!signedIn"
       />
       <assignees
         v-if="!store.isFetching.assignees"

app/assets/stylesheets/pages/issuable.scss

@@ -228,6 +228,12 @@
       padding-top: 10px;
     }
 
+    &:not(.issue-boards-sidebar):not([data-signed-in]) {
+      .issuable-sidebar-header {
+        display: none;
+      }
+    }
+
     .assign-yourself .btn-link {
       padding-left: 0;
     }
@@ -249,6 +255,10 @@
       border-left: 1px solid $border-gray-normal;
     }
 
+    .title .gutter-toggle {
+      margin-top: 0;
+    }
+
     .assignee .avatar {
       float: left;
       margin-right: 10px;

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

@@ -3,7 +3,7 @@
   = page_specific_javascript_bundle_tag('common_vue')
   = page_specific_javascript_bundle_tag('sidebar')
 
-%aside.right-sidebar.js-right-sidebar{ data: { "offset-top" => "50", "spy" => "affix" }, class: sidebar_gutter_collapsed_class, 'aria-live' => 'polite' }
+%aside.right-sidebar.js-right-sidebar{ data: { "offset-top" => "50", "spy" => "affix", signed: { in: current_user.present? } }, class: sidebar_gutter_collapsed_class, 'aria-live' => 'polite' }
   .issuable-sidebar{ data: { endpoint: "#{issuable_json_path(issuable)}" } }
     - can_edit_issuable = can?(current_user, :"admin_#{issuable.to_ability_name}", @project)
     .block.issuable-sidebar-header
@@ -20,7 +20,7 @@
         .block.todo.hide-expanded
           = render "shared/issuable/sidebar_todo", todo: todo, issuable: issuable, is_collapsed: true
       .block.assignee
-        = render "shared/issuable/sidebar_assignees", issuable: issuable, can_edit_issuable: can_edit_issuable
+        = render "shared/issuable/sidebar_assignees", issuable: issuable, can_edit_issuable: can_edit_issuable, signed_in: current_user.present?
       .block.milestone
         .sidebar-collapsed-icon
           = icon('clock-o', 'aria-hidden': 'true')

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

 - if issuable.is_a?(Issue)
-  #js-vue-sidebar-assignees{ data: { field: "#{issuable.to_ability_name}[assignee_ids]" } }
+  #js-vue-sidebar-assignees{ data: { field: "#{issuable.to_ability_name}[assignee_ids]", signed_in: signed_in } }
     .title.hide-collapsed
       Assignee
       = icon('spinner spin')
@@ -14,6 +14,9 @@
     = icon('spinner spin', class: 'hidden block-loading', 'aria-hidden': 'true')
     - if can_edit_issuable
       = link_to 'Edit', '#', class: 'edit-link pull-right'
+    - if !signed_in
+      %a.gutter-toggle.pull-right.js-sidebar-toggle{ role: "button", href: "#", "aria-label" => "Toggle sidebar" }
+        = sidebar_gutter_toggle_icon
   .value.hide-collapsed
     - if issuable.assignee
       = link_to_member(@project, issuable.assignee, size: 32, extra_class: 'bold') do

changelogs/unreleased/polish-sidebar-toggle.yml

+---
+title: Remove unused space in sidebar todo toggle when not signed in
+merge_request:
+author:

spec/javascripts/sidebar/assignee_title_spec.js

@@ -33,6 +33,31 @@ describe('AssigneeTitle component', () => {
     });
   });
 
+  describe('gutter toggle', () => {
+    it('does not show toggle by default', () => {
+      component = new AssigneeTitleComponent({
+        propsData: {
+          numberOfAssignees: 2,
+          editable: false,
+        },
+      }).$mount();
+
+      expect(component.$el.querySelector('.gutter-toggle')).toBeNull();
+    });
+
+    it('shows toggle when showToggle is true', () => {
+      component = new AssigneeTitleComponent({
+        propsData: {
+          numberOfAssignees: 2,
+          editable: false,
+          showToggle: true,
+        },
+      }).$mount();
+
+      expect(component.$el.querySelector('.gutter-toggle')).toEqual(jasmine.any(Object));
+    });
+  });
+
   it('does not render spinner by default', () => {
     component = new AssigneeTitleComponent({
       propsData: {