Replace project/package autocompletes with stimulus controller

src/api/app/javascript/controllers/package_autocomplete_controller.js

@@ -0,0 +1,18 @@
+import { Controller } from "@hotwired/stimulus"
+
+export default class extends Controller {
+  static targets = [ "projectInput", "packageInput" ]
+
+  emptyPackage(event) {
+    this.packageInputTarget.value = '';
+    this.packageInputTarget.setAttribute('disabled', '')
+  }
+
+  setProject(event) {
+    let urlAttr = this.packageInputTarget.closest('[data-autocomplete-url-value]');
+    let url = new URL(urlAttr.dataset.autocompleteUrlValue, window.location.origin);
+    url.searchParams.set('project', event.detail);
+    urlAttr.dataset.autocompleteUrlValue = url;
+    this.packageInputTarget.removeAttribute('disabled');
+  }
+}

src/api/app/views/webui/packages/branches/into.html.haml

@@ -21,12 +21,15 @@
                 - @remote_projects.each do |_id, name, title|
                   %li.list-inline-item
                     = link_to("#{name}: #{title}", project_show_path(project: name))
-          .col-12.col-md-9.col-lg-6
+          .col-12.col-md-9.col-lg-6{ data: { controller: 'package-autocomplete' } }
             = form_tag(packages_branches_path) do
-              = render partial: 'webui/shared/autocomplete', locals: { html_id: 'linked_project', label: 'Original project name',
-                                                                       data: { source: autocomplete_projects_path } }
+              %span{ 'data-action': 'autocomplete:setInput->package-autocomplete#setProject autocomplete:search->package-autocomplete#emptyPackage' }
+                = render partial: 'webui/shared/autocomplete', locals: { html_id: 'linked_project', label: 'Original project name',
+                                                                         data: { source: autocomplete_projects_path,
+                                                                                 'package-autocomplete-target': 'projectInput' } }
               = render partial: 'webui/shared/autocomplete', locals: { html_id: 'linked_package', label: 'Original package name', disabled: true,
-                                                                       data: { source: autocomplete_packages_path } }
+                                                                       data: { source: autocomplete_packages_path,
+                                                                               'package-autocomplete-target': 'packageInput' } }
               = hidden_field_tag 'target_project', @project
               = render partial: 'webui/shared/package_branch_form', locals: { show_project_field: false, target_project: @project,
                                                                               package: nil, revision: nil }

src/api/app/views/webui/request/_add_reviewer_dialog.html.haml

@@ -4,7 +4,7 @@
       = form_tag(action: 'add_reviewer') do
         .modal-header
           %h5.modal-title#add-reviewer-modal-label Add a reviewer to request #{params['number']}
-        .modal-body
+        .modal-body{ data: { controller: 'package-autocomplete' } }
           = hidden_field_tag(:number, params['number'])
           .mb-3
             = label_tag(:review_type, 'Request review from:')
@@ -20,13 +20,16 @@
           .hideable.review-group.d-none
             = render partial: 'webui/shared/autocomplete', locals: { html_id: 'review_group', label: 'Group:', required: true,
                                                                      data: { source: autocomplete_groups_path } }
-          .hideable.review-project.review-package.d-none
+          .hideable.review-project.review-package.d-none{ 'data-action': 'autocomplete:setInput->package-autocomplete#setProject \
+                                                                          autocomplete:search->package-autocomplete#emptyPackage' }
             = render partial: 'webui/shared/autocomplete', locals: { html_id: 'review_project', label: 'Project:', required: true,
-                                                                     data: { source: autocomplete_projects_path } }
+                                                                     data: { source: autocomplete_projects_path,
+                                                                             'package-autocomplete-target': 'projectInput' } }
 
           .hideable.review-package.d-none
             = render partial: 'webui/shared/autocomplete', locals: { html_id: 'review_package', label: 'Package:', required: true,
-                                                                     data: { source: autocomplete_packages_path } }
+                                                                     data: { source: autocomplete_packages_path,
+                                                                             'package-autocomplete-target': 'packageInput' } }
 
           .mb-3
             = label_tag(:review_comment, 'Comment for reviewer:')

src/api/app/views/webui/users/tokens/new.html.haml

@@ -28,13 +28,15 @@
                 .form-text.text-muted
                   Optional: provide a description to your token.
 
-          .row#package-project-form
-            .col-sm
+          .row#package-project-form{ data: { controller: 'package-autocomplete' } }
+            .col-sm{ 'data-action': 'autocomplete:setInput->package-autocomplete#setProject autocomplete:search->package-autocomplete#emptyPackage' }
               = render partial: 'webui/shared/autocomplete', locals: { html_id: 'project_name', label: 'Project name', required: false,
-                                                                       data: { source: autocomplete_projects_path(local: true) } }
+                                                                       data: { source: autocomplete_projects_path(local: true),
+                                                                               'package-autocomplete-target': 'projectInput' } }
             .col-sm
               = render partial: 'webui/shared/autocomplete', locals: { html_id: 'package_name', label: 'Package name', required: false,
-                                                                       data: { source: autocomplete_packages_path }, disabled: true }
+                                                                       data: { source: autocomplete_packages_path,
+                                                                               'package-autocomplete-target': 'packageInput' }, disabled: true }
             .col-12
               .mb-3.form-text.text-muted
                 Optional: provide project and package names, to limit the token to a specific package.