Dashboard Listing Page Papercuts #198728
Comments
timductive
added
needs design
Team:SharedUX
|
Pinging @elastic/appex-sharedux (Team:SharedUX) |
|
Did a little spelunking... It looks like the tags are being set to white, here, and applied when the assets are imported for a given integration: Passing the color Suggesed fix for papercuts Pass no color value and use the |
|
Regarding actions, EuiTable guidelines are to show up to two primary actions alongside an overflow menu. 
If we're able to add Edit and Delete, those could be the primary actions. Suggested fix for papercuts For papercut purposes, adding primary actions might be beyond the scope of what we want to tackle as that gets into RBAC considerations and might also lead to changing the dashboard title to open in the 'view' state (it appears to open in edit mode today which is a bit odd in light of this change). One quick improvement could be to change the icon. 
|
## Summary This PR fixes [Annotation groups Listing Page Papercuts](#198731) and [Dashboard Listing Page Papercuts](#198728) issues. 1. Changed the name of the first column 2. Fixed edit icon being invisible while editing functionality is available. In the past the logic was different - hiding of icon was happening based on `isEditable(item)` property, and in the [[Managed content] readonly in library views](https://github.com/elastic/kibana/pull/176263/files#diff-e442682471f1021a9126ddcad7e00a0d334e57ac8db512c1c3268e14ecac0074L552) PR the logic was changed to depend on adding a key `{ edit: { enabled: false }` if there is a need to hide the Edit button. What happened is that the logic should be -> If you don't want to show the Edit icon, add `{ edit: { enabled: false }`, but in the current code, although there is no such key, the pencil stays invisible, because the `Boolean(tableItemsRowActions[item.id]?.edit?.enabled)` resolved to `false` when it is `undefined` (when the Edit functionality isn't disabled.) In this PR I propose an adjustment to this line of code. 3. Changed the View Details icon. 4. Show Reload page toast when a user changes preferred `savedObjects:perPage` in Advanced Settings. 5. Fix sorting algorithm that was sorting incorrectly if the preferred `savedObjects:perPage` was less than 10. <img width="237" alt="Screenshot 2025-01-09 at 13 44 39" src="https://github.com/user-attachments/assets/77a6fd45-8845-4b06-818c-0af0dc01ede9" /> <img width="243" alt="Screenshot 2025-01-09 at 13 43 30" src="https://github.com/user-attachments/assets/3d9e03da-94dd-4e31-b33a-eb81e71b69dd" />
## Summary This PR fixes [Annotation groups Listing Page Papercuts](elastic#198731) and [Dashboard Listing Page Papercuts](elastic#198728) issues. 1. Changed the name of the first column 2. Fixed edit icon being invisible while editing functionality is available. In the past the logic was different - hiding of icon was happening based on `isEditable(item)` property, and in the [[Managed content] readonly in library views](https://github.com/elastic/kibana/pull/176263/files#diff-e442682471f1021a9126ddcad7e00a0d334e57ac8db512c1c3268e14ecac0074L552) PR the logic was changed to depend on adding a key `{ edit: { enabled: false }` if there is a need to hide the Edit button. What happened is that the logic should be -> If you don't want to show the Edit icon, add `{ edit: { enabled: false }`, but in the current code, although there is no such key, the pencil stays invisible, because the `Boolean(tableItemsRowActions[item.id]?.edit?.enabled)` resolved to `false` when it is `undefined` (when the Edit functionality isn't disabled.) In this PR I propose an adjustment to this line of code. 3. Changed the View Details icon. 4. Show Reload page toast when a user changes preferred `savedObjects:perPage` in Advanced Settings. 5. Fix sorting algorithm that was sorting incorrectly if the preferred `savedObjects:perPage` was less than 10. <img width="237" alt="Screenshot 2025-01-09 at 13 44 39" src="https://github.com/user-attachments/assets/77a6fd45-8845-4b06-818c-0af0dc01ede9" /> <img width="243" alt="Screenshot 2025-01-09 at 13 43 30" src="https://github.com/user-attachments/assets/3d9e03da-94dd-4e31-b33a-eb81e71b69dd" /> (cherry picked from commit 86e8a2f)
# Backport This will backport the following commits from `main` to `8.x`: - [[VisLibrary] AnnotGroup listing page papercuts (#205914)](#205914) <!--- Backport version: 9.4.3 --> ### Questions ? Please refer to the [Backport tool documentation](https://github.com/sqren/backport) <!--BACKPORT [{"author":{"name":"Paulina Shakirova","email":"[email protected]"},"sourceCommit":{"committedDate":"2025-01-10T13:38:00Z","message":"[VisLibrary] AnnotGroup listing page papercuts (#205914)\n\n## Summary\nThis PR fixes [Annotation groups Listing Page\nPapercuts](#198731) and\n[Dashboard Listing Page\nPapercuts](#198728) issues.\n\n1. Changed the name of the first column\n2. Fixed edit icon being invisible while editing functionality is\navailable.\nIn the past the logic was different - hiding of icon was happening based\non `isEditable(item)` property, and in the [[Managed content] readonly\nin library\nviews](https://github.com/elastic/kibana/pull/176263/files#diff-e442682471f1021a9126ddcad7e00a0d334e57ac8db512c1c3268e14ecac0074L552)\nPR the logic was changed to depend on adding a key `{ edit: { enabled:\nfalse }` if there is a need to hide the Edit button. What happened is\nthat the logic should be -> If you don't want to show the Edit icon, add\n`{ edit: { enabled: false }`, but in the current code, although there is\nno such key, the pencil stays invisible, because the\n`Boolean(tableItemsRowActions[item.id]?.edit?.enabled)` resolved to\n`false` when it is `undefined` (when the Edit functionality isn't\ndisabled.) In this PR I propose an adjustment to this line of code.\n3. Changed the View Details icon.\n4. Show Reload page toast when a user changes preferred\n`savedObjects:perPage` in Advanced Settings.\n5. Fix sorting algorithm that was sorting incorrectly if the preferred\n`savedObjects:perPage` was less than 10.\n\n<img width=\"237\" alt=\"Screenshot 2025-01-09 at 13 44 39\"\nsrc=\"https://github.com/user-attachments/assets/77a6fd45-8845-4b06-818c-0af0dc01ede9\"\n/>\n\n<img width=\"243\" alt=\"Screenshot 2025-01-09 at 13 43 30\"\nsrc=\"https://github.com/user-attachments/assets/3d9e03da-94dd-4e31-b33a-eb81e71b69dd\"\n/>","sha":"86e8a2fceeb24c83f52d421c18600811ac028ef4","branchLabelMapping":{"^v9.0.0$":"main","^v8.18.0$":"8.x","^v(\\d+).(\\d+).\\d+$":"$1.$2"}},"sourcePullRequest":{"labels":["release_note:fix","v9.0.0","Team:SharedUX","backport:prev-minor","papercut"],"title":"[VisLibrary] AnnotGroup listing page papercuts","number":205914,"url":"https://github.com/elastic/kibana/pull/205914","mergeCommit":{"message":"[VisLibrary] AnnotGroup listing page papercuts (#205914)\n\n## Summary\nThis PR fixes [Annotation groups Listing Page\nPapercuts](#198731) and\n[Dashboard Listing Page\nPapercuts](#198728) issues.\n\n1. Changed the name of the first column\n2. Fixed edit icon being invisible while editing functionality is\navailable.\nIn the past the logic was different - hiding of icon was happening based\non `isEditable(item)` property, and in the [[Managed content] readonly\nin library\nviews](https://github.com/elastic/kibana/pull/176263/files#diff-e442682471f1021a9126ddcad7e00a0d334e57ac8db512c1c3268e14ecac0074L552)\nPR the logic was changed to depend on adding a key `{ edit: { enabled:\nfalse }` if there is a need to hide the Edit button. What happened is\nthat the logic should be -> If you don't want to show the Edit icon, add\n`{ edit: { enabled: false }`, but in the current code, although there is\nno such key, the pencil stays invisible, because the\n`Boolean(tableItemsRowActions[item.id]?.edit?.enabled)` resolved to\n`false` when it is `undefined` (when the Edit functionality isn't\ndisabled.) In this PR I propose an adjustment to this line of code.\n3. Changed the View Details icon.\n4. Show Reload page toast when a user changes preferred\n`savedObjects:perPage` in Advanced Settings.\n5. Fix sorting algorithm that was sorting incorrectly if the preferred\n`savedObjects:perPage` was less than 10.\n\n<img width=\"237\" alt=\"Screenshot 2025-01-09 at 13 44 39\"\nsrc=\"https://github.com/user-attachments/assets/77a6fd45-8845-4b06-818c-0af0dc01ede9\"\n/>\n\n<img width=\"243\" alt=\"Screenshot 2025-01-09 at 13 43 30\"\nsrc=\"https://github.com/user-attachments/assets/3d9e03da-94dd-4e31-b33a-eb81e71b69dd\"\n/>","sha":"86e8a2fceeb24c83f52d421c18600811ac028ef4"}},"sourceBranch":"main","suggestedTargetBranches":[],"targetPullRequestStates":[{"branch":"main","label":"v9.0.0","branchLabelMappingKey":"^v9.0.0$","isSourceBranch":true,"state":"MERGED","url":"https://github.com/elastic/kibana/pull/205914","number":205914,"mergeCommit":{"message":"[VisLibrary] AnnotGroup listing page papercuts (#205914)\n\n## Summary\nThis PR fixes [Annotation groups Listing Page\nPapercuts](#198731) and\n[Dashboard Listing Page\nPapercuts](#198728) issues.\n\n1. Changed the name of the first column\n2. Fixed edit icon being invisible while editing functionality is\navailable.\nIn the past the logic was different - hiding of icon was happening based\non `isEditable(item)` property, and in the [[Managed content] readonly\nin library\nviews](https://github.com/elastic/kibana/pull/176263/files#diff-e442682471f1021a9126ddcad7e00a0d334e57ac8db512c1c3268e14ecac0074L552)\nPR the logic was changed to depend on adding a key `{ edit: { enabled:\nfalse }` if there is a need to hide the Edit button. What happened is\nthat the logic should be -> If you don't want to show the Edit icon, add\n`{ edit: { enabled: false }`, but in the current code, although there is\nno such key, the pencil stays invisible, because the\n`Boolean(tableItemsRowActions[item.id]?.edit?.enabled)` resolved to\n`false` when it is `undefined` (when the Edit functionality isn't\ndisabled.) In this PR I propose an adjustment to this line of code.\n3. Changed the View Details icon.\n4. Show Reload page toast when a user changes preferred\n`savedObjects:perPage` in Advanced Settings.\n5. Fix sorting algorithm that was sorting incorrectly if the preferred\n`savedObjects:perPage` was less than 10.\n\n<img width=\"237\" alt=\"Screenshot 2025-01-09 at 13 44 39\"\nsrc=\"https://github.com/user-attachments/assets/77a6fd45-8845-4b06-818c-0af0dc01ede9\"\n/>\n\n<img width=\"243\" alt=\"Screenshot 2025-01-09 at 13 43 30\"\nsrc=\"https://github.com/user-attachments/assets/3d9e03da-94dd-4e31-b33a-eb81e71b69dd\"\n/>","sha":"86e8a2fceeb24c83f52d421c18600811ac028ef4"}}]}] BACKPORT--> Co-authored-by: Paulina Shakirova <[email protected]>
## Summary This PR fixes [Annotation groups Listing Page Papercuts](elastic#198731) and [Dashboard Listing Page Papercuts](elastic#198728) issues. 1. Changed the name of the first column 2. Fixed edit icon being invisible while editing functionality is available. In the past the logic was different - hiding of icon was happening based on `isEditable(item)` property, and in the [[Managed content] readonly in library views](https://github.com/elastic/kibana/pull/176263/files#diff-e442682471f1021a9126ddcad7e00a0d334e57ac8db512c1c3268e14ecac0074L552) PR the logic was changed to depend on adding a key `{ edit: { enabled: false }` if there is a need to hide the Edit button. What happened is that the logic should be -> If you don't want to show the Edit icon, add `{ edit: { enabled: false }`, but in the current code, although there is no such key, the pencil stays invisible, because the `Boolean(tableItemsRowActions[item.id]?.edit?.enabled)` resolved to `false` when it is `undefined` (when the Edit functionality isn't disabled.) In this PR I propose an adjustment to this line of code. 3. Changed the View Details icon. 4. Show Reload page toast when a user changes preferred `savedObjects:perPage` in Advanced Settings. 5. Fix sorting algorithm that was sorting incorrectly if the preferred `savedObjects:perPage` was less than 10. <img width="237" alt="Screenshot 2025-01-09 at 13 44 39" src="https://github.com/user-attachments/assets/77a6fd45-8845-4b06-818c-0af0dc01ede9" /> <img width="243" alt="Screenshot 2025-01-09 at 13 43 30" src="https://github.com/user-attachments/assets/3d9e03da-94dd-4e31-b33a-eb81e71b69dd" />
While investigating this issue further, I found that it was part of a now-closed issue back in 2023, which mentions "white background for a managed label" as an opportunity to improve. Since you have more context on this, could you please share if this behavior is still expected and whether we should change something or leave it as is. Thank you in advance. |
This is expected for now, we don't have any kind of task tracked to alter the color of this tag. I can file an issue on our end to track this and you can leave it off your list, I think. |
Amazing, @kpollich! 🙏🏻 |
Standardize the name column to just be labeled "Name". If the name includes the description and tags we don't need to clarify that in the column name.
Can we remove tag color combinations that are difficult to see in light or dark mode? Basically remove all whites and blacks.
Can we select a less overloaded icon for a "View details" action?
How hard would it be to add an edit and delete action here too?
Do we agree that actions should be icons or should they be words?
Suggested papercut fixes
(added by @ryankeairns)
defaultEuiBadge color (i.e. nocolorprop setting) for 'Managed' tagsiInCircleicon tocontrolsVerticalThe text was updated successfully, but these errors were encountered: