packages/core: add missing types for layout components

packages/core/src/layout/ContentHeader/ContentHeader.test.tsx

@@ -20,7 +20,7 @@ import ContentHeader from './ContentHeader';
 import { wrapInThemedTestApp } from '@backstage/test-utils';
 
 jest.mock('react-helmet', () => {
-  return ({ defaultTitle }) => <div>defaultTitle: {defaultTitle}</div>;
+  return ({ defaultTitle }: any) => <div>defaultTitle: {defaultTitle}</div>;
 });
 
 describe('<ContentHeader/>', () => {

packages/core/src/layout/ErrorBoundary/ErrorBoundary.tsx

@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 
-import React, { ComponentClass, Component, SFC } from 'react';
+import React, { ComponentClass, Component, SFC, ErrorInfo } from 'react';
 
 type Props = {
   slackChannel?: string;
@@ -23,14 +23,14 @@ type Props = {
 
 type State = {
   error?: Error;
-  errorInfo?: string;
+  errorInfo?: ErrorInfo;
 };
 
 const ErrorBoundary: ComponentClass<
   Props,
   State
 > = class ErrorBoundary extends Component<Props, State> {
-  constructor(props) {
+  constructor(props: Props) {
     super(props);
 
     this.state = {
@@ -39,15 +39,10 @@ const ErrorBoundary: ComponentClass<
     };
   }
 
-  componentDidCatch(error, errorInfo) {
+  componentDidCatch(error: Error, errorInfo: ErrorInfo) {
     // eslint-disable-next-line no-console
     console.error(`ErrorBoundary, error: ${error}, info: ${errorInfo}`);
     this.setState({ error, errorInfo });
-
-    // Exposed for testing
-    if (this.props.onError) {
-      this.props.onError(error, errorInfo);
-    }
   }
 
   render() {
@@ -58,9 +53,7 @@ const ErrorBoundary: ComponentClass<
       return this.props.children;
     }
 
-    return (
-      <Error error={error} errorInfo={errorInfo} slackChannel={slackChannel} />
-    );
+    return <Error error={error} slackChannel={slackChannel} />;
   }
 };
 
@@ -68,7 +61,6 @@ export default ErrorBoundary;
 
 type EProps = {
   error?: Error;
-  errorInfo?: string;
   slackChannel?: string;
 };
 

packages/core/src/layout/Header/Header.test.tsx

@@ -20,7 +20,7 @@ import { wrapInThemedTestApp } from '@backstage/test-utils';
 import Header from './Header';
 
 jest.mock('react-helmet', () => {
-  return ({ defaultTitle }) => <div>defaultTitle: {defaultTitle}</div>;
+  return ({ defaultTitle }: any) => <div>defaultTitle: {defaultTitle}</div>;
 });
 
 describe('<Header/>', () => {

packages/core/src/layout/InfoCard/InfoCard.stories.tsx

@@ -13,7 +13,7 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import React from 'react';
+import React, { FC } from 'react';
 import InfoCard from '.';
 import { Grid } from '@material-ui/core';
 
@@ -25,7 +25,7 @@ export default {
   component: InfoCard,
 };
 
-const Wrapper = ({ children }) => (
+const Wrapper: FC<{}> = ({ children }) => (
   <Grid container spacing={4}>
     <Grid item>{children}</Grid>
   </Grid>

packages/core/src/layout/InfoCard/InfoCard.tsx

@@ -163,10 +163,15 @@ const InfoCard: FC<Props> = ({
   if (variant) {
     const variants = variant.split(/[\s]+/g);
     variants.forEach(name => {
-      calculatedStyle = { ...calculatedStyle, ...VARIANT_STYLES.card[name] };
+      calculatedStyle = {
+        ...calculatedStyle,
+        ...VARIANT_STYLES.card[name as keyof typeof VARIANT_STYLES['card']],
+      };
       calculatedCardStyle = {
         ...calculatedCardStyle,
-        ...VARIANT_STYLES.cardContent[name],
+        ...VARIANT_STYLES.cardContent[
+          name as keyof typeof VARIANT_STYLES['cardContent']
+        ],
       };
     });
   }

packages/core/src/layout/TabbedCard/TabbedCard.stories.tsx

@@ -23,7 +23,7 @@ export default {
   title: 'Tabbed Card',
   component: TabbedCard,
   decorators: [
-    storyFn => (
+    (storyFn: () => JSX.Element) => (
       <Grid container spacing={4}>
         <Grid item>{storyFn()}</Grid>
       </Grid>
@@ -72,9 +72,10 @@ export const WithFooterLink = () => {
 };
 
 export const WithControlledTabValue = () => {
-  const [selectedTab, setSelectedTab] = useState('one');
+  const [selectedTab, setSelectedTab] = useState<string | number>('one');
 
-  const handleChange = (_ev, newSelectedTab) => setSelectedTab(newSelectedTab);
+  const handleChange = (_ev: any, newSelectedTab: string | number) =>
+    setSelectedTab(newSelectedTab);
 
   return (
     <>