refactor: convert to TS, rename cards and listing UI

also remove unused component

src/components/Canary/card.js → src/components/Canary/CanaryCards.tsx

@@ -1,10 +1,14 @@
 import React from "react";
 import { GetName } from "./data";
 import { Title, StatusList } from "./renderers";
+import { HealthCheck } from "../../api/types/health";
 
-export function CanaryCards(props) {
-  const { checks, onClick } = props;
+type CanaryCardProps = {
+  checks: HealthCheck[];
+  onClick: (check: HealthCheck) => void;
+};
 
+export function CanaryCards({ checks, onClick }: CanaryCardProps) {
   return (
     <ul className={`mt-1 grid grid-cols-1 gap-1 sm:gap-2 `}>
       {checks.map((check) => (

src/components/Canary/ChecksListing.tsx

@@ -11,7 +11,7 @@ import PlaybooksDropdownMenu from "../Playbooks/Runs/Submit/PlaybooksDropdownMen
 import { CheckDetails } from "./CanaryPopup/CheckDetails";
 import { CheckTitle } from "./CanaryPopup/CheckTitle";
 import { HealthCheckEdit } from "./HealthCheckEdit";
-import { CanaryCards } from "./card";
+import { CanaryCards } from "./CanaryCards";
 import { CanaryTable } from "./table";
 
 type ChecksListingProps = {
@@ -55,7 +55,7 @@ export function ChecksListing({
   return (
     <>
       {layout === "card" ? (
-        <CanaryCards checks={checks} onClick={handleCheckSelect} />
+        <CanaryCards checks={checks!} onClick={handleCheckSelect} />
       ) : (
         <CanaryTable
           checks={checks}

src/components/Canary/data.js → src/components/Canary/data.tsx

@@ -1,10 +1,11 @@
+import { HealthCheck } from "../../api/types/health";
 import { isEmpty } from "./utils";
 
-export function CanarySorter(check) {
+export function CanarySorter(check: Partial<HealthCheck>) {
   return GetName(check).toLowerCase();
 }
 
-export function GetName(check) {
+export function GetName(check: Partial<HealthCheck>) {
   let title = check.name;
   if (isEmpty(title)) {
     title = check.description;