Remove usage of defaultProps in Search

.changelog/1414.internal.md

@@ -0,0 +1 @@
+Remove usage of deprecated React API

src/app/components/Search/SearchSuggestionsButtons.tsx

@@ -1,7 +1,7 @@
 import { FC } from 'react'
 import Typography from '@mui/material/Typography'
 import { styled } from '@mui/material/styles'
-import Button from '@mui/material/Button'
+import Button, { ButtonProps } from '@mui/material/Button'
 import { Trans, useTranslation } from 'react-i18next'
 import { COLORS } from '../../../styles/theme/colors'
 import WidgetsIcon from '@mui/icons-material/Widgets'
@@ -12,18 +12,18 @@ import { searchSuggestionTerms } from './search-utils'
 import { OptionalBreak } from '../OptionalBreak'
 import { SearchScope } from '../../../types/searchScope'
 
-const PlainTextButton = styled(Button)({
+const StyledPlainTextButton = styled(Button)({
   fontSize: 'inherit',
   textTransform: 'none',
   paddingLeft: 0,
   paddingRight: 0,
   minWidth: 0,
   height: '1em',
 })
-PlainTextButton.defaultProps = {
-  variant: 'text',
-  color: 'inherit',
-}
+
+const PlainTextButton = (props: ButtonProps) => (
+  <StyledPlainTextButton variant="text" color="inherit" {...props} />
+)
 
 export const SuggestionButton = styled(PlainTextButton)({
   gap: '0.2ch', // Space after icon

src/app/components/Search/index.tsx

@@ -3,7 +3,7 @@ import { useNavigate, useSearchParams } from 'react-router-dom'
 import TextField, { textFieldClasses } from '@mui/material/TextField'
 import InputAdornment, { inputAdornmentClasses } from '@mui/material/InputAdornment'
 import { styled } from '@mui/material/styles'
-import Button from '@mui/material/Button'
+import Button, { ButtonProps } from '@mui/material/Button'
 import Box from '@mui/material/Box'
 import SearchIcon from '@mui/icons-material/Search'
 import { useTranslation } from 'react-i18next'
@@ -70,7 +70,7 @@ const SearchForm = styled('form', {
 
 interface SearchButtonProps extends StyledBaseProps {}
 
-export const SearchButton = styled(Button, {
+export const StyledSearchButton = styled(Button, {
   shouldForwardProp: (prop: PropertyKey) =>
     !(['searchVariant'] as (keyof SearchButtonProps)[]).includes(prop as keyof SearchButtonProps),
 })<SearchButtonProps>(({ theme, searchVariant }) => ({
@@ -90,10 +90,10 @@ export const SearchButton = styled(Button, {
       }
     : {}),
 }))
-SearchButton.defaultProps = {
-  variant: 'contained',
-  color: 'primary',
-}
+
+export const SearchButton = (props: ButtonProps & SearchButtonProps) => (
+  <StyledSearchButton variant="contained" color="primary" {...props} />
+)
 
 export interface SearchProps {
   scope?: SearchScope

src/app/pages/SearchResultsPage/ResultsGroupByType.tsx

@@ -14,16 +14,6 @@ interface Props<T> {
   linkLabel: string
 }
 
-export const ViewResultButton = (() => {
-  const ViewResultButton = styled(Button)({})
-  ViewResultButton.defaultProps = {
-    variant: 'contained',
-    color: 'primary',
-  }
-  // Type cast is needed because styled type breaks `<ViewResultButton component={RouterLink}`
-  return ViewResultButton as typeof Button
-})()
-
 /**
  * Component for displaying search results of the same type, from the same network.
  *
@@ -51,9 +41,9 @@ export function ResultsGroupByType<T>({ title, results, resultComponent, link, l
         <div key={i}>
           {resultComponent(item)}
           <Box sx={{ display: 'flex', justifyContent: 'center', mt: 5 }}>
-            <ViewResultButton component={RouterLink} to={link(item)}>
+            <Button variant="contained" color="primary" component={RouterLink} to={link(item)}>
               {linkLabel}
-            </ViewResultButton>
+            </Button>
           </Box>
           {i < results.length - 1 && <Divider variant="card" />}
         </div>

src/stories/ButtonsShowroom.stories.tsx

@@ -3,7 +3,6 @@ import { SearchButton } from '../app/components/Search'
 import { SuggestionButton } from '../app/components/Search/SearchSuggestionsButtons'
 import { Select } from '../app/components/Select'
 import { ExploreBtn, ZoomOutBtn } from '../app/pages/HomePage/Graph/ParaTimeSelector'
-import { ViewResultButton } from '../app/pages/SearchResultsPage/ResultsGroupByType'
 import { LoadMoreButton } from '../app/components/LoadMoreButton'
 import { withRouter } from 'storybook-addon-react-router-v6'
 import WidgetsIcon from '@mui/icons-material/Widgets'
@@ -17,7 +16,6 @@ const Template: StoryFn = () => {
   return (
     <div>
       <SearchButton searchVariant="button">SearchButton</SearchButton>
-      <ViewResultButton>ViewResultButton</ViewResultButton>
       <SuggestionButton>
         <WidgetsIcon sx={{ fontSize: '18px' }} /> SuggestionButton
       </SuggestionButton>