From 32f1f788c508050a44343b52bacd400ede324697 Mon Sep 17 00:00:00 2001 From: "github-actions[bot]" Date: Fri, 1 Sep 2023 18:01:37 +0000 Subject: [PATCH] Updates for dark mode theme (#695) * breadcrumbs show up in app chrome only Signed-off-by: Amardeepsingh Siglani * updated components for dark mode and ally Signed-off-by: Amardeepsingh Siglani * added null check Signed-off-by: Amardeepsingh Siglani --------- Signed-off-by: Amardeepsingh Siglani (cherry picked from commit 21be3d72ee5f979363e5bd2821e089f2f8ed8c57) Signed-off-by: github-actions[bot] --- public/app.js | 7 +- public/components/Breadcrumbs/Breadcrumbs.js | 66 ++----------------- .../Breadcrumbs/Breadcrumbs.test.js | 40 ++--------- .../__snapshots__/Breadcrumbs.test.js.snap | 28 ++++---- .../MonitorExpressions.test.js.snap | 6 +- .../WhereExpression.test.js.snap | 2 +- .../containers/DefineMonitor/DefineMonitor.js | 20 +++--- .../__snapshots__/DefineMonitor.test.js.snap | 56 +++++----------- .../ConfigureActions/ConfigureActions.js | 2 +- public/pages/Main/Main.js | 33 +++++++++- public/pages/Main/Main.test.js | 25 +++++-- public/utils/helpers.js | 2 +- 12 files changed, 118 insertions(+), 169 deletions(-) diff --git a/public/app.js b/public/app.js index dfc85f6c3..7e6c91eb2 100644 --- a/public/app.js +++ b/public/app.js @@ -34,7 +34,12 @@ export function renderApp(coreStart, params) {
} /> diff --git a/public/components/Breadcrumbs/Breadcrumbs.js b/public/components/Breadcrumbs/Breadcrumbs.js index 4bc968b40..fe6fc126f 100644 --- a/public/components/Breadcrumbs/Breadcrumbs.js +++ b/public/components/Breadcrumbs/Breadcrumbs.js @@ -3,11 +3,8 @@ * 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, @@ -15,66 +12,13 @@ import { 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 ( - - ); - } + 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 index 002d855ba..d5363414f 100644 --- 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( - - ); - - expect(wrapper).toMatchSnapshot(); - }); - - test('calls getBreadcrumbs on mount and when pathname+search are updated', () => { - const getBreadcrumbs = jest.spyOn(Breadcrumbs.prototype, 'getBreadcrumbs'); - const wrapper = mount( - - ); - - 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 index b3464dafd..c649707d3 100644 --- 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`] = ` - -`; - 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/public/pages/CreateMonitor/components/MonitorExpressions/__snapshots__/MonitorExpressions.test.js.snap b/public/pages/CreateMonitor/components/MonitorExpressions/__snapshots__/MonitorExpressions.test.js.snap index a7bdca539..549c6f60b 100644 --- a/public/pages/CreateMonitor/components/MonitorExpressions/__snapshots__/MonitorExpressions.test.js.snap +++ b/public/pages/CreateMonitor/components/MonitorExpressions/__snapshots__/MonitorExpressions.test.js.snap @@ -70,7 +70,7 @@ exports[`MonitorExpressions renders 1`] = `
-
-
{_.isEmpty(message) ? : message}
-
-
+ + : message} /> + ); } diff --git a/public/pages/CreateMonitor/containers/DefineMonitor/__snapshots__/DefineMonitor.test.js.snap b/public/pages/CreateMonitor/containers/DefineMonitor/__snapshots__/DefineMonitor.test.js.snap index 63802c43b..d887a6adb 100644 --- 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`] = ` } } > -
-
-
- You must specify an index. -
-
-
+ +
@@ -175,30 +165,20 @@ exports[`DefineMonitor should show warning in case of Ad monitor and plugin is n } } > -
-
-
- You must specify an index. -
-
-
+ +
)} { const { flyout: currentFlyout } = this.state; @@ -41,7 +69,6 @@ class Main extends Component { {(services) => services && (
- { diff --git a/public/pages/Main/Main.test.js b/public/pages/Main/Main.test.js index d0c34d7ce..bc54640d0 100644 --- a/public/pages/Main/Main.test.js +++ b/public/pages/Main/Main.test.js @@ -4,19 +4,36 @@ */ import React from 'react'; -import { HashRouter as Router, Route } from 'react-router-dom'; -import { render } from 'enzyme'; +import { Router, Route, HashRouter } from 'react-router-dom'; +import { render, mount } from 'enzyme'; +import * as Breadcrumbs from '../../components/Breadcrumbs/Breadcrumbs'; +import { createMemoryHistory } from 'history'; import Main from './Main'; describe('Main', () => { test('renders', () => { const component = ( - +
} /> - + ); expect(render(component)).toMatchSnapshot(); }); + + test('updates breadcrumbs when location updates', () => { + const getBreadcrumbs = jest.spyOn(Breadcrumbs, 'getBreadcrumbs'); + const history = createMemoryHistory(); + history.push('/'); + mount( + +
} /> + + ); + + expect(getBreadcrumbs).toHaveBeenCalledTimes(1); + history.push('/monitors'); + expect(getBreadcrumbs).toHaveBeenCalledTimes(2); + }); }); diff --git a/public/utils/helpers.js b/public/utils/helpers.js index 357a83683..c4d6f9723 100644 --- a/public/utils/helpers.js +++ b/public/utils/helpers.js @@ -46,7 +46,7 @@ export const inputLimitText = ( limit === 1 ? singularKeyword : pluralKeyword }.`; return ( - + {difference > 0 ? remainingLimit : reachedLimit} );