Merge branch '229584-jira-issues-ui-polish' into 'master'

Polish Jira issues integration UI

See merge request gitlab-org/gitlab!37095

app/assets/javascripts/issuables_list/components/issuable.vue

@@ -272,12 +272,11 @@ export default {
               :target="linkTarget"
               data-testid="issuable-title"
               data-qa-selector="issue_link"
-            >
-              {{ issuable.title }}
-              <gl-icon
+              >{{ issuable.title
+              }}<gl-icon
                 v-if="isJiraIssue"
                 name="external-link"
-                class="gl-vertical-align-text-bottom"
+                class="gl-vertical-align-text-bottom gl-ml-2"
               />
             </gl-link>
           </span>

app/assets/javascripts/vue_shared/components/filtered_search_bar/filtered_search_bar_root.vue

@@ -83,7 +83,7 @@ export default {
     return {
       initialRender: true,
       recentSearchesPromise: null,
-      recentSearches: [],
+      recentSearches: null,
       filterValue: this.initialFilterValue,
       selectedSortOption,
       selectedSortDirection,

app/assets/javascripts/vue_shared/components/issue/issue_assignees.vue

@@ -92,7 +92,7 @@ export default {
     >
       <span class="js-assignee-tooltip">
         <span class="bold d-block">{{ __('Assignee') }}</span> {{ assignee.name }}
-        <span class="text-white-50">@{{ assignee.username }}</span>
+        <span v-if="assignee.username" class="text-white-50">@{{ assignee.username }}</span>
       </span>
     </user-avatar-link>
     <span

ee/changelogs/unreleased/229584-jira-issues-ui-polish.yml

+---
+title: Polish Jira issues UI
+merge_request: 37095
+author:
+type: changed

spec/frontend/vue_shared/components/issue/issue_assignees_spec.js

@@ -21,6 +21,11 @@ describe('IssueAssigneesComponent', () => {
     vm = wrapper.vm;
   };
 
+  afterEach(() => {
+    wrapper.destroy();
+    wrapper = null;
+  });
+
   const findTooltipText = () => wrapper.find('.js-assignee-tooltip').text();
   const findAvatars = () => wrapper.findAll(UserAvatarLink);
   const findOverflowCounter = () => wrapper.find('.avatar-counter');
@@ -123,6 +128,22 @@ describe('IssueAssigneesComponent', () => {
       it('renders assignee @username', () => {
         expect(findTooltipText()).toContain('@monserrate.gleichner');
       });
+
+      it('does not render `@` when username not available', () => {
+        const userName = 'User without username';
+        factory({
+          assignees: [
+            {
+              name: userName,
+            },
+          ],
+        });
+
+        const tooltipText = findTooltipText();
+
+        expect(tooltipText).toContain(userName);
+        expect(tooltipText).not.toContain('@');
+      });
     });
   });
 });