From 2bc3f38bb161d1177742e4f17e463022178e0655 Mon Sep 17 00:00:00 2001
From: Lin Wang <wonglam@amazon.com>
Date: Wed, 14 Jun 2023 10:33:54 +0800
Subject: [PATCH] remove background for dark mode to fix #206 (#209)

Signed-off-by: Lin Wang <wonglam@amazon.com>
---
 public/components/monitoring/index.tsx        |  7 +++++--
 .../monitoring/tests/index.test.tsx           | 21 +++++++++++++++++++
 2 files changed, 26 insertions(+), 2 deletions(-)

diff --git a/public/components/monitoring/index.tsx b/public/components/monitoring/index.tsx
index cf4b1745..8d163063 100644
--- a/public/components/monitoring/index.tsx
+++ b/public/components/monitoring/index.tsx
@@ -14,14 +14,16 @@ import {
 } from '@elastic/eui';
 import React, { useState, useRef, useCallback } from 'react';
 
+import { useUiSetting } from '../../../../../src/plugins/opensearch_dashboards_react/public';
+import { ModelDeploymentProfile } from '../../apis/profile';
 import { RefreshInterval } from '../common/refresh_interval';
 import { PreviewPanel } from '../preview_panel';
 import { ExperimentalWarning } from '../experiment_warning';
+
 import { ModelDeploymentItem, ModelDeploymentTable } from './model_deployment_table';
 import { useMonitoring } from './use_monitoring';
 import { ModelStatusFilter } from './model_status_filter';
 import { SearchBar } from './search_bar';
-import { ModelDeploymentProfile } from '../../apis/profile';
 
 export const Monitoring = () => {
   const {
@@ -35,6 +37,7 @@ export const Monitoring = () => {
     reload,
     searchByStatus,
   } = useMonitoring();
+  const darkMode = useUiSetting<boolean>('theme:darkMode');
   const [previewModel, setPreviewModel] = useState<ModelDeploymentItem | null>(null);
   const searchInputRef = useRef<HTMLInputElement | null>();
 
@@ -75,7 +78,7 @@ export const Monitoring = () => {
       <EuiPageHeader
         pageTitle="Overview"
         rightSideItems={[
-          <div style={{ backgroundColor: '#fff' }}>
+          <div style={{ backgroundColor: darkMode ? undefined : '#fff' }}>
             <RefreshInterval onRefresh={reload} />
           </div>,
         ]}
diff --git a/public/components/monitoring/tests/index.test.tsx b/public/components/monitoring/tests/index.test.tsx
index 682c2889..fda619b8 100644
--- a/public/components/monitoring/tests/index.test.tsx
+++ b/public/components/monitoring/tests/index.test.tsx
@@ -6,11 +6,18 @@
 import userEvent from '@testing-library/user-event';
 import React from 'react';
 
+import * as opensearchDashboardsReactExports from '../../../../../../src/plugins/opensearch_dashboards_react/public';
 import { render, screen, waitFor, within } from '../../../../test/test_utils';
 import { Monitoring } from '../index';
 import * as useMonitoringExports from '../use_monitoring';
 import { APIProvider } from '../../../apis/api_provider';
 
+jest.mock('../../../../../../src/plugins/opensearch_dashboards_react/public', () => {
+  return {
+    useUiSetting: jest.fn().mockReturnValue(false),
+  };
+});
+
 const setup = (
   monitoringReturnValue?: Partial<ReturnType<typeof useMonitoringExports.useMonitoring>>
 ) => {
@@ -323,4 +330,18 @@ describe('<Monitoring />', () => {
     await user.click(screen.getByLabelText('Close this dialog'));
     expect(reload).not.toHaveBeenCalled();
   });
+
+  it('should NOT render background for refresh interval picker in the dark mode', () => {
+    const useUiSettingMock = jest
+      .spyOn(opensearchDashboardsReactExports, 'useUiSetting')
+      .mockReturnValue(true);
+
+    setup();
+    expect(
+      screen.getByLabelText('current interval value').closest('div.euiFormControlLayout')
+        ?.parentElement
+    ).not.toHaveStyle('background-color: rgb(255, 255, 255);');
+
+    useUiSettingMock.mockRestore();
+  });
 });