From 1b7b094767a40036ec3dce79091c3134d2b81d40 Mon Sep 17 00:00:00 2001
From: Cee Chen <549407+cee-chen@users.noreply.github.com>
Date: Mon, 23 Oct 2023 17:04:35 -0700
Subject: [PATCH] [Session View] Remove `color="ghost"` buttons (#169305)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

## Summary

👋 Hey y'all - EUI will shortly be deprecating the `ghost` color in all
button components (see
https://eui.elastic.co/v89.0.0/#/navigation/button#ghost-vs-dark-mode).

I'm opening this PR ahead of time for your team so you can test this
migration and ensure no regressions have occurred as a result.

While I'm confident in the theory of the changes, I'm not totally sure
how to get to this actual terminal UI to test that the changes look good
in-browser - I'd appreciate your team's help QAing!

### Checklist

- [x] Tested in light and dark mode
---
 .../public/components/tty_player/index.tsx    | 51 +++++++++++--------
 .../components/tty_player_controls/index.tsx  |  4 +-
 .../components/tty_text_sizer/index.tsx       |  4 +-
 3 files changed, 34 insertions(+), 25 deletions(-)

diff --git a/x-pack/plugins/session_view/public/components/tty_player/index.tsx b/x-pack/plugins/session_view/public/components/tty_player/index.tsx
index 2c795dfdccb5a..98e8dad8840cb 100644
--- a/x-pack/plugins/session_view/public/components/tty_player/index.tsx
+++ b/x-pack/plugins/session_view/public/components/tty_player/index.tsx
@@ -5,7 +5,14 @@
  * 2.0.
  */
 import React, { useRef, useState, useCallback, useMemo, useEffect } from 'react';
-import { EuiPanel, EuiFlexGroup, EuiFlexItem, EuiButtonIcon, EuiButton } from '@elastic/eui';
+import {
+  EuiPanel,
+  EuiFlexGroup,
+  EuiFlexItem,
+  EuiButtonIcon,
+  EuiButton,
+  EuiThemeProvider,
+} from '@elastic/eui';
 import { useKibana } from '@kbn/kibana-react-plugin/public';
 import { CoreStart } from '@kbn/core/public';
 import useResizeObserver from 'use-resize-observer';
@@ -217,26 +224,28 @@ export const TTYPlayer = ({
         <div ref={ref} data-test-subj="sessionView:TTYPlayer" css={styles.terminal} />
       </div>
 
-      <TTYPlayerControls
-        currentProcessEvent={currentProcessEvent}
-        processStartMarkers={processStartMarkers}
-        isPlaying={isPlaying}
-        currentLine={currentLine}
-        linesLength={lines.length}
-        onSeekLine={onSeekLine}
-        onTogglePlayback={onTogglePlayback}
-        onClose={onClose}
-        onJumpToEvent={onJumpToEvent}
-        textSizer={
-          <TTYTextSizer
-            tty={tty}
-            containerHeight={containerHeight}
-            fontSize={fontSize}
-            onFontSizeChanged={setFontSize}
-            isFullscreen={isFullscreen}
-          />
-        }
-      />
+      <EuiThemeProvider colorMode="dark">
+        <TTYPlayerControls
+          currentProcessEvent={currentProcessEvent}
+          processStartMarkers={processStartMarkers}
+          isPlaying={isPlaying}
+          currentLine={currentLine}
+          linesLength={lines.length}
+          onSeekLine={onSeekLine}
+          onTogglePlayback={onTogglePlayback}
+          onClose={onClose}
+          onJumpToEvent={onJumpToEvent}
+          textSizer={
+            <TTYTextSizer
+              tty={tty}
+              containerHeight={containerHeight}
+              fontSize={fontSize}
+              onFontSizeChanged={setFontSize}
+              isFullscreen={isFullscreen}
+            />
+          }
+        />
+      </EuiThemeProvider>
     </div>
   );
 };
diff --git a/x-pack/plugins/session_view/public/components/tty_player_controls/index.tsx b/x-pack/plugins/session_view/public/components/tty_player_controls/index.tsx
index e244907cd74ac..841ec30fa5d56 100644
--- a/x-pack/plugins/session_view/public/components/tty_player_controls/index.tsx
+++ b/x-pack/plugins/session_view/public/components/tty_player_controls/index.tsx
@@ -59,7 +59,7 @@ export const TTYPlayerControls = ({
   const commonButtonProps: Partial<EuiButtonIconProps> = {
     display: 'empty',
     size: 's',
-    color: 'ghost',
+    color: 'text',
     css: styles.controlButton,
   };
 
@@ -188,7 +188,7 @@ export const TTYPlayerControls = ({
             onClick={handleViewInSession}
             iconType="arrowRight"
             aria-label={VIEW_IN_SESSION}
-            color="ghost"
+            color="text"
           >
             {VIEW_IN_SESSION}
           </EuiButtonEmpty>
diff --git a/x-pack/plugins/session_view/public/components/tty_text_sizer/index.tsx b/x-pack/plugins/session_view/public/components/tty_text_sizer/index.tsx
index 9f5f409922439..a8b4a03422367 100644
--- a/x-pack/plugins/session_view/public/components/tty_text_sizer/index.tsx
+++ b/x-pack/plugins/session_view/public/components/tty_text_sizer/index.tsx
@@ -28,7 +28,7 @@ export interface TTYTextSizerDeps {
 const commonButtonProps: Partial<EuiButtonIconProps> = {
   display: 'empty',
   size: 's',
-  color: 'ghost',
+  color: 'text',
 };
 
 const LINE_HEIGHT_SCALE_RATIO = 1.3;
@@ -95,7 +95,7 @@ export const TTYTextSizer = ({
             iconType={fit ? 'expand' : 'minimize'}
             onClick={onToggleFit}
             size="s"
-            color="ghost"
+            color="text"
           />
         </EuiToolTip>
       </EuiFlexItem>