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

[Security Solution] Fix positioning of Kibana banners list inside Sec… #80124

Conversation

patrykkopycinski
Copy link
Contributor

@patrykkopycinski patrykkopycinski commented Oct 12, 2020

…urity app

Summary

Fixes #80123

We have discussed possible solutions with @XavierM and @oatkiller and we decided to make Security Header static if banners exist (as the bug is related only to the case when global Kibana banners are present)

image

@patrykkopycinski patrykkopycinski added bug Fixes for quality problems that affect the customer experience Team:SIEM v8.0.0 release_note:skip Skip the PR/issue when compiling release notes v7.10.0 labels Oct 12, 2020
@patrykkopycinski patrykkopycinski requested review from a team as code owners October 12, 2020 09:37
@patrykkopycinski patrykkopycinski self-assigned this Oct 12, 2020
@elasticmachine
Copy link
Contributor

Pinging @elastic/siem (Team:SIEM)

Copy link
Contributor

@oatkiller oatkiller left a comment

Choose a reason for hiding this comment

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

Thanks!

const subPluginId = useRef<string>('');
const { ref, height = 0 } = useThrottledResizeObserver(300);
const banners$ = overlays.banners.get$();
const [headerFixed, setHeaderFixed] = useState<boolean>(true);
const mainPaddingTop = useMemo(() => (headerFixed ? height : 0), [headerFixed, height]);
Copy link
Contributor

Choose a reason for hiding this comment

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

Is there a need for useMemo here?

Copy link
Contributor Author

Choose a reason for hiding this comment

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

I believe so, we don't want that prop being updated without the reason

const mainPaddingTop = useMemo(() => (headerFixed ? height : 0), [headerFixed, height]);

useEffect(() => {
const subscription = banners$.subscribe((banners) => setHeaderFixed(!banners.length));
Copy link
Contributor

Choose a reason for hiding this comment

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

So the logic is "the header is fixed when there are no banners?"

Copy link
Contributor

@XavierM XavierM Oct 12, 2020

Choose a reason for hiding this comment

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

Yes that what we decide in the zoom meeting

Copy link
Contributor

Choose a reason for hiding this comment

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

A little bit more details here, only the banners coming from kibana.

const Wrapper = styled.header`
${({ theme }) => `
const Wrapper = styled.header<{ $isFixed: boolean }>`
${({ theme, $isFixed }) => `
Copy link
Contributor

Choose a reason for hiding this comment

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

It seems like any of the React components could calculate isFixed. Why did you choose to calculate it in HomePageComponent and then pass it to Wrapper via HeaderGlobal as opposed to calculating it in Wrapper directly?

Copy link
Contributor Author

Choose a reason for hiding this comment

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

because we need that information also to determine proper paddingTop that is being passed to Main component (pass 0 if the header is static)

@kibanamachine
Copy link
Contributor

💚 Build Succeeded

Metrics [docs]

async chunks size

id before after diff
securitySolution 10.6MB 10.6MB +701.0B

History

To update your PR or re-run it, just comment with:
@elasticmachine merge upstream

@patrykkopycinski patrykkopycinski merged commit c00fe2e into elastic:master Oct 12, 2020
@patrykkopycinski patrykkopycinski deleted the fix/security-solution-kibana-banners branch October 12, 2020 20:34
patrykkopycinski added a commit to patrykkopycinski/kibana that referenced this pull request Oct 12, 2020
patrykkopycinski added a commit to patrykkopycinski/kibana that referenced this pull request Oct 12, 2020
jloleysens added a commit to jloleysens/kibana that referenced this pull request Oct 13, 2020
…a-tier-migration

* 'master' of github.com:elastic/kibana: (34 commits)
  Line Visualization improper scaling can result in gaps elastic#79663 (elastic#80135)
  [Security Solution][Timeline] Fix SelectableTimeline search (elastic#80128)
  move field_mapping util to saved_objects plugin (elastic#79918)
  [ML] Datagrid: Ensure column content with 'boolean' schema is not capitalized (elastic#80041)
  [CI] Correctly resolve repository root for JUnit reports (elastic#80226)
  [Ingest Manager] Fix package upgrade breaking after first rollover before new data has arrived (elastic#79887)
  [Security Solution] Fix positioning of Kibana banners list inside Sec… (elastic#80124)
  add missing await to fix test (elastic#80202)
  Revert test data changed in previous commit. (elastic#79479)
  [Security Solution] [Sourcerer] Jest beef up (elastic#79907)
  Re-enable transaction duration alert story (elastic#80187)
  [npm] remove canvas dep (elastic#80185)
  [DOCS] Redirects ILM docs to Elasticsearch reference (elastic#79798)
  [APM] Catch health status error from ML (elastic#80131)
  Fix layout and remove title for add alert popover. (elastic#77633)
  [Discover] Loading spinner cleanup (elastic#79819)
  [Security Solution] [Resolver] Remove related events api (elastic#79036)
  [Ingest Manager] Remove fields from index pattern during package uninstall (elastic#80082)
  do not refetch license if signature header absents from a response (elastic#79645)
  Only send agent data for non-opentelemetry agents (elastic#79587)
  ...

# Conflicts:
#	x-pack/plugins/index_lifecycle_management/server/routes/api/nodes/register_list_route.ts
gmmorris added a commit to gmmorris/kibana that referenced this pull request Oct 13, 2020
* upstream/master: (34 commits)
  Improve vis editor typings (elastic#80004)
  Line Visualization improper scaling can result in gaps elastic#79663 (elastic#80135)
  [Security Solution][Timeline] Fix SelectableTimeline search (elastic#80128)
  move field_mapping util to saved_objects plugin (elastic#79918)
  [ML] Datagrid: Ensure column content with 'boolean' schema is not capitalized (elastic#80041)
  [CI] Correctly resolve repository root for JUnit reports (elastic#80226)
  [Ingest Manager] Fix package upgrade breaking after first rollover before new data has arrived (elastic#79887)
  [Security Solution] Fix positioning of Kibana banners list inside Sec… (elastic#80124)
  add missing await to fix test (elastic#80202)
  Revert test data changed in previous commit. (elastic#79479)
  [Security Solution] [Sourcerer] Jest beef up (elastic#79907)
  Re-enable transaction duration alert story (elastic#80187)
  [npm] remove canvas dep (elastic#80185)
  [DOCS] Redirects ILM docs to Elasticsearch reference (elastic#79798)
  [APM] Catch health status error from ML (elastic#80131)
  Fix layout and remove title for add alert popover. (elastic#77633)
  [Discover] Loading spinner cleanup (elastic#79819)
  [Security Solution] [Resolver] Remove related events api (elastic#79036)
  [Ingest Manager] Remove fields from index pattern during package uninstall (elastic#80082)
  do not refetch license if signature header absents from a response (elastic#79645)
  ...
@MindyRS MindyRS added the Team: SecuritySolution Security Solutions Team working on SIEM, Endpoint, Timeline, Resolver, etc. label Sep 22, 2021
@elasticmachine
Copy link
Contributor

Pinging @elastic/security-solution (Team: SecuritySolution)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Fixes for quality problems that affect the customer experience release_note:skip Skip the PR/issue when compiling release notes Team: SecuritySolution Security Solutions Team working on SIEM, Endpoint, Timeline, Resolver, etc. Team:SIEM v7.10.0 v8.0.0
Projects
None yet
Development

Successfully merging this pull request may close these issues.

[Security Solution] Header broken when the "Help us improve the Elastic Stack" banner is displayed
6 participants