Merge branch '321567-assignees-widget-ux-fixes' into 'master'

Resolve "Assignees widget UX fixes"

See merge request gitlab-org/gitlab!54800

app/assets/javascripts/sidebar/components/assignees/issuable_assignees.vue

@@ -31,13 +31,18 @@ export default {
 </script>
 
 <template>
-  <div class="gl-display-flex gl-flex-direction-column">
-    <div v-if="emptyUsers" data-testid="none">
+  <div class="gl-display-flex gl-flex-direction-column issuable-assignees">
+    <div
+      v-if="emptyUsers"
+      class="gl-display-flex gl-align-items-center gl-text-gray-500"
+      data-testid="none"
+    >
       <span> {{ __('None') }} -</span>
       <gl-button
         data-testid="assign-yourself"
         category="tertiary"
         variant="link"
+        class="gl-ml-2"
         @click="$emit('assign-self')"
       >
         <span class="gl-text-gray-500 gl-hover-text-blue-800">{{ __('assign yourself') }}</span>

app/assets/javascripts/sidebar/components/assignees/sidebar_assignees_widget.vue

@@ -281,6 +281,9 @@ export default {
     collapseWidget() {
       this.$refs.toggle.collapse();
     },
+    showDivider(list) {
+      return list.length > 0 && this.isSearchEmpty;
+    },
   },
 };
 </script>
@@ -306,6 +309,7 @@ export default {
       <issuable-assignees
         :users="assignees"
         :issuable-type="issuableType"
+        class="gl-mt-2"
         @assign-self="assignSelf"
       />
     </template>
@@ -334,12 +338,14 @@ export default {
                 data-testid="unassign"
                 @click="selectAssignee()"
               >
-                <span :class="selectedIsEmpty ? 'gl-pl-0' : 'gl-pl-6'">{{
-                  $options.i18n.unassigned
-                }}</span></gl-dropdown-item
+                <span
+                  :class="selectedIsEmpty ? 'gl-pl-0' : 'gl-pl-6'"
+                  class="gl-font-weight-bold"
+                  >{{ $options.i18n.unassigned }}</span
+                ></gl-dropdown-item
               >
-              <gl-dropdown-divider data-testid="unassign-divider" />
             </template>
+            <gl-dropdown-divider v-if="showDivider(selectedFiltered)" />
             <gl-dropdown-item
               v-for="item in selectedFiltered"
               :key="item.id"
@@ -358,8 +364,8 @@ export default {
                 />
               </gl-avatar-link>
             </gl-dropdown-item>
-            <gl-dropdown-divider v-if="!selectedIsEmpty" data-testid="selected-user-divider" />
             <template v-if="showCurrentUser">
+              <gl-dropdown-divider />
               <gl-dropdown-item
                 data-testid="unselected-participant"
                 @click.stop="selectAssignee(currentUser)"
@@ -370,12 +376,12 @@ export default {
                     :label="currentUser.name"
                     :sub-label="currentUser.username"
                     :src="currentUser.avatarUrl"
-                    class="gl-align-items-center"
+                    class="gl-align-items-center gl-pl-6!"
                   />
                 </gl-avatar-link>
               </gl-dropdown-item>
-              <gl-dropdown-divider />
             </template>
+            <gl-dropdown-divider v-if="showDivider(unselectedFiltered)" />
             <gl-dropdown-item
               v-for="unselectedUser in unselectedFiltered"
               :key="unselectedUser.id"

app/assets/javascripts/sidebar/components/assignees/uncollapsed_assignee_list.vue

@@ -83,7 +83,7 @@ export default {
         <assignee-avatar-link :user="user" :issuable-type="issuableType" />
       </div>
     </div>
-    <div v-if="renderShowMoreSection" class="user-list-more">
+    <div v-if="renderShowMoreSection" class="user-list-more gl-hover-text-blue-800">
       <button
         type="button"
         class="btn-link"

app/assets/javascripts/sidebar/components/sidebar_editable_item.vue

@@ -98,7 +98,7 @@ export default {
         {{ __('Edit') }}
       </gl-button>
     </div>
-    <div v-show="!edit" class="gl-text-gray-500" data-testid="collapsed-content">
+    <div v-show="!edit" data-testid="collapsed-content">
       <slot name="collapsed">{{ __('None') }}</slot>
     </div>
     <div v-show="edit" data-testid="expanded-content">

app/assets/javascripts/vue_shared/components/sidebar/multiselect_dropdown.vue

 <script>
-import { GlDropdown, GlDropdownForm } from '@gitlab/ui';
+import { GlDropdown, GlDropdownForm, GlDropdownDivider } from '@gitlab/ui';
 
 export default {
   components: {
     GlDropdownForm,
     GlDropdown,
+    GlDropdownDivider,
   },
   props: {
     headerText: {
@@ -20,8 +21,12 @@ export default {
 </script>
 
 <template>
-  <gl-dropdown class="show" :text="text" :header-text="headerText" @toggle="$emit('toggle')">
-    <slot name="search"></slot>
+  <gl-dropdown class="show" :text="text" @toggle="$emit('toggle')">
+    <template #header>
+      <p class="gl-font-weight-bold gl-text-center gl-mt-2 gl-mb-4">{{ headerText }}</p>
+      <gl-dropdown-divider />
+      <slot name="search"></slot>
+    </template>
     <gl-dropdown-form>
       <slot name="items"></slot>
     </gl-dropdown-form>

ee/app/assets/stylesheets/pages/issuable.scss

@@ -125,3 +125,9 @@
 .issuable-tag-valign {
   vertical-align: 1px;
 }
+
+.issuable-assignees {
+  a:not(.btn) {
+    color: inherit;
+  }
+}

ee/spec/frontend/sidebar/components/assignees/sidebar_assignees_widget_spec.js

-import { GlSearchBoxByType } from '@gitlab/ui';
+import { GlSearchBoxByType, GlDropdown } from '@gitlab/ui';
 import { shallowMount, createLocalVue } from '@vue/test-utils';
 import { nextTick } from 'vue';
 import VueApollo from 'vue-apollo';
@@ -86,6 +86,7 @@ describe('BoardCardAssigneeDropdown', () => {
         SidebarEditableItem,
         MultiSelectDropdown,
         GlSearchBoxByType,
+        GlDropdown,
       },
     });
   };

spec/frontend/vue_shared/components/multiselect_dropdown_spec.js

+import { GlDropdown } from '@gitlab/ui';
 import { getByText } from '@testing-library/dom';
 import { shallowMount } from '@vue/test-utils';
 import MultiSelectDropdown from '~/vue_shared/components/sidebar/multiselect_dropdown.vue';
@@ -25,6 +26,9 @@ describe('MultiSelectDropdown Component', () => {
       slots: {
         search: '<p>Search</p>',
       },
+      stubs: {
+        GlDropdown,
+      },
     });
     expect(getByText(wrapper.element, 'Search')).toBeDefined();
   });