Fix Elastic Security Assistant - system prompt tooltip (#160957)

issue: https://github.com/elastic/security-team/issues/6969

## Summary

Because we have multiple popovers inside each other and every popover
adds 2000 z-index to the target, the popover was higher than the default
tooltip z-index. This change fixes it by setting the popover z-index.



### Checklist

Delete any items that are not applicable to this PR.

- [x] Any UI touched in this PR is usable by keyboard only (learn more
about [keyboard accessibility](https://webaim.org/techniques/keyboard/))
- [x] Any UI touched in this PR does not create any new axe failures
(run axe in browser:
[FF](https://addons.mozilla.org/en-US/firefox/addon/axe-devtools/),
[Chrome](https://chrome.google.com/webstore/detail/axe-web-accessibility-tes/lhdoppojpmngadmnindnejefpokejbdd?hl=en-US))
- [x] This renders correctly on smaller devices using a responsive
layout. (You can test this [in your
browser](https://www.browserstack.com/guide/responsive-testing-on-local-server))
- [x] This was checked for [cross-browser
compatibility](https://www.elastic.co/support/matrix#matrix_browsers)

Co-authored-by: Angela Chuang <6295984+angorayc@users.noreply.github.com>
This commit is contained in:
Pablo Machado 2023-06-30 11:49:12 +02:00 committed by GitHub
parent ec620e7fb3
commit 977a8b657b
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23

View file

@ -17,6 +17,7 @@ import {
} from '@elastic/eui'; } from '@elastic/eui';
import React, { useCallback, useMemo, useState } from 'react'; import React, { useCallback, useMemo, useState } from 'react';
import { euiThemeVars } from '@kbn/ui-theme';
import { Conversation } from '../../../../..'; import { Conversation } from '../../../../..';
import { getOptions } from '../helpers'; import { getOptions } from '../helpers';
import * as i18n from '../translations'; import * as i18n from '../translations';
@ -149,6 +150,9 @@ const SelectSystemPromptComponent: React.FC<Props> = ({
`} `}
> >
<EuiSuperSelect <EuiSuperSelect
// Limits popover z-index to prevent it from getting too high and covering tooltips.
// If the z-index is not defined, when a popover is opened, it sets the target z-index + 2000
popoverProps={{ zIndex: euiThemeVars.euiZLevel8 }}
data-test-subj="promptSuperSelect" data-test-subj="promptSuperSelect"
fullWidth={fullWidth} fullWidth={fullWidth}
hasDividers hasDividers