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:
parent
bcdfea7221
commit
23679a6594
2 changed files with 30 additions and 21 deletions
|
@ -6,19 +6,16 @@
|
||||||
*/
|
*/
|
||||||
|
|
||||||
import React, { memo, useState, useEffect } from 'react';
|
import React, { memo, useState, useEffect } from 'react';
|
||||||
import { BehaviorSubject } from 'rxjs';
|
|
||||||
import { FormattedMessage } from '@kbn/i18n/react';
|
import { FormattedMessage } from '@kbn/i18n/react';
|
||||||
import { EuiButtonEmpty } from '@elastic/eui';
|
import { EuiButtonEmpty } from '@elastic/eui';
|
||||||
import type { TutorialDirectoryHeaderLinkComponent } from 'src/plugins/home/public';
|
import type { TutorialDirectoryHeaderLinkComponent } from 'src/plugins/home/public';
|
||||||
import { useLink, useCapabilities } from '../../hooks';
|
import { RedirectAppLinks } from '../../../../../../../../src/plugins/kibana_react/public';
|
||||||
|
import { useLink, useCapabilities, useStartServices } from '../../hooks';
|
||||||
const tutorialDirectoryNoticeState$ = new BehaviorSubject({
|
import { tutorialDirectoryNoticeState$ } from './tutorial_directory_notice';
|
||||||
settingsDataLoaded: false,
|
|
||||||
hasSeenNotice: false,
|
|
||||||
});
|
|
||||||
|
|
||||||
const TutorialDirectoryHeaderLink: TutorialDirectoryHeaderLinkComponent = memo(() => {
|
const TutorialDirectoryHeaderLink: TutorialDirectoryHeaderLinkComponent = memo(() => {
|
||||||
const { getHref } = useLink();
|
const { getHref } = useLink();
|
||||||
|
const { application } = useStartServices();
|
||||||
const { show: hasIngestManager } = useCapabilities();
|
const { show: hasIngestManager } = useCapabilities();
|
||||||
const [noticeState, setNoticeState] = useState({
|
const [noticeState, setNoticeState] = useState({
|
||||||
settingsDataLoaded: false,
|
settingsDataLoaded: false,
|
||||||
|
@ -33,12 +30,14 @@ const TutorialDirectoryHeaderLink: TutorialDirectoryHeaderLinkComponent = memo((
|
||||||
}, []);
|
}, []);
|
||||||
|
|
||||||
return hasIngestManager && noticeState.settingsDataLoaded && noticeState.hasSeenNotice ? (
|
return hasIngestManager && noticeState.settingsDataLoaded && noticeState.hasSeenNotice ? (
|
||||||
<EuiButtonEmpty size="s" iconType="link" flush="right" href={getHref('overview')}>
|
<RedirectAppLinks application={application}>
|
||||||
<FormattedMessage
|
<EuiButtonEmpty size="s" iconType="link" flush="right" href={getHref('overview')}>
|
||||||
id="xpack.fleet.homeIntegration.tutorialDirectory.fleetAppButtonText"
|
<FormattedMessage
|
||||||
defaultMessage="Try Fleet Beta"
|
id="xpack.fleet.homeIntegration.tutorialDirectory.fleetAppButtonText"
|
||||||
/>
|
defaultMessage="Try Fleet Beta"
|
||||||
</EuiButtonEmpty>
|
/>
|
||||||
|
</EuiButtonEmpty>
|
||||||
|
</RedirectAppLinks>
|
||||||
) : null;
|
) : null;
|
||||||
});
|
});
|
||||||
|
|
||||||
|
|
|
@ -19,7 +19,14 @@ import {
|
||||||
EuiSpacer,
|
EuiSpacer,
|
||||||
} from '@elastic/eui';
|
} from '@elastic/eui';
|
||||||
import type { TutorialDirectoryNoticeComponent } from 'src/plugins/home/public';
|
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)`
|
const FlexItemButtonWrapper = styled(EuiFlexItem)`
|
||||||
&&& {
|
&&& {
|
||||||
|
@ -27,13 +34,14 @@ const FlexItemButtonWrapper = styled(EuiFlexItem)`
|
||||||
}
|
}
|
||||||
`;
|
`;
|
||||||
|
|
||||||
const tutorialDirectoryNoticeState$ = new BehaviorSubject({
|
export const tutorialDirectoryNoticeState$ = new BehaviorSubject({
|
||||||
settingsDataLoaded: false,
|
settingsDataLoaded: false,
|
||||||
hasSeenNotice: false,
|
hasSeenNotice: false,
|
||||||
});
|
});
|
||||||
|
|
||||||
const TutorialDirectoryNotice: TutorialDirectoryNoticeComponent = memo(() => {
|
const TutorialDirectoryNotice: TutorialDirectoryNoticeComponent = memo(() => {
|
||||||
const { getHref } = useLink();
|
const { getHref } = useLink();
|
||||||
|
const { application } = useStartServices();
|
||||||
const { show: hasIngestManager } = useCapabilities();
|
const { show: hasIngestManager } = useCapabilities();
|
||||||
const { data: settingsData, isLoading } = useGetSettings();
|
const { data: settingsData, isLoading } = useGetSettings();
|
||||||
const [dismissedNotice, setDismissedNotice] = useState<boolean>(false);
|
const [dismissedNotice, setDismissedNotice] = useState<boolean>(false);
|
||||||
|
@ -98,12 +106,14 @@ const TutorialDirectoryNotice: TutorialDirectoryNoticeComponent = memo(() => {
|
||||||
<EuiFlexGroup gutterSize="s">
|
<EuiFlexGroup gutterSize="s">
|
||||||
<FlexItemButtonWrapper grow={false}>
|
<FlexItemButtonWrapper grow={false}>
|
||||||
<div>
|
<div>
|
||||||
<EuiButton size="s" href={getHref('overview')}>
|
<RedirectAppLinks application={application}>
|
||||||
<FormattedMessage
|
<EuiButton size="s" href={getHref('overview')}>
|
||||||
id="xpack.fleet.homeIntegration.tutorialDirectory.fleetAppButtonText"
|
<FormattedMessage
|
||||||
defaultMessage="Try Fleet Beta"
|
id="xpack.fleet.homeIntegration.tutorialDirectory.fleetAppButtonText"
|
||||||
/>
|
defaultMessage="Try Fleet Beta"
|
||||||
</EuiButton>
|
/>
|
||||||
|
</EuiButton>
|
||||||
|
</RedirectAppLinks>
|
||||||
</div>
|
</div>
|
||||||
</FlexItemButtonWrapper>
|
</FlexItemButtonWrapper>
|
||||||
<FlexItemButtonWrapper grow={false}>
|
<FlexItemButtonWrapper grow={false}>
|
||||||
|
|
Loading…
Reference in a new issue