Skip to content

N
nexpie-grafana-theme
Commit cf0db516 by Torkel Ödegaard
Options

Trying to reduce the amount of duplication with preferences

parent 2ff58d52
Showing with 108 additions and 611 deletions
public/app/core/actions/user.ts deleted 100644 → 0
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/teams/TeamPreferences.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 { setTeamHomeDashboard, setTeamTheme, setTeamTimezone, updateTeamPreferences } 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[];
setTeamHomeDashboard: typeof setTeamHomeDashboard;
setTeamTheme: typeof setTeamTheme;
setTeamTimezone: typeof setTeamTimezone;
updateTeamPreferences: typeof updateTeamPreferences;
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' }];
......@@ -22,19 +25,59 @@ const timezones = [
{ value: 'utc', text: 'UTC' },
];
export class TeamPreferences extends PureComponent<Props> {
onSubmitForm = event => {
export class SharedPreferences extends PureComponent<Props, State> {
backendSrv: BackendSrv = getBackendSrv();
constructor(props) {
super(props);
console.log('props', 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 });
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.updateTeamPreferences();
const { homeDashboardId, theme, timezone } = this.state;
await this.backendSrv.put(`/api/${this.props.resourceUri}/preferences`, {
homeDashboardId,
theme,
timezone,
});
};
render() {
const { preferences, starredDashboards, setTeamHomeDashboard, setTeamTimezone, setTeamTheme } = this.props;
onThemeChanged = (theme: string) => {
this.setState({ theme });
};
onTimeZoneChanged = (timezone: string) => {
this.setState({ timezone });
};
onHomeDashboardChanged = (dashboardId: number) => {
this.setState({ homeDashboardId: dashboardId });
};
const dashboards: DashboardSearchHit[] = [
{ id: 0, title: 'Default', tags: [], type: '', uid: '', uri: '', url: '' },
...starredDashboards,
];
render() {
const { theme, timezone, homeDashboardId, dashboards } = this.state;
return (
<form className="section gf-form-group" onSubmit={this.onSubmitForm}>
......@@ -42,11 +85,11 @@ export class TeamPreferences 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 => setTeamTheme(theme.value)}
onSelected={theme => this.onThemeChanged(theme.value)}
width={20}
/>
</div>
......@@ -58,10 +101,10 @@ export class TeamPreferences extends PureComponent<Props> {
Home Dashboard
</Label>
<SimplePicker
defaultValue={dashboards.find(dashboard => dashboard.id === preferences.homeDashboardId)}
value={dashboards.find(dashboard => dashboard.id === homeDashboardId)}
getOptionValue={i => i.id}
getOptionLabel={i => i.title}
onSelected={(dashboard: DashboardSearchHit) => setTeamHomeDashboard(dashboard.id)}
onSelected={(dashboard: DashboardSearchHit) => this.onHomeDashboardChanged(dashboard.id)}
options={dashboards}
placeholder="Chose default dashboard"
width={20}
......@@ -70,10 +113,10 @@ export class TeamPreferences 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 => setTeamTimezone(timezone.value)}
onSelected={timezone => this.onTimeZoneChanged(timezone.value)}
options={timezones}
width={20}
/>
......@@ -88,18 +131,4 @@ export class TeamPreferences extends PureComponent<Props> {
}
}
function mapStateToProps(state) {
return {
preferences: state.team.preferences,
starredDashboards: state.user.starredDashboards,
};
}
const mapDispatchToProps = {
setTeamHomeDashboard,
setTeamTimezone,
setTeamTheme,
updateTeamPreferences,
};
export default connect(mapStateToProps, mapDispatchToProps)(TeamPreferences);
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 deleted 100644 → 0
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 deleted 100644 → 0
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/OrgPreferences.tsx deleted 100644 → 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 {
setOrganizationHomeDashboard,
setOrganizationTheme,
setOrganizationTimezone,
updateOrganizationPreferences,
} from './state/actions';
export interface Props {
preferences: OrganizationPreferences;
starredDashboards: DashboardSearchHit[];
setOrganizationHomeDashboard: typeof setOrganizationHomeDashboard;
setOrganizationTheme: typeof setOrganizationTheme;
setOrganizationTimezone: typeof setOrganizationTimezone;
updateOrganizationPreferences: typeof updateOrganizationPreferences;
}
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 OrgPreferences extends PureComponent<Props> {
onSubmitForm = event => {
event.preventDefault();
this.props.updateOrganizationPreferences();
};
render() {
const {
preferences,
starredDashboards,
setOrganizationHomeDashboard,
setOrganizationTimezone,
setOrganizationTheme,
} = 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 => setOrganizationTheme(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) => setOrganizationHomeDashboard(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 => setOrganizationTimezone(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.organization.preferences,
starredDashboards: state.user.starredDashboards,
};
}
const mapDispatchToProps = {
setOrganizationHomeDashboard,
setOrganizationTimezone,
setOrganizationTheme,
updateOrganizationPreferences,
};
export default connect(mapStateToProps, mapDispatchToProps)(OrgPreferences);
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
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 deleted 100644 → 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/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/__mocks__/teamMocks.ts
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
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
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
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
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);
});
});
......
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;
}
public/app/types/teams.ts
import { OrganizationPreferences } from './organization';
export interface Team {
id: number;
name: string;
......@@ -33,5 +31,4 @@ export interface TeamState {
members: TeamMember[];
groups: TeamGroup[];
searchMemberQuery: string;
preferences: OrganizationPreferences;
}
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment