Trying to reduce the amount of duplication with preferences

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, OrganizationPreferences } from '../../types';
+import { NavModel, Team } from '../../types';
 import { getMockTeam } from './__mocks__/teamMocks';
 
 jest.mock('app/core/config', () => ({
@@ -15,9 +15,6 @@ 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);

public/app/features/teams/TeamPages.tsx

@@ -7,14 +7,12 @@ import PageHeader from 'app/core/components/PageHeader/PageHeader';
 import TeamMembers from './TeamMembers';
 import TeamSettings from './TeamSettings';
 import TeamGroupSync from './TeamGroupSync';
-import TeamPreferences from './TeamPreferences';
-import { NavModel, Team, OrganizationPreferences } from 'app/types';
-import { loadTeam, loadTeamPreferences } from './state/actions';
+import { NavModel, Team } from 'app/types';
+import { loadTeam } 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;
@@ -22,9 +20,6 @@ export interface Props {
   teamId: number;
   pageName: string;
   navModel: NavModel;
-  preferences: OrganizationPreferences;
-  loadStarredDashboards: typeof loadStarredDashboards;
-  loadTeamPreferences: typeof loadTeamPreferences;
 }
 
 interface State {
@@ -47,9 +42,7 @@ export class TeamPages extends PureComponent<Props, State> {
   }
 
   async componentDidMount() {
-    await this.props.loadStarredDashboards();
     await this.fetchTeam();
-    await this.props.loadTeamPreferences();
   }
 
   async fetchTeam() {
@@ -73,13 +66,7 @@ export class TeamPages extends PureComponent<Props, State> {
         return <TeamMembers syncEnabled={isSyncEnabled} />;
 
       case PageTypes.Settings:
-        return (
-          <div>
-            <TeamSettings />
-            <TeamPreferences />
-          </div>
-        );
-
+        return <TeamSettings />;
       case PageTypes.GroupSync:
         return isSyncEnabled && <TeamGroupSync />;
     }
@@ -109,14 +96,11 @@ 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));

public/app/features/teams/TeamPreferences.test.tsx

@@ -1,28 +0,0 @@
-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(<TeamPreferences {...props} />);
-};
-
-describe('Render', () => {
-  it('should render component', () => {
-    const wrapper = setup();
-
-    expect(wrapper).toMatchSnapshot();
-  });
-});

public/app/features/teams/TeamPreferences.tsx

@@ -1,105 +0,0 @@
-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<Props> {
-  onSubmitForm = event => {
-    event.preventDefault();
-    this.props.updateTeamPreferences();
-  };
-
-  render() {
-    const { preferences, starredDashboards, setTeamHomeDashboard, setTeamTimezone, setTeamTheme } = this.props;
-
-    const dashboards: DashboardSearchHit[] = [
-      { id: 0, title: 'Default', tags: [], type: '', uid: '', uri: '', url: '' },
-      ...starredDashboards,
-    ];
-
-    return (
-      <form className="section gf-form-group" onSubmit={this.onSubmitForm}>
-        <h3 className="page-heading">Preferences</h3>
-        <div className="gf-form">
-          <span className="gf-form-label width-11">UI Theme</span>
-          <SimplePicker
-            defaultValue={themes.find(theme => theme.value === preferences.theme)}
-            options={themes}
-            getOptionValue={i => i.value}
-            getOptionLabel={i => i.text}
-            onSelected={theme => setTeamTheme(theme.value)}
-            width={20}
-          />
-        </div>
-        <div className="gf-form">
-          <Label
-            width={11}
-            tooltip="Not finding dashboard you want? Star it first, then it should appear in this select box."
-          >
-            Home Dashboard
-          </Label>
-          <SimplePicker
-            defaultValue={dashboards.find(dashboard => dashboard.id === preferences.homeDashboardId)}
-            getOptionValue={i => i.id}
-            getOptionLabel={i => i.title}
-            onSelected={(dashboard: DashboardSearchHit) => setTeamHomeDashboard(dashboard.id)}
-            options={dashboards}
-            placeholder="Chose default dashboard"
-            width={20}
-          />
-        </div>
-        <div className="gf-form">
-          <label className="gf-form-label width-11">Timezone</label>
-          <SimplePicker
-            defaultValue={timezones.find(timezone => timezone.value === preferences.timezone)}
-            getOptionValue={i => i.value}
-            getOptionLabel={i => i.text}
-            onSelected={timezone => setTeamTimezone(timezone.value)}
-            options={timezones}
-            width={20}
-          />
-        </div>
-        <div className="gf-form-button-row">
-          <button type="submit" className="btn btn-success">
-            Save
-          </button>
-        </div>
-      </form>
-    );
-  }
-}
-
-function mapStateToProps(state) {
-  return {
-    preferences: state.team.preferences,
-    starredDashboards: state.user.starredDashboards,
-  };
-}
-
-const mapDispatchToProps = {
-  setTeamHomeDashboard,
-  setTeamTimezone,
-  setTeamTheme,
-  updateTeamPreferences,
-};
-
-export default connect(mapStateToProps, mapDispatchToProps)(TeamPreferences);

public/app/features/teams/TeamSettings.tsx

@@ -1,10 +1,12 @@
 import React from 'react';
 import { connect } from 'react-redux';
+
 import { Label } from 'app/core/components/Label/Label';
-import { Team } from '../../types';
+import { SharedPreferences } from 'app/core/components/SharedPreferences/SharedPreferences';
 import { updateTeam } from './state/actions';
-import { getRouteParamsId } from '../../core/selectors/location';
+import { getRouteParamsId } from 'app/core/selectors/location';
 import { getTeam } from './state/selectors';
+import { Team } from 'app/types';
 
 export interface Props {
   team: Team;
@@ -41,6 +43,7 @@ export class TeamSettings extends React.Component<Props, State> {
   };
 
   render() {
+    const { team } = this.props;
     const { name, email } = this.state;
 
     return (
@@ -76,6 +79,7 @@ export class TeamSettings extends React.Component<Props, State> {
             </button>
           </div>
         </form>
+        <SharedPreferences resourceUri={`teams/${team.id}`} />
       </div>
     );
   }

public/app/features/teams/__mocks__/teamMocks.ts

@@ -1,4 +1,4 @@
-import { Team, TeamGroup, TeamMember, OrganizationPreferences } from 'app/types';
+import { Team, TeamGroup, TeamMember } from 'app/types';
 
 export const getMultipleMockTeams = (numberOfTeams: number): Team[] => {
   const teams: Team[] = [];
@@ -65,11 +65,3 @@ export const getMockTeamGroups = (amount: number): TeamGroup[] => {
 
   return groups;
 };
-
-export const getMockTeamPreferences = (): OrganizationPreferences => {
-  return {
-    theme: 'dark',
-    timezone: 'browser',
-    homeDashboardId: 1,
-  };
-};

public/app/features/teams/state/actions.ts

@@ -1,20 +1,16 @@
 import { ThunkAction } from 'redux-thunk';
 import { getBackendSrv } from 'app/core/services/backend_srv';
-import { StoreState, Team, TeamGroup, TeamMember, OrganizationPreferences } from 'app/types';
+import { StoreState, Team, TeamGroup, TeamMember } 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 {
@@ -27,11 +23,6 @@ export interface LoadTeamAction {
   payload: Team;
 }
 
-export interface LoadTeamPreferencesAction {
-  type: ActionTypes.LoadTeamPreferences;
-  payload: OrganizationPreferences;
-}
-
 export interface LoadTeamMembersAction {
   type: ActionTypes.LoadTeamMembers;
   payload: TeamMember[];
@@ -52,32 +43,13 @@ 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
-  | SetTeamThemeAction
-  | SetTeamHomeDashboardAction
-  | SetTeamTimezoneAction;
+  | LoadTeamGroupsAction;
 
 type ThunkResult<R> = ThunkAction<R, StoreState, undefined, Action | UpdateNavIndexAction>;
 
@@ -101,11 +73,6 @@ 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,
@@ -116,21 +83,6 @@ 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<void> {
   return async dispatch => {
     const response = await getBackendSrv().get('/api/teams/search', { perpage: 1000, page: 1 });
@@ -208,22 +160,3 @@ export function deleteTeam(id: number): ThunkResult<void> {
     dispatch(loadTeams());
   };
 }
-
-export function loadTeamPreferences(): ThunkResult<void> {
-  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);
-
-    dispatch(loadTeamPreferences());
-  };
-}

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, getMockTeamPreferences } from '../__mocks__/teamMocks';
+import { getMockTeam, getMockTeamMember } from '../__mocks__/teamMocks';
 
 describe('teams reducer', () => {
   it('should set teams', () => {
@@ -69,17 +69,4 @@ 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);
-  });
 });

public/app/features/teams/state/reducers.ts

@@ -1,4 +1,4 @@
-import { Team, TeamGroup, TeamMember, TeamsState, TeamState, OrganizationPreferences } from 'app/types';
+import { Team, TeamGroup, TeamMember, TeamsState, TeamState } from 'app/types';
 import { Action, ActionTypes } from './actions';
 
 export const initialTeamsState: TeamsState = { teams: [], searchQuery: '', hasFetched: false };
@@ -7,7 +7,6 @@ export const initialTeamState: TeamState = {
   members: [] as TeamMember[],
   groups: [] as TeamGroup[],
   searchMemberQuery: '',
-  preferences: {} as OrganizationPreferences,
 };
 
 export const teamsReducer = (state = initialTeamsState, action: Action): TeamsState => {
@@ -34,18 +33,6 @@ 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;

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, OrganizationPreferences } from '../../../types';
+import { Team, TeamGroup, TeamsState, TeamState } from '../../../types';
 
 describe('Teams selectors', () => {
   describe('Get teams', () => {
@@ -10,7 +10,6 @@ describe('Teams selectors', () => {
       const mockState: TeamsState = { teams: mockTeams, searchQuery: '', hasFetched: false };
 
       const teams = getTeams(mockState);
-
       expect(teams).toEqual(mockTeams);
     });
 
@@ -18,7 +17,6 @@ describe('Teams selectors', () => {
       const mockState: TeamsState = { teams: mockTeams, searchQuery: '5', hasFetched: false };
 
       const teams = getTeams(mockState);
-
       expect(teams.length).toEqual(1);
     });
   });
@@ -34,11 +32,9 @@ describe('Team selectors', () => {
         searchMemberQuery: '',
         members: [],
         groups: [],
-        preferences: {} as OrganizationPreferences,
       };
 
       const team = getTeam(mockState, '1');
-
       expect(team).toEqual(mockTeam);
     });
   });
@@ -52,11 +48,9 @@ describe('Team selectors', () => {
         searchMemberQuery: '',
         members: mockTeamMembers,
         groups: [] as TeamGroup[],
-        preferences: {} as OrganizationPreferences,
       };
 
       const members = getTeamMembers(mockState);
-
       expect(members).toEqual(mockTeamMembers);
     });
   });