Merge branch 'kp-epics-list-vue-backstage' into 'master'

Backstage changes for Issuable List app and groupLabels API frontend method

See merge request gitlab-org/gitlab!52787

app/assets/javascripts/api.js

@@ -179,9 +179,9 @@ const Api = {
       });
   },
 
-  groupLabels(namespace) {
+  groupLabels(namespace, options = {}) {
     const url = Api.buildUrl(Api.groupLabelsPath).replace(':namespace_path', namespace);
-    return axios.get(url).then(({ data }) => data);
+    return axios.get(url, options).then(({ data }) => data);
   },
 
   // Return namespaces list. Filtered by query

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

@@ -139,6 +139,12 @@ export default {
       <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
+              name="eye-slash"
+              :title="__('Confidential')"
+            />
             <gl-link :href="issuable.webUrl" v-bind="issuableTitleProps"
               >{{ issuable.title
               }}<gl-icon v-if="isIssuableUrlExternal" name="external-link" class="gl-ml-2"

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

@@ -230,7 +230,7 @@ export default {
       :initial-sort-by="initialSortBy"
       :show-checkbox="showBulkEditSidebar"
       :checkbox-checked="allIssuablesChecked"
-      class="gl-flex-grow-1 row-content-block"
+      class="gl-flex-grow-1 gl-border-t-none row-content-block"
       @checked-input="handleAllIssuablesCheckedInput"
       @onFilter="$emit('filter', $event)"
       @onSort="$emit('sort', $event)"

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

@@ -32,7 +32,10 @@ export default {
 
 <template>
   <div class="top-area">
-    <gl-tabs class="nav-links mobile-separator issuable-state-filters">
+    <gl-tabs
+      class="gl-display-flex gl-flex-fill-1 gl-p-0 gl-m-0 mobile-separator issuable-state-filters"
+      nav-class="gl-border-b-0"
+    >
       <gl-tab
         v-for="tab in tabs"
         :key="tab.id"
@@ -41,7 +44,7 @@ export default {
       >
         <template #title>
           <span :title="tab.titleTooltip">{{ tab.title }}</span>
-          <gl-badge v-if="tabCounts" variant="neutral" size="sm" class="gl-px-2 gl-py-1!">{{
+          <gl-badge v-if="tabCounts" variant="neutral" size="sm" class="gl-tab-counter-badge">{{
             tabCounts[tab.name]
           }}</gl-badge>
         </template>

app/assets/stylesheets/framework/filters.scss

@@ -475,6 +475,15 @@
     }
   }
 
+  .sort-dropdown-container {
+    // This property is set to have borders
+    // around sort dropdown match with filter
+    // input field.
+    .gl-button {
+      box-shadow: inset 0 0 0 1px $gray-400;
+    }
+  }
+
   @include media-breakpoint-up(md) {
     .sort-dropdown-container {
       margin-left: 10px;

spec/frontend/api_spec.js

@@ -260,6 +260,28 @@ describe('Api', () => {
     });
   });
 
+  describe('groupLabels', () => {
+    it('fetches group labels', (done) => {
+      const options = { params: { search: 'foo' } };
+      const expectedGroup = 'gitlab-org';
+      const expectedUrl = `${dummyUrlRoot}/groups/${expectedGroup}/-/labels`;
+      mock.onGet(expectedUrl).reply(httpStatus.OK, [
+        {
+          id: 1,
+          title: 'Foo Label',
+        },
+      ]);
+
+      Api.groupLabels(expectedGroup, options)
+        .then((res) => {
+          expect(res.length).toBe(1);
+          expect(res[0].title).toBe('Foo Label');
+        })
+        .then(done)
+        .catch(done.fail);
+    });
+  });
+
   describe('namespaces', () => {
     it('fetches namespaces', (done) => {
       const query = 'dummy query';

spec/frontend/issuable_list/components/issuable_item_spec.js

@@ -257,6 +257,23 @@ describe('IssuableItem', () => {
       );
     });
 
+    it('renders issuable confidential icon when issuable is confidential', async () => {
+      wrapper.setProps({
+        issuable: {
+          ...mockIssuable,
+          confidential: true,
+        },
+      });
+
+      await wrapper.vm.$nextTick();
+
+      const confidentialEl = wrapper.find('[data-testid="issuable-title"]').find(GlIcon);
+
+      expect(confidentialEl.exists()).toBe(true);
+      expect(confidentialEl.props('name')).toBe('eye-slash');
+      expect(confidentialEl.attributes('title')).toBe('Confidential');
+    });
+
     it('renders issuable reference', () => {
       const referenceEl = wrapper.find('[data-testid="issuable-reference"]');