From c0c827009bbc607dba6832916f08beefcd26fdb7 Mon Sep 17 00:00:00 2001
From: jennypavlova <dzheni.pavlova@elastic.co>
Date: Wed, 9 Aug 2023 09:28:37 +0200
Subject: [PATCH] [Infra UI] Add feedback button to Infra Metrics Explorer
 (#163188)

## Summary

This PR adds a feedback button to Metrics Explorer

## Testing
- Go to Infrastructure > Metrics Explorer
   - The feedback button (Tell us what you think!) should be visible

<img width="1702" alt="image"
src="https://github.com/elastic/kibana/assets/14139027/0d94371c-6269-4595-9b10-c85d1bcc66d9">

- When you click on the link the Kibana version should be prefilled (no
need to submit just go to step 4)

<img width="1193" alt="image"
src="https://github.com/elastic/kibana/assets/14139027/f03d641b-83f8-4a08-ad12-e279303e4a61">
---
 .../public/pages/metrics/metrics_explorer/index.tsx   | 11 ++++++++++-
 x-pack/test/functional/apps/infra/metrics_explorer.ts |  4 ++++
 .../functional/page_objects/infra_metrics_explorer.ts |  5 +++++
 3 files changed, 19 insertions(+), 1 deletion(-)

diff --git a/x-pack/plugins/infra/public/pages/metrics/metrics_explorer/index.tsx b/x-pack/plugins/infra/public/pages/metrics/metrics_explorer/index.tsx
index c8faac5327de9..4e1328fc3ae7e 100644
--- a/x-pack/plugins/infra/public/pages/metrics/metrics_explorer/index.tsx
+++ b/x-pack/plugins/infra/public/pages/metrics/metrics_explorer/index.tsx
@@ -9,6 +9,7 @@ import { EuiErrorBoundary } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 import React, { useEffect, useState } from 'react';
 import { useTrackPageview } from '@kbn/observability-shared-plugin/public';
+import { FeatureFeedbackButton } from '../../../components/feature_feedback_button';
 import { SourceLoadingPage } from '../../../components/source_loading_page';
 import { useMetricsExplorerViews } from '../../../hooks/use_metrics_explorer_views';
 import { MetricsSourceConfigurationProperties } from '../../../../common/metrics_sources';
@@ -27,6 +28,8 @@ interface MetricsExplorerPageProps {
   derivedIndexPattern: DerivedIndexPattern;
 }
 
+const METRICS_EXPLORER_FEEDBACK_URL = 'https://ela.st/survey-infra-metricsexplorer?usp=pp_url';
+
 export const MetricsExplorerPage = ({ source, derivedIndexPattern }: MetricsExplorerPageProps) => {
   const [enabled, setEnabled] = useState(false);
   const {
@@ -91,7 +94,13 @@ export const MetricsExplorerPage = ({ source, derivedIndexPattern }: MetricsExpl
         hasData={metricIndicesExist}
         pageHeader={{
           pageTitle: metricsExplorerTitle,
-          rightSideItems: [<SavedViews viewState={viewState} />],
+          rightSideItems: [
+            <SavedViews viewState={viewState} />,
+            <FeatureFeedbackButton
+              formUrl={METRICS_EXPLORER_FEEDBACK_URL}
+              data-test-subj="infraMetricsExplorerFeedbackLink"
+            />,
+          ],
         }}
       >
         <MetricsExplorerToolbar
diff --git a/x-pack/test/functional/apps/infra/metrics_explorer.ts b/x-pack/test/functional/apps/infra/metrics_explorer.ts
index d957db48742af..1f0490bf7f86b 100644
--- a/x-pack/test/functional/apps/infra/metrics_explorer.ts
+++ b/x-pack/test/functional/apps/infra/metrics_explorer.ts
@@ -97,6 +97,10 @@ export default ({ getPageObjects, getService }: FtrProviderContext) => {
         const chartType = await pageObjects.infraMetricsExplorer.getChartType(charts[0]);
         expect(chartType).to.equal('bar chart');
       });
+
+      it('renders the metrics explorer survey link', async () => {
+        await pageObjects.infraMetricsExplorer.ensureMetricsExplorerFeedbackLinkIsVisible();
+      });
     });
 
     describe('Saved Views', function () {
diff --git a/x-pack/test/functional/page_objects/infra_metrics_explorer.ts b/x-pack/test/functional/page_objects/infra_metrics_explorer.ts
index b46563cc2d3b5..e8d9f878b43c5 100644
--- a/x-pack/test/functional/page_objects/infra_metrics_explorer.ts
+++ b/x-pack/test/functional/page_objects/infra_metrics_explorer.ts
@@ -56,5 +56,10 @@ export function InfraMetricsExplorerProvider({ getService }: FtrProviderContext)
       const radioInput = await chartRadio.findByCssSelector(`label[for="${type}"]`);
       return await radioInput.click();
     },
+
+    async ensureMetricsExplorerFeedbackLinkIsVisible() {
+      await testSubjects.missingOrFail('loadingMessage', { timeout: 20000 });
+      await testSubjects.existOrFail('infraMetricsExplorerFeedbackLink');
+    },
   };
 }