Improve adding packages from external registries with a Stimulus controller and AJAX requests

Author: codedmonkey

assets/controllers/packages_mirror_controller.ts

@@ -0,0 +1,72 @@
+import { Controller } from '@hotwired/stimulus';
+
+/* stimulusFetch: 'lazy' */
+export default class extends Controller {
+  static targets = ['form', 'packageList'];
+  static values = {
+    packageUrl: String,
+  };
+
+  formTarget: HTMLFormElement;
+  packageListTarget: HTMLElement;
+  packageUrlValue: string;
+
+  submitForm(event: Event) {
+    event.preventDefault();
+
+    const formData = new FormData(this.formTarget);
+
+    const data = [];
+    for (const [key, value] of formData) {
+      data.push(`${encodeURIComponent(key)}=${encodeURIComponent(value.toString())}`);
+    }
+    const body = data.join("&");
+
+    fetch(this.formTarget.getAttribute('action'), {
+      method: 'POST',
+      headers: {'Content-Type': 'application/x-www-form-urlencoded'},
+      body,
+    })
+      .then(response => response.json())
+      .then((data: PackageResultResponse) => {
+        for (const result of data.results) {
+          const packageUrl = this.packageUrlValue.replace('place/holder', result.packageName);
+
+          const packageName = !result.error ? `<a href="${packageUrl}" target="_blank">${result.packageName}</a>` : result.packageName;
+          const registryName = result.registryName ? result.registryName : '';
+          let message = result.message;
+          if (result.error) {
+            message = `<div class="text-warning">${message}</div>`;
+          } else if (result.created) {
+            message = `<div class="text-success">${message}</div>`;
+          }
+
+          const listItem = document.createElement('div');
+          listItem.innerHTML = `
+            <div class="row gap-md-2 my-2">
+              <div class="col-md-3 col-lg-2">${packageName}</div>
+              <div class="col-md-3 col-lg-2">${registryName}</div>
+              <div class="col-md-6 col-lg-8">${message}</div>
+            </div>
+          `;
+
+          this.packageListTarget.appendChild(listItem);
+        }
+      });
+
+    const packagesInput: HTMLFormElement = this.formTarget.querySelector('[name="package_add_mirroring_form[packages]"]');
+    packagesInput.value = '';
+  }
+}
+
+interface PackageResultResponse {
+  results: PackageResult[];
+}
+
+interface PackageResult {
+  packageName: string;
+  registryName: string;
+  message: string;
+  created: boolean;
+  error: boolean;
+}

src/Controller/Dashboard/DashboardPackagesController.php

@@ -149,25 +149,43 @@ public function addMirror(Request $request): Response
         if ($form->isSubmitted() && $form->isValid()) {
             $registry = $form->get('registry')->getData();
 
-            $packageNames = explode(PHP_EOL, $form->get('packages')->getData());
-            $packageNames = array_map('trim', $packageNames);
+            $packageNamesInput = $form->get('packages')->getData();
+            $packageNames = preg_split('#(\s|,)+#', $packageNamesInput);
 
             $results = [];
 
             foreach ($packageNames as $packageName) {
-                if (null !== $this->packageRepository->findOneBy(['name' => $packageName])) {
+                if (!preg_match('#[a-z0-9_.-]+/[a-z0-9_.-]+#', $packageName)) {
                     $results[] = [
+                        'packageName' => $packageName,
+                        'registryName' => null,
+                        'created' => false,
                         'error' => true,
-                        'message' => "The package $packageName already exists and was skipped",
+                        'message' => "The package name $packageName is invalid.",
+                    ];
+
+                    continue;
+                }
+
+                if (null !== $this->packageRepository->findOneBy(['name' => $packageName])) {
+                    $results[] = [
+                        'packageName' => $packageName,
+                        'registryName' => null,
+                        'created' => false,
+                        'error' => false,
+                        'message' => "The package $packageName already exists and was skipped.",
                     ];
 
                     continue;
                 }
 
                 if (!$this->metadataResolver->provides($packageName, $registry)) {
                     $results[] = [
+                        'packageName' => $packageName,
+                        'registryName' => $registry->getName(),
+                        'created' => false,
                         'error' => true,
-                        'message' => "The package $packageName could not be found and was skipped",
+                        'message' => "The package $packageName could not be found and was skipped.",
                     ];
 
                     continue;
@@ -183,14 +201,17 @@ public function addMirror(Request $request): Response
                 $this->messenger->dispatch(new UpdatePackage($package->getId()));
 
                 $results[] = [
+                    'packageName' => $packageName,
+                    'registryName' => $registry->getName(),
+                    'created' => true,
                     'error' => false,
-                    'message' => "The package $packageName was created successfully",
+                    'message' => "The package $packageName was created successfully.",
                 ];
 
                 $this->entityManager->flush();
             }
 
-            return $this->render('dashboard/packages/add_mirroring_results.html.twig', [
+            return $this->json([
                 'results' => $results,
             ]);
         }

templates/dashboard/packages/add_mirroring.html.twig

@@ -3,11 +3,30 @@
 {% block page_title %}Mirror packages from registry{% endblock %}
 
 {% block page_content %}
-  {{ form_start(form) }}
-    {{ form_row(form.packages, {attr: {rows: 10}}) }}
+  <div {{ stimulus_controller('packages-mirror', {packageUrl: dashboard_path('dashboard_packages_info', {packageName: 'place/holder'})}) }}>
+    <div
+      class="border-top border-bottom my-3"
+      {{ stimulus_target('packages-mirror', 'packageList') }}
+    >
+    </div>
 
-    {{ form_row(form.registry) }}
+    {{ form_start(form, {
+      attr: {
+        'action': dashboard_path('dashboard_packages_add_mirroring'),
+        'data-action': 'packages-mirror#submitForm',
+        'data-packages-mirror-target': 'form',
+      },
+    }) }}
+      <div class="row">
+        <div class="col-lg-8">
+          {{ form_row(form.packages, {attr: {rows: 5}}) }}
+        </div>
+        <div class="col-lg-4">
+          {{ form_row(form.registry) }}
+        </div>
+      </div>
 
-    <button class="btn btn-primary">Add packages</button>
-  {{ form_end(form) }}
+      <button class="btn btn-primary">Add packages</button>
+    {{ form_end(form) }}
+  </div>
 {% endblock %}

templates/dashboard/packages/add_mirroring_results.html.twig

@@ -2,8 +2,8 @@
   "include": ["assets/**/*"],
   "compilerOptions": {
     "noImplicitAny": true,
-    "module": "es6",
-    "target": "es5",
+    "module": "esnext",
+    "target": "es6",
     "jsx": "react",
     "allowJs": true,
     "moduleResolution": "node"