16006182009

Committed 01 Jul 2025 05:32PM UTC coverage: 62.703% (-8.6%) from 71.278%

Build # 16006182009

Build Type

Pull #756

github

Committed by

web-flow

Commit Message

Merge pull request #755 from CBIIT/revert-omb-date

revert: OMB expiration update

Pull Request Pull Request #756: Sync 3.4.0 with 3.3.0

Run Details

3560 of 6102 branches covered (58.34%)

Branch coverage included in aggregate %.

4920 of 7422 relevant lines covered (66.29%)

227.7 hits per line

Source File
Press 'n' to go to next uncovered line, 'b' for previous

23.53

/src/components/Header/components/NavbarDesktopDropdown.tsx

import { Button, styled } from "@mui/material";
import Grid from "@mui/material/Unstable_Grid2";
import { Link } from "react-router-dom";
import { Status, useAuthContext } from "../../Contexts/AuthContext";
import { ActionId, HeaderLinks } from "../../../config/HeaderConfig";
import SuspenseLoader from "../../SuspenseLoader";
import { hasPermission, Permissions } from "../../../config/AuthPermissions";

const Dropdown = styled("div")({
  left: 0,
  right: 0,
  width: "100%",
  background: "#1F4671",
  zIndex: 1100,
  display: "block",
  position: "absolute",
  paddingTop: "35px",
  paddingBottom: "12px",
  "&.invisible": {
    visibility: "hidden",
  },
});

const StyledGridContainer = styled(Grid)({
  margin: "0 auto",
  textAlign: "left",
  position: "relative",
  maxWidth: "1400px",
  padding: "0 16px",
  "& .dropdownList": {
    padding: 0,
    marginTop: 0,
    marginBottom: "45px",
    listStyle: "none",
  },
  "& .gridItem": {
    paddingLeft: "12px",
    paddingRight: "12px",
  },
  "& .dropdownListItem": {
    padding: 0,
    margin: 0,
    lineHeight: "22px",
    height: "22px",
  },
  "& .dropdownItem": {
    padding: "0",
    textAlign: "left",
    fontFamily: "'Poppins', sans-serif",
    fontStyle: "normal",
    fontWeight: 600,
    fontSize: "20px",
    lineHeight: "22px",
    color: "#FFFFFF",
    textDecoration: "none",
    cursor: "pointer",
    whiteSpace: "pre-line",
    "&:hover": {
      textDecoration: "underline",
    },
  },
  "& a.dropdownItem": {
    display: "inline-block",
    padding: "0",
  },
  "& .dropdownItemButton": {
    textTransform: "none",
    paddingLeft: 0,
    "&:hover": {
      background: "transparent",
    },
  },
  "#navbar-dropdown-item-name-logout": {
    maxWidth: "200px",
  },
});

type Props = {
  clickedTitle: string;
  onTitleClick?: (title: string) => void;
  onItemClick?: (item: ActionId) => void;
};

const NavbarDesktopDropdown = ({ clickedTitle, onTitleClick, onItemClick }: Props) => {
  const { user, status: AuthStatus } = useAuthContext();

  const checkPermissions = (permissions: AuthPermissions[]) => {
    if (!permissions?.length) {
      return true; // No permissions required
    }

    return permissions.every((permission) => {
      const [entityRaw, actionRaw] = permission.split(":", 2);

      if (!entityRaw || !actionRaw) {
        return false;
      }

      const entity = entityRaw as keyof Permissions;
      const action = actionRaw as Permissions[keyof Permissions]["action"];

      return hasPermission(user, entity, action, null, true);
    });
  };

  if (AuthStatus === Status.LOADING) {
    return <SuspenseLoader />;
  }

  const dropdownLinks: NavBarItem | undefined = HeaderLinks.find(
    (link) => link.name === clickedTitle
  );

  // Get completely empty columns due to insufficient permissions
  const emptyColumns =
    dropdownLinks?.columns?.filter(
      (c) => c.some((r) => r.permissions) && c.every((r) => !checkPermissions(r.permissions || []))
    ) || [];

  return (
    <Dropdown className={clickedTitle === "" ? "invisible" : ""}>
      <StyledGridContainer container>
        {clickedTitle !== ""
          ? dropdownLinks?.columns?.map((column, columnIdx) => {
              if (!column?.length || emptyColumns.includes(column)) {
                return null;
              }

              return (
                // eslint-disable-next-line react/no-array-index-key
                <Grid xs={3} key={`column-${columnIdx}`}>
                  {column.map((dropItem, rowIdx) => {
                    const hasEveryPermission = checkPermissions(dropItem?.permissions);
                    if (!hasEveryPermission) {
                      // eslint-disable-next-line react/no-array-index-key
                      return <Grid xs={3} key={`empty-${columnIdx}-${rowIdx}`} />;
                    }

                    if (dropItem.link) {
                      return (
                        <Grid xs={3} key={dropItem.id} className="gridItem">
                          <ul className="dropdownList">
                            <li className="dropdownListItem">
                              <Link
                                target={
                                  dropItem.link.startsWith("https://") ||
                                  dropItem.link.endsWith(".pdf")
                                    ? "_blank"
                                    : "_self"
                                }
                                id={dropItem.id}
                                to={dropItem.link}
                                className="dropdownItem"
                                onClick={() => onTitleClick("")}
                              >
                                {dropItem.name}
                                {dropItem.text && (
                                  <div className="dropdownItemText">{dropItem.text}</div>
                                )}
                              </Link>
                            </li>
                          </ul>
                        </Grid>
                      );
                    }

                    return (
                      <Grid xs={3} key={dropItem.id} className="gridItem">
                        <ul className="dropdownList">
                          <li className="dropdownListItem">
                            <Button
                              id={dropItem.id}
                              key={dropItem.id}
                              className="dropdownItem dropdownItemButton"
                              onClick={() => onItemClick?.(dropItem.actionId as ActionId)}
                            >
                              {dropItem.name}
                            </Button>
                          </li>
                        </ul>
                      </Grid>
                    );
                  })}
                </Grid>
              );
            })
          : null}
      </StyledGridContainer>
    </Dropdown>
  );
};

export default NavbarDesktopDropdown;

1	import { Button, styled } from "@mui/material";
2	import Grid from "@mui/material/Unstable_Grid2";
3	import { Link } from "react-router-dom";
4	import { Status, useAuthContext } from "../../Contexts/AuthContext";
5	import { ActionId, HeaderLinks } from "../../../config/HeaderConfig";
6	import SuspenseLoader from "../../SuspenseLoader";
7	import { hasPermission, Permissions } from "../../../config/AuthPermissions";
8
9	const Dropdown = styled("div")({	2✔
10	left: 0,
11	right: 0,
12	width: "100%",
13	background: "#1F4671",
14	zIndex: 1100,
15	display: "block",
16	position: "absolute",
17	paddingTop: "35px",
18	paddingBottom: "12px",
19	"&.invisible": {
20	visibility: "hidden",
21	},
22	});
23
24	const StyledGridContainer = styled(Grid)({	2✔
25	margin: "0 auto",
26	textAlign: "left",
27	position: "relative",
28	maxWidth: "1400px",
29	padding: "0 16px",
30	"& .dropdownList": {
31	padding: 0,
32	marginTop: 0,
33	marginBottom: "45px",
34	listStyle: "none",
35	},
36	"& .gridItem": {
37	paddingLeft: "12px",
38	paddingRight: "12px",
39	},
40	"& .dropdownListItem": {
41	padding: 0,
42	margin: 0,
43	lineHeight: "22px",
44	height: "22px",
45	},
46	"& .dropdownItem": {
47	padding: "0",
48	textAlign: "left",
49	fontFamily: "'Poppins', sans-serif",
50	fontStyle: "normal",
51	fontWeight: 600,
52	fontSize: "20px",
53	lineHeight: "22px",
54	color: "#FFFFFF",
55	textDecoration: "none",
56	cursor: "pointer",
57	whiteSpace: "pre-line",
58	"&:hover": {
59	textDecoration: "underline",
60	},
61	},
62	"& a.dropdownItem": {
63	display: "inline-block",
64	padding: "0",
65	},
66	"& .dropdownItemButton": {
67	textTransform: "none",
68	paddingLeft: 0,
69	"&:hover": {
70	background: "transparent",
71	},
72	},
73	"#navbar-dropdown-item-name-logout": {
74	maxWidth: "200px",
75	},
76	});
77
78	type Props = {
79	clickedTitle: string;
80	onTitleClick?: (title: string) => void;
81	onItemClick?: (item: ActionId) => void;
82	};
83
84	const NavbarDesktopDropdown = ({ clickedTitle, onTitleClick, onItemClick }: Props) => {	2✔
85	const { user, status: AuthStatus } = useAuthContext();	12✔
86
87	const checkPermissions = (permissions: AuthPermissions[]) => {	12✔
88	if (!permissions?.length) {	×
89	return true; // No permissions required	×
90	}
91
92	return permissions.every((permission) => {	×
93	const [entityRaw, actionRaw] = permission.split(":", 2);	×
94
95	if (!entityRaw \|\| !actionRaw) {	×
96	return false;	×
97	}
98
99	const entity = entityRaw as keyof Permissions;	×
100	const action = actionRaw as Permissions[keyof Permissions]["action"];	×
101
102	return hasPermission(user, entity, action, null, true);	×
103	});
104	};
105
106	if (AuthStatus === Status.LOADING) {	12✔
107	return <SuspenseLoader />;	×
108	}
109
110	const dropdownLinks: NavBarItem \| undefined = HeaderLinks.find(	12✔
111	(link) => link.name === clickedTitle	84✔
112	);
113
114	// Get completely empty columns due to insufficient permissions
115	const emptyColumns =
116	dropdownLinks?.columns?.filter(	12✔
117	(c) => c.some((r) => r.permissions) && c.every((r) => !checkPermissions(r.permissions \|\| []))	×
118	) \|\| [];
119
120	return (	12✔
121	<Dropdown className={clickedTitle === "" ? "invisible" : ""}>	6!
122	<StyledGridContainer container>
123	{clickedTitle !== ""	6!
124	? dropdownLinks?.columns?.map((column, columnIdx) => {
125	if (!column?.length \|\| emptyColumns.includes(column)) {	×
126	return null;	×
127	}
128
129	return (	×
130	// eslint-disable-next-line react/no-array-index-key
131	<Grid xs={3} key={`column-${columnIdx}`}>
132	{column.map((dropItem, rowIdx) => {
133	const hasEveryPermission = checkPermissions(dropItem?.permissions);	×
134	if (!hasEveryPermission) {	×
135	// eslint-disable-next-line react/no-array-index-key
136	return <Grid xs={3} key={`empty-${columnIdx}-${rowIdx}`} />;	×
137	}
138
139	if (dropItem.link) {	×
140	return (	×
141	<Grid xs={3} key={dropItem.id} className="gridItem">
142	<ul className="dropdownList">
143	<li className="dropdownListItem">
144	<Link
145	target={
146	dropItem.link.startsWith("https://") \|\|	×
147	dropItem.link.endsWith(".pdf")
148	? "_blank"
149	: "_self"
150	}
151	id={dropItem.id}
152	to={dropItem.link}
153	className="dropdownItem"
154	onClick={() => onTitleClick("")}	×
155	>
156	{dropItem.name}
157	{dropItem.text && (	×
158	<div className="dropdownItemText">{dropItem.text}</div>
159	)}
160	</Link>
161	</li>
162	</ul>
163	</Grid>
164	);
165	}
166
167	return (	×
168	<Grid xs={3} key={dropItem.id} className="gridItem">
169	<ul className="dropdownList">
170	<li className="dropdownListItem">
171	<Button
172	id={dropItem.id}
173	key={dropItem.id}
174	className="dropdownItem dropdownItemButton"
175	onClick={() => onItemClick?.(dropItem.actionId as ActionId)}	×
176	>
177	{dropItem.name}
178	</Button>
179	</li>
180	</ul>
181	</Grid>
182	);
183	})}
184	</Grid>
185	);
186	})
187	: null}
188	</StyledGridContainer>
189	</Dropdown>
190	);
191	};
192
193	export default NavbarDesktopDropdown;

CBIIT / crdc-datahub-ui / 16006182009

Source File Press 'n' to go to next uncovered line, 'b' for previous

Source File
Press 'n' to go to next uncovered line, 'b' for previous