forked from elastic/kibana
-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
[Security Solution][DQD] Add historical results tour guide
addresses elastic#195971
- Loading branch information
Showing
14 changed files
with
1,058 additions
and
33 deletions.
There are no files selected for viewing
9 changes: 9 additions & 0 deletions
9
...ality_dashboard/impl/data_quality_panel/data_quality_details/indices_details/constants.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,9 @@ | ||
| /* | ||
| * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one | ||
| * or more contributor license agreements. Licensed under the Elastic License | ||
| * 2.0; you may not use this file except in compliance with the Elastic License | ||
| * 2.0. | ||
| */ | ||
|
|
||
| export const HISTORICAL_RESULTS_TOUR_IS_ACTIVE_STORAGE_KEY = | ||
| 'securitySolution.dataQualityDashboard.historicalResultsTour.v8.16.isActive'; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
105 changes: 105 additions & 0 deletions
105
...panel/data_quality_details/indices_details/pattern/historical_results_tour/index.test.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,105 @@ | ||
| /* | ||
| * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one | ||
| * or more contributor license agreements. Licensed under the Elastic License | ||
| * 2.0; you may not use this file except in compliance with the Elastic License | ||
| * 2.0. | ||
| */ | ||
|
|
||
| import React from 'react'; | ||
| import { render, screen, waitFor } from '@testing-library/react'; | ||
| import userEvent from '@testing-library/user-event'; | ||
|
|
||
| import { HISTORICAL_RESULTS_TOUR_SELECTOR_KEY } from '../constants'; | ||
| import { HistoricalResultsTour } from '.'; | ||
| import { INTRODUCING_DATA_QUALITY_HISTORY, VIEW_PAST_RESULTS } from './translations'; | ||
|
|
||
| const anchorSelectorValue = 'test-anchor'; | ||
|
|
||
| describe('HistoricalResultsTour', () => { | ||
| beforeEach(() => { | ||
| jest.clearAllMocks(); | ||
| }); | ||
|
|
||
| describe('given no anchor element', () => { | ||
| it('does not render the tour step', () => { | ||
| render( | ||
| <HistoricalResultsTour | ||
| anchorSelectorValue={anchorSelectorValue} | ||
| onTryIt={jest.fn()} | ||
| isOpen={true} | ||
| onDismissTour={jest.fn()} | ||
| /> | ||
| ); | ||
|
|
||
| expect(screen.queryByText(INTRODUCING_DATA_QUALITY_HISTORY)).not.toBeInTheDocument(); | ||
| }); | ||
| }); | ||
|
|
||
| describe('given an anchor element', () => { | ||
| beforeEach(() => { | ||
| // eslint-disable-next-line no-unsanitized/property | ||
| document.body.innerHTML = `<div ${HISTORICAL_RESULTS_TOUR_SELECTOR_KEY}="${anchorSelectorValue}"></div>`; | ||
| }); | ||
|
|
||
| describe('when isOpen is true', () => { | ||
| const onTryIt = jest.fn(); | ||
| const onDismissTour = jest.fn(); | ||
| beforeEach(() => { | ||
| render( | ||
| <HistoricalResultsTour | ||
| anchorSelectorValue={anchorSelectorValue} | ||
| onTryIt={onTryIt} | ||
| isOpen={true} | ||
| onDismissTour={onDismissTour} | ||
| /> | ||
| ); | ||
| }); | ||
| it('renders the tour step', async () => { | ||
| expect( | ||
| await screen.findByRole('dialog', { name: INTRODUCING_DATA_QUALITY_HISTORY }) | ||
| ).toBeInTheDocument(); | ||
| expect(screen.getByText(INTRODUCING_DATA_QUALITY_HISTORY)).toBeInTheDocument(); | ||
| expect(screen.getByText(VIEW_PAST_RESULTS)).toBeInTheDocument(); | ||
| expect(screen.getByRole('button', { name: /Close/i })).toBeInTheDocument(); | ||
| expect(screen.getByRole('button', { name: /Try It/i })).toBeInTheDocument(); | ||
|
|
||
| const historicalResultsTour = screen.getByTestId('historicalResultsTour'); | ||
| expect(historicalResultsTour.querySelector('[data-tour-element]')).toHaveAttribute( | ||
| 'data-tour-element', | ||
| anchorSelectorValue | ||
| ); | ||
| }); | ||
|
|
||
| describe('when the close button is clicked', () => { | ||
| it('calls dismissTour', async () => { | ||
| await userEvent.click(await screen.findByRole('button', { name: /Close/i })); | ||
| expect(onDismissTour).toHaveBeenCalledTimes(1); | ||
| }); | ||
| }); | ||
|
|
||
| describe('when the try it button is clicked', () => { | ||
| it('calls onTryIt', async () => { | ||
| await userEvent.click(await screen.findByRole('button', { name: /Try It/i })); | ||
| expect(onTryIt).toHaveBeenCalledTimes(1); | ||
| }); | ||
| }); | ||
| }); | ||
|
|
||
| describe('when isOpen is false', () => { | ||
| it('does not render the tour step', async () => { | ||
| render( | ||
| <HistoricalResultsTour | ||
| anchorSelectorValue={anchorSelectorValue} | ||
| onTryIt={jest.fn()} | ||
| isOpen={false} | ||
| onDismissTour={jest.fn()} | ||
| /> | ||
| ); | ||
|
|
||
| await waitFor(() => | ||
| expect(screen.queryByText(INTRODUCING_DATA_QUALITY_HISTORY)).not.toBeInTheDocument() | ||
| ); | ||
| }); | ||
| }); | ||
| }); | ||
| }); |
77 changes: 77 additions & 0 deletions
77
...lity_panel/data_quality_details/indices_details/pattern/historical_results_tour/index.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,77 @@ | ||
| /* | ||
| * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one | ||
| * or more contributor license agreements. Licensed under the Elastic License | ||
| * 2.0; you may not use this file except in compliance with the Elastic License | ||
| * 2.0. | ||
| */ | ||
|
|
||
| import React, { FC, useEffect, useState } from 'react'; | ||
| import { EuiButton, EuiButtonEmpty, EuiText, EuiTourStep } from '@elastic/eui'; | ||
| import styled from 'styled-components'; | ||
|
|
||
| import { HISTORICAL_RESULTS_TOUR_SELECTOR_KEY } from '../constants'; | ||
| import { CLOSE, INTRODUCING_DATA_QUALITY_HISTORY, TRY_IT, VIEW_PAST_RESULTS } from './translations'; | ||
|
|
||
| interface HistoricalResultsTourProps { | ||
| anchorSelectorValue: string; | ||
| isOpen: boolean; | ||
| onTryIt: () => void; | ||
| onDismissTour: () => void; | ||
| } | ||
|
|
||
| const StyledText = styled(EuiText)` | ||
| margin-block-start: -10px; | ||
| `; | ||
|
|
||
| export const HistoricalResultsTour: FC<HistoricalResultsTourProps> = ({ | ||
| anchorSelectorValue, | ||
| onTryIt, | ||
| isOpen, | ||
| onDismissTour, | ||
| }) => { | ||
| const [anchorElement, setAnchorElement] = useState<HTMLElement>(); | ||
|
|
||
| useEffect(() => { | ||
| const element = document.querySelector<HTMLElement>( | ||
| `[${HISTORICAL_RESULTS_TOUR_SELECTOR_KEY}="${anchorSelectorValue}"]` | ||
| ); | ||
|
|
||
| if (!element) { | ||
| return; | ||
| } | ||
|
|
||
| setAnchorElement(element); | ||
| }, [anchorSelectorValue]); | ||
|
|
||
| if (!isOpen || !anchorElement) { | ||
| return null; | ||
| } | ||
|
|
||
| return ( | ||
| <EuiTourStep | ||
| content={ | ||
| <StyledText size="s"> | ||
| <p>{VIEW_PAST_RESULTS}</p> | ||
| </StyledText> | ||
| } | ||
| data-test-subj="historicalResultsTour" | ||
| isStepOpen={isOpen} | ||
| minWidth={283} | ||
| onFinish={onDismissTour} | ||
| step={1} | ||
| stepsTotal={1} | ||
| title={INTRODUCING_DATA_QUALITY_HISTORY} | ||
| anchorPosition="rightUp" | ||
| repositionOnScroll | ||
| anchor={anchorElement} | ||
| footerAction={[ | ||
| <EuiButtonEmpty size="xs" color="text" onClick={onDismissTour}> | ||
| {CLOSE} | ||
| </EuiButtonEmpty>, | ||
| <EuiButton color="success" size="s" onClick={onTryIt}> | ||
| {TRY_IT} | ||
| </EuiButton>, | ||
| ]} | ||
| /> | ||
| ); | ||
| }; |
Oops, something went wrong.