Add typing /components/records

src/components/records/RecordBadge.tsx

 import { IconBadge, InternalLink } from "@ess-ics/ce-ui-common";
+import { type SxProps } from "@mui/material";
 import { RecordStatusIcon } from "./RecordIcons";
+import { Record } from "../../store/deployApi";
 
-export function RecordBadge({ record, ...rest }) {
+interface RecordBadgeProps {
+  record: Record;
+  sx?: SxProps;
+}
+
+export function RecordBadge({ record, sx }: RecordBadgeProps) {
   return (
     <IconBadge
       icon={<RecordStatusIcon record={record} />}
@@ -14,7 +21,7 @@ export function RecordBadge({ record, ...rest }) {
           {record?.iocName}
         </InternalLink>
       }
-      {...rest}
+      sx={sx}
     />
   );
 }

src/components/records/RecordHostLink.tsx

 import { Grid, Skeleton, Typography } from "@mui/material";
 import { InternalLink, EllipsisText, EmptyValue } from "@ess-ics/ce-ui-common";
-import { useFindNetBoxHostByFqdnQuery } from "../../store/deployApi";
+import {
+  HostInfoWithId,
+  useFindNetBoxHostByFqdnQuery
+} from "../../store/deployApi";
 
-function shortenFqdn(fqdn) {
-  return fqdn.split(".")[0];
-}
-
-function createHostLink(fqdn, hostInfo) {
+function createHostLink(hostInfo: HostInfoWithId, fqdn?: string) {
   // if the fqdn field is empty for some reason
-  if (fqdn === null || fqdn.trim() === "") {
+  if (fqdn === null || fqdn?.trim() === "") {
     return <EmptyValue />;
   }
 
@@ -20,7 +19,7 @@ function createHostLink(fqdn, hostInfo) {
         label={`Record host details, ${fqdn}}`}
         width="100%"
       >
-        <EllipsisText>{shortenFqdn(fqdn)}</EllipsisText>
+        <EllipsisText>{fqdn?.split(".")[0]}</EllipsisText>
       </InternalLink>
     );
   }
@@ -28,8 +27,11 @@ function createHostLink(fqdn, hostInfo) {
   return <Typography>{fqdn}</Typography>;
 }
 
-export const RecordHostLink = ({ fqdn }) => {
-  const { data: hostInfo, isLoading } = useFindNetBoxHostByFqdnQuery({ fqdn });
+export const RecordHostLink = ({ fqdn }: { fqdn?: string }) => {
+  const { data: hostInfo, isLoading } = useFindNetBoxHostByFqdnQuery(
+    { fqdn: fqdn ?? "" },
+    { skip: !fqdn }
+  );
 
   return (
     <Grid
@@ -41,7 +43,7 @@ export const RecordHostLink = ({ fqdn }) => {
       {isLoading || !hostInfo ? (
         <Skeleton width="100%" />
       ) : (
-        createHostLink(fqdn, hostInfo)
+        createHostLink(hostInfo, fqdn)
       )}
     </Grid>
   );

src/components/records/RecordIcons.tsx

+import { ReactElement } from "react";
 import { useTheme } from "@mui/material";
 import { LabeledIcon } from "@ess-ics/ce-ui-common";
 import {
@@ -5,28 +6,29 @@ import {
   RadioButtonUnchecked,
   HelpOutline
 } from "@mui/icons-material";
+import { Record as ApiRecord } from "../../store/deployApi";
 
-export function RecordStatusIcon({ record }) {
+export function RecordStatusIcon({ record }: { record: ApiRecord }) {
   const theme = useTheme();
 
   const { pvStatus } = record;
 
-  const iconConfig = {
+  const iconConfig: Record<string, { title: string; icon: ReactElement }> = {
     active: {
       title: "Active",
-      icon: Brightness1
+      icon: <Brightness1 />
     },
     inactive: {
       title: "Inactive",
-      icon: RadioButtonUnchecked
+      icon: <RadioButtonUnchecked />
     },
     null: {
       title: "Unknown",
-      icon: HelpOutline
+      icon: <HelpOutline />
     }
   };
 
-  const state = pvStatus ? pvStatus.toLowerCase() : null;
+  const state = pvStatus ? pvStatus.toLowerCase() : "null";
   const iconStyle = { fill: theme.palette.status.icons };
   const iconTitle = iconConfig[state].title;
   const statusIcon = iconConfig[state].icon;

src/components/records/RecordSearch.tsx

@@ -6,20 +6,33 @@ import { RecordTable } from "./RecordTable";
 import { initRequestParams } from "../common/Helper";
 import { ROWS_PER_PAGE } from "../../constants";
 import { useLazyFindAllRecordsQuery } from "../../store/deployApi";
+import { Pagination } from "../../types/common";
 
-export function RecordSearch({ iocName, rowType, isExpanded }) {
+interface RecordSearchProps {
+  iocName?: string;
+  rowType: "records" | "iocDetails" | undefined;
+  isExpanded: boolean;
+}
+
+export function RecordSearch({
+  iocName,
+  rowType,
+  isExpanded
+}: RecordSearchProps) {
   const [
     getRecords,
     { data: records, isLoading: loading, isSuccess: dataReady }
   ] = useLazyFindAllRecordsQuery();
 
   const [searchParams, setSearchParams] = useSearchParams({ query: "" });
-  const [recordFilter, setRecordFilter] = useState();
+  const [recordFilter, setRecordFilter] = useState<
+    "ACTIVE" | "INACTIVE" | undefined
+  >(undefined);
   const [tabIndex, setTabIndex] = useState(0);
 
-  const handleTabChange = (tab) => {
+  const handleTabChange = (tab: number) => {
     if (tab === 0) {
-      setRecordFilter(null);
+      setRecordFilter(undefined);
     } else if (tab === 1) {
       setRecordFilter("ACTIVE");
     } else if (tab === 2) {
@@ -43,23 +56,27 @@ export function RecordSearch({ iocName, rowType, isExpanded }) {
   useEffect(() => {
     if (isExpanded) {
       const requestParams = initRequestParams(pagination);
-      requestParams.pv_status = recordFilter;
-      requestParams.text = searchParams.get("query");
-      requestParams.ioc_name = iocName;
-      getRecords(requestParams);
+
+      getRecords({
+        pvStatus: recordFilter,
+        text: searchParams.get("query") || undefined,
+        iocName: iocName,
+        ...requestParams,
+        limit: requestParams.limit.toString()
+      });
     }
   }, [getRecords, recordFilter, searchParams, pagination, iocName, isExpanded]);
 
   // Callback for searchbar, called whenever user updates search
   const setSearch = useCallback(
-    (query) => {
+    (query: string) => {
       setSearchParams({ query }, { replace: true });
     },
     [setSearchParams]
   );
 
   // Invoked by Table on change to pagination
-  const onPage = (params) => {
+  const onPage = (params: Pagination) => {
     setPagination(params);
   };
 

src/components/records/RecordTable.tsx

@@ -7,6 +7,11 @@ import {
 import { Grid } from "@mui/material";
 import { RecordStatusIcon } from "./RecordIcons";
 import { RecordHostLink } from "./RecordHostLink";
+import { Pagination } from "../../types/common";
+import type {
+  PagedRecordResponse,
+  Record as ApiRecord
+} from "../../store/deployApi";
 
 const recordsColumns = [
   {
@@ -50,10 +55,10 @@ const iocDetailsColumns = [
   { field: "iocVersion", headerName: "Version", width: "15ch", sortable: false }
 ];
 
-function createRecordName(record) {
+function createRecordName(record: ApiRecord) {
   return (
     <InternalLink
-      to={`/records/${encodeURIComponent(record.name)}`}
+      to={`/records/${encodeURIComponent(record?.name || "")}`}
       label={`Record details, ${record.name}`}
       width="100%"
     >
@@ -77,7 +82,7 @@ function createRecordName(record) {
   );
 }
 
-function createRecordDescription(description) {
+function createRecordDescription(description?: string) {
   return (
     <>
       {description ? (
@@ -89,7 +94,7 @@ function createRecordDescription(description) {
   );
 }
 
-function createIocLink(record) {
+function createIocLink(record: ApiRecord) {
   // IOC ID only exists if it has been created in the DB -> avoid linking if it hasn't been created
   if (record.iocId) {
     return (
@@ -106,7 +111,7 @@ function createIocLink(record) {
   return record.iocName;
 }
 
-function createRecordsRow(record) {
+function createRecordsRow(record: ApiRecord) {
   return {
     id: record.name,
     bulb: (
@@ -120,13 +125,13 @@ function createRecordsRow(record) {
       </Grid>
     ),
     name: createRecordName(record),
-    description: createRecordDescription(record.description),
+    description: createRecordDescription(record?.description),
     iocName: createIocLink(record),
     hostName: <RecordHostLink fqdn={record.hostName} />
   };
 }
 
-function createIocDetailsRow(record) {
+function createIocDetailsRow(record: ApiRecord) {
   return {
     id: record.name,
     bulb: (
@@ -139,26 +144,41 @@ function createIocDetailsRow(record) {
         <RecordStatusIcon record={record} />
       </Grid>
     ),
-    description: createRecordDescription(record.description),
     name: createRecordName(record),
+    description: createRecordDescription(record.description),
     iocVersion: <EllipsisText>{record.iocVersion}</EllipsisText>
   };
 }
 
+interface RecordTableProps {
+  records?: PagedRecordResponse;
+  rowType?: "records" | "iocDetails";
+  loading: boolean;
+  pagination: Pagination;
+  onPage: (params: Pagination) => void;
+}
+
+type TableTypeSpecificsType = {
+  records: [typeof recordsColumns, typeof createRecordsRow];
+  iocDetails: [typeof iocDetailsColumns, typeof createIocDetailsRow];
+};
+
 export function RecordTable({
   records,
   rowType = "records",
   loading,
   pagination,
   onPage
-}) {
-  const tableTypeSpecifics = {
+}: RecordTableProps) {
+  const tableTypeSpecifics: TableTypeSpecificsType = {
     records: [recordsColumns, createRecordsRow],
     iocDetails: [iocDetailsColumns, createIocDetailsRow]
   };
 
   const [columns, createRow] = tableTypeSpecifics[rowType];
-  const rows = (records?.recordList ?? []).map((record) => createRow(record));
+  const rows = (records?.recordList ?? []).map((record: ApiRecord) =>
+    createRow(record)
+  );
 
   return (
     <Table