Skip to content

N
nexpie-grafana-theme
Commit 026588cb by Peter Holmberg
Options

test and some refactoring

parent ccbff592
Showing with 411 additions and 121 deletions
public/app/features/org/OrgDetailsPage.test.tsx 0 → 100644
import React from 'react';
import { shallow } from 'enzyme';
import { OrgDetailsPage, Props } from './OrgDetailsPage';
import { NavModel, Organization, OrganizationPreferences } 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(),
};
Object.assign(props, propOverrides);
return shallow(<OrgDetailsPage {...props} />);
};
describe('Render', () => {
it('should render component', () => {
const wrapper = setup();
expect(wrapper).toMatchSnapshot();
});
it('should render organization and preferences', () => {
const wrapper = setup({
organization: {
name: 'Cool org',
id: 1,
},
preferences: {
homeDashboardId: 1,
theme: 'Default',
timezone: 'Default',
},
});
expect(wrapper).toMatchSnapshot();
});
});
public/app/features/org/OrgDetailsPage.tsx
...@@ -9,30 +9,21 @@ import { ...@@ -9,30 +9,21 @@ import {
loadOrganization, loadOrganization,
loadOrganizationPreferences, loadOrganizationPreferences,
setOrganizationName, setOrganizationName,
setOrganizationTheme,
setOrganizationHomeDashboard,
setOrganizationTimezone,
updateOrganization, updateOrganization,
updateOrganizationPreferences,
} from './state/actions'; } from './state/actions';
import { loadStarredDashboards } from '../dashboard/state/actions'; import { loadStarredDashboards } from '../dashboard/state/actions';
import { DashboardAcl, NavModel, Organization, OrganizationPreferences, StoreState } from 'app/types'; import { NavModel, Organization, OrganizationPreferences, StoreState } from 'app/types';
import { getNavModel } from '../../core/selectors/navModel'; import { getNavModel } from '../../core/selectors/navModel';
export interface Props { export interface Props {
navModel: NavModel; navModel: NavModel;
organization: Organization; organization: Organization;
preferences: OrganizationPreferences; preferences: OrganizationPreferences;
starredDashboards: DashboardAcl[];
loadOrganization: typeof loadOrganization; loadOrganization: typeof loadOrganization;
loadOrganizationPreferences: typeof loadOrganizationPreferences; loadOrganizationPreferences: typeof loadOrganizationPreferences;
loadStarredDashboards: typeof loadStarredDashboards; loadStarredDashboards: typeof loadStarredDashboards;
setOrganizationName: typeof setOrganizationName; setOrganizationName: typeof setOrganizationName;
setOrganizationHomeDashboard: typeof setOrganizationHomeDashboard;
setOrganizationTheme: typeof setOrganizationTheme;
setOrganizationTimezone: typeof setOrganizationTimezone;
updateOrganization: typeof updateOrganization; updateOrganization: typeof updateOrganization;
updateOrganizationPreferences: typeof updateOrganizationPreferences;
} }
export class OrgDetailsPage extends PureComponent<Props> { export class OrgDetailsPage extends PureComponent<Props> {
...@@ -50,24 +41,8 @@ export class OrgDetailsPage extends PureComponent<Props> { ...@@ -50,24 +41,8 @@ export class OrgDetailsPage extends PureComponent<Props> {
this.props.updateOrganization(); this.props.updateOrganization();
}; };
onSubmitPreferences = () => {
this.props.updateOrganizationPreferences();
};
onThemeChange = theme => {
this.props.setOrganizationTheme(theme);
};
onHomeDashboardChange = dashboardId => {
this.props.setOrganizationHomeDashboard(dashboardId);
};
onTimeZoneChange = timeZone => {
this.props.setOrganizationTimezone(timeZone);
};
render() { render() {
const { navModel, organization, preferences, starredDashboards } = this.props; const { navModel, organization, preferences } = this.props;
return ( return (
<div> <div>
...@@ -82,14 +57,7 @@ export class OrgDetailsPage extends PureComponent<Props> { ...@@ -82,14 +57,7 @@ export class OrgDetailsPage extends PureComponent<Props> {
onSubmit={this.onUpdateOrganization} onSubmit={this.onUpdateOrganization}
orgName={organization.name} orgName={organization.name}
/> />
<OrgPreferences <OrgPreferences />
preferences={preferences}
starredDashboards={starredDashboards}
onDashboardChange={dashboardId => this.onHomeDashboardChange(dashboardId)}
onThemeChange={theme => this.onThemeChange(theme)}
onTimeZoneChange={timeZone => this.onTimeZoneChange(timeZone)}
onSubmit={this.onSubmitPreferences}
/>
</div> </div>
)} )}
</div> </div>
...@@ -103,7 +71,6 @@ function mapStateToProps(state: StoreState) { ...@@ -103,7 +71,6 @@ function mapStateToProps(state: StoreState) {
navModel: getNavModel(state.navIndex, 'org-settings'), navModel: getNavModel(state.navIndex, 'org-settings'),
organization: state.organization.organization, organization: state.organization.organization,
preferences: state.organization.preferences, preferences: state.organization.preferences,
starredDashboards: state.organization.starredDashboards,
}; };
} }
...@@ -112,11 +79,7 @@ const mapDispatchToProps = { ...@@ -112,11 +79,7 @@ const mapDispatchToProps = {
loadOrganizationPreferences, loadOrganizationPreferences,
loadStarredDashboards, loadStarredDashboards,
setOrganizationName, setOrganizationName,
setOrganizationTheme,
setOrganizationHomeDashboard,
setOrganizationTimezone,
updateOrganization, updateOrganization,
updateOrganizationPreferences,
}; };
export default hot(module)(connect(mapStateToProps, mapDispatchToProps)(OrgDetailsPage)); export default hot(module)(connect(mapStateToProps, mapDispatchToProps)(OrgDetailsPage));
public/app/features/org/OrgPreferences.test.tsx 0 → 100644
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, name: 'Standard dashboard' }],
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
import React, { SFC } from 'react'; import React, { PureComponent } from 'react';
import { connect } from 'react-redux';
import Tooltip from '../../core/components/Tooltip/Tooltip'; import Tooltip from '../../core/components/Tooltip/Tooltip';
import SimplePicker from '../../core/components/Picker/SimplePicker'; import SimplePicker from '../../core/components/Picker/SimplePicker';
import { DashboardAcl, OrganizationPreferences } from 'app/types'; import { DashboardAcl, OrganizationPreferences } from 'app/types';
import {
setOrganizationHomeDashboard,
setOrganizationTheme,
setOrganizationTimezone,
updateOrganizationPreferences,
} from './state/actions';
interface Props { export interface Props {
preferences: OrganizationPreferences; preferences: OrganizationPreferences;
starredDashboards: DashboardAcl[]; starredDashboards: DashboardAcl[];
onDashboardChange: (dashboardId: number) => void; setOrganizationHomeDashboard: typeof setOrganizationHomeDashboard;
onTimeZoneChange: (timeZone: string) => void; setOrganizationTheme: typeof setOrganizationTheme;
onThemeChange: (theme: string) => void; setOrganizationTimezone: typeof setOrganizationTimezone;
onSubmit: () => void; updateOrganizationPreferences: typeof updateOrganizationPreferences;
} }
const OrgPreferences: SFC<Props> = ({ const themes = [{ value: '', text: 'Default' }, { value: 'dark', text: 'Dark' }, { value: 'light', text: 'Light' }];
preferences,
starredDashboards,
onDashboardChange,
onSubmit,
onTimeZoneChange,
onThemeChange,
}) => {
const themes = [{ value: '', text: 'Default' }, { value: 'dark', text: 'Dark' }, { value: 'light', text: 'Light' }];
const timezones = [ const timezones = [
{ value: '', text: 'Default' }, { value: '', text: 'Default' },
{ value: 'browser', text: 'Local browser time' }, { value: 'browser', text: 'Local browser time' },
{ value: 'utc', text: 'UTC' }, { value: 'utc', text: 'UTC' },
]; ];
return ( export class OrgPreferences extends PureComponent<Props> {
<form onSubmitForm = event => {
className="section gf-form-group" event.preventDefault();
onSubmit={event => { this.props.updateOrganizationPreferences();
event.preventDefault(); };
onSubmit();
}} render() {
> const {
<h3 className="page-heading">Preferences</h3> preferences,
<div className="gf-form"> starredDashboards,
<span className="gf-form-label width-11">UI Theme</span> setOrganizationHomeDashboard,
<SimplePicker setOrganizationTimezone,
defaultValue={themes.find(theme => theme.value === preferences.theme)} setOrganizationTheme,
options={themes} } = this.props;
getOptionValue={i => i.value}
getOptionLabel={i => i.text} starredDashboards.unshift({ id: 0, title: 'Default' });
onSelected={theme => onThemeChange(theme.value)}
width={20} return (
/> <form className="section gf-form-group" onSubmit={this.onSubmitForm}>
</div> <h3 className="page-heading">Preferences</h3>
<div className="gf-form"> <div className="gf-form">
<span className="gf-form-label width-11"> <span className="gf-form-label width-11">UI Theme</span>
Home Dashboard <SimplePicker
<Tooltip defaultValue={themes.find(theme => theme.value === preferences.theme)}
className="gf-form-help-icon gf-form-help-icon--right-normal" options={themes}
placement="right" getOptionValue={i => i.value}
content="Not finding dashboard you want? Star it first, then it should appear in this select box." getOptionLabel={i => i.text}
> onSelected={theme => setOrganizationTheme(theme.value)}
<i className="fa fa-info-circle" /> width={20}
</Tooltip> />
</span> </div>
<SimplePicker <div className="gf-form">
defaultValue={starredDashboards.find(dashboard => dashboard.id === preferences.homeDashboardId)} <span className="gf-form-label width-11">
getOptionValue={i => i.id} Home Dashboard
getOptionLabel={i => i.title} <Tooltip
onSelected={(dashboard: DashboardAcl) => onDashboardChange(dashboard.id)} className="gf-form-help-icon gf-form-help-icon--right-normal"
options={starredDashboards} placement="right"
placeholder="Chose default dashboard" content="Not finding dashboard you want? Star it first, then it should appear in this select box."
width={20} >
/> <i className="fa fa-info-circle" />
</div> </Tooltip>
<div className="gf-form"> </span>
<label className="gf-form-label width-11">Timezone</label> <SimplePicker
<SimplePicker defaultValue={starredDashboards.find(dashboard => dashboard.id === preferences.homeDashboardId)}
defaultValue={timezones.find(timezone => timezone.value === preferences.timezone)} getOptionValue={i => i.id}
getOptionValue={i => i.value} getOptionLabel={i => i.title}
getOptionLabel={i => i.text} onSelected={(dashboard: DashboardAcl) => setOrganizationHomeDashboard(dashboard.id)}
onSelected={timezone => onTimeZoneChange(timezone.value)} options={starredDashboards}
options={timezones} placeholder="Chose default dashboard"
width={20} width={20}
/> />
</div> </div>
<div className="gf-form-button-row"> <div className="gf-form">
<button type="submit" className="btn btn-success"> <label className="gf-form-label width-11">Timezone</label>
Save <SimplePicker
</button> defaultValue={timezones.find(timezone => timezone.value === preferences.timezone)}
</div> getOptionValue={i => i.value}
</form> 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.organization.starredDashboards,
};
}
const mapDispatchToProps = {
setOrganizationHomeDashboard,
setOrganizationTimezone,
setOrganizationTheme,
updateOrganizationPreferences,
}; };
export default OrgPreferences; export default connect(mapStateToProps, mapDispatchToProps)(OrgPreferences);
public/app/features/org/OrgProfile.test.tsx 0 → 100644
import React from 'react';
import { shallow } from 'enzyme';
import OrgProfile, { Props } from './OrgProfile';
const setup = () => {
const props: Props = {
orgName: 'Main org',
onSubmit: jest.fn(),
onOrgNameChange: jest.fn(),
};
return shallow(<OrgProfile {...props} />);
};
describe('Render', () => {
it('should render component', () => {
const wrapper = setup();
expect(wrapper).toMatchSnapshot();
});
});
public/app/features/org/OrgProfile.tsx
import React, { SFC } from 'react'; import React, { SFC } from 'react';
interface Props { export interface Props {
orgName: string; orgName: string;
onSubmit: () => void; onSubmit: () => void;
onOrgNameChange: (orgName: string) => void; onOrgNameChange: (orgName: string) => void;
......
public/app/features/org/__snapshots__/OrgDetailsPage.test.tsx.snap 0 → 100644
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`Render should render component 1`] = `
<div>
<PageHeader
model={Object {}}
/>
<div
className="page-container page-body"
>
<PageLoader
pageName="Organization"
/>
</div>
</div>
`;
exports[`Render should render organization and preferences 1`] = `
<div>
<PageHeader
model={Object {}}
/>
<div
className="page-container page-body"
>
<div>
<OrgProfile
onOrgNameChange={[Function]}
onSubmit={[Function]}
orgName="Cool org"
/>
<Connect(OrgPreferences) />
</div>
</div>
</div>
`;
public/app/features/org/__snapshots__/OrgPreferences.test.tsx.snap 0 → 100644
// 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"
>
<span
className="gf-form-label width-11"
>
Home Dashboard
<class_1
className="gf-form-help-icon gf-form-help-icon--right-normal"
content="Not finding dashboard you want? Star it first, then it should appear in this select box."
placement="right"
>
<i
className="fa fa-info-circle"
/>
</class_1>
</span>
<SimplePicker
defaultValue={
Object {
"id": 1,
"name": "Standard dashboard",
}
}
getOptionLabel={[Function]}
getOptionValue={[Function]}
onSelected={[Function]}
options={
Array [
Object {
"id": 1,
"name": "Standard dashboard",
},
]
}
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/__snapshots__/OrgProfile.test.tsx.snap 0 → 100644
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`Render should render component 1`] = `
<div>
<h3
className="page-sub-heading"
>
Organization profile
</h3>
<form
className="gf-form-group"
name="orgForm"
onSubmit={[Function]}
>
<div
className="gf-form-inline"
>
<div
className="gf-form max-width-28"
>
<span
className="gf-form-label"
>
Organization name
</span>
<input
className="gf-form-input"
onChange={[Function]}
type="text"
value="Main org"
/>
</div>
</div>
<div
className="gf-form-button-row"
>
<button
className="btn btn-success"
type="submit"
>
Save
</button>
</div>
</form>
</div>
`;
public/app/types/acl.ts
...@@ -39,6 +39,7 @@ export interface DashboardAcl { ...@@ -39,6 +39,7 @@ export interface DashboardAcl {
name?: string; name?: string;
inherited?: boolean; inherited?: boolean;
sortRank?: number; sortRank?: number;
title?: string;
} }
export interface DashboardPermissionInfo { export interface DashboardPermissionInfo {
......
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