feat(slo): add feedback button (#155468)

x-pack/plugins/observability/public/components/slo/feedback_button/feedback_button.tsx

@@ -0,0 +1,28 @@
+/*
+ * 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 } from '@elastic/eui';
+import { i18n } from '@kbn/i18n';
+import React from 'react';
+
+const SLO_FEEDBACK_LINK = 'https://ela.st/slo-feedback';
+
+export function FeedbackButton() {
+  return (
+    <EuiButton
+      data-test-subj="sloFeedbackButton"
+      href={SLO_FEEDBACK_LINK}
+      target="_blank"
+      color="warning"
+      iconType="editorComment"
+    >
+      {i18n.translate('xpack.observability.slo.feedbackButtonLabel', {
+        defaultMessage: 'Tell us what you think!',
+      })}
+    </EuiButton>
+  );
+}

x-pack/plugins/observability/public/pages/slo_details/slo_details.tsx

@@ -26,6 +26,7 @@ import { paths } from '../../config/paths';
 import type { SloDetailsPathParams } from './types';
 import type { ObservabilityAppServices } from '../../application/types';
 import { AutoRefreshButton } from '../slos/components/auto_refresh_button';
+import { FeedbackButton } from '../../components/slo/feedback_button/feedback_button';
 
 export function SloDetailsPage() {
   const {
@@ -69,6 +70,7 @@ export function SloDetailsPage() {
             isAutoRefreshing={isAutoRefreshing}
             onClick={handleToggleAutoRefresh}
           />,
+          <FeedbackButton />,
         ],
         bottomBorder: false,
       }}

x-pack/plugins/observability/public/pages/slo_edit/slo_edit.tsx

@@ -16,6 +16,7 @@ import { useBreadcrumbs } from '../../hooks/use_breadcrumbs';
 import { useFetchSloDetails } from '../../hooks/slo/use_fetch_slo_details';
 import { useLicense } from '../../hooks/use_license';
 import { SloEditForm } from './components/slo_edit_form';
+import { FeedbackButton } from '../../components/slo/feedback_button/feedback_button';
 
 export function SloEditPage() {
   const {
@@ -58,7 +59,7 @@ export function SloEditPage() {
           : i18n.translate('xpack.observability.sloCreatePageTitle', {
               defaultMessage: 'Create new SLO',
             }),
-        rightSideItems: [],
+        rightSideItems: [<FeedbackButton />],
         bottomBorder: false,
       }}
       data-test-subj="slosEditPage"

x-pack/plugins/observability/public/pages/slos/slos.tsx

@@ -21,6 +21,7 @@ import { AutoRefreshButton } from './components/auto_refresh_button';
 import { paths } from '../../config/paths';
 import type { ObservabilityAppServices } from '../../application/types';
 import { HeaderTitle } from './components/header_title';
+import { FeedbackButton } from '../../components/slo/feedback_button/feedback_button';
 
 export function SlosPage() {
   const {
@@ -69,7 +70,7 @@ export function SlosPage() {
         rightSideItems: [
           <EuiButton
             color="primary"
-            data-test-subj="slosPage-createNewSloButton"
+            data-test-subj="slosPageCreateNewSloButton"
             disabled={!hasWriteCapabilities}
             fill
             onClick={handleClickCreateSlo}
@@ -82,6 +83,7 @@ export function SlosPage() {
             isAutoRefreshing={isAutoRefreshing}
             onClick={handleToggleAutoRefresh}
           />,
+          <FeedbackButton />,
         ],
         bottomBorder: false,
       }}