fix: Address coding standards warnings from TiCS dashboard

steverydz · steverydz · commit 8b6623a25148 · 2025-04-10T14:09:18.000+01:00
diff --git a/static/js/config/swiper.config.ts b/static/js/config/swiper.config.ts
@@ -5,11 +5,7 @@ const SCREENSHOTS: {
   roundLengths: boolean;
   spaceBetween: number;
   resizeObserver: boolean;
-  breakpoints: {
-    [key: number]: {
-      spaceBetween: number;
-    };
-  };
+  breakpoints: Record<string, { spaceBetween: number }>;
   navigation: {
     nextEl: string;
     prevEl: string;
@@ -22,7 +18,7 @@ const SCREENSHOTS: {
   spaceBetween: 32,
   resizeObserver: true,
   breakpoints: {
-    620: {
+    "620": {
       spaceBetween: 16,
     },
   },
diff --git a/static/js/publisher/components/AppPagination/AppPagination.tsx b/static/js/publisher/components/AppPagination/AppPagination.tsx
@@ -7,7 +7,7 @@ import type {
   SigningKey,
 } from "../../types/shared";
 
-export type ItemType = SigningKey | Policy | ModelType;
+export type ItemType = ModelType | Policy | SigningKey;
 
 type Props<T extends ItemType> = {
   keyword: string;
diff --git a/static/js/publisher/components/EmptySnapList/EmptySnapList.tsx b/static/js/publisher/components/EmptySnapList/EmptySnapList.tsx
@@ -1,6 +1,6 @@
 import { Col, Link, Row } from "@canonical/react-components";
 
-function EmptySnapList() {
+function EmptySnapList(): React.JSX.Element {
   return (
     <>
       <div className="u-fixed-width">
diff --git a/static/js/publisher/components/Filter/Filter.tsx b/static/js/publisher/components/Filter/Filter.tsx
@@ -1,6 +1,9 @@
 import { useSearchParams } from "react-router-dom";
-import { RecoilState, useSetRecoilState } from "recoil";
+import { useSetRecoilState } from "recoil";
 import { Button, Icon } from "@canonical/react-components";
+
+import type { RecoilState } from "recoil";
+
 type Props = {
   state: RecoilState<string>;
   label: string;
diff --git a/static/js/publisher/components/NewSnapNotification/NewSnapNotification.tsx b/static/js/publisher/components/NewSnapNotification/NewSnapNotification.tsx
@@ -1,7 +1,8 @@
 import { Link, Notification } from "@canonical/react-components";
-import { ISnap } from "../../types";
 
-function NewSnapNotification({ snap }: { snap: ISnap }) {
+import type { ISnap } from "../../types";
+
+function NewSnapNotification({ snap }: { snap: ISnap }): React.JSX.Element {
   const latestRelease = snap.latest_release;
   const snapName = snap.snapName;
 
diff --git a/static/js/publisher/components/PublishedSnapList/PublishedSnapList.tsx b/static/js/publisher/components/PublishedSnapList/PublishedSnapList.tsx
@@ -1,11 +1,12 @@
 import { Link } from "react-router-dom";
 import { MainTable, Pagination, Strip } from "@canonical/react-components";
-import { ISnap } from "../../types";
 import SnapNameEntry from "./SnapNameEntry";
 import NewSnapNotification from "../NewSnapNotification";
 import EmptySnapList from "../EmptySnapList";
 import { ITEMS_PER_PAGE } from "../../constants";
 
+import type { ISnap } from "../../types";
+
 function PublishedSnapList({
   snaps,
   currentUser,
@@ -18,7 +19,7 @@ function PublishedSnapList({
   currentPage: number;
   setCurrentPage: (page: number) => void;
   totalItems: number;
-}) {
+}): React.JSX.Element {
   const shouldShowNewSnapNotification =
     snaps && snaps.length === 1 && snaps[0].is_new;
 
@@ -119,7 +120,9 @@ function PublishedSnapList({
           <Pagination
             currentPage={currentPage}
             itemsPerPage={ITEMS_PER_PAGE}
-            paginate={(page) => setCurrentPage(page)}
+            paginate={(page) => {
+              setCurrentPage(page);
+            }}
             totalItems={totalItems}
           />
         </div>
diff --git a/static/js/publisher/components/PublishedSnapList/SnapNameEntry.tsx b/static/js/publisher/components/PublishedSnapList/SnapNameEntry.tsx
@@ -1,9 +1,9 @@
 import { Link } from "react-router-dom";
 import { Tooltip } from "@canonical/react-components";
 
-import { ISnap } from "../../types";
+import type { ISnap } from "../../types";
 
-function SnapNameEntry({ snap }: { snap: ISnap }) {
+function SnapNameEntry({ snap }: { snap: ISnap }): React.JSX.Element {
   const { snapName, status, icon_url } = snap;
   return (
     <Link to={`/${snapName}/listing`} className="p-heading-icon--small">
diff --git a/static/js/publisher/components/PublishedSnapSection/PublishedSnapSection.tsx b/static/js/publisher/components/PublishedSnapSection/PublishedSnapSection.tsx
@@ -1,17 +1,18 @@
 import { useState } from "react";
 import { Accordion } from "@canonical/react-components";
-import { ISnap } from "../../types";
 import PublishedSnapList from "../PublishedSnapList";
 import PublisherMetrics from "../PublisherMetrics";
 import { ITEMS_PER_PAGE } from "../../constants";
 
+import type { ISnap } from "../../types";
+
 function PublishedSnapSection({
   snaps,
   currentUser,
 }: {
   snaps: ISnap[];
   currentUser: string;
-}) {
+}): React.JSX.Element {
   const [currentPage, setCurrentPage] = useState<number>(1);
 
   const firstItemOfPage = (currentPage - 1) * ITEMS_PER_PAGE;
diff --git a/static/js/publisher/components/PublisherMetrics/PublisherMetrics.tsx b/static/js/publisher/components/PublisherMetrics/PublisherMetrics.tsx
@@ -1,10 +1,11 @@
 import { Col, Notification, Row, Strip } from "@canonical/react-components";
-import { ISnap } from "../../types";
 import { renderPublisherMetrics } from "../../../publisher/pages/Metrics/metrics/metrics";
 import { useEffect } from "react";
 import { useFetchPublishedSnapMetrics } from "../../hooks";
 
-function PublisherMetrics({ snaps }: { snaps: ISnap[] }) {
+import type { ISnap } from "../../types";
+
+function PublisherMetrics({ snaps }: { snaps: ISnap[] }): React.JSX.Element {
   const { status, data: metricsData } = useFetchPublishedSnapMetrics(snaps);
 
   useEffect(() => {
diff --git a/static/js/publisher/components/RegisteredSnaps/RegisteredSnaps.tsx b/static/js/publisher/components/RegisteredSnaps/RegisteredSnaps.tsx
@@ -8,10 +8,10 @@ import {
   Row,
   Tooltip,
 } from "@canonical/react-components";
-
-import { ISnap } from "../../types";
 import { ITEMS_PER_PAGE } from "../../constants";
 
+import type { ISnap } from "../../types";
+
 function RegisteredSnaps({
   snaps,
   currentUser,
@@ -20,14 +20,16 @@ function RegisteredSnaps({
   snaps: ISnap[];
   currentUser: string;
   refetchSnaps: () => void;
-}) {
+}): React.JSX.Element {
   const [unregisterSnapModal, setUnregisterSnapModal] = useState<string | null>(
     null,
   );
   const [isError, setIsError] = useState<boolean>(false);
   const [unregisterLoading, setUnregisterLoading] = useState<boolean>(false);
 
-  const closeModal = () => setUnregisterSnapModal(null);
+  const closeModal = (): void => {
+    setUnregisterSnapModal(null);
+  };
 
   const getData = () => {
     return snaps.map((snap) => {
diff --git a/static/js/publisher/components/SaveAndPreview/SaveAndPreview.tsx b/static/js/publisher/components/SaveAndPreview/SaveAndPreview.tsx
@@ -18,11 +18,11 @@ function SaveAndPreview({
   reset,
   isSaving,
   showPreview,
-}: Props) {
+}: Props): React.JSX.Element {
   const stickyBar = useRef<HTMLDivElement>(null);
   const mainPanel = document.querySelector(".l-main") as HTMLElement;
 
-  const handleScroll = () => {
+  const handleScroll = (): void => {
     stickyBar?.current?.classList.toggle(
       "sticky-shadow",
       stickyBar?.current?.getBoundingClientRect()?.top === 0,
diff --git a/static/js/publisher/components/SaveStateNotifications/SaveStateNotifications.tsx b/static/js/publisher/components/SaveStateNotifications/SaveStateNotifications.tsx
@@ -1,10 +1,11 @@
-import { Dispatch, SetStateAction } from "react";
 import { Notification } from "@canonical/react-components";
 
+import type { Dispatch, SetStateAction } from "react";
+
 type Props = {
   hasSaved: boolean;
   setHasSaved: Dispatch<SetStateAction<boolean>>;
-  savedError: boolean | Array<{ message: string }>;
+  savedError: boolean | { message: string }[];
   setSavedError: Dispatch<
     SetStateAction<boolean | { code: string; message: string }[]>
   >;
@@ -15,7 +16,7 @@ function SaveStateNotifications({
   setHasSaved,
   savedError,
   setSavedError,
-}: Props) {
+}: Props): React.JSX.Element {
   return (
     <>
       {hasSaved && (
diff --git a/static/js/publisher/components/SearchAutocomplete/SearchAutocomplete.tsx b/static/js/publisher/components/SearchAutocomplete/SearchAutocomplete.tsx
@@ -1,24 +1,25 @@
 import { useState, useEffect } from "react";
 import Downshift from "downshift";
-import {
-  useWatch,
+import { useWatch } from "react-hook-form";
+import { Button } from "@canonical/react-components";
+
+import type {
   UseFormRegister,
   UseFormSetValue,
   UseFormGetValues,
   Control,
   FieldValues,
 } from "react-hook-form";
-import { Button } from "@canonical/react-components";
 
 type DataItem = {
   key: string;
   name: string;
 };
 
 type Props = {
-  data: Array<DataItem>;
+  data: DataItem[];
   field: string;
-  currentValues: Array<string>;
+  currentValues: string[];
   register: UseFormRegister<FieldValues>;
   setValue: UseFormSetValue<FieldValues>;
   getValues: UseFormGetValues<FieldValues>;
@@ -35,12 +36,12 @@ function SearchAutocomplete({
   getValues,
   control,
   disabled,
-}: Props) {
+}: Props): React.JSX.Element {
   const [selections, setSelections] = useState(() => {
     return data.filter((value) => currentValues.includes(value.key));
   });
 
-  const getNewSelectionKeys = (newSelections: Array<DataItem>) => {
+  const getNewSelectionKeys = (newSelections: DataItem[]): string => {
     return newSelections
       .map((selection: DataItem) => selection.key)
       .sort()
diff --git a/static/js/publisher/components/SectionNav/SectionNav.tsx b/static/js/publisher/components/SectionNav/SectionNav.tsx
@@ -6,7 +6,7 @@ type Props = {
   snapName: string | undefined;
 };
 
-function SectionNav({ activeTab, snapName }: Props) {
+function SectionNav({ activeTab, snapName }: Props): React.JSX.Element {
   return (
     <Tabs
       listClassName="u-no-margin--bottom"
diff --git a/static/js/publisher/components/StoreSelector/StoreSelector.tsx b/static/js/publisher/components/StoreSelector/StoreSelector.tsx
@@ -15,7 +15,7 @@ function StoreSelector({ nativeNavLink }: Props): React.JSX.Element {
   const brandStoresList = useRecoilValue(brandStoresState);
   const [showStoreSelector, setShowStoreSelector] = useState<boolean>(false);
   const [filteredBrandStores, setFilteredBrandstores] =
-    useState<Array<Store>>(brandStoresList);
+    useState<Store[]>(brandStoresList);
 
   const getStoreName = (id: string | undefined) => {
     if (!id) {
diff --git a/static/js/publisher/components/Tour/Tour.tsx b/static/js/publisher/components/Tour/Tour.tsx
@@ -1,9 +1,11 @@
 import { useState } from "react";
-import Joyride, { CallBackProps, STATUS } from "react-joyride";
+import Joyride, { STATUS } from "react-joyride";
 import { Button, Icon } from "@canonical/react-components";
 
 import TourStep from "./TourStep";
 
+import type { CallBackProps } from "react-joyride";
+
 type Props = {
   steps: {
     target: string;
@@ -12,19 +14,20 @@ type Props = {
     disableBeacon?: boolean;
   }[];
 };
-function Tour({ steps }: Props) {
+
+function Tour({ steps }: Props): React.JSX.Element {
   const firstVisit = !localStorage.getItem("tourSeen");
   const [run, setRun] = useState<boolean>(firstVisit);
 
-  const handleClickStart = () => {
+  const handleClickStart = (): void => {
     setRun(true);
   };
 
   if (firstVisit) {
     localStorage.setItem("tourSeen", "true");
   }
 
-  const handleJoyrideCallback = (data: CallBackProps) => {
+  const handleJoyrideCallback = (data: CallBackProps): void => {
     const { status, action } = data;
 
     if (action === "close") {
@@ -37,6 +40,7 @@ function Tour({ steps }: Props) {
       setRun(false);
     }
   };
+
   return (
     <>
       <Button
diff --git a/static/js/publisher/components/Tour/TourStep.tsx b/static/js/publisher/components/Tour/TourStep.tsx
@@ -1,7 +1,8 @@
-import { TooltipRenderProps } from "react-joyride";
 import { Card, Button, Icon } from "@canonical/react-components";
 
-function TourStep(props: TooltipRenderProps) {
+import type { TooltipRenderProps } from "react-joyride";
+
+function TourStep(props: TooltipRenderProps): React.JSX.Element {
   const {
     backProps,
     closeProps,
diff --git a/static/js/publisher/components/UpdateMetadataModal/UpdateMetadataModal.tsx b/static/js/publisher/components/UpdateMetadataModal/UpdateMetadataModal.tsx
@@ -1,20 +1,20 @@
-import { Dispatch, SetStateAction } from "react";
-import { FieldValues } from "react-hook-form";
 import { Modal, Button } from "@canonical/react-components";
 
-import { UseMutateFunction } from "react-query";
+import type { Dispatch, SetStateAction } from "react";
+import type { FieldValues } from "react-hook-form";
+import type { UseMutateFunction } from "react-query";
 
 type Props = {
   setShowMetadataWarningModal: Dispatch<SetStateAction<boolean>>;
   submitForm: UseMutateFunction<void, unknown, FieldValues, unknown>;
-  formData: { [key: string]: unknown };
+  formData: Record<string, unknown>;
 };
 
 function UpdateMetadataModal({
   setShowMetadataWarningModal,
   submitForm,
   formData,
-}: Props) {
+}: Props): React.JSX.Element {
   return (
     <Modal
       close={() => {
diff --git a/static/js/publisher/publisher.tsx b/static/js/publisher/publisher.tsx
@@ -87,7 +87,7 @@ const router = createBrowserRouter([
   },
 ]);
 
-const rootEl = document.getElementById("root") as HTMLElement;
+const rootEl = document.getElementById("root")! as HTMLElement;
 const root = createRoot(rootEl);
 
 const queryClient = new QueryClient({
diff --git a/static/js/store/components/Banner/Banner.tsx b/static/js/store/components/Banner/Banner.tsx
@@ -1,7 +1,8 @@
-import { RefObject } from "react";
 import { Strip, Row, Col } from "@canonical/react-components";
 import { SearchInput } from "../SearchInput";
 
+import type { RefObject } from "react";
+
 type Props = {
   searchRef: RefObject<HTMLInputElement>;
   searchSummaryRef?: RefObject<HTMLDivElement>;
diff --git a/static/js/store/components/PackageFilter/PackageFilter.tsx b/static/js/store/components/PackageFilter/PackageFilter.tsx
diff --git a/static/js/store/components/PackageList/PackageList.tsx b/static/js/store/components/PackageList/PackageList.tsx
diff --git a/static/js/store/components/SearchInput/SearchInput.tsx b/static/js/store/components/SearchInput/SearchInput.tsx
diff --git a/static/js/store/hooks/usePackages.ts b/static/js/store/hooks/usePackages.ts
diff --git a/static/js/store/index.tsx b/static/js/store/index.tsx
diff --git a/static/js/store/utils/getArchitectures.ts b/static/js/store/utils/getArchitectures.ts
