diff --git a/packages/core/src/components/CopyTextButton/CopyTextButton.stories.tsx b/packages/core/src/components/CopyTextButton/CopyTextButton.stories.tsx
index 7fd78f8057..e8e1317e4e 100644
--- a/packages/core/src/components/CopyTextButton/CopyTextButton.stories.tsx
+++ b/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 ;
diff --git a/packages/core/src/components/CopyTextButton/CopyTextButton.test.tsx b/packages/core/src/components/CopyTextButton/CopyTextButton.test.tsx
index 2abf9d0622..28aaf2f0c0 100644
--- a/packages/core/src/components/CopyTextButton/CopyTextButton.test.tsx
+++ b/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,
],
]);
diff --git a/packages/core/src/components/CopyTextButton/CopyTextButton.tsx b/packages/core/src/components/CopyTextButton/CopyTextButton.tsx
index 86c3778d26..62295eb0ce 100644
--- a/packages/core/src/components/CopyTextButton/CopyTextButton.tsx
+++ b/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 => {
const inputRef = useRef(null);
const [open, setOpen] = useState(false);
- const handleCopyClick = e => {
+ const handleCopyClick: MouseEventHandler = e => {
e.stopPropagation();
setOpen(true);
diff --git a/packages/core/src/components/ProgressBars/CircleProgress.tsx b/packages/core/src/components/ProgressBars/CircleProgress.tsx
index b1f857d0ac..b2da573de3 100644
--- a/packages/core/src/components/ProgressBars/CircleProgress.tsx
+++ b/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 => {
const classes = useStyles(props);
- const theme = useTheme();
+ const theme = useTheme();
const { value, fractional, inverse, unit, max } = {
...defaultProps,
...props,
diff --git a/packages/core/src/components/SortableTable/SortableTable.stories.tsx b/packages/core/src/components/SortableTable/SortableTable.stories.tsx
index 3938916156..2a903e1df7 100644
--- a/packages/core/src/components/SortableTable/SortableTable.stories.tsx
+++ b/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: },
diff --git a/packages/core/src/components/StructuredMetadataTable/StructuredMetadataTable.stories.tsx b/packages/core/src/components/StructuredMetadataTable/StructuredMetadataTable.stories.tsx
index 5a04520dd1..334219c881 100644
--- a/packages/core/src/components/StructuredMetadataTable/StructuredMetadataTable.stories.tsx
+++ b/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 }) => (
{children}
diff --git a/packages/core/src/components/SupportButton/SupportButton.tsx b/packages/core/src/components/SupportButton/SupportButton.tsx
index 076ec2d3c9..c884086bfa 100644
--- a/packages/core/src/components/SupportButton/SupportButton.tsx
+++ b/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 = ({
// TODO: get plugin manifest with hook
const [popoverOpen, setPopoverOpen] = useState(false);
- const [anchorEl, setAnchorEl] = useState(null);
+ const [anchorEl, setAnchorEl] = useState(null);
const classes = useStyles();
- const onClickHandler = event => {
+ const onClickHandler: MouseEventHandler = event => {
setAnchorEl(event.currentTarget);
setPopoverOpen(true);
};
diff --git a/packages/core/src/components/WarningPanel/WarningPanel.tsx b/packages/core/src/components/WarningPanel/WarningPanel.tsx
index 1d3b3e03db..a3e6ed6c78 100644
--- a/packages/core/src/components/WarningPanel/WarningPanel.tsx
+++ b/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(theme => ({
root: {
marginRight: theme.spacing(1),
fill: theme.palette.warningText,
},
-});
-const ErrorOutlineStyled = withStyles(errorOutlineStyles)(ErrorOutline);
+}));
+const ErrorOutlineStyled = () => {
+ const classes = useErrorOutlineStyles();
+ return ;
+};
const useStyles = makeStyles(theme => ({
message: {
diff --git a/packages/core/src/layout/TabbedCard/TabbedCard.tsx b/packages/core/src/layout/TabbedCard/TabbedCard.tsx
index bd7443e924..4dd1399fb0 100644
--- a/packages/core/src/layout/TabbedCard/TabbedCard.tsx
+++ b/packages/core/src/layout/TabbedCard/TabbedCard.tsx
@@ -68,7 +68,7 @@ const TabbedCard: FC = ({
const handleChange = onChange
? onChange
- : (_ev, newSelectedIndex: number) => selectIndex(newSelectedIndex);
+ : (_ev: unknown, newSelectedIndex: number) => selectIndex(newSelectedIndex);
let selectedTabContent: ReactNode;
if (!value) {