Merge pull request #14034 from grafana/12550_team_preferences

Team preferences support

docs/sources/http_api/team.md

@@ -30,7 +30,7 @@ Authorization: Basic YWRtaW46YWRtaW4=
 
 ### Using the query parameter
 
-Default value for the `perpage` parameter is `1000` and for the `page` parameter is `1`. 
+Default value for the `perpage` parameter is `1000` and for the `page` parameter is `1`.
 
 The `totalCount` field in the response can be used for pagination of the teams list E.g. if `totalCount` is equal to 100 teams and the `perpage` parameter is set to 10 then there are 10 pages of teams.
 
@@ -314,3 +314,67 @@ Status Codes:
 - **401** - Unauthorized
 - **403** - Permission denied
 - **404** - Team not found/Team member not found
+
+## Get Team Preferences
+
+`GET /api/teams/:teamId/preferences`
+
+**Example Request**:
+
+```http
+GET /api/teams/2/preferences HTTP/1.1
+Accept: application/json
+Content-Type: application/json
+Authorization: Bearer eyJrIjoiT0tTcG1pUlY2RnVKZTFVaDFsNFZXdE9ZWmNrMkZYbk
+```
+
+**Example Response**:
+
+```http
+HTTP/1.1 200
+Content-Type: application/json
+
+{
+  "theme": "",
+  "homeDashboardId": 0,
+  "timezone": ""
+}
+```
+
+## Update Team Preferences
+
+`PUT /api/teams/:teamId/preferences`
+
+**Example Request**:
+
+```http
+PUT /api/teams/2/preferences HTTP/1.1
+Accept: application/json
+Content-Type: application/json
+Authorization: Bearer eyJrIjoiT0tTcG1pUlY2RnVKZTFVaDFsNFZXdE9ZWmNrMkZYbk
+
+{
+  "theme": "dark",
+  "homeDashboardId": 39,
+  "timezone": "utc"
+}
+```
+
+JSON Body Schema:
+
+- **theme** - One of: ``light``, ``dark``, or an empty string for the default theme
+- **homeDashboardId** - The numerical ``:id`` of a dashboard, default: ``0``
+- **timezone** - One of: ``utc``, ``browser``, or an empty string for the default
+
+Omitting a key will cause the current value to be replaced with the system default value.
+
+**Example Response**:
+
+```http
+HTTP/1.1 200
+Content-Type: text/plain; charset=utf-8
+
+{
+  "message":"Preferences updated"
+}
+```

pkg/api/api.go

@@ -155,6 +155,8 @@ func (hs *HTTPServer) registerRoutes() {
 			teamsRoute.Get("/:teamId/members", Wrap(GetTeamMembers))
 			teamsRoute.Post("/:teamId/members", bind(m.AddTeamMemberCommand{}), Wrap(AddTeamMember))
 			teamsRoute.Delete("/:teamId/members/:userId", Wrap(RemoveTeamMember))
+			teamsRoute.Get("/:teamId/preferences", Wrap(GetTeamPreferences))
+			teamsRoute.Put("/:teamId/preferences", bind(dtos.UpdatePrefsCmd{}), Wrap(UpdateTeamPreferences))
 		}, reqOrgAdmin)
 
 		// team without requirement of user to be org admin

pkg/api/dashboard.go

@@ -293,7 +293,7 @@ func PostDashboard(c *m.ReqContext, cmd m.SaveDashboardCommand) Response {
 }
 
 func GetHomeDashboard(c *m.ReqContext) Response {
-	prefsQuery := m.GetPreferencesWithDefaultsQuery{OrgId: c.OrgId, UserId: c.UserId}
+	prefsQuery := m.GetPreferencesWithDefaultsQuery{User: c.SignedInUser}
 	if err := bus.Dispatch(&prefsQuery); err != nil {
 		return Error(500, "Failed to get preferences", err)
 	}

pkg/api/index.go

@@ -23,7 +23,7 @@ func (hs *HTTPServer) setIndexViewData(c *m.ReqContext) (*dtos.IndexViewData, er
 		return nil, err
 	}
 
-	prefsQuery := m.GetPreferencesWithDefaultsQuery{OrgId: c.OrgId, UserId: c.UserId}
+	prefsQuery := m.GetPreferencesWithDefaultsQuery{User: c.SignedInUser}
 	if err := bus.Dispatch(&prefsQuery); err != nil {
 		return nil, err
 	}

pkg/api/preferences.go

@@ -21,11 +21,11 @@ func SetHomeDashboard(c *m.ReqContext, cmd m.SavePreferencesCommand) Response {
 
 // GET /api/user/preferences
 func GetUserPreferences(c *m.ReqContext) Response {
-	return getPreferencesFor(c.OrgId, c.UserId)
+	return getPreferencesFor(c.OrgId, c.UserId, 0)
 }
 
-func getPreferencesFor(orgID int64, userID int64) Response {
-	prefsQuery := m.GetPreferencesQuery{UserId: userID, OrgId: orgID}
+func getPreferencesFor(orgID, userID, teamID int64) Response {
+	prefsQuery := m.GetPreferencesQuery{UserId: userID, OrgId: orgID, TeamId: teamID}
 
 	if err := bus.Dispatch(&prefsQuery); err != nil {
 		return Error(500, "Failed to get preferences", err)
@@ -42,13 +42,14 @@ func getPreferencesFor(orgID int64, userID int64) Response {
 
 // PUT /api/user/preferences
 func UpdateUserPreferences(c *m.ReqContext, dtoCmd dtos.UpdatePrefsCmd) Response {
-	return updatePreferencesFor(c.OrgId, c.UserId, &dtoCmd)
+	return updatePreferencesFor(c.OrgId, c.UserId, 0, &dtoCmd)
 }
 
-func updatePreferencesFor(orgID int64, userID int64, dtoCmd *dtos.UpdatePrefsCmd) Response {
+func updatePreferencesFor(orgID, userID, teamId int64, dtoCmd *dtos.UpdatePrefsCmd) Response {
 	saveCmd := m.SavePreferencesCommand{
 		UserId:          userID,
 		OrgId:           orgID,
+		TeamId:          teamId,
 		Theme:           dtoCmd.Theme,
 		Timezone:        dtoCmd.Timezone,
 		HomeDashboardId: dtoCmd.HomeDashboardID,
@@ -63,10 +64,10 @@ func updatePreferencesFor(orgID int64, userID int64, dtoCmd *dtos.UpdatePrefsCmd
 
 // GET /api/org/preferences
 func GetOrgPreferences(c *m.ReqContext) Response {
-	return getPreferencesFor(c.OrgId, 0)
+	return getPreferencesFor(c.OrgId, 0, 0)
 }
 
 // PUT /api/org/preferences
 func UpdateOrgPreferences(c *m.ReqContext, dtoCmd dtos.UpdatePrefsCmd) Response {
-	return updatePreferencesFor(c.OrgId, 0, &dtoCmd)
+	return updatePreferencesFor(c.OrgId, 0, 0, &dtoCmd)
 }

pkg/api/team.go

@@ -96,3 +96,13 @@ func GetTeamByID(c *m.ReqContext) Response {
 	query.Result.AvatarUrl = dtos.GetGravatarUrlWithDefault(query.Result.Email, query.Result.Name)
 	return JSON(200, &query.Result)
 }
+
+// GET /api/teams/:teamId/preferences
+func GetTeamPreferences(c *m.ReqContext) Response {
+	return getPreferencesFor(c.OrgId, 0, c.ParamsInt64(":teamId"))
+}
+
+// PUT /api/teams/:teamId/preferences
+func UpdateTeamPreferences(c *m.ReqContext, dtoCmd dtos.UpdatePrefsCmd) Response {
+	return updatePreferencesFor(c.OrgId, 0, c.ParamsInt64(":teamId"), &dtoCmd)
+}

pkg/models/preferences.go

@@ -14,6 +14,7 @@ type Preferences struct {
 	Id              int64
 	OrgId           int64
 	UserId          int64
+	TeamId          int64
 	Version         int
 	HomeDashboardId int64
 	Timezone        string
@@ -29,14 +30,13 @@ type GetPreferencesQuery struct {
 	Id     int64
 	OrgId  int64
 	UserId int64
+	TeamId int64
 
 	Result *Preferences
 }
 
 type GetPreferencesWithDefaultsQuery struct {
-	Id     int64
-	OrgId  int64
-	UserId int64
+	User *SignedInUser
 
 	Result *Preferences
 }
@@ -46,6 +46,7 @@ type GetPreferencesWithDefaultsQuery struct {
 type SavePreferencesCommand struct {
 	UserId int64
 	OrgId  int64
+	TeamId int64
 
 	HomeDashboardId int64  `json:"homeDashboardId"`
 	Timezone        string `json:"timezone"`

pkg/services/sqlstore/migrations/preferences_mig.go

@@ -34,4 +34,13 @@ func addPreferencesMigrations(mg *Migrator) {
 		{Name: "timezone", Type: DB_NVarchar, Length: 50, Nullable: false},
 		{Name: "theme", Type: DB_NVarchar, Length: 20, Nullable: false},
 	}))
+
+	mg.AddMigration("Add column team_id in preferences", NewAddColumnMigration(preferencesV2, &Column{
+		Name: "team_id", Type: DB_BigInt, Nullable: true,
+	}))
+
+	mg.AddMigration("Update team_id column values in preferences", NewRawSqlMigration("").
+		Sqlite("UPDATE preferences SET team_id=0 WHERE team_id IS NULL;").
+		Postgres("UPDATE preferences SET team_id=0 WHERE team_id IS NULL;").
+		Mysql("UPDATE preferences SET team_id=0 WHERE team_id IS NULL;"))
 }

pkg/services/sqlstore/preferences.go

 package sqlstore
 
 import (
+	"strings"
 	"time"
 
 	"github.com/grafana/grafana/pkg/bus"
@@ -16,11 +17,22 @@ func init() {
 }
 
 func GetPreferencesWithDefaults(query *m.GetPreferencesWithDefaultsQuery) error {
-
+	params := make([]interface{}, 0)
+	filter := ""
+	if len(query.User.Teams) > 0 {
+		filter = "(org_id=? AND team_id IN (?" + strings.Repeat(",?", len(query.User.Teams)-1) + ")) OR "
+		params = append(params, query.User.OrgId)
+		for _, v := range query.User.Teams {
+			params = append(params, v)
+		}
+	}
+	filter += "(org_id=? AND user_id=? AND team_id=0) OR (org_id=? AND team_id=0 AND user_id=0)"
+	params = append(params, query.User.OrgId)
+	params = append(params, query.User.UserId)
+	params = append(params, query.User.OrgId)
 	prefs := make([]*m.Preferences, 0)
-	filter := "(org_id=? AND user_id=?) OR (org_id=? AND user_id=0)"
-	err := x.Where(filter, query.OrgId, query.UserId, query.OrgId).
-		OrderBy("user_id ASC").
+	err := x.Where(filter, params...).
+		OrderBy("user_id ASC, team_id ASC").
 		Find(&prefs)
 
 	if err != nil {
@@ -50,9 +62,8 @@ func GetPreferencesWithDefaults(query *m.GetPreferencesWithDefaultsQuery) error
 }
 
 func GetPreferences(query *m.GetPreferencesQuery) error {
-
 	var prefs m.Preferences
-	exists, err := x.Where("org_id=? AND user_id=?", query.OrgId, query.UserId).Get(&prefs)
+	exists, err := x.Where("org_id=? AND user_id=? AND team_id=?", query.OrgId, query.UserId, query.TeamId).Get(&prefs)
 
 	if err != nil {
 		return err
@@ -71,7 +82,7 @@ func SavePreferences(cmd *m.SavePreferencesCommand) error {
 	return inTransaction(func(sess *DBSession) error {
 
 		var prefs m.Preferences
-		exists, err := sess.Where("org_id=? AND user_id=?", cmd.OrgId, cmd.UserId).Get(&prefs)
+		exists, err := sess.Where("org_id=? AND user_id=? AND team_id=?", cmd.OrgId, cmd.UserId, cmd.TeamId).Get(&prefs)
 		if err != nil {
 			return err
 		}
@@ -80,6 +91,7 @@ func SavePreferences(cmd *m.SavePreferencesCommand) error {
 			prefs = m.Preferences{
 				UserId:          cmd.UserId,
 				OrgId:           cmd.OrgId,
+				TeamId:          cmd.TeamId,
 				HomeDashboardId: cmd.HomeDashboardId,
 				Timezone:        cmd.Timezone,
 				Theme:           cmd.Theme,

pkg/services/sqlstore/preferences_test.go

+package sqlstore
+
+import (
+	"testing"
+
+	. "github.com/smartystreets/goconvey/convey"
+
+	"github.com/grafana/grafana/pkg/models"
+	"github.com/grafana/grafana/pkg/setting"
+)
+
+func TestPreferencesDataAccess(t *testing.T) {
+	Convey("Testing preferences data access", t, func() {
+		InitTestDB(t)
+
+		Convey("GetPreferencesWithDefaults with no saved preferences should return defaults", func() {
+			query := &models.GetPreferencesWithDefaultsQuery{User: &models.SignedInUser{}}
+			err := GetPreferencesWithDefaults(query)
+			So(err, ShouldBeNil)
+			So(query.Result.Theme, ShouldEqual, setting.DefaultTheme)
+			So(query.Result.Timezone, ShouldEqual, "browser")
+			So(query.Result.HomeDashboardId, ShouldEqual, 0)
+		})
+
+		Convey("GetPreferencesWithDefaults with saved org and user home dashboard should return user home dashboard", func() {
+			SavePreferences(&models.SavePreferencesCommand{OrgId: 1, HomeDashboardId: 1})
+			SavePreferences(&models.SavePreferencesCommand{OrgId: 1, UserId: 1, HomeDashboardId: 4})
+
+			query := &models.GetPreferencesWithDefaultsQuery{User: &models.SignedInUser{OrgId: 1, UserId: 1}}
+			err := GetPreferencesWithDefaults(query)
+			So(err, ShouldBeNil)
+			So(query.Result.HomeDashboardId, ShouldEqual, 4)
+		})
+
+		Convey("GetPreferencesWithDefaults with saved org and other user home dashboard should return org home dashboard", func() {
+			SavePreferences(&models.SavePreferencesCommand{OrgId: 1, HomeDashboardId: 1})
+			SavePreferences(&models.SavePreferencesCommand{OrgId: 1, UserId: 1, HomeDashboardId: 4})
+
+			query := &models.GetPreferencesWithDefaultsQuery{User: &models.SignedInUser{OrgId: 1, UserId: 2}}
+			err := GetPreferencesWithDefaults(query)
+			So(err, ShouldBeNil)
+			So(query.Result.HomeDashboardId, ShouldEqual, 1)
+		})
+
+		Convey("GetPreferencesWithDefaults with saved org and teams home dashboard should return last team home dashboard", func() {
+			SavePreferences(&models.SavePreferencesCommand{OrgId: 1, HomeDashboardId: 1})
+			SavePreferences(&models.SavePreferencesCommand{OrgId: 1, TeamId: 2, HomeDashboardId: 2})
+			SavePreferences(&models.SavePreferencesCommand{OrgId: 1, TeamId: 3, HomeDashboardId: 3})
+
+			query := &models.GetPreferencesWithDefaultsQuery{User: &models.SignedInUser{OrgId: 1, Teams: []int64{2, 3}}}
+			err := GetPreferencesWithDefaults(query)
+			So(err, ShouldBeNil)
+			So(query.Result.HomeDashboardId, ShouldEqual, 3)
+		})
+
+		Convey("GetPreferencesWithDefaults with saved org and other teams home dashboard should return org home dashboard", func() {
+			SavePreferences(&models.SavePreferencesCommand{OrgId: 1, HomeDashboardId: 1})
+			SavePreferences(&models.SavePreferencesCommand{OrgId: 1, TeamId: 2, HomeDashboardId: 2})
+			SavePreferences(&models.SavePreferencesCommand{OrgId: 1, TeamId: 3, HomeDashboardId: 3})
+
+			query := &models.GetPreferencesWithDefaultsQuery{User: &models.SignedInUser{OrgId: 1}}
+			err := GetPreferencesWithDefaults(query)
+			So(err, ShouldBeNil)
+			So(query.Result.HomeDashboardId, ShouldEqual, 1)
+		})
+
+		Convey("GetPreferencesWithDefaults with saved org, teams and user home dashboard should return user home dashboard", func() {
+			SavePreferences(&models.SavePreferencesCommand{OrgId: 1, HomeDashboardId: 1})
+			SavePreferences(&models.SavePreferencesCommand{OrgId: 1, TeamId: 2, HomeDashboardId: 2})
+			SavePreferences(&models.SavePreferencesCommand{OrgId: 1, TeamId: 3, HomeDashboardId: 3})
+			SavePreferences(&models.SavePreferencesCommand{OrgId: 1, UserId: 1, HomeDashboardId: 4})
+
+			query := &models.GetPreferencesWithDefaultsQuery{User: &models.SignedInUser{OrgId: 1, UserId: 1, Teams: []int64{2, 3}}}
+			err := GetPreferencesWithDefaults(query)
+			So(err, ShouldBeNil)
+			So(query.Result.HomeDashboardId, ShouldEqual, 4)
+		})
+
+		Convey("GetPreferencesWithDefaults with saved org, other teams and user home dashboard should return org home dashboard", func() {
+			SavePreferences(&models.SavePreferencesCommand{OrgId: 1, HomeDashboardId: 1})
+			SavePreferences(&models.SavePreferencesCommand{OrgId: 1, TeamId: 2, HomeDashboardId: 2})
+			SavePreferences(&models.SavePreferencesCommand{OrgId: 1, TeamId: 3, HomeDashboardId: 3})
+			SavePreferences(&models.SavePreferencesCommand{OrgId: 1, UserId: 1, HomeDashboardId: 4})
+
+			query := &models.GetPreferencesWithDefaultsQuery{User: &models.SignedInUser{OrgId: 1, UserId: 2}}
+			err := GetPreferencesWithDefaults(query)
+			So(err, ShouldBeNil)
+			So(query.Result.HomeDashboardId, ShouldEqual, 1)
+		})
+	})
+}

public/app/core/actions/user.ts

-import { ThunkAction } from 'redux-thunk';
-import { getBackendSrv } from '../services/backend_srv';
-import { DashboardAcl, DashboardSearchHit, StoreState } from '../../types';
-
-type ThunkResult<R> = ThunkAction<R, StoreState, undefined, any>;
-
-export type Action = LoadStarredDashboardsAction;
-
-export enum ActionTypes {
-  LoadStarredDashboards = 'LOAD_STARRED_DASHBOARDS',
-}
-
-interface LoadStarredDashboardsAction {
-  type: ActionTypes.LoadStarredDashboards;
-  payload: DashboardSearchHit[];
-}
-
-const starredDashboardsLoaded = (dashboards: DashboardAcl[]) => ({
-  type: ActionTypes.LoadStarredDashboards,
-  payload: dashboards,
-});
-
-export function loadStarredDashboards(): ThunkResult<void> {
-  return async dispatch => {
-    const starredDashboards = await getBackendSrv().search({ starred: true });
-    dispatch(starredDashboardsLoaded(starredDashboards));
-  };
-}

public/app/core/components/Picker/SimplePicker.tsx

@@ -5,13 +5,14 @@ import ResetStyles from './ResetStyles';
 
 interface Props {
   className?: string;
-  defaultValue: any;
+  defaultValue?: any;
   getOptionLabel: (item: any) => string;
   getOptionValue: (item: any) => string;
   onSelected: (item: any) => {} | void;
   options: any[];
   placeholder?: string;
   width: number;
+  value: any;
 }
 
 const SimplePicker: SFC<Props> = ({
@@ -23,6 +24,7 @@ const SimplePicker: SFC<Props> = ({
   options,
   placeholder,
   width,
+  value,
 }) => {
   return (
     <Select
@@ -32,6 +34,7 @@ const SimplePicker: SFC<Props> = ({
         Option: DescriptionOption,
       }}
       defaultValue={defaultValue}
+      value={value}
       getOptionLabel={getOptionLabel}
       getOptionValue={getOptionValue}
       isSearchable={false}

public/app/features/org/OrgPreferences.tsx → public/app/core/components/SharedPreferences/SharedPreferences.tsx

 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 {
-  setOrganizationHomeDashboard,
-  setOrganizationTheme,
-  setOrganizationTimezone,
-  updateOrganizationPreferences,
-} from './state/actions';
+
+import { Label } from 'app/core/components/Label/Label';
+import SimplePicker from 'app/core/components/Picker/SimplePicker';
+import { getBackendSrv, BackendSrv } from 'app/core/services/backend_srv';
+
+import { DashboardSearchHit } from 'app/types';
 
 export interface Props {
-  preferences: OrganizationPreferences;
-  starredDashboards: DashboardSearchHit[];
-  setOrganizationHomeDashboard: typeof setOrganizationHomeDashboard;
-  setOrganizationTheme: typeof setOrganizationTheme;
-  setOrganizationTimezone: typeof setOrganizationTimezone;
-  updateOrganizationPreferences: typeof updateOrganizationPreferences;
+  resourceUri: string;
+}
+
+export interface State {
+  homeDashboardId: number;
+  theme: string;
+  timezone: string;
+  dashboards: DashboardSearchHit[];
 }
 
 const themes = [{ value: '', text: 'Default' }, { value: 'dark', text: 'Dark' }, { value: 'light', text: 'Light' }];
@@ -27,22 +25,66 @@ const timezones = [
   { value: 'utc', text: 'UTC' },
 ];
 
-export class OrgPreferences extends PureComponent<Props> {
-  onSubmitForm = event => {
+export class SharedPreferences extends PureComponent<Props, State> {
+  backendSrv: BackendSrv = getBackendSrv();
+
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      homeDashboardId: 0,
+      theme: '',
+      timezone: '',
+      dashboards: [],
+    };
+  }
+
+  async componentDidMount() {
+    const prefs = await this.backendSrv.get(`/api/${this.props.resourceUri}/preferences`);
+    const dashboards = await this.backendSrv.search({ starred: true });
+
+    if (prefs.homeDashboardId > 0 && !dashboards.find(d => d.id === prefs.homeDashboardId)) {
+      const missing = await this.backendSrv.search({ dashboardIds: [prefs.homeDashboardId] });
+      if (missing && missing.length > 0) {
+        dashboards.push(missing[0]);
+      }
+    }
+
+    this.setState({
+      homeDashboardId: prefs.homeDashboardId,
+      theme: prefs.theme,
+      timezone: prefs.timezone,
+      dashboards: [{ id: 0, title: 'Default', tags: [], type: '', uid: '', uri: '', url: '' }, ...dashboards],
+    });
+  }
+
+  onSubmitForm = async event => {
     event.preventDefault();
-    this.props.updateOrganizationPreferences();
+
+    const { homeDashboardId, theme, timezone } = this.state;
+
+    await this.backendSrv.put(`/api/${this.props.resourceUri}/preferences`, {
+      homeDashboardId,
+      theme,
+      timezone,
+    });
+    window.location.reload();
   };
 
-  render() {
-    const {
-      preferences,
-      starredDashboards,
-      setOrganizationHomeDashboard,
-      setOrganizationTimezone,
-      setOrganizationTheme,
-    } = this.props;
+  onThemeChanged = (theme: string) => {
+    this.setState({ theme });
+  };
+
+  onTimeZoneChanged = (timezone: string) => {
+    this.setState({ timezone });
+  };
+
+  onHomeDashboardChanged = (dashboardId: number) => {
+    this.setState({ homeDashboardId: dashboardId });
+  };
 
-    starredDashboards.unshift({ id: 0, title: 'Default', tags: [], type: '', uid: '', uri: '', url: '' });
+  render() {
+    const { theme, timezone, homeDashboardId, dashboards } = this.state;
 
     return (
       <form className="section gf-form-group" onSubmit={this.onSubmitForm}>
@@ -50,11 +92,11 @@ export class OrgPreferences extends PureComponent<Props> {
         <div className="gf-form">
           <span className="gf-form-label width-11">UI Theme</span>
           <SimplePicker
-            defaultValue={themes.find(theme => theme.value === preferences.theme)}
+            value={themes.find(item => item.value === theme)}
             options={themes}
             getOptionValue={i => i.value}
             getOptionLabel={i => i.text}
-            onSelected={theme => setOrganizationTheme(theme.value)}
+            onSelected={theme => this.onThemeChanged(theme.value)}
             width={20}
           />
         </div>
@@ -66,11 +108,11 @@ export class OrgPreferences extends PureComponent<Props> {
             Home Dashboard
           </Label>
           <SimplePicker
-            defaultValue={starredDashboards.find(dashboard => dashboard.id === preferences.homeDashboardId)}
+            value={dashboards.find(dashboard => dashboard.id === homeDashboardId)}
             getOptionValue={i => i.id}
             getOptionLabel={i => i.title}
-            onSelected={(dashboard: DashboardSearchHit) => setOrganizationHomeDashboard(dashboard.id)}
-            options={starredDashboards}
+            onSelected={(dashboard: DashboardSearchHit) => this.onHomeDashboardChanged(dashboard.id)}
+            options={dashboards}
             placeholder="Chose default dashboard"
             width={20}
           />
@@ -78,10 +120,10 @@ export class OrgPreferences extends PureComponent<Props> {
         <div className="gf-form">
           <label className="gf-form-label width-11">Timezone</label>
           <SimplePicker
-            defaultValue={timezones.find(timezone => timezone.value === preferences.timezone)}
+            value={timezones.find(item => item.value === timezone)}
             getOptionValue={i => i.value}
             getOptionLabel={i => i.text}
-            onSelected={timezone => setOrganizationTimezone(timezone.value)}
+            onSelected={timezone => this.onTimeZoneChanged(timezone.value)}
             options={timezones}
             width={20}
           />
@@ -96,18 +138,4 @@ export class OrgPreferences extends PureComponent<Props> {
   }
 }
 
-function mapStateToProps(state) {
-  return {
-    preferences: state.organization.preferences,
-    starredDashboards: state.user.starredDashboards,
-  };
-}
-
-const mapDispatchToProps = {
-  setOrganizationHomeDashboard,
-  setOrganizationTimezone,
-  setOrganizationTheme,
-  updateOrganizationPreferences,
-};
-
-export default connect(mapStateToProps, mapDispatchToProps)(OrgPreferences);
+export default SharedPreferences;

public/app/core/reducers/index.ts

 import { navIndexReducer as navIndex } from './navModel';
 import { locationReducer as location } from './location';
 import { appNotificationsReducer as appNotifications } from './appNotification';
-import { userReducer as user } from './user';
 
 export default {
   navIndex,
   location,
   appNotifications,
-  user,
 };

public/app/core/reducers/user.ts

-import { DashboardSearchHit, UserState } from '../../types';
-import { Action, ActionTypes } from '../actions/user';
-
-const initialState: UserState = {
-  starredDashboards: [] as DashboardSearchHit[],
-};
-
-export const userReducer = (state: UserState = initialState, action: Action): UserState => {
-  switch (action.type) {
-    case ActionTypes.LoadStarredDashboards:
-      return { ...state, starredDashboards: action.payload };
-  }
-
-  return state;
-};

public/app/features/org/OrgDetailsPage.test.tsx

 import React from 'react';
 import { shallow } from 'enzyme';
 import { OrgDetailsPage, Props } from './OrgDetailsPage';
-import { NavModel, Organization, OrganizationPreferences } from '../../types';
+import { NavModel, Organization } from '../../types';
 
 const setup = (propOverrides?: object) => {
   const props: Props = {
-    preferences: {} as OrganizationPreferences,
     organization: {} as Organization,
     navModel: {} as NavModel,
     loadOrganization: jest.fn(),
-    loadOrganizationPreferences: jest.fn(),
-    loadStarredDashboards: jest.fn(),
     setOrganizationName: jest.fn(),
     updateOrganization: jest.fn(),
   };

public/app/features/org/OrgDetailsPage.tsx

@@ -4,33 +4,22 @@ import { connect } from 'react-redux';
 import PageHeader from '../../core/components/PageHeader/PageHeader';
 import PageLoader from '../../core/components/PageLoader/PageLoader';
 import OrgProfile from './OrgProfile';
-import OrgPreferences from './OrgPreferences';
-import {
-  loadOrganization,
-  loadOrganizationPreferences,
-  setOrganizationName,
-  updateOrganization,
-} from './state/actions';
-import { loadStarredDashboards } from '../../core/actions/user';
-import { NavModel, Organization, OrganizationPreferences, StoreState } from 'app/types';
+import SharedPreferences from 'app/core/components/SharedPreferences/SharedPreferences';
+import { loadOrganization, setOrganizationName, updateOrganization } from './state/actions';
+import { NavModel, Organization, StoreState } from 'app/types';
 import { getNavModel } from '../../core/selectors/navModel';
 
 export interface Props {
   navModel: NavModel;
   organization: Organization;
-  preferences: OrganizationPreferences;
   loadOrganization: typeof loadOrganization;
-  loadOrganizationPreferences: typeof loadOrganizationPreferences;
-  loadStarredDashboards: typeof loadStarredDashboards;
   setOrganizationName: typeof setOrganizationName;
   updateOrganization: typeof updateOrganization;
 }
 
 export class OrgDetailsPage extends PureComponent<Props> {
   async componentDidMount() {
-    await this.props.loadStarredDashboards();
     await this.props.loadOrganization();
-    await this.props.loadOrganizationPreferences();
   }
 
   onOrgNameChange = name => {
@@ -42,22 +31,22 @@ export class OrgDetailsPage extends PureComponent<Props> {
   };
 
   render() {
-    const { navModel, organization, preferences } = this.props;
+    const { navModel, organization } = this.props;
+    const isLoading = Object.keys(organization).length === 0;
 
     return (
       <div>
         <PageHeader model={navModel} />
         <div className="page-container page-body">
-          {Object.keys(organization).length === 0 || Object.keys(preferences).length === 0 ? (
-            <PageLoader pageName="Organization" />
-          ) : (
+          {isLoading && <PageLoader pageName="Organization" />}
+          {!isLoading && (
             <div>
               <OrgProfile
                 onOrgNameChange={name => this.onOrgNameChange(name)}
                 onSubmit={this.onUpdateOrganization}
                 orgName={organization.name}
               />
-              <OrgPreferences />
+              <SharedPreferences resourceUri="org" />
             </div>
           )}
         </div>
@@ -70,14 +59,11 @@ function mapStateToProps(state: StoreState) {
   return {
     navModel: getNavModel(state.navIndex, 'org-settings'),
     organization: state.organization.organization,
-    preferences: state.organization.preferences,
   };
 }
 
 const mapDispatchToProps = {
   loadOrganization,
-  loadOrganizationPreferences,
-  loadStarredDashboards,
   setOrganizationName,
   updateOrganization,
 };

public/app/features/org/OrgPreferences.test.tsx

-import React from 'react';
-import { shallow } from 'enzyme';
-import { OrgPreferences, Props } from './OrgPreferences';
-
-const setup = () => {
-  const props: Props = {
-    preferences: {
-      homeDashboardId: 1,
-      timezone: 'UTC',
-      theme: 'Default',
-    },
-    starredDashboards: [{ id: 1, title: 'Standard dashboard', url: '', uri: '', uid: '', type: '', tags: [] }],
-    setOrganizationTimezone: jest.fn(),
-    setOrganizationTheme: jest.fn(),
-    setOrganizationHomeDashboard: jest.fn(),
-    updateOrganizationPreferences: jest.fn(),
-  };
-
-  return shallow(<OrgPreferences {...props} />);
-};
-
-describe('Render', () => {
-  it('should render component', () => {
-    const wrapper = setup();
-
-    expect(wrapper).toMatchSnapshot();
-  });
-});

public/app/features/org/__snapshots__/OrgDetailsPage.test.tsx.snap

@@ -29,7 +29,9 @@ exports[`Render should render organization and preferences 1`] = `
         onSubmit={[Function]}
         orgName="Cool org"
       />
-      <Connect(OrgPreferences) />
+      <SharedPreferences
+        resourceUri="org"
+      />
     </div>
   </div>
 </div>

public/app/features/org/__snapshots__/OrgPreferences.test.tsx.snap

-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Render should render component 1`] = `
-<form
-  className="section gf-form-group"
-  onSubmit={[Function]}
->
-  <h3
-    className="page-heading"
-  >
-    Preferences
-  </h3>
-  <div
-    className="gf-form"
-  >
-    <span
-      className="gf-form-label width-11"
-    >
-      UI Theme
-    </span>
-    <SimplePicker
-      getOptionLabel={[Function]}
-      getOptionValue={[Function]}
-      onSelected={[Function]}
-      options={
-        Array [
-          Object {
-            "text": "Default",
-            "value": "",
-          },
-          Object {
-            "text": "Dark",
-            "value": "dark",
-          },
-          Object {
-            "text": "Light",
-            "value": "light",
-          },
-        ]
-      }
-      width={20}
-    />
-  </div>
-  <div
-    className="gf-form"
-  >
-    <Component
-      tooltip="Not finding dashboard you want? Star it first, then it should appear in this select box."
-      width={11}
-    >
-      Home Dashboard
-    </Component>
-    <SimplePicker
-      defaultValue={
-        Object {
-          "id": 1,
-          "tags": Array [],
-          "title": "Standard dashboard",
-          "type": "",
-          "uid": "",
-          "uri": "",
-          "url": "",
-        }
-      }
-      getOptionLabel={[Function]}
-      getOptionValue={[Function]}
-      onSelected={[Function]}
-      options={
-        Array [
-          Object {
-            "id": 0,
-            "tags": Array [],
-            "title": "Default",
-            "type": "",
-            "uid": "",
-            "uri": "",
-            "url": "",
-          },
-          Object {
-            "id": 1,
-            "tags": Array [],
-            "title": "Standard dashboard",
-            "type": "",
-            "uid": "",
-            "uri": "",
-            "url": "",
-          },
-        ]
-      }
-      placeholder="Chose default dashboard"
-      width={20}
-    />
-  </div>
-  <div
-    className="gf-form"
-  >
-    <label
-      className="gf-form-label width-11"
-    >
-      Timezone
-    </label>
-    <SimplePicker
-      getOptionLabel={[Function]}
-      getOptionValue={[Function]}
-      onSelected={[Function]}
-      options={
-        Array [
-          Object {
-            "text": "Default",
-            "value": "",
-          },
-          Object {
-            "text": "Local browser time",
-            "value": "browser",
-          },
-          Object {
-            "text": "UTC",
-            "value": "utc",
-          },
-        ]
-      }
-      width={20}
-    />
-  </div>
-  <div
-    className="gf-form-button-row"
-  >
-    <button
-      className="btn btn-success"
-      type="submit"
-    >
-      Save
-    </button>
-  </div>
-</form>
-`;

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

 import { ThunkAction } from 'redux-thunk';
-import { Organization, OrganizationPreferences, StoreState } from 'app/types';
-import { getBackendSrv } from '../../../core/services/backend_srv';
+import { Organization, StoreState } from 'app/types';
+import { getBackendSrv } from 'app/core/services/backend_srv';
 
 type ThunkResult<R> = ThunkAction<R, StoreState, undefined, any>;
 
 export enum ActionTypes {
   LoadOrganization = 'LOAD_ORGANISATION',
-  LoadPreferences = 'LOAD_PREFERENCES',
   SetOrganizationName = 'SET_ORGANIZATION_NAME',
-  SetOrganizationTheme = 'SET_ORGANIZATION_THEME',
-  SetOrganizationHomeDashboard = 'SET_ORGANIZATION_HOME_DASHBOARD',
-  SetOrganizationTimezone = 'SET_ORGANIZATION_TIMEZONE',
 }
 
 interface LoadOrganizationAction {
@@ -18,68 +14,22 @@ interface LoadOrganizationAction {
   payload: Organization;
 }
 
-interface LoadPreferencesAction {
-  type: ActionTypes.LoadPreferences;
-  payload: OrganizationPreferences;
-}
-
 interface SetOrganizationNameAction {
   type: ActionTypes.SetOrganizationName;
   payload: string;
 }
 
-interface SetOrganizationThemeAction {
-  type: ActionTypes.SetOrganizationTheme;
-  payload: string;
-}
-
-interface SetOrganizationHomeDashboardAction {
-  type: ActionTypes.SetOrganizationHomeDashboard;
-  payload: number;
-}
-
-interface SetOrganizationTimezoneAction {
-  type: ActionTypes.SetOrganizationTimezone;
-  payload: string;
-}
-
 const organisationLoaded = (organisation: Organization) => ({
   type: ActionTypes.LoadOrganization,
   payload: organisation,
 });
 
-const preferencesLoaded = (preferences: OrganizationPreferences) => ({
-  type: ActionTypes.LoadPreferences,
-  payload: preferences,
-});
-
 export const setOrganizationName = (orgName: string) => ({
   type: ActionTypes.SetOrganizationName,
   payload: orgName,
 });
 
-export const setOrganizationTheme = (theme: string) => ({
-  type: ActionTypes.SetOrganizationTheme,
-  payload: theme,
-});
-
-export const setOrganizationHomeDashboard = (id: number) => ({
-  type: ActionTypes.SetOrganizationHomeDashboard,
-  payload: id,
-});
-
-export const setOrganizationTimezone = (timezone: string) => ({
-  type: ActionTypes.SetOrganizationTimezone,
-  payload: timezone,
-});
-
-export type Action =
-  | LoadOrganizationAction
-  | LoadPreferencesAction
-  | SetOrganizationNameAction
-  | SetOrganizationThemeAction
-  | SetOrganizationHomeDashboardAction
-  | SetOrganizationTimezoneAction;
+export type Action = LoadOrganizationAction | SetOrganizationNameAction;
 
 export function loadOrganization(): ThunkResult<void> {
   return async dispatch => {
@@ -90,13 +40,6 @@ export function loadOrganization(): ThunkResult<void> {
   };
 }
 
-export function loadOrganizationPreferences(): ThunkResult<void> {
-  return async dispatch => {
-    const preferencesResponse = await getBackendSrv().get('/api/org/preferences');
-    dispatch(preferencesLoaded(preferencesResponse));
-  };
-}
-
 export function updateOrganization() {
   return async (dispatch, getStore) => {
     const organization = getStore().organization.organization;
@@ -106,13 +49,3 @@ export function updateOrganization() {
     dispatch(loadOrganization());
   };
 }
-
-export function updateOrganizationPreferences() {
-  return async (dispatch, getStore) => {
-    const preferences = getStore().organization.preferences;
-
-    await getBackendSrv().put('/api/org/preferences', preferences);
-
-    window.location.reload();
-  };
-}

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

-import { Organization, OrganizationPreferences, OrganizationState } from 'app/types';
+import { Organization, OrganizationState } from 'app/types';
 import { Action, ActionTypes } from './actions';
 
 const initialState: OrganizationState = {
   organization: {} as Organization,
-  preferences: {} as OrganizationPreferences,
 };
 
 const organizationReducer = (state = initialState, action: Action): OrganizationState => {
@@ -11,20 +10,8 @@ const organizationReducer = (state = initialState, action: Action): Organization
     case ActionTypes.LoadOrganization:
       return { ...state, organization: action.payload };
 
-    case ActionTypes.LoadPreferences:
-      return { ...state, preferences: action.payload };
-
     case ActionTypes.SetOrganizationName:
       return { ...state, organization: { ...state.organization, name: action.payload } };
-
-    case ActionTypes.SetOrganizationTheme:
-      return { ...state, preferences: { ...state.preferences, theme: action.payload } };
-
-    case ActionTypes.SetOrganizationHomeDashboard:
-      return { ...state, preferences: { ...state.preferences, homeDashboardId: action.payload } };
-
-    case ActionTypes.SetOrganizationTimezone:
-      return { ...state, preferences: { ...state.preferences, timezone: action.payload } };
   }
 
   return state;

public/app/features/profile/PrefControlCtrl.ts

-import config from 'app/core/config';
-import coreModule from 'app/core/core_module';
+import { react2AngularDirective } from 'app/core/utils/react2angular';
+import { SharedPreferences } from 'app/core/components/SharedPreferences/SharedPreferences';
 
-export class PrefsControlCtrl {
-  prefs: any;
-  oldTheme: any;
-  prefsForm: any;
-  mode: string;
-
-  timezones: any = [
-    { value: '', text: 'Default' },
-    { value: 'browser', text: 'Local browser time' },
-    { value: 'utc', text: 'UTC' },
-  ];
-  themes: any = [{ value: '', text: 'Default' }, { value: 'dark', text: 'Dark' }, { value: 'light', text: 'Light' }];
-
-  /** @ngInject */
-  constructor(private backendSrv, private $location) {}
-
-  $onInit() {
-    return this.backendSrv.get(`/api/${this.mode}/preferences`).then(prefs => {
-      this.prefs = prefs;
-      this.oldTheme = prefs.theme;
-    });
-  }
-
-  updatePrefs() {
-    if (!this.prefsForm.$valid) {
-      return;
-    }
-
-    const cmd = {
-      theme: this.prefs.theme,
-      timezone: this.prefs.timezone,
-      homeDashboardId: this.prefs.homeDashboardId,
-    };
-
-    this.backendSrv.put(`/api/${this.mode}/preferences`, cmd).then(() => {
-      window.location.href = config.appSubUrl + this.$location.path();
-    });
-  }
-}
-
-const template = `
-<form name="ctrl.prefsForm" class="section gf-form-group">
-  <h3 class="page-heading">Preferences</h3>
-
-  <div class="gf-form">
-    <span class="gf-form-label width-11">UI Theme</span>
-    <div class="gf-form-select-wrapper max-width-20">
-      <select class="gf-form-input" ng-model="ctrl.prefs.theme" ng-options="f.value as f.text for f in ctrl.themes"></select>
-    </div>
-  </div>
-
-  <div class="gf-form">
-    <span class="gf-form-label width-11">
-      Home Dashboard
-      <info-popover mode="right-normal">
-        Not finding dashboard you want? Star it first, then it should appear in this select box.
-      </info-popover>
-    </span>
-    <dashboard-selector class="gf-form-select-wrapper max-width-20" model="ctrl.prefs.homeDashboardId">
-    </dashboard-selector>
-  </div>
-
-  <div class="gf-form">
-    <label class="gf-form-label width-11">Timezone</label>
-    <div class="gf-form-select-wrapper max-width-20">
-      <select class="gf-form-input" ng-model="ctrl.prefs.timezone" ng-options="f.value as f.text for f in ctrl.timezones"></select>
-    </div>
-  </div>
-
-  <div class="gf-form-button-row">
-    <button type="submit" class="btn btn-success" ng-click="ctrl.updatePrefs()">Save</button>
-  </div>
-</form>
-`;
-
-export function prefsControlDirective() {
-  return {
-    restrict: 'E',
-    controller: PrefsControlCtrl,
-    bindToController: true,
-    controllerAs: 'ctrl',
-    template: template,
-    scope: {
-      mode: '@',
-    },
-  };
-}
-
-coreModule.directive('prefsControl', prefsControlDirective);
+react2AngularDirective('prefsControl', SharedPreferences, ['resourceUri']);

public/app/features/profile/partials/profile.html

@@ -24,7 +24,7 @@
     </div>
   </form>
 
-  <prefs-control mode="user"></prefs-control>
+  <prefs-control resource-uri="'user'"></prefs-control>
 
   <h3 class="page-heading" ng-show="ctrl.showTeamsList">Teams</h3>
   <div class="gf-form-group" ng-show="ctrl.showTeamsList">

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

@@ -43,10 +43,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();

public/app/features/teams/TeamPages.tsx

@@ -41,14 +41,14 @@ export class TeamPages extends PureComponent<Props, State> {
     };
   }
 
-  componentDidMount() {
-    this.fetchTeam();
+  async componentDidMount() {
+    await this.fetchTeam();
   }
 
   async fetchTeam() {
     const { loadTeam, teamId } = this.props;
 
-    await loadTeam(teamId);
+    return await loadTeam(teamId);
   }
 
   getCurrentPage() {
@@ -67,7 +67,6 @@ export class TeamPages extends PureComponent<Props, State> {
 
       case PageTypes.Settings:
         return <TeamSettings />;
-
       case PageTypes.GroupSync:
         return isSyncEnabled && <TeamGroupSync />;
     }

public/app/features/teams/TeamSettings.tsx

 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/__snapshots__/TeamPages.test.tsx.snap

@@ -36,7 +36,7 @@ exports[`Render should render member page if team not empty 1`] = `
 </div>
 `;
 
-exports[`Render should render settings page 1`] = `
+exports[`Render should render settings and preferences page 1`] = `
 <div>
   <PageHeader
     model={Object {}}

public/app/features/teams/__snapshots__/TeamSettings.test.tsx.snap

@@ -53,5 +53,8 @@ exports[`Render should render component 1`] = `
       </button>
     </div>
   </form>
+  <SharedPreferences
+    resourceUri="teams/1"
+  />
 </div>
 `;

public/app/features/teams/state/selectors.test.ts

@@ -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);
     });
   });
@@ -29,10 +27,14 @@ 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: [],
+      };
 
       const team = getTeam(mockState, '1');
-
       expect(team).toEqual(mockTeam);
     });
   });
@@ -49,7 +51,6 @@ describe('Team selectors', () => {
       };
 
       const members = getTeamMembers(mockState);
-
       expect(members).toEqual(mockTeamMembers);
     });
   });

public/app/types/index.ts

@@ -22,7 +22,7 @@ import {
 } from './series';
 import { PanelProps, PanelOptionsProps } from './panel';
 import { PluginDashboard, PluginMeta, Plugin, PluginsState } from './plugins';
-import { Organization, OrganizationPreferences, OrganizationState } from './organization';
+import { Organization, OrganizationState } from './organization';
 import {
   AppNotification,
   AppNotificationSeverity,
@@ -81,7 +81,6 @@ export {
   PluginDashboard,
   Organization,
   OrganizationState,
-  OrganizationPreferences,
   AppNotification,
   AppNotificationsState,
   AppNotificationSeverity,

public/app/types/organization.ts

@@ -3,13 +3,6 @@ export interface Organization {
   id: number;
 }
 
-export interface OrganizationPreferences {
-  homeDashboardId: number;
-  theme: string;
-  timezone: string;
-}
-
 export interface OrganizationState {
   organization: Organization;
-  preferences: OrganizationPreferences;
 }