github-mirrors/kibana
1
0
Fork 0
mirror of https://github.com/elastic/kibana.git synced 2025-04-24 09:48:58 -04:00
Code Issues Projects Releases Packages Wiki Activity

[Guided onboarding] Landing pages design follow ups (#150084)

Browse source 
## Summary
Fixes https://github.com/elastic/kibana/issues/149695
Follow up to https://github.com/elastic/kibana/pull/149528

This PR fixes minor design issues on the new landing page: 
- Adds a `document` icon to cards that on click redirect the user to a
Kibana page (not the guide cards)
- Updates the color of the icon for completed guide card to match the
header button (as per @cindychangy's
[comment](https://github.com/elastic/kibana/pull/149528#issuecomment-1403995077))
- Adds linebreaks to prevent one word dangling on the new line (as per
@osmanis's
[comment](https://github.com/elastic/kibana/pull/149528#issuecomment-1408780148))
- Fixes the layout of the completed guide card and all cards on the page
for small screens. See screenshots below

### Screenshots
#### Before (large screens)
<img width="1333" alt="Screenshot 2023-02-01 at 17 58 11"
src="https://user-images.githubusercontent.com/6585477/216111021-32ee8162-5cf8-4948-8f1d-aa3790e6a7f9.png">

#### After (large screens)
<img width="1300" alt="Screenshot 2023-02-01 at 18 01 16"
src="https://user-images.githubusercontent.com/6585477/216111153-d22feadd-1796-4b20-9e97-f7e0b025c42d.png">

#### Before (small screens)
<img width="627" alt="Screenshot 2023-02-01 at 17 58 20"
src="https://user-images.githubusercontent.com/6585477/216111189-08d3cd2b-bd75-4d6b-9f52-8d74623cbe35.png">

#### After (small screens)
<img width="561" alt="Screenshot 2023-02-01 at 18 01 24"
src="https://user-images.githubusercontent.com/6585477/216111209-6dafed8a-d398-4090-a23f-af570b684d33.png">


### Checklist
- [x] 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/packages/kbn-i18n/README.md)
- [x] [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
This commit is contained in:
Yulia Čech 2023-02-07 09:51:44 +01:00 • committed by GitHub
parent 6a19f89212
commit 5f74c6de18
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
4 changed files with 126 additions and 30 deletions
Download patch file Download diff file Expand all files Collapse all files

62
packages/kbn-guided-onboarding/src/components/landing_page/__snapshots__/guide_cards.test.tsx.snap generated
View file

@ -3,7 +3,7 @@
exports[`guide cards snapshots should render all cards 1`] = `
<EuiFlexGroup
justifyContent="center"
responsive={true}
responsive={false}
wrap={true}
>
<EuiFlexItem
@ -19,7 +19,15 @@ exports[`guide cards snapshots should render all cards 1`] = `
"order": 1,
"solution": "search",
"telemetryId": "onboarding--search--application",
"title": "Build an application on top of Elasticsearch",
"title": <FormattedMessage
defaultMessage="Build an application on {lineBreak} top of Elasticsearch"
id="guidedOnboardingPackage.gettingStarted.cards.appSearch.title"
values={
Object {
"lineBreak": <br />,
}
}
/>,
}
}
guidesState={Array []}
@ -68,7 +76,15 @@ exports[`guide cards snapshots should render all cards 1`] = `
"order": 3,
"solution": "security",
"telemetryId": "onboarding--security--siem",
"title": "Detect threats in my data with SIEM",
"title": <FormattedMessage
defaultMessage="Detect threats in my {lineBreak} data with SIEM"
id="guidedOnboardingPackage.gettingStarted.cards.siemSecurity.title"
values={
Object {
"lineBreak": <br />,
}
}
/>,
}
}
guidesState={Array []}
@ -117,7 +133,15 @@ exports[`guide cards snapshots should render all cards 1`] = `
"order": 5,
"solution": "observability",
"telemetryId": "onboarding--observability--apm",
"title": "Monitor my application performance (APM / tracing)",
"title": <FormattedMessage
defaultMessage="Monitor my application {lineBreak} performance (APM / tracing)"
id="guidedOnboardingPackage.gettingStarted.cards.apmObservability.title"
values={
Object {
"lineBreak": <br />,
}
}
/>,
}
}
guidesState={Array []}
@ -143,7 +167,15 @@ exports[`guide cards snapshots should render all cards 1`] = `
"order": 6,
"solution": "security",
"telemetryId": "onboarding--security--hosts",
"title": "Secure my hosts with endpoint security",
"title": <FormattedMessage
defaultMessage="Secure my hosts with {lineBreak} endpoint security"
id="guidedOnboardingPackage.gettingStarted.cards.hostsSecurity.title"
values={
Object {
"lineBreak": <br />,
}
}
/>,
}
}
guidesState={Array []}
@ -166,7 +198,15 @@ exports[`guide cards snapshots should render all cards 1`] = `
"order": 7,
"solution": "search",
"telemetryId": "onboarding--search--database",
"title": "Search across databases and business systems",
"title": <FormattedMessage
defaultMessage="Search across databases and {lineBreak} business systems"
id="guidedOnboardingPackage.gettingStarted.cards.databaseSearch.title"
values={
Object {
"lineBreak": <br />,
}
}
/>,
}
}
guidesState={Array []}
@ -218,7 +258,15 @@ exports[`guide cards snapshots should render all cards 1`] = `
"order": 9,
"solution": "security",
"telemetryId": "onboarding--security--cloud",
"title": "Secure my cloud assets with posture management",
"title": <FormattedMessage
defaultMessage="Secure my cloud assets with {lineBreak} posture management"
id="guidedOnboardingPackage.gettingStarted.cards.cloudSecurity.title"
values={
Object {
"lineBreak": <br />,
}
}
/>,
}
}
guidesState={Array []}

16
packages/kbn-guided-onboarding/src/components/landing_page/guide_card.tsx
View file

@ -9,7 +9,15 @@
import React, { useCallback, useState } from 'react';
import { css } from '@emotion/react';
import { EuiCard, EuiFlexGroup, EuiFlexItem, EuiIcon, EuiSpacer, EuiTextColor } from '@elastic/eui';
import {
EuiCard,
EuiFlexGroup,
EuiFlexItem,
EuiIcon,
EuiSpacer,
EuiTextColor,
useEuiTheme,
} from '@elastic/eui';
import { i18n } from '@kbn/i18n';
import { GuideState } from '../../types';
@ -55,6 +63,7 @@ export const GuideCard = ({
activeFilter,
}: GuideCardsProps & { card: GuideCardConstants }) => {
const [isLoading, setIsLoading] = useState<boolean>(false);
const { euiTheme } = useEuiTheme();
let guideState: GuideState | undefined;
if (card.guideId) {
guideState = guidesState.find((state) => state.guideId === card.guideId);
@ -102,9 +111,9 @@ export const GuideCard = ({
</EuiTextColor>
)}
{isComplete && (
<EuiFlexGroup gutterSize="s" alignItems="center">
<EuiFlexGroup gutterSize="s" alignItems="center" responsive={false}>
<EuiFlexItem grow={false}>
<EuiIcon type="checkInCircleFilled" color="success" />
<EuiIcon type="checkInCircleFilled" color={euiTheme.colors.success} />
</EuiFlexItem>
<EuiFlexItem grow={false}>
<small>
@ -115,6 +124,7 @@ export const GuideCard = ({
</EuiFlexItem>
</EuiFlexGroup>
)}
{card.navigateTo && <EuiIcon type="document" />}
</>
}
/>

76
packages/kbn-guided-onboarding/src/components/landing_page/guide_cards.constants.ts → packages/kbn-guided-onboarding/src/components/landing_page/guide_cards.constants.tsx
View file

@ -7,12 +7,14 @@
*/
import { i18n } from '@kbn/i18n';
import { FormattedMessage } from '@kbn/i18n-react';
import React, { ReactNode } from 'react';
import { GuideId } from '../../..';
import { GuideCardSolutions } from './guide_cards';
export interface GuideCardConstants {
solution: GuideCardSolutions;
title: string;
title: string | ReactNode;
// if present, guideId indicates which guide is opened when clicking the card
guideId?: GuideId;
// if present, navigateTo indicates where the user will be redirected, when clicking the card
@ -30,9 +32,15 @@ export interface GuideCardConstants {
export const guideCards: GuideCardConstants[] = [
{
solution: 'search',
title: i18n.translate('guidedOnboardingPackage.gettingStarted.cards.appSearch.title', {
defaultMessage: 'Build an application on top of Elasticsearch',
}),
title: (
<FormattedMessage
id="guidedOnboardingPackage.gettingStarted.cards.appSearch.title"
defaultMessage="Build an application on {lineBreak} top of Elasticsearch"
values={{
lineBreak: <br />,
}}
/>
),
guideId: 'appSearch',
telemetryId: 'onboarding--search--application',
order: 1,
@ -48,9 +56,15 @@ export const guideCards: GuideCardConstants[] = [
},
{
solution: 'search',
title: i18n.translate('guidedOnboardingPackage.gettingStarted.cards.databaseSearch.title', {
defaultMessage: 'Search across databases and business systems',
}),
title: (
<FormattedMessage
id="guidedOnboardingPackage.gettingStarted.cards.databaseSearch.title"
defaultMessage="Search across databases and {lineBreak} business systems"
values={{
lineBreak: <br />,
}}
/>
),
guideId: 'databaseSearch',
telemetryId: 'onboarding--search--database',
order: 7,
@ -69,9 +83,15 @@ export const guideCards: GuideCardConstants[] = [
},
{
solution: 'observability',
title: i18n.translate('guidedOnboardingPackage.gettingStarted.cards.apmObservability.title', {
defaultMessage: 'Monitor my application performance (APM / tracing)',
}),
title: (
<FormattedMessage
id="guidedOnboardingPackage.gettingStarted.cards.apmObservability.title"
defaultMessage="Monitor my application {lineBreak} performance (APM / tracing)"
values={{
lineBreak: <br />,
}}
/>
),
navigateTo: {
appId: 'home',
path: '#/tutorial/apm',
@ -105,18 +125,30 @@ export const guideCards: GuideCardConstants[] = [
},
{
solution: 'security',
title: i18n.translate('guidedOnboardingPackage.gettingStarted.cards.siemSecurity.title', {
defaultMessage: 'Detect threats in my data with SIEM',
}),
title: (
<FormattedMessage
id="guidedOnboardingPackage.gettingStarted.cards.siemSecurity.title"
defaultMessage="Detect threats in my {lineBreak} data with SIEM"
values={{
lineBreak: <br />,
}}
/>
),
guideId: 'siem',
telemetryId: 'onboarding--security--siem',
order: 3,
},
{
solution: 'security',
title: i18n.translate('guidedOnboardingPackage.gettingStarted.cards.hostsSecurity.title', {
defaultMessage: 'Secure my hosts with endpoint security',
}),
title: (
<FormattedMessage
id="guidedOnboardingPackage.gettingStarted.cards.hostsSecurity.title"
defaultMessage="Secure my hosts with {lineBreak} endpoint security"
values={{
lineBreak: <br />,
}}
/>
),
navigateTo: {
appId: 'integrations',
path: '/detail/endpoint/overview',
@ -126,9 +158,15 @@ export const guideCards: GuideCardConstants[] = [
},
{
solution: 'security',
title: i18n.translate('guidedOnboardingPackage.gettingStarted.cards.cloudSecurity.title', {
defaultMessage: 'Secure my cloud assets with posture management',
}),
title: (
<FormattedMessage
id="guidedOnboardingPackage.gettingStarted.cards.cloudSecurity.title"
defaultMessage="Secure my cloud assets with {lineBreak} posture management"
values={{
lineBreak: <br />,
}}
/>
),
navigateTo: {
appId: 'integrations',
path: '/detail/cloud_security_posture/overview',

2
packages/kbn-guided-onboarding/src/components/landing_page/guide_cards.tsx
View file

@ -27,7 +27,7 @@ export interface GuideCardsProps {
}
export const GuideCards = (props: GuideCardsProps) => {
return (
<EuiFlexGroup wrap responsive justifyContent="center">
<EuiFlexGroup wrap justifyContent="center" responsive={false}>
{guideCards.map((card, index) => (
<EuiFlexItem key={index} grow={false}>
<GuideCard card={card} {...props} />