Merge branch 'main' into eui-deprecations-sharedux

.github/CODEOWNERS

@@ -589,6 +589,7 @@ src/plugins/screenshot_mode @elastic/appex-sharedux
 x-pack/examples/screenshotting_example @elastic/appex-sharedux
 x-pack/plugins/screenshotting @elastic/kibana-reporting-services
 examples/search_examples @elastic/kibana-data-discovery
+packages/kbn-search-response-warnings @elastic/kibana-data-discovery
 x-pack/plugins/searchprofiler @elastic/platform-deployment-management
 x-pack/test/security_api_integration/packages/helpers @elastic/kibana-core
 x-pack/plugins/security @elastic/kibana-security

.i18nrc.json

@@ -92,6 +92,7 @@
     "server": "src/legacy/server",
     "share": "src/plugins/share",
     "sharedUXPackages": "packages/shared-ux",
+    "searchResponseWarnings": "packages/kbn-search-response-warnings",
     "securitySolutionPackages": "x-pack/packages/security-solution",
     "serverlessPackages": "packages/serverless",
     "coloring": "packages/kbn-coloring/src",

examples/bfetch_explorer/public/components/page/index.tsx

@@ -7,34 +7,23 @@
  */
 
 import * as React from 'react';
-import {
-  EuiPageBody,
-  EuiPageContent_Deprecated as EuiPageContent,
-  EuiPageContentBody_Deprecated as EuiPageContentBody,
-  EuiPageHeader,
-  EuiPageHeaderSection,
-  EuiTitle,
-} from '@elastic/eui';
+import { EuiPageTemplate, EuiPageSection, EuiPageHeader } from '@elastic/eui';
 
 export interface PageProps {
   title?: React.ReactNode;
+  sidebar?: React.ReactNode;
 }
 
-export const Page: React.FC<PageProps> = ({ title = 'Untitled', children }) => {
+export const Page: React.FC<PageProps> = ({ title = 'Untitled', sidebar, children }) => {
   return (
-    <EuiPageBody>
-      <EuiPageHeader>
-        <EuiPageHeaderSection>
-          <EuiTitle size="l">
-            <h1>{title}</h1>
-          </EuiTitle>
-        </EuiPageHeaderSection>
-      </EuiPageHeader>
-      <EuiPageContent>
-        <EuiPageContentBody style={{ maxWidth: 800, margin: '0 auto' }}>
-          {children}
-        </EuiPageContentBody>
-      </EuiPageContent>
-    </EuiPageBody>
+    <EuiPageTemplate panelled={true} offset={0} grow={true}>
+      <EuiPageTemplate.Sidebar>{sidebar}</EuiPageTemplate.Sidebar>
+      <EuiPageTemplate.Header>
+        <EuiPageHeader pageTitle={title} />
+      </EuiPageTemplate.Header>
+      <EuiPageTemplate.Section>
+        <EuiPageSection style={{ maxWidth: 800, margin: '0 auto' }}>{children}</EuiPageSection>
+      </EuiPageTemplate.Section>
+    </EuiPageTemplate>
   );
 };

examples/bfetch_explorer/public/containers/app/index.tsx

@@ -11,7 +11,6 @@ import { Redirect } from 'react-router-dom';
 import { BrowserRouter as Router, Route, Routes } from '@kbn/shared-ux-router';
 import { EuiPage } from '@elastic/eui';
 import { useDeps } from '../../hooks/use_deps';
-import { Sidebar } from './sidebar';
 import { routes } from '../../routes';
 
 export const App: React.FC = () => {
@@ -27,7 +26,6 @@ export const App: React.FC = () => {
   return (
     <Router basename={appBasePath}>
       <EuiPage>
-        <Sidebar />
         <Routes>
           {routeElements}
           <Redirect to="/count-until" />

examples/bfetch_explorer/public/containers/app/pages/page_count_until/index.tsx

@@ -11,6 +11,7 @@ import { EuiPanel, EuiText } from '@elastic/eui';
 import { CountUntil } from '../../../../components/count_until';
 import { Page } from '../../../../components/page';
 import { useDeps } from '../../../../hooks/use_deps';
+import { Sidebar } from '../../sidebar';
 
 // eslint-disable-next-line @typescript-eslint/no-empty-interface
 export interface Props {}
@@ -19,7 +20,7 @@ export const PageCountUntil: React.FC<Props> = () => {
   const { plugins } = useDeps();
 
   return (
-    <Page title={'Count Until'}>
+    <Page title={'Count Until'} sidebar={<Sidebar />}>
       <EuiText>
         This demo sends a single number N using <code>fetchStreaming</code> to the server. The
         server will stream back N number of messages with 1 second delay each containing a number

examples/bfetch_explorer/public/containers/app/pages/page_double_integers/index.tsx

@@ -11,6 +11,7 @@ import { EuiPanel, EuiText } from '@elastic/eui';
 import { DoubleIntegers } from '../../../../components/double_integers';
 import { Page } from '../../../../components/page';
 import { useDeps } from '../../../../hooks/use_deps';
+import { Sidebar } from '../../sidebar';
 
 // eslint-disable-next-line @typescript-eslint/no-empty-interface
 export interface Props {}
@@ -19,7 +20,7 @@ export const PageDoubleIntegers: React.FC<Props> = () => {
   const { explorer } = useDeps();
 
   return (
-    <Page title={'Double Integers'}>
+    <Page title={'Double Integers'} sidebar={<Sidebar />}>
       <EuiText>
         Below is a list of numbers in milliseconds. They are sent as a batch to the server. For each
         number server waits given number of milliseconds then doubles the number and streams it

examples/bfetch_explorer/public/containers/app/sidebar/index.tsx

@@ -7,7 +7,7 @@
  */
 
 import React from 'react';
-import { EuiPageSideBar_Deprecated as EuiPageSideBar, EuiSideNav } from '@elastic/eui';
+import { EuiSideNav } from '@elastic/eui';
 import { useHistory } from 'react-router-dom';
 import { routes } from '../../../routes';
 
@@ -18,26 +18,24 @@ export const Sidebar: React.FC<SidebarProps> = () => {
   const history = useHistory();
 
   return (
-    <EuiPageSideBar>
-      <EuiSideNav
-        items={[
-          {
-            name: 'bfetch explorer',
-            id: 'home',
-            items: routes.map(({ id, title, items }) => ({
-              id,
-              name: title,
-              isSelected: true,
-              items: items.map((route) => ({
-                id: route.id,
-                name: route.title,
-                onClick: () => history.push(`/${route.id}`),
-                'data-test-subj': route.id,
-              })),
+    <EuiSideNav
+      items={[
+        {
+          name: 'bfetch explorer',
+          id: 'home',
+          items: routes.map(({ id, title, items }) => ({
+            id,
+            name: title,
+            isSelected: true,
+            items: items.map((route) => ({
+              id: route.id,
+              name: route.title,
+              onClick: () => history.push(`/${route.id}`),
+              'data-test-subj': route.id,
             })),
-          },
-        ]}
-      />
-    </EuiPageSideBar>
+          })),
+        },
+      ]}
+    />
   );
 };

examples/developer_examples/public/app.tsx

@@ -11,9 +11,9 @@ import ReactDOM from 'react-dom';
 
 import {
   EuiText,
-  EuiPageContent_Deprecated as EuiPageContent,
+  EuiPageTemplate,
   EuiCard,
-  EuiPageContentHeader_Deprecated as EuiPageContentHeader,
+  EuiPageHeader,
   EuiFlexGroup,
   EuiFlexItem,
   EuiFieldSearch,
@@ -44,59 +44,66 @@ function DeveloperExamples({ examples, navigateToApp, getUrlForApp }: Props) {
       });
 
   return (
-    <EuiPageContent>
-      <EuiPageContentHeader>
-        <EuiText>
-          <h1>Developer examples</h1>
-          <p>
-            The following examples showcase services and APIs that are available to developers.
+    <>
+      <EuiPageTemplate.Header>
+        <EuiFlexGroup justifyContent={'spaceBetween'}>
+          <EuiFlexItem>
+            <EuiPageHeader pageTitle={'Developer examples'} />
+            <EuiText>
+              The following examples showcase services and APIs that are available to developers.
+            </EuiText>
+          </EuiFlexItem>
+          <EuiFlexItem>
             <EuiFieldSearch
+              fullWidth
               placeholder="Search"
               value={search}
               onChange={(e) => setSearch(e.target.value)}
               isClearable={true}
               aria-label="Search developer examples"
             />
-          </p>
-        </EuiText>
-      </EuiPageContentHeader>
-      <EuiFlexGroup wrap>
-        {filteredExamples.map((def) => (
-          <EuiFlexItem style={{ minWidth: 300, maxWidth: 500 }} key={def.appId}>
-            <EuiCard
-              description={
-                <EuiHighlight search={search} highlightAll={true}>
-                  {def.description}
-                </EuiHighlight>
-              }
-              title={
-                <React.Fragment>
-                  <EuiLink
-                    onClick={() => {
-                      navigateToApp(def.appId);
-                    }}
-                  >
-                    <EuiHighlight search={search} highlightAll={true}>
-                      {def.title}
-                    </EuiHighlight>
-                  </EuiLink>
-                  <EuiButtonIcon
-                    iconType="popout"
-                    onClick={() =>
-                      window.open(getUrlForApp(def.appId), '_blank', 'noopener, noreferrer')
-                    }
-                  >
-                    Open in new tab
-                  </EuiButtonIcon>
-                </React.Fragment>
-              }
-              image={def.image}
-              footer={def.links ? <EuiListGroup size={'s'} listItems={def.links} /> : undefined}
-            />
           </EuiFlexItem>
-        ))}
-      </EuiFlexGroup>
-    </EuiPageContent>
+        </EuiFlexGroup>
+      </EuiPageTemplate.Header>
+      <EuiPageTemplate.Section>
+        <EuiFlexGroup wrap>
+          {filteredExamples.map((def) => (
+            <EuiFlexItem style={{ minWidth: 300, maxWidth: 500 }} key={def.appId}>
+              <EuiCard
+                description={
+                  <EuiHighlight search={search} highlightAll={true}>
+                    {def.description}
+                  </EuiHighlight>
+                }
+                title={
+                  <React.Fragment>
+                    <EuiLink
+                      onClick={() => {
+                        navigateToApp(def.appId);
+                      }}
+                    >
+                      <EuiHighlight search={search} highlightAll={true}>
+                        {def.title}
+                      </EuiHighlight>
+                    </EuiLink>
+                    <EuiButtonIcon
+                      iconType="popout"
+                      onClick={() =>
+                        window.open(getUrlForApp(def.appId), '_blank', 'noopener, noreferrer')
+                      }
+                    >
+                      Open in new tab
+                    </EuiButtonIcon>
+                  </React.Fragment>
+                }
+                image={def.image}
+                footer={def.links ? <EuiListGroup size={'s'} listItems={def.links} /> : undefined}
+              />
+            </EuiFlexItem>
+          ))}
+        </EuiFlexGroup>
+      </EuiPageTemplate.Section>
+    </>
   );
 }
 

package.json

@@ -592,6 +592,7 @@
     "@kbn/screenshotting-example-plugin": "link:x-pack/examples/screenshotting_example",
     "@kbn/screenshotting-plugin": "link:x-pack/plugins/screenshotting",
     "@kbn/search-examples-plugin": "link:examples/search_examples",
+    "@kbn/search-response-warnings": "link:packages/kbn-search-response-warnings",
     "@kbn/searchprofiler-plugin": "link:x-pack/plugins/searchprofiler",
     "@kbn/security-plugin": "link:x-pack/plugins/security",
     "@kbn/security-solution-ess": "link:x-pack/plugins/security_solution_ess",

packages/kbn-search-response-warnings/README.md

@@ -0,0 +1,3 @@
+# @kbn/search-response-warnings
+
+Components and utils to render warnings which happen when executing search request. For example, shard failures and time outs.

packages/kbn-search-response-warnings/index.ts

@@ -0,0 +1,19 @@
+/*
+ * 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 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 or the Server
+ * Side Public License, v 1.
+ */
+
+export type { SearchResponseInterceptedWarning } from './src/types';
+
+export {
+  SearchResponseWarnings,
+  type SearchResponseWarningsProps,
+} from './src/components/search_response_warnings';
+
+export {
+  getSearchResponseInterceptedWarnings,
+  removeInterceptedWarningDuplicates,
+} from './src/utils/get_search_response_intercepted_warnings';

packages/kbn-search-response-warnings/jest.config.js

@@ -0,0 +1,13 @@
+/*
+ * 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 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 or the Server
+ * Side Public License, v 1.
+ */
+
+module.exports = {
+  preset: '@kbn/test',
+  rootDir: '../..',
+  roots: ['<rootDir>/packages/kbn-search-response-warnings'],
+};

packages/kbn-search-response-warnings/kibana.jsonc

@@ -0,0 +1,5 @@
+{
+  "type": "shared-common",
+  "id": "@kbn/search-response-warnings",
+  "owner": "@elastic/kibana-data-discovery"
+}

packages/kbn-search-response-warnings/package.json

@@ -0,0 +1,6 @@
+{
+  "name": "@kbn/search-response-warnings",
+  "private": true,
+  "version": "1.0.0",
+  "license": "SSPL-1.0 OR Elastic License 2.0"
+}