Skip to content

Commit ce1bd82

Browse files
authored
[Security Solutions] Trial Companion - add close icon to the Get set up panel (elastic#256916)
## Summary [Security Solutions] Trial Companion - add `x` icon to the "Get set up" panel. It closes the panel temporary (till the refresh or navigating to a different app). Reason of the change: potential overlap of UI components. The `x` icon allows closing the panel and access components under it. <img width="375" height="407" alt="image" src="https://github.com/user-attachments/assets/26e6479f-ca28-4c65-a0d1-4cbb00e86a88" /> ### Checklist Check the PR satisfies following conditions. Reviewers should verify this PR satisfies this list as well. - [ ] Any text added follows [EUI's writing guidelines](https://elastic.github.io/eui/#/guidelines/writing), uses sentence case text and includes [i18n support](https://github.com/elastic/kibana/blob/main/src/platform/packages/shared/kbn-i18n/README.md) - [ ] [Documentation](https://www.elastic.co/guide/en/kibana/master/development-documentation.html) was added for features that require explanation or tutorials - [ ] [Unit or functional tests](https://www.elastic.co/guide/en/kibana/master/development-tests.html) were updated or added to match the most common scenarios - [ ] If a plugin configuration key changed, check if it needs to be allowlisted in the cloud and added to the [docker list](https://github.com/elastic/kibana/blob/main/src/dev/build/tasks/os_packages/docker_generator/resources/base/bin/kibana-docker) - [ ] This was checked for breaking HTTP API changes, and any breaking changes have been approved by the breaking-change committee. The `release_note:breaking` label should be applied in these situations. - [ ] [Flaky Test Runner](https://ci-stats.kibana.dev/trigger_flaky_test_runner/1) was used on any tests changed - [ ] The PR description includes the appropriate Release Notes section, and the correct `release_note:*` label is applied per the [guidelines](https://www.elastic.co/guide/en/kibana/master/contributing.html#kibana-release-notes-process) - [ ] Review the [backport guidelines](https://docs.google.com/document/d/1VyN5k91e5OVumlc0Gb9RPa3h1ewuPE705nRtioPiTvY/edit?usp=sharing) and apply applicable `backport:*` labels. ### Identify risks Does this PR introduce any risks? For example, consider risks like hard to test bugs, performance regression, potential of data loss. Describe the risk, its severity, and mitigation for each identified risk. Invite stakeholders and evaluate how to proceed before merging. - [ ] [See some risk examples](https://github.com/elastic/kibana/blob/main/RISK_MATRIX.mdx) - [ ] ...
1 parent 1a43fe4 commit ce1bd82

1 file changed

Lines changed: 17 additions & 4 deletions

File tree

x-pack/solutions/security/plugins/security_solution/public/trial_companion/nba_get_setup_panel.tsx

Lines changed: 17 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -84,6 +84,7 @@ function itemButtonContent(iconType: string, color: string, title: string, miles
8484
size="m"
8585
color={color}
8686
data-test-subj={`${TEST_SUBJ_PREFIX}-item-icon-${milestoneId}`}
87+
aria-hidden={true}
8788
/>
8889
</EuiFlexItem>
8990
<EuiFlexItem grow={false}>
@@ -163,7 +164,7 @@ export const YourTrialCompanionTODOItem: React.FC<YourTrialCompanionTODOItemProp
163164
gutterSize="m"
164165
>
165166
<EuiFlexItem grow={false}>
166-
<EuiIcon type="empty" size="m" />
167+
<EuiIcon type="empty" size="m" aria-hidden={true} />
167168
</EuiFlexItem>
168169
<EuiFlexItem grow={false}>
169170
<EuiFlexGroup
@@ -195,7 +196,7 @@ export const YourTrialCompanionTODOItem: React.FC<YourTrialCompanionTODOItemProp
195196
</EuiFlexGroup>
196197
</EuiFlexItem>
197198
<EuiFlexItem grow={false}>
198-
<EuiIcon type="empty" size="m" />
199+
<EuiIcon type="empty" size="m" aria-hidden={true} />
199200
</EuiFlexItem>
200201
</EuiFlexGroup>
201202
</EuiAccordion>
@@ -238,6 +239,10 @@ export const YourTrialCompanion: React.FC<YourTrialCompanionProps> = ({
238239
},
239240
paddingTop: euiTheme.size.base,
240241
paddingBottom: euiTheme.size.l,
242+
'.euiAccordion__optionalAction': {
243+
alignSelf: 'flex-start',
244+
marginTop: '0rem',
245+
},
241246
});
242247
const firstLineSelected = expandedItemId === todoItems[0].milestoneId;
243248
const lastLineSelected = expandedItemId === todoItems[todoItems.length - 1].milestoneId;
@@ -249,19 +254,27 @@ export const YourTrialCompanion: React.FC<YourTrialCompanionProps> = ({
249254
postNBADismiss();
250255
};
251256

257+
const onClose = () => {
258+
setIsVisible(false);
259+
};
260+
252261
return (
253262
isVisible && (
254263
<EuiPanel css={styles}>
255264
<EuiAccordion
256265
id={accordionId}
257266
buttonContent={buttonContent(completed.length, todoItems.length, euiTheme)}
258267
buttonProps={{ css: css({ '&:hover': { textDecoration: 'none' } }) }}
259-
arrowProps={{ css: css({ alignSelf: 'flex-start', marginTop: '0rem' }) }}
260-
arrowDisplay="right"
268+
arrowDisplay="left"
261269
paddingSize="none"
262270
css={{
263271
gap: euiTheme.size.m,
264272
}}
273+
extraAction={
274+
<EuiPanel onClick={onClose} hasBorder={false} hasShadow={false} paddingSize="none">
275+
<EuiIcon type="cross" size="m" aria-hidden={true} />
276+
</EuiPanel>
277+
}
265278
data-test-subj={GET_SET_UP_ACCORDION_TEST_ID}
266279
element="fieldset"
267280
>

0 commit comments

Comments
 (0)