[Cloud Posture] Using Eui theme with eui charts

x-pack/plugins/cloud_security_posture/kibana.json

@@ -10,6 +10,6 @@
   "description": "The cloud security posture plugin",
   "server": true,
   "ui": true,
-  "requiredPlugins": ["navigation", "data", "fleet", "unifiedSearch", "taskManager", "security"],
+  "requiredPlugins": ["navigation", "data", "fleet", "unifiedSearch", "taskManager", "security", "charts"],
   "requiredBundles": ["kibanaReact"]
 }

x-pack/plugins/cloud_security_posture/public/pages/compliance_dashboard/compliance_charts/cloud_posture_score_chart.tsx

@@ -25,6 +25,7 @@ import { statusColors } from '../../../common/constants';
 import type { PostureTrend, Stats } from '../../../../common/types';
 import { CompactFormattedNumber } from '../../../components/compact_formatted_number';
 import { RULE_FAILED, RULE_PASSED } from '../../../../common/constants';
+import { useKibana } from '../../../common/hooks/use_kibana';
 
 interface CloudPostureScoreChartProps {
   trend: PostureTrend[];
@@ -44,18 +45,26 @@ const ScoreChart = ({
     { label: RULE_PASSED, value: totalPassed },
     { label: RULE_FAILED, value: totalFailed },
   ];
+  const {
+    services: { charts },
+  } = useKibana();
 
   return (
     <Chart size={{ height: 90, width: 90 }}>
       <Settings
-        // TODO use the EUI charts theme see src/plugins/charts/public/services/theme/README.md
-        theme={{
-          partition: {
-            linkLabel: { maximumSection: Infinity, maxCount: 0 },
-            outerSizeRatio: 0.9,
-            emptySizeRatio: 0.75,
+        theme={[
+          // theme overrides
+          {
+            partition: {
+              linkLabel: { maximumSection: Infinity, maxCount: 0 },
+              outerSizeRatio: 0.75,
+              emptySizeRatio: 0.7,
+            },
           },
-        }}
+          // theme
+          charts.theme.useChartsTheme(),
+        ]}
+        baseTheme={charts.theme.useChartsBaseTheme()}
         onElementClick={partitionOnElementClick as ElementClickListener}
       />
       <Partition
@@ -105,10 +114,15 @@ const convertTrendToEpochTime = (trend: PostureTrend) => ({
 
 const ComplianceTrendChart = ({ trend }: { trend: PostureTrend[] }) => {
   const epochTimeTrend = trend.map(convertTrendToEpochTime);
+  const {
+    services: { charts },
+  } = useKibana();
 
   return (
     <Chart>
       <Settings
+        theme={charts.theme.useChartsTheme()}
+        baseTheme={charts.theme.useChartsBaseTheme()}
         showLegend={false}
         legendPosition="right"
         tooltip={{

x-pack/plugins/cloud_security_posture/public/pages/findings/findings.test.tsx

@@ -20,6 +20,8 @@ import { CSP_LATEST_FINDINGS_DATA_VIEW } from '../../../common/constants';
 import * as TEST_SUBJECTS from './test_subjects';
 import { useCisKubernetesIntegration } from '../../common/api/use_cis_kubernetes_integration';
 import type { DataView } from '@kbn/data-plugin/common';
+import { chartPluginMock } from '@kbn/charts-plugin/public/mocks';
+import type { ChartsPluginStart } from '@kbn/charts-plugin/public';
 
 jest.mock('../../common/api/use_latest_findings_data_view');
 jest.mock('../../common/api/use_cis_kubernetes_integration');
@@ -31,11 +33,13 @@ beforeEach(() => {
 const Wrapper = ({
   data = dataPluginMock.createStartContract(),
   unifiedSearch = unifiedSearchPluginMock.createStartContract(),
+  charts = chartPluginMock.createStartContract(),
 }: {
   data: DataPublicPluginStart;
   unifiedSearch: UnifiedSearchPublicPluginStart;
+  charts: ChartsPluginStart;
 }) => (
-  <TestProvider deps={{ data, unifiedSearch }}>
+  <TestProvider deps={{ data, unifiedSearch, charts }}>
     <Findings />
   </TestProvider>
 );
@@ -44,6 +48,7 @@ describe.skip('<Findings />', () => {
   it("renders the success state component when 'latest findings' DataView exists and request status is 'success'", async () => {
     const data = dataPluginMock.createStartContract();
     const unifiedSearch = unifiedSearchPluginMock.createStartContract();
+    const charts = chartPluginMock.createStartContract();
     const source = await data.search.searchSource.create();
 
     (useCisKubernetesIntegration as jest.Mock).mockImplementation(() => ({
@@ -60,7 +65,7 @@ describe.skip('<Findings />', () => {
       }),
     } as UseQueryResult<DataView>);
 
-    render(<Wrapper data={data} unifiedSearch={unifiedSearch} />);
+    render(<Wrapper data={data} unifiedSearch={unifiedSearch} charts={charts} />);
 
     expect(await screen.findByTestId(TEST_SUBJECTS.FINDINGS_CONTAINER)).toBeInTheDocument();
   });

x-pack/plugins/cloud_security_posture/public/pages/findings/latest_findings/latest_findings_container.test.tsx

@@ -21,6 +21,7 @@ import { RisonObject } from 'rison-node';
 import { buildEsQuery } from '@kbn/es-query';
 import { getPaginationQuery } from '../utils';
 import { FindingsEsPitContext } from '../es_pit/findings_es_pit_context';
+import { chartPluginMock } from '@kbn/charts-plugin/public/mocks';
 
 jest.mock('../../../common/api/use_latest_findings_data_view');
 jest.mock('../../../common/api/use_cis_kubernetes_integration');
@@ -64,6 +65,7 @@ describe('<LatestFindingsContainer />', () => {
         deps={{
           data: dataMock,
           unifiedSearch: unifiedSearchPluginMock.createStartContract(),
+          charts: chartPluginMock.createStartContract(),
         }}
       >
         <FindingsEsPitContext.Provider value={{ setPitId, pitIdRef, pitQuery }}>

x-pack/plugins/cloud_security_posture/public/test/test_provider.tsx

@@ -12,11 +12,17 @@ import { QueryClient, QueryClientProvider } from 'react-query';
 import { coreMock } from '@kbn/core/public/mocks';
 import { dataPluginMock } from '@kbn/data-plugin/public/mocks';
 import { KibanaContextProvider } from '@kbn/kibana-react-plugin/public';
+import { chartPluginMock } from '@kbn/charts-plugin/public/mocks';
+import { unifiedSearchPluginMock } from '@kbn/unified-search-plugin/public/mocks';
 import type { CspAppDeps } from '../application/app';
 
 export const TestProvider: React.FC<Partial<CspAppDeps>> = ({
   core = coreMock.createStart(),
-  deps = { data: dataPluginMock.createStartContract() },
+  deps = {
+    data: dataPluginMock.createStartContract(),
+    unifiedSearch: unifiedSearchPluginMock.createStartContract(),
+    charts: chartPluginMock.createStartContract(),
+  },
   params = coreMock.createAppMountParameters(),
   children,
 } = {}) => {

x-pack/plugins/cloud_security_posture/public/types.ts

@@ -5,8 +5,9 @@
  * 2.0.
  */
 
-import { UnifiedSearchPublicPluginStart } from '@kbn/unified-search-plugin/public';
+import type { UnifiedSearchPublicPluginStart } from '@kbn/unified-search-plugin/public';
 import type { DataPublicPluginSetup, DataPublicPluginStart } from '@kbn/data-plugin/public';
+import type { ChartsPluginStart } from '@kbn/charts-plugin/public';
 
 // eslint-disable-next-line @typescript-eslint/no-empty-interface
 export interface CspClientPluginSetup {}
@@ -24,5 +25,6 @@ export interface CspClientPluginStartDeps {
   // required
   data: DataPublicPluginStart;
   unifiedSearch: UnifiedSearchPublicPluginStart;
+  charts: ChartsPluginStart;
   // optional
 }