packages/core: add missing types for components

packages/core/src/components/CopyTextButton/CopyTextButton.stories.tsx

@@ -16,13 +16,13 @@
 
 import React from 'react';
 import CopyTextButton from '.';
-import { ApiProvider, errorApiRef, ApiRegistry } from 'api';
+import { ApiProvider, errorApiRef, ApiRegistry, ErrorApi } from 'api';
 
 export default {
   title: 'CopyTextButton',
   component: CopyTextButton,
   decorators: [
-    storyFn => {
+    (storyFn: () => JSX.Element) => {
       // TODO: move this to common storybook config, requires core package to be separate from components
       const registry = ApiRegistry.from([
         [
@@ -32,7 +32,7 @@ export default {
               // eslint-disable-next-line no-alert
               window.alert(`Component posted error, ${error}`);
             },
-          },
+          } as ErrorApi,
         ],
       ]);
       return <ApiProvider apis={registry} children={storyFn()} />;

packages/core/src/components/CopyTextButton/CopyTextButton.test.tsx

@@ -18,7 +18,7 @@ import React from 'react';
 import { render } from '@testing-library/react';
 import { wrapInThemedTestApp } from '@backstage/test-utils';
 import CopyTextButton from './CopyTextButton';
-import { ApiRegistry, errorApiRef, ApiProvider } from 'api';
+import { ApiRegistry, errorApiRef, ApiProvider, ErrorApi } from 'api';
 
 jest.mock('popper.js', () => {
   const PopperJS = jest.requireActual('popper.js');
@@ -44,7 +44,7 @@ const apiRegistry = ApiRegistry.from([
       post(error) {
         throw error;
       },
-    },
+    } as ErrorApi,
   ],
 ]);
 

packages/core/src/components/CopyTextButton/CopyTextButton.tsx

@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 
-import React, { FC, useRef, useState } from 'react';
+import React, { FC, useRef, useState, MouseEventHandler } from 'react';
 import { IconButton, makeStyles, Tooltip } from '@material-ui/core';
 import PropTypes from 'prop-types';
 import CopyIcon from '@material-ui/icons/FileCopy';
@@ -66,7 +66,7 @@ const CopyTextButton: FC<Props> = props => {
   const inputRef = useRef<HTMLInputElement>(null);
   const [open, setOpen] = useState(false);
 
-  const handleCopyClick = e => {
+  const handleCopyClick: MouseEventHandler = e => {
     e.stopPropagation();
     setOpen(true);
 

packages/core/src/components/ProgressBars/CircleProgress.tsx

@@ -55,7 +55,12 @@ const defaultProps = {
   max: 100,
 };
 
-export function getProgressColor(palette, value, inverse, max) {
+export function getProgressColor(
+  palette: BackstageTheme['palette'],
+  value: number,
+  inverse?: boolean,
+  max?: number,
+) {
   if (isNaN(value)) {
     return '#ddd';
   }
@@ -74,7 +79,7 @@ export function getProgressColor(palette, value, inverse, max) {
 
 const CircleProgress: FC<Props> = props => {
   const classes = useStyles(props);
-  const theme = useTheme();
+  const theme = useTheme<BackstageTheme>();
   const { value, fractional, inverse, unit, max } = {
     ...defaultProps,
     ...props,

packages/core/src/components/SortableTable/SortableTable.stories.tsx

@@ -33,7 +33,11 @@ const data = [
 const columns = [
   { id: 'id', label: 'ID' },
   { id: 'amount', disablePadding: false, numeric: true, label: 'AMOUNT' },
-  { id: 'status', label: 'STATUS', sortValue: row => row.statusValue },
+  {
+    id: 'status',
+    label: 'STATUS',
+    sortValue: (row: typeof data[0]) => row.statusValue,
+  },
 ];
 const footerData = [
   { id: 'total', amount: 4, statusValue: 2, status: <StatusError /> },

packages/core/src/components/StructuredMetadataTable/StructuredMetadataTable.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 '../../layout/InfoCard';
 import { Grid } from '@material-ui/core';
 import StructuredMetadataTable from '.';
@@ -41,7 +41,7 @@ export default {
   component: StructuredMetadataTable,
 };
 
-const Wrapper = ({ children }) => (
+const Wrapper: FC<{}> = ({ children }) => (
   <Grid container spacing={4}>
     <Grid item>{children}</Grid>
   </Grid>

packages/core/src/components/SupportButton/SupportButton.tsx

@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 
-import React, { FC, Fragment, useState } from 'react';
+import React, { FC, Fragment, useState, MouseEventHandler } from 'react';
 import {
   Button,
   Link,
@@ -58,10 +58,10 @@ const SupportButton: FC<Props> = ({
   // TODO: get plugin manifest with hook
 
   const [popoverOpen, setPopoverOpen] = useState(false);
-  const [anchorEl, setAnchorEl] = useState(null);
+  const [anchorEl, setAnchorEl] = useState<Element | null>(null);
   const classes = useStyles();
 
-  const onClickHandler = event => {
+  const onClickHandler: MouseEventHandler = event => {
     setAnchorEl(event.currentTarget);
     setPopoverOpen(true);
   };

packages/core/src/components/WarningPanel/WarningPanel.tsx

@@ -15,17 +15,20 @@
  */
 
 import React, { FC } from 'react';
-import { Typography, withStyles, makeStyles } from '@material-ui/core';
+import { Typography, makeStyles } from '@material-ui/core';
 import { BackstageTheme } from '@backstage/theme';
 import ErrorOutline from '@material-ui/icons/ErrorOutline';
 
-const errorOutlineStyles = theme => ({
+const useErrorOutlineStyles = makeStyles<BackstageTheme>(theme => ({
   root: {
     marginRight: theme.spacing(1),
     fill: theme.palette.warningText,
   },
-});
-const ErrorOutlineStyled = withStyles(errorOutlineStyles)(ErrorOutline);
+}));
+const ErrorOutlineStyled = () => {
+  const classes = useErrorOutlineStyles();
+  return <ErrorOutline classes={classes} />;
+};
 
 const useStyles = makeStyles<BackstageTheme>(theme => ({
   message: {

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

@@ -68,7 +68,7 @@ const TabbedCard: FC<Props> = ({
 
   const handleChange = onChange
     ? onChange
-    : (_ev, newSelectedIndex: number) => selectIndex(newSelectedIndex);
+    : (_ev: unknown, newSelectedIndex: number) => selectIndex(newSelectedIndex);
 
   let selectedTabContent: ReactNode;
   if (!value) {