Merge branch 'cngo-simplify-issuable-list-markup' into 'master'

Simplify issuable list markup

See merge request gitlab-org/gitlab!71195

app/assets/javascripts/issuable_list/components/issuable_item.vue

 <script>
-import { GlLink, GlIcon, GlLabel, GlFormCheckbox, GlTooltipDirective } from '@gitlab/ui';
+import { GlLink, GlIcon, GlLabel, GlFormCheckbox, GlSprintf, GlTooltipDirective } from '@gitlab/ui';
 
 import { getIdFromGraphQLId } from '~/graphql_shared/utils';
 import { isScopedLabel } from '~/lib/utils/common_utils';
@@ -15,6 +15,7 @@ export default {
     GlIcon,
     GlLabel,
     GlFormCheckbox,
+    GlSprintf,
     IssuableAssignees,
   },
   directives: {
@@ -82,9 +83,7 @@ export default {
       return this.issuable.assignees?.nodes || this.issuable.assignees || [];
     },
     createdAt() {
-      return sprintf(__('created %{timeAgo}'), {
-        timeAgo: getTimeago().format(this.issuable.createdAt),
-      });
+      return getTimeago().format(this.issuable.createdAt);
     },
     updatedAt() {
       return sprintf(__('updated %{timeAgo}'), {
@@ -164,24 +163,21 @@ export default {
 <template>
   <li
     :id="`issuable_${issuableId}`"
-    class="issue gl-px-5!"
+    class="issue gl-display-flex! gl-px-5!"
     :class="{ closed: issuable.closedAt, today: createdInPastDay }"
     :data-labels="labelIdsString"
   >
-    <div class="issuable-info-container">
-      <div v-if="showCheckbox" class="issue-check">
     <gl-form-checkbox
-          class="gl-mr-0"
+      v-if="showCheckbox"
+      class="issue-check gl-mr-0"
       :checked="checked"
       :data-id="issuableId"
       @input="$emit('checked-input', $event)"
     >
       <span class="gl-sr-only">{{ issuable.title }}</span>
     </gl-form-checkbox>
-      </div>
     <div class="issuable-main-info">
       <div data-testid="issuable-title" class="issue-title title">
-          <span class="issue-title-text" dir="auto">
         <gl-icon
           v-if="issuable.confidential"
           v-gl-tooltip
@@ -189,11 +185,10 @@ export default {
           :title="__('Confidential')"
           :aria-label="__('Confidential')"
         />
-            <gl-link :href="webUrl" v-bind="issuableTitleProps">
-              {{ issuable.title
-              }}<gl-icon v-if="isIssuableUrlExternal" name="external-link" class="gl-ml-2"
-            /></gl-link>
-          </span>
+        <gl-link class="issue-title-text" dir="auto" :href="webUrl" v-bind="issuableTitleProps">
+          {{ issuable.title }}
+          <gl-icon v-if="isIssuableUrlExternal" name="external-link" class="gl-ml-2" />
+        </gl-link>
         <span
           v-if="taskStatus"
           class="task-status gl-display-none gl-sm-display-inline-block! gl-ml-3"
@@ -207,15 +202,20 @@ export default {
         <span v-else data-testid="issuable-reference" class="issuable-reference">
           {{ reference }}
         </span>
-          <span class="issuable-authored gl-display-none gl-sm-display-inline-block! gl-mr-3">
+        <span class="gl-display-none gl-sm-display-inline-block">
           <span aria-hidden="true">&middot;</span>
+          <span class="issuable-authored gl-mr-3">
+            <gl-sprintf :message="__('created %{timeAgo} by %{author}')">
+              <template #timeAgo>
                 <span
-              v-gl-tooltip:tooltipcontainer.bottom
-              data-testid="issuable-created-at"
+                  v-gl-tooltip.bottom
                   :title="tooltipTitle(issuable.createdAt)"
-              >{{ createdAt }}</span
+                  data-testid="issuable-created-at"
                 >
-            {{ __('by') }}
+                  {{ createdAt }}
+                </span>
+              </template>
+              <template #author>
                 <slot v-if="hasSlotContents('author')" name="author"></slot>
                 <gl-link
                   v-else
@@ -229,8 +229,11 @@ export default {
                 >
                   <span class="author">{{ author.name }}</span>
                 </gl-link>
+              </template>
+            </gl-sprintf>
           </span>
           <slot name="timeframe"></slot>
+        </span>
         &nbsp;
         <span v-if="labels.length" role="group" :aria-label="__('Labels')">
           <gl-label
@@ -252,7 +255,7 @@ export default {
         <li v-if="hasSlotContents('status')" class="issuable-status">
           <slot name="status"></slot>
         </li>
-          <li v-if="assignees.length" class="gl-display-flex">
+        <li v-if="assignees.length">
           <issuable-assignees
             :assignees="assignees"
             :icon-size="16"
@@ -268,7 +271,7 @@ export default {
           class="issuable-comments gl-display-none gl-sm-display-block"
         >
           <gl-link
-              v-gl-tooltip:tooltipcontainer.top
+            v-gl-tooltip.top
             :title="__('Comments')"
             :href="issuableNotesLink"
             :class="{ 'no-comments': !notesCount }"
@@ -280,16 +283,12 @@ export default {
         </li>
       </ul>
       <div
-          data-testid="issuable-updated-at"
-          class="float-right issuable-updated-at gl-display-none gl-sm-display-inline-block"
-        >
-          <span
-            v-gl-tooltip:tooltipcontainer.bottom
+        v-gl-tooltip.bottom
+        class="gl-text-gray-500 gl-display-none gl-sm-display-inline-block"
         :title="tooltipTitle(issuable.updatedAt)"
-            class="issuable-updated-at"
-            >{{ updatedAt }}</span
+        data-testid="issuable-updated-at"
       >
-        </div>
+        {{ updatedAt }}
       </div>
     </div>
   </li>

app/assets/javascripts/issuable_list/components/issuable_list_root.vue

@@ -284,7 +284,6 @@ export default {
         <slot name="sidebar-items" :checked-issuables="bulkEditIssuables"></slot>
       </template>
     </issuable-bulk-edit-sidebar>
-    <div class="issuables-holder">
     <ul v-if="issuablesLoading" class="content-list">
       <li v-for="n in skeletonItemCount" :key="n" class="issue gl-px-5! gl-py-5!">
         <gl-skeleton-loading />
@@ -351,5 +350,4 @@ export default {
       @input="$emit('page-change', $event)"
     />
   </div>
-  </div>
 </template>

app/assets/javascripts/issues_list/components/issue_card_time_info.vue

@@ -85,7 +85,7 @@ export default {
   <span>
     <span
       v-if="issue.milestone"
-      class="issuable-milestone gl-display-none gl-sm-display-inline-block! gl-mr-3"
+      class="issuable-milestone gl-mr-3"
       data-testid="issuable-milestone"
     >
       <gl-link v-gl-tooltip :href="milestoneLink" :title="milestoneDate">
@@ -96,7 +96,7 @@ export default {
     <span
       v-if="issue.dueDate"
       v-gl-tooltip
-      class="issuable-due-date gl-display-none gl-sm-display-inline-block! gl-mr-3"
+      class="issuable-due-date gl-mr-3"
       :class="{ 'gl-text-red-500': showDueDateInRed }"
       :title="__('Due date')"
       data-testid="issuable-due-date"
@@ -107,21 +107,14 @@ export default {
     <span
       v-if="timeEstimate"
       v-gl-tooltip
-      class="gl-display-none gl-sm-display-inline-block! gl-mr-3"
+      class="gl-mr-3"
       :title="__('Estimate')"
       data-testid="time-estimate"
     >
       <gl-icon name="timer" />
       {{ timeEstimate }}
     </span>
-    <weight-count
-      class="issuable-weight gl-display-none gl-sm-display-inline-block gl-mr-3"
-      :weight="issue.weight"
-    />
-    <issue-health-status
-      v-if="showHealthStatus"
-      class="gl-display-none gl-sm-display-inline-block"
-      :health-status="healthStatus"
-    />
+    <weight-count class="issuable-weight gl-mr-3" :weight="issue.weight" />
+    <issue-health-status v-if="showHealthStatus" :health-status="healthStatus" />
   </span>
 </template>

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

@@ -77,7 +77,7 @@ export default {
 };
 </script>
 <template>
-  <div class="issue-assignees">
+  <div>
     <user-avatar-link
       v-for="assignee in assigneesToShow"
       :key="assignee.id"
@@ -97,10 +97,9 @@ export default {
     </user-avatar-link>
     <span
       v-if="numHiddenAssignees > 0"
-      v-gl-tooltip
+      v-gl-tooltip.bottom
       :title="assigneesCounterTooltip"
       class="avatar-counter"
-      data-placement="bottom"
       data-qa-selector="avatar_counter_content"
       >{{ assigneeCounterLabel }}</span
     >

app/assets/stylesheets/pages/issuable.scss

@@ -673,6 +673,7 @@
     .issuable-info-container {
       flex: 1;
       display: flex;
+    }
 
     .issuable-main-info {
       flex: 1 auto;
@@ -709,7 +710,6 @@
         }
       }
     }
-    }
 
     .issue-check {
       padding-right: $gl-padding;

ee/app/assets/javascripts/related_items_tree/components/issue_health_status.vue

@@ -24,11 +24,11 @@ export default {
 </script>
 
 <template>
-  <div class="health-status">
+  <span class="health-status">
     <span class="gl-label gl-label-sm" :class="statusClass">
       <span v-gl-tooltip class="gl-label-text" :title="__('Health status')">
         {{ statusText }}
       </span>
     </span>
-  </div>
+  </span>
 </template>

ee/spec/features/epics/epics_list_spec.rb

@@ -240,20 +240,19 @@ RSpec.describe 'epics list', :js do
         end
 
         it 'renders epics item with metadata', :aggregate_failures do
-          page.within('.issuable-list-container .issuable-list') do
-            expect(page.all('.issuable-info-container')[0].find('.issue-title')).to have_content(epic2.title)
-            expect(page.all('.issuable-info-container')[0].find('.issuable-reference')).to have_content("&#{epic2.iid}")
-            expect(page.all('.issuable-info-container')[0].find('.issuable-authored')).to have_content('created')
-            expect(page.all('.issuable-info-container')[0].find('.issuable-authored')).to have_content("by #{epic2.author.name}")
+          page.within('.issuable-list .issue:first-of-type') do
+            expect(page).to have_link(epic2.title)
+            expect(page).to have_text("&#{epic2.iid}")
+            expect(page).to have_text("created just now by #{epic2.author.name}")
           end
         end
 
         it 'renders epic item timeframe', :aggregate_failures do
-          page.within('.issuable-list-container .issuable-list') do
-            expect(page.all('.issuable-info-container')[0].find('.issuable-info')).to have_content('Dec 15, 2020 – No due date')
-            expect(page.all('.issuable-info-container')[1].find('.issuable-info')).to have_content('Dec 15, 2020 – Jan 15, 2021')
-            expect(page.all('.issuable-info-container')[2].find('.issuable-info')).to have_content('No start date – Jan 15, 2021')
-          end
+          issues = page.all('.issue')
+
+          expect(issues[0]).to have_text('Dec 15, 2020 – No due date')
+          expect(issues[1]).to have_text('Dec 15, 2020 – Jan 15, 2021')
+          expect(issues[2]).to have_text('No start date – Jan 15, 2021')
         end
       end
 

ee/spec/features/projects/quality/test_case_list_spec.rb

@@ -74,12 +74,11 @@ RSpec.describe 'Test Cases', :js do
 
       it 'shows test cases title and metadata' do
         page.within('.issuable-list-container .issuable-list li.issue', match: :first) do
-          expect(page.find('.issue-title')).to have_content(test_case1.title)
-          expect(page.find('.issuable-reference')).to have_content("##{test_case1.iid}")
-          expect(page.find('.issuable-info')).to have_link(label.title, href: "?label_name[]=#{label.title}")
-          expect(page.find('.issuable-authored')).to have_content('created 5 days ago by')
-          expect(page.find('.author')).to have_content(user.name)
-          expect(page.find('div.issuable-updated-at')).to have_content('updated 2 days ago')
+          expect(page).to have_link(test_case1.title)
+          expect(page).to have_text("##{test_case1.iid}")
+          expect(page).to have_link(label.title, href: "?label_name[]=#{label.title}")
+          expect(page).to have_text("created 5 days ago by #{user.name}")
+          expect(page).to have_text('updated 2 days ago')
         end
       end
     end

locale/gitlab.pot

@@ -39900,6 +39900,9 @@ msgstr ""
 msgid "created %{timeAgo}"
 msgstr ""
 
+msgid "created %{timeAgo} by %{author}"
+msgstr ""
+
 msgid "created by"
 msgstr ""
 

spec/frontend/issuable_list/components/issuable_item_spec.js

-import { GlLink, GlLabel, GlIcon, GlFormCheckbox } from '@gitlab/ui';
+import { GlLink, GlLabel, GlIcon, GlFormCheckbox, GlSprintf } from '@gitlab/ui';
 import { shallowMount } from '@vue/test-utils';
 import { useFakeDate } from 'helpers/fake_date';
 import IssuableItem from '~/issuable_list/components/issuable_item.vue';
@@ -16,6 +16,9 @@ const createComponent = ({ issuableSymbol = '#', issuable = mockIssuable, slots
       showCheckbox: false,
     },
     slots,
+    stubs: {
+      GlSprintf,
+    },
   });
 
 const MOCK_GITLAB_URL = 'http://0.0.0.0:3000';
@@ -135,13 +138,6 @@ describe('IssuableItem', () => {
       });
     });
 
-    describe('createdAt', () => {
-      it('returns string containing timeago string based on `issuable.createdAt`', () => {
-        expect(wrapper.vm.createdAt).toContain('created');
-        expect(wrapper.vm.createdAt).toContain('ago');
-      });
-    });
-
     describe('updatedAt', () => {
       it('returns string containing timeago string based on `issuable.updatedAt`', () => {
         expect(wrapper.vm.updatedAt).toContain('updated');
@@ -449,8 +445,7 @@ describe('IssuableItem', () => {
     it('renders issuable updatedAt info', () => {
       const updatedAtEl = wrapper.find('[data-testid="issuable-updated-at"]');
 
-      expect(updatedAtEl.exists()).toBe(true);
-      expect(updatedAtEl.find('span').attributes('title')).toBe('Sep 10, 2020 11:41am UTC');
+      expect(updatedAtEl.attributes('title')).toBe('Sep 10, 2020 11:41am UTC');
       expect(updatedAtEl.text()).toBe(wrapper.vm.updatedAt);
     });
 

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

@@ -94,10 +94,6 @@ describe('IssueAssigneesComponent', () => {
       expect(vm.avatarUrlTitle(mockAssigneesList[0])).toBe('Assigned to Terrell Graham');
     });
 
-    it('renders component root element with class `issue-assignees`', () => {
-      expect(wrapper.element.classList.contains('issue-assignees')).toBe(true);
-    });
-
     it('renders assignee', () => {
       const data = findAvatars().wrappers.map((x) => ({
         ...x.props(),