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

[Guided onboarding] Add cloud checks (#143808)

Browse source
This commit is contained in:
Alison Goryachev 2022-10-26 13:14:40 -04:00 • committed by GitHub
parent ac3bc415b3
commit a0e1911370
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
12 changed files with 95 additions and 27 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -44,6 +44,19 @@ exports[`guide card footer snapshots should render the footer when the guide is
<Fragment>
<EuiProgress
label="In progress"
labelProps={
Object {
"css": Object {
"map": undefined,
"name": "x46p4t",
"next": undefined,
"styles": "
text-align: 'left';
",
"toString": [Function],
},
}
}
max={2}
size="s"
value={1}
@ -70,6 +83,19 @@ exports[`guide card footer snapshots should render the footer when the guide is
<Fragment>
<EuiProgress
label="In progress"
labelProps={
Object {
"css": Object {
"map": undefined,
"name": "x46p4t",
"next": undefined,
"styles": "
text-align: 'left';
",
"toString": [Function],
},
}
}
max={2}
size="s"
value={1}

9
packages/kbn-guided-onboarding/src/components/landing_page/guide_card_footer.tsx
View file

@ -7,6 +7,7 @@
*/
import React from 'react';
import { css } from '@emotion/react';
import { EuiButton, EuiProgress, EuiSpacer } from '@elastic/eui';
import { i18n } from '@kbn/i18n';
import { GuideId, GuideState } from '../../types';
@ -40,6 +41,11 @@ const inProgressLabel = i18n.translate(
}
);
// The progress bar is rendered within EuiCard, which centers content by default
const progressBarLabelCss = css`
text-align: 'left';
`;
export interface GuideCardFooterProps {
guides: GuideState[];
useCase: UseCase;
@ -97,6 +103,9 @@ export const GuideCardFooter = ({ guides, useCase, activateGuide }: GuideCardFoo
max={numberSteps}
size="s"
label={inProgressLabel}
labelProps={{
css: progressBarLabelCss,
}}
/>
<EuiSpacer size="l" />
<div className="eui-textCenter">

9
packages/kbn-guided-onboarding/src/components/landing_page/use_case_card.tsx
View file

@ -84,18 +84,13 @@ export const UseCaseCard = ({
</h4>
</EuiText>
);
const descriptionElement = (
<EuiText size="s" textAlign="center">
<p>{description}</p>
</EuiText>
);
return (
<EuiCard
display="subdued"
textAlign="left"
image={<EuiImage src={getImageUrl(useCase)} alt={constants[useCase].logAltText} />}
title={titleElement}
description={descriptionElement}
description={description}
footer={footer}
betaBadgeProps={{
label: constants[useCase].betaBadgeLabel,

2
src/plugins/guided_onboarding/kibana.json
View file

@ -10,5 +10,5 @@
"server": true,
"ui": true,
"requiredBundles": ["kibanaReact"],
"optionalPlugins": []
"optionalPlugins": ["cloud"]
}

34
src/plugins/guided_onboarding/public/plugin.tsx
View file

@ -13,7 +13,11 @@ import { I18nProvider } from '@kbn/i18n-react';
import { CoreSetup, CoreStart, Plugin, CoreTheme, ApplicationStart } from '@kbn/core/public';
import { KibanaThemeProvider } from '@kbn/kibana-react-plugin/public';
import type { GuidedOnboardingPluginSetup, GuidedOnboardingPluginStart } from './types';
import type {
AppPluginStartDependencies,
GuidedOnboardingPluginSetup,
GuidedOnboardingPluginStart,
} from './types';
import { GuidePanel } from './components';
import { ApiService, apiService } from './services/api';
@ -25,22 +29,28 @@ export class GuidedOnboardingPlugin
return {};
}
public start(core: CoreStart): GuidedOnboardingPluginStart {
public start(
core: CoreStart,
{ cloud }: AppPluginStartDependencies
): GuidedOnboardingPluginStart {
const { chrome, http, theme, application } = core;
// Initialize services
apiService.setup(http);
chrome.navControls.registerExtension({
order: 1000,
mount: (target) =>
this.mount({
targetDomElement: target,
theme$: theme.theme$,
api: apiService,
application,
}),
});
// Guided onboarding UI is only available on cloud
if (cloud?.isCloudEnabled) {
chrome.navControls.registerExtension({
order: 1000,
mount: (target) =>
this.mount({
targetDomElement: target,
theme$: theme.theme$,
api: apiService,
application,
}),
});
}
// Return methods that should be available to other plugins
return {

5
src/plugins/guided_onboarding/public/types.ts
View file

@ -9,6 +9,7 @@
import { Observable } from 'rxjs';
import { HttpSetup } from '@kbn/core/public';
import type { GuideState, GuideId, GuideStepIds, StepStatus } from '@kbn/guided-onboarding';
import type { CloudStart } from '@kbn/cloud-plugin/public';
// eslint-disable-next-line @typescript-eslint/no-empty-interface
export interface GuidedOnboardingPluginSetup {}
@ -17,6 +18,10 @@ export interface GuidedOnboardingPluginStart {
guidedOnboardingApi?: GuidedOnboardingApi;
}
export interface AppPluginStartDependencies {
cloud?: CloudStart;
}
export interface GuidedOnboardingApi {
setup: (httpClient: HttpSetup) => void;
fetchActiveGuideState$: () => Observable<GuideState | undefined>;

1
src/plugins/guided_onboarding/tsconfig.json
View file

@ -15,5 +15,6 @@
{
"path": "../kibana_react/tsconfig.json"
},
{ "path": "../../../x-pack/plugins/cloud/tsconfig.json" },
]
}

16
src/plugins/home/public/application/components/guided_onboarding/__snapshots__/getting_started.test.tsx.snap generated
View file

@ -52,7 +52,9 @@ exports[`getting started should render getting started component 1`] = `
columns={4}
gutterSize="l"
>
<EuiFlexItem>
<EuiFlexItem
key="guideCard-search"
>
<GuideCard
activateGuide={[Function]}
addBasePath={[MockFunction]}
@ -61,7 +63,9 @@ exports[`getting started should render getting started component 1`] = `
useCase="search"
/>
</EuiFlexItem>
<EuiFlexItem>
<EuiFlexItem
key="guideCard-observability"
>
<GuideCard
activateGuide={[Function]}
addBasePath={[MockFunction]}
@ -70,14 +74,18 @@ exports[`getting started should render getting started component 1`] = `
useCase="observability"
/>
</EuiFlexItem>
<EuiFlexItem>
<EuiFlexItem
key="linkCard-observabilityLink"
>
<ObservabilityLinkCard
addBasePath={[MockFunction]}
isDarkTheme={false}
navigateToApp={[MockFunction]}
/>
</EuiFlexItem>
<EuiFlexItem>
<EuiFlexItem
key="guideCard-security"
>
<GuideCard
activateGuide={[Function]}
addBasePath={[MockFunction]}

2
src/plugins/home/public/application/components/guided_onboarding/getting_started.test.tsx
View file

@ -17,11 +17,13 @@ jest.mock('../../kibana_services', () => {
const { chromeServiceMock, applicationServiceMock } =
jest.requireActual('@kbn/core/public/mocks');
const { uiSettingsServiceMock } = jest.requireActual('@kbn/core-ui-settings-browser-mocks');
const { cloudMock } = jest.requireActual('@kbn/cloud-plugin/public/mocks');
const uiSettingsMock = uiSettingsServiceMock.createSetupContract();
uiSettingsMock.get.mockReturnValue(false);
return {
getServices: () => ({
cloud: cloudMock.createSetup(),
chrome: chromeServiceMock.createStartContract(),
application: applicationServiceMock.createStartContract(),
trackUiMetric: jest.fn(),

15
src/plugins/home/public/application/components/guided_onboarding/getting_started.tsx
View file

@ -21,6 +21,7 @@ import {
} from '@elastic/eui';
import { css } from '@emotion/react';
import { useHistory } from 'react-router-dom';
import { METRIC_TYPE } from '@kbn/analytics';
import { i18n } from '@kbn/i18n';
import { KibanaPageTemplate } from '@kbn/shared-ux-page-kibana-template';
@ -45,9 +46,10 @@ const skipText = i18n.translate('home.guidedOnboarding.gettingStarted.skip.butto
});
export const GettingStarted = () => {
const { application, trackUiMetric, chrome, guidedOnboardingService, http, uiSettings } =
const { application, trackUiMetric, chrome, guidedOnboardingService, http, uiSettings, cloud } =
getServices();
const [guidesState, setGuidesState] = useState<GuideState[]>([]);
const history = useHistory();
useEffect(() => {
chrome.setBreadcrumbs([
@ -76,6 +78,12 @@ export const GettingStarted = () => {
fetchGuidesState();
}, [fetchGuidesState]);
useEffect(() => {
if (cloud?.isCloudEnabled === false) {
return history.push('/');
}
}, [cloud, history]);
const onSkip = () => {
trackUiMetric(METRIC_TYPE.CLICK, 'guided_onboarding__skipped');
// disable welcome screen on the home page
@ -92,6 +100,7 @@ export const GettingStarted = () => {
await guidedOnboardingService?.activateGuide(useCase as GuideId, guideState);
// TODO error handling https://github.com/elastic/kibana/issues/139798
};
return (
<KibanaPageTemplate panelled={false} grow>
<EuiPageTemplate.Section alignment="center">
@ -109,7 +118,7 @@ export const GettingStarted = () => {
{['search', 'observability', 'observabilityLink', 'security'].map((useCase) => {
if (useCase === 'observabilityLink') {
return (
<EuiFlexItem>
<EuiFlexItem key={`linkCard-${useCase}`}>
<ObservabilityLinkCard
navigateToApp={application.navigateToApp}
isDarkTheme={isDarkTheme}
@ -119,7 +128,7 @@ export const GettingStarted = () => {
);
}
return (
<EuiFlexItem>
<EuiFlexItem key={`guideCard-${useCase}`}>
<GuideCard
useCase={useCase as UseCase}
guides={guidesState}

2
src/plugins/home/public/application/kibana_services.ts
View file

@ -21,6 +21,7 @@ import { UrlForwardingStart } from '@kbn/url-forwarding-plugin/public';
import { DataViewsContract } from '@kbn/data-views-plugin/public';
import { SharePluginSetup } from '@kbn/share-plugin/public';
import { GuidedOnboardingApi } from '@kbn/guided-onboarding-plugin/public';
import { CloudSetup } from '@kbn/cloud-plugin/public';
import { TutorialService } from '../services/tutorials';
import { AddDataService } from '../services/add_data';
import { FeatureCatalogueRegistry } from '../services/feature_catalogue';
@ -51,6 +52,7 @@ export interface HomeKibanaServices {
addDataService: AddDataService;
welcomeService: WelcomeService;
guidedOnboardingService?: GuidedOnboardingApi;
cloud?: CloudSetup;
}
let services: HomeKibanaServices | null = null;

1
src/plugins/home/public/plugin.ts
View file

@ -105,6 +105,7 @@ export class HomePublicPlugin
featureCatalogue: this.featuresCatalogueRegistry,
welcomeService: this.welcomeService,
guidedOnboardingService: guidedOnboarding.guidedOnboardingApi,
cloud,
});
coreStart.chrome.docTitle.change(
i18n.translate('home.pageTitle', { defaultMessage: 'Home' })