Merge branch '324710-add-sticky-header-to-group-migration-table' into 'master'

Add sticky header to group migration table

See merge request gitlab-org/gitlab!76439

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

@@ -170,7 +170,7 @@ export default {
     },
 
     availableGroupsForImport() {
-      return this.groupsTableData.filter((g) => g.flags.isAvailableForImport && g.flags.isInvalid);
+      return this.groupsTableData.filter((g) => g.flags.isAvailableForImport && !g.flags.isInvalid);
     },
 
     humanizedTotal() {
@@ -521,13 +521,15 @@ export default {
       />
       <template v-else>
         <div
-          class="gl-bg-gray-10 gl-border-solid gl-border-gray-200 gl-border-0 gl-border-b-1 gl-p-4 gl-display-flex gl-align-items-center"
+          class="gl-bg-gray-10 gl-border-solid gl-border-gray-200 gl-border-0 gl-border-b-1 gl-px-4 gl-display-flex gl-align-items-center import-table-bar"
         >
-          <gl-sprintf :message="__('%{count} selected')">
-            <template #count>
-              {{ selectedGroupsIds.length }}
-            </template>
-          </gl-sprintf>
+          <span data-test-id="selection-count">
+            <gl-sprintf :message="__('%{count} selected')">
+              <template #count>
+                {{ selectedGroupsIds.length }}
+              </template>
+            </gl-sprintf>
+          </span>
           <gl-button
             category="primary"
             variant="confirm"
@@ -539,7 +541,7 @@ export default {
         </div>
         <gl-table
           ref="table"
-          class="gl-w-full"
+          class="gl-w-full import-table"
           data-qa-selector="import_table"
           :tbody-tr-class="rowClasses"
           :tbody-tr-attr="qaRowAttributes"

app/assets/stylesheets/page_bundles/import.scss

 @import 'mixins_and_variables_and_functions';
 
-// Fixing double scrollbar issue
-// See https://gitlab.com/gitlab-org/gitlab-ui/-/issues/1156 and
-// https://gitlab.com/gitlab-org/gitlab/-/merge_requests/54837
-.import-entities-namespace-dropdown.show.dropdown .dropdown-menu {
-  max-height: initial;
-}
-
 .import-jobs-to-col {
   width: 39%;
 }
@@ -38,3 +31,31 @@
     box-shadow: inset 0 0 0 1px var(--gray-200, $gray-200);
   }
 }
+
+$import-bar-height: $gl-spacing-scale-11;
+
+.import-table-bar {
+  @include gl-sticky;
+  height: $import-bar-height;
+  top: $header-height;
+  z-index: 3;
+
+  html.with-performance-bar & {
+    top: $header-height + $performance-bar-height;
+  }
+}
+
+.import-table {
+  border-collapse: separate;
+
+  thead {
+    @include gl-sticky;
+    background-color: var(--gray-10, $gray-10);
+    top: calc(#{$header-height} + #{$import-bar-height});
+    z-index: 3;
+
+    html.with-performance-bar & {
+      top: calc(#{$header-height + $performance-bar-height} + #{$import-bar-height});
+    }
+  }
+}

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

@@ -40,6 +40,10 @@ describe('import table', () => {
     wrapper.findAll('button').wrappers.filter((w) => w.text() === 'Import');
   const findPaginationDropdown = () => wrapper.find('[aria-label="Page size"]');
   const findPaginationDropdownText = () => findPaginationDropdown().find('button').text();
+  const findSelectionCount = () => wrapper.find('[data-test-id="selection-count"]');
+
+  const triggerSelectAllCheckbox = () =>
+    wrapper.find('thead input[type=checkbox]').trigger('click');
 
   const selectRow = (idx) =>
     wrapper.findAll('tbody td input[type=checkbox]').at(idx).trigger('click');
@@ -313,6 +317,21 @@ describe('import table', () => {
   });
 
   describe('bulk operations', () => {
+    it('import all button correctly selects/deselects all groups', async () => {
+      createComponent({
+        bulkImportSourceGroups: () => ({
+          nodes: FAKE_GROUPS,
+          pageInfo: FAKE_PAGE_INFO,
+        }),
+      });
+      await waitForPromises();
+      expect(findSelectionCount().text()).toMatchInterpolatedText('0 selected');
+      await triggerSelectAllCheckbox();
+      expect(findSelectionCount().text()).toMatchInterpolatedText('2 selected');
+      await triggerSelectAllCheckbox();
+      expect(findSelectionCount().text()).toMatchInterpolatedText('0 selected');
+    });
+
     it('import selected button is disabled when no groups selected', async () => {
       createComponent({
         bulkImportSourceGroups: () => ({