Updates for dark mode theme (#695) (#696)

* breadcrumbs show up in app chrome only * updated components for dark mode and ally * added null check --------- (cherry picked from commit 21be3d7) Signed-off-by: Amardeepsingh Siglani <amardeep7194@gmail.com> Signed-off-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com> Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
opensearch-project · Sep 1, 2023 · 695c4d4 · 695c4d4
1 parent 83a2507
commit 695c4d4
Show file tree

Hide file tree

Showing 12 changed files with 118 additions and 169 deletions.
diff --git a/public/app.js b/public/app.js
@@ -34,7 +34,12 @@ export function renderApp(coreStart, params) {
  <Router>
  <ServicesContext.Provider value={services}>
  <CoreContext.Provider
- value={{ http: coreStart.http, isDarkMode, notifications: coreStart.notifications }}
+ value={{
+ http: coreStart.http,
+ isDarkMode,
+ notifications: coreStart.notifications,
+ chrome: coreStart.chrome,
+ }}
  >
  <Route render={(props) => <Main title="Alerting" {...props} />} />
  </CoreContext.Provider>

diff --git a/public/components/Breadcrumbs/Breadcrumbs.js b/public/components/Breadcrumbs/Breadcrumbs.js
@@ -3,78 +3,22 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import React, { Component } from 'react';
-import PropTypes from 'prop-types';
 import _ from 'lodash';
 import queryString from 'query-string';
-import { EuiBreadcrumbs } from '@elastic/eui';
 import {
  APP_PATH,
  DESTINATION_ACTIONS,
  MONITOR_ACTIONS,
  TRIGGER_ACTIONS,
 } from '../../utils/constants';
 
-const propTypes = {
- history: PropTypes.object.isRequired,
- httpClient: PropTypes.object.isRequired,
- location: PropTypes.object.isRequired,
- title: PropTypes.string.isRequired,
-};
+export async function getBreadcrumbs(httpClient, history, location) {
+ const { state: routeState } = location;
+ const rawBreadcrumbs = await getBreadcrumbsData(window.location.hash, routeState, httpClient);
 
-export default class Breadcrumbs extends Component {
- constructor(props) {
- super(props);
-
- this.state = { breadcrumbs: [] };
-
- this.getBreadcrumbs = this.getBreadcrumbs.bind(this);
- }
-
- componentDidMount() {
- this.getBreadcrumbs();
- }
-
- componentDidUpdate(prevProps) {
- const {
- location: { pathname: prevPathname, search: prevSearch },
- } = prevProps;
- const {
- location: { pathname, search },
- } = this.props;
- if (prevPathname + prevSearch !== pathname + search) {
- this.getBreadcrumbs();
- }
- }
-
- async getBreadcrumbs() {
- const {
- httpClient,
- history,
- location: { state: routeState },
- } = this.props;
- const rawBreadcrumbs = await getBreadcrumbs(window.location.hash, routeState, httpClient);
- const breadcrumbs = rawBreadcrumbs.map((breadcrumb) =>
- createEuiBreadcrumb(breadcrumb, history)
- );
- this.setState({ breadcrumbs });
- }
-
- render() {
- const { breadcrumbs } = this.state;
- return (
- <EuiBreadcrumbs
- breadcrumbs={breadcrumbs}
- responsive={false}
- truncate={true}
- style={{ padding: '0px 15px' }}
- />
- );
- }
+ return rawBreadcrumbs.map((breadcrumb) => createEuiBreadcrumb(breadcrumb, history));
 }
 
-Breadcrumbs.propTypes = propTypes;
-
 export function createEuiBreadcrumb(breadcrumb, history) {
  const { text, href } = breadcrumb;
  return {
@@ -87,7 +31,7 @@ export function createEuiBreadcrumb(breadcrumb, history) {
  };
 }
 
-export async function getBreadcrumbs(hash, routeState, httpClient) {
+export async function getBreadcrumbsData(hash, routeState, httpClient) {
  const routes = parseLocationHash(hash);
  const asyncBreadcrumbs = await Promise.all(
  routes.map((route) => getBreadcrumb(route, routeState, httpClient))

diff --git a/public/components/Breadcrumbs/Breadcrumbs.test.js b/public/components/Breadcrumbs/Breadcrumbs.test.js
@@ -5,13 +5,12 @@
 
 import React from 'react';
 import { mount, shallow } from 'enzyme';
-import { EuiBreadcrumbs } from '@elastic/eui';
 
 import Breadcrumbs, {
  createEuiBreadcrumb,
- getBreadcrumbs,
  parseLocationHash,
  getBreadcrumb,
+ getBreadcrumbs,
 } from './Breadcrumbs';
 import { historyMock, httpClientMock } from '../../../test/mocks';
 import { MONITOR_ACTIONS, TRIGGER_ACTIONS } from '../../utils/constants';
@@ -28,39 +27,10 @@ beforeEach(() => {
  jest.clearAllMocks();
 });
 
-describe('Breadcrumbs', () => {
- const title = 'Alerting';
- httpClientMock.get = jest.fn().mockResolvedValue({ ok: true, resp: { name: 'random monitor' } });
- delete global.window.location;
- global.window.location = { hash: '' };
-
- test('renders', () => {
- const wrapper = shallow(
- <Breadcrumbs
- title={title}
- location={location}
- httpClient={httpClientMock}
- history={historyMock}
- />
- );
-
- expect(wrapper).toMatchSnapshot();
- });
-
- test('calls getBreadcrumbs on mount and when pathname+search are updated', () => {
- const getBreadcrumbs = jest.spyOn(Breadcrumbs.prototype, 'getBreadcrumbs');
- const wrapper = mount(
- <Breadcrumbs
- title={title}
- location={location}
- httpClient={httpClientMock}
- history={historyMock}
- />
- );
-
- expect(getBreadcrumbs).toHaveBeenCalledTimes(1);
- wrapper.setProps({ location: { ...location, search: '?search=new' } });
- expect(getBreadcrumbs).toHaveBeenCalledTimes(2);
+describe('getBreadcrumbs', () => {
+ test('returns Eui formatted breadcrumbs', async () => {
+ window.location.hash = '#/dashboard';
+ expect(await getBreadcrumbs(httpClientMock, historyMock, {})).toMatchSnapshot();
  });
 });
 

diff --git a/public/components/Breadcrumbs/__snapshots__/Breadcrumbs.test.js.snap b/public/components/Breadcrumbs/__snapshots__/Breadcrumbs.test.js.snap
@@ -1,18 +1,5 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Breadcrumbs renders 1`] = `
-<EuiBreadcrumbs
- breadcrumbs={Array []}
- responsive={false}
- style={
- Object {
- "padding": "0px 15px",
- }
- }
- truncate={true}
-/>
-`;
-
 exports[`createEuiBreadcrumbs creates breadcrumbs for EuiBreadcrumbs 1`] = `
 Object {
  "href": "#/this-is-the-href",
@@ -141,6 +128,21 @@ Array [
 ]
 `;
 
+exports[`getBreadcrumbs returns Eui formatted breadcrumbs 1`] = `
+Array [
+ Object {
+ "href": "#/",
+ "onClick": [Function],
+ "text": "Alerting",
+ },
+ Object {
+ "href": "#/dashboard",
+ "onClick": [Function],
+ "text": "Alerts",
+ },
+]
+`;
+
 exports[`parseLocationHash correctly parses location hash 1`] = `
 Array [
  "#",

diff --git a/...CreateMonitor/components/MonitorExpressions/__snapshots__/MonitorExpressions.test.js.snap b/...CreateMonitor/components/MonitorExpressions/__snapshots__/MonitorExpressions.test.js.snap
@@ -70,7 +70,7 @@ exports[`MonitorExpressions renders 1`] = `
  </span>
  </button>
  <div
- class="euiText euiText--extraSmall"
+ class="euiText euiText--medium"
  style="padding-left:10px"
  >
  <div
@@ -232,7 +232,7 @@ exports[`MonitorExpressions renders 1`] = `
  </span>
  </button>
  <div
- class="euiText euiText--extraSmall"
+ class="euiText euiText--medium"
  style="padding-left:10px"
  >
  <div
@@ -303,7 +303,7 @@ exports[`MonitorExpressions renders 1`] = `
  />
  </div>
  <div
- class="euiText euiText--extraSmall"
+ class="euiText euiText--medium"
  style="padding-left:10px"
  >
  <div

diff --git a/...itor/components/MonitorExpressions/expressions/__snapshots__/WhereExpression.test.js.snap b/...itor/components/MonitorExpressions/expressions/__snapshots__/WhereExpression.test.js.snap
@@ -48,7 +48,7 @@ exports[`WhereExpression renders 1`] = `
  </span>
  </button>
  <div
- class="euiText euiText--extraSmall"
+ class="euiText euiText--medium"
  style="padding-left:10px"
  >
  <div

diff --git a/public/pages/CreateMonitor/containers/DefineMonitor/DefineMonitor.js b/public/pages/CreateMonitor/containers/DefineMonitor/DefineMonitor.js
@@ -7,7 +7,15 @@ import React, { Component, Fragment } from 'react';
 import moment from 'moment';
 import _ from 'lodash';
 import PropTypes from 'prop-types';
-import { EuiSpacer, EuiButton, EuiCallOut, EuiAccordion, EuiLoadingSpinner } from '@elastic/eui';
+import {
+ EuiSpacer,
+ EuiButton,
+ EuiCallOut,
+ EuiAccordion,
+ EuiLoadingSpinner,
+ EuiEmptyPrompt,
+ EuiPanel,
+} from '@elastic/eui';
 import ContentPanel from '../../../../components/ContentPanel';
 import VisualGraph from '../../components/VisualGraph';
 import ExtractionQuery from '../../components/ExtractionQuery';
@@ -34,13 +42,9 @@ import { validateWhereFilters } from '../../components/MonitorExpressions/expres
 
 function renderEmptyMessage(message) {
  return (
- <div style={{ padding: '20px', border: '1px solid #D9D9D9', borderRadius: '5px' }}>
- <div
- style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', height: '450px' }}
- >
- <div>{_.isEmpty(message) ? <EuiLoadingSpinner size="xl" /> : message}</div>
- </div>
- </div>
+ <EuiPanel hasShadow={false} style={{ height: 450, display: 'flex', alignItems: 'center' }}>
+ <EuiEmptyPrompt body={_.isEmpty(message) ? <EuiLoadingSpinner size="xl" /> : message} />
+ </EuiPanel>
  );
 }
 

diff --git a/public/pages/CreateMonitor/containers/DefineMonitor/__snapshots__/DefineMonitor.test.js.snap b/public/pages/CreateMonitor/containers/DefineMonitor/__snapshots__/DefineMonitor.test.js.snap
@@ -103,30 +103,20 @@ exports[`DefineMonitor renders 1`] = `
  }
  }
  >
- <div
+ <EuiPanel
+ hasShadow={false}
  style={
  Object {
- "border": "1px solid #D9D9D9",
- "borderRadius": "5px",
- "padding": "20px",
+ "alignItems": "center",
+ "display": "flex",
+ "height": 450,
  }
  }
  >
- <div
- style={
- Object {
- "alignItems": "center",
- "display": "flex",
- "height": "450px",
- "justifyContent": "center",
- }
- }
- >
- <div>
- You must specify an index.
- </div>
- </div>
- </div>
+ <EuiEmptyPrompt
+ body="You must specify an index."
+ />
+ </EuiPanel>
  </div>
  </ContentPanel>
 </div>
@@ -175,30 +165,20 @@ exports[`DefineMonitor should show warning in case of Ad monitor and plugin is n
  }
  }
  >
- <div
+ <EuiPanel
+ hasShadow={false}
  style={
  Object {
- "border": "1px solid #D9D9D9",
- "borderRadius": "5px",
- "padding": "20px",
+ "alignItems": "center",
+ "display": "flex",
+ "height": 450,
  }
  }
  >
- <div
- style={
- Object {
- "alignItems": "center",
- "display": "flex",
- "height": "450px",
- "justifyContent": "center",
- }
- }
- >
- <div>
- You must specify an index.
- </div>
- </div>
- </div>
+ <EuiEmptyPrompt
+ body="You must specify an index."
+ />
+ </EuiPanel>
  </div>
  <EuiSpacer
  size="m"

diff --git a/public/pages/CreateTrigger/containers/ConfigureActions/ConfigureActions.js b/public/pages/CreateTrigger/containers/ConfigureActions/ConfigureActions.js
@@ -373,7 +373,7 @@ class ConfigureActions extends React.Component {
  </>
  )}
  <EuiPanel
- style={flyoutMode ? {} : { backgroundColor: '#F7F7F7', padding: '20px' }}
+ style={flyoutMode ? {} : { padding: '20px' }}
  paddingSize="none"
  hasShadow={!flyoutMode}
  hasBorder={!flyoutMode}