Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Fix UI Header Response to Browser and Crossfeed Logo Routing #78

Merged
merged 16 commits into from
Mar 27, 2024
Merged

Fix UI Header Response to Browser and Crossfeed Logo Routing #78

Show file tree
Hide file tree
Changes from 4 commits
Commits
Show all changes
16 commits
Select commit Hold shift + click to select a range
4b3c11c
Fixed header response to browser, NavLink underline styling, and Cros…
chrtorres Mar 14, 2024
268c984
Removed unused variables
chrtorres Mar 18, 2024
dd36b9c
Removed Spacing errors
chrtorres Mar 18, 2024
d23c659
Corrected unused variables and removed filter org logic
chrtorres Mar 18, 2024
3c6ddf1
Corrected lint issues: Unused Varibales
chrtorres Mar 19, 2024
aa58966
Updated header tests/snapshots to reflect removed Nav items
chrtorres Mar 19, 2024
bad54cb
Merge branch 'develop' into ui-header-issue16
chrtorres Mar 20, 2024
dfb5105
Fix header wide screen issue and drawer on click issue
ameliav Mar 22, 2024
821fa6f
Revert code to add back orgs dropdown in Header.tsx
ameliav Mar 22, 2024
6a9d857
Update Header with responsive design
ameliav Mar 25, 2024
239bbea
Merge branch 'develop' into ui-header-issue16
ameliav Mar 26, 2024
24abfec
Update frontend tests
ameliav Mar 26, 2024
2bacc0d
Update user type permission views in Header.tsx
ameliav Mar 27, 2024
e3c1261
Update user type permission views in Users.tsx
ameliav Mar 27, 2024
65e3e86
Update alert message in OrganizationList.tsx
ameliav Mar 27, 2024
4e6cf87
Remove unused imports and variables from header.spec.tsx
ameliav Mar 27, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
262 changes: 17 additions & 245 deletions frontend/src/components/Header.tsx
View file
Open in desktop
Matthew-Grayson marked this conversation as resolved.
Show resolved Hide resolved
Original file line number Diff line number Diff line change
Expand Up @@ -8,23 +8,22 @@
Drawer,
ListItem,
List,
TextField,
useMediaQuery,

Check warning on line 11 in frontend/src/components/Header.tsx

View workflow job for this annotation

GitHub Actions / lint 

'useMediaQuery' is defined but never used
useTheme
} from '@mui/material';
import {
Menu as MenuIcon,
AccountCircle as UserIcon,

Check warning on line 16 in frontend/src/components/Header.tsx

View workflow job for this annotation

GitHub Actions / lint 

'UserIcon' is defined but never used
ArrowDropDown

Check warning on line 17 in frontend/src/components/Header.tsx

View workflow job for this annotation

GitHub Actions / lint 

'ArrowDropDown' is defined but never used
} from '@mui/icons-material';
import { NavItem } from './NavItem';
import { useRouteMatch } from 'react-router-dom';

Check warning on line 20 in frontend/src/components/Header.tsx

View workflow job for this annotation

GitHub Actions / lint 

'useRouteMatch' is defined but never used
import { useAuthContext } from 'context';
import logo from '../assets/crossfeed.svg';
import { withSearch } from '@elastic/react-search-ui';
import { ContextType } from 'context/SearchProvider';
import { SearchBar } from 'components';
import { Autocomplete } from '@mui/material';

Check warning on line 26 in frontend/src/components/Header.tsx

View workflow job for this annotation

GitHub Actions / lint 

'Autocomplete' is defined but never used
import { Organization, OrganizationTag } from 'types';

const PREFIX = 'Header';
Expand All @@ -33,11 +32,10 @@
inner: `${PREFIX}-inner`,
menuButton: `${PREFIX}-menuButton`,
logo: `${PREFIX}-logo`,
logoBox: `${PREFIX}-logoBox`,
spacing: `${PREFIX}-spacing`,
activeLink: `${PREFIX}-activeLink`,
activeMobileLink: `${PREFIX}-activeMobileLink`,
link: `${PREFIX}-link`,
userLink: `${PREFIX}-userLink`,
lgNav: `${PREFIX}-lgNav`,
mobileNav: `${PREFIX}-mobileNav`,
selectOrg: `${PREFIX}-selectOrg`,
Expand All @@ -46,44 +44,31 @@

const Root = styled('div')(({ theme }) => ({
[`.${classes.inner}`]: {
maxWidth: 1440,
width: '250%',
maxWidth: '1440px',
width: '100%',
margin: '0 auto'
},

[`.${classes.menuButton}`]: {
marginLeft: theme.spacing(2),
display: 'flex',
[theme.breakpoints.up('sm')]: {
[theme.breakpoints.up('xl')]: {
display: 'none'
}
},

[`.${classes.logo}`]: {
width: 150,
minWidth: 150,
padding: theme.spacing(),
paddingLeft: 0,
[theme.breakpoints.down('xl')]: {
display: 'flex'
}
},

[`.${classes.spacing}`]: {
flexGrow: 1
},

[`.${classes.activeLink}`]: {
':after': {
content: "''",
position: 'absolute',
bottom: 0,
left: 0,
width: '100%',
height: 2,
backgroundColor: 'white'
}
},

[`.${classes.activeMobileLink}`]: {
fontWeight: 700,
'&:after': {
Expand All @@ -107,23 +92,6 @@
borderBottom: '2px solid transparent',
fontWeight: 600
},

[`.${classes.userLink}`]: {
[theme.breakpoints.down('md')]: {
display: 'flex'
},
[theme.breakpoints.up('lg')]: {
display: 'flex',
alignItems: 'center',
marginLeft: '1rem',
'& svg': {
marginRight: theme.spacing()
},
border: 'none',
textDecoration: 'none'
}
},

[`.${classes.lgNav}`]: {
display: 'flex',
[theme.breakpoints.down('sm')]: {
Expand All @@ -133,39 +101,7 @@

[`.${classes.mobileNav}`]: {
padding: `${theme.spacing(2)} ${theme.spacing()}px`
},

Check failure on line 104 in frontend/src/components/Header.tsx

View workflow job for this annotation

GitHub Actions / lint 

Delete `,`

[`.${classes.selectOrg}`]: {
border: '1px solid #FFFFFF',
borderRadius: '5px',
width: '200px',
padding: '3px',
marginLeft: '20px',
'& svg': {
color: 'white'
},
'& input': {
color: 'white',
width: '100%'
},
'& input:focus': {
outlineWidth: 0
},
'& fieldset': {
borderStyle: 'none'
},
'& div div': {
paddingTop: '0 !important'
},
'& div div div': {
marginTop: '-3px !important'
},
height: '45px'
},

[` .${classes.option}`]: {
fontSize: 15
}
}));

const GLOBAL_ADMIN = 2;
Expand All @@ -187,11 +123,11 @@
const history = useHistory();
const location = useLocation();
const {
currentOrganization,

Check warning on line 126 in frontend/src/components/Header.tsx

View workflow job for this annotation

GitHub Actions / lint 

'currentOrganization' is assigned a value but never used
setOrganization,

Check warning on line 127 in frontend/src/components/Header.tsx

View workflow job for this annotation

GitHub Actions / lint 

'setOrganization' is assigned a value but never used
showAllOrganizations,

Check warning on line 128 in frontend/src/components/Header.tsx

View workflow job for this annotation

GitHub Actions / lint 

'showAllOrganizations' is assigned a value but never used
setShowAllOrganizations,

Check warning on line 129 in frontend/src/components/Header.tsx

View workflow job for this annotation

GitHub Actions / lint 

'setShowAllOrganizations' is assigned a value but never used
setShowMaps,

Check warning on line 130 in frontend/src/components/Header.tsx

View workflow job for this annotation

GitHub Actions / lint 

'setShowMaps' is assigned a value but never used
user,
logout,
apiGet
Expand All @@ -202,7 +138,6 @@
>([]);
const [tags, setTags] = useState<OrganizationTag[]>([]);
const theme = useTheme();
const isSmall = useMediaQuery(theme.breakpoints.down('md'));

let userLevel = 0;
if (user && user.isRegistered) {
Expand Down Expand Up @@ -246,24 +181,6 @@
users: ALL_USERS,
exact: false
},

/*
Hiding Feeds page until finished
{ title: 'Feeds',
path: '/feeds',
users: ALL_USERS,
exact: false
},*/

/*
Hiding Reports page until finished
{
title: 'Reports',
path: '/reports',
users: ALL_USERS,
exact: true
},*/

{
title: 'Scans',
path: '/scans',
Expand All @@ -272,68 +189,19 @@
}
].filter(({ users }) => (users & userLevel) > 0);

const userMenu: NavItemType = {
title: (
<div className={classes.userLink}>
<UserIcon /> My Account <ArrowDropDown />
</div>
),
path: '#',
exact: false,
nested: [
{
title: 'Manage Organizations',
path: '/organizations',
users: GLOBAL_ADMIN,
exact: true
},
// {
// title: 'My Organizations',
// path: '/organizations',
// users: STANDARD_USER,
// exact: true
// },
{
title: 'Manage Users',
path: '/users',
users: GLOBAL_ADMIN,
exact: true
},
{
title: 'My Settings',
path: '/settings',
users: ALL_USERS,
exact: true
},
{
title: 'Logout',
path: '/settings',
users: ALL_USERS,
onClick: logout,
exact: true
}
].filter(({ users }) => (users & userLevel) > 0)
};

const userItemsSmall: NavItemType[] = [
const userItems: NavItemType[] = [
{
title: 'My Account',
path: '#',
users: ALL_USERS,
exact: true
exact: false
},
{
title: 'Manage Organizations',
path: '/organizations',
users: GLOBAL_ADMIN,
exact: true
},
// {
// title: 'My Organizations',
// path: '/organizations',
// users: STANDARD_USER,
// exact: true
// },
{
title: 'Manage Users',
path: '/users',
Expand All @@ -355,20 +223,10 @@
}
].filter(({ users }) => (users & userLevel) > 0);

const orgPageMatch = useRouteMatch('/organizations/:id');

const desktopNavItems: JSX.Element[] = navItems.map((item) => (
<NavItem key={item.title.toString()} {...item} />
));

const navItemsToUse = () => {
if (isSmall) {
return userItemsSmall;
} else {
return navItems;
}
};

return (
<Root>
<AppBar position="static" elevation={0}>
Expand All @@ -382,7 +240,6 @@
/>
</Link>
<div className={classes.lgNav}>{desktopNavItems.slice()}</div>

<div className={classes.spacing} />

{userLevel > 0 && (
Expand All @@ -399,113 +256,28 @@
});
}}
/>
{organizations.length > 1 && (
<>
<div className={classes.spacing} />
<Autocomplete
isOptionEqualToValue={(option, value) =>
option?.name === value?.name
}
options={[{ name: 'All Organizations' }].concat(
organizations
)}
autoComplete={false}
className={classes.selectOrg}
classes={{
option: classes.option
}}
value={
showAllOrganizations
? { name: 'All Organizations' }
: currentOrganization ?? undefined
}
filterOptions={(options, state) => {
// If already selected, show all
if (
options.find(
(option) =>
option?.name.toLowerCase() ===
state.inputValue.toLowerCase()
)
) {
return options;
}
return options.filter(
(option) =>
option?.name
.toLowerCase()
.includes(state.inputValue.toLowerCase())
);
}}
disableClearable
blurOnSelect
selectOnFocus
getOptionLabel={(option) => option!.name}
renderOption={(props, option) => (
<li {...props}>{option!.name}</li>
)}
onChange={(
event: any,
value: Organization | { name: string } | undefined
) => {
if (value && 'id' in value) {
setOrganization(value);
setShowAllOrganizations(false);
if (value.name === 'Election') {
setShowMaps(true);
} else {
setShowMaps(false);
}

// Check if we're on an organization page and, if so, update it to the new organization
if (orgPageMatch !== null) {
if (!tags.find((e) => e.id === value.id)) {
history.push(`/organizations/${value.id}`);
}
}
} else {
setShowAllOrganizations(true);
setShowMaps(false);
}
}}
renderInput={(params) => (
<TextField
{...params}
variant="outlined"
inputProps={{
...params.inputProps,
id: 'autocomplete-input',
autoComplete: 'new-password' // disable autocomplete and autofill
}}
/>
)}
/>
</>
)}
{isSmall ? null : <NavItem {...userMenu} />}
<IconButton
edge="start"
className={classes.menuButton}
aria-label="toggle mobile menu"
color="inherit"
onClick={() => setNavOpen((open) => !open)}
>
<MenuIcon />
</IconButton>
</>
)}
<IconButton
edge="start"
className={classes.menuButton}
aria-label="toggle mobile menu"
color="inherit"
onClick={() => setNavOpen((open) => !open)}
>
<MenuIcon />
</IconButton>
</Toolbar>
</div>
</AppBar>

<Drawer
anchor="right"
open={navOpen}
onClose={() => setNavOpen(false)}
data-testid="mobilenav"
>
<List className={classes.mobileNav}>
{navItemsToUse().map(({ title, path, nested, onClick }) => (
{userItems.map(({ title, path, nested, onClick }) => (
<React.Fragment key={title.toString()}>
{path && (
<ListItem
Expand Down
Loading
Loading