Merge branch 'main' into dashboardApi-getSerializedState

.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]

examples/embeddable_examples/public/react_embeddables/eui_markdown/eui_markdown_react_embeddable.tsx

@@ -7,7 +7,7 @@
  * License v3.0 only", or the "Server Side Public License, v 1".
  */
 
-import { EuiMarkdownEditor, EuiMarkdownFormat } from '@elastic/eui';
+import { EuiMarkdownEditor, EuiMarkdownFormat, useEuiTheme } from '@elastic/eui';
 import { css } from '@emotion/react';
 import { ReactEmbeddableFactory } from '@kbn/embeddable-plugin/public';
 import { i18n } from '@kbn/i18n';
@@ -16,7 +16,6 @@ import {
   useInheritedViewMode,
   useStateFromPublishingSubject,
 } from '@kbn/presentation-publishing';
-import { euiThemeVars } from '@kbn/ui-theme';
 import React from 'react';
 import { BehaviorSubject } from 'rxjs';
 import { EUI_MARKDOWN_ID } from './constants';
@@ -80,6 +79,7 @@ export const markdownEmbeddableFactory: ReactEmbeddableFactory<
         // get state for rendering
         const content = useStateFromPublishingSubject(content$);
         const viewMode = useInheritedViewMode(api) ?? 'view';
+        const { euiTheme } = useEuiTheme();
 
         return viewMode === 'edit' ? (
           <EuiMarkdownEditor
@@ -96,7 +96,7 @@ export const markdownEmbeddableFactory: ReactEmbeddableFactory<
         ) : (
           <EuiMarkdownFormat
             css={css`
-              padding: ${euiThemeVars.euiSizeM};
+              padding: ${euiTheme.size.m};
             `}
           >
             {content ?? ''}

examples/embeddable_examples/public/react_embeddables/field_list/field_list_react_embeddable.tsx

@@ -7,7 +7,7 @@
  * License v3.0 only", or the "Server Side Public License, v 1".
  */
 
-import { EuiFlexGroup, EuiFlexItem } from '@elastic/eui';
+import { EuiFlexGroup, EuiFlexItem, useEuiTheme } from '@elastic/eui';
 import { css } from '@emotion/react';
 import type { Reference } from '@kbn/content-management-utils';
 import { CoreStart } from '@kbn/core-lifecycle-browser';
@@ -17,7 +17,6 @@ import { ReactEmbeddableFactory } from '@kbn/embeddable-plugin/public';
 import { i18n } from '@kbn/i18n';
 import { initializeTitles, useBatchedPublishingSubjects } from '@kbn/presentation-publishing';
 import { LazyDataViewPicker, withSuspense } from '@kbn/presentation-util-plugin/public';
-import { euiThemeVars } from '@kbn/ui-theme';
 import {
   UnifiedFieldListSidebarContainer,
   type UnifiedFieldListSidebarContainerProps,
@@ -150,6 +149,7 @@ export const getFieldListFactory = (
             dataViews$,
             selectedFieldNames$
           );
+          const { euiTheme } = useEuiTheme();
 
           const selectedDataView = renderDataViews?.[0];
 
@@ -165,7 +165,7 @@ export const getFieldListFactory = (
               <EuiFlexItem
                 grow={false}
                 css={css`
-                  padding: ${euiThemeVars.euiSizeS};
+                  padding: ${euiTheme.size.s};
                 `}
               >
                 <DataViewPicker

examples/embeddable_examples/public/react_embeddables/saved_book/saved_book_react_embeddable.tsx

@@ -7,7 +7,15 @@
  * License v3.0 only", or the "Server Side Public License, v 1".
  */
 
-import { EuiBadge, EuiCallOut, EuiFlexGroup, EuiFlexItem, EuiText, EuiTitle } from '@elastic/eui';
+import {
+  EuiBadge,
+  EuiCallOut,
+  EuiFlexGroup,
+  EuiFlexItem,
+  EuiText,
+  EuiTitle,
+  useEuiTheme,
+} from '@elastic/eui';
 import { css } from '@emotion/react';
 import { CoreStart } from '@kbn/core-lifecycle-browser';
 import { ReactEmbeddableFactory } from '@kbn/embeddable-plugin/public';
@@ -18,7 +26,6 @@ import {
   SerializedTitles,
   useBatchedPublishingSubjects,
 } from '@kbn/presentation-publishing';
-import { euiThemeVars } from '@kbn/ui-theme';
 import React from 'react';
 import { BehaviorSubject } from 'rxjs';
 import { PresentationContainer } from '@kbn/presentation-containers';
@@ -157,6 +164,7 @@ export const getSavedBookEmbeddableFactory = (core: CoreStart) => {
               bookAttributesManager.bookTitle,
               bookAttributesManager.bookSynopsis
             );
+          const { euiTheme } = useEuiTheme();
 
           return (
             <div
@@ -182,7 +190,7 @@ export const getSavedBookEmbeddableFactory = (core: CoreStart) => {
               )}
               <div
                 css={css`
-                  padding: ${euiThemeVars.euiSizeM};
+                  padding: ${euiTheme.size.m};
                 `}
               >
                 <EuiFlexGroup

examples/embeddable_examples/public/react_embeddables/search/search_react_embeddable.tsx

@@ -7,7 +7,7 @@
  * License v3.0 only", or the "Server Side Public License, v 1".
  */
 
-import { EuiBadge, EuiStat } from '@elastic/eui';
+import { EuiBadge, EuiStat, useEuiTheme } from '@elastic/eui';
 import { css } from '@emotion/react';
 import { DataView } from '@kbn/data-views-plugin/common';
 import { ReactEmbeddableFactory } from '@kbn/embeddable-plugin/public';
@@ -17,7 +17,6 @@ import {
   initializeTimeRange,
   useBatchedPublishingSubjects,
 } from '@kbn/presentation-publishing';
-import { euiThemeVars } from '@kbn/ui-theme';
 import React, { useEffect } from 'react';
 import { BehaviorSubject, switchMap, tap } from 'rxjs';
 import { SEARCH_EMBEDDABLE_ID } from './constants';
@@ -124,6 +123,7 @@ export const getSearchEmbeddableFactory = (services: Services) => {
         api,
         Component: () => {
           const [count, error] = useBatchedPublishingSubjects(count$, blockingError$);
+          const { euiTheme } = useEuiTheme();
 
           useEffect(() => {
             return () => {
@@ -138,7 +138,7 @@ export const getSearchEmbeddableFactory = (services: Services) => {
             <div
               css={css`
                 width: 100%;
-                padding: ${euiThemeVars.euiSizeM};
+                padding: ${euiTheme.size.m};
               `}
             >
               <EuiStat

examples/embeddable_examples/tsconfig.json

@@ -18,7 +18,6 @@
     "@kbn/dashboard-plugin",
     "@kbn/embeddable-plugin",
     "@kbn/presentation-publishing",
-    "@kbn/ui-theme",
     "@kbn/i18n",
     "@kbn/es-query",
     "@kbn/data-views-plugin",

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/core/security/core-security-common/src/authentication/authenticated_user.ts

@@ -25,6 +25,21 @@ export interface UserRealm {
   type: string;
 }
 
+/**
+ * Represents the metadata of an API key.
+ */
+export interface ApiKeyDescriptor {
+  /**
+   *  Name of the API key.
+   */
+  name: string;
+
+  /**
+   * The ID of the API key.
+   */
+  id: string;
+}
+
 /**
  * Represents the currently authenticated user.
  */
@@ -65,4 +80,9 @@ export interface AuthenticatedUser extends User {
    * Indicates whether user is an operator.
    */
   operator?: boolean;
+
+  /**
+   * Metadata of the API key that was used to authenticate the user.
+   */
+  api_key?: ApiKeyDescriptor;
 }

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.