Add support for the new styled component theme

diff --git a/server/sonar-vsts/src/main/js/components/LoginForm.tsx b/server/sonar-vsts/src/main/js/components/LoginForm.tsx
index e13cbc7df31ade4cb953ced9786cdc6e425f5ed1..4144aa3929ee3c6e241c159ceea6a1dcacdf61d5 100644 (file)
--- a/server/sonar-vsts/src/main/js/components/LoginForm.tsx
+++ b/server/sonar-vsts/src/main/js/components/LoginForm.tsx
@@ -19,7 +19,7 @@
  */
 import { getIdentityProviders } from '@sqapi/users';
 import * as React from 'react';
-import ThemeContext from 'sonar-ui-common/components/ThemeContext';
+import { ThemeConsumer } from 'sonar-ui-common/components/theme';
 import { getTextColor } from 'sonar-ui-common/helpers/colors';
 import { getBaseUrl } from 'sonar-ui-common/helpers/urls';
 import LoginLink from './LoginLink';
@@ -69,8 +69,8 @@ export default class LoginForm extends React.PureComponent<Props, State> {
         {identityProviders && (
           <section className="oauth-providers">
             {vstsProvider && (
-              <ThemeContext.Consumer>
-                {({ theme }) => (
+              <ThemeConsumer>
+                {theme => (
                   <LoginLink
                     onReload={onReload}
                     sessionUrl={`sessions/init/${vstsProvider.key}`}
@@ -90,7 +90,7 @@ export default class LoginForm extends React.PureComponent<Props, State> {
                     <span>{vstsProvider.name} log in</span>
                   </LoginLink>
                 )}
-              </ThemeContext.Consumer>
+              </ThemeConsumer>
             )}
           </section>
         )}

diff --git a/server/sonar-vsts/src/main/js/index.js b/server/sonar-vsts/src/main/js/index.js
index 44480848c2cf31554d0482b659d74d2c6b88edfb..9ce3b52ae80f5d8d95dbef82426998d7e508327d 100644 (file)
--- a/server/sonar-vsts/src/main/js/index.js
+++ b/server/sonar-vsts/src/main/js/index.js
@@ -20,7 +20,7 @@
 import { parse } from 'querystring';
 import React from 'react';
 import { render } from 'react-dom';
-import ThemeContext from 'sonar-ui-common/components/ThemeContext';
+import { ThemeProvider } from 'sonar-ui-common/components/theme';
 import * as theme from '../../../../sonar-web/src/main/js/app/theme';
 import Configuration from './components/Configuration';
 import Widget from './components/Widget';
@@ -47,9 +47,9 @@ if (query.type === 'authenticated') {
 
     if (query.type === 'configuration') {
       render(
-        <ThemeContext.Provider value={{ theme }}>
+        <ThemeProvider theme={theme}>
           <Configuration contribution={query.contribution} widgetHelpers={WidgetHelpers} />
-        </ThemeContext.Provider>,
+        </ThemeProvider>,
         container
       );
     } else {
@@ -66,9 +66,9 @@ function loadVSTSWidget(WidgetHelpers) {
   return widgetSettings => {
     try {
       render(
-        <ThemeContext.Provider value={{ theme }}>
+        <ThemeProvider theme={theme}>
           <Widget settings={parseWidgetSettings(widgetSettings)} />
-        </ThemeContext.Provider>,
+        </ThemeProvider>,
         container
       );
     } catch (error) {

diff --git a/server/sonar-web/src/main/js/app/utils/startReactApp.tsx b/server/sonar-web/src/main/js/app/utils/startReactApp.tsx
index f60009a4bc9d4fdf48fe28d7c06df9b0edd8b006..10802cfced50345fe4fc3b82700641602fe5649a 100644 (file)
--- a/server/sonar-web/src/main/js/app/utils/startReactApp.tsx
+++ b/server/sonar-web/src/main/js/app/utils/startReactApp.tsx
@@ -25,7 +25,7 @@ import { IntlProvider } from 'react-intl';
 import { Provider } from 'react-redux';
 import { IndexRoute, Redirect, Route, RouteConfig, RouteProps, Router } from 'react-router';
 import { lazyLoad } from 'sonar-ui-common/components/lazyLoad';
-import ThemeContext from 'sonar-ui-common/components/ThemeContext';
+import { ThemeProvider } from 'sonar-ui-common/components/theme';
 import getHistory from 'sonar-ui-common/helpers/getHistory';
 import aboutRoutes from '../../apps/about/routes';
 import accountRoutes from '../../apps/account/routes';
@@ -97,7 +97,7 @@ export default function startReactApp(
   render(
     <Provider store={store}>
       <IntlProvider defaultLocale={lang} locale={lang}>
-        <ThemeContext.Provider value={{ theme }}>
+        <ThemeProvider theme={theme}>
           <Router history={history} onUpdate={handleUpdate}>
             <Route
               path="/account/issues"
@@ -340,7 +340,7 @@ export default function startReactApp(
               </Route>
             </Route>
           </Router>
-        </ThemeContext.Provider>
+        </ThemeProvider>
       </IntlProvider>
     </Provider>,
     el