Added config provider to be able to access config easily from react components

public/app/core/utils/ConfigProvider.tsx

@@ -0,0 +1,28 @@
+import React from 'react';
+import config, { Settings } from 'app/core/config';
+import { GrafanaTheme } from '@grafana/ui';
+
+export const ConfigContext = React.createContext<Settings>(config);
+export const ConfigConsumer = ConfigContext.Consumer;
+
+export const provideConfig = (component: React.ComponentType<any>) => {
+  const ConfigProvider = (props: any) => (
+    <ConfigContext.Provider value={config}>{React.createElement(component, { ...props })}</ConfigContext.Provider>
+  );
+
+  return ConfigProvider;
+};
+
+interface ThemeProviderProps {
+  children: (theme: GrafanaTheme) => JSX.Element;
+}
+
+export const ThemeProvider = ({ children }: ThemeProviderProps) => {
+  return (
+    <ConfigConsumer>
+      {({ bootData }) => {
+        return children(bootData.user.lightTheme ? GrafanaTheme.Light : GrafanaTheme.Dark);
+      }}
+    </ConfigConsumer>
+  );
+};

public/app/core/utils/react2angular.ts

@@ -1,10 +1,11 @@
 import coreModule from 'app/core/core_module';
+import { provideConfig } from 'app/core/utils/ConfigProvider';
 
 export function react2AngularDirective(name: string, component: any, options: any) {
   coreModule.directive(name, [
     'reactDirective',
     reactDirective => {
-      return reactDirective(component, options);
+      return reactDirective(provideConfig(component), options);
     },
   ]);
 }