diff --git a/grafana-plugin/src/containers/UserSettings/parts/tabs/GoogleCalendar/GoogleCalendar.tsx b/grafana-plugin/src/containers/UserSettings/parts/tabs/GoogleCalendar/GoogleCalendar.tsx index ad02844d..2ea4a76e 100644 --- a/grafana-plugin/src/containers/UserSettings/parts/tabs/GoogleCalendar/GoogleCalendar.tsx +++ b/grafana-plugin/src/containers/UserSettings/parts/tabs/GoogleCalendar/GoogleCalendar.tsx @@ -1,8 +1,9 @@ import React, { useEffect, useState } from 'react'; import { css } from '@emotion/css'; -import { Button, HorizontalGroup, Icon, Switch, VerticalGroup, useStyles2 } from '@grafana/ui'; +import { Button, HorizontalGroup, Switch, VerticalGroup, useStyles2 } from '@grafana/ui'; import { observer } from 'mobx-react'; +import { getUtilStyles } from 'styles/utils.styles'; import { Block } from 'components/GBlock/Block'; import { Text } from 'components/Text/Text'; @@ -15,23 +16,20 @@ import { UserHelper } from 'models/user/user.helpers'; import { ApiSchemas } from 'network/oncall-api/api.types'; import { useStore } from 'state/useStore'; import { UserActions } from 'utils/authorization/authorization'; +import { DOCS_ROOT } from 'utils/consts'; const GoogleCalendar: React.FC<{ id: ApiSchemas['User']['pk'] }> = observer(({ id }) => { const { userStore, scheduleStore } = useStore(); - const styles = useStyles2(getStyles); + const utils = useStyles2(getUtilStyles); - const [googleCalendarSettings, setGoogleCalendarSettings] = - useState(); const [showSchedulesDropdown, setShowSchedulesDropdown] = useState(); + const user = userStore.items[id]; + useEffect(() => { - (async () => { - const user = await userStore.fetchItemById({ userPk: id }); - setGoogleCalendarSettings(user.google_calendar_settings); - setShowSchedulesDropdown(user.google_calendar_settings.oncall_schedules_to_consider_for_shift_swaps?.length > 0); - })(); - }, []); + setShowSchedulesDropdown(user.google_calendar_settings?.oncall_schedules_to_consider_for_shift_swaps?.length > 0); + }, [user]); const handleShowSchedulesDropdownChange = (event: React.ChangeEvent) => { const value = event.target.checked; @@ -43,111 +41,142 @@ const GoogleCalendar: React.FC<{ id: ApiSchemas['User']['pk'] }> = observer(({ i }; const handleSchedulesChange = (value) => { - setGoogleCalendarSettings((v) => ({ ...v, oncall_schedules_to_consider_for_shift_swaps: value })); - - userStore.updateCurrentUser({ - google_calendar_settings: { ...googleCalendarSettings, oncall_schedules_to_consider_for_shift_swaps: value }, + userStore.updateUser({ + pk: id, + google_calendar_settings: { + ...user.google_calendar_settings, + oncall_schedules_to_consider_for_shift_swaps: value, + }, }); }; - const user = userStore.items[id]; - return ( - - - - {user.has_google_oauth2_connected ? ( - - - - - Google calendar is connected - - - - - - - - - ) : ( - - - -
- Connect your Google Calendar - - This connection allows Grafana OnCall to read your Out of Office events and autogenerate Shift Swap - Requests - -
- + + + {user.has_google_oauth2_connected ? ( + + + - + + + - )} - - {user.has_google_oauth2_connected && ( - - - - - Specify the schedules to sync with Google calendar - - - {showSchedulesDropdown && ( -
- - - isMulti - showSearch - allowClear - disabled={false} - items={scheduleStore.items} - fetchItemsFn={scheduleStore.updateItems} - fetchItemFn={scheduleStore.updateItem} - getSearchResult={scheduleStore.getSearchResult} - displayField="name" - valueField="id" - placeholder="Select Schedules" - value={googleCalendarSettings?.oncall_schedules_to_consider_for_shift_swaps} - onChange={handleSchedulesChange} - /> - -
- )} - - )} - - - - - Grafana OnCall's use and transfer to any other app of information received from Google APIs will adhere to{' '} - - Google API Services User Data Policy - - , including the Limited Use requirements. - + + ) : ( + + + + + - - - + )} + + {user.has_google_oauth2_connected && ( + + + + + Specify the schedules to sync with Google calendar + + + {showSchedulesDropdown && ( +
+ + + isMulti + showSearch + allowClear + disabled={false} + items={scheduleStore.items} + fetchItemsFn={scheduleStore.updateItems} + fetchItemFn={scheduleStore.updateItem} + getSearchResult={scheduleStore.getSearchResult} + displayField="name" + valueField="id" + placeholder="Select Schedules" + value={user.google_calendar_settings.oncall_schedules_to_consider_for_shift_swaps} + onChange={handleSchedulesChange} + /> + +
+ )} + + )} + + ); }); export const getStyles = () => ({ - root: css({ - width: '100%', + icon: css({ + marginTop: '6px', }), }); +const Heading: React.FC<{ connected: boolean }> = ({ connected }) => { + const styles = useStyles2(getStyles); + + return ( + +
+ +
+ + + + {connected ? 'Google calendar is connected' : 'Connect your Google Calendar'} + + {connected ? ( + + Add #grafana-oncall-ignore to an Out of Office event title to exclude it from + Shift Swap Request creation.{' '} + + Read more + + + ) : ( + + This connection allows OnCall to read your Out of Office events and autogenerate Shift Swap Requests.{' '} + + Read more + + + )} + + {!connected && ( + + Grafana OnCall's use and transfer to any other app of information received from Google APIs will adhere +
+ to{' '} + + + Google API Services User Data Policy + + + , including the Limited Use requirements. + + )} + + + ); +}; + export { GoogleCalendar }; diff --git a/grafana-plugin/src/models/user/user.ts b/grafana-plugin/src/models/user/user.ts index 15d66ab0..34a42f25 100644 --- a/grafana-plugin/src/models/user/user.ts +++ b/grafana-plugin/src/models/user/user.ts @@ -52,6 +52,7 @@ export class UserStore { (acc: { [key: number]: ApiSchemas['User'] }, item: ApiSchemas['User']) => ({ ...acc, [item.pk]: { + ...this.items[item.pk], ...item, timezone: UserHelper.getTimezone(item), },