Merge branch 'main' into ad-datafeed-counts-hidden-refresh-button

.github/CODEOWNERS

@@ -296,6 +296,7 @@ packages/kbn-capture-oas-snapshot-cli @elastic/kibana-core
 packages/kbn-cases-components @elastic/response-ops
 packages/kbn-cbor @elastic/kibana-operations
 packages/kbn-chart-icons @elastic/kibana-visualizations
+packages/kbn-charts-theme @elastic/kibana-visualizations
 packages/kbn-check-mappings-update-cli @elastic/kibana-core
 packages/kbn-check-prod-native-modules-cli @elastic/kibana-operations
 packages/kbn-ci-stats-core @elastic/kibana-operations

docs/user/dashboard/lens.asciidoc

@@ -671,7 +671,7 @@ For area, line, and bar charts, press Shift, then click the series in the legend
 .*How do I visualize saved Discover sessions?*
 [%collapsible]
 ====
-Visualizing saved Discover sessions in unsupported.
+Visualizing saved Discover sessions is unsupported.
 ====
 
 [discrete]

package.json

@@ -111,7 +111,7 @@
     "@elastic/apm-rum": "^5.16.1",
     "@elastic/apm-rum-core": "^5.21.1",
     "@elastic/apm-rum-react": "^2.0.3",
-    "@elastic/charts": "68.0.3",
+    "@elastic/charts": "68.0.4",
     "@elastic/datemath": "5.0.3",
     "@elastic/ebt": "^1.1.1",
     "@elastic/ecs": "^8.11.1",
@@ -209,6 +209,7 @@
     "@kbn/chart-expressions-common": "link:src/plugins/chart_expressions/common",
     "@kbn/chart-icons": "link:packages/kbn-chart-icons",
     "@kbn/charts-plugin": "link:src/plugins/charts",
+    "@kbn/charts-theme": "link:packages/kbn-charts-theme",
     "@kbn/cloud": "link:packages/cloud",
     "@kbn/cloud-chat-plugin": "link:x-pack/plugins/cloud_integrations/cloud_chat",
     "@kbn/cloud-data-migration-plugin": "link:x-pack/platform/plugins/private/cloud_integrations/cloud_data_migration",

packages/content-management/content_insights/content_insights_public/src/components/views_stats/views_chart.tsx

@@ -8,11 +8,14 @@
  */
 
 import React from 'react';
-import { Chart, Settings, DARK_THEME, LIGHT_THEME, BarSeries, Axis } from '@elastic/charts';
-import { formatDate, useEuiTheme } from '@elastic/eui';
-import { i18n } from '@kbn/i18n';
 import moment from 'moment';
 
+import { Chart, Settings, BarSeries, Axis } from '@elastic/charts';
+import { formatDate } from '@elastic/eui';
+
+import { i18n } from '@kbn/i18n';
+import { useElasticChartsTheme } from '@kbn/charts-theme';
+
 const dateFormatter = (d: Date) => formatDate(d, `MM/DD`);
 
 const seriesName = i18n.translate('contentManagement.contentEditor.viewsStats.viewsLabel', {
@@ -26,20 +29,15 @@ const weekOfFormatter = (date: Date) =>
   });
 
 export const ViewsChart = ({ data }: { data: Array<[week: number, views: number]> }) => {
-  const { colorMode } = useEuiTheme();
-
+  const baseTheme = useElasticChartsTheme();
   const momentDow = moment().localeData().firstDayOfWeek(); // configured from advanced settings
   const isoDow = momentDow === 0 ? 7 : momentDow;
 
   const momentTz = moment().tz(); // configured from advanced settings
 
   return (
     <Chart size={{ height: 240 }}>
-      <Settings
-        baseTheme={colorMode === 'DARK' ? DARK_THEME : LIGHT_THEME}
-        showLegend={false}
-        dow={isoDow}
-      />
+      <Settings baseTheme={baseTheme} showLegend={false} dow={isoDow} />
       <BarSeries
         id="viewsOverTime"
         name={seriesName}

packages/content-management/content_insights/content_insights_public/tsconfig.json

@@ -28,5 +28,6 @@
     "@kbn/core-http-browser",
     "@kbn/content-management-content-insights-server",
     "@kbn/content-management-table-list-view-common",
+    "@kbn/charts-theme",
   ]
 }

packages/kbn-charts-theme/README.md

@@ -0,0 +1,24 @@
+# @kbn/charts-theme
+
+A temporary package to provide a hook for getting `@elastic/charts` theme based on `@elastic/eui` theme.
+
+To be refactored to be consumed from `ElasticChartsProvider`.
+
+```tsx
+import { useElasticChartsTheme } from '@kbn/charts-theme';
+import { Chart, Settings } from '@elastic/charts';
+
+export function MyComponent() {
+  const baseTheme = useElasticChartsTheme();
+
+  return (
+    <Chart>
+      <Settings
+        baseTheme={baseTheme}
+        {/* ... */}
+      />
+      {/* ... */}
+    </Chart>
+  )
+}
+```

packages/kbn-charts-theme/index.ts

@@ -0,0 +1,23 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the "Elastic License
+ * 2.0", the "GNU Affero General Public License v3.0 only", and the "Server Side
+ * Public License v 1"; you may not use this file except in compliance with, at
+ * your election, the "Elastic License 2.0", the "GNU Affero General Public
+ * License v3.0 only", or the "Server Side Public License, v 1".
+ */
+
+import { type Theme, getChartsTheme } from '@elastic/charts';
+import { useEuiTheme } from '@elastic/eui';
+import { useMemo } from 'react';
+
+/**
+ * A hook used to get the `@elastic/charts` theme based on the current eui theme.
+ */
+export function useElasticChartsTheme(): Theme {
+  const { euiTheme, colorMode } = useEuiTheme();
+  return useMemo(
+    () => getChartsTheme(euiTheme.themeName, colorMode),
+    [colorMode, euiTheme.themeName]
+  );
+}

packages/kbn-charts-theme/jest.config.js

@@ -0,0 +1,14 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the "Elastic License
+ * 2.0", the "GNU Affero General Public License v3.0 only", and the "Server Side
+ * Public License v 1"; you may not use this file except in compliance with, at
+ * your election, the "Elastic License 2.0", the "GNU Affero General Public
+ * License v3.0 only", or the "Server Side Public License, v 1".
+ */
+
+module.exports = {
+  preset: '@kbn/test',
+  rootDir: '../..',
+  roots: ['<rootDir>/packages/kbn-charts-theme'],
+};

packages/kbn-charts-theme/kibana.jsonc

@@ -0,0 +1,5 @@
+{
+  "type": "shared-common",
+  "id": "@kbn/charts-theme",
+  "owner": "@elastic/kibana-visualizations"
+}

packages/kbn-charts-theme/package.json

@@ -0,0 +1,6 @@
+{
+  "name": "@kbn/charts-theme",
+  "private": true,
+  "version": "1.0.0",
+  "license": "Elastic License 2.0 OR AGPL-3.0-only OR SSPL-1.0"
+}

packages/kbn-charts-theme/tsconfig.json

@@ -0,0 +1,19 @@
+{
+  "extends": "../../tsconfig.base.json",
+  "compilerOptions": {
+    "outDir": "target/types",
+    "types": [
+      "jest",
+      "node",
+      "react"
+    ]
+  },
+  "include": [
+    "**/*.ts",
+    "**/*.tsx",
+  ],
+  "exclude": [
+    "target/**/*"
+  ],
+  "kbn_references": []
+}

packages/kbn-scout/README.md

@@ -193,6 +193,12 @@ npx playwright test --config <plugin-path>/ui_tests/playwright.config.ts
 
 We welcome contributions to improve and extend `kbn-scout`. This guide will help you get started, add new features, and align with existing project standards.
 
+Make sure to run unit tests before opening the PR:
+
+```bash
+node scripts/jest --config packages/kbn-scout/jest.config.js
+```
+
 #### Setting Up the Environment
 
 Ensure you have the latest local copy of the Kibana repository.

packages/kbn-scout/src/common/services/clients.ts

@@ -9,7 +9,7 @@
 
 import { KbnClient, createEsClientForTesting } from '@kbn/test';
 import type { ToolingLog } from '@kbn/tooling-log';
-import { ScoutServerConfig } from '../../types';
+import { ScoutTestConfig } from '../../types';
 import { serviceLoadedMsg } from '../../playwright/utils';
 
 interface ClientOptions {
@@ -29,7 +29,7 @@ function createClientUrlWithAuth({ serviceName, url, username, password, log }:
   return clientUrl.toString();
 }
 
-export function createEsClient(config: ScoutServerConfig, log: ToolingLog) {
+export function createEsClient(config: ScoutTestConfig, log: ToolingLog) {
   const { username, password } = config.auth;
   const elasticsearchUrl = createClientUrlWithAuth({
     serviceName: 'Es',
@@ -45,7 +45,7 @@ export function createEsClient(config: ScoutServerConfig, log: ToolingLog) {
   });
 }
 
-export function createKbnClient(config: ScoutServerConfig, log: ToolingLog) {
+export function createKbnClient(config: ScoutTestConfig, log: ToolingLog) {
   const kibanaUrl = createClientUrlWithAuth({
     serviceName: 'Kbn',
     url: config.hosts.kibana,

packages/kbn-scout/src/common/services/config.ts

@@ -10,7 +10,7 @@
 import path from 'path';
 import fs from 'fs';
 import { ToolingLog } from '@kbn/tooling-log';
-import { ScoutServerConfig } from '../../types';
+import { ScoutTestConfig } from '../../types';
 import { serviceLoadedMsg } from '../../playwright/utils';
 
 export function createScoutConfig(configDir: string, configName: string, log: ToolingLog) {
@@ -21,7 +21,7 @@ export function createScoutConfig(configDir: string, configName: string, log: To
   const configPath = path.join(configDir, `${configName}.json`);
   log.info(`Reading test servers confiuration from file: ${configPath}`);
 
-  const config = JSON.parse(fs.readFileSync(configPath, 'utf-8')) as ScoutServerConfig;
+  const config = JSON.parse(fs.readFileSync(configPath, 'utf-8')) as ScoutTestConfig;
 
   log.debug(serviceLoadedMsg('config'));
 

packages/kbn-scout/src/common/services/kibana_url.ts

@@ -8,7 +8,7 @@
  */
 
 import type { ToolingLog } from '@kbn/tooling-log';
-import { ScoutServerConfig } from '../../types';
+import { ScoutTestConfig } from '../../types';
 import { serviceLoadedMsg } from '../../playwright/utils';
 
 export interface PathOptions {
@@ -64,7 +64,7 @@ export class KibanaUrl {
   }
 }
 
-export function createKbnUrl(scoutConfig: ScoutServerConfig, log: ToolingLog) {
+export function createKbnUrl(scoutConfig: ScoutTestConfig, log: ToolingLog) {
   const kbnUrl = new KibanaUrl(new URL(scoutConfig.hosts.kibana));
 
   log.debug(serviceLoadedMsg('kbnUrl'));

packages/kbn-scout/src/common/services/saml_auth.ts

@@ -17,17 +17,17 @@ import {
 import { REPO_ROOT } from '@kbn/repo-info';
 import { HostOptions, SamlSessionManager } from '@kbn/test';
 import { ToolingLog } from '@kbn/tooling-log';
-import { ScoutServerConfig } from '../../types';
+import { ScoutTestConfig } from '../../types';
 import { Protocol } from '../../playwright/types';
 import { serviceLoadedMsg } from '../../playwright/utils';
 
-const getResourceDirPath = (config: ScoutServerConfig) => {
+const getResourceDirPath = (config: ScoutTestConfig) => {
   return config.serverless
     ? path.resolve(SERVERLESS_ROLES_ROOT_PATH, config.projectType!)
     : path.resolve(REPO_ROOT, STATEFUL_ROLES_ROOT_PATH);
 };
 
-const createKibanaHostOptions = (config: ScoutServerConfig): HostOptions => {
+const createKibanaHostOptions = (config: ScoutTestConfig): HostOptions => {
   const kibanaUrl = new URL(config.hosts.kibana);
   kibanaUrl.username = config.auth.username;
   kibanaUrl.password = config.auth.password;
@@ -42,7 +42,7 @@ const createKibanaHostOptions = (config: ScoutServerConfig): HostOptions => {
 };
 
 export const createSamlSessionManager = (
-  config: ScoutServerConfig,
+  config: ScoutTestConfig,
   log: ToolingLog
 ): SamlSessionManager => {
   const resourceDirPath = getResourceDirPath(config);