Skip to content

Commit

Permalink
[Workspace] Address UI issues of index patterns (#8287) (#9203)
Browse files Browse the repository at this point in the history
* Adjust the panel padding to 16 px



* Make the Pattern column bold, and the Data-source-connection column not bold



* Make the Pattern column bold, and the Data-source-connection column not bold



* Ajust the spacing within the index-pattern panel to 16px



* Add plusInCircle icon to the Add-scripted-field button



* Ajust the space between the search bar and the button to 8px at Source-filters panel



* Changeset file for PR #8287 created/updated

* Update unit tests



* Add useUpdatedUX flag



* Fix useUpdatedUX not passed



* Increase test coverage



---------






(cherry picked from commit 6402d2d)

Signed-off-by: Kapian1234 <[email protected]>
Signed-off-by: Lin Wang <[email protected]>
Signed-off-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
Co-authored-by: opensearch-changeset-bot[bot] <154024398+opensearch-changeset-bot[bot]@users.noreply.github.com>
Co-authored-by: SuZhou-Joe <[email protected]>
Co-authored-by: Lin Wang <[email protected]>
  • Loading branch information
5 people authored Jan 17, 2025
1 parent bc33c0c commit 7ea8bd5
Show file tree
Hide file tree
Showing 18 changed files with 178 additions and 18 deletions.
2 changes: 2 additions & 0 deletions changelogs/fragments/8287.yml
Original file line number Diff line number Diff line change
@@ -0,0 +1,2 @@
fix:
- Address UI issues of index patterns ([#8287](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/8287))
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@ describe('DataSourceColumn', () => {

beforeEach(() => {
savedObjectPromise = Promise.resolve({ client: {} });
dataSourceColumn = new DataSourceColumn(savedObjectPromise);
dataSourceColumn = new DataSourceColumn(savedObjectPromise, false);
});

it('should render null when referenceId is not provided', () => {
Expand Down Expand Up @@ -66,4 +66,17 @@ describe('DataSourceColumn', () => {
)
);
});

it('should render EuiLink with font-weight equal 400 when useUpdatedUX equal true', () => {
dataSourceColumn = new DataSourceColumn(savedObjectPromise, true);
const dataSources = [
{ id: '1', title: 'DataSource 1' },
{ id: '2', title: 'DataSource 2' },
];
dataSourceColumn.data = new Map<string, DataSourceTableItem>(
dataSources.map((dataSource) => [dataSource.id, dataSource])
);
const wrapper = mount(<>{dataSourceColumn.euiColumn.render('1')}</>);
expect(wrapper.find(EuiLink).prop('style')).toEqual({ fontWeight: 'normal' });
});
});
Original file line number Diff line number Diff line change
Expand Up @@ -44,14 +44,18 @@ export class DataSourceColumn implements IndexPatternTableColumn<DataSourceMap>
path: `opensearch-dashboards/${DSM_APP_ID}/${encodeURIComponent(id)}`,
})
}
style={this.useUpdatedUX ? { fontWeight: 'normal' } : {}}
>
{title}
</EuiLink>
);
},
};

constructor(private readonly savedObjectPromise: Promise<SavedObjectsStart>) {}
constructor(
private readonly savedObjectPromise: Promise<SavedObjectsStart>,
private readonly useUpdatedUX: boolean
) {}

public loadData = async () => {
const savedObject = await this.savedObjectPromise;
Expand Down
2 changes: 1 addition & 1 deletion src/plugins/data_source_management/public/plugin.ts
Original file line number Diff line number Diff line change
Expand Up @@ -126,7 +126,7 @@ export class DataSourceManagementPlugin
.getStartServices()
.then(([coreStart]) => coreStart.savedObjects);

const column = new DataSourceColumn(savedObjectPromise);
const column = new DataSourceColumn(savedObjectPromise, uiSettings.get('home:useNewHomePage'));
indexPatternManagement.columns.register(column);

this.featureFlagStatus = !!dataSource;
Expand Down

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

Original file line number Diff line number Diff line change
Expand Up @@ -43,6 +43,21 @@ describe('Header', () => {
history={(scopedHistoryMock.create() as unknown) as ScopedHistory}
location={({} as unknown) as RouteComponentProps['location']}
match={({} as unknown) as RouteComponentProps['match']}
useUpdatedUX
/>
);

expect(component).toMatchSnapshot();
});

test('should match snapshot when useUpdatedUX equal false', () => {
const component = renderWithIntl(
<Header.WrappedComponent
indexPatternId="test"
history={(scopedHistoryMock.create() as unknown) as ScopedHistory}
location={({} as unknown) as RouteComponentProps['location']}
match={({} as unknown) as RouteComponentProps['match']}
useUpdatedUX={false}
/>
);

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -40,9 +40,10 @@ import { reactRouterNavigate } from '../../../../../../../opensearch_dashboards_
interface HeaderProps extends RouteComponentProps {
indexPatternId: string;
history: ScopedHistory;
useUpdatedUX: boolean;
}

export const Header = withRouter(({ indexPatternId, history }: HeaderProps) => (
export const Header = withRouter(({ indexPatternId, history, useUpdatedUX }: HeaderProps) => (
<EuiFlexGroup alignItems="center">
<EuiFlexItem>
<EuiTitle size="s">
Expand All @@ -66,6 +67,7 @@ export const Header = withRouter(({ indexPatternId, history }: HeaderProps) => (

<EuiFlexItem grow={false}>
<EuiSmallButton
{...(useUpdatedUX ? { iconType: 'plusInCircle' } : {})}
data-test-subj="addScriptedFieldLink"
{...reactRouterNavigate(history, `patterns/${indexPatternId}/create-field/`)}
>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -83,6 +83,7 @@ describe('ScriptedFieldsTable', () => {
helpers={helpers}
painlessDocLink={'painlessDoc'}
saveIndexPattern={async () => {}}
useUpdatedUX
/>
);

Expand All @@ -101,6 +102,7 @@ describe('ScriptedFieldsTable', () => {
helpers={helpers}
painlessDocLink={'painlessDoc'}
saveIndexPattern={async () => {}}
useUpdatedUX
/>
);

Expand Down Expand Up @@ -130,6 +132,7 @@ describe('ScriptedFieldsTable', () => {
painlessDocLink={'painlessDoc'}
helpers={helpers}
saveIndexPattern={async () => {}}
useUpdatedUX
/>
);

Expand All @@ -155,6 +158,7 @@ describe('ScriptedFieldsTable', () => {
painlessDocLink={'painlessDoc'}
helpers={helpers}
saveIndexPattern={async () => {}}
useUpdatedUX
/>
);

Expand All @@ -173,6 +177,7 @@ describe('ScriptedFieldsTable', () => {
helpers={helpers}
painlessDocLink={'painlessDoc'}
saveIndexPattern={async () => {}}
useUpdatedUX
/>
);

Expand All @@ -197,6 +202,7 @@ describe('ScriptedFieldsTable', () => {
helpers={helpers}
painlessDocLink={'painlessDoc'}
saveIndexPattern={async () => {}}
useUpdatedUX
/>
);

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -51,6 +51,7 @@ interface ScriptedFieldsTableProps {
onRemoveField?: () => void;
painlessDocLink: string;
saveIndexPattern: DataPublicPluginStart['indexPatterns']['updateSavedObject'];
useUpdatedUX: boolean;
}

interface ScriptedFieldsTableState {
Expand Down Expand Up @@ -148,14 +149,14 @@ export class ScriptedFieldsTable extends Component<
};

render() {
const { indexPattern, painlessDocLink } = this.props;
const { indexPattern, painlessDocLink, useUpdatedUX } = this.props;
const { fieldToDelete, deprecatedLangsInUse } = this.state;

const items = this.getFilteredItems();

return (
<>
<Header indexPatternId={indexPattern.id || ''} />
<Header indexPatternId={indexPattern.id || ''} useUpdatedUX={useUpdatedUX} />

<CallOuts deprecatedLangsInUse={deprecatedLangsInUse} painlessDocLink={painlessDocLink} />

Expand Down

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

Loading

0 comments on commit 7ea8bd5

Please sign in to comment.