M #~: Minor fix to empty card component (#2076)

src/fireedge/src/client/components/Cards/EmptyCard.js

@@ -16,46 +16,26 @@
 import { memo } from 'react'
 import PropTypes from 'prop-types'
 
-import { Card, CardHeader, Fade } from '@mui/material'
-import makeStyles from '@mui/styles/makeStyles'
-import { Tr } from 'client/components/HOC'
+import { styled, Card, CardHeader, Fade } from '@mui/material'
+import { Translate } from 'client/components/HOC'
 import { T } from 'client/constants'
 
-const useStyles = makeStyles((theme) => ({
-  root: {
-    height: '100%',
-  },
-  content: {
-    height: '100%',
-    minHeight: 140,
-    padding: theme.spacing(1),
-    textAlign: 'center',
-  },
+const Title = styled(CardHeader)(({ theme }) => ({
+  height: '100%',
+  minHeight: 140,
+  padding: theme.spacing(1),
+  textAlign: 'center',
 }))
 
-const EmptyCard = memo(({ title }) => {
-  const classes = useStyles()
-
-  return (
-    <Fade in unmountOnExit>
-      <Card className={classes.root} variant="outlined">
-        <CardHeader
-          subheader={Tr(title ?? T.Empty)}
-          className={classes.content}
-        />
-      </Card>
-    </Fade>
-  )
-})
-
-EmptyCard.propTypes = {
-  title: PropTypes.oneOfType([PropTypes.string, PropTypes.array]),
-}
-
-EmptyCard.defaultProps = {
-  title: undefined,
-}
+const EmptyCard = memo(({ title }) => (
+  <Fade in unmountOnExit>
+    <Card variant="outlined">
+      <Title subheader={<Translate word={title ?? T.Empty} />} />
+    </Card>
+  </Fade>
+))
 
+EmptyCard.propTypes = { title: PropTypes.string }
 EmptyCard.displayName = 'EmptyCard'
 
 export default EmptyCard

src/fireedge/src/client/components/FormControl/AutocompleteController.js

@@ -20,7 +20,7 @@ import { TextField, Chip, Autocomplete } from '@mui/material'
 import { useController } from 'react-hook-form'
 
 import { ErrorHelper } from 'client/components/FormControl'
-import { Tr, Translate } from 'client/components/HOC'
+import { Translate } from 'client/components/HOC'
 import { generateKey } from 'client/utils'
 
 const AutocompleteController = memo(
@@ -86,7 +86,7 @@ const AutocompleteController = memo(
                 <ErrorHelper label={error?.message ?? error[0]?.message}>
                   {tooltip &&
                     inputProps?.value?.length > 0 &&
-                    `. ${Tr(tooltip)}`}
+                    `. ${(<Translate word={tooltip} />)}`}
                 </ErrorHelper>
               )
             }