Make clear that variable scss files are generated from templates

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

 /* tslint:disable:max-line-length */
 /* tslint:disable:max-line-length */
 
 
 import { GrafanaTheme } from '../types';
 import { GrafanaTheme } from '../types';
+import { renderGeneratedFileBanner } from '../utils/generatedFileBanner';
 
 
 export const darkThemeVarsTemplate = (theme: GrafanaTheme) =>
 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;
 $theme-name: dark;

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

 /* tslint:disable:max-line-length */
 /* tslint:disable:max-line-length */
 
 
 import { GrafanaTheme } from '../types';
 import { GrafanaTheme } from '../types';
+import { renderGeneratedFileBanner } from '../utils/generatedFileBanner';
 
 
 export const lightThemeVarsTemplate = (theme: GrafanaTheme) =>
 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;
 $theme-name: light;

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

 /* tslint:disable:max-line-length */
 /* tslint:disable:max-line-length */
 
 
 import { GrafanaThemeCommons } from '../types';
 import { GrafanaThemeCommons } from '../types';
+import { renderGeneratedFileBanner } from '../utils/generatedFileBanner';
 
 
 export const commonThemeVarsTemplate = (theme: GrafanaThemeCommons) =>
 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.
 // Quickly modify global styling by enabling or disabling optional features.
 
 

packages/grafana-ui/src/utils/generatedFileBanner.ts

+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 !!!
+ */
+`;

public/app/features/dashboard/containers/DashboardPage.test.tsx

@@ -3,10 +3,10 @@ import { shallow, ShallowWrapper } from 'enzyme';
 import { DashboardPage, Props, State } from './DashboardPage';
 import { DashboardPage, Props, State } from './DashboardPage';
 import { DashboardModel } from '../state';
 import { DashboardModel } from '../state';
 import { cleanUpDashboard } from '../state/actions';
 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';
 import { DashboardRouteInfo, DashboardInitPhase } from 'app/types';
 
 
-jest.mock('sass/_variables.scss', () => ({
+jest.mock('sass/_variables.generated.scss', () => ({
   panelhorizontalpadding: 10,
   panelhorizontalpadding: 10,
   panelVerticalPadding: 10,
   panelVerticalPadding: 10,
 }));
 }));
@@ -23,17 +23,20 @@ interface ScenarioContext {
 }
 }
 
 
 function getTestDashboard(overrides?: any, metaOverrides?: any): DashboardModel {
 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);
   const meta = Object.assign({ canSave: true, canEdit: true }, metaOverrides);
   return new DashboardModel(data, meta);
   return new DashboardModel(data, meta);
@@ -74,7 +77,7 @@ function dashboardPageScenario(description, scenarioFn: (ctx: ScenarioContext) =
 
 
         ctx.dashboard = props.dashboard;
         ctx.dashboard = props.dashboard;
         ctx.wrapper = shallow(<DashboardPage {...props} />);
         ctx.wrapper = shallow(<DashboardPage {...props} />);
-      }
+      },
     };
     };
 
 
     beforeEach(() => {
     beforeEach(() => {
@@ -86,8 +89,7 @@ function dashboardPageScenario(description, scenarioFn: (ctx: ScenarioContext) =
 }
 }
 
 
 describe('DashboardPage', () => {
 describe('DashboardPage', () => {
-
-  dashboardPageScenario("Given initial state", (ctx) => {
+  dashboardPageScenario('Given initial state', ctx => {
     ctx.setup(() => {
     ctx.setup(() => {
       ctx.mount();
       ctx.mount();
     });
     });
@@ -97,7 +99,7 @@ describe('DashboardPage', () => {
     });
     });
   });
   });
 
 
-  dashboardPageScenario("Dashboard is fetching slowly", (ctx) => {
+  dashboardPageScenario('Dashboard is fetching slowly', ctx => {
     ctx.setup(() => {
     ctx.setup(() => {
       ctx.mount();
       ctx.mount();
       ctx.wrapper.setProps({
       ctx.wrapper.setProps({
@@ -111,7 +113,7 @@ describe('DashboardPage', () => {
     });
     });
   });
   });
 
 
-  dashboardPageScenario("Dashboard init completed ", (ctx) => {
+  dashboardPageScenario('Dashboard init completed ', ctx => {
     ctx.setup(() => {
     ctx.setup(() => {
       ctx.mount();
       ctx.mount();
       ctx.setDashboardProp();
       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.setup(() => {
       ctx.mount();
       ctx.mount();
       ctx.setDashboardProp();
       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.setup(() => {
       ctx.mount();
       ctx.mount();
       ctx.setDashboardProp();
       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.setup(() => {
       ctx.mount();
       ctx.mount();
       ctx.setDashboardProp();
       ctx.setDashboardProp();
@@ -197,7 +199,7 @@ describe('DashboardPage', () => {
     });
     });
   });
   });
 
 
-  dashboardPageScenario("When adding panel", (ctx) => {
+  dashboardPageScenario('When adding panel', ctx => {
     ctx.setup(() => {
     ctx.setup(() => {
       ctx.mount();
       ctx.mount();
       ctx.setDashboardProp();
       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.setup(() => {
       ctx.mount();
       ctx.mount();
       ctx.setDashboardProp({
       ctx.setDashboardProp({
-        panels: [{ id: 0, type: 'graph'}],
+        panels: [{ id: 0, type: 'graph' }],
         schemaVersion: 17,
         schemaVersion: 17,
       });
       });
       ctx.wrapper.setProps({
       ctx.wrapper.setProps({
         urlEdit: true,
         urlEdit: true,
         urlFullscreen: 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().isEditing).toBe(true);
       expect(ctx.wrapper.state().fullscreenPanel.id).toBe(0);
       expect(ctx.wrapper.state().fullscreenPanel.id).toBe(0);
     });
     });
   });
   });
 
 
-  dashboardPageScenario("When dashboard unmounts", (ctx) => {
+  dashboardPageScenario('When dashboard unmounts', ctx => {
     ctx.setup(() => {
     ctx.setup(() => {
       ctx.mount();
       ctx.mount();
       ctx.setDashboardProp({
       ctx.setDashboardProp({
-        panels: [{ id: 0, type: 'graph'}],
+        panels: [{ id: 0, type: 'graph' }],
         schemaVersion: 17,
         schemaVersion: 17,
       });
       });
       ctx.wrapper.unmount();
       ctx.wrapper.unmount();
     });
     });
 
 
-    it('Should call clean up action' , () => {
+    it('Should call clean up action', () => {
       expect(ctx.cleanUpDashboardMock.calls).toBe(1);
       expect(ctx.cleanUpDashboardMock.calls).toBe(1);
     });
     });
   });
   });

public/app/features/dashboard/dashgrid/PanelChrome.tsx

@@ -19,7 +19,7 @@ import { DashboardModel, PanelModel } from '../state';
 import { PanelPlugin } from 'app/types';
 import { PanelPlugin } from 'app/types';
 import { TimeRange, LoadingState } from '@grafana/ui';
 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 templateSrv from 'app/features/templating/template_srv';
 import { DataQueryResponse } from '@grafana/ui/src';
 import { DataQueryResponse } from '@grafana/ui/src';
 
 

public/sass/_variables.dark.scss → public/sass/_variables.dark.generated.scss

+/***
+ * !!! 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
 // Global values
 // --------------------------------------------------
 // --------------------------------------------------
 
 

public/sass/_variables.scss → public/sass/_variables.generated.scss

+/***
+ * !!! 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
 // Options
 //
 //
 // Quickly modify global styling by enabling or disabling optional features.
 // Quickly modify global styling by enabling or disabling optional features.

public/sass/_variables.scss.d.ts → public/sass/_variables.generated.scss.d.ts

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

public/sass/_variables.light.scss → public/sass/_variables.light.generated.scss

+/***
+ * !!! 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
 // Global values
 // --------------------------------------------------
 // --------------------------------------------------
 
 

public/sass/grafana.dark.scss

-@import 'variables';
-@import 'variables.dark';
+@import 'variables.generated';
+@import 'variables.dark.generated';
 @import 'grafana';
 @import 'grafana';

public/sass/grafana.light.scss

-@import 'variables';
-@import 'variables.light';
+@import 'variables.generated';
+@import 'variables.light.generated';
 @import 'grafana';
 @import 'grafana';

scripts/cli/generateSassVariableFiles.ts

@@ -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 { lightThemeVarsTemplate } from '@grafana/ui/src/themes/_variables.light.scss.tmpl';
 import { commonThemeVarsTemplate } from '@grafana/ui/src/themes/_variables.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) => {
 const writeVariablesFile = async (path: string, data: string) => {
   return new Promise((resolve, reject) => {
   return new Promise((resolve, reject) => {