[CodeEditor/UrlDrilldown] Add `fitToContent` support, autoresize the url template editor #175561

Dosant · 2024-01-25T15:28:20Z

Summary

This PR fixes the paper cut where the URL template editor in URL drilldown is unusably small. It now can expand as you type longer URLs
fix #132513

The input box now expands from 5 to 15 lines.

expanding.editor.mov

…l-editor-auto-height

Dosant · 2024-01-26T14:19:22Z

/ci

elasticmachine · 2024-01-26T15:57:31Z

Pinging @elastic/appex-sharedux (Team:SharedUX)

Dosant · 2024-01-26T16:07:54Z

packages/shared-ux/code_editor/impl/code_editor.tsx

-    _editor.current?.layout();
-  }, []);
-
-  useResizeDetector({


This seemed to be unused. The resize detection is working where it is needed using built in automaticLayout option. I showed it in a new story I created

Dosant · 2024-01-26T16:08:59Z

packages/shared-ux/code_editor/impl/code_editor.tsx

@@ -181,29 +190,18 @@ export const CodeEditor: React.FC<CodeEditorProps> = ({

  const isReadOnly = options?.readOnly ?? false;

-  const _editor = useRef<monaco.editor.IStandaloneCodeEditor | null>(null);


had to move editor to setState so that I could properly register the callback that would react to props changes

Dosant · 2024-01-26T16:09:58Z

src/plugins/kibana_react/public/url_template_editor/styles.scss

@@ -1,5 +1,5 @@
 .urlTemplateEditor__container {
  .monaco-editor .lines-content.monaco-editor-background {
-    margin: $euiSizeS;
+    margin: 0 $euiSizeS;


the vertical margin here broke the height calculation. Moved it to padding as part of monaco options

Dosant · 2024-01-26T16:11:39Z

packages/shared-ux/code_editor/mocks/monaco_mock/index.tsx

@@ -106,7 +106,9 @@ export const MockedMonacoEditor = ({
  className?: string;
  ['data-test-subj']?: string;
 }) => {
-  editorWillMount?.(monaco);
+  useComponentWillMount(() => {


fixing willMount in the mock because now it re-renders twice due to setState(editor) (this is fine, just the tests expectation got broken because of incomplete mock)

Dosant · 2024-01-30T10:55:25Z

@elasticmachine merge upstream

vadimkibana

Tested locally, drilldowns URL editor work like a charm!

eokoneyo

Hey @Dosant this change works perfectly for the url template editor, but unfortunately has unintended side effects for ESQL query input field in discover, see;

Screen.Recording.2024-01-30.at.13.31.55.mov

it seems we might need to apply new prop fitToContent to the text based editor

…l-editor-auto-height

…nt/kibana into d/2024-01-25-url-editor-auto-height

…l-editor-auto-height

Dosant · 2024-02-05T11:43:27Z

Hey @Dosant this change works perfectly for the url template editor, but unfortunately has unintended side effects for ESQL query input field in discover, see;

Screen.Recording.2024-01-30.at.13.31.55.mov

it seems we might need to apply new prop fitToContent to the text based editor

@eokoneyo, thank you! should be fixed

Dosant · 2024-02-05T13:01:03Z

@elasticmachine merge upstream

Dosant · 2024-02-05T14:30:46Z

@elasticmachine merge upstream

…nt/kibana into d/2024-01-25-url-editor-auto-height

kibana-ci · 2024-02-05T16:54:31Z

💚 Build Succeeded

Metrics [docs]

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
`kibanaReact`	120	121	+1

Async chunks

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

id	before	after	diff
`uiActionsEnhanced`	135.7KB	135.8KB	+38.0B

Page load bundle

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

id	before	after	diff
`kibanaReact`	40.4KB	40.5KB	+123.0B

Unknown metric groups

API count

id	before	after	diff
`@kbn/code-editor`	36	37	+1
`kibanaReact`	152	153	+1
total			+2

History

💔 Build #191369 failed 40585dc
💔 Build #191322 failed df4c2ca
💔 Build #191302 failed 007a6ee
💚 Build #190138 succeeded 4cbb49e
💚 Build #189605 succeeded d7fe921

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

eokoneyo

LGTM 👌🏾 ... thanks for covering the edge case!!

…url template editor (elastic#175561) ## Summary This PR fixes the paper cut where the URL template editor in URL drilldown is unusably small. It now can expand as you type longer URLs fix elastic#132513 The input box now expands from 5 to 15 lines.

Dosant added 3 commits January 25, 2024 16:22

url editor auto height

1b136e4

wip

bd8687b

Merge branch 'main' of github.com:elastic/kibana into d/2024-01-25-ur…

d7fe921

…l-editor-auto-height

Dosant added release_note:skip Skip the PR/issue when compiling release notes Team:SharedUX Team label for AppEx-SharedUX (formerly Global Experience) labels Jan 26, 2024

Dosant marked this pull request as ready for review January 26, 2024 15:57

Dosant requested review from a team as code owners January 26, 2024 15:57

Dosant requested a review from eokoneyo January 26, 2024 15:57

Dosant commented Jan 26, 2024

View reviewed changes

MichaelMarcialis approved these changes Jan 29, 2024

View reviewed changes

Merge branch 'main' into d/2024-01-25-url-editor-auto-height

4cbb49e

vadimkibana approved these changes Jan 30, 2024

View reviewed changes

eokoneyo reviewed Jan 30, 2024

View reviewed changes

Dosant added 4 commits February 2, 2024 15:36

Merge branch 'main' of github.com:elastic/kibana into d/2024-01-25-ur…

8ac02d1

…l-editor-auto-height

Merge branch 'd/2024-01-25-url-editor-auto-height' of github.com:Dosa…

2036a23

…nt/kibana into d/2024-01-25-url-editor-auto-height

Merge branch 'main' of github.com:elastic/kibana into d/2024-01-25-ur…

eb20083

…l-editor-auto-height

don’t touch layout in case fitToContent is not used

007a6ee

Dosant requested a review from eokoneyo February 5, 2024 11:43

Merge branch 'main' into d/2024-01-25-url-editor-auto-height

df4c2ca

kibanamachine and others added 3 commits February 5, 2024 09:30

Merge branch 'main' into d/2024-01-25-url-editor-auto-height

40585dc

revert mdx change

43892c1

Merge branch 'd/2024-01-25-url-editor-auto-height' of github.com:Dosa…

d559d70

…nt/kibana into d/2024-01-25-url-editor-auto-height

eokoneyo approved these changes Feb 6, 2024

View reviewed changes

Dosant merged commit 86e8bc1 into elastic:main Feb 6, 2024
36 checks passed

Dosant self-assigned this Feb 6, 2024

kibanamachine added v8.13.0 backport:skip This commit does not require backporting labels Feb 6, 2024

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[CodeEditor/UrlDrilldown] Add `fitToContent` support, autoresize the url template editor #175561

[CodeEditor/UrlDrilldown] Add `fitToContent` support, autoresize the url template editor #175561

Dosant commented Jan 25, 2024 •

edited

Loading

Dosant commented Jan 26, 2024

elasticmachine commented Jan 26, 2024

Dosant Jan 26, 2024

Dosant Jan 26, 2024

Dosant Jan 26, 2024

Dosant Jan 26, 2024

Dosant commented Jan 30, 2024

vadimkibana left a comment •

edited

Loading

eokoneyo left a comment

Dosant commented Feb 5, 2024

Dosant commented Feb 5, 2024

Dosant commented Feb 5, 2024

kibana-ci commented Feb 5, 2024

API count

eokoneyo left a comment

		@@ -181,29 +190,18 @@ export const CodeEditor: React.FC<CodeEditorProps> = ({

		const isReadOnly = options?.readOnly ?? false;

		const _editor = useRef<monaco.editor.IStandaloneCodeEditor \| null>(null);

[CodeEditor/UrlDrilldown] Add fitToContent support, autoresize the url template editor #175561

[CodeEditor/UrlDrilldown] Add fitToContent support, autoresize the url template editor #175561

Conversation

Dosant commented Jan 25, 2024 • edited Loading

Summary

Dosant commented Jan 26, 2024

elasticmachine commented Jan 26, 2024

Dosant Jan 26, 2024

Choose a reason for hiding this comment

Dosant Jan 26, 2024

Choose a reason for hiding this comment

Dosant Jan 26, 2024

Choose a reason for hiding this comment

Dosant Jan 26, 2024

Choose a reason for hiding this comment

Dosant commented Jan 30, 2024

vadimkibana left a comment • edited Loading

Choose a reason for hiding this comment

eokoneyo left a comment

Choose a reason for hiding this comment

Dosant commented Feb 5, 2024

Dosant commented Feb 5, 2024

Dosant commented Feb 5, 2024

kibana-ci commented Feb 5, 2024

💚 Build Succeeded

Metrics [docs]

Public APIs missing comments

Async chunks

Page load bundle

API count

History

eokoneyo left a comment

Choose a reason for hiding this comment

[CodeEditor/UrlDrilldown] Add `fitToContent` support, autoresize the url template editor #175561

[CodeEditor/UrlDrilldown] Add `fitToContent` support, autoresize the url template editor #175561

Dosant commented Jan 25, 2024 •

edited

Loading

vadimkibana left a comment •

edited

Loading