Fix transfer project qa tests

Updates the namespace selector used for
the transfer project qa tests

Fix broken controller specs

Ensures we redirect back to the edit
project page after transferring a project

Fix broken qa selector

Fix broken project settings rspec tests

Ensure we dont access the transfer project dataset
if there is no element mounted.

Fix broken jest test

Minor cleanup namespaces helper

app/assets/javascripts/projects/settings/components/transfer_project_form.vue

@@ -44,6 +44,7 @@ export default {
   <div>
     <gl-form-group>
       <namespace-select
+        class="qa-namespaces-list"
         data-testid="transfer-project-namespace"
         :full-width="true"
         :data="namespaces"
@@ -52,6 +53,7 @@ export default {
       />
     </gl-form-group>
     <confirm-danger
+      qa-button-class="qa-transfer-button"
       :disabled="!hasSelectedNamespace"
       :phrase="confirmationPhrase"
       :button-text="confirmButtonText"

app/assets/javascripts/projects/settings/init_transfer_project_form.js

@@ -12,6 +12,10 @@ const prepareNamespaces = (rawNamespaces = '') => {
 
 export default () => {
   const el = document.querySelector('.js-transfer-project-form');
+  if (!el) {
+    return false;
+  }
+
   const {
     targetFormId = null,
     targetHiddenInputId = null,
@@ -21,10 +25,6 @@ export default () => {
     namespaces = '',
   } = el.dataset;
 
-  if (!el) {
-    return false;
-  }
-
   return new Vue({
     el,
     provide: {

app/assets/javascripts/vue_shared/components/confirm_danger/confirm_danger.vue

@@ -36,6 +36,11 @@ export default {
       required: false,
       default: 'confirm-danger-button',
     },
+    qaButtonClass: {
+      type: String,
+      required: false,
+      default: '',
+    },
   },
   modalId: CONFIRM_DANGER_MODAL_ID,
 };

app/assets/javascripts/vue_shared/components/confirm_danger/confirm_danger_modal.vue

@@ -47,7 +47,7 @@ export default {
     actionPrimary() {
       return {
         text: this.confirmButtonText,
-        attributes: [{ variant: 'danger', disabled: !this.isValid }],
+        attributes: [{ variant: 'danger', disabled: !this.isValid, class: 'qa-confirm-button' }],
       };
     },
   },
@@ -95,7 +95,7 @@ export default {
       <gl-form-input
         id="confirm_name_input"
         v-model="confirmationPhrase"
-        class="form-control"
+        class="form-control qa-confirm-input"
         data-testid="confirm-danger-input"
         type="text"
       />

app/assets/javascripts/vue_shared/components/namespace_select/namespace_select.vue

@@ -68,22 +68,28 @@ export default {
       <gl-search-box-by-type v-model.trim="searchTerm" />
     </template>
     <template v-if="hasGroupNamespaces">
-      <gl-dropdown-section-header>{{ __('Groups') }}</gl-dropdown-section-header>
-      <gl-dropdown-item
-        v-for="item in filteredGroupNamespaces"
-        :key="item.id"
-        @click="handleSelect(item)"
-        >{{ item.humanName }}</gl-dropdown-item
-      >
+      <div class="qa-namespaces-list-groups">
+        <gl-dropdown-section-header>{{ __('Groups') }}</gl-dropdown-section-header>
+        <gl-dropdown-item
+          v-for="item in filteredGroupNamespaces"
+          :key="item.id"
+          class="qa-namespaces-list-item"
+          @click="handleSelect(item)"
+          >{{ item.humanName }}</gl-dropdown-item
+        >
+      </div>
     </template>
     <template v-if="hasUserNamespaces">
-      <gl-dropdown-section-header>{{ __('Users') }}</gl-dropdown-section-header>
-      <gl-dropdown-item
-        v-for="item in filteredUserNamespaces"
-        :key="item.id"
-        @click="handleSelect(item)"
-        >{{ item.humanName }}</gl-dropdown-item
-      >
+      <div class="qa-namespaces-list-users">
+        <gl-dropdown-section-header>{{ __('Users') }}</gl-dropdown-section-header>
+        <gl-dropdown-item
+          v-for="item in filteredUserNamespaces"
+          :key="item.id"
+          class="qa-namespaces-list-item"
+          @click="handleSelect(item)"
+          >{{ item.humanName }}</gl-dropdown-item
+        >
+      </div>
     </template>
   </gl-dropdown>
 </template>

app/controllers/projects_controller.rb

@@ -120,6 +120,8 @@ class ProjectsController < Projects::ApplicationController
     if @project.errors[:new_namespace].present?
       flash[:alert] = @project.errors[:new_namespace].first
     end
+
+    render_edit
   end
   # rubocop: enable CodeReuse/ActiveRecord
 

app/helpers/namespaces_helper.rb

@@ -90,8 +90,8 @@ module NamespacesHelper
 
   def namespaces_as_json(selected = :current_user)
     {
-      group: formatted_namespaces(current_user.manageable_groups_with_routes, 'group'),
-      user: formatted_namespaces([current_user.namespace], 'user')
+      group: formatted_namespaces(current_user.manageable_groups_with_routes),
+      user: formatted_namespaces([current_user.namespace])
     }.to_json
   end
 
@@ -127,17 +127,13 @@ module NamespacesHelper
     [group_label.camelize, elements]
   end
 
-  def formatted_namespaces(namespaces, type)
-    namespaces.sort_by(&:human_name).map do |n|
+  def formatted_namespaces(namespaces)
+    namespaces.sort_by(&:human_name).map! do |n|
       {
         id: n.id,
         display_path: n.full_path,
         human_name: n.human_name,
-        visibility_level: n.visibility_level_value,
-        visibility: n.visibility,
-        name: n.name,
-        show_path: type == 'group' ? group_path(n) : user_path(n),
-        edit_path: type == 'group' ? edit_group_path(n) : nil
+        name: n.name
       }
     end
   end

app/views/projects/_transfer.html.haml

@@ -5,7 +5,7 @@
 
 .sub-section
   %h4.danger-title= _('Transfer project')
-  = form_for @project, url: transfer_project_path(@project), method: :put, html: { class: "js-project-transfer-form", id: form_id } do |f|
+  = form_for @project, url: transfer_project_path(@project), method: :put, html: { class: 'js-project-transfer-form', id: form_id } do |f|
     .form-group
       - link_start = '<a href="%{url}" target="_blank" rel="noopener noreferrer">'.html_safe % { url: help_page_path('user/project/settings/index', anchor: 'transferring-an-existing-project-into-another-namespace') }
       %p= _("Transfer your project into another namespace. %{link_start}Learn more.%{link_end}").html_safe % { link_start: link_start, link_end: '</a>'.html_safe }

qa/qa/page/project/settings/advanced.rb

@@ -5,16 +5,18 @@ module QA
     module Project
       module Settings
         class Advanced < Page::Base
-          include Component::Select2
           include Component::ConfirmModal
+          include Page::Component::DropdownFilter
 
           view 'app/views/projects/edit.html.haml' do
             element :project_path_field
             element :change_path_button
           end
 
-          view 'app/views/projects/_transfer.html.haml' do
-            element :transfer_button
+          view "app/assets/javascripts/vue_shared/components/namespace_select/namespace_select.vue" do
+            element :namespaces_list
+            element :namespaces_list_groups
+            element :namespaces_list_item
           end
 
           view 'app/views/projects/settings/_archive.html.haml' do
@@ -42,16 +44,22 @@ module QA
             click_element :change_path_button
           end
 
+          def select_namespace(item)
+            click_element :namespaces_list
+
+            within_element(:namespaces_list) do
+              find_element(:namespaces_list_item, text: item).click
+            end
+          end
+
           def transfer_project!(project_name, namespace)
             QA::Runtime::Logger.info "Transferring project: #{project_name} to namespace: #{namespace}"
 
             click_element_coordinates(:archive_project_content)
 
-            expand_select_list
-
             # Workaround for a failure to search when there are no spaces around the /
             # https://gitlab.com/gitlab-org/gitlab/-/issues/218965
-            search_and_select(namespace.gsub(%r{([^\s])/([^\s])}, '\1 / \2'))
+            select_namespace(namespace.gsub(%r{([^\s])/([^\s])}, '\1 / \2'))
 
             click_element(:transfer_button)
             fill_confirmation_text(project_name)

spec/frontend/transfer_edit_spec.js

-// TODO: remove jquery dep
 import $ from 'jquery';
 
 import { loadHTMLFixture } from 'helpers/fixtures';
 import setupTransferEdit from '~/transfer_edit';
 
 describe('setupTransferEdit', () => {
-  const formSelector = '.js-project-transfer-form';
-  const targetSelector = 'select.select2';
+  const formSelector = '.js-group-transfer-form';
+  const targetSelector = '#new_parent_group_id';
 
   beforeEach(() => {
-    loadHTMLFixture('projects/edit.html');
+    loadHTMLFixture('groups/edit.html');
     setupTransferEdit(formSelector, targetSelector);
   });
 
@@ -18,8 +17,8 @@ describe('setupTransferEdit', () => {
   });
 
   it('enables submit button when selection changes to non-empty value', () => {
-    const nonEmptyValue = $(formSelector).find(targetSelector).find('option').not(':empty').val();
-    $(formSelector).find(targetSelector).val(nonEmptyValue).trigger('change');
+    const lastValue = $(formSelector).find(targetSelector).find('.dropdown-content li').last();
+    $(formSelector).find(targetSelector).val(lastValue).trigger('change');
 
     expect($(formSelector).find(':submit').prop('disabled')).toBeFalsy();
   });