fix(striker-ui): add job icon with indicator to Header

striker-ui/components/Header.tsx

@@ -1,9 +1,16 @@
-import { useState } from 'react';
-import { styled } from '@mui/material/styles';
-import { AppBar, Box, Button } from '@mui/material';
+import { Assignment as AssignmentIcon } from '@mui/icons-material';
+import { AppBar, Box, Button, IconButton, styled } from '@mui/material';
+import { useRef, useState } from 'react';
+
+import { BORDER_RADIUS, OLD_ICON, RED } from '../lib/consts/DEFAULT_THEME';
 import { ICONS, ICON_SIZE } from '../lib/consts/ICONS';
-import { BORDER_RADIUS, RED } from '../lib/consts/DEFAULT_THEME';
+
 import AnvilDrawer from './AnvilDrawer';
+import FlexBox from './FlexBox';
+import IconWithIndicator, {
+  IconWithIndicatorForwardedRefContent,
+} from './IconWithIndicator';
+import JobSummary, { JobSummaryForwardedRefContent } from './JobSummary';
 
 const PREFIX = 'Header';
 
@@ -55,19 +62,34 @@ const StyledAppBar = styled(AppBar)(({ theme }) => ({
 }));
 
 const Header = (): JSX.Element => {
+  const jobIconRef = useRef<IconWithIndicatorForwardedRefContent>({});
+  const jobSummaryRef = useRef<JobSummaryForwardedRefContent>({});
+
   const [open, setOpen] = useState(false);
 
   const toggleDrawer = (): void => setOpen(!open);
 
   return (
+    <>
       <StyledAppBar>
         <Box display="flex" justifyContent="space-between" flexDirection="row">
-        <Box className={classes.barElement}>
+          <FlexBox row>
             <Button onClick={toggleDrawer}>
               <img alt="" src="/pngs/logo.png" width="160" height="40" />
             </Button>
+          </FlexBox>
+          <FlexBox className={classes.iconBox} row spacing={0}>
+            <Box>
+              <IconButton
+                onClick={({ currentTarget }) => {
+                  jobSummaryRef.current.setAnchor?.call(null, currentTarget);
+                  jobSummaryRef.current.setOpen?.call(null, true);
+                }}
+                sx={{ color: OLD_ICON, padding: '0 .1rem' }}
+              >
+                <IconWithIndicator icon={AssignmentIcon} ref={jobIconRef} />
+              </IconButton>
             </Box>
-        <Box className={`${classes.barElement} ${classes.iconBox}`}>
             {ICONS.map(
               (icon): JSX.Element => (
                 <a
@@ -88,10 +110,17 @@ const Header = (): JSX.Element => {
                 </a>
               ),
             )}
+          </FlexBox>
         </Box>
-      </Box>
-      <AnvilDrawer open={open} setOpen={setOpen} />
       </StyledAppBar>
+      <AnvilDrawer open={open} setOpen={setOpen} />
+      <JobSummary
+        onFetchSuccessAppend={(jobs) => {
+          jobIconRef.current.indicate?.call(null, Object.keys(jobs).length > 0);
+        }}
+        ref={jobSummaryRef}
+      />
+    </>
   );
 };