[Workspace] Address UI issues of index patterns

changelogs/fragments/8287.yml

@@ -0,0 +1,2 @@
+fix:
+- Address UI issues of index patterns ([#8287](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/8287))

src/plugins/data_source_management/public/components/data_source_column/data_source_column.test.tsx

@@ -4,7 +4,7 @@
  */
 
 import { mount } from 'enzyme';
-import { EuiBadge, EuiLink } from '@elastic/eui';
+import { EuiBadge, EuiButtonEmpty } from '@elastic/eui';
 import { DataSourceColumn } from './data_source_column';
 import { DataSourceTableItem } from '../../types';
 import * as utils from '../utils';
@@ -42,8 +42,8 @@ describe('DataSourceColumn', () => {
     const navigateToAppMock = jest.fn();
     spyOn(utils, 'getApplication').and.returnValue({ navigateToApp: navigateToAppMock });
     const wrapper = mount(<>{dataSourceColumn.euiColumn.render('1')}</>);
-    expect(wrapper.find(EuiLink).text()).toBe('DataSource 1');
-    wrapper.find(EuiLink).simulate('click');
+    expect(wrapper.find(EuiButtonEmpty).text()).toBe('DataSource 1');
+    wrapper.find(EuiButtonEmpty).simulate('click');
 
     expect(navigateToAppMock).toHaveBeenCalledWith('management', {
       path: `opensearch-dashboards/${DSM_APP_ID}/1`,

src/plugins/data_source_management/public/components/data_source_column/data_source_column.tsx

@@ -5,7 +5,7 @@
 
 import { i18n } from '@osd/i18n';
 import { SavedObjectsStart } from 'opensearch-dashboards/public';
-import { EuiBadge, EuiLink } from '@elastic/eui';
+import { EuiBadge, EuiButtonEmpty, EuiLink } from '@elastic/eui';
 import React from 'react';
 import { IndexPatternTableColumn } from '../../../../index_pattern_management/public';
 import { getApplication, getDataSources } from '../utils';
@@ -38,15 +38,17 @@ export class DataSourceColumn implements IndexPatternTableColumn<DataSourceMap>
       const { title, id } = dataSource;
 
       return (
-        <EuiLink
+        <EuiButtonEmpty
+          flush="left"
+          size="xs"
           onClick={() =>
             getApplication().navigateToApp('management', {
               path: `opensearch-dashboards/${DSM_APP_ID}/${encodeURIComponent(id)}`,
             })
           }
         >
           {title}
-        </EuiLink>
+        </EuiButtonEmpty>
       );
     },
   };

src/plugins/index_pattern_management/public/components/edit_index_pattern/scripted_fields_table/components/header/header.tsx

@@ -66,6 +66,7 @@ export const Header = withRouter(({ indexPatternId, history }: HeaderProps) => (
 
     <EuiFlexItem grow={false}>
       <EuiSmallButton
+        iconType="plusInCircle"
         data-test-subj="addScriptedFieldLink"
         {...reactRouterNavigate(history, `patterns/${indexPatternId}/create-field/`)}
       >

src/plugins/index_pattern_management/public/components/edit_index_pattern/source_filters_table/components/add_filter/add_filter.tsx

@@ -55,7 +55,7 @@ export const AddFilter = ({ onAddFilter }: AddFilterProps) => {
   }, [filter, onAddFilter]);
 
   return (
-    <EuiFlexGroup>
+    <EuiFlexGroup gutterSize="s">
       <EuiFlexItem grow={10}>
         <EuiCompressedFieldText
           fullWidth

src/plugins/index_pattern_management/public/components/edit_index_pattern/tabs/tabs.tsx

@@ -183,7 +183,7 @@ export function Tabs({ indexPattern, saveIndexPattern, fields, history, location
           return (
             <>
               {useUpdatedUX && <EuiSpacer size="m" />}
-              <Wrapper>
+              <Wrapper paddingSize="m">
                 <EuiSpacer size="m" />
                 {getFilterSection(type)}
                 <EuiSpacer size="m" />
@@ -207,7 +207,7 @@ export function Tabs({ indexPattern, saveIndexPattern, fields, history, location
           return (
             <>
               {useUpdatedUX && <EuiSpacer size="m" />}
-              <Wrapper>
+              <Wrapper paddingSize="m">
                 <EuiSpacer size="m" />
                 {getFilterSection(type)}
                 <EuiSpacer size="m" />
@@ -231,7 +231,7 @@ export function Tabs({ indexPattern, saveIndexPattern, fields, history, location
           return (
             <>
               {useUpdatedUX && <EuiSpacer size="m" />}
-              <Wrapper>
+              <Wrapper paddingSize="m">
                 <EuiSpacer size="m" />
                 {getFilterSection(type)}
                 <EuiSpacer size="m" />

src/plugins/index_pattern_management/public/components/index_pattern_table/index_pattern_table.tsx

@@ -30,14 +30,14 @@
 
 import {
   EuiBadge,
-  EuiButtonEmpty,
   EuiFlexGroup,
   EuiFlexItem,
   EuiInMemoryTable,
   EuiSpacer,
   EuiText,
   EuiBadgeGroup,
   EuiPageContent,
+  EuiLink,
 } from '@elastic/eui';
 import { FormattedMessage } from '@osd/i18n/react';
 import { withRouter, RouteComponentProps } from 'react-router-dom';
@@ -199,9 +199,7 @@ export const IndexPatternTable = ({ canSave, history }: Props) => {
         }
       ) => (
         <>
-          <EuiButtonEmpty size="xs" {...reactRouterNavigate(history, `patterns/${index.id}`)}>
-            {name}
-          </EuiButtonEmpty>
+          <EuiLink {...reactRouterNavigate(history, `patterns/${index.id}`)}>{name}</EuiLink>
           &emsp;
           <EuiBadgeGroup gutterSize="s">
             {index.tags &&
@@ -309,7 +307,12 @@ export const IndexPatternTable = ({ canSave, history }: Props) => {
 
   return (
     <>
-      <EuiPageContent data-test-subj="indexPatternTable" role="region" aria-label={ariaRegion}>
+      <EuiPageContent
+        data-test-subj="indexPatternTable"
+        role="region"
+        aria-label={ariaRegion}
+        paddingSize="m"
+      >
         <EuiFlexGroup justifyContent="spaceBetween">
           {pageTitleAndDescription}
           {createButton}