Updates for dark mode theme (#695)

* breadcrumbs show up in app chrome only Signed-off-by: Amardeepsingh Siglani <[email protected]> * updated components for dark mode and ally Signed-off-by: Amardeepsingh Siglani <[email protected]> * added null check Signed-off-by: Amardeepsingh Siglani <[email protected]> --------- Signed-off-by: Amardeepsingh Siglani <[email protected]>
opensearch-project · Sep 1, 2023 · 21be3d7 · 21be3d7
1 parent 8e1d0b9
commit 21be3d7
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}