Merge pull request elastic#15 from Elastic-AWP-Platform/fix-use-style…

…-type-error Fix type issue with useStyles
kqualters-elastic · Nov 25, 2021 · 9b6aed6 · 9b6aed6
2 parents e0cd5bf + 4dbacba
commit 9b6aed6
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 18 deletions.
diff --git a/x-pack/plugins/session_view/public/components/ProcessTreeNode/index.tsx b/x-pack/plugins/session_view/public/components/ProcessTreeNode/index.tsx
@@ -15,7 +15,7 @@ import React, { useMemo, useRef, useLayoutEffect, useState, useEffect, MouseEven
 import { EuiButton, EuiIcon } from '@elastic/eui';
 import { FormattedMessage } from '@kbn/i18n/react';
 import { Process } from '../../hooks/use_process_tree';
-import { useStyles } from './styles';
+import { useStyles, ButtonType } from './styles';
 import { ProcessTreeAlerts } from '../ProcessTreeAlerts';
 
 interface ProcessDeps {
@@ -119,7 +119,7 @@ export function ProcessTreeNode({
     if (!isSessionLeader && process.children.length > 0) {
       buttons.push(
         <EuiButton
-          css={styles.getButtonStyle(styles.ButtonType.children)}
+          css={styles.getButtonStyle(ButtonType.children)}
           onClick={() => setChildrenExpanded(!childrenExpanded)}
         >
           <FormattedMessage
@@ -134,7 +134,7 @@ export function ProcessTreeNode({
     if (alerts.length) {
       buttons.push(
         <EuiButton
-          css={styles.getButtonStyle(styles.ButtonType.alerts)}
+          css={styles.getButtonStyle(ButtonType.alerts)}
           onClick={() => setAlertsExpanded(!alertsExpanded)}
         >
           <FormattedMessage id="xpack.sessionView.alerts" defaultMessage="Alerts" />
@@ -202,7 +202,7 @@ export function ProcessTreeNode({
 
     if (user.name === 'root' && user.id !== parent.user.id) {
       return (
-        <EuiButton css={styles.getButtonStyle(styles.ButtonType.userChanged)}>
+        <EuiButton css={styles.getButtonStyle(ButtonType.userChanged)}>
           <FormattedMessage
             id="xpack.sessionView.execUserChange"
             defaultMessage="Root escalation"

diff --git a/x-pack/plugins/session_view/public/components/ProcessTreeNode/styles.ts b/x-pack/plugins/session_view/public/components/ProcessTreeNode/styles.ts
@@ -16,28 +16,28 @@ interface StylesDeps {
   hasAlerts: boolean;
 }
 
+export enum ButtonType {
+  children = 'children',
+  alerts = 'alerts',
+  output = 'output',
+  userChanged = 'user',
+}
+
 export const useStyles = ({ depth, hasAlerts }: StylesDeps) => {
   const { euiTheme } = useEuiTheme();
 
   const cached = useMemo(() => {
     const { colors, border, font, size } = euiTheme;
 
-    enum ButtonType {
-      children = 'children',
-      alerts = 'alerts',
-      output = 'output',
-      userChanged = 'user',
-    }
-
     const darkText: CSSObject = {
       color: colors.text,
     };
 
-    const searchHighlight = `
-      background-color: ${colors.highlight};
-      color: ${colors.text};
-      border-radius: ${border.radius.medium};
-    `;
+    const searchHighlight: CSSObject = {
+      backgroundColor: colors.highlight,
+      color: colors.text,
+      borderRadius: border.radius.medium,
+    };
 
     const children: CSSObject = {
       position: 'relative',
@@ -73,7 +73,7 @@ export const useStyles = ({ depth, hasAlerts }: StylesDeps) => {
       marginLeft: size.s,
     };
 
-    const getButtonStyle = (type: string) => {
+    const getButtonStyle = (type: string): CSSObject => {
       let background = 'rgba(170, 101, 86, 0.04)';
       let borderStyle = '1px solid rgba(170, 101, 86, 0.48)';
 
@@ -175,7 +175,6 @@ export const useStyles = ({ depth, hasAlerts }: StylesDeps) => {
       workingDir,
       userEnteredIcon,
       buttonArrow,
-      ButtonType,
       getButtonStyle,
       alertDetails,
     };