moved state to redux, renamed entities

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

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

public/app/features/org/OrgDetailsPage.tsx

@@ -3,88 +3,84 @@ import { hot } from 'react-hot-loader';
 import { connect } from 'react-redux';
 import PageHeader from '../../core/components/PageHeader/PageHeader';
 import PageLoader from '../../core/components/PageLoader/PageLoader';
-import { loadOrganization, loadOrganizationPreferences } from './state/actions';
-import { DashboardAcl, NavModel, Organization, OrganisationPreferences, StoreState } from 'app/types';
-import { getNavModel } from '../../core/selectors/navModel';
 import OrgProfile from './OrgProfile';
 import OrgPreferences from './OrgPreferences';
+import {
+  loadOrganization,
+  loadOrganizationPreferences,
+  setOrganizationName,
+  setOrganizationTheme,
+  setOrganizationHomeDashboard,
+  setOrganizationTimezone,
+} from './state/actions';
+import { DashboardAcl, NavModel, Organization, OrganizationPreferences, StoreState } from 'app/types';
+import { getNavModel } from '../../core/selectors/navModel';
 
 export interface Props {
   navModel: NavModel;
   organization: Organization;
-  preferences: OrganisationPreferences;
+  preferences: OrganizationPreferences;
   starredDashboards: DashboardAcl[];
   loadOrganization: typeof loadOrganization;
   loadOrganizationPreferences: typeof loadOrganizationPreferences;
+  setOrganizationName: typeof setOrganizationName;
+  setOrganizationHomeDashboard: typeof setOrganizationHomeDashboard;
+  setOrganizationTheme: typeof setOrganizationTheme;
+  setOrganizationTimezone: typeof setOrganizationTimezone;
 }
 
-interface State {
-  orgName: string;
-  theme: string;
-  isReady: boolean;
-  selectedDashboard: DashboardAcl;
-}
-
-export class OrgDetailsPage extends PureComponent<Props, State> {
-  state = {
-    orgName: '',
-    theme: '',
-    isReady: false,
-    selectedDashboard: null,
-  };
-
+export class OrgDetailsPage extends PureComponent<Props> {
   async componentDidMount() {
     this.fetchOrganisation();
   }
 
   async fetchOrganisation() {
-    const organization = await this.props.loadOrganization();
-    // const preferences = await this.props.loadOrganizationPreferences();
-
-    this.setState({
-      orgName: organization.name,
-      // theme: preferences.theme,
-      isReady: true,
-    });
+    await this.props.loadOrganization();
+    await this.props.loadOrganizationPreferences();
   }
 
   onOrgNameChange = event => {
-    this.setState({
-      orgName: event.target.value,
-    });
+    this.props.setOrganizationName(event.target.value);
   };
 
   onSubmitForm = () => {};
 
   onSubmitPreferences = () => {};
 
-  onDashboardSelected = dashboard => {
-    this.setState({
-      selectedDashboard: dashboard,
-    });
+  onThemeChange = theme => {
+    this.props.setOrganizationTheme(theme);
+  };
+
+  onHomeDashboardChange = dashboardId => {
+    this.props.setOrganizationHomeDashboard(dashboardId);
+  };
+
+  onTimeZoneChange = timeZone => {
+    this.props.setOrganizationTimezone(timeZone);
   };
 
   render() {
-    const { navModel, preferences, starredDashboards } = this.props;
+    const { navModel, organization, preferences, starredDashboards } = this.props;
 
     return (
       <div>
         <PageHeader model={navModel} />
         <div className="page-container page-body">
-          {!this.state.isReady ? (
-            <PageLoader pageName="Organisation" />
+          {Object.keys(organization).length === 0 || Object.keys(preferences).length === 0 ? (
+            <PageLoader pageName="Organization" />
           ) : (
             <div>
               <OrgProfile
                 onOrgNameChange={name => this.onOrgNameChange(name)}
                 onSubmit={this.onSubmitForm}
-                orgName={this.state.orgName}
+                orgName={organization.name}
               />
               <OrgPreferences
                 preferences={preferences}
                 starredDashboards={starredDashboards}
-                onDashboardSelected={dashboard => this.onDashboardSelected(dashboard)}
-                onTimeZoneChange={() => {}}
+                onDashboardChange={dashboardId => this.onHomeDashboardChange(dashboardId)}
+                onThemeChange={theme => this.onThemeChange(theme)}
+                onTimeZoneChange={timeZone => this.onTimeZoneChange(timeZone)}
                 onSubmit={this.onSubmitPreferences}
               />
             </div>
@@ -98,15 +94,19 @@ export class OrgDetailsPage extends PureComponent<Props, State> {
 function mapStateToProps(state: StoreState) {
   return {
     navModel: getNavModel(state.navIndex, 'org-settings'),
-    organisation: state.organisation.organisation,
-    preferences: state.organisation.preferences,
-    starredDashboards: state.organisation.starredDashboards,
+    organization: state.organization.organization,
+    preferences: state.organization.preferences,
+    starredDashboards: state.organization.starredDashboards,
   };
 }
 
 const mapDispatchToProps = {
   loadOrganization,
   loadOrganizationPreferences,
+  setOrganizationName,
+  setOrganizationTheme,
+  setOrganizationHomeDashboard,
+  setOrganizationTimezone,
 };
 
 export default hot(module)(connect(mapStateToProps, mapDispatchToProps)(OrgDetailsPage));

public/app/features/org/OrgPreferences.tsx

 import React, { SFC } from 'react';
 import Tooltip from '../../core/components/Tooltip/Tooltip';
-import { DashboardAcl, OrganisationPreferences } from 'app/types';
 import SimplePicker from '../../core/components/Picker/SimplePicker';
+import { DashboardAcl, OrganizationPreferences } from 'app/types';
 
 interface Props {
-  preferences: OrganisationPreferences;
+  preferences: OrganizationPreferences;
   starredDashboards: DashboardAcl[];
-  onDashboardSelected: (dashboard: DashboardAcl) => void;
+  onDashboardChange: (dashboardId: number) => void;
   onTimeZoneChange: (timeZone: string) => void;
+  onThemeChange: (theme: string) => void;
   onSubmit: () => void;
 }
 
 const OrgPreferences: SFC<Props> = ({
   preferences,
   starredDashboards,
-  onDashboardSelected,
+  onDashboardChange,
   onSubmit,
   onTimeZoneChange,
+  onThemeChange,
 }) => {
   const themes = [{ value: '', text: 'Default' }, { value: 'dark', text: 'Dark' }, { value: 'light', text: 'Light' }];
 
@@ -35,9 +37,8 @@ const OrgPreferences: SFC<Props> = ({
           options={themes}
           getOptionValue={i => i.value}
           getOptionLabel={i => i.text}
-          onSelected={theme => {
-            console.log(theme);
-          }}
+          onSelected={theme => onThemeChange(theme)}
+          width={20}
         />
       </div>
       <div className="gf-form">
@@ -52,23 +53,22 @@ const OrgPreferences: SFC<Props> = ({
           </Tooltip>
         </span>
         <SimplePicker
-          getOptionLabel={i => i.title}
           getOptionValue={i => i.id}
-          onSelected={dashboard => onDashboardSelected(dashboard)}
+          getOptionLabel={i => i.title}
+          onSelected={(dashboard: DashboardAcl) => onDashboardChange(dashboard.id)}
           options={starredDashboards}
+          placeholder="Chose default dashboard"
+          width={20}
         />
       </div>
       <div className="gf-form">
         <label className="gf-form-label width-11">Timezone</label>
-
         <SimplePicker
-          className="gf-form-input"
-          onSelected={timezone => {
-            console.log(timezone);
-          }}
-          options={timezones}
-          getOptionLabel={i => i.text}
           getOptionValue={i => i.value}
+          getOptionLabel={i => i.text}
+          onSelected={timezone => onTimeZoneChange(timezone)}
+          options={timezones}
+          width={20}
         />
       </div>
       <div className="gf-form-button-row">

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

 import { ThunkAction } from 'redux-thunk';
-import { DashboardAcl, Organization, OrganisationPreferences, StoreState } from 'app/types';
+import { DashboardAcl, Organization, OrganizationPreferences, StoreState } from 'app/types';
 import { getBackendSrv } from '../../../core/services/backend_srv';
 
+type ThunkResult<R> = ThunkAction<R, StoreState, undefined, any>;
+
 export enum ActionTypes {
-  LoadOrganisation = 'LOAD_ORGANISATION',
+  LoadOrganization = 'LOAD_ORGANISATION',
   LoadPreferences = 'LOAD_PREFERENCES',
   LoadStarredDashboards = 'LOAD_STARRED_DASHBOARDS',
+  SetOrganizationName = 'SET_ORGANIZATION_NAME',
+  SetOrganizationTheme = 'SET_ORGANIZATION_THEME',
+  SetOrganizationHomeDashboard = 'SET_ORGANIZATION_HOME_DASHBOARD',
+  SetOrganizationTimezone = 'SET_ORGANIZATION_TIMEZONE',
 }
 
 interface LoadOrganizationAction {
-  type: ActionTypes.LoadOrganisation;
+  type: ActionTypes.LoadOrganization;
   payload: Organization;
 }
 
 interface LoadPreferencesAction {
   type: ActionTypes.LoadPreferences;
-  payload: OrganisationPreferences;
+  payload: OrganizationPreferences;
 }
 
 interface LoadStarredDashboardsAction {
@@ -23,12 +29,32 @@ interface LoadStarredDashboardsAction {
   payload: DashboardAcl[];
 }
 
+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.LoadOrganisation,
+  type: ActionTypes.LoadOrganization,
   payload: organisation,
 });
 
-const preferencesLoaded = (preferences: OrganisationPreferences) => ({
+const preferencesLoaded = (preferences: OrganizationPreferences) => ({
   type: ActionTypes.LoadPreferences,
   payload: preferences,
 });
@@ -38,12 +64,38 @@ const starredDashboardsLoaded = (dashboards: DashboardAcl[]) => ({
   payload: dashboards,
 });
 
-export type Action = LoadOrganizationAction | LoadPreferencesAction | LoadStarredDashboardsAction;
-type ThunkResult<R> = ThunkAction<R, StoreState, undefined, any>;
+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
+  | LoadStarredDashboardsAction
+  | SetOrganizationNameAction
+  | SetOrganizationThemeAction
+  | SetOrganizationHomeDashboardAction
+  | SetOrganizationTimezoneAction;
 
 export function loadOrganization(): ThunkResult<void> {
   return async dispatch => {
-    const organisationResponse = await getBackendSrv().get('/api/org');
+    const organisationResponse = await loadOrg();
     dispatch(organisationLoaded(organisationResponse));
 
     return organisationResponse;
@@ -52,12 +104,18 @@ export function loadOrganization(): ThunkResult<void> {
 
 export function loadOrganizationPreferences(): ThunkResult<void> {
   return async dispatch => {
-    const preferencesResponse = await getBackendSrv().get('/api/org/preferences');
+    const preferencesResponse = await loadPreferences();
     dispatch(preferencesLoaded(preferencesResponse));
 
     const starredDashboards = await getBackendSrv().search({ starred: true });
     dispatch(starredDashboardsLoaded(starredDashboards));
-
-    return preferencesResponse;
   };
 }
+
+export async function loadOrg() {
+  return await await getBackendSrv().get('/api/org');
+}
+
+export async function loadPreferences() {
+  return await getBackendSrv().get('/api/org/preferences');
+}

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

-import { DashboardAcl, Organization, OrganisationPreferences, OrganisationState } from 'app/types';
+import { DashboardAcl, Organization, OrganizationPreferences, OrganizationState } from 'app/types';
 import { Action, ActionTypes } from './actions';
 
-const initialState: OrganisationState = {
-  organisation: {} as Organization,
-  preferences: {} as OrganisationPreferences,
+const initialState: OrganizationState = {
+  organization: {} as Organization,
+  preferences: {} as OrganizationPreferences,
   starredDashboards: [] as DashboardAcl[],
 };
 
-const organisationReducer = (state = initialState, action: Action): OrganisationState => {
+const organizationReducer = (state = initialState, action: Action): OrganizationState => {
   switch (action.type) {
-    case ActionTypes.LoadOrganisation:
-      return { ...state, organisation: action.payload };
+    case ActionTypes.LoadOrganization:
+      return { ...state, organization: action.payload };
 
     case ActionTypes.LoadPreferences:
       return { ...state, preferences: action.payload };
 
     case ActionTypes.LoadStarredDashboards:
       return { ...state, starredDashboards: 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;
 };
 
 export default {
-  organisation: organisationReducer,
+  organization: organizationReducer,
 };

public/app/store/configureStore.ts

@@ -10,7 +10,7 @@ import dashboardReducers from 'app/features/dashboard/state/reducers';
 import pluginReducers from 'app/features/plugins/state/reducers';
 import dataSourcesReducers from 'app/features/datasources/state/reducers';
 import usersReducers from 'app/features/users/state/reducers';
-import organisationReducers from 'app/features/org/state/reducers';
+import organizationReducers from 'app/features/org/state/reducers';
 
 const rootReducers = {
   ...sharedReducers,
@@ -22,7 +22,7 @@ const rootReducers = {
   ...pluginReducers,
   ...dataSourcesReducers,
   ...usersReducers,
-  ...organisationReducers,
+  ...organizationReducers,
 };
 
 export let store;

public/app/types/index.ts

@@ -22,7 +22,7 @@ import {
 } from './series';
 import { PanelProps } from './panel';
 import { PluginDashboard, PluginMeta, Plugin, PluginsState } from './plugins';
-import { Organization, OrganisationPreferences, OrganisationState } from './organization';
+import { Organization, OrganizationPreferences, OrganizationState } from './organization';
 
 export {
   Team,
@@ -72,8 +72,8 @@ export {
   DataQueryOptions,
   PluginDashboard,
   Organization,
-  OrganisationState,
-  OrganisationPreferences,
+  OrganizationState,
+  OrganizationPreferences,
 };
 
 export interface StoreState {
@@ -86,5 +86,5 @@ export interface StoreState {
   dashboard: DashboardState;
   dataSources: DataSourcesState;
   users: UsersState;
-  organisation: OrganisationState;
+  organization: OrganizationState;
 }

public/app/types/organization.ts

@@ -5,14 +5,14 @@ export interface Organization {
   id: number;
 }
 
-export interface OrganisationPreferences {
+export interface OrganizationPreferences {
   homeDashboardId: number;
   theme: string;
   timezone: string;
 }
 
-export interface OrganisationState {
-  organisation: Organization;
-  preferences: OrganisationPreferences;
+export interface OrganizationState {
+  organization: Organization;
+  preferences: OrganizationPreferences;
   starredDashboards: DashboardAcl[];
 }