[Infrastructure UI]: Add feedback button for hosts page (elastic#148555)

## 📓 Summary Closes elastic#148379 This PR replaces the existing link to get feedback on the forum with a button that brings on a form with predefined questions on the Hosts page. ## 🧪 Testing Navigate to the `Hosts`view and click the top-right button saying "_Tell us what you think!_". <img width="1502" alt="solution" src="https://user-images.githubusercontent.com/34506779/211347429-c8f338c3-8bb0-4304-8b58-6d140e301554.png"> Co-authored-by: Marco Antonio Ghiani <marcoantonio.ghiani@elastic.co> Co-authored-by: kibanamachine <42973632+kibanamachine@users.noreply.github.com>
angorayc · Jan 10, 2023 · ef2faad · ef2faad
1 parent 5c8b6f2
commit ef2faad
Show file tree

Hide file tree

Showing 4 changed files with 47 additions and 48 deletions.
diff --git a/x-pack/plugins/infra/public/pages/metrics/hosts/index.tsx b/x-pack/plugins/infra/public/pages/metrics/hosts/index.tsx
@@ -5,13 +5,12 @@
  * 2.0.
  */
 
-import { EuiErrorBoundary } from '@elastic/eui';
+import { EuiButton, EuiErrorBoundary } from '@elastic/eui';
 import React from 'react';
 import { useTrackPageview } from '@kbn/observability-plugin/public';
 import { APP_WRAPPER_CLASS } from '@kbn/core/public';
 import { FormattedMessage } from '@kbn/i18n-react';
 import { css } from '@emotion/react';
-import { EuiLink } from '@elastic/eui';
 import { SourceErrorPage } from '../../../components/source_error_page';
 import { SourceLoadingPage } from '../../../components/source_loading_page';
 import { useSourceContext } from '../../../containers/metrics_source';
@@ -24,9 +23,9 @@ import { UnifiedSearchProvider } from './hooks/use_unified_search';
 import { HostContainer } from './components/hosts_container';
 import { ExperimentalBadge } from './components/experimental_badge';
 
-export const HostsPage = () => {
-  const HOSTS_FEEDBACK_LINK = 'https://ela.st/feedback-host-observability';
+const HOSTS_FEEDBACK_LINK = 'https://ela.st/host-feedback';
 
+export const HostsPage = () => {
   const {
     hasFailedLoadingSource,
     isLoading,
@@ -48,47 +47,50 @@ export const HostsPage = () => {
       {isLoading && !source ? (
         <SourceLoadingPage />
       ) : metricIndicesExist && source ? (
-        <>
-          <div className={APP_WRAPPER_CLASS}>
-            <MetricsPageTemplate
-              hasData={metricIndicesExist}
-              pageHeader={{
-                alignItems: 'center',
-                pageTitle: (
-                  <div
-                    css={css`
-                      display: flex;
-                      align-items: center;
-                      gap: 0.75rem;
-                    `}
-                  >
-                    <h1>{hostsTitle}</h1>
-                    <ExperimentalBadge />
-                  </div>
-                ),
-                rightSideItems: [
-                  <EuiLink href={HOSTS_FEEDBACK_LINK} target="_blank">
-                    <FormattedMessage
-                      id="xpack.infra.hostsPage.giveFeedbackLink"
-                      defaultMessage="Give feedback"
-                    />
-                  </EuiLink>,
-                ],
-              }}
-              pageSectionProps={{
-                contentProps: {
-                  css: fullHeightContentStyles,
-                },
-              }}
-            >
-              <MetricsDataViewProvider metricAlias={source.configuration.metricAlias}>
-                <UnifiedSearchProvider>
-                  <HostContainer />
-                </UnifiedSearchProvider>
-              </MetricsDataViewProvider>
-            </MetricsPageTemplate>
-          </div>
-        </>
+        <div className={APP_WRAPPER_CLASS}>
+          <MetricsPageTemplate
+            hasData={metricIndicesExist}
+            pageHeader={{
+              alignItems: 'center',
+              pageTitle: (
+                <div
+                  css={css`
+                    display: flex;
+                    align-items: center;
+                    gap: 0.75rem;
+                  `}
+                >
+                  <h1>{hostsTitle}</h1>
+                  <ExperimentalBadge />
+                </div>
+              ),
+              rightSideItems: [
+                <EuiButton
+                  href={HOSTS_FEEDBACK_LINK}
+                  target="_blank"
+                  color="warning"
+                  iconType="editorComment"
+                >
+                  <FormattedMessage
+                    id="xpack.infra.hostsPage.tellUsWhatYouThinkLink"
+                    defaultMessage="Tell us what you think!"
+                  />
+                </EuiButton>,
+              ],
+            }}
+            pageSectionProps={{
+              contentProps: {
+                css: fullHeightContentStyles,
+              },
+            }}
+          >
+            <MetricsDataViewProvider metricAlias={source.configuration.metricAlias}>
+              <UnifiedSearchProvider>
+                <HostContainer />
+              </UnifiedSearchProvider>
+            </MetricsDataViewProvider>
+          </MetricsPageTemplate>
+        </div>
       ) : hasFailedLoadingSource ? (
         <SourceErrorPage errorMessage={loadSourceFailureMessage || ''} retry={loadSource} />
       ) : (

diff --git a/x-pack/plugins/translations/translations/fr-FR.json b/x-pack/plugins/translations/translations/fr-FR.json
@@ -16533,7 +16533,6 @@
     "xpack.infra.homePage.toolbar.kqlSearchFieldPlaceholder": "Rechercher des données d'infrastructure… (par exemple host.name:host-1)",
     "xpack.infra.hostsPage.experimentalBadgeDescription": "Cette fonctionnalité est en version d'évaluation technique et pourra être modifiée ou retirée complètement dans une future version. Elastic s'efforcera au maximum de corriger tout problème, mais les fonctionnalités en version d'évaluation technique ne sont pas soumises aux accords de niveau de service d'assistance des fonctionnalités officielles en disponibilité générale.",
     "xpack.infra.hostsPage.experimentalBadgeLabel": "Version d'évaluation technique",
-    "xpack.infra.hostsPage.giveFeedbackLink": "Donner un retour",
     "xpack.infra.hostsTable.averageMemoryTotalColumnHeader": "Total de la mémoire (moy.)",
     "xpack.infra.hostsTable.averageMemoryUsageColumnHeader": "Utilisation de la mémoire (moy.)",
     "xpack.infra.hostsTable.averageRxColumnHeader": "RX (moy.)",

diff --git a/x-pack/plugins/translations/translations/ja-JP.json b/x-pack/plugins/translations/translations/ja-JP.json
@@ -16519,7 +16519,6 @@
     "xpack.infra.homePage.toolbar.kqlSearchFieldPlaceholder": "インフラストラクチャデータを検索…（例：host.name:host-1）",
     "xpack.infra.hostsPage.experimentalBadgeDescription": "この機能はテクニカルプレビュー中であり、将来のリリースでは変更されたり完全に削除されたりする場合があります。Elasticは最善の努力を講じてすべての問題の修正に努めますが、テクニカルプレビュー中の機能には正式なGA機能のサポートSLAが適用されません。",
     "xpack.infra.hostsPage.experimentalBadgeLabel": "テクニカルプレビュー",
-    "xpack.infra.hostsPage.giveFeedbackLink": "フィードバックを作成する",
     "xpack.infra.hostsTable.averageMemoryTotalColumnHeader": "メモリー合計（平均）",
     "xpack.infra.hostsTable.averageMemoryUsageColumnHeader": "メモリー使用状況（平均）",
     "xpack.infra.hostsTable.averageRxColumnHeader": "RX（平均）",

diff --git a/x-pack/plugins/translations/translations/zh-CN.json b/x-pack/plugins/translations/translations/zh-CN.json
@@ -16538,7 +16538,6 @@
     "xpack.infra.homePage.toolbar.kqlSearchFieldPlaceholder": "搜索基础设施数据……（例如 host.name:host-1）",
     "xpack.infra.hostsPage.experimentalBadgeDescription": "此功能处于技术预览状态，在未来版本中可能会更改或完全移除。Elastic 将尽最大努力来修复任何问题，但处于技术预览状态的功能不受正式 GA 功能支持 SLA 的约束。",
     "xpack.infra.hostsPage.experimentalBadgeLabel": "技术预览",
-    "xpack.infra.hostsPage.giveFeedbackLink": "反馈",
     "xpack.infra.hostsTable.averageMemoryTotalColumnHeader": "内存合计（平均值）",
     "xpack.infra.hostsTable.averageMemoryUsageColumnHeader": "内存使用率（平均值）",
     "xpack.infra.hostsTable.averageRxColumnHeader": "RX（平均值）",