Skip to content

Commit

Permalink
remove background for dark mode to fix #206
Browse files Browse the repository at this point in the history
Signed-off-by: Lin Wang <[email protected]>
  • Loading branch information
wanglam committed Jun 9, 2023
1 parent 31df7d4 commit f7cb854
Show file tree
Hide file tree
Showing 2 changed files with 26 additions and 2 deletions.
7 changes: 5 additions & 2 deletions public/components/monitoring/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand All @@ -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>();

Expand Down Expand Up @@ -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>,
]}
Expand Down
21 changes: 21 additions & 0 deletions public/components/monitoring/tests/index.test.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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>>
) => {
Expand Down Expand Up @@ -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();
});
});

0 comments on commit f7cb854

Please sign in to comment.