[8.18] Stack Management Data Views - Fix overlapping action icons on mobile (#229771) (#230805)

# Backport

This will backport the following commits from `main` to `8.18`:
- [Stack Management Data Views - Fix overlapping action icons on mobile
(#229771)](#229771)

<!--- Backport version: 9.6.6 -->

### Questions ?
Please refer to the [Backport tool
documentation](https://github.com/sorenlouv/backport)

<!--BACKPORT [{"author":{"name":"Miłosz
Radzyński","email":"[email protected]"},"sourceCommit":{"committedDate":"2025-08-04T12:22:11Z","message":"Stack
Management Data Views - Fix overlapping action icons on mobile
(#229771)\n\n## Summary\nResolves: #228925 \n\nThis PR addresses a
layout issue where the 'edit' and 'delete' action\nicons would overlap
each other on mobile devices.\n\n### Problem: \nOn mobile, the action
icons were positioned absolutely, which causes\nthem to render on top of
one another. The desktop layout was unaffected\nas it displayed each
action in a separate table column (also the icons\nare not absolutely
positioned on desktop).\n\n### Solution:\nI moved the delete button into
the same column as the edit button and\ngot rid of the extra column.
This makes more sense, as all the actions\nare now in one place. It also
fixes the bug where the icons would\noverlap. I also named the column
`Actions` to help with accessibility,\nsince it didn't have a name
before. Apart from that, I changed the color\nof the delete icon to red,
so it better aligns with other delete action\nicons across the app. I
also needed to adjust some functional test so\nthey can use new table
structure.\n\n### Screenshots:\nDesktop - after:\n<img width=\"1465\"
height=\"308\" alt=\"Zrzut ekranu 2025-07-31 o 10 40
16\"\nsrc=\"https://github.com/user-attachments/assets/f1f16744-8a32-4c3d-8774-7ce2a1f3b701\"\n/>\n\n\nMobile
- after:\n<img width=\"190\" height=\"537\" alt=\"Zrzut ekranu
2025-07-31 o 10 40
48\"\nsrc=\"https://github.com/user-attachments/assets/0d290632-0d92-4e55-8cdd-a52799a4c703\"\n/>\n\n\n###
Checklist\n\nCheck the PR satisfies following conditions. \n\nReviewers
should verify this PR satisfies this list as well.\n\n- [ ] Any text
added follows [EUI's
writing\nguidelines](https://elastic.github.io/eui/#/guidelines/writing),
uses\nsentence case text and includes
[i18n\nsupport](https://github.com/elastic/kibana/blob/main/src/platform/packages/shared/kbn-i18n/README.md)\n-
[
]\n[Documentation](https://www.elastic.co/guide/en/kibana/master/development-documentation.html)\nwas
added for features that require explanation or tutorials\n- [x] [Unit or
functional\ntests](https://www.elastic.co/guide/en/kibana/master/development-tests.html)\nwere
updated or added to match the most common scenarios\n- [ ] If a plugin
configuration key changed, check if it needs to be\nallowlisted in the
cloud and added to the
[docker\nlist](https://github.com/elastic/kibana/blob/main/src/dev/build/tasks/os_packages/docker_generator/resources/base/bin/kibana-docker)\n-
[ ] This was checked for breaking HTTP API changes, and any
breaking\nchanges have been approved by the breaking-change committee.
The\n`release_note:breaking` label should be applied in these
situations.\n- [x] [Flaky
Test\nRunner](https://ci-stats.kibana.dev/trigger_flaky_test_runner/1)
was\nused on any tests changed\n- [ ] The PR description includes the
appropriate Release Notes section,\nand the correct `release_note:*`
label is applied per
the\n[guidelines](https://www.elastic.co/guide/en/kibana/master/contributing.html#kibana-release-notes-process)\n-
[x] Review the
[backport\nguidelines](https://docs.google.com/document/d/1VyN5k91e5OVumlc0Gb9RPa3h1ewuPE705nRtioPiTvY/edit?usp=sharing)\nand
apply applicable `backport:*` labels.\n\n### Identify risks\n\nDoes this
PR introduce any risks? For example, consider risks like hard\nto test
bugs, performance regression, potential of data loss.\n\nDescribe the
risk, its severity, and mitigation for each identified\nrisk. Invite
stakeholders and evaluate how to proceed before merging.\n\n- [ ] [See
some
risk\nexamples](https://github.com/elastic/kibana/blob/main/RISK_MATRIX.mdx)\n-
[ ]
...","sha":"3074613764ec42dfa59a855efc0f1c3c7cb0578f","branchLabelMapping":{"^v9.2.0$":"main","^v(\\d+).(\\d+).\\d+$":"$1.$2"}},"sourcePullRequest":{"labels":["release_note:fix","v9.0.0","Team:DataDiscovery","backport:version","v9.1.0","v9.2.0","v9.0.5","v9.1.1","v8.18.5","v8.19.1"],"title":"Stack
Management Data Views - Fix overlapping action icons on
mobile","number":229771,"url":"https://github.com/elastic/kibana/pull/229771","mergeCommit":{"message":"Stack
Management Data Views - Fix overlapping action icons on mobile
(#229771)\n\n## Summary\nResolves: #228925 \n\nThis PR addresses a
layout issue where the 'edit' and 'delete' action\nicons would overlap
each other on mobile devices.\n\n### Problem: \nOn mobile, the action
icons were positioned absolutely, which causes\nthem to render on top of
one another. The desktop layout was unaffected\nas it displayed each
action in a separate table column (also the icons\nare not absolutely
positioned on desktop).\n\n### Solution:\nI moved the delete button into
the same column as the edit button and\ngot rid of the extra column.
This makes more sense, as all the actions\nare now in one place. It also
fixes the bug where the icons would\noverlap. I also named the column
`Actions` to help with accessibility,\nsince it didn't have a name
before. Apart from that, I changed the color\nof the delete icon to red,
so it better aligns with other delete action\nicons across the app. I
also needed to adjust some functional test so\nthey can use new table
structure.\n\n### Screenshots:\nDesktop - after:\n<img width=\"1465\"
height=\"308\" alt=\"Zrzut ekranu 2025-07-31 o 10 40
16\"\nsrc=\"https://github.com/user-attachments/assets/f1f16744-8a32-4c3d-8774-7ce2a1f3b701\"\n/>\n\n\nMobile
- after:\n<img width=\"190\" height=\"537\" alt=\"Zrzut ekranu
2025-07-31 o 10 40
48\"\nsrc=\"https://github.com/user-attachments/assets/0d290632-0d92-4e55-8cdd-a52799a4c703\"\n/>\n\n\n###
Checklist\n\nCheck the PR satisfies following conditions. \n\nReviewers
should verify this PR satisfies this list as well.\n\n- [ ] Any text
added follows [EUI's
writing\nguidelines](https://elastic.github.io/eui/#/guidelines/writing),
uses\nsentence case text and includes
[i18n\nsupport](https://github.com/elastic/kibana/blob/main/src/platform/packages/shared/kbn-i18n/README.md)\n-
[
]\n[Documentation](https://www.elastic.co/guide/en/kibana/master/development-documentation.html)\nwas
added for features that require explanation or tutorials\n- [x] [Unit or
functional\ntests](https://www.elastic.co/guide/en/kibana/master/development-tests.html)\nwere
updated or added to match the most common scenarios\n- [ ] If a plugin
configuration key changed, check if it needs to be\nallowlisted in the
cloud and added to the
[docker\nlist](https://github.com/elastic/kibana/blob/main/src/dev/build/tasks/os_packages/docker_generator/resources/base/bin/kibana-docker)\n-
[ ] This was checked for breaking HTTP API changes, and any
breaking\nchanges have been approved by the breaking-change committee.
The\n`release_note:breaking` label should be applied in these
situations.\n- [x] [Flaky
Test\nRunner](https://ci-stats.kibana.dev/trigger_flaky_test_runner/1)
was\nused on any tests changed\n- [ ] The PR description includes the
appropriate Release Notes section,\nand the correct `release_note:*`
label is applied per
the\n[guidelines](https://www.elastic.co/guide/en/kibana/master/contributing.html#kibana-release-notes-process)\n-
[x] Review the
[backport\nguidelines](https://docs.google.com/document/d/1VyN5k91e5OVumlc0Gb9RPa3h1ewuPE705nRtioPiTvY/edit?usp=sharing)\nand
apply applicable `backport:*` labels.\n\n### Identify risks\n\nDoes this
PR introduce any risks? For example, consider risks like hard\nto test
bugs, performance regression, potential of data loss.\n\nDescribe the
risk, its severity, and mitigation for each identified\nrisk. Invite
stakeholders and evaluate how to proceed before merging.\n\n- [ ] [See
some
risk\nexamples](https://github.com/elastic/kibana/blob/main/RISK_MATRIX.mdx)\n-
[ ]
...","sha":"3074613764ec42dfa59a855efc0f1c3c7cb0578f"}},"sourceBranch":"main","suggestedTargetBranches":["8.18","8.19"],"targetPullRequestStates":[{"branch":"9.0","label":"v9.0.0","branchLabelMappingKey":"^v(\\d+).(\\d+).\\d+$","isSourceBranch":false,"url":"https://github.com/elastic/kibana/pull/230407","number":230407,"state":"MERGED","mergeCommit":{"sha":"17a36faf7c7f96300949d8457c83ade9e4e351ef","message":"[9.0]
Stack Management Data Views - Fix overlapping action icons on mobile
(#229771) (#230407)\n\n# Backport\n\nThis will backport the following
commits from `main` to `9.0`:\n- [Stack Management Data Views - Fix
overlapping action icons on
mobile\n(#229771)](https://github.com/elastic/kibana/pull/229771)\n\n\n\n###
Questions ?\nPlease refer to the [Backport
tool\ndocumentation](https://github.com/sorenlouv/backport)\n\n\n\nCo-authored-by:
Miłosz Radzyński
<[email protected]>"}},{"branch":"9.1","label":"v9.1.0","branchLabelMappingKey":"^v(\\d+).(\\d+).\\d+$","isSourceBranch":false,"url":"https://github.com/elastic/kibana/pull/230408","number":230408,"state":"MERGED","mergeCommit":{"sha":"64b1b4dac04387bb2ba337897b92c1d5d4ef76f7","message":"[9.1]
Stack Management Data Views - Fix overlapping action icons on mobile
(#229771) (#230408)\n\n# Backport\n\nThis will backport the following
commits from `main` to `9.1`:\n- [Stack Management Data Views - Fix
overlapping action icons on
mobile\n(#229771)](https://github.com/elastic/kibana/pull/229771)\n\n\n\n###
Questions ?\nPlease refer to the [Backport
tool\ndocumentation](https://github.com/sorenlouv/backport)\n\n\n\nCo-authored-by:
Miłosz Radzyński
<[email protected]>"}},{"branch":"main","label":"v9.2.0","branchLabelMappingKey":"^v9.2.0$","isSourceBranch":true,"state":"MERGED","url":"https://github.com/elastic/kibana/pull/229771","number":229771,"mergeCommit":{"message":"Stack
Management Data Views - Fix overlapping action icons on mobile
(#229771)\n\n## Summary\nResolves: #228925 \n\nThis PR addresses a
layout issue where the 'edit' and 'delete' action\nicons would overlap
each other on mobile devices.\n\n### Problem: \nOn mobile, the action
icons were positioned absolutely, which causes\nthem to render on top of
one another. The desktop layout was unaffected\nas it displayed each
action in a separate table column (also the icons\nare not absolutely
positioned on desktop).\n\n### Solution:\nI moved the delete button into
the same column as the edit button and\ngot rid of the extra column.
This makes more sense, as all the actions\nare now in one place. It also
fixes the bug where the icons would\noverlap. I also named the column
`Actions` to help with accessibility,\nsince it didn't have a name
before. Apart from that, I changed the color\nof the delete icon to red,
so it better aligns with other delete action\nicons across the app. I
also needed to adjust some functional test so\nthey can use new table
structure.\n\n### Screenshots:\nDesktop - after:\n<img width=\"1465\"
height=\"308\" alt=\"Zrzut ekranu 2025-07-31 o 10 40
16\"\nsrc=\"https://github.com/user-attachments/assets/f1f16744-8a32-4c3d-8774-7ce2a1f3b701\"\n/>\n\n\nMobile
- after:\n<img width=\"190\" height=\"537\" alt=\"Zrzut ekranu
2025-07-31 o 10 40
48\"\nsrc=\"https://github.com/user-attachments/assets/0d290632-0d92-4e55-8cdd-a52799a4c703\"\n/>\n\n\n###
Checklist\n\nCheck the PR satisfies following conditions. \n\nReviewers
should verify this PR satisfies this list as well.\n\n- [ ] Any text
added follows [EUI's
writing\nguidelines](https://elastic.github.io/eui/#/guidelines/writing),
uses\nsentence case text and includes
[i18n\nsupport](https://github.com/elastic/kibana/blob/main/src/platform/packages/shared/kbn-i18n/README.md)\n-
[
]\n[Documentation](https://www.elastic.co/guide/en/kibana/master/development-documentation.html)\nwas
added for features that require explanation or tutorials\n- [x] [Unit or
functional\ntests](https://www.elastic.co/guide/en/kibana/master/development-tests.html)\nwere
updated or added to match the most common scenarios\n- [ ] If a plugin
configuration key changed, check if it needs to be\nallowlisted in the
cloud and added to the
[docker\nlist](https://github.com/elastic/kibana/blob/main/src/dev/build/tasks/os_packages/docker_generator/resources/base/bin/kibana-docker)\n-
[ ] This was checked for breaking HTTP API changes, and any
breaking\nchanges have been approved by the breaking-change committee.
The\n`release_note:breaking` label should be applied in these
situations.\n- [x] [Flaky
Test\nRunner](https://ci-stats.kibana.dev/trigger_flaky_test_runner/1)
was\nused on any tests changed\n- [ ] The PR description includes the
appropriate Release Notes section,\nand the correct `release_note:*`
label is applied per
the\n[guidelines](https://www.elastic.co/guide/en/kibana/master/contributing.html#kibana-release-notes-process)\n-
[x] Review the
[backport\nguidelines](https://docs.google.com/document/d/1VyN5k91e5OVumlc0Gb9RPa3h1ewuPE705nRtioPiTvY/edit?usp=sharing)\nand
apply applicable `backport:*` labels.\n\n### Identify risks\n\nDoes this
PR introduce any risks? For example, consider risks like hard\nto test
bugs, performance regression, potential of data loss.\n\nDescribe the
risk, its severity, and mitigation for each identified\nrisk. Invite
stakeholders and evaluate how to proceed before merging.\n\n- [ ] [See
some
risk\nexamples](https://github.com/elastic/kibana/blob/main/RISK_MATRIX.mdx)\n-
[ ]
...","sha":"3074613764ec42dfa59a855efc0f1c3c7cb0578f"}},{"branch":"8.18","label":"v8.18.5","branchLabelMappingKey":"^v(\\d+).(\\d+).\\d+$","isSourceBranch":false,"state":"NOT_CREATED"},{"branch":"8.19","label":"v8.19.1","branchLabelMappingKey":"^v(\\d+).(\\d+).\\d+$","isSourceBranch":false,"state":"NOT_CREATED"}]}]
BACKPORT-->

Co-authored-by: Miłosz Radzyński <[email protected]>

Author: kibanamachine

src/platform/plugins/shared/data_view_management/public/components/edit_index_pattern/indexed_fields_table/components/table/__snapshots__/table.test.tsx.snap

@@ -171,7 +171,7 @@ describe('Table', () => {
 
   test('should not allow edit or deletion for user with only read access', () => {
     const editAvailable = renderTable().prop('columns')[6].actions[0].available(items[4]);
-    const deleteAvailable = renderTable().prop('columns')[7].actions[0].available(items[4]);
+    const deleteAvailable = renderTable().prop('columns')[6].actions[1].available(items[4]);
     expect(editAvailable).toBeFalsy();
     expect(deleteAvailable).toBeFalsy();
   });

src/platform/plugins/shared/data_view_management/public/components/edit_index_pattern/indexed_fields_table/components/table/table.test.tsx

@@ -145,6 +145,13 @@ const isExcludedAriaLabel = i18n.translate(
   }
 );
 
+const actionsLabel = i18n.translate(
+  'indexPatternManagement.editIndexPattern.fields.table.actionsLabel',
+  {
+    defaultMessage: 'Actions',
+  }
+);
+
 const editLabel = i18n.translate('indexPatternManagement.editIndexPattern.fields.table.editLabel', {
   defaultMessage: 'Edit',
 });
@@ -477,7 +484,7 @@ class TableClass extends PureComponent<
         render: (value: string) => this.renderBooleanTemplate(value, isExcludedAriaLabel),
       },
       {
-        name: '',
+        name: actionsLabel,
         actions: [
           {
             name: editLabel,
@@ -488,16 +495,11 @@ class TableClass extends PureComponent<
             'data-test-subj': 'editFieldFormat',
             available: (field) => field.isUserEditable,
           },
-        ],
-        width: '40px',
-      },
-      {
-        name: '',
-        actions: [
           {
             name: deleteLabel,
             description: deleteDescription,
             icon: 'trash',
+            color: 'danger',
             onClick: (field) => {
               const toDelete = [field.name];
               if (field.spec?.runtimeField?.fields) {
@@ -513,7 +515,7 @@ class TableClass extends PureComponent<
             available: showDelete,
           },
         ],
-        width: '40px',
+        width: '80px',
       },
     ];
 

src/platform/plugins/shared/data_view_management/public/components/edit_index_pattern/indexed_fields_table/components/table/table.tsx

@@ -135,6 +135,7 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) {
             'Searchable',
             'Aggregatable',
             'Excluded',
+            'Actions',
           ];
 
           expect(headers.length).to.be(expectedHeaders.length);

test/functional/apps/management/data_views/_data_view_create_delete.ts

@@ -399,7 +399,7 @@ export class SettingsPageObject extends FtrService {
 
     await this.find.clickByCssSelector(
       `table.euiTable tbody tr.euiTableRow:nth-child(${tableFields.indexOf(name) + 1})
-        td:nth-last-child(2) button`
+        td:last-child button`
     );
     await this.retry.waitFor('flyout to open', async () => {
       return await this.testSubjects.exists('flyoutTitle');

test/functional/page_objects/settings_page.ts

@@ -49,6 +49,7 @@ export default ({ getService, getPageObjects }) => {
           'Searchable',
           'Aggregatable',
           'Excluded',
+          'Actions',
         ];
 
         expect(headers.length).to.be(expectedHeaders.length);

x-pack/test/stack_functional_integration/apps/management/_index_pattern_create.js

@@ -150,6 +150,7 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) {
             'Searchable',
             'Aggregatable',
             'Excluded',
+            'Actions',
           ];
 
           expect(headers.length).to.be(expectedHeaders.length);