diff --git a/public/app/features/teams/TeamPages.test.tsx b/public/app/features/teams/TeamPages.test.tsx index 65084d0dc47..0070f8dee6c 100644 --- a/public/app/features/teams/TeamPages.test.tsx +++ b/public/app/features/teams/TeamPages.test.tsx @@ -1,7 +1,7 @@ import React from 'react'; import { shallow } from 'enzyme'; import { TeamPages, Props } from './TeamPages'; -import { NavModel, Team } from '../../types'; +import { NavModel, Team, OrganizationPreferences } from '../../types'; import { getMockTeam } from './__mocks__/teamMocks'; jest.mock('app/core/config', () => ({ @@ -15,6 +15,9 @@ const setup = (propOverrides?: object) => { loadTeam: jest.fn(), pageName: 'members', team: {} as Team, + loadStarredDashboards: jest.fn(), + loadTeamPreferences: jest.fn(), + preferences: {} as OrganizationPreferences, }; Object.assign(props, propOverrides); @@ -43,10 +46,15 @@ describe('Render', () => { expect(wrapper).toMatchSnapshot(); }); - it('should render settings page', () => { + it('should render settings and preferences page', () => { const { wrapper } = setup({ team: getMockTeam(), pageName: 'settings', + preferences: { + homeDashboardId: 1, + theme: 'Default', + timezone: 'Default', + }, }); expect(wrapper).toMatchSnapshot(); diff --git a/public/app/features/teams/TeamPages.tsx b/public/app/features/teams/TeamPages.tsx index 3dc5a9f6f15..0e39eab7260 100644 --- a/public/app/features/teams/TeamPages.tsx +++ b/public/app/features/teams/TeamPages.tsx @@ -7,12 +7,14 @@ import PageHeader from 'app/core/components/PageHeader/PageHeader'; import TeamMembers from './TeamMembers'; import TeamSettings from './TeamSettings'; import TeamGroupSync from './TeamGroupSync'; -import { NavModel, Team } from 'app/types'; -import { loadTeam } from './state/actions'; +import TeamPreferences from './TeamPreferences'; +import { NavModel, Team, OrganizationPreferences } from 'app/types'; +import { loadTeam, loadTeamPreferences } from './state/actions'; import { getTeam } from './state/selectors'; import { getTeamLoadingNav } from './state/navModel'; import { getNavModel } from 'app/core/selectors/navModel'; import { getRouteParamsId, getRouteParamsPage } from '../../core/selectors/location'; +import { loadStarredDashboards } from '../../core/actions/user'; export interface Props { team: Team; @@ -20,6 +22,9 @@ export interface Props { teamId: number; pageName: string; navModel: NavModel; + preferences: OrganizationPreferences; + loadStarredDashboards: typeof loadStarredDashboards; + loadTeamPreferences: typeof loadTeamPreferences; } interface State { @@ -41,14 +46,16 @@ export class TeamPages extends PureComponent { }; } - componentDidMount() { - this.fetchTeam(); + async componentDidMount() { + await this.props.loadStarredDashboards(); + await this.fetchTeam(); + await this.props.loadTeamPreferences(); } async fetchTeam() { const { loadTeam, teamId } = this.props; - await loadTeam(teamId); + return await loadTeam(teamId); } getCurrentPage() { @@ -66,7 +73,12 @@ export class TeamPages extends PureComponent { return ; case PageTypes.Settings: - return ; + return ( +
+ + +
+ ); case PageTypes.GroupSync: return isSyncEnabled && ; @@ -97,11 +109,14 @@ function mapStateToProps(state) { teamId: teamId, pageName: pageName, team: getTeam(state.team, teamId), + preferences: state.preferences, }; } const mapDispatchToProps = { loadTeam, + loadStarredDashboards, + loadTeamPreferences, }; export default hot(module)(connect(mapStateToProps, mapDispatchToProps)(TeamPages)); diff --git a/public/app/features/teams/TeamPreferences.test.tsx b/public/app/features/teams/TeamPreferences.test.tsx new file mode 100644 index 00000000000..2da8b2b1cfb --- /dev/null +++ b/public/app/features/teams/TeamPreferences.test.tsx @@ -0,0 +1,28 @@ +import React from 'react'; +import { shallow } from 'enzyme'; +import { TeamPreferences, Props } from './TeamPreferences'; + +const setup = () => { + const props: Props = { + preferences: { + homeDashboardId: 1, + timezone: 'UTC', + theme: 'Default', + }, + starredDashboards: [{ id: 1, title: 'Standard dashboard', url: '', uri: '', uid: '', type: '', tags: [] }], + setTeamTimezone: jest.fn(), + setTeamTheme: jest.fn(), + setTeamHomeDashboard: jest.fn(), + updateTeamPreferences: jest.fn(), + }; + + return shallow(); +}; + +describe('Render', () => { + it('should render component', () => { + const wrapper = setup(); + + expect(wrapper).toMatchSnapshot(); + }); +}); diff --git a/public/app/features/teams/TeamPreferences.tsx b/public/app/features/teams/TeamPreferences.tsx new file mode 100644 index 00000000000..e9b6af3dc72 --- /dev/null +++ b/public/app/features/teams/TeamPreferences.tsx @@ -0,0 +1,102 @@ +import React, { PureComponent } from 'react'; +import { connect } from 'react-redux'; +import { Label } from '../../core/components/Label/Label'; +import SimplePicker from '../../core/components/Picker/SimplePicker'; +import { DashboardSearchHit, OrganizationPreferences } from 'app/types'; +import { setTeamHomeDashboard, setTeamTheme, setTeamTimezone, updateTeamPreferences } from './state/actions'; + +export interface Props { + preferences: OrganizationPreferences; + starredDashboards: DashboardSearchHit[]; + setTeamHomeDashboard: typeof setTeamHomeDashboard; + setTeamTheme: typeof setTeamTheme; + setTeamTimezone: typeof setTeamTimezone; + updateTeamPreferences: typeof updateTeamPreferences; +} + +const themes = [{ value: '', text: 'Default' }, { value: 'dark', text: 'Dark' }, { value: 'light', text: 'Light' }]; + +const timezones = [ + { value: '', text: 'Default' }, + { value: 'browser', text: 'Local browser time' }, + { value: 'utc', text: 'UTC' }, +]; + +export class TeamPreferences extends PureComponent { + onSubmitForm = event => { + event.preventDefault(); + this.props.updateTeamPreferences(); + }; + + render() { + const { preferences, starredDashboards, setTeamHomeDashboard, setTeamTimezone, setTeamTheme } = this.props; + + starredDashboards.unshift({ id: 0, title: 'Default', tags: [], type: '', uid: '', uri: '', url: '' }); + + return ( +
+

Preferences

+
+ UI Theme + theme.value === preferences.theme)} + options={themes} + getOptionValue={i => i.value} + getOptionLabel={i => i.text} + onSelected={theme => setTeamTheme(theme.value)} + width={20} + /> +
+
+ + dashboard.id === preferences.homeDashboardId)} + getOptionValue={i => i.id} + getOptionLabel={i => i.title} + onSelected={(dashboard: DashboardSearchHit) => setTeamHomeDashboard(dashboard.id)} + options={starredDashboards} + placeholder="Chose default dashboard" + width={20} + /> +
+
+ + timezone.value === preferences.timezone)} + getOptionValue={i => i.value} + getOptionLabel={i => i.text} + onSelected={timezone => setTeamTimezone(timezone.value)} + options={timezones} + width={20} + /> +
+
+ +
+
+ ); + } +} + +function mapStateToProps(state) { + return { + preferences: state.team.preferences, + starredDashboards: state.user.starredDashboards, + }; +} + +const mapDispatchToProps = { + setTeamHomeDashboard, + setTeamTimezone, + setTeamTheme, + updateTeamPreferences, +}; + +export default connect(mapStateToProps, mapDispatchToProps)(TeamPreferences); diff --git a/public/app/features/teams/__mocks__/teamMocks.ts b/public/app/features/teams/__mocks__/teamMocks.ts index 339f227c081..c3ab2cdfbea 100644 --- a/public/app/features/teams/__mocks__/teamMocks.ts +++ b/public/app/features/teams/__mocks__/teamMocks.ts @@ -1,4 +1,4 @@ -import { Team, TeamGroup, TeamMember } from 'app/types'; +import { Team, TeamGroup, TeamMember, OrganizationPreferences } from 'app/types'; export const getMultipleMockTeams = (numberOfTeams: number): Team[] => { const teams: Team[] = []; @@ -65,3 +65,11 @@ export const getMockTeamGroups = (amount: number): TeamGroup[] => { return groups; }; + +export const getMockTeamPreferences = (): OrganizationPreferences => { + return { + theme: 'dark', + timezone: 'browser', + homeDashboardId: 1, + }; +}; diff --git a/public/app/features/teams/__snapshots__/TeamPages.test.tsx.snap b/public/app/features/teams/__snapshots__/TeamPages.test.tsx.snap index f32b8211d2c..7c5853b107f 100644 --- a/public/app/features/teams/__snapshots__/TeamPages.test.tsx.snap +++ b/public/app/features/teams/__snapshots__/TeamPages.test.tsx.snap @@ -36,7 +36,7 @@ exports[`Render should render member page if team not empty 1`] = ` `; -exports[`Render should render settings page 1`] = ` +exports[`Render should render settings and preferences page 1`] = `
- +
+ + +
`; diff --git a/public/app/features/teams/__snapshots__/TeamPreferences.test.tsx.snap b/public/app/features/teams/__snapshots__/TeamPreferences.test.tsx.snap new file mode 100644 index 00000000000..06bf464a4a0 --- /dev/null +++ b/public/app/features/teams/__snapshots__/TeamPreferences.test.tsx.snap @@ -0,0 +1,136 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`Render should render component 1`] = ` +
+

+ Preferences +

+
+ + UI Theme + + +
+
+ + Home Dashboard + + +
+
+ + +
+
+ +
+
+`; diff --git a/public/app/features/teams/state/actions.ts b/public/app/features/teams/state/actions.ts index d948dc1c5a3..f22b2f98d9f 100644 --- a/public/app/features/teams/state/actions.ts +++ b/public/app/features/teams/state/actions.ts @@ -1,16 +1,20 @@ import { ThunkAction } from 'redux-thunk'; import { getBackendSrv } from 'app/core/services/backend_srv'; -import { StoreState, Team, TeamGroup, TeamMember } from 'app/types'; +import { StoreState, Team, TeamGroup, TeamMember, OrganizationPreferences } from 'app/types'; import { updateNavIndex, UpdateNavIndexAction } from 'app/core/actions'; import { buildNavModel } from './navModel'; export enum ActionTypes { LoadTeams = 'LOAD_TEAMS', LoadTeam = 'LOAD_TEAM', + LoadTeamPreferences = 'LOAD_TEAM_PREFERENCES', SetSearchQuery = 'SET_TEAM_SEARCH_QUERY', SetSearchMemberQuery = 'SET_TEAM_MEMBER_SEARCH_QUERY', LoadTeamMembers = 'TEAM_MEMBERS_LOADED', LoadTeamGroups = 'TEAM_GROUPS_LOADED', + SetTeamTheme = 'SET_TEAM_THEME', + SetTeamHomeDashboard = 'SET_TEAM_HOME_DASHBOARD', + SetTeamTimezone = 'SET_TEAM_TIMEZONE', } export interface LoadTeamsAction { @@ -23,6 +27,11 @@ export interface LoadTeamAction { payload: Team; } +export interface LoadTeamPreferencesAction { + type: ActionTypes.LoadTeamPreferences; + payload: OrganizationPreferences; +} + export interface LoadTeamMembersAction { type: ActionTypes.LoadTeamMembers; payload: TeamMember[]; @@ -43,13 +52,32 @@ export interface SetSearchMemberQueryAction { payload: string; } +export interface SetTeamThemeAction { + type: ActionTypes.SetTeamTheme; + payload: string; +} + +export interface SetTeamHomeDashboardAction { + type: ActionTypes.SetTeamHomeDashboard; + payload: number; +} + +export interface SetTeamTimezoneAction { + type: ActionTypes.SetTeamTimezone; + payload: string; +} + export type Action = | LoadTeamsAction | SetSearchQueryAction | LoadTeamAction + | LoadTeamPreferencesAction | LoadTeamMembersAction | SetSearchMemberQueryAction - | LoadTeamGroupsAction; + | LoadTeamGroupsAction + | SetTeamThemeAction + | SetTeamHomeDashboardAction + | SetTeamTimezoneAction; type ThunkResult = ThunkAction; @@ -73,6 +101,11 @@ const teamGroupsLoaded = (teamGroups: TeamGroup[]): LoadTeamGroupsAction => ({ payload: teamGroups, }); +const teamPreferencesLoaded = (preferences: OrganizationPreferences): LoadTeamPreferencesAction => ({ + type: ActionTypes.LoadTeamPreferences, + payload: preferences, +}); + export const setSearchMemberQuery = (searchQuery: string): SetSearchMemberQueryAction => ({ type: ActionTypes.SetSearchMemberQuery, payload: searchQuery, @@ -83,6 +116,21 @@ export const setSearchQuery = (searchQuery: string): SetSearchQueryAction => ({ payload: searchQuery, }); +export const setTeamTheme = (theme: string) => ({ + type: ActionTypes.SetTeamTheme, + payload: theme, +}); + +export const setTeamHomeDashboard = (id: number) => ({ + type: ActionTypes.SetTeamHomeDashboard, + payload: id, +}); + +export const setTeamTimezone = (timezone: string) => ({ + type: ActionTypes.SetTeamTimezone, + payload: timezone, +}); + export function loadTeams(): ThunkResult { return async dispatch => { const response = await getBackendSrv().get('/api/teams/search', { perpage: 1000, page: 1 }); @@ -160,3 +208,21 @@ export function deleteTeam(id: number): ThunkResult { dispatch(loadTeams()); }; } + +export function loadTeamPreferences(): ThunkResult { + return async (dispatch, getStore) => { + const team = getStore().team.team; + const response = await getBackendSrv().get(`/api/teams/${team.id}/preferences`); + dispatch(teamPreferencesLoaded(response)); + }; +} + +export function updateTeamPreferences() { + return async (dispatch, getStore) => { + const team = getStore().team.team; + const preferences = getStore().team.preferences; + + await getBackendSrv().put(`/api/teams/${team.id}/preferences`, preferences); + window.location.reload(); + }; +} diff --git a/public/app/features/teams/state/reducers.test.ts b/public/app/features/teams/state/reducers.test.ts index 7f7a33d60ac..892895d4184 100644 --- a/public/app/features/teams/state/reducers.test.ts +++ b/public/app/features/teams/state/reducers.test.ts @@ -1,6 +1,6 @@ import { Action, ActionTypes } from './actions'; import { initialTeamsState, initialTeamState, teamReducer, teamsReducer } from './reducers'; -import { getMockTeam, getMockTeamMember } from '../__mocks__/teamMocks'; +import { getMockTeam, getMockTeamMember, getMockTeamPreferences } from '../__mocks__/teamMocks'; describe('teams reducer', () => { it('should set teams', () => { @@ -69,4 +69,17 @@ describe('team reducer', () => { expect(result.searchMemberQuery).toEqual('member'); }); + + it('should set team preferences', () => { + const mockTeamPrefs = getMockTeamPreferences(); + + const action: Action = { + type: ActionTypes.LoadTeamPreferences, + payload: mockTeamPrefs, + }; + + const result = teamReducer(initialTeamState, action); + + expect(result.preferences).toEqual(mockTeamPrefs); + }); }); diff --git a/public/app/features/teams/state/reducers.ts b/public/app/features/teams/state/reducers.ts index 2e72dce0afb..0ef358e19d7 100644 --- a/public/app/features/teams/state/reducers.ts +++ b/public/app/features/teams/state/reducers.ts @@ -1,4 +1,4 @@ -import { Team, TeamGroup, TeamMember, TeamsState, TeamState } from 'app/types'; +import { Team, TeamGroup, TeamMember, TeamsState, TeamState, OrganizationPreferences } from 'app/types'; import { Action, ActionTypes } from './actions'; export const initialTeamsState: TeamsState = { teams: [], searchQuery: '', hasFetched: false }; @@ -7,6 +7,7 @@ export const initialTeamState: TeamState = { members: [] as TeamMember[], groups: [] as TeamGroup[], searchMemberQuery: '', + preferences: {} as OrganizationPreferences, }; export const teamsReducer = (state = initialTeamsState, action: Action): TeamsState => { @@ -33,6 +34,18 @@ export const teamReducer = (state = initialTeamState, action: Action): TeamState case ActionTypes.LoadTeamGroups: return { ...state, groups: action.payload }; + + case ActionTypes.LoadTeamPreferences: + return { ...state, preferences: action.payload }; + + case ActionTypes.SetTeamTheme: + return { ...state, preferences: { ...state.preferences, theme: action.payload } }; + + case ActionTypes.SetTeamHomeDashboard: + return { ...state, preferences: { ...state.preferences, homeDashboardId: action.payload } }; + + case ActionTypes.SetTeamTimezone: + return { ...state, preferences: { ...state.preferences, timezone: action.payload } }; } return state; diff --git a/public/app/features/teams/state/selectors.test.ts b/public/app/features/teams/state/selectors.test.ts index 3764a9355c6..3aab99da1c2 100644 --- a/public/app/features/teams/state/selectors.test.ts +++ b/public/app/features/teams/state/selectors.test.ts @@ -1,6 +1,6 @@ import { getTeam, getTeamMembers, getTeams } from './selectors'; import { getMockTeam, getMockTeamMembers, getMultipleMockTeams } from '../__mocks__/teamMocks'; -import { Team, TeamGroup, TeamsState, TeamState } from '../../../types'; +import { Team, TeamGroup, TeamsState, TeamState, OrganizationPreferences } from '../../../types'; describe('Teams selectors', () => { describe('Get teams', () => { @@ -29,7 +29,13 @@ describe('Team selectors', () => { const mockTeam = getMockTeam(); it('should return team if matching with location team', () => { - const mockState: TeamState = { team: mockTeam, searchMemberQuery: '', members: [], groups: [] }; + const mockState: TeamState = { + team: mockTeam, + searchMemberQuery: '', + members: [], + groups: [], + preferences: {} as OrganizationPreferences, + }; const team = getTeam(mockState, '1'); @@ -46,6 +52,7 @@ describe('Team selectors', () => { searchMemberQuery: '', members: mockTeamMembers, groups: [] as TeamGroup[], + preferences: {} as OrganizationPreferences, }; const members = getTeamMembers(mockState); diff --git a/public/app/types/teams.ts b/public/app/types/teams.ts index a524f0dcf87..b0480f875d6 100644 --- a/public/app/types/teams.ts +++ b/public/app/types/teams.ts @@ -1,3 +1,5 @@ +import { OrganizationPreferences } from './organization'; + export interface Team { id: number; name: string; @@ -31,4 +33,5 @@ export interface TeamState { members: TeamMember[]; groups: TeamGroup[]; searchMemberQuery: string; + preferences: OrganizationPreferences; }