[Controls] Fix disabled range slider tooltip, clean up delete control button#227295
Merged
Zacqary merged 3 commits intoelastic:mainfrom Jul 9, 2025
Merged
[Controls] Fix disabled range slider tooltip, clean up delete control button#227295Zacqary merged 3 commits intoelastic:mainfrom
Zacqary merged 3 commits intoelastic:mainfrom
Conversation
Zacqary
added
Feature:Dashboard
Contributor
|
Pinging @elastic/kibana-presentation (Team:Presentation) |
Zacqary
commented
Jul 9, 2025
| { | ||
| fieldSelected: Boolean(selectedFieldName), | ||
| controlType: factory.getDisplayName(), | ||
| controlType: factory.type, |
Contributor
Author
There was a problem hiding this comment.
This line here fixes the range control tooltip. Everything else is for the delete button/modal.
nreese
reviewed
Jul 9, 2025
| import { i18n } from '@kbn/i18n'; | ||
| import { coreServices } from '../services/kibana_services'; | ||
|
|
||
| const openConfirmDeleteModal = (all: boolean) => |
Contributor
There was a problem hiding this comment.
This is a really nice utility.
One nit - why is this in common? Common should only contain code used by both server and public but this is only public code.
Contributor
There was a problem hiding this comment.
nevermind. I now see the folder is controls/public/common, not controls/common
nreese
approved these changes
Jul 9, 2025
Contributor
nreese
left a comment
nreese
left a comment
There was a problem hiding this comment.
kibana-presentation changes LGTM - thanks for cleaning these UI elements up
code review only
Contributor
💚 Build Succeeded
Metrics [docs]Module Count
Async chunks
History
|
Contributor
|
Starting backport for target branches: 8.19, 9.1 https://github.com/elastic/kibana/actions/runs/16178289512 |
kibanamachine
added a commit
to kibanamachine/kibana
that referenced
this pull request
Jul 9, 2025
… button (elastic#227295) ## Summary ### Fix tooltip for disabled range slider When selecting a non-numerical field, the range slider was disabled with this tooltip: <img width="400" alt="Screenshot 2025-07-09 at 11 04 46 AM" src="https://github.com/user-attachments/assets/45ac7d9a-9009-40ed-839d-e5f47a547f75" /> Looking at the error message code, this was not the intended behavior: ```ts /** This shouldn't ever happen - but, adding just in case as a fallback. */ return i18n.translate( 'controls.controlGroup.manageControl.dataSource.controlTypeErrorMessage.default', { defaultMessage: 'Select a compatible control type.', } ); ``` This PR fixes this logic so the correct message is displayed: <img width="320" alt="Screenshot 2025-07-09 at 11 04 14 AM" src="https://github.com/user-attachments/assets/ea37385c-fdab-48c9-8e52-538411895000" /> ### Move delete control button to flyout footer and add confirm dialog When editing a control, a Delete Control button would appear here in the flyout body, which is hard to spot if the screen height is small and the user has to scroll down: <img width="507" alt="Screenshot 2025-07-09 at 11 22 23 AM" src="https://github.com/user-attachments/assets/9f6cb214-41ca-4d6f-87cd-08240aaa73d3" /> Clicking this button would also just immediately delete the control, and failed to display this confirmation modal: <img width="587" alt="Screenshot 2025-07-09 at 11 21 36 AM" src="https://github.com/user-attachments/assets/60c73cd0-5336-483d-a655-b868fffde94e" /> This PR adds the confirmation modal when trying to delete a control from the edit flyout, and also moves the button to the flyout footer: <img width="543" alt="Screenshot 2025-07-09 at 11 21 22 AM" src="https://github.com/user-attachments/assets/5d3553c0-a42f-4cd1-ac4d-f2465e2a669a" /> --------- Co-authored-by: kibanamachine <42973632+kibanamachine@users.noreply.github.com> (cherry picked from commit 092c22d)
kibanamachine
added a commit
to kibanamachine/kibana
that referenced
this pull request
Jul 9, 2025
… button (elastic#227295) ## Summary ### Fix tooltip for disabled range slider When selecting a non-numerical field, the range slider was disabled with this tooltip: <img width="400" alt="Screenshot 2025-07-09 at 11 04 46 AM" src="https://github.com/user-attachments/assets/45ac7d9a-9009-40ed-839d-e5f47a547f75" /> Looking at the error message code, this was not the intended behavior: ```ts /** This shouldn't ever happen - but, adding just in case as a fallback. */ return i18n.translate( 'controls.controlGroup.manageControl.dataSource.controlTypeErrorMessage.default', { defaultMessage: 'Select a compatible control type.', } ); ``` This PR fixes this logic so the correct message is displayed: <img width="320" alt="Screenshot 2025-07-09 at 11 04 14 AM" src="https://github.com/user-attachments/assets/ea37385c-fdab-48c9-8e52-538411895000" /> ### Move delete control button to flyout footer and add confirm dialog When editing a control, a Delete Control button would appear here in the flyout body, which is hard to spot if the screen height is small and the user has to scroll down: <img width="507" alt="Screenshot 2025-07-09 at 11 22 23 AM" src="https://github.com/user-attachments/assets/9f6cb214-41ca-4d6f-87cd-08240aaa73d3" /> Clicking this button would also just immediately delete the control, and failed to display this confirmation modal: <img width="587" alt="Screenshot 2025-07-09 at 11 21 36 AM" src="https://github.com/user-attachments/assets/60c73cd0-5336-483d-a655-b868fffde94e" /> This PR adds the confirmation modal when trying to delete a control from the edit flyout, and also moves the button to the flyout footer: <img width="543" alt="Screenshot 2025-07-09 at 11 21 22 AM" src="https://github.com/user-attachments/assets/5d3553c0-a42f-4cd1-ac4d-f2465e2a669a" /> --------- Co-authored-by: kibanamachine <42973632+kibanamachine@users.noreply.github.com> (cherry picked from commit 092c22d)
Contributor
💚 All backports created successfully
Note: Successful backport PRs will be merged automatically after passing CI. Questions ?Please refer to the Backport tool documentation |
kibanamachine
added a commit
that referenced
this pull request
Jul 9, 2025
…ontrol button (#227295) (#227316) # Backport This will backport the following commits from `main` to `9.1`: - [[Controls] Fix disabled range slider tooltip, clean up delete control button (#227295)](#227295) <!--- Backport version: 9.6.6 --> ### Questions ? Please refer to the [Backport tool documentation](https://github.com/sorenlouv/backport) <!--BACKPORT [{"author":{"name":"Zac Xeper","email":"Zacqary@users.noreply.github.com"},"sourceCommit":{"committedDate":"2025-07-09T19:20:32Z","message":"[Controls] Fix disabled range slider tooltip, clean up delete control button (#227295)\n\n## Summary\n\n### Fix tooltip for disabled range slider\n\nWhen selecting a non-numerical field, the range slider was disabled with\nthis tooltip:\n\n<img width=\"400\" alt=\"Screenshot 2025-07-09 at 11 04 46 AM\"\nsrc=\"https://github.com/user-attachments/assets/45ac7d9a-9009-40ed-839d-e5f47a547f75\"\n/>\n\nLooking at the error message code, this was not the intended behavior:\n\n```ts\n/** This shouldn't ever happen - but, adding just in case as a fallback. */\nreturn i18n.translate(\n 'controls.controlGroup.manageControl.dataSource.controlTypeErrorMessage.default',\n {\n defaultMessage: 'Select a compatible control type.',\n }\n);\n```\n\nThis PR fixes this logic so the correct message is displayed:\n<img width=\"320\" alt=\"Screenshot 2025-07-09 at 11 04 14 AM\"\nsrc=\"https://github.com/user-attachments/assets/ea37385c-fdab-48c9-8e52-538411895000\"\n/>\n\n\n### Move delete control button to flyout footer and add confirm dialog\n\nWhen editing a control, a Delete Control button would appear here in the\nflyout body, which is hard to spot if the screen height is small and the\nuser has to scroll down:\n\n<img width=\"507\" alt=\"Screenshot 2025-07-09 at 11 22 23 AM\"\nsrc=\"https://github.com/user-attachments/assets/9f6cb214-41ca-4d6f-87cd-08240aaa73d3\"\n/>\n\nClicking this button would also just immediately delete the control, and\nfailed to display this confirmation modal:\n<img width=\"587\" alt=\"Screenshot 2025-07-09 at 11 21 36 AM\"\nsrc=\"https://github.com/user-attachments/assets/60c73cd0-5336-483d-a655-b868fffde94e\"\n/>\n\nThis PR adds the confirmation modal when trying to delete a control from\nthe edit flyout, and also moves the button to the flyout footer:\n<img width=\"543\" alt=\"Screenshot 2025-07-09 at 11 21 22 AM\"\nsrc=\"https://github.com/user-attachments/assets/5d3553c0-a42f-4cd1-ac4d-f2465e2a669a\"\n/>\n\n---------\n\nCo-authored-by: kibanamachine <42973632+kibanamachine@users.noreply.github.com>","sha":"092c22d036da68bf85644650e82aa68a37a757ff","branchLabelMapping":{"^v9.2.0$":"main","^v(\\d+).(\\d+).\\d+$":"$1.$2"}},"sourcePullRequest":{"labels":["Feature:Dashboard","release_note:fix","Team:Presentation","loe:small","impact:medium","Project:Controls","backport:version","v9.1.0","v8.19.0","v9.2.0"],"title":"[Controls] Fix disabled range slider tooltip, clean up delete control button","number":227295,"url":"https://github.com/elastic/kibana/pull/227295","mergeCommit":{"message":"[Controls] Fix disabled range slider tooltip, clean up delete control button (#227295)\n\n## Summary\n\n### Fix tooltip for disabled range slider\n\nWhen selecting a non-numerical field, the range slider was disabled with\nthis tooltip:\n\n<img width=\"400\" alt=\"Screenshot 2025-07-09 at 11 04 46 AM\"\nsrc=\"https://github.com/user-attachments/assets/45ac7d9a-9009-40ed-839d-e5f47a547f75\"\n/>\n\nLooking at the error message code, this was not the intended behavior:\n\n```ts\n/** This shouldn't ever happen - but, adding just in case as a fallback. */\nreturn i18n.translate(\n 'controls.controlGroup.manageControl.dataSource.controlTypeErrorMessage.default',\n {\n defaultMessage: 'Select a compatible control type.',\n }\n);\n```\n\nThis PR fixes this logic so the correct message is displayed:\n<img width=\"320\" alt=\"Screenshot 2025-07-09 at 11 04 14 AM\"\nsrc=\"https://github.com/user-attachments/assets/ea37385c-fdab-48c9-8e52-538411895000\"\n/>\n\n\n### Move delete control button to flyout footer and add confirm dialog\n\nWhen editing a control, a Delete Control button would appear here in the\nflyout body, which is hard to spot if the screen height is small and the\nuser has to scroll down:\n\n<img width=\"507\" alt=\"Screenshot 2025-07-09 at 11 22 23 AM\"\nsrc=\"https://github.com/user-attachments/assets/9f6cb214-41ca-4d6f-87cd-08240aaa73d3\"\n/>\n\nClicking this button would also just immediately delete the control, and\nfailed to display this confirmation modal:\n<img width=\"587\" alt=\"Screenshot 2025-07-09 at 11 21 36 AM\"\nsrc=\"https://github.com/user-attachments/assets/60c73cd0-5336-483d-a655-b868fffde94e\"\n/>\n\nThis PR adds the confirmation modal when trying to delete a control from\nthe edit flyout, and also moves the button to the flyout footer:\n<img width=\"543\" alt=\"Screenshot 2025-07-09 at 11 21 22 AM\"\nsrc=\"https://github.com/user-attachments/assets/5d3553c0-a42f-4cd1-ac4d-f2465e2a669a\"\n/>\n\n---------\n\nCo-authored-by: kibanamachine <42973632+kibanamachine@users.noreply.github.com>","sha":"092c22d036da68bf85644650e82aa68a37a757ff"}},"sourceBranch":"main","suggestedTargetBranches":["9.1","8.19"],"targetPullRequestStates":[{"branch":"9.1","label":"v9.1.0","branchLabelMappingKey":"^v(\\d+).(\\d+).\\d+$","isSourceBranch":false,"state":"NOT_CREATED"},{"branch":"8.19","label":"v8.19.0","branchLabelMappingKey":"^v(\\d+).(\\d+).\\d+$","isSourceBranch":false,"state":"NOT_CREATED"},{"branch":"main","label":"v9.2.0","branchLabelMappingKey":"^v9.2.0$","isSourceBranch":true,"state":"MERGED","url":"https://github.com/elastic/kibana/pull/227295","number":227295,"mergeCommit":{"message":"[Controls] Fix disabled range slider tooltip, clean up delete control button (#227295)\n\n## Summary\n\n### Fix tooltip for disabled range slider\n\nWhen selecting a non-numerical field, the range slider was disabled with\nthis tooltip:\n\n<img width=\"400\" alt=\"Screenshot 2025-07-09 at 11 04 46 AM\"\nsrc=\"https://github.com/user-attachments/assets/45ac7d9a-9009-40ed-839d-e5f47a547f75\"\n/>\n\nLooking at the error message code, this was not the intended behavior:\n\n```ts\n/** This shouldn't ever happen - but, adding just in case as a fallback. */\nreturn i18n.translate(\n 'controls.controlGroup.manageControl.dataSource.controlTypeErrorMessage.default',\n {\n defaultMessage: 'Select a compatible control type.',\n }\n);\n```\n\nThis PR fixes this logic so the correct message is displayed:\n<img width=\"320\" alt=\"Screenshot 2025-07-09 at 11 04 14 AM\"\nsrc=\"https://github.com/user-attachments/assets/ea37385c-fdab-48c9-8e52-538411895000\"\n/>\n\n\n### Move delete control button to flyout footer and add confirm dialog\n\nWhen editing a control, a Delete Control button would appear here in the\nflyout body, which is hard to spot if the screen height is small and the\nuser has to scroll down:\n\n<img width=\"507\" alt=\"Screenshot 2025-07-09 at 11 22 23 AM\"\nsrc=\"https://github.com/user-attachments/assets/9f6cb214-41ca-4d6f-87cd-08240aaa73d3\"\n/>\n\nClicking this button would also just immediately delete the control, and\nfailed to display this confirmation modal:\n<img width=\"587\" alt=\"Screenshot 2025-07-09 at 11 21 36 AM\"\nsrc=\"https://github.com/user-attachments/assets/60c73cd0-5336-483d-a655-b868fffde94e\"\n/>\n\nThis PR adds the confirmation modal when trying to delete a control from\nthe edit flyout, and also moves the button to the flyout footer:\n<img width=\"543\" alt=\"Screenshot 2025-07-09 at 11 21 22 AM\"\nsrc=\"https://github.com/user-attachments/assets/5d3553c0-a42f-4cd1-ac4d-f2465e2a669a\"\n/>\n\n---------\n\nCo-authored-by: kibanamachine <42973632+kibanamachine@users.noreply.github.com>","sha":"092c22d036da68bf85644650e82aa68a37a757ff"}}]}] BACKPORT--> Co-authored-by: Zac Xeper <Zacqary@users.noreply.github.com>
kibanamachine
added a commit
that referenced
this pull request
Jul 10, 2025
…control button (#227295) (#227315) # Backport This will backport the following commits from `main` to `8.19`: - [[Controls] Fix disabled range slider tooltip, clean up delete control button (#227295)](#227295) <!--- Backport version: 9.6.6 --> ### Questions ? Please refer to the [Backport tool documentation](https://github.com/sorenlouv/backport) <!--BACKPORT [{"author":{"name":"Zac Xeper","email":"Zacqary@users.noreply.github.com"},"sourceCommit":{"committedDate":"2025-07-09T19:20:32Z","message":"[Controls] Fix disabled range slider tooltip, clean up delete control button (#227295)\n\n## Summary\n\n### Fix tooltip for disabled range slider\n\nWhen selecting a non-numerical field, the range slider was disabled with\nthis tooltip:\n\n<img width=\"400\" alt=\"Screenshot 2025-07-09 at 11 04 46 AM\"\nsrc=\"https://github.com/user-attachments/assets/45ac7d9a-9009-40ed-839d-e5f47a547f75\"\n/>\n\nLooking at the error message code, this was not the intended behavior:\n\n```ts\n/** This shouldn't ever happen - but, adding just in case as a fallback. */\nreturn i18n.translate(\n 'controls.controlGroup.manageControl.dataSource.controlTypeErrorMessage.default',\n {\n defaultMessage: 'Select a compatible control type.',\n }\n);\n```\n\nThis PR fixes this logic so the correct message is displayed:\n<img width=\"320\" alt=\"Screenshot 2025-07-09 at 11 04 14 AM\"\nsrc=\"https://github.com/user-attachments/assets/ea37385c-fdab-48c9-8e52-538411895000\"\n/>\n\n\n### Move delete control button to flyout footer and add confirm dialog\n\nWhen editing a control, a Delete Control button would appear here in the\nflyout body, which is hard to spot if the screen height is small and the\nuser has to scroll down:\n\n<img width=\"507\" alt=\"Screenshot 2025-07-09 at 11 22 23 AM\"\nsrc=\"https://github.com/user-attachments/assets/9f6cb214-41ca-4d6f-87cd-08240aaa73d3\"\n/>\n\nClicking this button would also just immediately delete the control, and\nfailed to display this confirmation modal:\n<img width=\"587\" alt=\"Screenshot 2025-07-09 at 11 21 36 AM\"\nsrc=\"https://github.com/user-attachments/assets/60c73cd0-5336-483d-a655-b868fffde94e\"\n/>\n\nThis PR adds the confirmation modal when trying to delete a control from\nthe edit flyout, and also moves the button to the flyout footer:\n<img width=\"543\" alt=\"Screenshot 2025-07-09 at 11 21 22 AM\"\nsrc=\"https://github.com/user-attachments/assets/5d3553c0-a42f-4cd1-ac4d-f2465e2a669a\"\n/>\n\n---------\n\nCo-authored-by: kibanamachine <42973632+kibanamachine@users.noreply.github.com>","sha":"092c22d036da68bf85644650e82aa68a37a757ff","branchLabelMapping":{"^v9.2.0$":"main","^v(\\d+).(\\d+).\\d+$":"$1.$2"}},"sourcePullRequest":{"labels":["Feature:Dashboard","release_note:fix","Team:Presentation","loe:small","impact:medium","Project:Controls","backport:version","v9.1.0","v8.19.0","v9.2.0"],"title":"[Controls] Fix disabled range slider tooltip, clean up delete control button","number":227295,"url":"https://github.com/elastic/kibana/pull/227295","mergeCommit":{"message":"[Controls] Fix disabled range slider tooltip, clean up delete control button (#227295)\n\n## Summary\n\n### Fix tooltip for disabled range slider\n\nWhen selecting a non-numerical field, the range slider was disabled with\nthis tooltip:\n\n<img width=\"400\" alt=\"Screenshot 2025-07-09 at 11 04 46 AM\"\nsrc=\"https://github.com/user-attachments/assets/45ac7d9a-9009-40ed-839d-e5f47a547f75\"\n/>\n\nLooking at the error message code, this was not the intended behavior:\n\n```ts\n/** This shouldn't ever happen - but, adding just in case as a fallback. */\nreturn i18n.translate(\n 'controls.controlGroup.manageControl.dataSource.controlTypeErrorMessage.default',\n {\n defaultMessage: 'Select a compatible control type.',\n }\n);\n```\n\nThis PR fixes this logic so the correct message is displayed:\n<img width=\"320\" alt=\"Screenshot 2025-07-09 at 11 04 14 AM\"\nsrc=\"https://github.com/user-attachments/assets/ea37385c-fdab-48c9-8e52-538411895000\"\n/>\n\n\n### Move delete control button to flyout footer and add confirm dialog\n\nWhen editing a control, a Delete Control button would appear here in the\nflyout body, which is hard to spot if the screen height is small and the\nuser has to scroll down:\n\n<img width=\"507\" alt=\"Screenshot 2025-07-09 at 11 22 23 AM\"\nsrc=\"https://github.com/user-attachments/assets/9f6cb214-41ca-4d6f-87cd-08240aaa73d3\"\n/>\n\nClicking this button would also just immediately delete the control, and\nfailed to display this confirmation modal:\n<img width=\"587\" alt=\"Screenshot 2025-07-09 at 11 21 36 AM\"\nsrc=\"https://github.com/user-attachments/assets/60c73cd0-5336-483d-a655-b868fffde94e\"\n/>\n\nThis PR adds the confirmation modal when trying to delete a control from\nthe edit flyout, and also moves the button to the flyout footer:\n<img width=\"543\" alt=\"Screenshot 2025-07-09 at 11 21 22 AM\"\nsrc=\"https://github.com/user-attachments/assets/5d3553c0-a42f-4cd1-ac4d-f2465e2a669a\"\n/>\n\n---------\n\nCo-authored-by: kibanamachine <42973632+kibanamachine@users.noreply.github.com>","sha":"092c22d036da68bf85644650e82aa68a37a757ff"}},"sourceBranch":"main","suggestedTargetBranches":["9.1","8.19"],"targetPullRequestStates":[{"branch":"9.1","label":"v9.1.0","branchLabelMappingKey":"^v(\\d+).(\\d+).\\d+$","isSourceBranch":false,"state":"NOT_CREATED"},{"branch":"8.19","label":"v8.19.0","branchLabelMappingKey":"^v(\\d+).(\\d+).\\d+$","isSourceBranch":false,"state":"NOT_CREATED"},{"branch":"main","label":"v9.2.0","branchLabelMappingKey":"^v9.2.0$","isSourceBranch":true,"state":"MERGED","url":"https://github.com/elastic/kibana/pull/227295","number":227295,"mergeCommit":{"message":"[Controls] Fix disabled range slider tooltip, clean up delete control button (#227295)\n\n## Summary\n\n### Fix tooltip for disabled range slider\n\nWhen selecting a non-numerical field, the range slider was disabled with\nthis tooltip:\n\n<img width=\"400\" alt=\"Screenshot 2025-07-09 at 11 04 46 AM\"\nsrc=\"https://github.com/user-attachments/assets/45ac7d9a-9009-40ed-839d-e5f47a547f75\"\n/>\n\nLooking at the error message code, this was not the intended behavior:\n\n```ts\n/** This shouldn't ever happen - but, adding just in case as a fallback. */\nreturn i18n.translate(\n 'controls.controlGroup.manageControl.dataSource.controlTypeErrorMessage.default',\n {\n defaultMessage: 'Select a compatible control type.',\n }\n);\n```\n\nThis PR fixes this logic so the correct message is displayed:\n<img width=\"320\" alt=\"Screenshot 2025-07-09 at 11 04 14 AM\"\nsrc=\"https://github.com/user-attachments/assets/ea37385c-fdab-48c9-8e52-538411895000\"\n/>\n\n\n### Move delete control button to flyout footer and add confirm dialog\n\nWhen editing a control, a Delete Control button would appear here in the\nflyout body, which is hard to spot if the screen height is small and the\nuser has to scroll down:\n\n<img width=\"507\" alt=\"Screenshot 2025-07-09 at 11 22 23 AM\"\nsrc=\"https://github.com/user-attachments/assets/9f6cb214-41ca-4d6f-87cd-08240aaa73d3\"\n/>\n\nClicking this button would also just immediately delete the control, and\nfailed to display this confirmation modal:\n<img width=\"587\" alt=\"Screenshot 2025-07-09 at 11 21 36 AM\"\nsrc=\"https://github.com/user-attachments/assets/60c73cd0-5336-483d-a655-b868fffde94e\"\n/>\n\nThis PR adds the confirmation modal when trying to delete a control from\nthe edit flyout, and also moves the button to the flyout footer:\n<img width=\"543\" alt=\"Screenshot 2025-07-09 at 11 21 22 AM\"\nsrc=\"https://github.com/user-attachments/assets/5d3553c0-a42f-4cd1-ac4d-f2465e2a669a\"\n/>\n\n---------\n\nCo-authored-by: kibanamachine <42973632+kibanamachine@users.noreply.github.com>","sha":"092c22d036da68bf85644650e82aa68a37a757ff"}}]}] BACKPORT--> Co-authored-by: Zac Xeper <Zacqary@users.noreply.github.com>
kertal
pushed a commit
to kertal/kibana
that referenced
this pull request
Jul 25, 2025
… button (elastic#227295) ## Summary ### Fix tooltip for disabled range slider When selecting a non-numerical field, the range slider was disabled with this tooltip: <img width="400" alt="Screenshot 2025-07-09 at 11 04 46 AM" src="https://github.com/user-attachments/assets/45ac7d9a-9009-40ed-839d-e5f47a547f75" /> Looking at the error message code, this was not the intended behavior: ```ts /** This shouldn't ever happen - but, adding just in case as a fallback. */ return i18n.translate( 'controls.controlGroup.manageControl.dataSource.controlTypeErrorMessage.default', { defaultMessage: 'Select a compatible control type.', } ); ``` This PR fixes this logic so the correct message is displayed: <img width="320" alt="Screenshot 2025-07-09 at 11 04 14 AM" src="https://github.com/user-attachments/assets/ea37385c-fdab-48c9-8e52-538411895000" /> ### Move delete control button to flyout footer and add confirm dialog When editing a control, a Delete Control button would appear here in the flyout body, which is hard to spot if the screen height is small and the user has to scroll down: <img width="507" alt="Screenshot 2025-07-09 at 11 22 23 AM" src="https://github.com/user-attachments/assets/9f6cb214-41ca-4d6f-87cd-08240aaa73d3" /> Clicking this button would also just immediately delete the control, and failed to display this confirmation modal: <img width="587" alt="Screenshot 2025-07-09 at 11 21 36 AM" src="https://github.com/user-attachments/assets/60c73cd0-5336-483d-a655-b868fffde94e" /> This PR adds the confirmation modal when trying to delete a control from the edit flyout, and also moves the button to the flyout footer: <img width="543" alt="Screenshot 2025-07-09 at 11 21 22 AM" src="https://github.com/user-attachments/assets/5d3553c0-a42f-4cd1-ac4d-f2465e2a669a" /> --------- Co-authored-by: kibanamachine <42973632+kibanamachine@users.noreply.github.com>
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
4 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
Fix tooltip for disabled range slider
When selecting a non-numerical field, the range slider was disabled with this tooltip:
Looking at the error message code, this was not the intended behavior:
This PR fixes this logic so the correct message is displayed:
Move delete control button to flyout footer and add confirm dialog
When editing a control, a Delete Control button would appear here in the flyout body, which is hard to spot if the screen height is small and the user has to scroll down:
Clicking this button would also just immediately delete the control, and failed to display this confirmation modal:
This PR adds the confirmation modal when trying to delete a control from the edit flyout, and also moves the button to the flyout footer:
