Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[Multiple Datasource] Fix style of data source option inside popover for data source selector, selectable, multi select components #6438

Merged
merged 7 commits into from
Apr 16, 2024
Merged

[Multiple Datasource] Fix style of data source option inside popover for data source selector, selectable, multi select components #6438

merged 7 commits into from
Apr 16, 2024

Conversation

BionIT
Copy link
Collaborator

@BionIT BionIT commented Apr 13, 2024

Description

This change fixes the style of data source selector/selectable/multi selectable components to hide the test overflow to address the long data source name problem

Issues Resolved

Fixes #6430

Screenshot

Testing the changes

UI should show default icon and truncate the long data source name

  1. data source selector
    Screenshot from 2024-04-12 21-15-00
  2. data source selectable
    Screenshot from 2024-04-12 21-13-57
  3. multi selectable
    Screenshot from 2024-04-12 21-53-34

Function

  1. active option provided with empty id string, while hide local cluster
    data source selector
    defaultOption={[{id: ''}]}
    Screenshot from 2024-04-12 21-55-35

data source selectable
activeOption: [{id: ''}],
Screenshot from 2024-04-12 21-56-57

  1. has default data source
    data source selector
    Screenshot from 2024-04-12 21-15-00

data source selectable
Screenshot from 2024-04-12 21-14-48

  1. empty array passed to data source selector should show placeholder text
    Screenshot from 2024-04-12 21-59-41

  2. invalid data source id passed in
    data source selector
    defaultOption={[{id: 'badid'}]}
    Screenshot from 2024-04-12 22-00-53

data source selectable
activeOption: [{id: 'invalid'}],
Screenshot from 2024-04-12 22-01-47

  1. empty string as id and hide local cluster is set to false, should show local cluster
    data source selector
    defaultOption={[{id: ''}]}
    Screenshot from 2024-04-12 22-03-52

data source selectable
activeOption: [{id: ''}],
Screenshot from 2024-04-12 22-04-39

  1. filter out default data source, hide local cluster is false, should show local cluster
    data source selector
    Screenshot from 2024-04-12 22-07-09

data source selectable
Screenshot from 2024-04-12 22-07-52

  1. pass in valid data source id
    data source selector
    Screenshot from 2024-04-12 22-09-14

data source selectable
Screenshot from 2024-04-12 22-09-50

  1. no available data sources
    data source selector
    Screenshot from 2024-04-12 22-11-46

data source selectable
Screenshot from 2024-04-12 22-11-59

Check List

  • All tests pass
    • yarn test:jest
    • yarn test:jest_integration
  • New functionality includes testing.
  • New functionality has been documented.
  • Update CHANGELOG.md
  • Commits are signed per the DCO using --signoff

zhyuanqi
zhyuanqi reviewed Apr 15, 2024
View reviewed changes
.../data_source_management/public/components/data_source_selectable/data_source_selectable.scss
display: inline-block;
}
}
}
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Should we change the name to _data_source_selectable.cscc as a underscore _ shows this is a internal style file

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We should follow the dev guide Do not use the underscore _ SASS file naming pattern when importing directly into a javascript file. in https://github.com/opensearch-project/OpenSearch-Dashboards/blob/main/DEVELOPER_GUIDE.md#sass-files

zhyuanqi
zhyuanqi reviewed Apr 15, 2024
View reviewed changes
...ource_management/public/components/data_source_multi_selectable/data_source_filter_group.tsx Outdated
@@ -138,7 +139,7 @@ export const DataSourceFilterGroup: React.FC<DataSourceFilterGroupProps> = ({
data-test-subj="dataSourceMultiSelectFieldSearch"
/>
</EuiPopoverTitle>
<div className="ouiFilterSelect__items" style={{ maxHeight: 400, overflow: 'scroll' }}>
<div className="dataSourceFilterGroupItems" style={{}}>
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Should we remove style={{}}

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Good catch!

BionIT added 2 commits April 15, 2024 22:24
@BionIT
remove unused style prop
d1322be 
Signed-off-by: Lu Yu <[email protected]>
@BionIT
fix snapshot
5eecb74 
Signed-off-by: Lu Yu <[email protected]>
@BionIT BionIT merged commit eef417c into opensearch-project:main Apr 16, 2024
67 checks passed
opensearch-trigger-bot bot pushed a commit that referenced this pull request Apr 16, 2024
@github-actions
[Multiple Datasource] Fix style of data source option inside popover …
a8bcede 
…for data source selector, selectable, multi select components (#6438)

* adjust style

Signed-off-by: Lu Yu <[email protected]>

* fix style for data source components

Signed-off-by: Lu Yu <[email protected]>

* clean up

Signed-off-by: Lu Yu <[email protected]>

* add change log

Signed-off-by: Lu Yu <[email protected]>

* remove unused style prop

Signed-off-by: Lu Yu <[email protected]>

* fix snapshot

Signed-off-by: Lu Yu <[email protected]>

---------

Signed-off-by: Lu Yu <[email protected]>
(cherry picked from commit eef417c)
Signed-off-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>

# Conflicts:
#	CHANGELOG.md
@opensearch-trigger-bot opensearch-trigger-bot bot mentioned this pull request Apr 16, 2024
Merged
@BionIT BionIT mentioned this pull request Apr 16, 2024
Closed
77 tasks
BionIT pushed a commit that referenced this pull request Apr 16, 2024
@opensearch-trigger-bot @github-actions
[Multiple Datasource] Fix style of data source option inside popover …
6f262df 
…for data source selector, selectable, multi select components (#6438) (#6467)

* adjust style

Signed-off-by: Lu Yu <[email protected]>

* fix style for data source components

Signed-off-by: Lu Yu <[email protected]>

* clean up

Signed-off-by: Lu Yu <[email protected]>

* add change log

Signed-off-by: Lu Yu <[email protected]>

* remove unused style prop

Signed-off-by: Lu Yu <[email protected]>

* fix snapshot

Signed-off-by: Lu Yu <[email protected]>

---------

Signed-off-by: Lu Yu <[email protected]>
(cherry picked from commit eef417c)
Signed-off-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>

# Conflicts:
#	CHANGELOG.md

Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
@BionIT BionIT mentioned this pull request Apr 22, 2024
Closed
36 tasks
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@ZilongX ZilongX ZilongX approved these changes

@zhyuanqi zhyuanqi zhyuanqi approved these changes

@zhongnansu zhongnansu zhongnansu approved these changes

@seraphjiang seraphjiang seraphjiang approved these changes

@ananzh ananzh Awaiting requested review from ananzh ananzh is a code owner

@kavilla kavilla Awaiting requested review from kavilla kavilla is a code owner

@AMoo-Miki AMoo-Miki Awaiting requested review from AMoo-Miki AMoo-Miki is a code owner

@ashwin-pc ashwin-pc Awaiting requested review from ashwin-pc ashwin-pc is a code owner

@joshuarrrr joshuarrrr Awaiting requested review from joshuarrrr joshuarrrr is a code owner

@abbyhu2000 abbyhu2000 Awaiting requested review from abbyhu2000 abbyhu2000 is a code owner

@zengyan-amazon zengyan-amazon Awaiting requested review from zengyan-amazon zengyan-amazon is a code owner

@manasvinibs manasvinibs Awaiting requested review from manasvinibs manasvinibs is a code owner

@Flyingliuhub Flyingliuhub Awaiting requested review from Flyingliuhub Flyingliuhub is a code owner

@curq curq Awaiting requested review from curq curq is a code owner

@bandinib-amzn bandinib-amzn Awaiting requested review from bandinib-amzn bandinib-amzn is a code owner

@SuZhou-Joe SuZhou-Joe Awaiting requested review from SuZhou-Joe SuZhou-Joe is a code owner

@ruanyl ruanyl Awaiting requested review from ruanyl ruanyl is a code owner

@xinruiba xinruiba Awaiting requested review from xinruiba xinruiba is a code owner

Assignees
No one assigned
Labels
all-star-contributor backport 2.x multiple datasource multiple datasource project v2.14.0
Projects
None yet
Milestone
No milestone
5 participants
@BionIT @seraphjiang @zhongnansu @zhyuanqi @ZilongX