Merge branch 'master' into eui/40

package.json

@@ -309,7 +309,7 @@
     "prop-types": "^15.7.2",
     "proxy-from-env": "1.0.0",
     "puid": "1.0.7",
-    "puppeteer": "^8.0.0",
+    "puppeteer": "^10.2.0",
     "query-string": "^6.13.2",
     "random-word-slugs": "^0.0.5",
     "raw-loader": "^3.1.0",

src/core/public/rendering/_base.scss

@@ -43,10 +43,12 @@
     top: $headerHeight;
   }
 
-  .kbnStickyMenu {
-    position: sticky;
-    max-height: calc(100vh - #{$headerHeight + $euiSize});
-    top: $headerHeight + $euiSize;
+  @include euiBreakpoint('xl', 'l') {
+    .kbnStickyMenu {
+      position: sticky;
+      max-height: calc(100vh - #{$headerHeight + $euiSize});
+      top: $headerHeight + $euiSize;
+    }
   }
 }
 

src/plugins/index_pattern_editor/public/components/empty_prompts/empty_index_list_prompt/empty_index_list_prompt.tsx

@@ -91,7 +91,7 @@ export const EmptyIndexListPrompt = ({
               <EuiCard
                 className="inpEmptyState__card"
                 onClick={() => {
-                  navigateToApp('home', { path: '/app/integrations/browse' });
+                  navigateToApp('integrations', { path: '/browse' });
                   closeFlyout();
                 }}
                 icon={<EuiIcon size="xl" type="database" color="subdued" />}

src/plugins/kibana_react/public/page_template/no_data_page/no_data_card/elastic_agent_card.tsx

@@ -44,6 +44,7 @@ export const ElasticAgentCard: FunctionComponent<ElasticAgentCardProps> = ({
       <EuiCard
         paddingSize="l"
         image={image}
+        textAlign="left"
         title={
           <EuiTextColor color="default">
             {i18n.translate('kibana-react.noDataPage.elasticAgentCard.noPermission.title', {
@@ -92,7 +93,12 @@ export const ElasticAgentCard: FunctionComponent<ElasticAgentCardProps> = ({
           defaultMessage: `Use Elastic Agent for a simple, unified way to collect data from your machines.`,
         })}
         betaBadgeLabel={recommended ? NO_DATA_RECOMMENDED : undefined}
-        footer={footer}
+        footer={
+          <div className="eui-textCenter">
+            {button}
+            {footer}
+          </div>
+        }
         layout={layout as 'vertical' | undefined}
         {...cardRest}
       />

src/plugins/kibana_react/public/page_template/no_data_page/no_data_card/no_data_card.tsx

@@ -27,14 +27,15 @@ export const NoDataCard: FunctionComponent<NoDataPageActions> = ({
   return (
     <EuiCard
       paddingSize="l"
+      textAlign="left"
       // TODO: we should require both title and description to be passed in by consumers since defaults are not adequate.
       // see comment: https://github.com/elastic/kibana/pull/111261/files#r708399140
       title={title!}
       description={i18n.translate('kibana-react.noDataPage.noDataCard.description', {
         defaultMessage: `Proceed without collecting data`,
       })}
       betaBadgeLabel={recommended ? NO_DATA_RECOMMENDED : undefined}
-      footer={footer}
+      footer={<div className="eui-textCenter">{footer}</div>}
       layout={layout as 'vertical' | undefined}
       {...cardRest}
     />

src/plugins/presentation_util/public/components/controls/__stories__/controls_service_stub.ts

@@ -8,16 +8,16 @@
 
 import { ControlsService } from '../controls_service';
 import { InputControlFactory } from '../../../services/controls';
-import { flightFields, getEuiSelectableOptions } from './flights';
+import { flightFields, getFlightSearchOptions } from './flights';
 import { OptionsListEmbeddableFactory } from '../control_types/options_list';
 
 export const getControlsServiceStub = () => {
   const controlsServiceStub = new ControlsService();
 
   const optionsListFactoryStub = new OptionsListEmbeddableFactory(
     ({ field, search }) =>
-      new Promise((r) => setTimeout(() => r(getEuiSelectableOptions(field, search)), 500)),
-    () => Promise.resolve(['demo data flights']),
+      new Promise((r) => setTimeout(() => r(getFlightSearchOptions(field.name, search)), 120)),
+    () => Promise.resolve([{ title: 'demo data flights', fields: [] }]),
     () => Promise.resolve(flightFields)
   );
 

src/plugins/presentation_util/public/components/controls/__stories__/decorators.tsx

@@ -11,8 +11,8 @@ import { EuiFlexGroup, EuiFlexItem } from '@elastic/eui';
 import { Story } from '@storybook/react';
 
 const bar = '#c5ced8';
-const panel = '#f7f9fa';
-const background = '#e0e6ec';
+const panel = '#ffff';
+const background = '#FAFBFD';
 const minHeight = 60;
 
 const panelStyle = {
@@ -23,12 +23,10 @@ const panelStyle = {
 
 const kqlBarStyle = { background: bar, padding: 16, minHeight, fontStyle: 'italic' };
 
-const inputBarStyle = { background: '#fff', padding: 4 };
-
 const layout = (OptionStory: Story) => (
   <EuiFlexGroup style={{ background }} direction="column">
     <EuiFlexItem style={kqlBarStyle}>KQL Bar</EuiFlexItem>
-    <EuiFlexItem style={inputBarStyle}>
+    <EuiFlexItem>
       <OptionStory />
     </EuiFlexItem>
     <EuiFlexItem>

src/plugins/presentation_util/public/components/controls/__stories__/flights.ts

@@ -7,22 +7,17 @@
  */
 
 import { map, uniq } from 'lodash';
-import { EuiSelectableOption } from '@elastic/eui';
-
 import { flights } from '../../fixtures/flights';
 
 export type Flight = typeof flights[number];
 export type FlightField = keyof Flight;
 
-export const getOptions = (field: string) => uniq(map(flights, field)).sort();
+export const getFlightOptions = (field: string) => uniq(map(flights, field)).sort();
 
-export const getEuiSelectableOptions = (field: string, search?: string): EuiSelectableOption[] => {
-  const options = getOptions(field)
-    .map((option) => ({
-      label: option + '',
-      searchableLabel: option + '',
-    }))
-    .filter((option) => !search || option.label.toLowerCase().includes(search.toLowerCase()));
+export const getFlightSearchOptions = (field: string, search?: string): string[] => {
+  const options = getFlightOptions(field)
+    .map((option) => option + '')
+    .filter((option) => !search || option.toLowerCase().includes(search.toLowerCase()));
   if (options.length > 10) options.length = 10;
   return options;
 };
@@ -57,4 +52,8 @@ export const flightFieldLabels: Record<FlightField, string> = {
   timestamp: 'Timestamp',
 };
 
-export const flightFields = Object.keys(flightFieldLabels) as FlightField[];
+export const flightFields = Object.keys(flightFieldLabels).map((field) => ({
+  name: field,
+  type: 'string',
+  aggregatable: true,
+}));