Migrate away from select2 in Import project > Namespace selector

The Import project feature leverages a couple select2 instances to let users select the namespace they want to import projects in:

Import type header
GitLab export New_project___Import_project___GitLab_Import
Manifest file import New_project___Import_project___Manifest_file_import

Those selectors support client-side filtering when there are 10 or more namespaces to show. They also support grouping (Groups and Users).

As part of this issue, we'd like to migrate away from select2 in favor of a better integrated, Pajamas-compliant component. The filtering and grouping capabilities should probably be preserved. We should also consider supporting server-side filtering as client-side filtering doesn't scale well, but that could be deferred to a follow-up.

The MVC iteration could be to leverage GlDropdown or GlListbox (the latter was recently updated to support groups and will soon support filtering). It would be great to consolidate this into a reusable component.

Implementation plan

  • Create a wrapper around GlDropdown or GlListbox to initialize the namespace selector on .js-select-namespace.
  • app/views/import/shared/_new_project_form.html.haml
    • Remove .select2 class.
  • app/views/import/manifest/_form.html.haml
    • Remove .select2 class.
  • app/assets/javascripts/projects/project_visibility.js
    • This script seems to have something to do with the select2 namespace selectors we are dealing with here, but it's only called from the New project, which doesn't use select2 anymore. As part of this issue, let's confirm whether or not this is still needed.
      • If it is, we'll want to backport the functionality (consider creating a follow-up for this).
      • If it's not, delete the file and cleanup app/assets/javascripts/pages/projects/new/index.js.
Edited Jan 19, 2023 by Paul Gascou-Vaillancourt
Assignee Loading
Time tracking Loading