Fix state sharing between home integration components, prevent full page reload when clicking Fleet link (#90334) (#90475)

Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com>

Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com>
This commit is contained in:
Jen Huang 2021-02-05 11:51:29 -08:00 committed by GitHub
parent bcdfea7221
commit 23679a6594
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 30 additions and 21 deletions

View file

@ -6,19 +6,16 @@
*/
import React, { memo, useState, useEffect } from 'react';
import { BehaviorSubject } from 'rxjs';
import { FormattedMessage } from '@kbn/i18n/react';
import { EuiButtonEmpty } from '@elastic/eui';
import type { TutorialDirectoryHeaderLinkComponent } from 'src/plugins/home/public';
import { useLink, useCapabilities } from '../../hooks';
const tutorialDirectoryNoticeState$ = new BehaviorSubject({
settingsDataLoaded: false,
hasSeenNotice: false,
});
import { RedirectAppLinks } from '../../../../../../../../src/plugins/kibana_react/public';
import { useLink, useCapabilities, useStartServices } from '../../hooks';
import { tutorialDirectoryNoticeState$ } from './tutorial_directory_notice';
const TutorialDirectoryHeaderLink: TutorialDirectoryHeaderLinkComponent = memo(() => {
const { getHref } = useLink();
const { application } = useStartServices();
const { show: hasIngestManager } = useCapabilities();
const [noticeState, setNoticeState] = useState({
settingsDataLoaded: false,
@ -33,12 +30,14 @@ const TutorialDirectoryHeaderLink: TutorialDirectoryHeaderLinkComponent = memo((
}, []);
return hasIngestManager && noticeState.settingsDataLoaded && noticeState.hasSeenNotice ? (
<EuiButtonEmpty size="s" iconType="link" flush="right" href={getHref('overview')}>
<FormattedMessage
id="xpack.fleet.homeIntegration.tutorialDirectory.fleetAppButtonText"
defaultMessage="Try Fleet Beta"
/>
</EuiButtonEmpty>
<RedirectAppLinks application={application}>
<EuiButtonEmpty size="s" iconType="link" flush="right" href={getHref('overview')}>
<FormattedMessage
id="xpack.fleet.homeIntegration.tutorialDirectory.fleetAppButtonText"
defaultMessage="Try Fleet Beta"
/>
</EuiButtonEmpty>
</RedirectAppLinks>
) : null;
});

View file

@ -19,7 +19,14 @@ import {
EuiSpacer,
} from '@elastic/eui';
import type { TutorialDirectoryNoticeComponent } from 'src/plugins/home/public';
import { sendPutSettings, useGetSettings, useLink, useCapabilities } from '../../hooks';
import { RedirectAppLinks } from '../../../../../../../../src/plugins/kibana_react/public';
import {
sendPutSettings,
useGetSettings,
useLink,
useCapabilities,
useStartServices,
} from '../../hooks';
const FlexItemButtonWrapper = styled(EuiFlexItem)`
&&& {
@ -27,13 +34,14 @@ const FlexItemButtonWrapper = styled(EuiFlexItem)`
}
`;
const tutorialDirectoryNoticeState$ = new BehaviorSubject({
export const tutorialDirectoryNoticeState$ = new BehaviorSubject({
settingsDataLoaded: false,
hasSeenNotice: false,
});
const TutorialDirectoryNotice: TutorialDirectoryNoticeComponent = memo(() => {
const { getHref } = useLink();
const { application } = useStartServices();
const { show: hasIngestManager } = useCapabilities();
const { data: settingsData, isLoading } = useGetSettings();
const [dismissedNotice, setDismissedNotice] = useState<boolean>(false);
@ -98,12 +106,14 @@ const TutorialDirectoryNotice: TutorialDirectoryNoticeComponent = memo(() => {
<EuiFlexGroup gutterSize="s">
<FlexItemButtonWrapper grow={false}>
<div>
<EuiButton size="s" href={getHref('overview')}>
<FormattedMessage
id="xpack.fleet.homeIntegration.tutorialDirectory.fleetAppButtonText"
defaultMessage="Try Fleet Beta"
/>
</EuiButton>
<RedirectAppLinks application={application}>
<EuiButton size="s" href={getHref('overview')}>
<FormattedMessage
id="xpack.fleet.homeIntegration.tutorialDirectory.fleetAppButtonText"
defaultMessage="Try Fleet Beta"
/>
</EuiButton>
</RedirectAppLinks>
</div>
</FlexItemButtonWrapper>
<FlexItemButtonWrapper grow={false}>