12184841426

Committed 05 Dec 2024 05:23PM UTC coverage: 56.473% (+1.0%) from 55.452%

Build # 12184841426

Build Type

Pull #538

github

Committed by

web-flow

Commit Message

Merge a4707dc0e into d1264f14e

Pull Request Pull Request #538: Miscellaneous Performance and QoL Improvements

Run Details

2664 of 5191 branches covered (51.32%)

Branch coverage included in aggregate %.

36 of 50 new or added lines in 6 files covered. (72.0%)

14 existing lines in 2 files now uncovered.

3818 of 6287 relevant lines covered (60.73%)

143.57 hits per line

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

56.58

/src/components/InactivityDialog/InactivityDialog.tsx

import React, { useState, useEffect } from "react";
import { Button, Dialog, DialogTitle, styled } from "@mui/material";
import { useNavigate } from "react-router-dom";
import { useSnackbar } from "notistack";
import { useAuthContext } from "../Contexts/AuthContext";
import { Logger, secondsToMinuteString } from "../../utils";
import CloseIcon from "../../assets/icons/close_icon.svg";

const InactivityWarningDialog = styled(Dialog)({
  "& .MuiDialog-paper": {
    width: "550px",
    height: "320px",
    borderRadius: "8px",
    border: "2px solid var(--secondary-one, #0B7F99)",
    background: "linear-gradient(0deg, #F2F6FA 0%, #F2F6FA 100%), #2E4D7B",
    boxShadow: "0px 4px 45px 0px rgba(0, 0, 0, 0.40)",
  },
  "& #customized-dialog-title": {
    margin: 0,
    paddingLeft: "30px",
    backgroundColor: "#6D89A2",
    color: "#FFFFFF",
    fontFamily: "Lato",
    fontSize: "20px",
    fontWeight: 600,
    letterSpacing: 0,
  },
});

const InactivityWarningContent = styled("div")({
  margin: "50px auto",
  color: "#000000",
  fontFamily: "'Nunito', 'Rubik', sans-serif",
  fontSize: "17px",
  fontWeight: 300,
  letterSpacing: 0,
  lineHeight: "24px",
  "& .buttonWrapper": {
    display: "flex",
    justifyContent: "center",
    alignItems: "center",
    textAlign: "center",
  },
  "& .buttonGroup": {
    color: "#FFFFFF",
    fontFamily: "Lato",
    fontSize: "11px",
    lineHeight: "22px",
    width: "150px",
    border: "1px solid #626262",
    marginTop: "30px",
    borderRadius: "4px",
    fontWeight: 500,
  },
  "& .extendButton": {
    backgroundColor: "#566672 !important",
  },
  "& .logOutButton": {
    marginLeft: "20px",
    backgroundColor: "#437BBE !important",
  },
});

const SessionTimeoutDialog = styled(Dialog)({
  "& .MuiDialog-paper": {
    width: "550px",
    height: "320px",
    borderRadius: "8px",
    border: "2px solid var(--secondary-one, #0B7F99)",
    background: "linear-gradient(0deg, #F2F6FA 0%, #F2F6FA 100%), #2E4D7B",
    boxShadow: "0px 4px 45px 0px rgba(0, 0, 0, 0.40)",
  },
  "& .closeIcon": {
    cursor: "pointer",
    textAlign: "end",
  },
});

const SessionTimeoutContent = styled("div")({
  justifyContent: "space-between",
  paddingRight: "33px",
  paddingLeft: "33px",
  paddingTop: "10px",
  fontFamily: "lato",
  textAlign: "center",
  "& .sessionTimeoutTitle": {
    fontSize: "25px",
    fontWeight: "bold",
    paddingBottom: "12px",
    color: "#566672",
  },
  "& .sessionTimeoutMessage": {
    fontSize: "17px",
    paddingBottom: "14px",
  },
  "& .buttonWrapper": {
    display: "flex",
    justifyContent: "center",
    alignItems: "center",
    textAlign: "center",
  },
  "& .buttonGroup": {
    color: "#FFFFFF",
    fontFamily: "Lato",
    fontSize: "11px",
    lineHeight: "22px",
    width: "90px",
    border: "1px solid #626262",
    marginTop: "30px",
    borderRadius: "4px",
    fontWeight: 500,
  },
  "& .closeButton": {
    backgroundColor: "#566672 !important",
  },
  "& .loginButton": {
    marginLeft: "20px",
    backgroundColor: "#437BBE !important",
  },
});

const thresholdTime = 300;

const InactivityDialog = () => {
  const navigate = useNavigate();
  const { enqueueSnackbar } = useSnackbar();
  const { isLoggedIn, logout } = useAuthContext();

  const [warning, setWarning] = useState<boolean>(false);
  const [timedOut, setTimedOut] = useState<boolean>(false);
  const [timeLeft, setTimeLeft] = useState<number>(thresholdTime);

  const extendSession = async () => {
    try {
      const res = await fetch(`${window.origin}/api/authn/authenticated`, {
        method: "POST",
        headers: {
          Accept: "application/json",
          "Content-Type": "application/json",
        },
      })
        .then((response) => response.json())
        .catch(() => {});

      if (res.status) {
        setWarning(false);
      }
    } catch (e) {
      Logger.error("Error in extending session", e);
    }
  };

  const handleExtendSession = () => {
    extendSession();
  };

  const handleSignOutNoBanner = async () => {
    const logoutStatus = await logout();
    if (logoutStatus) {
      navigate("/");
      setWarning(false);
    }
  };

  const handleSignOut = async () => {
    const logoutStatus = await logout();
    if (logoutStatus) {
      navigate("/");
      setWarning(false);
      enqueueSnackbar("You have been logged out.", { variant: "default" });
    }
  };

  const loadData = async () => {
    try {
      const res = await fetch(`${window.origin}/api/authn/session-ttl`);
      const data = await res.json();
      const { ttl } = data;
      if (ttl <= 0) {
        // If user did not select any option and timed out in BE.
        handleSignOutNoBanner();
        setTimedOut(true);
      } else if (ttl > 0 && ttl <= thresholdTime) {
        setTimeLeft(ttl);
        setWarning(true);
      }
    } catch (e) {
      Logger.error("Error in fetching session ttl", e);
    }
  };

  useEffect(() => {
    let ID: NodeJS.Timer;
    if (isLoggedIn) {
      ID = setInterval(loadData, 10 * 1000);
    } else {
      clearInterval(ID);
    }

    return () => clearInterval(ID);
  }, [isLoggedIn]);

  return (
    <>
      <InactivityWarningDialog open={warning}>
        <DialogTitle id="customized-dialog-title">Session Timeout Warning</DialogTitle>
        <InactivityWarningContent>
          This session is about to expire due to inactivity.
          <br />
          You will be logged out in
          {` ${secondsToMinuteString(timeLeft)} `}
          minutes.
          <br />
          Please elect to extend this session or logout.
          <div className="buttonWrapper">
            <Button
              variant="contained"
              className="buttonGroup extendButton"
              onClick={handleExtendSession}
              disableElevation={false}
            >
              EXTEND SESSION
            </Button>
            <Button
              variant="contained"
              className="buttonGroup logOutButton"
              onClick={handleSignOut}
              disableElevation={false}
            >
              LOGOUT
            </Button>
          </div>
        </InactivityWarningContent>
      </InactivityWarningDialog>
      <SessionTimeoutDialog open={timedOut}>
        <DialogTitle>
          <div
            role="button"
            className="closeIcon"
            onClick={() => setTimedOut(false)}
            tabIndex={0}
            onKeyDown={(e) => {
              if (e.key === "Enter") {
                setTimedOut(false);
              }
            }}
          >
            <img style={{ height: 10, marginBottom: 2 }} src={CloseIcon} alt="close icon" />
          </div>
        </DialogTitle>
        <SessionTimeoutContent>
          <div className="sessionTimeoutTitle">Your session has expired.</div>
          <br />
          <div className="sessionTimeoutMessage">Please login again to continue working.</div>
          <div className="buttonWrapper">
            <Button
              variant="contained"
              className="buttonGroup closeButton"
              onClick={() => setTimedOut(false)}
              disableElevation={false}
            >
              CLOSE
            </Button>
            <Button
              variant="contained"
              className="buttonGroup loginButton"
              onClick={() => {
                setTimedOut(false);
                navigate("login");
              }}
              disableElevation={false}
            >
              LOGIN
            </Button>
          </div>
        </SessionTimeoutContent>
      </SessionTimeoutDialog>
    </>
  );
};

export default InactivityDialog;

1	import React, { useState, useEffect } from "react";
2	import { Button, Dialog, DialogTitle, styled } from "@mui/material";
3	import { useNavigate } from "react-router-dom";
4	import { useSnackbar } from "notistack";
5	import { useAuthContext } from "../Contexts/AuthContext";
6	import { Logger, secondsToMinuteString } from "../../utils";
7	import CloseIcon from "../../assets/icons/close_icon.svg";
8
9	const InactivityWarningDialog = styled(Dialog)({	2✔
10	"& .MuiDialog-paper": {
11	width: "550px",
12	height: "320px",
13	borderRadius: "8px",
14	border: "2px solid var(--secondary-one, #0B7F99)",
15	background: "linear-gradient(0deg, #F2F6FA 0%, #F2F6FA 100%), #2E4D7B",
16	boxShadow: "0px 4px 45px 0px rgba(0, 0, 0, 0.40)",
17	},
18	"& #customized-dialog-title": {
19	margin: 0,
20	paddingLeft: "30px",
21	backgroundColor: "#6D89A2",
22	color: "#FFFFFF",
23	fontFamily: "Lato",
24	fontSize: "20px",
25	fontWeight: 600,
26	letterSpacing: 0,
27	},
28	});
29
30	const InactivityWarningContent = styled("div")({	2✔
31	margin: "50px auto",
32	color: "#000000",
33	fontFamily: "'Nunito', 'Rubik', sans-serif",
34	fontSize: "17px",
35	fontWeight: 300,
36	letterSpacing: 0,
37	lineHeight: "24px",
38	"& .buttonWrapper": {
39	display: "flex",
40	justifyContent: "center",
41	alignItems: "center",
42	textAlign: "center",
43	},
44	"& .buttonGroup": {
45	color: "#FFFFFF",
46	fontFamily: "Lato",
47	fontSize: "11px",
48	lineHeight: "22px",
49	width: "150px",
50	border: "1px solid #626262",
51	marginTop: "30px",
52	borderRadius: "4px",
53	fontWeight: 500,
54	},
55	"& .extendButton": {
56	backgroundColor: "#566672 !important",
57	},
58	"& .logOutButton": {
59	marginLeft: "20px",
60	backgroundColor: "#437BBE !important",
61	},
62	});
63
64	const SessionTimeoutDialog = styled(Dialog)({	2✔
65	"& .MuiDialog-paper": {
66	width: "550px",
67	height: "320px",
68	borderRadius: "8px",
69	border: "2px solid var(--secondary-one, #0B7F99)",
70	background: "linear-gradient(0deg, #F2F6FA 0%, #F2F6FA 100%), #2E4D7B",
71	boxShadow: "0px 4px 45px 0px rgba(0, 0, 0, 0.40)",
72	},
73	"& .closeIcon": {
74	cursor: "pointer",
75	textAlign: "end",
76	},
77	});
78
79	const SessionTimeoutContent = styled("div")({	2✔
80	justifyContent: "space-between",
81	paddingRight: "33px",
82	paddingLeft: "33px",
83	paddingTop: "10px",
84	fontFamily: "lato",
85	textAlign: "center",
86	"& .sessionTimeoutTitle": {
87	fontSize: "25px",
88	fontWeight: "bold",
89	paddingBottom: "12px",
90	color: "#566672",
91	},
92	"& .sessionTimeoutMessage": {
93	fontSize: "17px",
94	paddingBottom: "14px",
95	},
96	"& .buttonWrapper": {
97	display: "flex",
98	justifyContent: "center",
99	alignItems: "center",
100	textAlign: "center",
101	},
102	"& .buttonGroup": {
103	color: "#FFFFFF",
104	fontFamily: "Lato",
105	fontSize: "11px",
106	lineHeight: "22px",
107	width: "90px",
108	border: "1px solid #626262",
109	marginTop: "30px",
110	borderRadius: "4px",
111	fontWeight: 500,
112	},
113	"& .closeButton": {
114	backgroundColor: "#566672 !important",
115	},
116	"& .loginButton": {
117	marginLeft: "20px",
118	backgroundColor: "#437BBE !important",
119	},
120	});
121
122	const thresholdTime = 300;	2✔
123
124	const InactivityDialog = () => {	2✔
125	const navigate = useNavigate();	8✔
126	const { enqueueSnackbar } = useSnackbar();	8✔
127	const { isLoggedIn, logout } = useAuthContext();	8✔
128
129	const [warning, setWarning] = useState<boolean>(false);	8✔
130	const [timedOut, setTimedOut] = useState<boolean>(false);	8✔
131	const [timeLeft, setTimeLeft] = useState<number>(thresholdTime);	8✔
132
133	const extendSession = async () => {	8✔
134	try {	×
NEW 135	const res = await fetch(`${window.origin}/api/authn/authenticated`, {	×
136	method: "POST",
137	headers: {
138	Accept: "application/json",
139	"Content-Type": "application/json",
140	},
141	})
142	.then((response) => response.json())	×
143	.catch(() => {});
144
UNCOV 145	if (res.status) {	×
UNCOV 146	setWarning(false);	×
147	}
148	} catch (e) {
NEW UNCOV 149	Logger.error("Error in extending session", e);	×
150	}
151	};
152
153	const handleExtendSession = () => {	8✔
154	extendSession();	×
155	};
156
157	const handleSignOutNoBanner = async () => {	8✔
158	const logoutStatus = await logout();	2✔
159	if (logoutStatus) {	2!
160	navigate("/");	2✔
161	setWarning(false);	2✔
162	}
163	};
164
165	const handleSignOut = async () => {	8✔
NEW 166	const logoutStatus = await logout();	×
167	if (logoutStatus) {	×
168	navigate("/");	×
169	setWarning(false);	×
NEW UNCOV 170	enqueueSnackbar("You have been logged out.", { variant: "default" });	×
171	}
172	};
173
174	const loadData = async () => {	8✔
175	try {	6✔
176	const res = await fetch(`${window.origin}/api/authn/session-ttl`);	6✔
177	const data = await res.json();	4✔
178	const { ttl } = data;	4✔
179	if (ttl <= 0) {	4✔
180	// If user did not select any option and timed out in BE.
181	handleSignOutNoBanner();	2✔
182	setTimedOut(true);	2✔
183	} else if (ttl > 0 && ttl <= thresholdTime) {	2!
184	setTimeLeft(ttl);	×
UNCOV 185	setWarning(true);	×
186	}
187	} catch (e) {
NEW UNCOV 188	Logger.error("Error in fetching session ttl", e);	×
189	}
190	};
191
192	useEffect(() => {	8✔
193	let ID: NodeJS.Timer;
194	if (isLoggedIn) {	6!
195	ID = setInterval(loadData, 10 * 1000);	6✔
196	} else {
NEW UNCOV 197	clearInterval(ID);	×
198	}
199
200	return () => clearInterval(ID);	6✔
201	}, [isLoggedIn]);
202
203	return (	8✔
204	<>
205	<InactivityWarningDialog open={warning}>
206	<DialogTitle id="customized-dialog-title">Session Timeout Warning</DialogTitle>
207	<InactivityWarningContent>
208	This session is about to expire due to inactivity.
209	<br />
210	You will be logged out in
211	{` ${secondsToMinuteString(timeLeft)} `}
212	minutes.
213	<br />
214	Please elect to extend this session or logout.
215	<div className="buttonWrapper">
216	<Button
217	variant="contained"
218	className="buttonGroup extendButton"
219	onClick={handleExtendSession}
220	disableElevation={false}
221	>
222	EXTEND SESSION
223	</Button>
224	<Button
225	variant="contained"
226	className="buttonGroup logOutButton"
227	onClick={handleSignOut}
228	disableElevation={false}
229	>
230	LOGOUT
231	</Button>
232	</div>
233	</InactivityWarningContent>
234	</InactivityWarningDialog>
235	<SessionTimeoutDialog open={timedOut}>
236	<DialogTitle>
237	<div
238	role="button"
239	className="closeIcon"
UNCOV 240	onClick={() => setTimedOut(false)}	×
241	tabIndex={0}
242	onKeyDown={(e) => {
UNCOV 243	if (e.key === "Enter") {	×
UNCOV 244	setTimedOut(false);	×
245	}
246	}}
247	>
248	<img style={{ height: 10, marginBottom: 2 }} src={CloseIcon} alt="close icon" />
249	</div>
250	</DialogTitle>
251	<SessionTimeoutContent>
252	<div className="sessionTimeoutTitle">Your session has expired.</div>
253	<br />
254	<div className="sessionTimeoutMessage">Please login again to continue working.</div>
255	<div className="buttonWrapper">
256	<Button
257	variant="contained"
258	className="buttonGroup closeButton"
UNCOV 259	onClick={() => setTimedOut(false)}	×
260	disableElevation={false}
261	>
262	CLOSE
263	</Button>
264	<Button
265	variant="contained"
266	className="buttonGroup loginButton"
267	onClick={() => {
UNCOV 268	setTimedOut(false);	×
UNCOV 269	navigate("login");	×
270	}}
271	disableElevation={false}
272	>
273	LOGIN
274	</Button>
275	</div>
276	</SessionTimeoutContent>
277	</SessionTimeoutDialog>
278	</>
279	);
280	};
281
282	export default InactivityDialog;

CBIIT / crdc-datahub-ui / 12184841426

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