Merge branch 'master' of github.com:elastic/kibana into sessions/save…

…-all-sessions

examples/expressions_explorer/public/actions_and_expressions.tsx

@@ -63,7 +63,7 @@ export function ActionsExpressionsExample({ expressions, actions }: Props) {
           </EuiTitle>
         </EuiPageHeaderSection>
       </EuiPageHeader>
-      <EuiPageContent>
+      <EuiPageContent data-test-subj="expressionsActionsTest">
         <EuiPageContentBody>
           <EuiFlexGroup>
             <EuiFlexItem>

examples/expressions_explorer/public/actions_and_expressions2.tsx

@@ -0,0 +1,102 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * and the Server Side Public License, v 1; you may not use this file except in
+ * compliance with, at your election, the Elastic License or the Server Side
+ * Public License, v 1.
+ */
+
+import React, { useState } from 'react';
+import {
+  EuiFlexItem,
+  EuiFlexGroup,
+  EuiPageBody,
+  EuiPageContent,
+  EuiPageContentBody,
+  EuiPageHeader,
+  EuiPageHeaderSection,
+  EuiPanel,
+  EuiText,
+  EuiTitle,
+} from '@elastic/eui';
+import {
+  ExpressionsStart,
+  ReactExpressionRenderer,
+  ExpressionsInspectorAdapter,
+} from '../../../src/plugins/expressions/public';
+import { ExpressionEditor } from './editor/expression_editor';
+import { UiActionsStart } from '../../../src/plugins/ui_actions/public';
+
+interface Props {
+  expressions: ExpressionsStart;
+  actions: UiActionsStart;
+}
+
+export function ActionsExpressionsExample2({ expressions, actions }: Props) {
+  const [expression, updateExpression] = useState(
+    'button name="click me" href="http://www.google.com" color={var color}'
+  );
+
+  const [variables, updateVariables] = useState({
+    color: 'blue',
+  });
+
+  const expressionChanged = (value: string) => {
+    updateExpression(value);
+  };
+
+  const inspectorAdapters = {
+    expression: new ExpressionsInspectorAdapter(),
+  };
+
+  const handleEvents = (event: any) => {
+    updateVariables({ color: event.value.href === 'http://www.google.com' ? 'red' : 'blue' });
+  };
+
+  return (
+    <EuiPageBody>
+      <EuiPageHeader>
+        <EuiPageHeaderSection>
+          <EuiTitle size="l">
+            <h1>Actions from expression renderers</h1>
+          </EuiTitle>
+        </EuiPageHeaderSection>
+      </EuiPageHeader>
+      <EuiPageContent>
+        <EuiPageContentBody data-test-subj="expressionsVariablesTest">
+          <EuiFlexGroup>
+            <EuiFlexItem>
+              <EuiText>
+                This example is similar to previous one, but clicking the button will rerender the
+                expression with new set of variables.
+              </EuiText>
+            </EuiFlexItem>
+          </EuiFlexGroup>
+
+          <EuiFlexGroup gutterSize="l">
+            <EuiFlexItem>
+              <EuiPanel data-test-subj="expressionEditor" paddingSize="none" role="figure">
+                <ExpressionEditor value={expression} onChange={expressionChanged} />
+              </EuiPanel>
+            </EuiFlexItem>
+            <EuiFlexItem>
+              <EuiPanel paddingSize="none" role="figure">
+                <ReactExpressionRenderer
+                  data-test-subj="expressionsVariablesTestRenderer"
+                  expression={expression}
+                  debug={true}
+                  inspectorAdapters={inspectorAdapters}
+                  variables={variables}
+                  onEvent={handleEvents}
+                  renderError={(message: any) => {
+                    return <div>{message}</div>;
+                  }}
+                />
+              </EuiPanel>
+            </EuiFlexItem>
+          </EuiFlexGroup>
+        </EuiPageContentBody>
+      </EuiPageContent>
+    </EuiPageBody>
+  );
+}

examples/expressions_explorer/public/app.tsx

@@ -25,6 +25,7 @@ import { RunExpressionsExample } from './run_expressions';
 import { RenderExpressionsExample } from './render_expressions';
 import { ActionsExpressionsExample } from './actions_and_expressions';
 import { UiActionsStart } from '../../../src/plugins/ui_actions/public';
+import { ActionsExpressionsExample2 } from './actions_and_expressions2';
 
 interface Props {
   expressions: ExpressionsStart;
@@ -64,6 +65,10 @@ const ExpressionsExplorer = ({ expressions, inspector, actions }: Props) => {
             <EuiSpacer />
 
             <ActionsExpressionsExample expressions={expressions} actions={actions} />
+
+            <EuiSpacer />
+
+            <ActionsExpressionsExample2 expressions={expressions} actions={actions} />
           </EuiPageContentBody>
         </EuiPageContent>
       </EuiPageBody>

examples/expressions_explorer/public/functions/button.ts

@@ -10,6 +10,7 @@ import { i18n } from '@kbn/i18n';
 import { ExpressionFunctionDefinition } from '../../../../src/plugins/expressions/common';
 
 interface Arguments {
+  color: string;
   href: string;
   name: string;
 }
@@ -24,15 +25,20 @@ export type ExpressionFunctionButton = ExpressionFunctionDefinition<
 export const buttonFn: ExpressionFunctionButton = {
   name: 'button',
   args: {
+    color: {
+      help: i18n.translate('expressions.functions.button.args.color', {
+        defaultMessage: 'Color of the button',
+      }),
+    },
     href: {
-      help: i18n.translate('expressions.functions.font.args.href', {
+      help: i18n.translate('expressions.functions.button.args.href', {
         defaultMessage: 'Link to which to navigate',
       }),
       types: ['string'],
       required: true,
     },
     name: {
-      help: i18n.translate('expressions.functions.font.args.name', {
+      help: i18n.translate('expressions.functions.button.args.name', {
         defaultMessage: 'Name of the button',
       }),
       types: ['string'],

examples/expressions_explorer/public/renderers/button.tsx

@@ -26,8 +26,17 @@ export const buttonRenderer: ExpressionRenderDefinition<any> = {
     };
 
     const renderDebug = () => (
-      <div style={{ width: domNode.offsetWidth, height: domNode.offsetHeight }}>
-        <EuiButton data-test-subj="testExpressionButton" onClick={buttonClick}>
+      <div
+        style={{
+          width: domNode.offsetWidth,
+          height: domNode.offsetHeight,
+        }}
+      >
+        <EuiButton
+          data-test-subj="testExpressionButton"
+          onClick={buttonClick}
+          style={{ backgroundColor: config.color || 'white' }}
+        >
           {config.name}
         </EuiButton>
       </div>

packages/kbn-optimizer/limits.yml

@@ -53,7 +53,7 @@ pageLoadAssetSize:
   mapsLegacy: 116817
   mapsLegacyLicensing: 20214
   ml: 82187
-  monitoring: 50000
+  monitoring: 80000
   navigation: 37269
   newsfeed: 42228
   observability: 89709

src/plugins/discover/public/application/angular/context_app.js

@@ -50,14 +50,15 @@ getAngularModule().directive('contextApp', function ContextApp() {
 
 function ContextAppController($scope, Private) {
   const { filterManager, indexPatterns, uiSettings, navigation } = getServices();
+  const useNewFieldsApi = !uiSettings.get(SEARCH_FIELDS_FROM_SOURCE);
   const queryParameterActions = getQueryParameterActions(filterManager, indexPatterns);
   const queryActions = Private(QueryActionsProvider);
-  const useNewFieldsApi = !uiSettings.get(SEARCH_FIELDS_FROM_SOURCE);
   this.state = createInitialState(
     parseInt(uiSettings.get(CONTEXT_STEP_SETTING), 10),
     getFirstSortableField(this.indexPattern, uiSettings.get(CONTEXT_TIE_BREAKER_FIELDS_SETTING)),
     useNewFieldsApi
   );
+  this.state.useNewFieldsApi = useNewFieldsApi;
   this.topNavMenu = navigation.ui.TopNavMenu;
 
   this.actions = _.mapValues(

src/plugins/discover/public/application/angular/discover.js

@@ -739,6 +739,21 @@ function discoverController($route, $scope, Promise) {
     history.push('/');
   };
 
+  const showUnmappedFieldsDefaultValue = $scope.useNewFieldsApi && !!$scope.opts.savedSearch.pre712;
+  let showUnmappedFields = showUnmappedFieldsDefaultValue;
+
+  const onChangeUnmappedFields = (value) => {
+    showUnmappedFields = value;
+    $scope.unmappedFieldsConfig.showUnmappedFields = value;
+    $scope.fetch();
+  };
+
+  $scope.unmappedFieldsConfig = {
+    showUnmappedFieldsDefaultValue,
+    showUnmappedFields,
+    onChangeUnmappedFields,
+  };
+
   $scope.updateDataSource = () => {
     const { indexPattern, searchSource, useNewFieldsApi } = $scope;
     const { columns, sort } = $scope.state;
@@ -748,6 +763,7 @@ function discoverController($route, $scope, Promise) {
       sort,
       columns,
       useNewFieldsApi,
+      showUnmappedFields,
     });
     return Promise.resolve();
   };

src/plugins/discover/public/application/angular/discover_legacy.html

@@ -30,6 +30,7 @@
     update-query="handleRefresh"
     update-saved-query-id="updateSavedQueryId"
     use-new-fields-api="useNewFieldsApi"
+    unmapped-fields-config="unmappedFieldsConfig"
   >
   </discover>
 </discover-app>

src/plugins/discover/public/application/angular/doc_table/components/table_header/helpers.tsx

@@ -5,7 +5,6 @@
  * compliance with, at your election, the Elastic License or the Server Side
  * Public License, v 1.
  */
-
 import { i18n } from '@kbn/i18n';
 import { IndexPattern } from '../../../../../kibana_services';
 

src/plugins/discover/public/application/components/create_discover_directive.ts

@@ -40,5 +40,6 @@ export function createDiscoverDirective(reactDirective: any) {
     ['topNavMenu', { watchDepth: 'reference' }],
     ['updateQuery', { watchDepth: 'reference' }],
     ['updateSavedQueryId', { watchDepth: 'reference' }],
+    ['unmappedFieldsConfig', { watchDepth: 'value' }],
   ]);
 }

src/plugins/discover/public/application/components/discover.tsx

@@ -80,6 +80,7 @@ export function Discover({
   topNavMenu,
   updateQuery,
   updateSavedQueryId,
+  unmappedFieldsConfig,
 }: DiscoverProps) {
   const scrollableDesktop = useRef<HTMLDivElement>(null);
   const collapseIcon = useRef<HTMLButtonElement>(null);
@@ -146,6 +147,7 @@ export function Discover({
                 setIndexPattern={setIndexPattern}
                 isClosed={isSidebarClosed}
                 trackUiMetric={trackUiMetric}
+                unmappedFieldsConfig={unmappedFieldsConfig}
                 useNewFieldsApi={useNewFieldsApi}
               />
             </EuiFlexItem>

src/plugins/discover/public/application/components/sidebar/discover_field_search.test.tsx

@@ -136,4 +136,22 @@ describe('DiscoverFieldSearch', () => {
     popover = component.find(EuiPopover);
     expect(popover.prop('isOpen')).toBe(false);
   });
+
+  test('unmapped fields', () => {
+    const onChangeUnmappedFields = jest.fn();
+    const componentProps = {
+      ...defaultProps,
+      showUnmappedFields: true,
+      useNewFieldsApi: false,
+      onChangeUnmappedFields,
+    };
+    const component = mountComponent(componentProps);
+    const btn = findTestSubject(component, 'toggleFieldFilterButton');
+    btn.simulate('click');
+    const unmappedFieldsSwitch = findTestSubject(component, 'unmappedFieldsSwitch');
+    act(() => {
+      unmappedFieldsSwitch.simulate('click');
+    });
+    expect(onChangeUnmappedFields).toHaveBeenCalledWith(false);
+  });
 });