10598024957

Committed 28 Aug 2024 01:47PM UTC coverage: 45.608% (+0.4%) from 45.202%

Build # 10598024957

Build Type

Pull #447

github

Committed by

web-flow

Commit Message

Merge 7749ef234 into 0787fe862

Pull Request Pull Request #447: CRDCDH-1444 QuickSight Dashboard Embedding

Run Details

1778 of 4474 branches covered (39.74%)

Branch coverage included in aggregate %.

50 of 88 new or added lines in 10 files covered. (56.82%)

1 existing line in 1 file now uncovered.

2672 of 5283 relevant lines covered (50.58%)

127.95 hits per line

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

3.68

/src/components/Header/HeaderTabletAndMobile.tsx

import React, { HTMLProps, useEffect, useState } from "react";
import { NavLink, Link, useNavigate, useLocation } from "react-router-dom";
import { styled } from "@mui/material";
import Logo from "./components/LogoMobile";
import menuClearIcon from "../../assets/header/Menu_Cancel_Icon.svg";
import rightArrowIcon from "../../assets/header/Right_Arrow.svg";
import leftArrowIcon from "../../assets/header/Left_Arrow.svg";
import { navMobileList, navbarSublists } from "../../config/globalHeaderData";
import { useAuthContext } from "../Contexts/AuthContext";
import GenericAlert from "../GenericAlert";
import APITokenDialog from "../../content/users/APITokenDialog";
import UploaderToolDialog from "../UploaderToolDialog";

const HeaderBanner = styled("div")({
  width: "100%",
});

const HeaderContainer = styled("div")({
  margin: "0 auto",
  paddingLeft: "16px",
  boxShadow: "-0.1px 6px 9px -6px rgba(0, 0, 0, 0.5)",
  "& .headerLowerContainer": {
    display: "flex",
    margin: "16px 0 4px 0",
    height: "51px",
  },
  "& .menuButton": {
    width: "89px",
    height: "45px",
    background: "#1F4671",
    borderRadius: "5px",
    fontFamily: "Open Sans",
    fontWeight: 700,
    fontSize: "20px",
    lineHeight: "45px",
    color: "#FFFFFF",
    textAlign: "center",
    "&:hover": {
      cursor: "pointer",
    },
  },
});

const NavMobileContainer = styled("div", {
  shouldForwardProp: (prop) => prop !== "display",
})<HTMLProps<HTMLDivElement> & { display: string }>(({ display }) => ({
  display,
  position: "absolute",
  left: 0,
  top: 0,
  height: "100%",
  width: "100%",
  zIndex: 1200,
}));

const MenuArea = styled("div")({
  height: "100%",
  width: "100%",
  display: "flex",
  "& .menuContainer": {
    background: "#ffffff",
    width: "300px",
    height: "100%",
    padding: "21px 16px",
  },
  "& .greyContainer": {
    width: "100%",
    height: "100%",
    background: "rgba(0,0,0,.2)",
  },
  "& .closeIcon": {
    height: "14px",
    marginBottom: "29px",
  },
  "& .closeIconImg": {
    float: "right",
    "&:hover": {
      cursor: "pointer",
    },
  },
  "& .backButton": {
    fontFamily: "Open Sans",
    fontWeight: 600,
    fontSize: "16px",
    lineHeight: "16px",
    color: "#007BBD",
    paddingLeft: "16px",
    background: `url(${leftArrowIcon}) left no-repeat`,
    "&:hover": {
      cursor: "pointer",
    },
  },
  "& .navMobileContainer": {
    padding: "24px 0 0 0",
    "& a": {
      textDecoration: "none",
      color: "#3D4551",
    },
  },
  "& .navMobileItem": {
    width: "268px",
    padding: "8px 24px 8px 16px",
    fontFamily: "Open Sans",
    fontWeight: 400,
    fontSize: "16px",
    lineHeight: "16px",
    borderTop: "1px solid #F0F0F0",
    borderBottom: "1px solid #F0F0F0",
    color: "#3D4551",
    "&:hover": {
      backgroundColor: "#f9f9f7",
    },
  },
  "& .SubItem": {
    paddingLeft: "24px",
  },
  "& .clickable": {
    background: `url(${rightArrowIcon}) 90% no-repeat`,
    cursor: "pointer",
  },
  "& .action": {
    cursor: "pointer",
  },
});

const Header = () => {
  const { isLoggedIn, user, logout } = useAuthContext();
  const navigate = useNavigate();
  const location = useLocation();

  const [navMobileDisplay, setNavMobileDisplay] = useState("none");
  const [openAPITokenDialog, setOpenAPITokenDialog] = useState<boolean>(false);
  const [uploaderToolOpen, setUploaderToolOpen] = useState<boolean>(false);
  const [selectedList, setSelectedList] = useState<NavBarItem[] | NavBarSubItem[]>(navMobileList);
  const [showLogoutAlert, setShowLogoutAlert] = useState<boolean>(false);
  const [restorePath, setRestorePath] = useState<string | null>(null);

  const displayName = user?.firstName || "N/A";

  const handleLogout = async () => {
    const logoutStatus = await logout?.();
    if (logoutStatus) {
      navigate("/");
      setShowLogoutAlert(true);
      setTimeout(() => setShowLogoutAlert(false), 10000);
    }
  };

  navbarSublists[displayName] = [
    {
      name: "User Profile",
      link: `/profile/${user?._id}`,
      id: "navbar-dropdown-item-user-profile",
      className: "navMobileSubItem",
    },
    {
      name: "Uploader CLI Tool",
      onClick: () => setUploaderToolOpen(true),
      id: "navbar-dropdown-item-uploader-tool",
      className: "navMobileSubItem action",
    },
    {
      name: "Logout",
      link: "/logout",
      id: "navbar-dropdown-item-logout",
      className: "navMobileSubItem",
    },
  ];

  if (user?.role === "Admin" || user?.role === "Organization Owner") {
    navbarSublists[displayName].splice(1, 0, {
      name: "Manage Users",
      link: "/users",
      id: "navbar-dropdown-item-user-manage",
      className: "navMobileSubItem",
    });
  }
  if (user?.role === "Admin") {
    navbarSublists[displayName].splice(1, 0, {
      name: "Manage Organizations",
      link: "/organizations",
      id: "navbar-dropdown-item-organization-manage",
      className: "navMobileSubItem",
    });
  }
  if (user?.role === "Submitter" || user?.role === "Organization Owner") {
    navbarSublists[displayName].splice(1, 0, {
      name: "API Token",
      onClick: () => setOpenAPITokenDialog(true),
      id: "navbar-dropdown-item-api-token",
      className: "navMobileSubItem action",
    });
  }

  const clickNavItem = (e) => {
    const clickTitle = e.target.innerText;
    setSelectedList(navbarSublists[clickTitle]);
  };

  useEffect(() => {
    if (!location?.pathname || location?.pathname === "/") {
      setRestorePath(null);
      return;
    }

    setRestorePath(location?.pathname);
  }, [location]);

  return (
    <>
      <GenericAlert open={showLogoutAlert}>
        <span>You have been logged out.</span>
      </GenericAlert>
      <HeaderBanner>
        <HeaderContainer>
          <Logo />
          <div className="headerLowerContainer">
            <div
              role="button"
              id="header-navbar-open-menu-button"
              tabIndex={0}
              className="menuButton"
              onKeyDown={(e) => {
                if (e.key === "Enter") {
                  setNavMobileDisplay("block");
                }
              }}
              onClick={() => setNavMobileDisplay("block")}
            >
              Menu
            </div>
          </div>
        </HeaderContainer>
      </HeaderBanner>
      <NavMobileContainer display={navMobileDisplay}>
        <MenuArea>
          <div className="menuContainer">
            <div
              role="button"
              id="navbar-close-navbar-button"
              tabIndex={0}
              className="closeIcon"
              onKeyDown={(e) => {
                if (e.key === "Enter") {
                  setNavMobileDisplay("none");
                }
              }}
              onClick={() => setNavMobileDisplay("none")}
            >
              <img className="closeIconImg" src={menuClearIcon} alt="menuClearButton" />
            </div>
            {selectedList !== navMobileList && (
              <div
                role="button"
                id="navbar-back-to-main-menu-button"
                tabIndex={0}
                className="backButton"
                onKeyDown={(e) => {
                  if (e.key === "Enter") {
                    setSelectedList(navMobileList);
                  }
                }}
                onClick={() => setSelectedList(navMobileList)}
              >
                Main Menu
              </div>
            )}
            <div className="navMobileContainer">
              {selectedList.map((navMobileItem) => {
                // If the user is not logged in and the item requires a role, don't show it
                if (
                  "roles" in navMobileItem &&
                  Array.isArray(navMobileItem?.roles) &&
                  !navMobileItem.roles.includes(user?.role)
                ) {
                  return null;
                }

                return (
                  <React.Fragment key={`mobile_${navMobileItem.id}`}>
                    {navMobileItem.className === "navMobileItem" && (
                      <NavLink
                        id={navMobileItem.id}
                        to={navMobileItem.link}
                        target={navMobileItem.link.startsWith("https://") ? "_blank" : "_self"}
                        onClick={() => setNavMobileDisplay("none")}
                      >
                        <div className="navMobileItem">{navMobileItem.name}</div>
                      </NavLink>
                    )}
                    {navMobileItem.className === "navMobileItem clickable" && (
                      <div
                        id={navMobileItem.id}
                        role="button"
                        tabIndex={0}
                        className="navMobileItem clickable"
                        onKeyDown={(e) => {
                          if (e.key === "Enter") {
                            clickNavItem(e);
                          }
                        }}
                        onClick={clickNavItem}
                      >
                        {navMobileItem.name}
                      </div>
                    )}
                    {navMobileItem.className === "navMobileSubItem action" &&
                    "onClick" in navMobileItem &&
                    typeof navMobileItem.onClick === "function" ? (
                      <div
                        id={navMobileItem.id}
                        role="button"
                        tabIndex={0}
                        className="navMobileItem SubItem action"
                        onKeyDown={(e) => {
                          if (e.key === "Enter") {
                            navMobileItem.onClick();
                          }
                        }}
                        onClick={() => navMobileItem.onClick()}
                      >
                        {navMobileItem.name}
                      </div>
                    ) : null}
                    {navMobileItem.className === "navMobileSubItem" && (
                      <Link
                        id={navMobileItem.id}
                        to={navMobileItem.link}
                        target={
                          navMobileItem.link.startsWith("https://") ||
                          navMobileItem.link.endsWith(".pdf")
                            ? "_blank"
                            : "_self"
                        }
                      >
                        <div
                          role="button"
                          tabIndex={0}
                          className="navMobileItem SubItem"
                          onKeyDown={(e) => {
                            if (e.key === "Enter") {
                              setNavMobileDisplay("none");
                              if (navMobileItem.name === "Logout") {
                                handleLogout();
                                setSelectedList(navMobileList);
                              }
                            }
                          }}
                          onClick={() => {
                            setNavMobileDisplay("none");
                            if (navMobileItem.name === "Logout") {
                              handleLogout();
                              setSelectedList(navMobileList);
                            }
                          }}
                        >
                          {navMobileItem.name}
                        </div>
                      </Link>
                    )}
                    {navMobileItem.className === "navMobileSubTitle" && (
                      <div className="navMobileItem">{navMobileItem.name}</div>
                    )}
                  </React.Fragment>
                );
              })}
              {/* eslint-disable-next-line no-nested-ternary */}
              {selectedList === navMobileList ? (
                isLoggedIn ? (
                  <div
                    id="navbar-dropdown-name"
                    role="button"
                    tabIndex={0}
                    className="navMobileItem clickable"
                    onKeyDown={(e) => {
                      if (e.key === "Enter") {
                        clickNavItem(e);
                      }
                    }}
                    onClick={clickNavItem}
                  >
                    {displayName}
                  </div>
                ) : (
                  <Link
                    id="navbar-link-login"
                    to="/login"
                    state={{ redirectURLOnLoginSuccess: restorePath }}
                  >
                    <div
                      role="button"
                      tabIndex={0}
                      className="navMobileItem"
                      onKeyDown={(e) => {
                        if (e.key === "Enter") {
                          setNavMobileDisplay("none");
                        }
                      }}
                      onClick={() => setNavMobileDisplay("none")}
                    >
                      Login
                    </div>
                  </Link>
                )
              ) : null}
            </div>
          </div>
          <div
            role="button"
            id="navbar-close-navbar-grey-section"
            tabIndex={0}
            className="greyContainer"
            onKeyDown={(e) => {
              if (e.key === "Enter") {
                setNavMobileDisplay("none");
              }
            }}
            onClick={() => setNavMobileDisplay("none")}
            aria-label="greyContainer"
          />
        </MenuArea>
        <APITokenDialog open={openAPITokenDialog} onClose={() => setOpenAPITokenDialog(false)} />
        <UploaderToolDialog open={uploaderToolOpen} onClose={() => setUploaderToolOpen(false)} />
      </NavMobileContainer>
    </>
  );
};

export default Header;

1	import React, { HTMLProps, useEffect, useState } from "react";
2	import { NavLink, Link, useNavigate, useLocation } from "react-router-dom";
3	import { styled } from "@mui/material";
4	import Logo from "./components/LogoMobile";
5	import menuClearIcon from "../../assets/header/Menu_Cancel_Icon.svg";
6	import rightArrowIcon from "../../assets/header/Right_Arrow.svg";
7	import leftArrowIcon from "../../assets/header/Left_Arrow.svg";
8	import { navMobileList, navbarSublists } from "../../config/globalHeaderData";
9	import { useAuthContext } from "../Contexts/AuthContext";
10	import GenericAlert from "../GenericAlert";
11	import APITokenDialog from "../../content/users/APITokenDialog";
12	import UploaderToolDialog from "../UploaderToolDialog";
13
14	const HeaderBanner = styled("div")({	2✔
15	width: "100%",
16	});
17
18	const HeaderContainer = styled("div")({	2✔
19	margin: "0 auto",
20	paddingLeft: "16px",
21	boxShadow: "-0.1px 6px 9px -6px rgba(0, 0, 0, 0.5)",
22	"& .headerLowerContainer": {
23	display: "flex",
24	margin: "16px 0 4px 0",
25	height: "51px",
26	},
27	"& .menuButton": {
28	width: "89px",
29	height: "45px",
30	background: "#1F4671",
31	borderRadius: "5px",
32	fontFamily: "Open Sans",
33	fontWeight: 700,
34	fontSize: "20px",
35	lineHeight: "45px",
36	color: "#FFFFFF",
37	textAlign: "center",
38	"&:hover": {
39	cursor: "pointer",
40	},
41	},
42	});
43
44	const NavMobileContainer = styled("div", {	2✔
45	shouldForwardProp: (prop) => prop !== "display",	2✔
46	})<HTMLProps<HTMLDivElement> & { display: string }>(({ display }) => ({	×
47	display,
48	position: "absolute",
49	left: 0,
50	top: 0,
51	height: "100%",
52	width: "100%",
53	zIndex: 1200,
54	}));
55
56	const MenuArea = styled("div")({	2✔
57	height: "100%",
58	width: "100%",
59	display: "flex",
60	"& .menuContainer": {
61	background: "#ffffff",
62	width: "300px",
63	height: "100%",
64	padding: "21px 16px",
65	},
66	"& .greyContainer": {
67	width: "100%",
68	height: "100%",
69	background: "rgba(0,0,0,.2)",
70	},
71	"& .closeIcon": {
72	height: "14px",
73	marginBottom: "29px",
74	},
75	"& .closeIconImg": {
76	float: "right",
77	"&:hover": {
78	cursor: "pointer",
79	},
80	},
81	"& .backButton": {
82	fontFamily: "Open Sans",
83	fontWeight: 600,
84	fontSize: "16px",
85	lineHeight: "16px",
86	color: "#007BBD",
87	paddingLeft: "16px",
88	background: `url(${leftArrowIcon}) left no-repeat`,
89	"&:hover": {
90	cursor: "pointer",
91	},
92	},
93	"& .navMobileContainer": {
94	padding: "24px 0 0 0",
95	"& a": {
96	textDecoration: "none",
97	color: "#3D4551",
98	},
99	},
100	"& .navMobileItem": {
101	width: "268px",
102	padding: "8px 24px 8px 16px",
103	fontFamily: "Open Sans",
104	fontWeight: 400,
105	fontSize: "16px",
106	lineHeight: "16px",
107	borderTop: "1px solid #F0F0F0",
108	borderBottom: "1px solid #F0F0F0",
109	color: "#3D4551",
110	"&:hover": {
111	backgroundColor: "#f9f9f7",
112	},
113	},
114	"& .SubItem": {
115	paddingLeft: "24px",
116	},
117	"& .clickable": {
118	background: `url(${rightArrowIcon}) 90% no-repeat`,
119	cursor: "pointer",
120	},
121	"& .action": {
122	cursor: "pointer",
123	},
124	});
125
126	const Header = () => {	2✔
NEW 127	const { isLoggedIn, user, logout } = useAuthContext();	×
NEW 128	const navigate = useNavigate();	×
NEW 129	const location = useLocation();	×
130
131	const [navMobileDisplay, setNavMobileDisplay] = useState("none");	×
132	const [openAPITokenDialog, setOpenAPITokenDialog] = useState<boolean>(false);	×
133	const [uploaderToolOpen, setUploaderToolOpen] = useState<boolean>(false);	×
NEW 134	const [selectedList, setSelectedList] = useState<NavBarItem[] \| NavBarSubItem[]>(navMobileList);	×
135	const [showLogoutAlert, setShowLogoutAlert] = useState<boolean>(false);	×
136	const [restorePath, setRestorePath] = useState<string \| null>(null);	×
137
NEW 138	const displayName = user?.firstName \|\| "N/A";	×
139
140	const handleLogout = async () => {	×
NEW 141	const logoutStatus = await logout?.();	×
142	if (logoutStatus) {	×
143	navigate("/");	×
144	setShowLogoutAlert(true);	×
145	setTimeout(() => setShowLogoutAlert(false), 10000);	×
146	}
147	};
148
149	navbarSublists[displayName] = [	×
150	{
151	name: "User Profile",
152	link: `/profile/${user?._id}`,
153	id: "navbar-dropdown-item-user-profile",
154	className: "navMobileSubItem",
155	},
156	{
157	name: "Uploader CLI Tool",
158	onClick: () => setUploaderToolOpen(true),	×
159	id: "navbar-dropdown-item-uploader-tool",
160	className: "navMobileSubItem action",
161	},
162	{
163	name: "Logout",
164	link: "/logout",
165	id: "navbar-dropdown-item-logout",
166	className: "navMobileSubItem",
167	},
168	];
169
NEW 170	if (user?.role === "Admin" \|\| user?.role === "Organization Owner") {	×
171	navbarSublists[displayName].splice(1, 0, {	×
172	name: "Manage Users",
173	link: "/users",
174	id: "navbar-dropdown-item-user-manage",
175	className: "navMobileSubItem",
176	});
177	}
NEW 178	if (user?.role === "Admin") {	×
179	navbarSublists[displayName].splice(1, 0, {	×
180	name: "Manage Organizations",
181	link: "/organizations",
182	id: "navbar-dropdown-item-organization-manage",
183	className: "navMobileSubItem",
184	});
185	}
NEW 186	if (user?.role === "Submitter" \|\| user?.role === "Organization Owner") {	×
187	navbarSublists[displayName].splice(1, 0, {	×
188	name: "API Token",
189	onClick: () => setOpenAPITokenDialog(true),	×
190	id: "navbar-dropdown-item-api-token",
191	className: "navMobileSubItem action",
192	});
193	}
194
195	const clickNavItem = (e) => {	×
196	const clickTitle = e.target.innerText;	×
NEW 197	setSelectedList(navbarSublists[clickTitle]);	×
198	};
199
200	useEffect(() => {	×
201	if (!location?.pathname \|\| location?.pathname === "/") {	×
202	setRestorePath(null);	×
203	return;	×
204	}
205
206	setRestorePath(location?.pathname);	×
207	}, [location]);
208
209	return (	×
210	<>
211	<GenericAlert open={showLogoutAlert}>
212	<span>You have been logged out.</span>
213	</GenericAlert>
214	<HeaderBanner>
215	<HeaderContainer>
216	<Logo />
217	<div className="headerLowerContainer">
218	<div
219	role="button"
220	id="header-navbar-open-menu-button"
221	tabIndex={0}
222	className="menuButton"
223	onKeyDown={(e) => {
224	if (e.key === "Enter") {	×
225	setNavMobileDisplay("block");	×
226	}
227	}}
228	onClick={() => setNavMobileDisplay("block")}	×
229	>
230	Menu
231	</div>
232	</div>
233	</HeaderContainer>
234	</HeaderBanner>
235	<NavMobileContainer display={navMobileDisplay}>
236	<MenuArea>
237	<div className="menuContainer">
238	<div
239	role="button"
240	id="navbar-close-navbar-button"
241	tabIndex={0}
242	className="closeIcon"
243	onKeyDown={(e) => {
244	if (e.key === "Enter") {	×
245	setNavMobileDisplay("none");	×
246	}
247	}}
248	onClick={() => setNavMobileDisplay("none")}	×
249	>
250	<img className="closeIconImg" src={menuClearIcon} alt="menuClearButton" />
251	</div>
252	{selectedList !== navMobileList && (	×
253	<div
254	role="button"
255	id="navbar-back-to-main-menu-button"
256	tabIndex={0}
257	className="backButton"
258	onKeyDown={(e) => {
259	if (e.key === "Enter") {	×
NEW 260	setSelectedList(navMobileList);	×
261	}
262	}}
NEW 263	onClick={() => setSelectedList(navMobileList)}	×
264	>
265	Main Menu
266	</div>
267	)}
268	<div className="navMobileContainer">
269	{selectedList.map((navMobileItem) => {
270	// If the user is not logged in and the item requires a role, don't show it
NEW 271	if (	×
272	"roles" in navMobileItem &&	×
273	Array.isArray(navMobileItem?.roles) &&
274	!navMobileItem.roles.includes(user?.role)
275	) {
NEW 276	return null;	×
277	}
278
UNCOV 279	return (	×
280	<React.Fragment key={`mobile_${navMobileItem.id}`}>
281	{navMobileItem.className === "navMobileItem" && (	×
282	<NavLink
283	id={navMobileItem.id}
284	to={navMobileItem.link}
285	target={navMobileItem.link.startsWith("https://") ? "_blank" : "_self"}	×
286	onClick={() => setNavMobileDisplay("none")}	×
287	>
288	<div className="navMobileItem">{navMobileItem.name}</div>
289	</NavLink>
290	)}
291	{navMobileItem.className === "navMobileItem clickable" && (	×
292	<div
293	id={navMobileItem.id}
294	role="button"
295	tabIndex={0}
296	className="navMobileItem clickable"
297	onKeyDown={(e) => {
298	if (e.key === "Enter") {	×
299	clickNavItem(e);	×
300	}
301	}}
302	onClick={clickNavItem}
303	>
304	{navMobileItem.name}
305	</div>
306	)}
307	{navMobileItem.className === "navMobileSubItem action" &&	×
308	"onClick" in navMobileItem &&
309	typeof navMobileItem.onClick === "function" ? (
310	<div
311	id={navMobileItem.id}
312	role="button"
313	tabIndex={0}
314	className="navMobileItem SubItem action"
315	onKeyDown={(e) => {
NEW 316	if (e.key === "Enter") {	×
NEW 317	navMobileItem.onClick();	×
318	}
319	}}
NEW 320	onClick={() => navMobileItem.onClick()}	×
321	>
322	{navMobileItem.name}
323	</div>
324	) : null}
325	{navMobileItem.className === "navMobileSubItem" && (	×
326	<Link
327	id={navMobileItem.id}
328	to={navMobileItem.link}
329	target={
330	navMobileItem.link.startsWith("https://") \|\|	×
331	navMobileItem.link.endsWith(".pdf")
332	? "_blank"
333	: "_self"
334	}
335	>
336	<div
337	role="button"
338	tabIndex={0}
339	className="navMobileItem SubItem"
340	onKeyDown={(e) => {
341	if (e.key === "Enter") {	×
342	setNavMobileDisplay("none");	×
343	if (navMobileItem.name === "Logout") {	×
344	handleLogout();	×
NEW 345	setSelectedList(navMobileList);	×
346	}
347	}
348	}}
349	onClick={() => {
350	setNavMobileDisplay("none");	×
351	if (navMobileItem.name === "Logout") {	×
352	handleLogout();	×
NEW 353	setSelectedList(navMobileList);	×
354	}
355	}}
356	>
357	{navMobileItem.name}
358	</div>
359	</Link>
360	)}
361	{navMobileItem.className === "navMobileSubTitle" && (	×
362	<div className="navMobileItem">{navMobileItem.name}</div>
363	)}
364	</React.Fragment>
365	);
366	})}
367	{/* eslint-disable-next-line no-nested-ternary */}
368	{selectedList === navMobileList ? (	×
369	isLoggedIn ? (	×
370	<div
371	id="navbar-dropdown-name"
372	role="button"
373	tabIndex={0}
374	className="navMobileItem clickable"
375	onKeyDown={(e) => {
376	if (e.key === "Enter") {	×
377	clickNavItem(e);	×
378	}
379	}}
380	onClick={clickNavItem}
381	>
382	{displayName}
383	</div>
384	) : (
385	<Link
386	id="navbar-link-login"
387	to="/login"
388	state={{ redirectURLOnLoginSuccess: restorePath }}
389	>
390	<div
391	role="button"
392	tabIndex={0}
393	className="navMobileItem"
394	onKeyDown={(e) => {
395	if (e.key === "Enter") {	×
396	setNavMobileDisplay("none");	×
397	}
398	}}
399	onClick={() => setNavMobileDisplay("none")}	×
400	>
401	Login
402	</div>
403	</Link>
404	)
405	) : null}
406	</div>
407	</div>
408	<div
409	role="button"
410	id="navbar-close-navbar-grey-section"
411	tabIndex={0}
412	className="greyContainer"
413	onKeyDown={(e) => {
414	if (e.key === "Enter") {	×
415	setNavMobileDisplay("none");	×
416	}
417	}}
418	onClick={() => setNavMobileDisplay("none")}	×
419	aria-label="greyContainer"
420	/>
421	</MenuArea>
422	<APITokenDialog open={openAPITokenDialog} onClose={() => setOpenAPITokenDialog(false)} />	×
423	<UploaderToolDialog open={uploaderToolOpen} onClose={() => setUploaderToolOpen(false)} />	×
424	</NavMobileContainer>
425	</>
426	);
427	};
428
429	export default Header;

CBIIT / crdc-datahub-ui / 10598024957

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