Replace querySelector in favor of form namedItems

PrestaShop · Dec 19, 2024 · 98899c6 · 98899c6
1 parent bd38a5f
commit 98899c6
Show file tree

Hide file tree

Showing 3 changed files with 8 additions and 6 deletions.
diff --git a/_dev/src/ts/components/LogsViewer.ts b/_dev/src/ts/components/LogsViewer.ts
@@ -17,6 +17,8 @@ export default class LogsViewer extends ComponentAbstract implements DomLifecycl
     LOG_BEFORE_SCROLL: 120 // The number of logs to process before automatically scrolling to the bottom.
   };
 
+  #formId = 'form-logs-download-button';
+
   #templateLogLine = this.queryElement<HTMLTemplateElement>(
     '#log-line',
     'Template log line not found'
@@ -247,10 +249,10 @@ export default class LogsViewer extends ComponentAbstract implements DomLifecycl
 
     this.#logsSummary.appendChild(fragment);
 
-    const downloadlogsButtonForm = this.queryElement<HTMLFormElement>(
-      '.logs__download-form',
-      'Form to request the button to download logs cannot be found'
-    );
+    const downloadlogsButtonForm = document.forms.namedItem(this.#formId);
+    if (!downloadlogsButtonForm) {
+      throw new Error('Form to request the button to download logs cannot be found');
+    }
     await api.post(
       downloadlogsButtonForm.dataset.downloadLogsRoute!,
       new FormData(downloadlogsButtonForm)

diff --git a/_dev/tests/components/LogsViewer.test.ts b/_dev/tests/components/LogsViewer.test.ts
@@ -11,7 +11,7 @@ describe('LogsViewer', () => {
     container = document.createElement('div');
     container.innerHTML = `
       <div data-component="logs-viewer" class="logs__inner">
-        <form class="logs__download-form" data-download-logs-route="">
+        <form id="form-logs-download-button" data-download-logs-route="">
           <input type="hidden" name="download-logs-type" value="" />
         </form>
         <div data-slot-component="scroll" class="logs__scroll" tabindex="0">

diff --git a/views/templates/components/logs-viewer.html.twig b/views/templates/components/logs-viewer.html.twig
@@ -1,5 +1,5 @@
 <div data-component="logs-viewer" class="logs__inner">
-  <form class="logs__download-form" data-download-logs-route="{{ downloadLogsRoute }}">
+  <form id="form-logs-download-button" data-download-logs-route="{{ downloadLogsRoute }}">
     <input type="hidden" name="download-logs-type" value="{{ downloadLogsType }}" />
   </form>
   <div class="logs__scroll">