From 7a2c465c4a020cb7ad6c38735afa85fbe9f2eb93 Mon Sep 17 00:00:00 2001 From: Leonard Kim Date: Tue, 6 Nov 2018 11:48:09 -0800 Subject: [PATCH] fix(calendar): show error message if authorization fails on event fetch --- css/_meetings_list.scss | 8 +- lang/main.json | 5 ++ react/features/calendar-sync/actionTypes.js | 11 +++ react/features/calendar-sync/actions.web.js | 17 +++++ .../components/CalendarList.web.js | 73 ++++++++++++++++++- react/features/calendar-sync/constants.js | 11 +++ react/features/calendar-sync/functions.web.js | 24 +++++- react/features/calendar-sync/reducer.js | 4 + 8 files changed, 145 insertions(+), 8 deletions(-) diff --git a/css/_meetings_list.scss b/css/_meetings_list.scss index bef7e4e3b..ba8110af9 100644 --- a/css/_meetings_list.scss +++ b/css/_meetings_list.scss @@ -29,13 +29,19 @@ background: #0074E0; border-radius: 4px; color: #FFFFFF; - display: flex; + display: inline-block; justify-content: center; align-items: center; padding: 5px 10px; cursor: pointer; } + .calendar-action-buttons { + .button { + margin: 0px 10px; + } + } + .item { background: rgba(255,255,255,0.50); box-sizing: border-box; diff --git a/lang/main.json b/lang/main.json index 785cc0f82..21cb4201a 100644 --- a/lang/main.json +++ b/lang/main.json @@ -662,6 +662,11 @@ "addMeetingURL": "Add a meeting link", "confirmAddLink": "Do you want to add a Jitsi link to this event?", "confirmAddLinkTitle": "Calendar", + "error": { + "appConfiguration": "Calendar integration is not properly configured.", + "generic": "An error has occurred. Please check your calendar settings or try refreshing the calendar.", + "notSignedIn": "An error occurred while authenticating to see calendar events. Please check your calendar settings and try logging in again." + }, "join": "Join", "joinTooltip": "Join the meeting", "nextMeeting": "next meeting", diff --git a/react/features/calendar-sync/actionTypes.js b/react/features/calendar-sync/actionTypes.js index fa260e27d..ccc6fffba 100644 --- a/react/features/calendar-sync/actionTypes.js +++ b/react/features/calendar-sync/actionTypes.js @@ -33,6 +33,17 @@ export const REFRESH_CALENDAR = Symbol('REFRESH_CALENDAR'); */ export const SET_CALENDAR_AUTHORIZATION = Symbol('SET_CALENDAR_AUTHORIZATION'); +/** + * Action to update the last error that occurred while trying to authenticate + * with or fetch data from the calendar integration. + * + * { + * type: SET_CALENDAR_ERROR, + * error: ?Object + * } + */ +export const SET_CALENDAR_ERROR = Symbol('SET_CALENDAR_ERROR'); + /** * Action to update the current calendar entry list in the store. * diff --git a/react/features/calendar-sync/actions.web.js b/react/features/calendar-sync/actions.web.js index af97d0d95..783549d3b 100644 --- a/react/features/calendar-sync/actions.web.js +++ b/react/features/calendar-sync/actions.web.js @@ -8,6 +8,7 @@ import { createCalendarConnectedEvent, sendAnalytics } from '../analytics'; import { CLEAR_CALENDAR_INTEGRATION, SET_CALENDAR_AUTH_STATE, + SET_CALENDAR_ERROR, SET_CALENDAR_INTEGRATION, SET_CALENDAR_PROFILE_EMAIL, SET_LOADING_CALENDAR_EVENTS @@ -119,6 +120,22 @@ export function setCalendarAPIAuthState(newState: ?Object) { }; } +/** + * Sends an action to update the calendar error state in redux. + * + * @param {Object} error - An object with error details. + * @returns {{ + * type: SET_CALENDAR_ERROR, + * error: Object + * }} + */ +export function setCalendarError(error: ?Object) { + return { + type: SET_CALENDAR_ERROR, + error + }; +} + /** * Sends an action to update the current calendar profile email state in redux. * diff --git a/react/features/calendar-sync/components/CalendarList.web.js b/react/features/calendar-sync/components/CalendarList.web.js index 4e959d341..4d0c56aa5 100644 --- a/react/features/calendar-sync/components/CalendarList.web.js +++ b/react/features/calendar-sync/components/CalendarList.web.js @@ -13,6 +13,7 @@ import { } from '../../analytics'; import { refreshCalendar } from '../actions'; +import { ERRORS } from '../constants'; import { isCalendarEnabled } from '../functions'; import CalendarListContent from './CalendarListContent'; @@ -24,6 +25,12 @@ declare var interfaceConfig: Object; */ type Props = { + /** + * The error object containing details about any error that has occurred + * while interacting with calendar integration. + */ + _calendarError: ?Object, + /** * Whether or not a calendar may be connected for fetching calendar events. */ @@ -87,6 +94,54 @@ class CalendarList extends AbstractPage { ); } + /** + * Returns a component for showing the error message related to calendar + * sync. + * + * @private + * @returns {React$Component} + */ + _getErrorMessage() { + const { _calendarError = {}, t } = this.props; + + let errorMessageKey = 'calendarSync.error.generic'; + let showRefreshButton = true; + let showSettingsButton = true; + + if (_calendarError.error === ERRORS.GOOGLE_APP_MISCONFIGURED) { + errorMessageKey = 'calendarSync.error.appConfiguration'; + showRefreshButton = false; + showSettingsButton = false; + } else if (_calendarError.error === ERRORS.AUTH_FAILED) { + errorMessageKey = 'calendarSync.error.notSignedIn'; + showRefreshButton = false; + } + + return ( +
+

+ { t(errorMessageKey) } +

+
+ { showSettingsButton + &&
+ { t('calendarSync.permissionButton') } +
+ } + { showRefreshButton + &&
+ { t('calendarSync.refresh') } +
+ } +
+
+ ); + } + _getRenderListEmptyComponent: () => Object; /** @@ -97,12 +152,21 @@ class CalendarList extends AbstractPage { * @returns {React$Component} */ _getRenderListEmptyComponent() { - const { _hasIntegrationSelected, _hasLoadedEvents, t } = this.props; + const { + _calendarError, + _hasIntegrationSelected, + _hasLoadedEvents, + t + } = this.props; - if (_hasIntegrationSelected && _hasLoadedEvents) { + if (_calendarError) { + return this._getErrorMessage(); + } else if (_hasIntegrationSelected && _hasLoadedEvents) { return (
-
{ t('calendarSync.noEvents') }
+

+ { t('calendarSync.noEvents') } +

@@ -172,18 +236,21 @@ class CalendarList extends AbstractPage { * @param {Object} state - The Redux state. * @private * @returns {{ + * _calendarError: Object, * _hasIntegrationSelected: boolean, * _hasLoadedEvents: boolean * }} */ function _mapStateToProps(state) { const { + error, events, integrationType, isLoadingEvents } = state['features/calendar-sync']; return { + _calendarError: error, _hasIntegrationSelected: Boolean(integrationType), _hasLoadedEvents: Boolean(events) || !isLoadingEvents }; diff --git a/react/features/calendar-sync/constants.js b/react/features/calendar-sync/constants.js index 966ffb6cb..fc4da87d0 100644 --- a/react/features/calendar-sync/constants.js +++ b/react/features/calendar-sync/constants.js @@ -10,6 +10,17 @@ export const CALENDAR_TYPE = { MICROSOFT: 'microsoft' }; +/** + * An enumeration of known errors that can occur while interacting with the + * calendar integration. + * + * @enum {string} + */ +export const ERRORS = { + AUTH_FAILED: 'sign_in_failed', + GOOGLE_APP_MISCONFIGURED: 'idpiframe_initialization_failed' +}; + /** * The number of days to fetch. */ diff --git a/react/features/calendar-sync/functions.web.js b/react/features/calendar-sync/functions.web.js index 085a714ee..1abd7d145 100644 --- a/react/features/calendar-sync/functions.web.js +++ b/react/features/calendar-sync/functions.web.js @@ -1,10 +1,15 @@ // @flow -import { setLoadingCalendarEvents } from './actions'; +import { + clearCalendarIntegration, + setCalendarError, + setLoadingCalendarEvents +} from './actions'; export * from './functions.any'; import { CALENDAR_TYPE, + ERRORS, FETCH_END_DAYS, FETCH_START_DAYS } from './constants'; @@ -66,7 +71,9 @@ export function _fetchCalendarEntries( return Promise.resolve(); } - return Promise.reject('Not authorized, please sign in!'); + return Promise.reject({ + error: ERRORS.AUTH_FAILED + }); }) .then(() => dispatch(integration.getCalendarEntries( FETCH_START_DAYS, FETCH_END_DAYS))) @@ -74,8 +81,17 @@ export function _fetchCalendarEntries( dispatch, getState }, events)) - .catch(error => - logger.error('Error fetching calendar.', error)) + .then(() => { + dispatch(setCalendarError()); + }, error => { + logger.error('Error fetching calendar.', error); + + if (error.error === ERRORS.AUTH_FAILED) { + dispatch(clearCalendarIntegration()); + } + + dispatch(setCalendarError(error)); + }) .then(() => dispatch(setLoadingCalendarEvents(false))); } diff --git a/react/features/calendar-sync/reducer.js b/react/features/calendar-sync/reducer.js index 144500c39..a7d9ad27b 100644 --- a/react/features/calendar-sync/reducer.js +++ b/react/features/calendar-sync/reducer.js @@ -8,6 +8,7 @@ import { CLEAR_CALENDAR_INTEGRATION, SET_CALENDAR_AUTH_STATE, SET_CALENDAR_AUTHORIZATION, + SET_CALENDAR_ERROR, SET_CALENDAR_EVENTS, SET_CALENDAR_INTEGRATION, SET_CALENDAR_PROFILE_EMAIL, @@ -86,6 +87,9 @@ isCalendarEnabled() case SET_CALENDAR_AUTHORIZATION: return set(state, 'authorization', action.authorization); + case SET_CALENDAR_ERROR: + return set(state, 'error', action.error); + case SET_CALENDAR_EVENTS: return set(state, 'events', action.events);