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.

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

Fix flyout of the inventory tab of the FIM module the bottom of the dropdown shows a different grey than the background #6868

Conversation

chantal-kelm
Copy link
Member

@chantal-kelm chantal-kelm commented Jul 24, 2024

Description

This PR fixes the grey background in the following pop-up windows:

File integrity monitoring > Inventory > In the flyout that opens when clicking on a file in the table.

PCI DSS > Controls > In the flyout that opens when you click on a requirement in the table.

MITRE ATT&CK > Framework > In the flyout that opens when clicking on a technique in the table.

Issues Resolved

#6867

Evidence

image image image

Test

  • Go to File Integrity Monitoring module > Inventory > At the bottom of the flyout that opens when you click on a file in the table, check that there is no grey background.

  • PCI DSS > Controls > At the bottom of the flyout that opens when you click on a requirement in the table, check that there is no grey background.

  • Mitre > Framework > At the bottom of the flyout that opens when you click on a technique in the table, check that there is no grey background.

Check List

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

…ropdown shows a different grey than the background
@chantal-kelm chantal-kelm self-assigned this Jul 24, 2024
Copy link
Contributor

@lucianogorza lucianogorza left a comment

Choose a reason for hiding this comment

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

The grey background at the bottom appears everywhere where the component is used. For example Mitre Att&act -> Framewrok -> Techniques
image

I suggest change the file plugins/main/public/components/common/wazuh-discover/wz-flyout-discover.tsx and delete the props grow and fullHeight from EuiPageTemplate.

chantal-kelm and others added 6 commits July 25, 2024 07:43
@Desvelao
Copy link
Member

Desvelao commented Jul 26, 2024

I reviewed the last changes using a EuiFlexItem and compare the render on 4.8.x with the provided on this pull requests. They are different, on this pull requests, the table has not margin/padding to the flyout border.

4.8.x:
image

The provided solution:
image

Notes:

  • The usage of EuiFlexItem implicates this should be wrapped by a EuiFlexGroup or EuiGrid component.

Wrapping the EuiFlexItem with EuiFlexGroup does not solve the problem related to the margin. Reviewing the render on 4.8.x, the EuiFlexGroup uses a custom class that provides of the margins: https://github.com/wazuh/wazuh-dashboard-plugins/blob/v4.8.0-2.10.0/plugins/main/public/components/overview/mitre/components/techniques/components/flyout-technique/flyout-technique.tsx#L329

I will add the fix in a commit d0a4c1b.

Desvelao added 2 commits July 26, 2024 10:13
…o bug/6867-flyout-of-the-inventory-tab-of-the-fim-module-the-bottom-of-the-dropdown-shows-a-different-grey-than-the-background
Copy link
Contributor

Wazuh Core plugin code coverage (Jest) test % values
Statements 45.96% ( 399 / 868 )
Branches 41.97% ( 157 / 374 )
Functions 44.01% ( 136 / 309 )
Lines 46.16% ( 397 / 860 )

Copy link
Contributor

Wazuh Check Updates plugin code coverage (Jest) test % values
Statements 76.44% ( 172 / 225 )
Branches 58.65% ( 61 / 104 )
Functions 61.7% ( 29 / 47 )
Lines 76.44% ( 172 / 225 )

Copy link
Contributor

Main plugin code coverage (Jest) test % values
Statements 13.63% ( 3989 / 29246 )
Branches 9.1% ( 1744 / 19157 )
Functions 13.36% ( 943 / 7057 )
Lines 13.82% ( 3886 / 28110 )

Copy link
Member

@Desvelao Desvelao left a comment

Choose a reason for hiding this comment

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

LGTM!

Copy link
Contributor

@lucianogorza lucianogorza left a comment

Choose a reason for hiding this comment

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

CR 🟢

Test 🟢

image

@lucianogorza lucianogorza merged commit ff2f611 into 4.9.0 Jul 26, 2024
5 checks passed
@lucianogorza lucianogorza deleted the bug/6867-flyout-of-the-inventory-tab-of-the-fim-module-the-bottom-of-the-dropdown-shows-a-different-grey-than-the-background branch July 26, 2024 14:12
@asteriscos asteriscos changed the title Fix flyout of the inventory tab of the fim module the bottom of the dropdown shows a different grey than the background Fix flyout of the inventory tab of the FIM module the bottom of the dropdown shows a different grey than the background Aug 5, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
3 participants