[Metrics UI] Fix EuiTheme type issue (elastic#69735)

simianhacker · elasticmachine · simianhacker · commit b3cf9f674eb6 · 2020-06-26T13:01:29.000-07:00
Co-authored-by: Elastic Machine &lt;elasticmachine@users.noreply.github.com&gt;
diff --git a/x-pack/plugins/infra/public/components/autocomplete_field/suggestion_item.tsx b/x-pack/plugins/infra/public/components/autocomplete_field/suggestion_item.tsx
@@ -104,15 +104,15 @@ const getEuiIconType = (suggestionType: QuerySuggestionTypes) => {
 const getEuiIconColor = (theme: any, suggestionType: QuerySuggestionTypes): string => {
   switch (suggestionType) {
     case QuerySuggestionTypes.Field:
-      return theme.eui.euiColorVis7;
+      return theme?.eui.euiColorVis7;
     case QuerySuggestionTypes.Value:
-      return theme.eui.euiColorVis0;
+      return theme?.eui.euiColorVis0;
     case QuerySuggestionTypes.Operator:
-      return theme.eui.euiColorVis1;
+      return theme?.eui.euiColorVis1;
     case QuerySuggestionTypes.Conjunction:
-      return theme.eui.euiColorVis2;
+      return theme?.eui.euiColorVis2;
     case QuerySuggestionTypes.RecentSearch:
     default:
-      return theme.eui.euiColorMediumShade;
+      return theme?.eui.euiColorMediumShade;
   }
 };
diff --git a/x-pack/plugins/infra/public/components/logging/log_highlights_menu.tsx b/x-pack/plugins/infra/public/components/logging/log_highlights_menu.tsx
@@ -166,7 +166,7 @@ const goToNextHighlightLabel = i18n.translate(
 const ActiveHighlightsIndicator = euiStyled(EuiIcon).attrs(({ theme }) => ({
   type: 'checkInCircleFilled',
   size: 'm',
-  color: theme.eui.euiColorAccent,
+  color: theme?.eui.euiColorAccent,
 }))`
   padding-left: ${(props) => props.theme.eui.paddingSizes.xs};
 `;
diff --git a/x-pack/plugins/infra/public/pages/metrics/inventory_view/components/dropdown_button.tsx b/x-pack/plugins/infra/public/pages/metrics/inventory_view/components/dropdown_button.tsx
@@ -11,7 +11,7 @@ import { withTheme, EuiTheme } from '../../../../../../observability/public';
 interface Props {
   label: string;
   onClick: () => void;
-  theme: EuiTheme;
+  theme: EuiTheme | undefined;
   children: ReactNode;
 }
 
@@ -21,18 +21,18 @@ export const DropdownButton = withTheme(({ onClick, label, theme, children }: Pr
       alignItems="center"
       gutterSize="none"
       style={{
-        border: theme.eui.euiFormInputGroupBorder,
-        boxShadow: `0px 3px 2px ${theme.eui.euiTableActionsBorderColor}, 0px 1px 1px ${theme.eui.euiTableActionsBorderColor}`,
+        border: theme?.eui.euiFormInputGroupBorder,
+        boxShadow: `0px 3px 2px ${theme?.eui.euiTableActionsBorderColor}, 0px 1px 1px ${theme?.eui.euiTableActionsBorderColor}`,
       }}
     >
       <EuiFlexItem
         grow={false}
         style={{
           padding: 12,
-          background: theme.eui.euiFormInputGroupLabelBackground,
+          background: theme?.eui.euiFormInputGroupLabelBackground,
           fontSize: '0.75em',
           fontWeight: 600,
-          color: theme.eui.euiTitleColor,
+          color: theme?.eui.euiTitleColor,
         }}
       >
         {label}
diff --git a/x-pack/plugins/infra/public/pages/metrics/inventory_view/components/waffle/metric_control/custom_metric_form.tsx b/x-pack/plugins/infra/public/pages/metrics/inventory_view/components/waffle/metric_control/custom_metric_form.tsx
@@ -52,7 +52,7 @@ const AGGREGATION_LABELS = {
 };
 
 interface Props {
-  theme: EuiTheme;
+  theme: EuiTheme | undefined;
   metric?: SnapshotCustomMetricInput;
   fields: IFieldType[];
   customMetrics: SnapshotCustomMetricInput[];
@@ -158,8 +158,8 @@ export const CustomMetricForm = withTheme(
           </EuiPopoverTitle>
           <div
             style={{
-              padding: theme.eui.paddingSizes.m,
-              borderBottom: `${theme.eui.euiBorderWidthThin} solid ${theme.eui.euiBorderColor}`,
+              padding: theme?.eui.paddingSizes.m,
+              borderBottom: `${theme?.eui.euiBorderWidthThin} solid ${theme?.eui.euiBorderColor}`,
             }}
           >
             <EuiFormRow
@@ -219,11 +219,11 @@ export const CustomMetricForm = withTheme(
               />
             </EuiFormRow>
           </div>
-          <div style={{ padding: theme.eui.paddingSizes.m, textAlign: 'right' }}>
+          <div style={{ padding: theme?.eui.paddingSizes.m, textAlign: 'right' }}>
             <EuiButtonEmpty
               onClick={onCancel}
               size="s"
-              style={{ paddingRight: theme.eui.paddingSizes.xl }}
+              style={{ paddingRight: theme?.eui.paddingSizes.xl }}
             >
               <FormattedMessage
                 id="xpack.infra.waffle.customMetrics.cancelLabel"
diff --git a/x-pack/plugins/infra/public/pages/metrics/inventory_view/components/waffle/metric_control/metrics_edit_mode.tsx b/x-pack/plugins/infra/public/pages/metrics/inventory_view/components/waffle/metric_control/metrics_edit_mode.tsx
@@ -14,7 +14,7 @@ import {
 } from '../../../../../../../../../legacy/common/eui_styled_components';
 
 interface Props {
-  theme: EuiTheme;
+  theme: EuiTheme | undefined;
   customMetrics: SnapshotCustomMetricInput[];
   options: Array<{ text: string; value: string }>;
   onEdit: (metric: SnapshotCustomMetricInput) => void;
@@ -28,7 +28,7 @@ export const MetricsEditMode = withTheme(
       <div style={{ width: 256 }}>
         {options.map((option) => (
           <div key={option.value} style={{ padding: '14px 14px 13px 36px' }}>
-            <span style={{ color: theme.eui.euiButtonColorDisabled }}>{option.text}</span>
+            <span style={{ color: theme?.eui.euiButtonColorDisabled }}>{option.text}</span>
           </div>
         ))}
         {customMetrics.map((metric) => (
diff --git a/x-pack/plugins/infra/public/pages/metrics/inventory_view/components/waffle/metric_control/mode_switcher.tsx b/x-pack/plugins/infra/public/pages/metrics/inventory_view/components/waffle/metric_control/mode_switcher.tsx
@@ -15,7 +15,7 @@ import {
 } from '../../../../../../../../../legacy/common/eui_styled_components';
 
 interface Props {
-  theme: EuiTheme;
+  theme: EuiTheme | undefined;
   onEdit: () => void;
   onAdd: () => void;
   onSave: () => void;
@@ -32,7 +32,7 @@ export const ModeSwitcher = withTheme(
     return (
       <div
         style={{
-          borderTop: `${theme.eui.euiBorderWidthThin} solid ${theme.eui.euiBorderColor}`,
+          borderTop: `${theme?.eui.euiBorderWidthThin} solid ${theme?.eui.euiBorderColor}`,
           padding: 12,
         }}
       >
diff --git a/x-pack/plugins/infra/public/pages/metrics/inventory_view/components/waffle/node.tsx b/x-pack/plugins/infra/public/pages/metrics/inventory_view/components/waffle/node.tsx
@@ -152,8 +152,8 @@ const ValueInner = euiStyled.button`
   border: none;
   &:focus {
     outline: none !important;
-    border: ${(params) => params.theme.eui.euiFocusRingSize} solid
-      ${(params) => params.theme.eui.euiFocusRingColor};
+    border: ${(params) => params.theme?.eui.euiFocusRingSize} solid
+      ${(params) => params.theme?.eui.euiFocusRingColor};
     box-shadow: none;
   }
 `;
diff --git a/x-pack/plugins/infra/public/pages/metrics/inventory_view/components/waffle/waffle_sort_controls.tsx b/x-pack/plugins/infra/public/pages/metrics/inventory_view/components/waffle/waffle_sort_controls.tsx
@@ -107,16 +107,16 @@ export const WaffleSortControls = ({ sort, onChange }: Props) => {
 };
 
 interface SwitchContainerProps {
-  theme: EuiTheme;
+  theme: EuiTheme | undefined;
   children: ReactNode;
 }
 
 const SwitchContainer = withTheme(({ children, theme }: SwitchContainerProps) => {
   return (
     <div
       style={{
-        padding: theme.eui.paddingSizes.m,
-        borderTop: `1px solid ${theme.eui.euiBorderColor}`,
+        padding: theme?.eui.paddingSizes.m,
+        borderTop: `1px solid ${theme?.eui.euiBorderColor}`,
       }}
     >
       {children}
diff --git a/x-pack/plugins/infra/public/pages/metrics/inventory_view/components/waffle/waffle_time_controls.tsx b/x-pack/plugins/infra/public/pages/metrics/inventory_view/components/waffle/waffle_time_controls.tsx
@@ -12,7 +12,7 @@ import { withTheme, EuiTheme } from '../../../../../../../observability/public';
 import { useWaffleTimeContext } from '../../hooks/use_waffle_time';
 
 interface Props {
-  theme: EuiTheme;
+  theme: EuiTheme | undefined;
 }
 
 export const WaffleTimeControls = withTheme(({ theme }: Props) => {
@@ -56,9 +56,9 @@ export const WaffleTimeControls = withTheme(({ theme }: Props) => {
       <EuiFlexItem
         grow={false}
         style={{
-          border: theme.eui.euiFormInputGroupBorder,
-          boxShadow: `0px 3px 2px ${theme.eui.euiTableActionsBorderColor}, 0px 1px 1px ${theme.eui.euiTableActionsBorderColor}`,
-          marginRight: theme.eui.paddingSizes.m,
+          border: theme?.eui.euiFormInputGroupBorder,
+          boxShadow: `0px 3px 2px ${theme?.eui.euiTableActionsBorderColor}, 0px 1px 1px ${theme?.eui.euiTableActionsBorderColor}`,
+          marginRight: theme?.eui.paddingSizes.m,
         }}
         data-test-subj="waffleDatePicker"
       >
diff --git a/x-pack/plugins/infra/public/pages/metrics/metric_detail/index.tsx b/x-pack/plugins/infra/public/pages/metrics/metric_detail/index.tsx
@@ -27,7 +27,7 @@ const DetailPageContent = euiStyled(PageContent)`
 `;
 
 interface Props {
-  theme: EuiTheme;
+  theme: EuiTheme | undefined;
   match: {
     params: {
       type: string;
