[Infra UI] Add and use typed styled-components theme provider (elasti…

…c#33607)

This adds a specialization of the styled-components api, which is correctly typed according to the new theme variable type definitions included in EUI (elastic/eui#1750) and made available in Kibana via elastic#33873.

x-pack/common/eui_styled_components/eui_styled_components.tsx

@@ -0,0 +1,43 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+import React from 'react';
+import * as styledComponents from 'styled-components';
+import { ThemedStyledComponentsModule, ThemeProvider, ThemeProviderProps } from 'styled-components';
+
+import euiDarkVars from '@elastic/eui/dist/eui_theme_dark.json';
+import euiLightVars from '@elastic/eui/dist/eui_theme_light.json';
+
+export interface EuiTheme {
+  eui: typeof euiLightVars | typeof euiDarkVars;
+  darkMode: boolean;
+}
+
+const EuiThemeProvider = <T extends any>({
+  darkMode = false,
+  ...otherProps
+}: ThemeProviderProps<T & EuiTheme> & {
+  darkMode?: boolean;
+  children?: React.ReactNode;
+}) => (
+  <ThemeProvider
+    {...otherProps}
+    theme={() => ({
+      eui: darkMode ? euiDarkVars : euiLightVars,
+      darkMode,
+    })}
+  />
+);
+
+const {
+  default: euiStyled,
+  css,
+  injectGlobal,
+  keyframes,
+  withTheme,
+} = styledComponents as ThemedStyledComponentsModule<EuiTheme>;
+
+export { css, euiStyled, EuiThemeProvider, injectGlobal, keyframes, withTheme };

x-pack/common/eui_styled_components/index.ts

@@ -0,0 +1,19 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+import {
+  css,
+  euiStyled,
+  EuiTheme,
+  EuiThemeProvider,
+  injectGlobal,
+  keyframes,
+  withTheme,
+} from './eui_styled_components';
+
+export { css, euiStyled, EuiTheme, EuiThemeProvider, injectGlobal, keyframes, withTheme };
+// tslint:disable-next-line:no-default-export to mimick the styled-components module
+export default euiStyled;

x-pack/plugins/infra/public/apps/start_app.tsx

@@ -11,13 +11,11 @@ import { ApolloProvider } from 'react-apollo';
 import { Provider as ReduxStoreProvider } from 'react-redux';
 import { BehaviorSubject } from 'rxjs';
 import { pluck } from 'rxjs/operators';
-import { ThemeProvider } from 'styled-components';
 
 // TODO use theme provided from parentApp when kibana supports it
 import { EuiErrorBoundary } from '@elastic/eui';
-import euiDarkVars from '@elastic/eui/dist/eui_theme_dark.json';
-import euiLightVars from '@elastic/eui/dist/eui_theme_light.json';
 import { I18nContext } from 'ui/i18n';
+import { EuiThemeProvider } from '../../../../common/eui_styled_components';
 import { InfraFrontendLibs } from '../lib/lib';
 import { PageRouter } from '../routes';
 import { createStore } from '../store';
@@ -39,14 +37,9 @@ export async function startApp(libs: InfraFrontendLibs) {
           <ReduxStoreProvider store={store}>
             <ApolloProvider client={libs.apolloClient}>
               <ApolloClientContext.Provider value={libs.apolloClient}>
-                <ThemeProvider
-                  theme={() => ({
-                    eui: libs.framework.darkMode ? euiDarkVars : euiLightVars,
-                    darkMode: libs.framework.darkMode,
-                  })}
-                >
+                <EuiThemeProvider darkMode={libs.framework.darkMode}>
                   <PageRouter history={history} />
-                </ThemeProvider>
+                </EuiThemeProvider>
               </ApolloClientContext.Provider>
             </ApolloProvider>
           </ReduxStoreProvider>

x-pack/plugins/infra/public/components/autocomplete_field/autocomplete_field.tsx

@@ -11,10 +11,10 @@ import {
   EuiPanel,
 } from '@elastic/eui';
 import React from 'react';
-import styled from 'styled-components';
 
 import { AutocompleteSuggestion } from 'ui/autocomplete_providers';
 
+import euiStyled from '../../../../../common/eui_styled_components';
 import { composeStateUpdaters } from '../../utils/typed_react';
 import { SuggestionItem } from './suggestion_item';
 
@@ -296,11 +296,11 @@ const FixedEuiFieldSearch: React.SFC<
     }
 > = EuiFieldSearch as any;
 
-const AutocompleteContainer = styled.div`
+const AutocompleteContainer = euiStyled.div`
   position: relative;
 `;
 
-const SuggestionsPanel = styled(EuiPanel).attrs({
+const SuggestionsPanel = euiStyled(EuiPanel).attrs({
   paddingSize: 'none',
   hasShadow: true,
 })`

x-pack/plugins/infra/public/components/autocomplete_field/suggestion_item.tsx

@@ -7,9 +7,9 @@
 import { EuiIcon } from '@elastic/eui';
 import { transparentize } from 'polished';
 import React from 'react';
-import styled from 'styled-components';
 
 import { AutocompleteSuggestion } from 'ui/autocomplete_providers';
+import euiStyled from '../../../../../common/eui_styled_components';
 
 interface SuggestionItemProps {
   isSelected?: boolean;
@@ -42,25 +42,25 @@ export class SuggestionItem extends React.Component<SuggestionItemProps> {
   }
 }
 
-const SuggestionItemContainer = styled.div<{
+const SuggestionItemContainer = euiStyled.div<{
   isSelected?: boolean;
 }>`
   display: flex;
   flex-direction: row;
   font-size: ${props => props.theme.eui.euiFontSizeS};
-  height: ${props => props.theme.eui.euiSizeXl};
+  height: ${props => props.theme.eui.euiSizeXL};
   white-space: nowrap;
   background-color: ${props =>
     props.isSelected ? props.theme.eui.euiColorLightestShade : 'transparent'};
 `;
 
-const SuggestionItemField = styled.div`
+const SuggestionItemField = euiStyled.div`
   align-items: center;
   cursor: pointer;
   display: flex;
   flex-direction: row;
-  height: ${props => props.theme.eui.euiSizeXl};
-  padding: ${props => props.theme.eui.euiSizeXs};
+  height: ${props => props.theme.eui.euiSizeXL};
+  padding: ${props => props.theme.eui.euiSizeXS};
 `;
 
 const SuggestionItemIconField = SuggestionItemField.extend<{ suggestionType: string }>`
@@ -69,7 +69,7 @@ const SuggestionItemIconField = SuggestionItemField.extend<{ suggestionType: str
   color: ${props => getEuiIconColor(props.theme, props.suggestionType)};
   flex: 0 0 auto;
   justify-content: center;
-  width: ${props => props.theme.eui.euiSizeXl};
+  width: ${props => props.theme.eui.euiSizeXL};
 `;
 
 const SuggestionItemTextField = SuggestionItemField.extend`

x-pack/plugins/infra/public/components/empty_states/no_data.tsx

@@ -6,7 +6,8 @@
 
 import { EuiButton, EuiEmptyPrompt } from '@elastic/eui';
 import React from 'react';
-import styled from 'styled-components';
+
+import euiStyled from '../../../../../common/eui_styled_components';
 
 interface NoDataProps {
   titleText: string;
@@ -36,6 +37,6 @@ export const NoData: React.SFC<NoDataProps> = ({
   />
 );
 
-const CenteredEmptyPrompt = styled(EuiEmptyPrompt)`
+const CenteredEmptyPrompt = euiStyled(EuiEmptyPrompt)`
   align-self: center;
 `;

x-pack/plugins/infra/public/components/empty_states/no_indices.tsx

@@ -6,7 +6,8 @@
 
 import { EuiEmptyPrompt } from '@elastic/eui';
 import React from 'react';
-import styled from 'styled-components';
+
+import euiStyled from '../../../../../common/eui_styled_components';
 
 interface NoIndicesProps {
   message: string;
@@ -24,6 +25,6 @@ export const NoIndices: React.SFC<NoIndicesProps> = ({ actions, message, title,
   />
 );
 
-const CenteredEmptyPrompt = styled(EuiEmptyPrompt)`
+const CenteredEmptyPrompt = euiStyled(EuiEmptyPrompt)`
   align-self: center;
 `;

x-pack/plugins/infra/public/components/error_page.tsx

@@ -14,8 +14,8 @@ import {
 } from '@elastic/eui';
 import { FormattedMessage } from '@kbn/i18n/react';
 import React from 'react';
-import styled from 'styled-components';
 
+import euiStyled from '../../../../common/eui_styled_components';
 import { FlexPage } from './page';
 
 interface Props {
@@ -64,6 +64,6 @@ export const ErrorPage: React.SFC<Props> = ({ detailedMessage, retry, shortMessa
   </FlexPage>
 );
 
-const MinimumPageContent = styled(EuiPageContent)`
+const MinimumPageContent = euiStyled(EuiPageContent)`
   min-width: 50vh;
 `;

x-pack/plugins/infra/public/components/eui/toolbar/toolbar.tsx

@@ -6,9 +6,9 @@
 
 import { EuiPanel } from '@elastic/eui';
 
-import styled from 'styled-components';
+import euiStyled from '../../../../../../common/eui_styled_components';
 
-export const Toolbar = styled(EuiPanel).attrs({
+export const Toolbar = euiStyled(EuiPanel).attrs({
   grow: false,
   paddingSize: 'none',
 })`

x-pack/plugins/infra/public/components/loading/index.tsx

@@ -6,7 +6,8 @@
 
 import { EuiLoadingChart, EuiPanel, EuiText } from '@elastic/eui';
 import * as React from 'react';
-import styled from 'styled-components';
+
+import euiStyled from '../../../../../common/eui_styled_components';
 
 interface InfraLoadingProps {
   text: string | JSX.Element;
@@ -32,15 +33,15 @@ export class InfraLoadingPanel extends React.PureComponent<InfraLoadingProps, {}
   }
 }
 
-export const InfraLoadingStaticPanel = styled.div`
+export const InfraLoadingStaticPanel = euiStyled.div`
   position: relative;
   overflow: hidden;
   display: flex;
   flex-direction: column;
   justify-content: center;
 `;
 
-export const InfraLoadingStaticContentPanel = styled.div`
+export const InfraLoadingStaticContentPanel = euiStyled.div`
   flex: 0 0 auto;
   align-self: center;
   text-align: center;

x-pack/plugins/infra/public/components/logging/log_customization_menu.tsx

@@ -7,7 +7,8 @@
 import { EuiButtonEmpty, EuiPopover } from '@elastic/eui';
 import { FormattedMessage } from '@kbn/i18n/react';
 import * as React from 'react';
-import styled from 'styled-components';
+
+import euiStyled from '../../../../../common/eui_styled_components';
 
 interface LogCustomizationMenuState {
   isShown: boolean;
@@ -64,6 +65,6 @@ export class LogCustomizationMenu extends React.Component<{}, LogCustomizationMe
   }
 }
 
-const CustomizationMenuContent = styled.div`
+const CustomizationMenuContent = euiStyled.div`
   min-width: 200px;
 `;

x-pack/plugins/infra/public/components/logging/log_flyout.tsx

@@ -15,7 +15,8 @@ import {
 } from '@elastic/eui';
 import { FormattedMessage, InjectedIntl, injectI18n } from '@kbn/i18n/react';
 import React from 'react';
-import styled from 'styled-components';
+
+import euiStyled from '../../../../../common/eui_styled_components';
 import { InfraLogItem, InfraLogItemField } from '../../graphql/types';
 import { InfraLoadingPanel } from '../loading';
 interface Props {
@@ -105,7 +106,7 @@ export const LogFlyout = injectI18n(
   }
 );
 
-export const InfraFlyoutLoadingPanel = styled.div`
+export const InfraFlyoutLoadingPanel = euiStyled.div`
   position: absolute;
   top: 0;
   right: 0;

x-pack/plugins/infra/public/components/logging/log_minimap/density_chart.tsx

@@ -8,8 +8,8 @@ import { scaleLinear, scaleTime } from 'd3-scale';
 import { area, curveMonotoneY } from 'd3-shape';
 import max from 'lodash/fp/max';
 import * as React from 'react';
-import styled from 'styled-components';
 
+import euiStyled from '../../../../../../common/eui_styled_components';
 import { SummaryBucket } from './types';
 
 interface DensityChartProps {
@@ -55,14 +55,14 @@ export const DensityChart: React.SFC<DensityChartProps> = ({
   );
 };
 
-const PositiveAreaPath = styled.path`
+const PositiveAreaPath = euiStyled.path`
   fill: ${props =>
     props.theme.darkMode
       ? props.theme.eui.euiColorMediumShade
       : props.theme.eui.euiColorLightShade};
 `;
 
-const NegativeAreaPath = styled.path`
+const NegativeAreaPath = euiStyled.path`
   fill: ${props =>
     props.theme.darkMode
       ? props.theme.eui.euiColorLightShade

x-pack/plugins/infra/public/components/logging/log_minimap/highlighted_interval.tsx

@@ -5,7 +5,8 @@
  */
 
 import * as React from 'react';
-import styled from 'styled-components';
+
+import euiStyled from '../../../../../../common/eui_styled_components';
 
 interface HighlightedIntervalProps {
   className?: string;
@@ -35,7 +36,7 @@ export const HighlightedInterval: React.SFC<HighlightedIntervalProps> = ({
 
 HighlightedInterval.displayName = 'HighlightedInterval';
 
-const HighlightPolygon = styled.polygon`
+const HighlightPolygon = euiStyled.polygon`
   fill: ${props => props.theme.eui.euiColorPrimary};
   fill-opacity: 0.3;
   stroke: ${props => props.theme.eui.euiColorPrimary};

x-pack/plugins/infra/public/components/logging/log_minimap/log_minimap.tsx

@@ -6,8 +6,8 @@
 
 import { scaleLinear } from 'd3-scale';
 import * as React from 'react';
-import styled from 'styled-components';
 
+import euiStyled from '../../../../../../common/eui_styled_components';
 import { LogEntryTime } from '../../../../common/log_entry';
 // import { SearchSummaryBucket } from '../../../../common/log_search_summary';
 import { DensityChart } from './density_chart';
@@ -116,11 +116,11 @@ export class LogMinimap extends React.Component<LogMinimapProps> {
   }
 }
 
-const MinimapBackground = styled.rect`
+const MinimapBackground = euiStyled.rect`
   fill: ${props => props.theme.eui.euiColorLightestShade};
 `;
 
-const MinimapBorder = styled.line`
+const MinimapBorder = euiStyled.line`
   stroke: ${props => props.theme.eui.euiColorMediumShade};
   stroke-width: 1px;
 `;