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

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

@@ -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.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/test/functional/apps/management/data_views/_data_view_create_delete.ts

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

src/platform/test/functional/page_objects/settings_page.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');

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

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

x-pack/test_serverless/functional/test_suites/common/management/data_views/_data_view_create_delete.ts

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