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.
[Observability Onboarding] Add link back to onboarding from integrati…
…ons (elastic#181195) # Summary Resolves elastic#180824. ## Fleet Changes It was noted that, when linking to the Integrations page from Onboarding, the `Back to integrations` link will navigate the user to the main Integrations search page within the Fleet UI. In cases where we direct the user to an integration's page from Observability Onboarding, this completely breaks the flow. The goal of this PR is to introduce, as transparently as possible, some special functionality to pick up a link as a query param and replace the standard back link with the custom one when it is present. This also includes a copy change, per the linked issue. ### Card CSS change As a side note, this adds some custom CSS to the `PackageCard` component. This is because we added this notion of `Collections` to the cards, but the `footer` prop is not available when the cards are in `horizontal` mode. I spoke to EUI about this and it is possible this will become a standard convention in the future. My original intent was to include this custom CSS conditionally, but because ReactWindow is somewhat rigid with conditionally-applied styles it seemed to only work when the CSS was applied to all items. #### Looks ok when card content is uniform <img width="1160" alt="image" src="https://github.com/elastic/kibana/assets/18429259/b289fe19-2673-4e10-a5a5-01d805d29a7a"> #### Only looks like this when the custom CSS is applied <img width="828" alt="image" src="https://github.com/elastic/kibana/assets/18429259/eae5b78e-00a2-4fe1-93e7-0cdf73bc88f6"> ## Onboarding Changes There's a new query param, `search`, that will update with the changes the user makes to the search query for the complete integrations list. This and the `category` param are included in the link when they're defined, so when the user navigates to the integration's page, if they click the link back the original state of the page will repopulate. ## Testing The original functionality of using integrations from the Fleet UI should remain completely unchanged. Things to check: 1. Integration cards render in the exact same way as they did before, or with acceptable differences WRT the flex usage. In my testing, I didn't notice any perceptible difference, but I likely did not cover all cases of card rendering 1. Links back to the integrations UI continue to work the same as before 1. Links from Onboarding to Integrations will preserve state and cause the back link to say "Back to selection" instead of "Back to integrations" ## Demo GIFs ### Onboarding Flow  ### Integrations Flow  --------- Co-authored-by: Joe Reuter <[email protected]>
- Loading branch information
1 parent
a902bac
commit 6cdb0ea
Showing
11 changed files
with
267 additions
and
18 deletions.
There are no files selected for viewing
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
44 changes: 44 additions & 0 deletions
44
...ublic/applications/integrations/sections/epm/screens/detail/components/back_link.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,44 @@ | ||
| /* | ||
| * 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 { render } from '@testing-library/react'; | ||
| import React from 'react'; | ||
|
|
||
| import { BackLink } from './back_link'; | ||
|
|
||
| describe('BackLink', () => { | ||
| it('renders back to selection link', () => { | ||
| const expectedUrl = '/app/experimental-onboarding'; | ||
| const queryParams = new URLSearchParams(); | ||
| queryParams.set('observabilityOnboardingLink', expectedUrl); | ||
| const { getByText, getByRole } = render( | ||
| <BackLink queryParams={queryParams} href="/app/integrations" /> | ||
| ); | ||
| expect(getByText('Back to selection')).toBeInTheDocument(); | ||
| expect(getByRole('link').getAttribute('href')).toBe(expectedUrl); | ||
| }); | ||
|
|
||
| it('renders back to selection link with params', () => { | ||
| const expectedUrl = '/app/experimental-onboarding&search=aws&category=infra'; | ||
| const queryParams = new URLSearchParams(); | ||
| queryParams.set('observabilityOnboardingLink', expectedUrl); | ||
| const { getByText, getByRole } = render( | ||
| <BackLink queryParams={queryParams} href="/app/integrations" /> | ||
| ); | ||
| expect(getByText('Back to selection')).toBeInTheDocument(); | ||
| expect(getByRole('link').getAttribute('href')).toBe(expectedUrl); | ||
| }); | ||
|
|
||
| it('renders back to integrations link', () => { | ||
| const queryParams = new URLSearchParams(); | ||
| const { getByText, getByRole } = render( | ||
| <BackLink queryParams={queryParams} href="/app/integrations" /> | ||
| ); | ||
| expect(getByText('Back to integrations')).toBeInTheDocument(); | ||
| expect(getByRole('link').getAttribute('href')).toBe('/app/integrations'); | ||
| }); | ||
| }); |
45 changes: 45 additions & 0 deletions
45
...eet/public/applications/integrations/sections/epm/screens/detail/components/back_link.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,45 @@ | ||
| /* | ||
| * 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 { EuiButtonEmpty } from '@elastic/eui'; | ||
| import { FormattedMessage } from '@kbn/i18n-react'; | ||
| import React, { useMemo } from 'react'; | ||
|
|
||
| interface Props { | ||
| queryParams: URLSearchParams; | ||
| href: string; | ||
| } | ||
|
|
||
| export function BackLink({ queryParams, href: integrationsHref }: Props) { | ||
| const { onboardingLink } = useMemo(() => { | ||
| return { | ||
| onboardingLink: queryParams.get('observabilityOnboardingLink'), | ||
| }; | ||
| }, [queryParams]); | ||
| const href = onboardingLink ?? integrationsHref; | ||
| const message = onboardingLink ? BACK_TO_SELECTION : BACK_TO_INTEGRATIONS; | ||
|
|
||
| return ( | ||
| <EuiButtonEmpty iconType="arrowLeft" size="xs" flush="left" href={href}> | ||
| {message} | ||
| </EuiButtonEmpty> | ||
| ); | ||
| } | ||
|
|
||
| const BACK_TO_INTEGRATIONS = ( | ||
| <FormattedMessage | ||
| id="xpack.fleet.epm.browseAllButtonText" | ||
| defaultMessage="Back to integrations" | ||
| /> | ||
| ); | ||
|
|
||
| const BACK_TO_SELECTION = ( | ||
| <FormattedMessage | ||
| id="xpack.fleet.epm.returnToObservabilityOnboarding" | ||
| defaultMessage="Back to selection" | ||
| /> | ||
| ); |
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
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
65 changes: 65 additions & 0 deletions
65
...servability_onboarding/public/application/packages_list/use_integration_card_list.test.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,65 @@ | ||
| /* | ||
| * 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 { addPathParamToUrl, toOnboardingPath } from './use_integration_card_list'; | ||
|
|
||
| describe('useIntegratrionCardList', () => { | ||
| describe('toOnboardingPath', () => { | ||
| it('returns null if no `basePath` is defined', () => { | ||
| expect(toOnboardingPath({})).toBeNull(); | ||
| }); | ||
| it('returns just the `basePath` if no category or search is defined', () => { | ||
| expect(toOnboardingPath({ basePath: '' })).toBe('/app/experimental-onboarding'); | ||
| expect(toOnboardingPath({ basePath: '/s/custom_space_name' })).toBe( | ||
| '/s/custom_space_name/app/experimental-onboarding' | ||
| ); | ||
| }); | ||
| it('includes category in the URL', () => { | ||
| expect(toOnboardingPath({ basePath: '/s/custom_space_name', category: 'logs' })).toBe( | ||
| '/s/custom_space_name/app/experimental-onboarding?category=logs' | ||
| ); | ||
| expect(toOnboardingPath({ basePath: '', category: 'infra' })).toBe( | ||
| '/app/experimental-onboarding?category=infra' | ||
| ); | ||
| }); | ||
| it('includes search in the URL', () => { | ||
| expect(toOnboardingPath({ basePath: '/s/custom_space_name', search: 'search' })).toBe( | ||
| '/s/custom_space_name/app/experimental-onboarding?search=search' | ||
| ); | ||
| }); | ||
| it('includes category and search in the URL', () => { | ||
| expect( | ||
| toOnboardingPath({ basePath: '/s/custom_space_name', category: 'logs', search: 'search' }) | ||
| ).toBe('/s/custom_space_name/app/experimental-onboarding?category=logs&search=search'); | ||
| expect(toOnboardingPath({ basePath: '', category: 'infra', search: 'search' })).toBe( | ||
| '/app/experimental-onboarding?category=infra&search=search' | ||
| ); | ||
| }); | ||
| }); | ||
| describe('addPathParamToUrl', () => { | ||
| it('adds the onboarding link to url with existing params', () => { | ||
| expect( | ||
| addPathParamToUrl( | ||
| '/app/integrations?query-1', | ||
| '/app/experimental-onboarding?search=aws&category=infra' | ||
| ) | ||
| ).toBe( | ||
| '/app/integrations?query-1&observabilityOnboardingLink=%2Fapp%2Fexperimental-onboarding%3Fsearch%3Daws%26category%3Dinfra' | ||
| ); | ||
| }); | ||
| it('adds the onboarding link to url without existing params', () => { | ||
| expect( | ||
| addPathParamToUrl( | ||
| '/app/integrations', | ||
| '/app/experimental-onboarding?search=aws&category=infra' | ||
| ) | ||
| ).toBe( | ||
| '/app/integrations?observabilityOnboardingLink=%2Fapp%2Fexperimental-onboarding%3Fsearch%3Daws%26category%3Dinfra' | ||
| ); | ||
| }); | ||
| }); | ||
| }); |
Oops, something went wrong.