chore: Address TiCS codings standards warnings for base JS

steverydz · steverydz · commit 7c3478c7ef7d · 2025-04-22T10:47:59.000+01:00
diff --git a/static/js/base/__tests__/ga.test.ts b/static/js/base/__tests__/ga.test.ts
@@ -19,7 +19,12 @@ describe("triggerEvent", () => {
   test("pushes event to dataLayer", () => {
     window.dataLayer = [];
 
-    triggerEvent("category", "from", "to", "label");
+    triggerEvent({
+      category: "category",
+      from: "from",
+      to: "to",
+      label: "label",
+    });
 
     expect(window.dataLayer[0].event).toBe("GAEvent");
     expect(window.dataLayer[0].eventCategory).toBe("snapcraft.io-category");
diff --git a/static/js/base/contactForm.ts b/static/js/base/contactForm.ts
@@ -2,13 +2,19 @@ const contactFormTriggers = document.querySelectorAll(
   "[data-js='contact-form-trigger']",
 ) as NodeListOf<Element>;
 
-const modal = document.getElementById("contact-form-modal") as HTMLElement;
-const modalBody = document.getElementById("modal-body") as HTMLElement;
+const modal = document.getElementById("contact-form-modal") as
+  | HTMLElement
+  | undefined;
+const modalBody = document.getElementById("modal-body") as
+  | HTMLElement
+  | undefined;
 
 if (modal) {
   const closeModal = modal.querySelector(".p-modal__close");
   if (closeModal) {
-    closeModal.addEventListener("click", () => modal.classList.add("u-hide"));
+    closeModal.addEventListener("click", () => {
+      modal.classList.add("u-hide");
+    });
   }
 }
 
@@ -24,12 +30,17 @@ function handleClick(event: Event): void {
 
   let formTemplate = formEl.innerText;
 
-  Object.keys(args).forEach((arg) => {
+  Object.keys(args).forEach((arg: string) => {
     formTemplate = formTemplate.split(`{{${arg}}}`).join(`${args[arg]}`);
   });
 
-  modalBody.innerHTML = formTemplate;
-  modal.classList.remove("u-hide");
+  if (modalBody) {
+    modalBody.innerHTML = formTemplate;
+  }
+
+  if (modal) {
+    modal.classList.remove("u-hide");
+  }
 }
 
 function attachClickHandler(element: Element): void {
diff --git a/static/js/base/dropdown-menu-toggle.ts b/static/js/base/dropdown-menu-toggle.ts
@@ -1,45 +1,51 @@
-(function () {
-  function toggleDropdown(toggle: HTMLElement, open: boolean) {
+(function (): void {
+  function toggleDropdown(toggle: HTMLElement, open: boolean): void {
     const parentElement = toggle.parentNode as HTMLElement;
-    const dropdownElId = toggle.getAttribute("aria-controls") as string;
+    const dropdownElId = toggle.getAttribute("aria-controls") as
+      | string
+      | undefined;
 
-    const dropdown = document.getElementById(dropdownElId) as HTMLElement;
+    if (dropdownElId) {
+      const dropdown = document.getElementById(dropdownElId) as
+        | HTMLElement
+        | undefined;
 
-    const openMenu = !open;
+      const openMenu = !open;
 
-    dropdown.setAttribute("aria-hidden", openMenu.toString());
+      if (dropdown) {
+        dropdown.setAttribute("aria-hidden", openMenu.toString());
 
-    if (open) {
-      parentElement.classList.add("is-active");
-      parentElement.classList.add("is-selected");
-    } else {
-      parentElement.classList.remove("is-active");
-      parentElement.classList.remove("is-selected");
+        if (open) {
+          parentElement.classList.add("is-active");
+          parentElement.classList.add("is-selected");
+        } else {
+          parentElement.classList.remove("is-active");
+          parentElement.classList.remove("is-selected");
+        }
+      }
     }
   }
 
-  function closeAllDropdowns(toggles: Array<HTMLElement>) {
+  function closeAllDropdowns(toggles: HTMLElement[]): void {
     toggles.forEach(function (toggle) {
       toggleDropdown(toggle, false);
     });
   }
 
   function handleClickOutside(
-    toggles: Array<HTMLElement>,
+    toggles: HTMLElement[],
     containerClass: string,
-  ) {
+  ): void {
     document.addEventListener("click", function (event) {
       const target = event.target as HTMLElement;
 
-      if (target.closest) {
-        if (!target.closest(containerClass)) {
-          closeAllDropdowns(toggles);
-        }
+      if (!target.closest(containerClass)) {
+        closeAllDropdowns(toggles);
       }
     });
   }
 
-  function initNavDropdowns(containerClass: string) {
+  function initNavDropdowns(containerClass: string): void {
     const toggles = [].slice.call(
       document.querySelectorAll(containerClass + " [aria-controls]"),
     );
diff --git a/static/js/base/ga.ts b/static/js/base/ga.ts
@@ -1,11 +1,7 @@
-const origin = window.location.href;
+const urlLocation = window.location.href;
 const categoryPrefix = "snapcraft.io-";
 
-type Events = {
-  [key: string]: string;
-};
-
-const events: Events = {
+const events: Record<string, string> = {
   ".global-nav a": "nav-0",
   ".p-navigation a": "nav-1",
   "#footer a": "footer-0",
@@ -21,12 +17,14 @@ const events: Events = {
   ".p-strip a": "content-link",
 };
 
-function triggerEvent(
-  category: string,
-  from: string,
-  to: string,
-  label: string,
-): void {
+type Event = {
+  category: string;
+  from: string;
+  to: string;
+  label: string;
+};
+
+function triggerEvent({ category, from, to, label }: Event): void {
   if (window.dataLayer) {
     window.dataLayer.push({
       event: "GAEvent",
@@ -56,14 +54,14 @@ if (typeof window.dataLayer !== "undefined") {
 
     const eventTarget = e.target as HTMLElement;
 
-    if (!eventTarget || !eventTarget.closest) {
+    if (!eventTarget?.closest) {
       return;
     }
 
-    target = eventTarget.closest("a") as HTMLAnchorElement;
+    target = eventTarget.closest("a")!;
 
     if (!target) {
-      target = eventTarget.closest("button") as HTMLButtonElement;
+      target = eventTarget.closest("button")!;
     }
 
     if (!target) {
@@ -91,7 +89,12 @@ if (typeof window.dataLayer !== "undefined") {
         }
 
         if (target instanceof HTMLAnchorElement) {
-          triggerEvent(events[key], origin, target.href, label);
+          triggerEvent({
+            category: events[key],
+            from: urlLocation,
+            to: target.href,
+            label,
+          });
         }
 
         break;
diff --git a/static/js/base/navigation.ts b/static/js/base/navigation.ts
@@ -1,18 +1,18 @@
 // Login
-const navAccountContainer = document.querySelector(
-  ".js-nav-account",
-) as HTMLElement;
+const navAccountContainer = document.querySelector(".js-nav-account") as
+  | HTMLElement
+  | undefined;
 
 if (navAccountContainer) {
   const notAuthenticatedMenu = navAccountContainer.querySelector(
     ".js-nav-account--notauthenticated",
-  ) as HTMLElement;
+  )!;
   const authenticatedMenu = navAccountContainer.querySelector(
     ".js-nav-account--authenticated",
-  ) as HTMLElement;
+  )!;
 
   fetch("/account.json")
-    .then((response) => response.json())
+    .then(async (response) => response.json())
     .then(
       (data: {
         publisher: {
@@ -22,31 +22,25 @@ if (navAccountContainer) {
         };
       }) => {
         if (data.publisher) {
-          const displayName = navAccountContainer.querySelector(
-            ".js-account--name",
-          ) as HTMLElement;
+          const displayName =
+            navAccountContainer.querySelector(".js-account--name")!;
 
           notAuthenticatedMenu.classList.add("u-hide");
           authenticatedMenu.classList.remove("u-hide");
-          displayName.innerHTML = data.publisher["fullname"];
-          if (window.sessionStorage) {
-            window.sessionStorage.setItem(
-              "displayName",
-              data.publisher["fullname"],
-            );
-          }
+          displayName.innerHTML = data.publisher.fullname;
+          window.sessionStorage.setItem("displayName", data.publisher.fullname);
 
           if (data.publisher.has_stores) {
             const storesMenu = authenticatedMenu.querySelector(
               ".js-nav-account--stores",
-            ) as HTMLElement;
+            )!;
             storesMenu.classList.remove("u-hide");
           }
 
           if (data.publisher.has_validation_sets) {
             const validationSetsMenu = authenticatedMenu.querySelector(
               ".js-nav-account--validation-sets",
-            ) as HTMLElement;
+            )!;
             validationSetsMenu.classList.remove("u-hide");
           }
         } else {
diff --git a/static/js/public/ga-scroll-event.ts b/static/js/public/ga-scroll-event.ts
@@ -19,24 +19,24 @@ export default function triggerEventWhenVisible(selector: string): void {
 
   if (el) {
     if (isInViewport(el)) {
-      triggerEvent(
-        "element-visible",
-        origin,
-        selector,
-        `Element visible on screen: ${selector}`,
-      );
+      triggerEvent({
+        category: "element-visible",
+        from: origin,
+        to: selector,
+        label: `Element visible on screen: ${selector}`,
+      });
     } else {
       let triggered = false;
       window.addEventListener(
         "scroll",
         debounce(() => {
           if (!triggered && isInViewport(el)) {
-            triggerEvent(
-              "element-visible",
-              origin,
-              selector,
-              `Element visible on screen: ${selector}`,
-            );
+            triggerEvent({
+              category: "element-visible",
+              from: origin,
+              to: selector,
+              label: `Element visible on screen: ${selector}`,
+            });
             triggered = true;
           }
         }, 500),
diff --git a/static/js/public/snap-details/channelMap.ts b/static/js/public/snap-details/channelMap.ts
@@ -194,12 +194,15 @@ class ChannelMap {
           } else {
             this.openChannelMap(target);
 
-            triggerEvent(
-              this.openScreenName === "channel-map-install" ? "cta-0" : "cta-1",
-              window.location.href,
-              target.dataset.controls ?? "",
-              target.innerText,
-            );
+            triggerEvent({
+              category:
+                this.openScreenName === "channel-map-install"
+                  ? "cta-0"
+                  : "cta-1",
+              from: window.location.href,
+              to: target.dataset.controls ?? "",
+              label: target.innerText,
+            });
           }
         },
 
@@ -232,12 +235,12 @@ class ChannelMap {
           if (isSnapElement(target)) {
             event.preventDefault();
             this.openDesktop(target);
-            triggerEvent(
-              "cta-1",
-              window.location.href,
-              `snap://${target.dataset.snap}`,
-              target.innerText,
-            );
+            triggerEvent({
+              category: "cta-1",
+              from: window.location.href,
+              to: `snap://${target.dataset.snap}`,
+              label: target.innerText,
+            });
           } else {
             console.error("Target is not a SnapElement");
           }
