[RAM] Autocomplete

[guskovaue]

Summary

Solves this issue: #161763

This PR introduces autocomplete for mustache variables for email connector(next PR will add it to all connectors) under the feature flag.

We decided keep old solution with button with all searchable options as well.

How to test:
Create an email connector in kibana.yml:

xpack.actions.preconfigured:
maildev:
name: 'email: maildev'
actionTypeId: '.email'
config:
from: 'guskova@example.com'
host: 'localhost'
port: '1025'

How it should work:
You start writing in Message window {{ and mustache variable name. And you should see autocomplete popup with all possible options to choose. When you click somewhere else, popup should disappeared.

Screen.Recording.2023-07-12.at.16.45.51.mov

e options to choose. When you click somewhere else, popup should disappeared.

[JiaweiWu]

I tested it locally, works as expected. I left a few comments regarding the experiment flag, as that is currently not working as expected. Once that is done then I think this is ready to merge.

[JiaweiWu]

might be better to have the on scroll listen on the window, since I noticed if i scrolled the outer div, the list doesn't close

  useEffect(() => {
    window.addEventListener('scroll', closeList, { passive: true, capture: true });
    return () => {
      window.removeEventListener('scroll', closeList. { capture: true });
    };
  }, [closeList]);

[guskovaue]

I've try to fix it fast. Did not work, because when our main logic will be broken and autocomplete will work with bugs.
I've created separate task for that: #165204.
For this PR think that it's fine to keep it like this, because we have similar behaviour in different places in rule form.
Are you ok with that?

[XavierM]

we were able to figure it out check the last commit

[JiaweiWu]

So I tried this again and noticed 2 issues:

1. We need to tell the stack_connectors server to expose the enabled experiments to the frontend. To do this, in x-pack/plugins/stack_connectors/server/index.ts, we need to add

export const config: PluginConfigDescriptor<ConfigSchema> = {
  exposeToBrowser: {
    enableExperimental: true,
  },
  schema: configSchema,
};

to the exported config

2. So experiment flags are a toggle (either we set them or remove them). So this means isMustacheAutocompleteon should default to false (assuming we want autocomplete to be the default state, as we can only add the experiment flag to kibana.yml, not somehow take it away). This means that the experiment should actually be isMustacheAutocompleteOff, which defaults to false. Then if we want to turn off the new autocomplete we can add the experiment flag (which then turns it off).

So in line 15 of x-pack/plugins/stack_connectors/common/experimental_features.ts, this needs to default to false, you will notice a type error in line 39, which is expected, we have an issue to fix this so in the meantime add the // @ts-expect-error ts upgrade v4.7.4 to the line above it.

Then where ever you were using the flag to determine which component to render, you will need to swap the logic around.

[guskovaue]

@JiaweiWu Are these fixes what you meant for feature flag? fix experimental flag

[jeramysoucy]

Change in test/plugin_functional/test_suites/core_plugins/rendering.ts LGTM

[XavierM]

nit use Set to avoid check includes

[JiaweiWu]

LGTM!

[XavierM]

@elasticmachine merge upstream

[kibana-ci]

💚 Build Succeeded

• Buildkite Build
• Commit: 3399f66

Metrics [docs]

Module Count

Fewer modules leads to a faster build time

id	before	after	diff
observability	425	433	+8
securitySolution	4490	4498	+8
stackConnectors	204	236	+32
total			+48

Public APIs missing comments

Total count of every public API that lacks a comment. Target amount is 0. Run node scripts/build_api_docs --plugin [yourplugin] --stats comments for more detailed information.

id	before	after	diff
@kbn/alerts-ui-shared	7	9	+2

Async chunks

Total size of all lazy-loaded chunks that will be downloaded as the user navigates the app

id	before	after	diff
observability	1.0MB	1023.2KB	-4.1KB
securitySolution	12.6MB	12.6MB	+3.2KB
stackConnectors	450.2KB	468.0KB	+17.8KB
triggersActionsUi	1.4MB	1.4MB	-6.8KB
total			+10.2KB

Page load bundle

Size of the bundles that are downloaded on every page load. Target size is below 100kb

id	before	after	diff
observability	99.4KB	99.5KB	+22.0B
stackConnectors	35.2KB	36.5KB	+1.3KB
triggersActionsUi	89.3KB	91.5KB	+2.2KB
total			+3.5KB

Unknown metric groups

API count

id	before	after	diff
@kbn/alerts-ui-shared	8	10	+2

async chunk count

id	before	after	diff
observability	11	12	+1

ESLint disabled line counts

id	before	after	diff
@kbn/alerts-ui-shared	2	3	+1
stackConnectors	93	94	+1
total			+2

Total ESLint disabled count

id	before	after	diff
@kbn/alerts-ui-shared	2	3	+1
stackConnectors	98	99	+1
total			+2

History

• 💚 Build #155008 succeeded c50a06b
• 💚 Build #154862 succeeded aecb69a
• 💔 Build #154800 failed 838f331
• 💚 Build #154073 succeeded 48f04b0
• 💔 Build #153533 failed 9265b39
• 💔 Build #153491 failed ca19d59

To update your PR or re-run it, just comment with:
@elasticmachine merge upstream

cc @guskovaue