IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2025-02-25 18:55:37 -06:00
Code Issues Packages Projects Releases Wiki Activity

Make clear that variable scss files are generated from templates

Browse Source
This commit is contained in:
Dominik Prokop 2019-02-18 11:03:52 +01:00
parent 28f42bab5b
commit 6da57d4c08
13 changed files with 90 additions and 42 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
packages/grafana-ui/src/themes/_variables.dark.scss.tmpl.ts
View File

@ -1,9 +1,11 @@
/* tslint:disable:max-line-length */
import { GrafanaTheme } from '../types';
import { renderGeneratedFileBanner } from '../utils/generatedFileBanner';
export const darkThemeVarsTemplate = (theme: GrafanaTheme) =>
`// Global values
`${renderGeneratedFileBanner('grafana-ui/src/themes/dark.ts', 'grafana-ui/src/themes/_variables.dark.scss.tmpl.ts')}
// Global values
// --------------------------------------------------
$theme-name: dark;

4
packages/grafana-ui/src/themes/_variables.light.scss.tmpl.ts
View File

@ -1,9 +1,11 @@
/* tslint:disable:max-line-length */
import { GrafanaTheme } from '../types';
import { renderGeneratedFileBanner } from '../utils/generatedFileBanner';
export const lightThemeVarsTemplate = (theme: GrafanaTheme) =>
`// Global values
`${renderGeneratedFileBanner('grafana-ui/src/themes/light.ts', 'grafana-ui/src/themes/_variable.light.scss.tmpl.ts')}
// Global values
// --------------------------------------------------
$theme-name: light;

4
packages/grafana-ui/src/themes/_variables.scss.tmpl.ts
View File

@ -1,9 +1,11 @@
/* tslint:disable:max-line-length */
import { GrafanaThemeCommons } from '../types';
import { renderGeneratedFileBanner } from '../utils/generatedFileBanner';
export const commonThemeVarsTemplate = (theme: GrafanaThemeCommons) =>
`// Options
`${renderGeneratedFileBanner('grafana-ui/src/themes/default.ts', 'grafana-ui/src/themes/_variables.scss.tmpl.ts')}
// Options
//
// Quickly modify global styling by enabling or disabling optional features.

10
packages/grafana-ui/src/utils/generatedFileBanner.ts Normal file
View File

@ -0,0 +1,10 @@
export const renderGeneratedFileBanner = (themeFile: string, templateFile: string) => `/***
* !!! THIS FILE WAS GENERATED AUTOMATICALLY !!!
*
* Do not modify this file!
* - Edit ${themeFile} to regenerate
* - Edit ${templateFile} to update template
*
* !!! THIS FILE WAS GENERATED AUTOMATICALLY !!!
*/
`;

60
public/app/features/dashboard/containers/DashboardPage.test.tsx
View File

@ -3,10 +3,10 @@ import { shallow, ShallowWrapper } from 'enzyme';
import { DashboardPage, Props, State } from './DashboardPage';
import { DashboardModel } from '../state';
import { cleanUpDashboard } from '../state/actions';
import { getNoPayloadActionCreatorMock, NoPayloadActionCreatorMock } from 'app/core/redux';
import { getNoPayloadActionCreatorMock, NoPayloadActionCreatorMock } from 'app/core/redux';
import { DashboardRouteInfo, DashboardInitPhase } from 'app/types';
jest.mock('sass/_variables.scss', () => ({
jest.mock('sass/_variables.generated.scss', () => ({
panelhorizontalpadding: 10,
panelVerticalPadding: 10,
}));
@ -23,17 +23,20 @@ interface ScenarioContext {
}
function getTestDashboard(overrides?: any, metaOverrides?: any): DashboardModel {
const data = Object.assign({
title: 'My dashboard',
panels: [
{
id: 1,
type: 'graph',
title: 'My graph',
gridPos: { x: 0, y: 0, w: 1, h: 1 },
},
],
}, overrides);
const data = Object.assign(
{
title: 'My dashboard',
panels: [
{
id: 1,
type: 'graph',
title: 'My graph',
gridPos: { x: 0, y: 0, w: 1, h: 1 },
},
],
},
overrides
);
const meta = Object.assign({ canSave: true, canEdit: true }, metaOverrides);
return new DashboardModel(data, meta);
@ -74,7 +77,7 @@ function dashboardPageScenario(description, scenarioFn: (ctx: ScenarioContext) =
ctx.dashboard = props.dashboard;
ctx.wrapper = shallow(<DashboardPage {...props} />);
}
},
};
beforeEach(() => {
@ -86,8 +89,7 @@ function dashboardPageScenario(description, scenarioFn: (ctx: ScenarioContext) =
}
describe('DashboardPage', () => {
dashboardPageScenario("Given initial state", (ctx) => {
dashboardPageScenario('Given initial state', ctx => {
ctx.setup(() => {
ctx.mount();
});
@ -97,7 +99,7 @@ describe('DashboardPage', () => {
});
});
dashboardPageScenario("Dashboard is fetching slowly", (ctx) => {
dashboardPageScenario('Dashboard is fetching slowly', ctx => {
ctx.setup(() => {
ctx.mount();
ctx.wrapper.setProps({
@ -111,7 +113,7 @@ describe('DashboardPage', () => {
});
});
dashboardPageScenario("Dashboard init completed ", (ctx) => {
dashboardPageScenario('Dashboard init completed ', ctx => {
ctx.setup(() => {
ctx.mount();
ctx.setDashboardProp();
@ -126,7 +128,7 @@ describe('DashboardPage', () => {
});
});
dashboardPageScenario("When user goes into panel edit", (ctx) => {
dashboardPageScenario('When user goes into panel edit', ctx => {
ctx.setup(() => {
ctx.mount();
ctx.setDashboardProp();
@ -149,7 +151,7 @@ describe('DashboardPage', () => {
});
});
dashboardPageScenario("When user goes back to dashboard from panel edit", (ctx) => {
dashboardPageScenario('When user goes back to dashboard from panel edit', ctx => {
ctx.setup(() => {
ctx.mount();
ctx.setDashboardProp();
@ -179,7 +181,7 @@ describe('DashboardPage', () => {
});
});
dashboardPageScenario("When dashboard has editview url state", (ctx) => {
dashboardPageScenario('When dashboard has editview url state', ctx => {
ctx.setup(() => {
ctx.mount();
ctx.setDashboardProp();
@ -197,7 +199,7 @@ describe('DashboardPage', () => {
});
});
dashboardPageScenario("When adding panel", (ctx) => {
dashboardPageScenario('When adding panel', ctx => {
ctx.setup(() => {
ctx.mount();
ctx.setDashboardProp();
@ -214,37 +216,37 @@ describe('DashboardPage', () => {
});
});
dashboardPageScenario("Given panel with id 0", (ctx) => {
dashboardPageScenario('Given panel with id 0', ctx => {
ctx.setup(() => {
ctx.mount();
ctx.setDashboardProp({
panels: [{ id: 0, type: 'graph'}],
panels: [{ id: 0, type: 'graph' }],
schemaVersion: 17,
});
ctx.wrapper.setProps({
urlEdit: true,
urlFullscreen: true,
urlPanelId: '0'
urlPanelId: '0',
});
});
it('Should go into edit mode' , () => {
it('Should go into edit mode', () => {
expect(ctx.wrapper.state().isEditing).toBe(true);
expect(ctx.wrapper.state().fullscreenPanel.id).toBe(0);
});
});
dashboardPageScenario("When dashboard unmounts", (ctx) => {
dashboardPageScenario('When dashboard unmounts', ctx => {
ctx.setup(() => {
ctx.mount();
ctx.setDashboardProp({
panels: [{ id: 0, type: 'graph'}],
panels: [{ id: 0, type: 'graph' }],
schemaVersion: 17,
});
ctx.wrapper.unmount();
});
it('Should call clean up action' , () => {
it('Should call clean up action', () => {
expect(ctx.cleanUpDashboardMock.calls).toBe(1);
});
});

2
public/app/features/dashboard/dashgrid/PanelChrome.tsx
View File

@ -19,7 +19,7 @@ import { DashboardModel, PanelModel } from '../state';
import { PanelPlugin } from 'app/types';
import { TimeRange, LoadingState } from '@grafana/ui';
import variables from 'sass/_variables.scss';
import variables from 'sass/_variables.generated.scss';
import templateSrv from 'app/features/templating/template_srv';
import { DataQueryResponse } from '@grafana/ui/src';

10
public/sass/_variables.dark.scss → public/sass/_variables.dark.generated.scss
View File

@ -1,3 +1,13 @@
/***
* !!! THIS FILE WAS GENERATED AUTOMATICALLY !!!
*
* Do not modify it!
* - Edit grafana-ui/src/themes/dark.ts to regenerate
* - Edit grafana-ui/src/themes/_variables.dark.scss.tmpl.ts to update template
*
* !!! THIS FILE WAS GENERATED AUTOMATICALLY !!!
*/
// Global values
// --------------------------------------------------

10
public/sass/_variables.scss → public/sass/_variables.generated.scss
View File

@ -1,3 +1,13 @@
/***
* !!! THIS FILE WAS GENERATED AUTOMATICALLY !!!
*
* Do not modify it!
* - Edit grafana-ui/src/themes/default.ts to regenerate
* - Edit grafana-ui/src/themes/_variables.scss.tmpl.ts to update template
*
* !!! THIS FILE WAS GENERATED AUTOMATICALLY !!!
*/
// Options
//
// Quickly modify global styling by enabling or disabling optional features.

4
public/sass/_variables.scss.d.ts → public/sass/_variables.generated.scss.d.ts vendored
View File

@ -1,6 +1,6 @@
export interface GrafanaVariables {
'panelHorizontalPadding': number;
'panelVerticalPadding': number;
panelHorizontalPadding: number;
panelVerticalPadding: number;
}
declare const variables: GrafanaVariables;

10
public/sass/_variables.light.scss → public/sass/_variables.light.generated.scss
View File

@ -1,3 +1,13 @@
/***
* !!! THIS FILE WAS GENERATED AUTOMATICALLY !!!
*
* Do not modify it!
* - Edit grafana-ui/src/themes/light.ts to regenerate
* - Edit grafana-ui/src/themes/_variable.light.scss.tmpl.ts to update template
*
* !!! THIS FILE WAS GENERATED AUTOMATICALLY !!!
*/
// Global values
// --------------------------------------------------

4
public/sass/grafana.dark.scss
View File

@ -1,3 +1,3 @@
@import 'variables';
@import 'variables.dark';
@import 'variables.generated';
@import 'variables.dark.generated';
@import 'grafana';

4
public/sass/grafana.light.scss
View File

@ -1,3 +1,3 @@
@import 'variables';
@import 'variables.light';
@import 'variables.generated';
@import 'variables.light.generated';
@import 'grafana';

6
scripts/cli/generateSassVariableFiles.ts
View File

@ -6,9 +6,9 @@ import { darkThemeVarsTemplate } from '@grafana/ui/src/themes/_variables.dark.sc
import { lightThemeVarsTemplate } from '@grafana/ui/src/themes/_variables.light.scss.tmpl';
import { commonThemeVarsTemplate } from '@grafana/ui/src/themes/_variables.scss.tmpl';
const darkThemeVariablesPath = __dirname + '/../../public/sass/_variables.dark.scss';
const lightThemeVariablesPath = __dirname + '/../../public/sass/_variables.light.scss';
const defaultThemeVariablesPath = __dirname + '/../../public/sass/_variables.scss';
const darkThemeVariablesPath = __dirname + '/../../public/sass/_variables.dark.generated.scss';
const lightThemeVariablesPath = __dirname + '/../../public/sass/_variables.light.generated.scss';
const defaultThemeVariablesPath = __dirname + '/../../public/sass/_variables.generated.scss';
const writeVariablesFile = async (path: string, data: string) => {
return new Promise((resolve, reject) => {