[Guided onboarding] Add guided onboarding to the home page

This commit is contained in:
Yulia Cech 2022-10-24 11:20:35 +02:00
parent ffc8fb90fd
commit b36e80bbfa
6 changed files with 53 additions and 4 deletions

View file

@ -30,6 +30,7 @@ exports[`home change home route should render a link to change the default route
},
}
}
isCloudEnabled={false}
isDarkMode={false}
/>
<ManageData
@ -84,6 +85,7 @@ exports[`home directories should not render directory entry when showOnHomePage
},
}
}
isCloudEnabled={false}
isDarkMode={false}
/>
<ManageData
@ -138,6 +140,7 @@ exports[`home directories should render ADMIN directory entry in "Manage your da
},
}
}
isCloudEnabled={false}
isDarkMode={false}
/>
<ManageData
@ -239,6 +242,7 @@ exports[`home directories should render solutions in the "solution section" 1`]
},
}
}
isCloudEnabled={false}
isDarkMode={false}
/>
<ManageData
@ -293,6 +297,7 @@ exports[`home isNewKibanaInstance should safely handle exceptions 1`] = `
},
}
}
isCloudEnabled={false}
isDarkMode={false}
/>
<ManageData
@ -347,6 +352,7 @@ exports[`home isNewKibanaInstance should set isNewKibanaInstance to false when t
},
}
}
isCloudEnabled={false}
isDarkMode={false}
/>
<ManageData
@ -408,6 +414,7 @@ exports[`home should render home component 1`] = `
},
}
}
isCloudEnabled={false}
isDarkMode={false}
/>
<ManageData

View file

@ -40,6 +40,7 @@ describe('AddData', () => {
addBasePath={addBasePathMock}
application={applicationStartMock}
isDarkMode={false}
isCloudEnabled={false}
/>
);
expect(component).toMatchSnapshot();

View file

@ -29,9 +29,10 @@ interface Props {
addBasePath: (path: string) => string;
application: ApplicationStart;
isDarkMode: boolean;
isCloudEnabled: boolean;
}
export const AddData: FC<Props> = ({ addBasePath, application, isDarkMode }) => {
export const AddData: FC<Props> = ({ addBasePath, application, isDarkMode, isCloudEnabled }) => {
const { trackUiMetric } = getServices();
const canAccessIntegrations = application.capabilities.navLinks.integrations;
if (canAccessIntegrations) {
@ -67,12 +68,30 @@ export const AddData: FC<Props> = ({ addBasePath, application, isDarkMode }) =>
<EuiSpacer />
<EuiFlexGroup gutterSize="m" responsive={false} wrap>
{isCloudEnabled && (
<EuiFlexItem grow={false}>
{/* eslint-disable-next-line @elastic/eui/href-or-on-click */}
<EuiButton
data-test-subj="guidedOnboardingLink"
fill
href={addBasePath('#/getting_started')}
onClick={(event: MouseEvent) => {
trackUiMetric(METRIC_TYPE.CLICK, 'guided_onboarding_link');
}}
>
<FormattedMessage
id="home.addData.guidedOnboardingLinkLabel"
defaultMessage="Launch Guided setup"
/>
</EuiButton>
</EuiFlexItem>
)}
<EuiFlexItem grow={false}>
<RedirectAppLinks application={application}>
{/* eslint-disable-next-line @elastic/eui/href-or-on-click */}
<EuiButton
data-test-subj="homeAddData"
fill
fill={!isCloudEnabled}
href={addBasePath('/app/integrations/browse')}
iconType="plusInCircle"
onClick={(event: MouseEvent) => {

View file

@ -59,6 +59,7 @@ describe('home', () => {
return `base_path/${url}`;
},
hasUserDataView: jest.fn(async () => true),
isCloudEnabled: false,
};
});
@ -230,6 +231,14 @@ describe('home', () => {
expect(component.find(Welcome).exists()).toBe(false);
});
test('should redirect to guided onboarding on Cloud instead of welcome screen', async () => {
defaultProps.isCloudEnabled = true;
const component = await renderHome();
expect(component.find(Welcome).exists()).toBe(false);
});
});
describe('isNewKibanaInstance', () => {

View file

@ -33,6 +33,7 @@ export interface HomeProps {
localStorage: Storage;
urlBasePath: string;
hasUserDataView: () => Promise<boolean>;
isCloudEnabled: boolean;
}
interface State {
@ -126,7 +127,7 @@ export class Home extends Component<HomeProps, State> {
}
private renderNormal() {
const { addBasePath, solutions } = this.props;
const { addBasePath, solutions, isCloudEnabled } = this.props;
const { application, trackUiMetric } = getServices();
const isDarkMode = getServices().uiSettings?.get('theme:darkMode') || false;
const devTools = this.findDirectoryById('console');
@ -148,7 +149,12 @@ export class Home extends Component<HomeProps, State> {
>
<SolutionsSection addBasePath={addBasePath} solutions={solutions} />
<AddData addBasePath={addBasePath} application={application} isDarkMode={isDarkMode} />
<AddData
addBasePath={addBasePath}
application={application}
isDarkMode={isDarkMode}
isCloudEnabled={isCloudEnabled}
/>
<ManageData
addBasePath={addBasePath}
@ -182,12 +188,18 @@ export class Home extends Component<HomeProps, State> {
public render() {
const { isLoading, isWelcomeEnabled, isNewKibanaInstance } = this.state;
const { isCloudEnabled } = this.props;
const { application } = getServices();
if (isWelcomeEnabled) {
if (isLoading) {
return this.renderLoading();
}
if (isNewKibanaInstance) {
if (isCloudEnabled) {
application.navigateToUrl('./home#/getting_started');
return;
}
return this.renderWelcome();
}
}

View file

@ -79,6 +79,7 @@ export function HomeApp({ directories, solutions }) {
localStorage={localStorage}
urlBasePath={getBasePath()}
hasUserDataView={() => dataViewsService.hasUserDataView()}
isCloudEnabled={isCloudEnabled}
/>
</Route>
<Redirect to="/" />