[Infrastructure UI] Inventory page survey (#150233)

Closes  #149672
## Summary

This PR adds a link and a toast navigating to a survey about k8s. 

## Implementation details
For adding the toast I used `EuiGlobalToastList` component and not the
notification service because I want it to be rendered only in the scope
of the page on a certain condition and it gives the same
experience/layout. Using notification service will also keep it while
navigating between different apps.
I decided to keep the link and the toast in one component as they will
be rendered under the same condition.

## Testing
Go to inventory page
Select in `Show` drop-down `Kubernetes Pods`
You should see the link and the toast: 
<img width="2349" alt="image"
src="https://user-images.githubusercontent.com/14139027/216448879-b65f8a22-500b-4103-9dc9-4c90e6518dcc.png">

If the toast is closed or the `Start Survey` link is clicked it should
not appear again during the browser session.

~~⚠️ The survey will be updated [currently pointing to hosts view
survey]~~ - Updated 
This commit is contained in:
jennypavlova 2023-02-06 17:04:55 +01:00 committed by GitHub
parent 7423b70b8a
commit 927b477846
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 92 additions and 1 deletions

View file

@ -0,0 +1,90 @@
/*
* Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
* or more contributor license agreements. Licensed under the Elastic License
* 2.0; you may not use this file except in compliance with the Elastic License
* 2.0.
*/
import { EuiButton, EuiFlexGroup, EuiFlexItem, EuiGlobalToastList } from '@elastic/eui';
import React from 'react';
import { FormattedMessage } from '@kbn/i18n-react';
import useLocalStorage from 'react-use/lib/useLocalStorage';
import { useWaffleOptionsContext } from '../hooks/use_waffle_options';
const KUBERNETES_TOAST_STORAGE_KEY = 'kubernetesToastKey';
const KUBERNETES_FEEDBACK_LINK = 'https://ela.st/k8s-feedback';
export const SurveyKubernetes = () => {
const { nodeType } = useWaffleOptionsContext();
const podNodeType: typeof nodeType = 'pod';
const [isToastSeen, setIsToastSeen] = useLocalStorage(KUBERNETES_TOAST_STORAGE_KEY, false);
const markToastAsSeen = () => setIsToastSeen(true);
return (
<>
{nodeType === podNodeType && (
<>
<EuiButton
href={KUBERNETES_FEEDBACK_LINK}
target="_blank"
color="warning"
iconType="editorComment"
data-test-subj="infra-kubernetes-feedback-link"
>
<FormattedMessage
id="xpack.infra.homePage.tellUsWhatYouThinkK8sLink"
defaultMessage="Tell us what you think! (K8s)"
/>
</EuiButton>
{!isToastSeen && (
<EuiGlobalToastList
toastLifeTimeMs={Infinity}
dismissToast={markToastAsSeen}
toasts={[
{
id: 'k8s-toast',
title: (
<FormattedMessage
id="xpack.infra.homePage.kubernetesToastTitle"
defaultMessage="We need your help!"
/>
),
color: 'primary',
iconType: 'help',
toastLifeTimeMs: 0x7fffffff, // Biggest possible lifetime because we control when it should be visible using isToastSeen
text: (
<>
<p>
<FormattedMessage
id="xpack.infra.homePage.kubernetesToastText"
defaultMessage="Help us design your Kubernetes experience by completing a feedback survey."
/>
</p>
<EuiFlexGroup justifyContent="flexEnd" gutterSize="s">
<EuiFlexItem grow={false}>
<EuiButton
data-test-subj="infra-toast-kubernetes-survey-start"
href={KUBERNETES_FEEDBACK_LINK}
target="_blank"
onClickCapture={markToastAsSeen}
size="s"
>
<FormattedMessage
id="xpack.infra.homePage.kubernetesToastButton"
defaultMessage="Start survey"
/>
</EuiButton>
</EuiFlexItem>
</EuiFlexGroup>
</>
),
},
]}
/>
)}
</>
)}
</>
);
};

View file

@ -23,6 +23,7 @@ import { inventoryTitle } from '../../../translations';
import { SavedViews } from './components/saved_views';
import { SnapshotContainer } from './components/snapshot_container';
import { fullHeightContentStyles } from '../../../page_template.styles';
import { SurveyKubernetes } from './components/survey_kubernetes';
export const SnapshotPage = () => {
const {
@ -59,7 +60,7 @@ export const SnapshotPage = () => {
hasData={metricIndicesExist}
pageHeader={{
pageTitle: inventoryTitle,
rightSideItems: [<SavedViews />],
rightSideItems: [<SavedViews />, <SurveyKubernetes />],
}}
pageSectionProps={{
contentProps: {