Merge branch 'jira-issues-root-cleanup' into 'master'

Jira issues root cleanup

See merge request gitlab-org/gitlab!60468

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

@@ -274,44 +274,47 @@ export default {
           <gl-skeleton-loading />
         </li>
       </ul>
-      <component
-        :is="issuablesWrapper"
-        v-if="!issuablesLoading && issuables.length"
-        class="content-list issuable-list issues-list"
-        :class="{ 'manual-ordering': isManualOrdering }"
-        v-bind="$options.vueDraggableAttributes"
-        @update="handleVueDraggableUpdate"
-      >
-        <issuable-item
-          v-for="issuable in issuables"
-          :key="issuableId(issuable)"
-          :class="{ 'gl-cursor-grab': isManualOrdering }"
-          :issuable-symbol="issuableSymbol"
-          :issuable="issuable"
-          :enable-label-permalinks="enableLabelPermalinks"
-          :label-filter-param="labelFilterParam"
-          :show-checkbox="showBulkEditSidebar"
-          :checked="issuableChecked(issuable)"
-          @checked-input="handleIssuableCheckedInput(issuable, $event)"
+      <template v-else>
+        <component
+          :is="issuablesWrapper"
+          v-if="issuables.length > 0"
+          class="content-list issuable-list issues-list"
+          :class="{ 'manual-ordering': isManualOrdering }"
+          v-bind="$options.vueDraggableAttributes"
+          @update="handleVueDraggableUpdate"
         >
-          <template #reference>
-            <slot name="reference" :issuable="issuable"></slot>
-          </template>
-          <template #author>
-            <slot name="author" :author="issuable.author"></slot>
-          </template>
-          <template #timeframe>
-            <slot name="timeframe" :issuable="issuable"></slot>
-          </template>
-          <template #status>
-            <slot name="status" :issuable="issuable"></slot>
-          </template>
-          <template #statistics>
-            <slot name="statistics" :issuable="issuable"></slot>
-          </template>
-        </issuable-item>
-      </component>
-      <slot v-if="!issuablesLoading && !issuables.length" name="empty-state"></slot>
+          <issuable-item
+            v-for="issuable in issuables"
+            :key="issuableId(issuable)"
+            :class="{ 'gl-cursor-grab': isManualOrdering }"
+            :issuable-symbol="issuableSymbol"
+            :issuable="issuable"
+            :enable-label-permalinks="enableLabelPermalinks"
+            :label-filter-param="labelFilterParam"
+            :show-checkbox="showBulkEditSidebar"
+            :checked="issuableChecked(issuable)"
+            @checked-input="handleIssuableCheckedInput(issuable, $event)"
+          >
+            <template #reference>
+              <slot name="reference" :issuable="issuable"></slot>
+            </template>
+            <template #author>
+              <slot name="author" :author="issuable.author"></slot>
+            </template>
+            <template #timeframe>
+              <slot name="timeframe" :issuable="issuable"></slot>
+            </template>
+            <template #status>
+              <slot name="status" :issuable="issuable"></slot>
+            </template>
+            <template #statistics>
+              <slot name="statistics" :issuable="issuable"></slot>
+            </template>
+          </issuable-item>
+        </component>
+        <slot v-else name="empty-state"></slot>
+      </template>
+
       <gl-pagination
         v-if="showPaginationControls"
         :per-page="defaultPageSize"

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

@@ -48,12 +48,13 @@ export default {
         <template #title>
           <span :title="tab.titleTooltip">{{ tab.title }}</span>
           <gl-badge
-            v-if="isTabCountNumeric(tab)"
+            v-if="tabCounts && isTabCountNumeric(tab)"
             variant="neutral"
             size="sm"
             class="gl-tab-counter-badge"
-            >{{ tabCounts[tab.name] }}</gl-badge
           >
+            {{ tabCounts[tab.name] }}
+          </gl-badge>
         </template>
       </gl-tab>
     </gl-tabs>

ee/app/assets/javascripts/integrations/jira/issues_list/components/jira_issues_list_root.vue

@@ -206,19 +206,19 @@ export default {
     </template>
     <template #reference="{ issuable }">
       <span v-safe-html="jiraLogo" class="svg-container jira-logo-container"></span>
-      <span>{{ issuable.references.relative }}</span>
+      <span v-if="issuable">{{ issuable.references.relative }}</span>
     </template>
     <template #author="{ author }">
       <gl-sprintf message="%{authorName} in Jira">
         <template #authorName>
-          <gl-link class="author-link js-user-link" target="_blank" :href="author.webUrl"
-            >{{ author.name }}
+          <gl-link class="author-link js-user-link" target="_blank" :href="author.webUrl">
+            {{ author.name }}
           </gl-link>
         </template>
       </gl-sprintf>
     </template>
     <template #status="{ issuable }">
-      {{ issuable.status }}
+      <template v-if="issuable"> {{ issuable.status }} </template>
     </template>
     <template #empty-state>
       <jira-issues-list-empty-state

ee/spec/frontend/integrations/jira/issues_list/components/__snapshots__/jira_issues_list_root_spec.js.snap

+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`JiraIssuesListRoot renders issuable-list component with correct props 1`] = `
+Object {
+  "currentPage": 1,
+  "currentTab": "opened",
+  "defaultPageSize": 2,
+  "enableLabelPermalinks": true,
+  "initialFilterValue": Array [
+    Object {
+      "type": "filtered-search-term",
+      "value": Object {
+        "data": "foo",
+      },
+    },
+  ],
+  "initialSortBy": "created_desc",
+  "isManualOrdering": false,
+  "issuableSymbol": "#",
+  "issuables": Array [],
+  "issuablesLoading": false,
+  "labelFilterParam": "labels",
+  "namespace": "gitlab-org/gitlab-test",
+  "nextPage": 2,
+  "previousPage": 0,
+  "recentSearchesStorageKey": "jira_issues",
+  "searchInputPlaceholder": "Search Jira issues",
+  "searchTokens": Array [],
+  "showBulkEditSidebar": false,
+  "showPaginationControls": false,
+  "sortOptions": Array [
+    Object {
+      "id": 1,
+      "sortDirection": Object {
+        "ascending": "created_asc",
+        "descending": "created_desc",
+      },
+      "title": "Created date",
+    },
+    Object {
+      "id": 2,
+      "sortDirection": Object {
+        "ascending": "updated_asc",
+        "descending": "updated_desc",
+      },
+      "title": "Last updated",
+    },
+  ],
+  "tabCounts": null,
+  "tabs": Array [
+    Object {
+      "id": "state-opened",
+      "name": "opened",
+      "title": "Open",
+      "titleTooltip": "Filter by issues that are currently opened.",
+    },
+    Object {
+      "id": "state-closed",
+      "name": "closed",
+      "title": "Closed",
+      "titleTooltip": "Filter by issues that are currently closed.",
+    },
+    Object {
+      "id": "state-all",
+      "name": "all",
+      "title": "All",
+      "titleTooltip": "Show all issues.",
+    },
+  ],
+  "totalItems": 0,
+  "urlParams": Object {
+    "labels[]": undefined,
+    "page": 1,
+    "search": "foo",
+    "sort": "created_desc",
+    "state": "opened",
+  },
+}
+`;