[Console Monaco migration] Implement history

[yuliacech]

Summary

Fixes #182948

This PR migrates history component from ace to monaco and re-implements the logic to insert the saved requests into the monaco editor.

To test:

1. click the "History" tab and check that the component is using Monaco to display requests
2. Check that "Clear history" button works
3. Check that a request from history can be inserted into the editor

• when the cursor is on the 1st line of the request, the history request is inserted before the request in the editor
• if the cursor is not on the 1st line of the request, the history request is inserted after the request in the editor

Screen recording

Screen.Recording.2024-05-15.at.18.37.43.mov

[yuliacech]

/ci

[yuliacech]

/ci

[yuliacech]

/ci

[yuliacech]

/ci

[elasticmachine]

Pinging @elastic/kibana-management (Team:Kibana Management)

[ElenaStoeva]

Thanks for working on this @yuliacech! Tested locally and overall the History functionality works well! I only noticed one issue that occurs when we have two consequent requests and we try to insert one from history before the second request:

Screen.Recording.2024-05-16.at.17.10.26.mov

It seems that the line above the first line of the selected request is separated from the first request and the request from history is put right above it. 🤔

[yuliacech]

Thanks a lot for your review, @ElenaStoeva!
Great catch with this bug, I fixed the implementation and added some unit tests for that function (a lot of mocking necessary, but still better than nothing until we can do e2e testing).

[ElenaStoeva]

Amazing job @yuliacech! 🎉 Thanks for fixing the bug and adding unit tests (I will try to use the same mocking technique to add unit tests for the keyboard commands PR)!

After some further testing, I noticed something small, which is not really a bug but just a small difference from the behavior in Ace. Let me know what you think.

Everything else LGTM, so approving the PR to unblock.

[ElenaStoeva]

As far as I understand, the request from history will always end up at column 1 unless it is not inside a request - then it might end up in the middle of the line if the cursor is there. In Ace editor, it always ends up at column 1. Should we do the same here for consistency?

Suggested change

	// if not inside a request, insert the request at the cursor position
	// the cursor is not inside a request
	if (!position) {
	// if no cursor position, insert at the beginning of the first line
	position = { lineNumber: 1, column: 1 };
	} else {
	// insert the request at the beginning of the line of the cursor position
	position = { lineNumber: position.lineNumber, column: 1 };
	}

In Ace editor:

Screen.Recording.2024-05-17.at.17.00.22.mov

In this PR:

Screen.Recording.2024-05-17.at.16.58.34.mov

[yuliacech]

Thanks a lot, @ElenaStoeva! Another great catch, fixed in 67968c6

[kibana-ci]

💛 Build succeeded, but was flaky

• Buildkite Build
• Commit: f5ae554
• Storybooks Preview

Failed CI Steps

• Jest Tests #9

Metrics [docs]

Module Count

Fewer modules leads to a faster build time

id	before	after	diff
console	257	259	+2

Async chunks

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

id	before	after	diff
console	452.3KB	454.9KB	+2.5KB

History

• 💔 Build #211508 failed fb2b7dc
• 💔 Build #211450 failed c4e0741
• 💚 Build #211302 succeeded 67968c6
• 💛 Build #211234 was flaky dc2e42e
• 💔 Build #211175 failed 5f6ed4e
• 💚 Build #210769 succeeded ca60bbc

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