fix: Fix compiler warnings from the TiCS dashboard (#5091)

Author: steverydz

static/js/publisher/components/UpdateMetadataModal/UpdateMetadataModal.tsx

@@ -1,9 +1,12 @@
 import { Dispatch, SetStateAction } from "react";
+import { FieldValues } from "react-hook-form";
 import { Modal, Button } from "@canonical/react-components";
 
+import { UseMutateFunction } from "react-query";
+
 type Props = {
   setShowMetadataWarningModal: Dispatch<SetStateAction<boolean>>;
-  submitForm: (arg: { [key: string]: unknown }) => void;
+  submitForm: UseMutateFunction<void, unknown, FieldValues, unknown>;
   formData: { [key: string]: unknown };
 };
 

static/js/publisher/pages/Listing/ListingForm/ListingForm.tsx

@@ -74,8 +74,7 @@ function ListingForm({ data, refetch }: Props): React.JSX.Element {
     <>
       <form
         className="p-form"
-        // @ts-expect-error Conflict between React Query and Reach Hook Form
-        onSubmit={handleSubmit((values: ListingData) => {
+        onSubmit={handleSubmit((values: FieldValues) => {
           if (
             data.update_metadata_on_release &&
             shouldShowUpdateMetadataWarning(dirtyFields)

static/js/publisher/pages/Metrics/metrics/graphs/activeDevicesGraph/rendering.ts

@@ -18,7 +18,7 @@ function renderXAxis(this: any) {
 
   let monthCache: string;
 
-  xAxis.selectAll(".tick").each((d: any, i: number, nodes: string | any[]) => {
+  xAxis.selectAll(".tick").each((_d: any, i: number, nodes: string | any[]) => {
     const node = select(nodes[i]);
     if (i % freq !== 0 && nodes.length > 7) {
       node.select("text").attr("opacity", "0");
@@ -50,7 +50,7 @@ function renderYAxis(this: any) {
 
   yAxis
     .selectAll(".tick")
-    .each((d: any, i: number, nodes: { [x: string]: any }) => {
+    .each((_d: any, i: number, nodes: { [x: string]: any }) => {
       const node = select(nodes[i]);
       if (i % freq === 0) {
         node.classed("active", true);
@@ -153,7 +153,7 @@ function renderAnnotations(this: any) {
             .attr("transform", `translate(${annotation.x - textBox.width},10)`)
             .attr("x", 0);
         }
-      }
+      },
     );
   }
 }

static/js/publisher/pages/PublisherSettings/PublisherSettingsForm.tsx

@@ -1,5 +1,5 @@
 import { useState, useEffect } from "react";
-import { useForm, useWatch } from "react-hook-form";
+import { FieldValues, useForm, useWatch } from "react-hook-form";
 import {
   Button,
   Form,
@@ -18,10 +18,8 @@ import { UnregisterSnapModal } from "./UnregisterSnapModal";
 
 import { getSettingsData, getSettingsFormData } from "../../utils";
 
-import type { SettingsData } from "../../types";
-
 type Props = {
-  settings: SettingsData;
+  settings: FieldValues;
 };
 
 function PublisherSettingsForm({ settings }: Props) {
@@ -68,7 +66,7 @@ function PublisherSettingsForm({ settings }: Props) {
     name: "blacklist_country_keys",
   });
 
-  const onSubmit = (data: SettingsData) => {
+  const onSubmit = (data: FieldValues) => {
     if (getValues("update_metadata_on_release") && dirtyFields.visibility) {
       setShowMetadataWarningModal(true);
       setFormData(data);
@@ -77,7 +75,7 @@ function PublisherSettingsForm({ settings }: Props) {
     }
   };
 
-  const submitForm = async (data: SettingsData) => {
+  const submitForm = async (data: FieldValues) => {
     setIsSaving(true);
     setHasSaved(false);
     setSavedError(false);
@@ -334,13 +332,9 @@ function PublisherSettingsForm({ settings }: Props) {
                     data={countries}
                     field="whitelist_country_keys"
                     currentValues={settingsData?.whitelist_countries}
-                    // @ts-expect-error Conflict between React Query and React Hook Form
                     register={register}
-                    // @ts-expect-error Conflict between React Query and React Hook Form
                     setValue={setValue}
-                    // @ts-expect-error Conflict between React Query and React Hook Form
                     getValues={getValues}
-                    // @ts-expect-error Conflict between React Query and React Hook Form
                     control={control}
                     disabled={getValues("country_keys_status") === "exclude"}
                   />
@@ -364,13 +358,9 @@ function PublisherSettingsForm({ settings }: Props) {
                     data={countries}
                     field="blacklist_country_keys"
                     currentValues={settingsData?.blacklist_countries}
-                    // @ts-expect-error Conflict between React Query and React Hook Form
                     register={register}
-                    // @ts-expect-error Conflict between React Query and React Hook Form
                     setValue={setValue}
-                    // @ts-expect-error Conflict between React Query and React Hook Form
                     getValues={getValues}
-                    // @ts-expect-error Conflict between React Query and React Hook Form
                     control={control}
                     disabled={getValues("country_keys_status") === "include"}
                   />
@@ -537,7 +527,6 @@ function PublisherSettingsForm({ settings }: Props) {
       {showMetadataWarningModal ? (
         <UpdateMetadataModal
           setShowMetadataWarningModal={setShowMetadataWarningModal}
-          // @ts-expect-error Conflict between React Query and React Hook Form
           submitForm={submitForm}
           formData={formData}
         />

…js/publisher/pages/Releases/constants.js …js/publisher/pages/Releases/constants.tsstatic/js/publisher/pages/Releases/constants.js renamed to static/js/publisher/pages/Releases/constants.ts static/js/publisher/pages/Releases/constants.js renamed to static/js/publisher/pages/Releases/constants.ts

@@ -13,27 +13,6 @@ export type ValidationSet = {
   timestamp: string;
 };
 
-export type SettingsData = {
-  blacklist_countries: string[];
-  blacklist_country_keys: string;
-  countries: Array<{ key: string; name: string }>;
-  country_keys_status: string | null;
-  private: boolean;
-  publisher_name: string;
-  snap_id: string;
-  snap_name: string;
-  snap_title: string;
-  status: string;
-  store: string;
-  territory_distribution_status: string;
-  unlisted: boolean;
-  update_metadata_on_release: boolean;
-  visibility: string;
-  visibility_locked: boolean;
-  whitelist_countries: string[];
-  whitelist_country_keys: string;
-};
-
 export type TourStep = {
   id: string;
   position?: string;

static/js/publisher/types/index.ts

@@ -1,8 +1,8 @@
-import type { SettingsData } from "../types";
+import { FieldValues } from "react-hook-form";
 
 function getSettingsChanges(
   dirtyFields: { [key: string]: unknown },
-  data: SettingsData,
+  data: FieldValues,
 ) {
   const changes: { [key: string]: unknown } = {};
 

static/js/publisher/utils/getSettingsChanges.ts

@@ -1,14 +1,14 @@
-import type { SettingsData } from "../types";
+import { FieldValues } from "react-hook-form";
 
-function getCountryKeysStatus(settingsData: SettingsData) {
+function getCountryKeysStatus(settingsData: FieldValues) {
   if (settingsData?.blacklist_country_keys) {
     return "exclude";
   }
 
   return "include";
 }
 
-function getTerritoryDistributionStatus(data: SettingsData) {
+function getTerritoryDistributionStatus(data: FieldValues) {
   if (
     data?.whitelist_countries.length > 0 ||
     data?.blacklist_countries.length > 0
@@ -19,7 +19,7 @@ function getTerritoryDistributionStatus(data: SettingsData) {
   }
 }
 
-function getVisibilityStatus(data: SettingsData) {
+function getVisibilityStatus(data: FieldValues) {
   if (data?.unlisted) {
     return "unlisted";
   }
@@ -31,7 +31,7 @@ function getVisibilityStatus(data: SettingsData) {
   return "public";
 }
 
-function getSettingsData(settingsData: SettingsData) {
+function getSettingsData(settingsData: FieldValues) {
   settingsData.visibility = getVisibilityStatus(settingsData);
   settingsData.territory_distribution_status =
     getTerritoryDistributionStatus(settingsData);

static/js/publisher/utils/getSettingsData.ts

@@ -1,11 +1,11 @@
 import getSettingsChanges from "./getSettingsChanges";
 
-import type { SettingsData } from "../types";
+import { FieldValues } from "react-hook-form";
 
 function getSettingsFormData(
-  settingsData: SettingsData,
+  settingsData: FieldValues,
   dirtyFields: { [key: string]: unknown },
-  data: SettingsData,
+  data: FieldValues,
 ) {
   const changes = getSettingsChanges(dirtyFields, data);
   const formData = new FormData();