Address reviewer comments

- remove ugly 1-0 status

app/assets/javascripts/import_entities/import_groups/components/import_table.vue

@@ -123,7 +123,7 @@ export default {
       class="gl-py-5 gl-border-solid gl-border-gray-200 gl-border-0 gl-border-b-1 gl-display-flex gl-align-items-center"
     >
       <span>
-        <gl-sprintf v-if="!$apollo.loading" :message="statusMessage">
+        <gl-sprintf v-if="!$apollo.loading && hasGroups" :message="statusMessage">
           <template #start>
             <strong>{{ paginationInfo.start }}</strong>
           </template>
@@ -176,7 +176,7 @@ export default {
         <pagination-links
           :change="setPage"
           :page-info="bulkImportSourceGroups.pageInfo"
-          class="gl-flex gl-mt-3"
+          class="gl-mt-3"
         />
       </div>
     </template>

spec/controllers/import/bulk_imports_controller_spec.rb

@@ -62,7 +62,7 @@ RSpec.describe Import::BulkImportsController do
               ],
               headers: {
                 'x-next-page' => '2',
-                'X-page' => '1',
+                'x-page' => '1',
                 'x-per-page' => '20',
                 'x-total' => '37',
                 'x-total-pages' => '2'

spec/frontend/import_entities/import_groups/components/import_table_spec.js

@@ -100,6 +100,18 @@ describe('import table', () => {
     expect(wrapper.findAll(ImportTableRow)).toHaveLength(FAKE_GROUPS.length);
   });
 
+  it('does not render status string when result list is empty', async () => {
+    createComponent({
+      bulkImportSourceGroups: jest.fn().mockResolvedValue({
+        nodes: [],
+        pageInfo: FAKE_PAGE_INFO,
+      }),
+    });
+    await waitForPromises();
+
+    expect(wrapper.text()).not.toContain('Showing 1-0');
+  });
+
   describe('converts row events to mutation invocations', () => {
     beforeEach(() => {
       createComponent({
@@ -174,7 +186,7 @@ describe('import table', () => {
   describe('filters', () => {
     const bulkImportSourceGroupsQueryMock = jest
       .fn()
-      .mockResolvedValue({ nodes: [], pageInfo: FAKE_PAGE_INFO });
+      .mockResolvedValue({ nodes: [FAKE_GROUP], pageInfo: FAKE_PAGE_INFO });
 
     beforeEach(() => {
       createComponent({
@@ -213,7 +225,7 @@ describe('import table', () => {
       findFilterInput().vm.$emit('submit', FILTER_VALUE);
       await waitForPromises();
 
-      expect(wrapper.text()).toContain('Showing 1-0 of 40 groups matching filter "foo"');
+      expect(wrapper.text()).toContain('Showing 1-1 of 40 groups matching filter "foo"');
     });
 
     it('properly resets filter in graphql query when search box is cleared', async () => {