Build and type fixes

apps/leafcutter/components/AboutBox.tsx

@@ -1,12 +1,15 @@
-import { FC } from "react";
+import { FC, PropsWithChildren } from "react";
 import { Box } from "@mui/material";
 import { useAppContext } from "./AppProvider";
 
-interface AboutBoxProps {
+type AboutBoxProps = PropsWithChildren<{
   backgroundColor: string;
-}
+}>;
 
-export const AboutBox: FC<AboutBoxProps> = ({ backgroundColor, children }: any) => {
+export const AboutBox: FC<AboutBoxProps> = ({
+  backgroundColor,
+  children,
+}: any) => {
   const {
     colors: { white },
   } = useAppContext();

apps/leafcutter/components/AccountButton.tsx

@@ -36,7 +36,7 @@ export const AccountButton: FC = () => {
           },
         }}
       >
-        <Image src={UserIcon} alt="account" width="30px" height="30px" />
+        <Image src={UserIcon} alt="account" width={30} height={30} />
       </Button>
       <Menu {...bindMenu(popupState)}>
         <MenuItem

apps/leafcutter/components/AppProvider.tsx

@@ -1,7 +1,16 @@
-import { FC, createContext, useContext, useReducer, useState } from "react";
+import {
+  FC,
+  createContext,
+  useContext,
+  useReducer,
+  useState,
+  PropsWithChildren,
+} from "react";
 import { colors, typography } from "styles/theme";
 
-const basePath = process.env.GITLAB_CI ? "/link/link-stack/apps/leafcutter" : "";
+const basePath = process.env.GITLAB_CI
+  ? "/link/link-stack/apps/leafcutter"
+  : "";
 const imageURL = (image: any) =>
   typeof image === "string" ? `${basePath}${image}` : `${basePath}${image.src}`;
 
@@ -9,16 +18,16 @@ const AppContext = createContext({
   colors,
   typography,
   imageURL,
-  query: null,
-  updateQuery: null,
-  updateQueryType: null,
-  replaceQuery: null,
-  clearQuery: null,
+  query: null as any,
+  updateQuery: null as any,
+  updateQueryType: null as any,
+  replaceQuery: null as any,
+  clearQuery: null as any,
   foundCount: 0,
-  setFoundCount: null,
+  setFoundCount: null as any,
 });
 
-export const AppProvider: FC = ({ children }) => {
+export const AppProvider: FC<PropsWithChildren> = ({ children }) => {
   const initialState = {
     incidentType: {
       display: "Incident Type",
@@ -82,7 +91,10 @@ export const AppProvider: FC = ({ children }) => {
     },
   };
   const reducer = (state: any, action: any) => {
-    const key = action.payload ? Object.keys(action.payload)[0] : null;
+    const key = action.payload?.[0];
+    if (!key) {
+      throw new Error("Unknown key");
+    }
     const newState = { ...state };
     switch (action.type) {
       case "UPDATE":

apps/leafcutter/components/GettingStartedDialog.tsx

@@ -5,7 +5,19 @@ import { useRouter } from "next/router";
 import { useTranslate } from "react-polyglot";
 import { useAppContext } from "./AppProvider";
 
-const CheckboxItem = ({ title, description, checked, onChange }) => {
+type CheckboxItemProps = {
+  title: string;
+  description: string;
+  checked: boolean;
+  onChange: () => void;
+};
+
+const CheckboxItem: FC<CheckboxItemProps> = ({
+  title,
+  description,
+  checked,
+  onChange,
+}) => {
   const {
     typography: { p, small },
   } = useAppContext();
@@ -48,10 +60,10 @@ export const GettingStartedDialog: FC = () => {
     typography: { h4 },
   } = useAppContext();
   const t = useTranslate();
-  const [completedItems, setCompletedItems] = useState([]);
+  const [completedItems, setCompletedItems] = useState([] as any[]);
   const router = useRouter();
   const open = router.query.tooltip?.toString() === "checklist";
-  const toggleCompletedItem = (item) => {
+  const toggleCompletedItem = (item: any) => {
     if (completedItems.includes(item)) {
       setCompletedItems(completedItems.filter((i) => i !== item));
     } else {

apps/leafcutter/components/LanguageSelect.tsx

@@ -14,7 +14,7 @@ export const LanguageSelect = () => {
     colors: { white, leafcutterElectricBlue },
   } = useAppContext();
   const router = useRouter();
-  const locales = { en: "English", fr: "Français" };
+  const locales: any = { en: "English", fr: "Français" };
   const popupState = usePopupState({ variant: "popover", popupId: "language" });
 
   return (
@@ -36,7 +36,7 @@ export const LanguageSelect = () => {
           },
         }}
       >
-        {locales[router.locale] ?? locales.en}
+        {locales[router.locale as any] ?? locales.en}
         <KeyboardArrowDownIcon />
       </IconButton>
       <Menu {...bindMenu(popupState)}>

apps/leafcutter/components/Layout.tsx

@@ -1,3 +1,4 @@
+import { FC, PropsWithChildren } from "react";
 import { Grid, Container } from "@mui/material";
 import CookieConsent from "react-cookie-consent";
 import { useCookies } from "react-cookie";
@@ -7,7 +8,7 @@ import { GettingStartedDialog } from "./GettingStartedDialog";
 import { useAppContext } from "./AppProvider";
 // import { Footer } from "./Footer";
 
-export const Layout = ({ children }) => {
+export const Layout: FC<PropsWithChildren> = ({ children }) => {
   const [cookies, setCookie] = useCookies(["cookieConsent"]);
   const consentGranted = cookies.cookieConsent === "true";
   const {

apps/leafcutter/components/PageHeader.tsx

@@ -1,12 +1,12 @@
 /* eslint-disable react/require-default-props */
-import { FC } from "react";
+import { FC, PropsWithChildren } from "react";
 import { Box } from "@mui/material";
 import { useAppContext } from "./AppProvider";
 
-interface PageHeaderProps {
+type PageHeaderProps = PropsWithChildren<{
   backgroundColor: string;
   sx?: any;
-}
+}>;
 
 export const PageHeader: FC<PageHeaderProps> = ({
   backgroundColor,

apps/leafcutter/components/QueryBuilderSection.tsx

@@ -1,4 +1,4 @@
-import { FC, useState } from "react";
+import { FC, PropsWithChildren, useState } from "react";
 import {
   Box,
   Grid,
@@ -29,7 +29,14 @@ interface QueryBuilderSectionProps {
   tooltipDescription: string;
 }
 
-const Tooltip = ({ title, description, children, open }) => {
+type TooltipProps = PropsWithChildren<{
+  title: string;
+  description: string;
+  children: any;
+  open: boolean;
+}>;
+
+const Tooltip: FC<TooltipProps> = ({ title, description, children, open }) => {
   const {
     colors: { white, leafcutterElectricBlue, almostBlack },
     typography: { h5, small },

apps/leafcutter/components/QueryDateRangeSelector.tsx

@@ -63,6 +63,7 @@ export const QueryDateRangeSelector: FC<QueryDateRangeSelectorProps> = () => {
                 startDate: { values: [date] },
               });
             }}
+            // @ts-ignore
             renderInput={(params) => (
               <TextField
                 {...params}
@@ -89,6 +90,7 @@ export const QueryDateRangeSelector: FC<QueryDateRangeSelectorProps> = () => {
                 endDate: { values: [date] },
               });
             }}
+               // @ts-ignore
             renderInput={(params) => (
               <TextField
                 {...params}

apps/leafcutter/components/QueryListSelector.tsx

@@ -16,7 +16,7 @@ export const QueryListSelector: FC<QueryListSelectorProps> = ({
   values,
   width,
 }) => {
-  const [selectionModel, setSelectionModel] = useState([]);
+  const [selectionModel, setSelectionModel] = useState([] as any[]);
   const {
     colors: { leafcutterLightBlue, pink, leafcutterElectricBlue, warningPink },
     typography: { small },
@@ -70,19 +70,19 @@ export const QueryListSelector: FC<QueryListSelectorProps> = ({
               rows={rows}
               columns={columns}
               density="compact"
-              pageSize={100}
+              pageSizeOptions={[100]}
               checkboxSelection
-              disableSelectionOnClick
+              disableRowSelectionOnClick
               hideFooter
               disableColumnMenu
               scrollbarSize={10}
-              onSelectionModelChange={(newSelectionModel) => {
+              onRowSelectionModelChange={(newSelectionModel) => {
                 setSelectionModel(newSelectionModel);
                 updateQuery({
                   [keyName]: { values: newSelectionModel },
                 });
               }}
-              selectionModel={selectionModel}
+              rowSelectionModel={selectionModel}
             />
           </Grid>
         </Grid>

apps/leafcutter/components/QueryText.tsx

@@ -12,7 +12,7 @@ export const QueryText: FC = () => {
     query: q,
   } = useAppContext();
 
-  const displayNames = {
+  const displayNames: any = {
     incidentType: t("incidentType"),
     startDate: t("startDate"),
     endDate: t("endDate"),
@@ -41,6 +41,7 @@ export const QueryText: FC = () => {
         queryType === "include" ? ` ${t("is")} ` : ` ${t("isNot")} `
       } ${values
         .map(
+          // @ts-expect-error
           (value: string) => `<em>${taxonomy[key]?.[value]?.display ?? ""}</em>`
         )
         .join(` ${t("or")} `)}</span>`;

apps/leafcutter/components/RawDataViewer.tsx

@@ -16,7 +16,7 @@ export const RawDataViewer: FC<RawDataViewerProps> = ({ rows, height }) => {
       headerName: t("date"),
       editable: false,
       flex: 0.7,
-      valueFormatter: ({ value }) => new Date(value).toLocaleDateString(),
+      valueFormatter: ({ value }: any) => new Date(value).toLocaleDateString(),
     },
     {
       field: "incident",
@@ -58,7 +58,10 @@ export const RawDataViewer: FC<RawDataViewerProps> = ({ rows, height }) => {
 
   return (
     <Grid item xs={12}>
-      <Box sx={{ width: "100%", height }} onClick={(e: any) => e.stopPropagation()}>
+      <Box
+        sx={{ width: "100%", height }}
+        onClick={(e: any) => e.stopPropagation()}
+      >
         <Grid container direction="column" spacing={2}>
           <Grid item>
             <DataGridPro
@@ -66,8 +69,8 @@ export const RawDataViewer: FC<RawDataViewerProps> = ({ rows, height }) => {
               rows={rows}
               columns={columns}
               density="compact"
-              pageSize={100}
-              disableSelectionOnClick
+              pageSizeOptions={[100]}
+              disableRowSelectionOnClick
               hideFooter
               disableColumnMenu
               scrollbarSize={10}
@@ -76,6 +79,6 @@ export const RawDataViewer: FC<RawDataViewerProps> = ({ rows, height }) => {
           </Grid>
         </Grid>
       </Box>
-    </Grid >
+    </Grid>
   );
 };

apps/leafcutter/components/VisualizationBuilder.tsx

@@ -49,8 +49,9 @@ export const VisualizationBuilder: FC<VisualizationBuilderProps> = ({
     clearQuery,
   } = useAppContext();
   const { visualizations } = visualizationMap;
-  const [selectedVisualizationType, setSelectedVisualizationType] =
-    useState(null);
+  const [selectedVisualizationType, setSelectedVisualizationType] = useState(
+    null as any
+  );
   const toggleSelectedVisualizationType = (visualizationType: string) => {
     if (visualizationType === selectedVisualizationType) {
       setSelectedVisualizationType(null);
@@ -72,7 +73,7 @@ export const VisualizationBuilder: FC<VisualizationBuilderProps> = ({
     updateSearches();
   }, [setSavedSearches]);
 
-  const showSavedSearchPopup = (event) => {
+  const showSavedSearchPopup = (event: any) => {
     setAnchorEl(event.currentTarget);
   };
   const handleClose = () => {
@@ -104,8 +105,10 @@ export const VisualizationBuilder: FC<VisualizationBuilderProps> = ({
   const updateSearch = (name: string) => {
     handleClose();
     closeDialog();
-    const found = savedSearches.find((search) => search.name === name);
-    replaceQuery(found.query);
+    const found: any = savedSearches.find(
+      (search: any) => search.name === name
+    );
+    replaceQuery(found?.query);
   };
 
   const clearSearch = () => clearQuery();
@@ -240,7 +243,7 @@ export const VisualizationBuilder: FC<VisualizationBuilderProps> = ({
                   <ListItemText>{t("saveCurrentSearch")}</ListItemText>
                 </MenuItem>
                 <Divider />
-                {savedSearches.map((savedSearch) => (
+                {savedSearches.map((savedSearch: any) => (
                   <MenuItem
                     key={savedSearch.name}
                     onClick={() => updateSearch(savedSearch.name)}
@@ -322,6 +325,7 @@ export const VisualizationBuilder: FC<VisualizationBuilderProps> = ({
           <VisualizationSelectCard
             key={key}
             visualizationType={key}
+            // @ts-expect-error
             title={visualizations[key].name}
             enabled={
               selectedVisualizationType === key ||
@@ -347,6 +351,7 @@ export const VisualizationBuilder: FC<VisualizationBuilderProps> = ({
             const { id, type, title, description } = template;
             const cleanTitle = title
               .replace("Templated", "")
+              // @ts-expect-error
               .replace(visualizations[type].name, "");
             const metricType = cleanTitle.replace(/\s/g, "").toLowerCase();
             return (

apps/leafcutter/components/VisualizationSelectCard.tsx

@@ -37,7 +37,7 @@ export const VisualizationSelectCard: FC<VisualizationSelectCardProps> = ({
       cdrLinkOrange,
     },
   } = useAppContext();
-  const images = {
+  const images: any = {
     horizontalBar,
     horizontalBarStacked,
     verticalBar,

apps/leafcutter/components/Welcome.tsx

@@ -8,7 +8,7 @@ export const Welcome = () => {
   const { data: session } = useSession();
   const {
     user: { name },
-  } = session;
+  } = session as any;
   const {
     colors: { white, leafcutterElectricBlue },
     typography: { h1, h4, p },