@@ -244,29 +201,38 @@ const App = () => {
return (
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+ {
+ RealUserMonitoring.trackError(details.error);
+ dispatchCatastrophe(`UI Render error: ${details.error.message}`);
+ return null;
+ }
+ }
+ >
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
-
-
-
-
+
);
};
diff --git a/src/components/Auth/AuthComponent.jsx b/src/components/Auth/AuthComponent.jsx
index 038c78be..3a526258 100644
--- a/src/components/Auth/AuthComponent.jsx
+++ b/src/components/Auth/AuthComponent.jsx
@@ -47,14 +47,25 @@ const AuthComponent = (props) => {
useEffect(() => {
if (code && codeVerifier && !accessToken) {
+ // if there were button params on the first load, load the button params and put them back on the URL
+ const savedButtonsStr = sessionStorage.getItem('pd_buttons');
+ const savedButtons = savedButtonsStr ? JSON.parse(savedButtonsStr) : [];
+ const buttonParams = savedButtons ? `?button=${savedButtons.join('&button=')}` : '';
+
exchangeCodeForToken(clientId, clientSecret, redirectURL, codeVerifier, code).then(
- (token) => {
+ (data) => {
+ const {
+ access_token: newAccessToken,
+ refresh_token: newRefreshToken,
+ expires_in: expiresIn,
+ } = data;
+ if (!newAccessToken || !newRefreshToken || !expiresIn) {
+ window.location.assign(redirectURL + buttonParams);
+ }
sessionStorage.removeItem('code_verifier');
- sessionStorage.setItem('pd_access_token', token);
- // if there were button params on the first load, load the button params and put them back on the URL
- const savedButtonsStr = sessionStorage.getItem('pd_buttons');
- const savedButtons = savedButtonsStr ? JSON.parse(savedButtonsStr) : [];
- const buttonParams = savedButtons ? `?button=${savedButtons.join('&button=')}` : '';
+ sessionStorage.setItem('pd_access_token', newAccessToken);
+ sessionStorage.setItem('pd_refresh_token', newRefreshToken);
+ sessionStorage.setItem('pd_token_expires_at', new Date().getTime() + (expiresIn * 1000));
window.location.assign(redirectURL + buttonParams);
},
);
diff --git a/src/components/CatastropheModal/CatastropheModal.jsx b/src/components/CatastropheModal/CatastropheModal.jsx
new file mode 100644
index 00000000..130a9115
--- /dev/null
+++ b/src/components/CatastropheModal/CatastropheModal.jsx
@@ -0,0 +1,115 @@
+import React, {
+ useEffect,
+ useState,
+ useRef,
+} from 'react';
+
+import {
+ useDispatch,
+} from 'react-redux';
+
+import {
+ Button,
+ Code,
+ Modal,
+ ModalOverlay,
+ ModalContent,
+ ModalHeader,
+ ModalBody,
+ Text,
+} from '@chakra-ui/react';
+
+import {
+ useTranslation,
+} from 'react-i18next';
+
+import {
+ userUnauthorize as userUnauthorizeConnected,
+} from 'src/redux/users/actions';
+
+import {
+ stopMonitoring as stopMonitoringConnected,
+} from 'src/redux/monitoring/actions';
+
+const CatastropheOverlay = ({
+ errorMessage,
+ countdownSeconds = 30,
+}) => {
+ const {
+ t,
+ } = useTranslation();
+
+ const dispatch = useDispatch();
+ const userUnauthorize = () => dispatch(userUnauthorizeConnected());
+ const stopMonitoring = () => dispatch(stopMonitoringConnected());
+
+ const [seconds, setSeconds] = useState(countdownSeconds);
+ const timerIdRef = useRef(null);
+
+ useEffect(() => {
+ if (seconds > 0) {
+ timerIdRef.current = setTimeout(() => {
+ setSeconds(seconds - 1);
+ }, 1000);
+ } else {
+ window.location.reload(true);
+ }
+ return () => {
+ if (timerIdRef.current) {
+ clearTimeout(timerIdRef.current);
+ timerIdRef.current = null;
+ }
+ };
+ }, [seconds]);
+
+ const cancelTimer = () => {
+ if (timerIdRef.current) {
+ clearTimeout(timerIdRef.current);
+ timerIdRef.current = null;
+ }
+ };
+
+ return (
+
+
+
+ {t('Catastrophic Error')}
+
+ {t('An unexpected error has occurred:')}
+ {errorMessage}
+
+ {
+ timerIdRef.current
+ ? t('The application will restart in X seconds.', { seconds })
+ : t('Restart canceled')
+ }
+
+
+
+
+
+
+ );
+};
+
+export default CatastropheOverlay;
diff --git a/src/components/Common/EscalationPolicySelect.jsx b/src/components/Common/EscalationPolicySelect.jsx
index 39a3c869..fb9d6183 100644
--- a/src/components/Common/EscalationPolicySelect.jsx
+++ b/src/components/Common/EscalationPolicySelect.jsx
@@ -6,6 +6,10 @@ import {
useDebouncedCallback,
} from 'use-debounce';
+import {
+ useToast,
+} from '@chakra-ui/react';
+
import {
Select,
} from 'chakra-react-select';
@@ -14,6 +18,11 @@ import {
useTranslation,
} from 'react-i18next';
+import RealUserMonitoring from 'src/config/monitoring';
+import {
+ AxiosError,
+} from 'axios';
+
import {
throttledPdAxiosRequest,
} from 'src/util/pd-api-wrapper';
@@ -29,6 +38,8 @@ const EscalationPolicySelect = ({
t,
} = useTranslation();
+ const toast = useToast();
+
const [selectOptions, setSelectOptions] = useState([]);
const [currentInputValue, setCurrentInputValue] = useState('');
const [more, setMore] = useState(false);
@@ -36,6 +47,26 @@ const EscalationPolicySelect = ({
const [storedSelectEps, setStoredSelectEps] = useState([]);
+ const [apiError, setApiError] = useState(null);
+
+ useEffect(() => {
+ const details = {};
+ if (apiError) {
+ if (apiError instanceof AxiosError) {
+ details.url = apiError.config.url;
+ details.method = apiError.config.method;
+ details.status = apiError.response?.status;
+ details.data = apiError.response?.data;
+ }
+ RealUserMonitoring.trackError(apiError, details);
+ toast({
+ title: t('Error'),
+ description: apiError.message,
+ status: 'error',
+ });
+ }
+ }, [apiError]);
+
// get the names for the selected epIds
useEffect(() => {
const epIds = isMulti ? value : [value];
@@ -49,13 +80,21 @@ const EscalationPolicySelect = ({
}, [value]);
const requestOptionsPage = useCallback(async (inputValue, offset) => {
- const r = await throttledPdAxiosRequest('GET', 'escalation_policies', {
- query: inputValue,
- offset,
- });
- setMore(r.data.more);
- const r2 = r.data.escalation_policies.map((ep) => ({ label: ep.name, value: ep.id }));
- return r2;
+ try {
+ const r = await throttledPdAxiosRequest(
+ 'GET',
+ 'escalation_policies',
+ { query: inputValue, offset },
+ null,
+ { throwErrors: true },
+ );
+ setMore(r.data.more);
+ const r2 = r.data.escalation_policies.map((ep) => ({ label: ep.name, value: ep.id }));
+ return r2;
+ } catch (e) {
+ setApiError(e);
+ return [];
+ }
}, []);
const loadOptions = useCallback(
diff --git a/src/components/Common/ServiceSelect.jsx b/src/components/Common/ServiceSelect.jsx
index 3a8ece93..6c0c4cfa 100644
--- a/src/components/Common/ServiceSelect.jsx
+++ b/src/components/Common/ServiceSelect.jsx
@@ -6,6 +6,10 @@ import {
useDebouncedCallback,
} from 'use-debounce';
+import {
+ useToast,
+} from '@chakra-ui/react';
+
import {
Select,
} from 'chakra-react-select';
@@ -14,6 +18,11 @@ import {
useTranslation,
} from 'react-i18next';
+import RealUserMonitoring from 'src/config/monitoring';
+import {
+ AxiosError,
+} from 'axios';
+
import {
throttledPdAxiosRequest,
} from 'src/util/pd-api-wrapper';
@@ -29,6 +38,8 @@ const ServiceSelect = ({
t,
} = useTranslation();
+ const toast = useToast();
+
const [selectOptions, setSelectOptions] = useState([]);
const [currentInputValue, setCurrentInputValue] = useState('');
const [more, setMore] = useState(false);
@@ -36,6 +47,26 @@ const ServiceSelect = ({
const [storedSelectServices, setStoredSelectServices] = useState([]);
+ const [apiError, setApiError] = useState(null);
+
+ useEffect(() => {
+ const details = {};
+ if (apiError) {
+ if (apiError instanceof AxiosError) {
+ details.url = apiError.config.url;
+ details.method = apiError.config.method;
+ details.status = apiError.response?.status;
+ details.data = apiError.response?.data;
+ }
+ RealUserMonitoring.trackError(apiError, details);
+ toast({
+ title: t('Error'),
+ description: apiError.message,
+ status: 'error',
+ });
+ }
+ }, [apiError]);
+
// get the user names for the selected serviceIds
useEffect(() => {
const serviceIds = isMulti ? value : [value];
@@ -49,10 +80,21 @@ const ServiceSelect = ({
}, [value]);
const requestOptionsPage = useCallback(async (inputValue, offset) => {
- const r = await throttledPdAxiosRequest('GET', 'services', { query: inputValue, offset });
- setMore(r.data.more);
- const r2 = r.data.services.map((service) => ({ label: service.name, value: service.id }));
- return r2;
+ try {
+ const r = await throttledPdAxiosRequest(
+ 'GET',
+ 'services',
+ { query: inputValue, offset },
+ null,
+ { throwErrors: true },
+ );
+ setMore(r.data.more);
+ const r2 = r.data.services.map((service) => ({ label: service.name, value: service.id }));
+ return r2;
+ } catch (e) {
+ setApiError(e);
+ return [];
+ }
}, []);
const loadOptions = useCallback(
diff --git a/src/components/Common/TeamSelect.jsx b/src/components/Common/TeamSelect.jsx
index 070d3850..def18b31 100644
--- a/src/components/Common/TeamSelect.jsx
+++ b/src/components/Common/TeamSelect.jsx
@@ -6,6 +6,10 @@ import {
useDebouncedCallback,
} from 'use-debounce';
+import {
+ useToast,
+} from '@chakra-ui/react';
+
import {
Select,
} from 'chakra-react-select';
@@ -14,6 +18,11 @@ import {
useTranslation,
} from 'react-i18next';
+import RealUserMonitoring from 'src/config/monitoring';
+import {
+ AxiosError,
+} from 'axios';
+
import {
throttledPdAxiosRequest,
} from 'src/util/pd-api-wrapper';
@@ -25,6 +34,8 @@ const TeamSelect = ({
t,
} = useTranslation();
+ const toast = useToast();
+
const [selectOptions, setSelectOptions] = useState([]);
const [currentInputValue, setCurrentInputValue] = useState('');
const [more, setMore] = useState(false);
@@ -32,6 +43,26 @@ const TeamSelect = ({
const [storedSelectTeams, setStoredSelectTeams] = useState([]);
+ const [apiError, setApiError] = useState(null);
+
+ useEffect(() => {
+ const details = {};
+ if (apiError) {
+ if (apiError instanceof AxiosError) {
+ details.url = apiError.config.url;
+ details.method = apiError.config.method;
+ details.status = apiError.response?.status;
+ details.data = apiError.response?.data;
+ }
+ RealUserMonitoring.trackError(apiError, details);
+ toast({
+ title: t('Error'),
+ description: apiError.message,
+ status: 'error',
+ });
+ }
+ }, [apiError]);
+
// get the names for the selected teamIds
useEffect(() => {
const teamIds = isMulti ? value : [value];
@@ -45,10 +76,21 @@ const TeamSelect = ({
}, [value]);
const requestOptionsPage = useCallback(async (inputValue, offset) => {
- const r = await throttledPdAxiosRequest('GET', 'teams', { query: inputValue, offset });
- setMore(r.data.more);
- const r2 = r.data.teams.map((team) => ({ label: team.name, value: team.id }));
- return r2;
+ try {
+ const r = await throttledPdAxiosRequest(
+ 'GET',
+ 'teams',
+ { query: inputValue, offset },
+ null,
+ { throwErrors: true },
+ );
+ setMore(r.data.more);
+ const r2 = r.data.teams.map((team) => ({ label: team.name, value: team.id }));
+ return r2;
+ } catch (e) {
+ setApiError(e);
+ return [];
+ }
}, []);
const loadOptions = useCallback(
diff --git a/src/components/Common/UserSelect.jsx b/src/components/Common/UserSelect.jsx
index 293e486b..8a4e7c9f 100644
--- a/src/components/Common/UserSelect.jsx
+++ b/src/components/Common/UserSelect.jsx
@@ -10,6 +10,10 @@ import {
useDebouncedCallback,
} from 'use-debounce';
+import {
+ useToast,
+} from '@chakra-ui/react';
+
import {
Select,
} from 'chakra-react-select';
@@ -18,6 +22,11 @@ import {
useTranslation,
} from 'react-i18next';
+import RealUserMonitoring from 'src/config/monitoring';
+import {
+ AxiosError,
+} from 'axios';
+
import {
throttledPdAxiosRequest,
} from 'src/util/pd-api-wrapper';
@@ -33,6 +42,8 @@ const UserSelect = ({
t,
} = useTranslation();
+ const toast = useToast();
+
const usersMap = useSelector((state) => state.users.usersMap);
const dispatch = useDispatch();
const addUserToUsersMap = (user) => {
@@ -46,6 +57,26 @@ const UserSelect = ({
const [storedSelectUsers, setStoredSelectUsers] = useState([]);
+ const [apiError, setApiError] = useState(null);
+
+ useEffect(() => {
+ const details = {};
+ if (apiError) {
+ if (apiError instanceof AxiosError) {
+ details.url = apiError.config.url;
+ details.method = apiError.config.method;
+ details.status = apiError.response?.status;
+ details.data = apiError.response?.data;
+ }
+ RealUserMonitoring.trackError(apiError, details);
+ toast({
+ title: t('Error'),
+ description: apiError.message,
+ status: 'error',
+ });
+ }
+ }, [apiError]);
+
// get the user names for the selected userIds
useEffect(() => {
const userIds = isMulti ? value : [value];
@@ -63,15 +94,26 @@ const UserSelect = ({
}, [value]);
const requestOptionsPage = useCallback(async (inputValue, offset) => {
- const r = await throttledPdAxiosRequest('GET', 'users', { query: inputValue, offset });
- setMore(r.data.more);
- const r2 = r.data.users.map((user) => {
- if (!usersMap[user.id]) {
- addUserToUsersMap(user);
- }
- return { label: user.name, value: user.id };
- });
- return r2;
+ try {
+ const r = await throttledPdAxiosRequest(
+ 'GET',
+ 'users',
+ { query: inputValue, offset },
+ null,
+ { throwErrors: true },
+ );
+ setMore(r.data.more);
+ const r2 = r.data.users.map((user) => {
+ if (!usersMap[user.id]) {
+ addUserToUsersMap(user);
+ }
+ return { label: user.name, value: user.id };
+ });
+ return r2;
+ } catch (e) {
+ setApiError(e);
+ return [];
+ }
}, []);
const loadOptions = useCallback(
diff --git a/src/components/DetailedStatusOverlay/DetailedStatusOverlay.jsx b/src/components/DetailedStatusOverlay/DetailedStatusOverlay.jsx
index 01afead8..aab303a8 100644
--- a/src/components/DetailedStatusOverlay/DetailedStatusOverlay.jsx
+++ b/src/components/DetailedStatusOverlay/DetailedStatusOverlay.jsx
@@ -7,6 +7,8 @@ import {
useSelector, useDispatch, useStore,
} from 'react-redux';
+import moment from 'moment/min/moment-with-locales';
+
import {
Badge,
Box,
@@ -33,12 +35,20 @@ import {
useTranslation,
} from 'react-i18next';
+import {
+ DATE_FORMAT,
+} from 'src/config/constants';
+
import {
getIncidentsAsync as getIncidentsAsyncAction,
UPDATE_INCIDENT_ALERTS,
UPDATE_INCIDENT_NOTES,
} from 'src/redux/incidents/actions';
+import {
+ OAUTH_REFRESH_REQUESTED,
+} from 'src/redux/connection/actions';
+
const DetailedStatusOverlay = ({
btnRef, isOpen, onOpen, onClose,
}) => {
@@ -46,11 +56,7 @@ const DetailedStatusOverlay = ({
const {
t,
} = useTranslation();
- const {
- status: connectionStatus,
- error: connectionError,
- // errors,
- } = useSelector((state) => state.connection);
+
const {
status: incidentStatus,
error: incidentError,
@@ -59,7 +65,14 @@ const DetailedStatusOverlay = ({
incidentNotes,
} = useSelector((state) => state.incidents);
const {
- status: logEntriesStatus, error: logEntriesError,
+ // status: logEntriesStatus, error: logEntriesError,
+ latestLogEntryDate,
+ pollingStatus: {
+ polling: logEntriesPolling,
+ lastPollStarted,
+ lastPollCompleted,
+ errors: pollingErrors,
+ },
} = useSelector(
(state) => state.logEntries,
);
@@ -95,6 +108,7 @@ const DetailedStatusOverlay = ({
const badgeText = status.split('_').pop();
switch (badgeText) {
case 'COMPLETED':
+ case 'STARTED':
badgeProps.colorScheme = 'green';
break;
case 'REQUESTED':
@@ -102,6 +116,7 @@ const DetailedStatusOverlay = ({
break;
case 'FAILED':
case 'ERROR':
+ case 'STOPPED':
badgeProps.colorScheme = 'red';
break;
default:
@@ -126,7 +141,6 @@ const DetailedStatusOverlay = ({
{badgeForStatus(status)}
- {/* {error && !(['REQUESTED', 'COMPLETED'].includes(status.split('_').pop())) && ( */}
{error && (
{error}
@@ -268,13 +282,52 @@ const DetailedStatusOverlay = ({
+
+
+ {t('Live Updates')}
+
+ {statusFor(t('Polling'), logEntriesPolling ? 'STARTED' : 'STOPPED', '')}
+
+ {t('Last Requested')}
+ :
+
+
+ {lastPollStarted ? moment(lastPollStarted.toISOString()).format(DATE_FORMAT) : t('n/a')}
+
+
+ {t('Last Completed')}
+ :
+
+
+ {lastPollCompleted ? moment(lastPollCompleted.toISOString()).format(DATE_FORMAT) : t('n/a')}
+
+
+ {t('Latest Log Entry')}
+ :
+
+
+ {latestLogEntryDate ? moment(latestLogEntryDate.toISOString()).format(DATE_FORMAT) : t('n/a')}
+
+ {pollingErrors.length > 0 && (
+
+
+
+ )}
+
{t('Status')}
- {statusFor(t('Connection'), connectionStatus, connectionError)}
{statusFor(t('Incidents'), incidentStatus, incidentError)}
- {statusFor(t('Log Entries'), logEntriesStatus, logEntriesError)}
{statusFor(t('Extensions'), extensionsStatus, extensionsError)}
{statusFor(t('Response Plays'), responsePlaysStatus, responsePlaysError)}
@@ -282,6 +335,18 @@ const DetailedStatusOverlay = ({
{t('Debugging Actions')}
+
-
+
{
)}
+
+ {status === MERGE_REQUESTED && (
+ <>
+
+
+ {`${mergeProgressPercent}%`}
+
+
+ {mergeProgress.updatingTitles ? t('Updating titles') : t('Merging')}
+
+ )}
+
-
diff --git a/src/components/NavigationBar/NavigationBarComponent.jsx b/src/components/NavigationBar/NavigationBarComponent.jsx
index 098e780d..f539f6bc 100644
--- a/src/components/NavigationBar/NavigationBarComponent.jsx
+++ b/src/components/NavigationBar/NavigationBarComponent.jsx
@@ -61,9 +61,7 @@ import {
version as PD_APP_VERSION,
} from 'src/config/version';
-import {
- ReactComponent as Logo,
-} from 'src/assets/images/pd_logo_black.svg';
+import Logo from 'src/assets/images/pd_logo_black.svg';
import GlobalSearchComponent from 'src/components/GlobalSearch/GlobalSearchComponent';
import QuerySettingsComponent from 'src/components/QuerySettings/QuerySettingsComponent';
diff --git a/src/components/QuerySettings/QuerySettingsComponent.jsx b/src/components/QuerySettings/QuerySettingsComponent.jsx
index 36d5da8b..8146eae9 100644
--- a/src/components/QuerySettings/QuerySettingsComponent.jsx
+++ b/src/components/QuerySettings/QuerySettingsComponent.jsx
@@ -1,4 +1,6 @@
-import React from 'react';
+import React, {
+ useMemo,
+} from 'react';
import {
useSelector, useDispatch,
@@ -28,6 +30,7 @@ import DatePickerComponent from './subcomponents/DatePickerComponent';
import StatusQueryComponent from './subcomponents/StatusQueryComponent';
import UrgencyQueryComponent from './subcomponents/UrgencyQueryComponent';
import PriorityQueryComponent from './subcomponents/PriorityQueryComponent';
+import ColumnFilterIndicatorComponent from './subcomponents/ColumnFilterIndicatorComponent';
import './QuerySettingsComponent.scss';
@@ -52,6 +55,10 @@ const QuerySettingsComponent = () => {
} = useSelector(
(state) => state.querySettings,
);
+ const {
+ filters,
+ } = useSelector((state) => state.incidentTable.incidentTableState);
+
const dispatch = useDispatch();
const updateQuerySettingsServices = (newServiceIds) => {
dispatch(updateQuerySettingsServicesConnected(newServiceIds));
@@ -66,6 +73,13 @@ const QuerySettingsComponent = () => {
dispatch(updateQuerySettingsTeamsConnected(newTeamIds));
};
+ const filterCount = useMemo(() => {
+ if (filters instanceof Array) {
+ return filters.length;
+ }
+ return 0;
+ }, [filters]);
+
return (
{
isMulti
/>
- {/* */}
+ { filterCount > 0 && (
+
+
+
+ )}
);
diff --git a/src/components/QuerySettings/subcomponents/ColumnFilterIndicatorComponent.jsx b/src/components/QuerySettings/subcomponents/ColumnFilterIndicatorComponent.jsx
new file mode 100644
index 00000000..01cc8002
--- /dev/null
+++ b/src/components/QuerySettings/subcomponents/ColumnFilterIndicatorComponent.jsx
@@ -0,0 +1,63 @@
+import React, {
+ useMemo,
+} from 'react';
+
+import {
+ useSelector,
+ useDispatch,
+} from 'react-redux';
+
+import {
+ useTranslation,
+} from 'react-i18next';
+
+import {
+ Flex,
+ Button,
+ Tag,
+} from '@chakra-ui/react';
+
+import {
+ clearIncidentTableFilters as clearIncidentTableFiltersConnected,
+} from 'src/redux/incident_table/actions';
+
+const ColumnFilterIndicatorComponent = () => {
+ const {
+ t,
+ } = useTranslation();
+ const {
+ filters,
+ } = useSelector((state) => state.incidentTable.incidentTableState);
+
+ const dispatch = useDispatch();
+ const clearIncidentTableFilters = () => {
+ dispatch(clearIncidentTableFiltersConnected());
+ };
+
+ const filterCount = useMemo(() => {
+ if (filters instanceof Array) {
+ return filters.length;
+ }
+ return 0;
+ }, [filters]);
+
+ return (
+
+
+ {filterCount}
+
+
+
+ );
+};
+
+export default ColumnFilterIndicatorComponent;
diff --git a/src/components/UnauthorizedModal/UnauthorizedModalComponent.jsx b/src/components/UnauthorizedModal/UnauthorizedModalComponent.jsx
index de655da7..778cd140 100644
--- a/src/components/UnauthorizedModal/UnauthorizedModalComponent.jsx
+++ b/src/components/UnauthorizedModal/UnauthorizedModalComponent.jsx
@@ -1,4 +1,6 @@
-import React from 'react';
+import React, {
+ useEffect, useState,
+} from 'react';
import {
connect,
} from 'react-redux';
@@ -15,6 +17,22 @@ import {
userAcceptDisclaimer as userAcceptDisclaimerConnected,
} from 'src/redux/users/actions';
+// Ref: https://stackoverflow.com/a/61390352/6480733
+const Delayed = ({
+ children, waitBeforeShow = 500,
+}) => {
+ const [isShown, setIsShown] = useState(false);
+
+ useEffect(() => {
+ const timer = setTimeout(() => {
+ setIsShown(true);
+ }, waitBeforeShow);
+ return () => clearTimeout(timer);
+ }, [waitBeforeShow]);
+
+ return isShown ? children : null;
+};
+
const UnauthorizedModalComponent = ({
users, userAcceptDisclaimer,
}) => {
@@ -27,27 +45,29 @@ const UnauthorizedModalComponent = ({
return (
-
{
- userAcceptDisclaimer();
- sessionStorage.removeItem('pd_access_token');
- window.location.reload();
- }}
- >
-
- {t('Unauthorized Access')}
-
-
-
- {t('User is not permitted to access this instance of PagerDuty Live')}
- {'. '}
- {t('Please contact the associated site owner for access')}
- .
-
-
-
+
+ {
+ userAcceptDisclaimer();
+ sessionStorage.removeItem('pd_access_token');
+ window.location.reload();
+ }}
+ >
+
+ {t('Unauthorized Access')}
+
+
+
+ {t('User is not permitted to access this instance of PagerDuty Live')}
+ {'. '}
+ {t('Please contact the associated site owner for access')}
+ .
+
+
+
+