Migrate trial's namespace selector away from select2

What does this MR do and why?

This migrates the trial namespace selector away from select2 in favor of GlListbox.

Screenshots or screen recordings

	Before	After
Nothing selected
Create group selected
Existing group selected
Dropdown open

How to set up and validate locally

1. Apply the following patch to ensure you can access the affected page.

   diff --git a/ee/app/controllers/trials_controller.rb b/ee/app/controllers/trials_controller.rb
   index 46770eb524a..51d5144f660 100644
   --- a/ee/app/controllers/trials_controller.rb
   +++ b/ee/app/controllers/trials_controller.rb
   @@ -10,12 +10,12 @@ class TrialsController < ApplicationController
    
      layout 'minimal'
    
   -  before_action :check_if_gl_com_or_dev
   -  before_action :authenticate_user!, except: [:create_hand_raise_lead]
   -  before_action :authenticate_user_404!, only: [:create_hand_raise_lead]
   -  before_action :find_or_create_namespace, only: :apply
   -  before_action :find_namespace, only: [:extend_reactivate, :create_hand_raise_lead]
   -  before_action :authenticate_namespace_owner!, only: [:extend_reactivate]
   +  # before_action :check_if_gl_com_or_dev
   +  # before_action :authenticate_user!, except: [:create_hand_raise_lead]
   +  # before_action :authenticate_user_404!, only: [:create_hand_raise_lead]
   +  # before_action :find_or_create_namespace, only: :apply
   +  # before_action :find_namespace, only: [:extend_reactivate, :create_hand_raise_lead]
   +  # before_action :authenticate_namespace_owner!, only: [:extend_reactivate]
      before_action only: [:new, :select] do
        push_frontend_feature_flag(:gitlab_gtm_datalayer, type: :ops)
      end

2. Navigate to http://gdk.test:3000/-/trials/select

MR acceptance checklist

This checklist encourages us to confirm any changes have been analyzed to reduce risks in quality, performance, reliability, security, and maintainability.

• I have evaluated the MR acceptance checklist for this MR.

Related to #374095 (closed)

changed milestone to %15.6

added component:form dropdownlistbox frontend groupfulfillment DEPRECATED maintenancerefactor typemaintenance workflowin dev labels

assigned to @pgascouvaillancourt

added backend label

	1 Warning
	This merge request contains lines with QA selectors. Please ensure e2e:package-and-test job is run.

QA Selectors

The following changed lines in this MR contain QA selectors:

• file ee/app/assets/javascripts/trials/components/namespace_selector.vue:

• •    data-qa-selector="subscription_for"

• •    data-qa-selector="new_group_name"

• file ee/app/views/trials/select.html.haml:

• •      = select_tag :namespace_id, namespace_options_for_select(params[:namespace_id]), class: 'select2', required: true, data: { qa_selector: 'subscription_for' }

• •    = text_field_tag :new_group_name, nil, class: 'form-control', required: !show_trial_namespace_select?, data: { qa_selector: 'new_group_name' }

• •      = text_field_tag :new_group_name, nil, class: 'form-control', required: !show_trial_namespace_select?, data: { qa_selector: 'new_group_name' }

Please ensure e2e:package-and-test job is run and the tests are passing.

For the list of known failures please refer to the latest pipeline triage issue.

If your changes are under a feature flag, please check our Testing with feature flags documentation for instructions.

Reviewer roulette

Changes that require review have been detected!

Please refer to the table below for assigning reviewers and maintainers suggested by Danger in the specified category:

Category	Reviewer	Maintainer
backend	Alex Buijs (@alexbuijs) (UTC+1, 6 hours ahead of @pgascouvaillancourt)	Sean Arnold (@seanarnold) (UTC+13, 18 hours ahead of @pgascouvaillancourt)
frontend	James Rushford (@jrushford) (UTC+11, 16 hours ahead of @pgascouvaillancourt)	Justin Ho (@justin_ho) (UTC+7, 12 hours ahead of @pgascouvaillancourt)
test for spec/features/*	Sean Gregory (@sgregory2) (UTC-5, same timezone as @pgascouvaillancourt)	Maintainer review is optional for test for spec/features/*
UX	Ali Ndlovu (@andlovu) (UTC+2, 7 hours ahead of @pgascouvaillancourt)	Maintainer review is optional for UX

To spread load more evenly across eligible reviewers, Danger has picked a candidate for each review slot, based on their timezone. Feel free to override these selections if you think someone else would be better-suited or use the GitLab Review Workload Dashboard to find other available reviewers.

To read more on how to use the reviewer roulette, please take a look at the Engineering workflow and code review guidelines. Please consider assigning a reviewer or maintainer who is a domain expert in the area of the merge request.

Once you've decided who will review this merge request, assign them as a reviewer! Danger does not automatically notify them for you.

If needed, you can retry the danger-review job that generated this comment.

Generated by Danger

added 516 commits

• 0810213d...5e4332b9 - 515 commits from branch master
• 462af6a8 - Migrate trial's namespace selector away from select2

Compare with previous version

marked the checklist item I have evaluated the MR acceptance checklist for this MR. as completed

marked this merge request as ready

added UX label

Please wait for Reviewer Roulette to suggest a designer for UX review, and then assign them as Reviewer. This helps evenly distribute reviews across UX.

This message was generated automatically. You're welcome to improve it.

added 1 commit

• 9cebd9e5 - Migrate trial's namespace selector away from select2

Compare with previous version

@kcomoli could you give this a UX review please?

requested review from @kcomoli

added 1 commit

• 92b86daf - Migrate trial's namespace selector away from select2

Compare with previous version

Bundle size analysis [beta]

This compares changes in bundle size for entry points between the commits 7c18f4f8 and 37e154b8

Special assets

Entrypoint / Name	Size before	Size after	Diff	Diff in percent
average	3.52 MB	3.52 MB	-	0.0 %
mainChunk	1.95 MB	1.95 MB	-	0.0 %

Significant Growth: 2

Expand

Entrypoint / Name	Size before	Size after	Diff	Diff in percent
pages.trials.apply	82.99 KB	272.4 KB	+189.41 KB	228.2 %
pages.trials.select	91.17 KB	280.58 KB	+189.41 KB	207.7 %

---

Your MR has at least one entrypoint growing significantly (more > 1 KB or 2%). If you write new or extend existing features, this is expected and there is nothing to worry about.

Please consider pinging someone from the FE Foundations (@leipert, @markrian, @mikegreiling, @ohoral or @pgascouvaillancourt) for review, if you are unsure about the size increase.

Note: We do not have exact data for 7c18f4f8. So we have used data from: ca301b66.
The intended commit has no webpack pipeline, so we chose the last commit with one before it.

Please look at the full report for more details

---

Read more about how this report works.

Generated by Danger

added 1 commit

• 10aee78e - Migrate trial's namespace selector away from select2

Compare with previous version

added 1 commit

• e6f34183 - Migrate trial's namespace selector away from select2

Compare with previous version

Allure report

allure-report-publisher generated test report!

e2e-review-qa: test report for 37e154b8

expand test summary

+-----------------------------------------------------------------------------------------+
|                                     suites summary                                      |
+------------------------------------+--------+--------+---------+-------+-------+--------+
|                                    | passed | failed | skipped | flaky | total | result |
+------------------------------------+--------+--------+---------+-------+-------+--------+
| Manage                             | 39     | 0      | 4       | 7     | 43    | ❗     |
| Verify                             | 12     | 0      | 1       | 0     | 13    | ✅     |
| Create                             | 28     | 0      | 1       | 0     | 29    | ✅     |
| Plan                               | 49     | 0      | 1       | 0     | 50    | ✅     |
| Configure                          | 0      | 0      | 1       | 0     | 1     | ➖     |
| Govern                             | 15     | 0      | 5       | 3     | 20    | ❗     |
| Version sanity check               | 0      | 0      | 1       | 0     | 1     | ➖     |
| Feature flag handler sanity checks | 9      | 0      | 0       | 0     | 9     | ✅     |
| Package                            | 0      | 0      | 1       | 0     | 1     | ➖     |
+------------------------------------+--------+--------+---------+-------+-------+--------+
| Total                              | 152    | 0      | 15      | 10    | 167   | ❗     |
+------------------------------------+--------+--------+---------+-------+-------+--------+

added 590 commits

• e6f34183...d745b255 - 588 commits from branch master
• 99e64659 - Migrate trial's namespace selector away from select2
• eb92ac73 - Add filtering capability

Compare with previous version

added 1 commit

• 47c2a06d - Add filtering capability

Compare with previous version

changed the description

approved this merge request

@kcomoli, thanks for approving this merge request.

This is the first time the merge request is approved. To ensure full test coverage, a new pipeline will be started shortly.

For more info, please refer to the following links:

• rspec minimal jobs
• jest minimal jobs
• merging a merge request.

added 1 deleted label

removed review request for @kcomoli

added 67 commits

• 47c2a06d...85da4d68 - 66 commits from branch master
• 379ceca8 - Migrate trial's namespace selector away from select2

Compare with previous version

@Quintasan @andrei.zubov would you please give this a backend and frontend review respectively?

requested review from @Quintasan and @andrei.zubov

Hey @pgascouvaillancourt ! While trying to reproduce it locally, I don't see a search bar in the dropdown, unlike what you have on your screenshots. Am I doing something wrong?

[praise] Thanks for the change @pgascouvaillancourt ! It's great seeing more gitlab-ui components replacing legacy ones!

I've added a few comments. They boil down to a question - would it decrease the overall complexity of this solution, if we move more things to vue in the context of this page?

removed review request for @andrei.zubov

removed review request for @Quintasan

added 1421 commits

• 379ceca8...b389de39 - 1419 commits from branch master
• 693c01ef - Migrate trial's namespace selector away from select2
• 39aefd43 - Delegate more logic to Vue app & don't touch main bundle

Compare with previous version

requested review from @andrei.zubov

added 331 commits

• 39aefd43...7de99fb4 - 327 commits from branch master
• 2aa95d84 - Migrate trial's namespace selector away from select2
• 5b19eaa1 - Delegate more logic to Vue app & don't touch main bundle
• 9f76bf6d - Move 'New group name' field to Vue component
• 55f94f4d - Add tests and clean up

Compare with previous version

removed review request for @andrei.zubov

added 344 commits

• 55f94f4d...ea06b965 - 343 commits from branch master
• 55de853d - Migrate trial's namespace selector away from select2

Compare with previous version

mentioned in merge request !104141 (merged)

added 5 commits

• 55de853d...a487280d - 2 commits from branch master
• 62245a1d - Disable @gitlab/require-i18n-strings in all stories
• a4985fe4 - Create ListboxInput component
• e7dd0ef0 - Migrate trial's namespace selector away from select2

Compare with previous version

changed target branch from master to 374095-select2-trial-group-select-listbox-input

added grouppersonal productivity label and removed groupfulfillment DEPRECATED label

added devopsmanage sectiondev labels

changed milestone to %15.7

added missed:15.6 label

deleted the 374095-select2-trial-group-select-listbox-input branch. This merge request now targets the master branch

added 2820 commits

• e7dd0ef0...d761e394 - 2819 commits from branch master
• 967af620 - Migrate trial's namespace selector away from select2

Compare with previous version

requested review from @andrei.zubov

added 134 commits

• 967af620...cd0cd326 - 133 commits from branch master
• 1aad8b22 - Migrate trial's namespace selector away from select2

Compare with previous version

added 117 commits

• 1aad8b22...cc8cecec - 116 commits from branch master
• 6a527327 - Migrate trial's namespace selector away from select2

Compare with previous version

added 303 commits

• 6a527327...9ea5715a - 302 commits from branch master
• d9c61970 - Migrate trial's namespace selector away from select2

Compare with previous version

approved this merge request

That looks great @pgascouvaillancourt ! Thanks for all the work you've put into it I am passing it over for a maintainer review.

@afontaine could you please help reviewing it?

requested review from @afontaine and removed review request for @andrei.zubov

added 1537 commits

• d9c61970...4d59dae4 - 1536 commits from branch master
• 37e154b8 - Migrate trial's namespace selector away from select2

Compare with previous version

resolved all threads

approved this merge request

This looks good to me, thanks @pgascouvaillancourt

enabled an automatic merge when the pipeline for aa75589d succeeds

merged

mentioned in commit a8bd020d

added workflowstaging-canary label and removed workflowin dev label

added workflowcanary label and removed workflowstaging-canary label

added workflowstaging label and removed workflowcanary label

added workflowproduction label and removed workflowstaging label

mentioned in merge request !107392 (merged)

mentioned in issue #374095 (closed)

added releasedcandidate label

mentioned in merge request !107516 (merged)

added releasedpublished label and removed releasedcandidate label

mentioned in merge request kubitus-project/kubitus-installer!1748 (merged)