adding default value and update actions

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

@@ -4,17 +4,19 @@ import DescriptionOption from './DescriptionOption';
 import ResetStyles from './ResetStyles';
 
 interface Props {
-  options: any[];
   className?: string;
+  defaultValue: any;
+  getOptionLabel: (item: any) => string;
+  getOptionValue: (item: any) => string;
+  onSelected: (item: any) => {} | void;
+  options: any[];
   placeholder?: string;
   width: number;
-  onSelected: (item: any) => {} | void;
-  getOptionValue: (item: any) => string;
-  getOptionLabel: (item: any) => string;
 }
 
 const SimplePicker: SFC<Props> = ({
   className,
+  defaultValue,
   getOptionLabel,
   getOptionValue,
   onSelected,
@@ -24,18 +26,19 @@ const SimplePicker: SFC<Props> = ({
 }) => {
   return (
     <Select
-      isSearchable={false}
       classNamePrefix={`gf-form-select-box`}
       className={`width-${width} gf-form-input gf-form-input--form-dropdown ${className || ''}`}
-      placeholder={placeholder || 'Choose'}
-      options={options}
-      onChange={onSelected}
       components={{
         Option: DescriptionOption,
       }}
-      styles={ResetStyles}
+      defaultValue={defaultValue}
-      getOptionValue={getOptionValue}
       getOptionLabel={getOptionLabel}
+      getOptionValue={getOptionValue}
+      isSearchable={false}
+      onChange={onSelected}
+      options={options}
+      placeholder={placeholder || 'Choose'}
+      styles={ResetStyles}
     />
   );
 };

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

@@ -13,6 +13,7 @@ import {
 
 export enum ActionTypes {
   LoadDashboardPermissions = 'LOAD_DASHBOARD_PERMISSIONS',
+  LoadStarredDashboards = 'LOAD_STARRED_DASHBOARDS',
 }
 
 export interface LoadDashboardPermissionsAction {
@@ -20,7 +21,12 @@ export interface LoadDashboardPermissionsAction {
   payload: DashboardAcl[];
 }
 
-export type Action = LoadDashboardPermissionsAction;
+export interface LoadStarredDashboardsAction {
+  type: ActionTypes.LoadStarredDashboards;
+  payload: DashboardAcl[];
+}
+
+export type Action = LoadDashboardPermissionsAction | LoadStarredDashboardsAction;
 
 type ThunkResult<R> = ThunkAction<R, StoreState, undefined, any>;
 
@@ -29,6 +35,11 @@ export const loadDashboardPermissions = (items: DashboardAclDTO[]): LoadDashboar
   payload: items,
 });
 
+const starredDashboardsLoaded = (dashboards: DashboardAcl[]) => ({
+  type: ActionTypes.LoadStarredDashboards,
+  payload: dashboards,
+});
+
 export function getDashboardPermissions(id: number): ThunkResult<void> {
   return async dispatch => {
     const permissions = await getBackendSrv().get(`/api/dashboards/id/${id}/permissions`);
@@ -36,6 +47,13 @@ export function getDashboardPermissions(id: number): ThunkResult<void> {
   };
 }
 
+export function loadStarredDashboards(): ThunkResult<void> {
+  return async dispatch => {
+    const starredDashboards = await getBackendSrv().search({ starred: true });
+    dispatch(starredDashboardsLoaded(starredDashboards));
+  };
+}
+
 function toUpdateItem(item: DashboardAcl): DashboardAclUpdateDTO {
   return {
     userId: item.userId,

public/app/features/org/OrgDetailsPage.tsx

@@ -12,7 +12,10 @@ import {
   setOrganizationTheme,
   setOrganizationHomeDashboard,
   setOrganizationTimezone,
+  updateOrganization,
+  updateOrganizationPreferences,
 } from './state/actions';
+import { loadStarredDashboards } from '../dashboard/state/actions';
 import { DashboardAcl, NavModel, Organization, OrganizationPreferences, StoreState } from 'app/types';
 import { getNavModel } from '../../core/selectors/navModel';
 
@@ -23,29 +26,33 @@ export interface Props {
   starredDashboards: DashboardAcl[];
   loadOrganization: typeof loadOrganization;
   loadOrganizationPreferences: typeof loadOrganizationPreferences;
+  loadStarredDashboards: typeof loadStarredDashboards;
   setOrganizationName: typeof setOrganizationName;
   setOrganizationHomeDashboard: typeof setOrganizationHomeDashboard;
   setOrganizationTheme: typeof setOrganizationTheme;
   setOrganizationTimezone: typeof setOrganizationTimezone;
+  updateOrganization: typeof updateOrganization;
+  updateOrganizationPreferences: typeof updateOrganizationPreferences;
 }
 
 export class OrgDetailsPage extends PureComponent<Props> {
   async componentDidMount() {
-    this.fetchOrganisation();
+    await this.props.loadStarredDashboards();
-  }
-
-  async fetchOrganisation() {
     await this.props.loadOrganization();
     await this.props.loadOrganizationPreferences();
   }
 
-  onOrgNameChange = event => {
+  onOrgNameChange = name => {
-    this.props.setOrganizationName(event.target.value);
+    this.props.setOrganizationName(name);
   };
 
-  onSubmitForm = () => {};
+  onUpdateOrganization = () => {
+    this.props.updateOrganization();
+  };
 
-  onSubmitPreferences = () => {};
+  onSubmitPreferences = () => {
+    this.props.updateOrganizationPreferences();
+  };
 
   onThemeChange = theme => {
     this.props.setOrganizationTheme(theme);
@@ -72,7 +79,7 @@ export class OrgDetailsPage extends PureComponent<Props> {
             <div>
               <OrgProfile
                 onOrgNameChange={name => this.onOrgNameChange(name)}
-                onSubmit={this.onSubmitForm}
+                onSubmit={this.onUpdateOrganization}
                 orgName={organization.name}
               />
               <OrgPreferences
@@ -103,10 +110,13 @@ function mapStateToProps(state: StoreState) {
 const mapDispatchToProps = {
   loadOrganization,
   loadOrganizationPreferences,
+  loadStarredDashboards,
   setOrganizationName,
   setOrganizationTheme,
   setOrganizationHomeDashboard,
   setOrganizationTimezone,
+  updateOrganization,
+  updateOrganizationPreferences,
 };
 
 export default hot(module)(connect(mapStateToProps, mapDispatchToProps)(OrgDetailsPage));

public/app/features/org/OrgPreferences.tsx

@@ -29,15 +29,22 @@ const OrgPreferences: SFC<Props> = ({
   ];
 
   return (
-    <form className="section gf-form-group" onSubmit={onSubmit}>
+    <form
+      className="section gf-form-group"
+      onSubmit={event => {
+        event.preventDefault();
+        onSubmit();
+      }}
+    >
       <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 => onThemeChange(theme)}
+          onSelected={theme => onThemeChange(theme.value)}
           width={20}
         />
       </div>
@@ -53,6 +60,7 @@ const OrgPreferences: SFC<Props> = ({
           </Tooltip>
         </span>
         <SimplePicker
+          defaultValue={starredDashboards.find(dashboard => dashboard.id === preferences.homeDashboardId)}
           getOptionValue={i => i.id}
           getOptionLabel={i => i.title}
           onSelected={(dashboard: DashboardAcl) => onDashboardChange(dashboard.id)}
@@ -64,9 +72,10 @@ const OrgPreferences: SFC<Props> = ({
       <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 => onTimeZoneChange(timezone)}
+          onSelected={timezone => onTimeZoneChange(timezone.value)}
           options={timezones}
           width={20}
         />

public/app/features/org/OrgProfile.tsx

@@ -10,7 +10,14 @@ const OrgProfile: SFC<Props> = ({ onSubmit, onOrgNameChange, orgName }) => {
   return (
     <div>
       <h3 className="page-sub-heading">Organization profile</h3>
-      <form name="orgForm" className="gf-form-group" onSubmit={onSubmit}>
+      <form
+        name="orgForm"
+        className="gf-form-group"
+        onSubmit={event => {
+          event.preventDefault();
+          onSubmit();
+        }}
+      >
         <div className="gf-form-inline">
           <div className="gf-form max-width-28">
             <span className="gf-form-label">Organization name</span>

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

@@ -59,11 +59,6 @@ const preferencesLoaded = (preferences: OrganizationPreferences) => ({
   payload: preferences,
 });
 
-const starredDashboardsLoaded = (dashboards: DashboardAcl[]) => ({
-  type: ActionTypes.LoadStarredDashboards,
-  payload: dashboards,
-});
-
 export const setOrganizationName = (orgName: string) => ({
   type: ActionTypes.SetOrganizationName,
   payload: orgName,
@@ -95,7 +90,7 @@ export type Action =
 
 export function loadOrganization(): ThunkResult<void> {
   return async dispatch => {
-    const organisationResponse = await loadOrg();
+    const organisationResponse = await getBackendSrv().get('/api/org');
     dispatch(organisationLoaded(organisationResponse));
 
     return organisationResponse;
@@ -104,18 +99,27 @@ export function loadOrganization(): ThunkResult<void> {
 
 export function loadOrganizationPreferences(): ThunkResult<void> {
   return async dispatch => {
-    const preferencesResponse = await loadPreferences();
+    const preferencesResponse = await getBackendSrv().get('/api/org/preferences');
     dispatch(preferencesLoaded(preferencesResponse));
-
-    const starredDashboards = await getBackendSrv().search({ starred: true });
-    dispatch(starredDashboardsLoaded(starredDashboards));
   };
 }
 
-export async function loadOrg() {
+export function updateOrganization() {
-  return await await getBackendSrv().get('/api/org');
+  return async (dispatch, getStore) => {
+    const organization = getStore().organization.organization;
+
+    await getBackendSrv().put('/api/org', { name: organization.name });
+
+    dispatch(loadOrganization());
+  };
 }
 
-export async function loadPreferences() {
+export function updateOrganizationPreferences() {
-  return await getBackendSrv().get('/api/org/preferences');
+  return async (dispatch, getStore) => {
+    const preferences = getStore().organization.preferences;
+
+    await getBackendSrv().put('/api/org/preferences', preferences);
+
+    dispatch(loadOrganizationPreferences());
+  };
 }