Add error counter to menu bar errors Report Button

client/components/Controllers/Table/Menu.tsx

@@ -12,13 +12,16 @@ export default function Menu() {
 
   const isTableUpdated = store.useStore(store.getIsTableOrResourceUpdated)
 
+  console.log('report', report)
+
   return (
     <menu.MenuBar fullWidth>
       <Box sx={{ width: '100%', display: 'flex', justifyContent: 'space-between' }}>
         <Box
           sx={{
             display: 'flex',
             flexDirection: 'row',
+            alignItems: 'center',
           }}
         >
           <menu.MetadataButton
@@ -31,6 +34,7 @@ export default function Menu() {
             active={panel === 'report'}
             onClick={() => store.togglePanel('report')}
             color="OKFNCoolGray"
+            numberErrors={report?.stats.errors}
           />
           <menu.SourceButton
             disabled={!source?.text}

client/components/Parts/Bars/Menu.tsx

@@ -50,6 +50,10 @@ export interface ButtonProps {
   onClick?: () => void
 }
 
+interface ErrorsReportProps extends ButtonProps {
+  numberErrors?: number
+}
+
 export function MetadataButton(props: ButtonProps) {
   const theme = useTheme()
   const onClick = props.onClick || noop
@@ -83,7 +87,7 @@ export function MetadataButton(props: ButtonProps) {
   )
 }
 
-export function ReportButton(props: ButtonProps) {
+export function ReportButton(props: ErrorsReportProps ) {
   const theme = useTheme()
   const onClick = props.onClick || noop
   useKeyPress(['alt.r'], (event) => {
@@ -111,6 +115,7 @@ export function ReportButton(props: ButtonProps) {
               color: props.enabled ? theme.palette.info.main : undefined,
             },
           }}
+          extraInfo={props.numberErrors}
         />
       </Box>
   )

client/components/Parts/Buttons/Icon.tsx

@@ -1,15 +1,17 @@
 import * as React from 'react'
 import Typography from '@mui/material/Typography'
 import Button, { ButtonProps } from '@mui/material/Button'
-
+import Box from '@mui/material/Box'
 interface IconButtonProps extends ButtonProps {
   Icon: React.ElementType
   label?: string
   small?: boolean
+  extraInfo?: string | number
 }
 
 export default function IconButton(props: IconButtonProps) {
-  const { Icon, label, small, ...others } = props
+  const { Icon, label, small, extraInfo, ...others } = props
+
   return (
     <Button
       fullWidth={!props.small}
@@ -24,6 +26,13 @@ export default function IconButton(props: IconButtonProps) {
       ) : (
         label
       )}
+      {extraInfo ? (
+        <Box sx={{ padding: '3px 5px', backgroundColor: '#FCF2F2', border: '1px solid #FECBCA', borderRadius: '3px', marginLeft: '5px' }}>
+          <Typography sx={{ fontSize: '9px', fontWeight: 300, color: (theme) => theme.palette.OKFNRed500.main  }}>
+            {extraInfo}
+          </Typography>
+        </Box>
+      ) : null}
     </Button>
   )
 }