review fixes

elastic · Apr 5, 2022 · 79394ec · 79394ec
1 parent f0950b2
commit 79394ec
Show file tree

Hide file tree

Showing 6 changed files with 19 additions and 71 deletions.
diff --git a/x-pack/plugins/cloud_security_posture/public/application/app.tsx b/x-pack/plugins/cloud_security_posture/public/application/app.tsx
@@ -5,20 +5,17 @@
  * 2.0.
  */
 import React from 'react';
-import { euiLightVars, euiDarkVars } from '@kbn/ui-theme';
 import { I18nProvider } from '@kbn/i18n-react';
 import { Router, Redirect, Switch, Route } from 'react-router-dom';
 import type { RouteProps } from 'react-router-dom';
 import { QueryClient, QueryClientProvider } from 'react-query';
 import { EuiErrorBoundary } from '@elastic/eui';
-import { Theme, ThemeProvider } from '@emotion/react';
 import { allNavigationItems } from '../common/navigation/constants';
 import { CspNavigationItem } from '../common/navigation/types';
 import { UnknownRoute } from '../components/unknown_route';
 import {
   KibanaContextProvider,
   RedirectAppLinks,
-  useUiSetting$,
 } from '../../../../../src/plugins/kibana_react/public';
 import { AppMountParameters, APP_WRAPPER_CLASS, CoreStart } from '../../../../../src/core/public';
 import type { CspClientPluginStartDeps } from '../types';
@@ -54,17 +51,15 @@ export const CspApp = ({ core, deps, params }: CspAppDeps) => (
       <QueryClientProvider client={queryClient}>
         <EuiErrorBoundary>
           <Router history={params.history}>
-            <CspThemeProvider>
-              <I18nProvider>
-                <Switch>
-                  {routes.map((route) => (
-                    <Route key={route.path} {...route} />
-                  ))}
-                  <Route exact path="/" component={RedirectToDashboard} />
-                  <Route path="*" component={UnknownRoute} />
-                </Switch>
-              </I18nProvider>
-            </CspThemeProvider>
+            <I18nProvider>
+              <Switch>
+                {routes.map((route) => (
+                  <Route key={route.path} {...route} />
+                ))}
+                <Route exact path="/" component={RedirectToDashboard} />
+                <Route path="*" component={UnknownRoute} />
+              </Switch>
+            </I18nProvider>
           </Router>
         </EuiErrorBoundary>
       </QueryClientProvider>
@@ -73,19 +68,3 @@ export const CspApp = ({ core, deps, params }: CspAppDeps) => (
 );
 
 const RedirectToDashboard = () => <Redirect to={allNavigationItems.dashboard.path} />;
-
-function CspThemeProvider({ children }: { children: React.ReactNode }) {
-  const [darkMode] = useUiSetting$<boolean>('theme:darkMode');
-
-  return (
-    <ThemeProvider
-      theme={(outerTheme?: Theme) => ({
-        ...outerTheme,
-        eui: darkMode ? euiDarkVars : euiLightVars,
-        darkMode,
-      })}
-    >
-      {children}
-    </ThemeProvider>
-  );
-}
diff --git a/x-pack/plugins/cloud_security_posture/public/common/hooks/use_theme.tsx b/x-pack/plugins/cloud_security_posture/public/common/hooks/use_theme.tsx
diff --git a/x-pack/plugins/cloud_security_posture/public/pages/findings/findings.test.tsx b/x-pack/plugins/cloud_security_posture/public/pages/findings/findings.test.tsx
@@ -22,13 +22,6 @@ import type { DataView } from '../../../../../../src/plugins/data/common';
 
 jest.mock('../../common/api/use_kubebeat_data_view');
 jest.mock('../../common/api/use_cis_kubernetes_integration');
-jest.mock('../../common/hooks/use_theme', () => ({
-  useTheme: () => ({
-    eui: {
-      paddingSizes: {},
-    },
-  }),
-}));
 
 beforeEach(() => {
   jest.restoreAllMocks();

diff --git a/x-pack/plugins/cloud_security_posture/public/pages/findings/findings.tsx b/x-pack/plugins/cloud_security_posture/public/pages/findings/findings.tsx
@@ -5,27 +5,19 @@
  * 2.0.
  */
 import React from 'react';
-// eslint-disable-next-line @kbn/eslint/module_migration
-import styled from 'styled-components';
 import { useKubebeatDataView } from '../../common/api/use_kubebeat_data_view';
 import { allNavigationItems } from '../../common/navigation/constants';
 import { useCspBreadcrumbs } from '../../common/navigation/use_csp_breadcrumbs';
 import { FindingsContainer } from './findings_container';
 import { CspPageTemplate } from '../../components/csp_page_template';
 
-const FindingsPageTemplate = styled(CspPageTemplate)`
-  header.euiPageHeader {
-    display: none;
-  }
-`;
-
 export const Findings = () => {
   const dataViewQuery = useKubebeatDataView();
   useCspBreadcrumbs([allNavigationItems.findings]);
 
   return (
-    <FindingsPageTemplate paddingSize="none" query={dataViewQuery}>
+    <CspPageTemplate paddingSize="none" query={dataViewQuery}>
       {dataViewQuery.data && <FindingsContainer dataView={dataViewQuery.data} />}
-    </FindingsPageTemplate>
+    </CspPageTemplate>
   );
 };
diff --git a/x-pack/plugins/cloud_security_posture/public/pages/findings/findings_container.tsx b/x-pack/plugins/cloud_security_posture/public/pages/findings/findings_container.tsx
@@ -53,7 +53,7 @@ export const FindingsContainer = ({ dataView }: { dataView: DataView }) => {
 const PageTitle = () => (
   <EuiTitle size="l">
     <h2>
-      <FormattedMessage id="xpack.csp.findings.findingsLabel" defaultMessage="Findings" />
+      <FormattedMessage id="xpack.csp.findings.findingsTitle" defaultMessage="Findings" />
     </h2>
   </EuiTitle>
 );
diff --git a/x-pack/plugins/cloud_security_posture/public/pages/findings/findings_search_bar.tsx b/x-pack/plugins/cloud_security_posture/public/pages/findings/findings_search_bar.tsx
@@ -6,15 +6,14 @@
  */
 import React from 'react';
 import { css } from '@emotion/react';
-import { Theme } from '@kbn/ui-theme';
+import { EuiThemeComputed, useEuiTheme } from '@elastic/eui';
 import { useKibana } from '../../../../../../src/plugins/kibana_react/public';
 import * as TEST_SUBJECTS from './test_subjects';
 import type { CspFindingsRequest, CspFindingsResponse } from './use_findings';
 import type { CspClientPluginStartDeps } from '../../types';
 import { PLUGIN_NAME } from '../../../common';
 import type { DataView } from '../../../../../../src/plugins/data/common';
 import { FINDINGS_SEARCH_PLACEHOLDER } from './translations';
-import { useTheme } from '../../common/hooks/use_theme';
 
 type SearchBarQueryProps = Pick<CspFindingsRequest, 'query' | 'filters'>;
 
@@ -31,15 +30,15 @@ export const FindingsSearchBar = ({
   status,
   setQuery,
 }: FindingsSearchBarProps & { dataView: DataView }) => {
-  const theme = useTheme();
+  const { euiTheme } = useEuiTheme();
   const {
     data: {
       ui: { SearchBar },
     },
   } = useKibana<CspClientPluginStartDeps>().services;
 
   return (
-    <div css={getContainerStyle(theme.eui)}>
+    <div css={getContainerStyle(euiTheme)}>
       <SearchBar
         appName={PLUGIN_NAME}
         dataTestSubj={TEST_SUBJECTS.FINDINGS_SEARCH_BAR}
@@ -61,8 +60,8 @@ export const FindingsSearchBar = ({
   );
 };
 
-const getContainerStyle = (theme: Theme) => css`
-  border-bottom: ${theme.euiBorderThin};
-  background-color: ${theme.euiPageBackgroundColor};
-  padding: ${theme.paddingSizes.m};
+const getContainerStyle = (theme: EuiThemeComputed) => css`
+  border-bottom: ${theme.border.thin};
+  background-color: ${theme.colors.body};
+  padding: ${theme.size.base};
 `;