Typescript fixes

lib/ReactViews/ActionBar/ActionBar.tsx

@@ -12,7 +12,7 @@ import { ActionBarPortalId } from "./ActionBarPortal";
  * {@link ActionButton} can be used as a themed button for the action bar
  * {@link ActionButtonGroup} can be used for grouping elements inside an action bar
  */
-export const ActionBar: React.FC<{}> = (props) => {
+export const ActionBar: React.FC<{ children: React.ReactNode }> = (props) => {
   const viewState = useViewState();
 
   useEffect(function setVisibility() {

lib/ReactViews/Custom/Chart/ChartExpandAndDownloadButtons.tsx

@@ -3,7 +3,11 @@ import { TFunction } from "i18next";
 import { action, observable, runInAction, makeObservable } from "mobx";
 import { observer } from "mobx-react";
 import { Component } from "react";
-import { WithTranslation, withTranslation } from "react-i18next";
+import {
+  WithTranslation,
+  useTranslation,
+  withTranslation
+} from "react-i18next";
 import filterOutUndefined from "../../../Core/filterOutUndefined";
 import ChartableMixin from "../../../ModelMixins/ChartableMixin";
 import hasTraits from "../../../Models/Definition/hasTraits";
@@ -135,7 +139,6 @@ class ChartExpandAndDownloadButtons extends Component<PropsType> {
         downloadUrl={
           canDownload && downloads.length > 0 ? downloads[0] : undefined
         }
-        t={t}
       />
     );
   }
@@ -188,16 +191,16 @@ const ExpandAndDownloadDropdowns = function (props: {
 const ExpandAndDownloadButtons = function (props: {
   onExpand: () => void;
   downloadUrl?: string;
-  t: TFunction;
 }) {
+  const { t } = useTranslation();
   return (
     <div className={Styles.chartExpand}>
       <button
         type="button"
         className={Styles.btnChartExpand}
         onClick={props.onExpand}
       >
-        {props.t("chart.expand")}
+        {t("chart.expand")}
       </button>
       {props.downloadUrl && (
         <a

lib/ReactViews/Custom/Collapsible/Collapsible.tsx

@@ -33,6 +33,7 @@ interface CollapsibleProps extends CollapsibleIconProps {
   titleTextProps?: any;
   bodyBoxProps?: IBoxProps;
   bodyTextProps?: any;
+  children: React.ReactNode;
 }
 
 export const CollapseIcon: React.FC<CollapsibleIconProps> = (props) => {

lib/ReactViews/Custom/CollapsibleCustomComponent.ts

@@ -32,16 +32,13 @@ export default class CollapsibleCustomComponent extends CustomComponent {
     const btnRight = Boolean(node.attribs?.rightbtn);
     const btnStyle = node.attribs?.btnstyle;
 
-    return createElement(
-      Collapsible,
-      {
-        key: title,
-        title,
-        isOpen,
-        btnRight,
-        btnStyle: btnStyle === "plus" ? "plus" : undefined
-      },
+    return createElement(Collapsible, {
+      key: title,
+      title,
+      isOpen,
+      btnRight,
+      btnStyle: btnStyle === "plus" ? "plus" : undefined,
       children
-    );
+    });
   }
 }

lib/ReactViews/Errors/RaiseToUserErrorBoundary.tsx

@@ -1,11 +1,12 @@
-import { Component, ErrorInfo } from "react";
+import { Component, ErrorInfo, ReactNode } from "react";
 import TerriaError, { TerriaErrorOverrides } from "../../Core/TerriaError";
 import ViewState from "../../ReactViewModels/ViewState";
 
 type PropsType = {
   viewState: ViewState;
   // Pass in options to customize the title and other presentation aspects of the error
   terriaErrorOptions?: TerriaErrorOverrides;
+  children: ReactNode;
 };
 
 /**

lib/ReactViews/FeatureInfo/FeatureInfoPanel.tsx

@@ -3,7 +3,7 @@ import { TFunction } from "i18next";
 import { action, reaction, runInAction, makeObservable } from "mobx";
 import { disposeOnUnmount, observer } from "mobx-react";
 import { Component } from "react";
-import { withTranslation } from "react-i18next";
+import { WithTranslation, withTranslation } from "react-i18next";
 import Cartesian3 from "terriajs-cesium/Source/Core/Cartesian3";
 import Ellipsoid from "terriajs-cesium/Source/Core/Ellipsoid";
 import CesiumMath from "terriajs-cesium/Source/Core/Math";
@@ -35,10 +35,9 @@ import FeatureInfoCatalogItem from "./FeatureInfoCatalogItem";
 
 const DragWrapper = require("../DragWrapper");
 
-interface Props {
+interface Props extends WithTranslation {
   viewState: ViewState;
   printView?: boolean;
-  t: TFunction;
 }
 
 @observer

lib/ReactViews/FeatureInfo/FeatureInfoSection.tsx

@@ -13,7 +13,7 @@ import { observer } from "mobx-react";
 import { IDisposer } from "mobx-utils";
 import Mustache from "mustache";
 import * as React from "react";
-import { withTranslation } from "react-i18next";
+import { WithTranslation, withTranslation } from "react-i18next";
 import styled from "styled-components";
 import Cartesian3 from "terriajs-cesium/Source/Core/Cartesian3";
 import Ellipsoid from "terriajs-cesium/Source/Core/Ellipsoid";
@@ -54,14 +54,13 @@ Mustache.escape = function (string) {
   return string;
 };
 
-interface FeatureInfoProps extends WithViewState {
+interface FeatureInfoProps extends WithViewState, WithTranslation {
   feature: TerriaFeature;
   position?: Cartesian3;
   catalogItem: MappableMixin.Instance; // Note this may not be known (eg. WFS).
   isOpen: boolean;
   onClickHeader?: (feature: TerriaFeature) => void;
   printView?: boolean;
-  t: TFunction;
 }
 
 @observer

lib/ReactViews/Generic/TooltipWrapper.tsx

@@ -236,9 +236,7 @@ type ButtonLauncherProps = {
   [spread: string]: any;
 };
 
-export const TooltipWithButtonLauncher: React.SFC<ButtonLauncherProps> = (
-  props
-) => {
+export const TooltipWithButtonLauncher = (props: ButtonLauncherProps) => {
   const { launcherComponent, children, dismissOnLeave, orientation, ...rest } =
     props;
 

lib/ReactViews/Map/Navigation/MapNavigation.tsx

@@ -80,7 +80,6 @@ const ControlWrapper = styled(Box)`
 interface PropTypes extends WithTranslation {
   viewState: ViewState;
   theme: DefaultTheme;
-  t: TFunction;
   navItems: any[];
 }
 

lib/ReactViews/Map/Panels/SharePanel/SharePanel.tsx

@@ -26,7 +26,6 @@ interface PropTypes extends WithTranslation {
   viewState: ViewState;
   onUserClick: () => void;
   btnDisabled: boolean;
-  t: TFunction;
 }
 
 interface SharePanelState {

lib/ReactViews/Map/TrainerBar/TrainerBar.tsx

@@ -77,7 +77,7 @@ const renderStep = (
   options: {
     renderDescription: boolean;
     comfortable: boolean;
-    footerComponent?: () => void;
+    footerComponent?: () => React.ReactNode;
   } = {
     renderDescription: true,
     comfortable: false,
@@ -131,9 +131,8 @@ const renderOrderedStepList = function (
   ));
 };
 
-interface StepAccordionProps {
+interface StepAccordionProps extends WithTranslation {
   selectedTrainerSteps: StepItem[];
-  t: TFunction;
   theme: DefaultTheme;
   selectedTrainer: TrainerItem;
   isShowingAllSteps: boolean;
@@ -303,7 +302,6 @@ const StepAccordion = withTranslation()(
 );
 
 interface TrainerBarProps extends WithTranslation, WithViewState {
-  t: TFunction;
   theme: DefaultTheme;
 }
 

lib/ReactViews/Preview/WarningBox.tsx

@@ -21,10 +21,11 @@ const showErrorNotification = (viewState: ViewState, error: TerriaError) => {
   viewState.terria.raiseErrorToUser(error, undefined, true);
 };
 
-const WarningBox: React.FC<{
+const WarningBox = (props: {
   error?: TerriaError;
   viewState?: ViewState;
-}> = (props) => {
+  children: React.ReactNode;
+}) => {
   // We only show FeedbankLink if the error message doesn't include the <feedbacklink> custom component (so we don't get duplicates)
   const includesFeedbackLink =
     props.error?.highestImportanceError.message.includes(

lib/ReactViews/StandardUserInterface/Portal.tsx

@@ -38,6 +38,7 @@ export const Portal: React.FC<PortalProps> = ({ id, className }) => {
 export type PortalChildProps = {
   viewState: ViewState;
   portalId: string;
+  children: React.ReactNode;
 };
 
 /**

lib/ReactViews/StandardUserInterface/SidePanelContainer.tsx

@@ -1,12 +1,12 @@
 import { action } from "mobx";
-import styled from "styled-components";
-import ViewState from "../../ReactViewModels/ViewState";
-import { withViewState } from "./ViewStateContext";
+import type * as React from "react";
+import styled, { StyledComponent } from "styled-components";
+import { WithViewState, withViewState } from "./ViewStateContext";
 
-type PropsType = {
-  viewState: ViewState;
+interface PropsType extends WithViewState {
   show: boolean;
-};
+  children: React.ReactNode;
+}
 
 const SidePanelContainer = styled.div.attrs<PropsType>(({ viewState }) => ({
   className: viewState.topElement === "SidePanel" ? "top-element" : "",
@@ -35,4 +35,9 @@ const SidePanelContainer = styled.div.attrs<PropsType>(({ viewState }) => ({
   margin-left: ${(p) => (p.show ? "0px" : `-${p.theme.workbenchWidth}px`)};
 `;
 
-export default withViewState(SidePanelContainer);
+// Styled components seems to make children prop not be visible through withViewState. Explicitly type the component to make it work.
+export default withViewState(
+  SidePanelContainer as React.ComponentType<
+    PropsType & React.HTMLAttributes<HTMLDivElement>
+  >
+);

lib/ReactViews/StandardUserInterface/ViewStateContext.tsx

@@ -5,10 +5,15 @@ import TerriaError from "../../Core/TerriaError";
 
 export const ViewStateContext = createContext<ViewState | undefined>(undefined);
 
-export const ViewStateProvider: React.FC<{ viewState: ViewState }> = ({
+interface ViewStateProviderProps {
+  viewState: ViewState;
+  children: React.ReactNode;
+}
+
+export const ViewStateProvider = ({
   viewState,
   children
-}) => (
+}: ViewStateProviderProps) => (
   <ViewStateContext.Provider value={viewState}>
     {children}
   </ViewStateContext.Provider>

lib/ReactViews/Story/Story.tsx

@@ -39,9 +39,7 @@ interface Props {
   onTouchStart(): void;
 }
 
-interface MenuProps extends Props {
-  t: TFunction;
-}
+interface MenuProps extends Props {}
 
 const findTextContent = (content: any): string => {
   if (typeof content === "string") {
@@ -159,9 +157,8 @@ const calculateOffset =
     return `top: ${offsetTopScroll}px;`;
   };
 
-const renderMenu = (props: MenuProps) => {
-  const { t } = props;
-
+const Menu = (props: MenuProps) => {
+  const { t } = useTranslation();
   return (
     <Ul column>
       <li>
@@ -301,7 +298,7 @@ const Story = (props: Props) => {
                 }
               `}
             >
-              {renderMenu({ ...props, t })}
+              <Menu {...props} />
             </Box>
           )}
         </Box>

lib/ReactViews/Story/StoryBuilder.tsx

@@ -368,7 +368,7 @@ class StoryBuilder extends React.Component<
                     <Trans i18nKey="story.removeStoryDialog" i18n={i18n}>
                       Are you sure you wish to delete
                       <TextSpan textLight large bold>
-                        {{ storyName }}
+                        {storyName}
                       </TextSpan>
                       ?
                     </Trans>

lib/ReactViews/Tools/DiffTool/DiffTool.tsx

@@ -13,7 +13,11 @@ import { IDisposer } from "mobx-utils";
 import { useState } from "react";
 import * as React from "react";
 import ReactDOM from "react-dom";
-import { WithTranslation, withTranslation } from "react-i18next";
+import {
+  WithTranslation,
+  useTranslation,
+  withTranslation
+} from "react-i18next";
 import styled, { DefaultTheme, useTheme, withTheme } from "styled-components";
 import Cartographic from "terriajs-cesium/Source/Core/Cartographic";
 import createGuid from "terriajs-cesium/Source/Core/createGuid";
@@ -53,6 +57,7 @@ import Loader from "../../Loader";
 import DatePicker from "./DatePicker";
 import LocationPicker from "./LocationPicker";
 import { CLOSE_TOOL_ID } from "../../Map/Navigation/registerMapNavigations";
+import { useViewState } from "../../StandardUserInterface/ViewStateContext";
 
 const dateFormat = require("dateformat");
 
@@ -497,7 +502,7 @@ class Main extends React.Component<MainPropsType> {
 
     return (
       <Text large>
-        <DiffAccordion viewState={viewState} t={t}>
+        <DiffAccordion>
           <MainPanel
             isMapFullScreen={viewState.isMapFullScreen}
             styledMaxHeight={`calc(100vh - ${viewState.bottomDockHeight}px - 150px)`}
@@ -731,7 +736,6 @@ class Main extends React.Component<MainPropsType> {
                 onDateSet={() => this.showItem(this.props.leftItem)}
               />
               <AreaFilterSelection
-                t={t}
                 location={this.location}
                 isPickingNewLocation={this._isPickingNewLocation}
               />
@@ -749,18 +753,14 @@ class Main extends React.Component<MainPropsType> {
   }
 }
 
-interface DiffAccordionProps {
-  viewState: ViewState;
-  t: TFunction;
-}
-
 const DiffAccordionToggle = styled(Box)`
   ${({ theme }) => theme.borderRadiusTop(theme.radius40Button)}
 `;
 
-const DiffAccordion: React.FC<DiffAccordionProps> = (props) => {
+const DiffAccordion = ({ children }: { children: React.ReactNode }) => {
   const [showChildren, setShowChildren] = useState(true);
-  const { t, viewState } = props;
+  const { t } = useTranslation();
+  const viewState = useViewState();
   const theme = useTheme();
   return (
     <DiffAccordionWrapper isMapFullScreen={viewState.isMapFullScreen} column>
@@ -806,7 +806,7 @@ const DiffAccordion: React.FC<DiffAccordionProps> = (props) => {
           </RawButton>
         </Box>
       </DiffAccordionToggle>
-      {showChildren && props.children}
+      {showChildren && children}
     </DiffAccordionWrapper>
   );
 };
@@ -872,11 +872,11 @@ const Selector = (props: any) => (
 );
 
 const AreaFilterSelection = (props: {
-  t: TFunction;
   location?: LatLonHeight;
   isPickingNewLocation: boolean;
 }) => {
-  const { t, location, isPickingNewLocation } = props;
+  const { location, isPickingNewLocation } = props;
+  const { t } = useTranslation();
   let locationText = "-";
   if (location) {
     const { longitude, latitude } = prettifyCoordinates(