[Log Explorer] Add link to feedback survey (elastic#169079)

## 📓 Summary

Closes https://github.com/elastic/observability-dev/issues/2824

We want to gather feedback on the new features introduced with Log
Explorer. This PR adds a link to open a survey on a new tab.

<img width="1998" alt="Screenshot 2023-10-17 at 12 05 04"
src="https://github.com/elastic/kibana/assets/34506779/36bc15a5-ccc2-4f5a-9284-565829219473">

---------

Co-authored-by: Marco Antonio Ghiani <marcoantonio.ghiani@elastic.co>
Co-authored-by: kibanamachine <42973632+kibanamachine@users.noreply.github.com>

packages/kbn-optimizer/limits.yml

@@ -101,7 +101,7 @@ pageLoadAssetSize:
   noDataPage: 5000
   observability: 115443
   observabilityAIAssistant: 25000
-  observabilityLogExplorer: 23686
+  observabilityLogExplorer: 46650
   observabilityOnboarding: 19573
   observabilityShared: 52256
   osquery: 107090

x-pack/plugins/observability_log_explorer/common/translations.ts

@@ -35,3 +35,10 @@ export const onboardingLinkTitle = i18n.translate(
     defaultMessage: 'Add data',
   }
 );
+
+export const feedbackLinkTitle = i18n.translate(
+  'xpack.observabilityLogExplorer.feedbackLinkTitle',
+  {
+    defaultMessage: 'Give feedback',
+  }
+);

x-pack/plugins/observability_log_explorer/public/components/log_explorer_top_nav_menu.tsx

@@ -9,6 +9,7 @@ import React, { useEffect, useState } from 'react';
 import deepEqual from 'fast-deep-equal';
 import useObservable from 'react-use/lib/useObservable';
 import { type BehaviorSubject, distinctUntilChanged, filter, take } from 'rxjs';
+import styled from '@emotion/styled';
 import { HeaderMenuPortal } from '@kbn/observability-shared-plugin/public';
 import {
   EuiBetaBadge,
@@ -18,7 +19,6 @@ import {
   EuiHeaderLinks,
   EuiHeaderSection,
   EuiHeaderSectionItem,
-  useEuiTheme,
 } from '@elastic/eui';
 import { LogExplorerStateContainer } from '@kbn/log-explorer-plugin/public';
 import {
@@ -28,11 +28,14 @@ import {
 import { KibanaReactContextValue } from '@kbn/kibana-react-plugin/public';
 import { toMountPoint } from '@kbn/react-kibana-mount';
 import { css } from '@emotion/react';
+import { LOG_EXPLORER_FEEDBACK_LINK } from '@kbn/observability-shared-plugin/common';
+import { euiThemeVars } from '@kbn/ui-theme';
 import { PluginKibanaContextValue } from '../utils/use_kibana';
 import {
   betaBadgeDescription,
   betaBadgeTitle,
   discoverLinkTitle,
+  feedbackLinkTitle,
   onboardingLinkTitle,
 } from '../../common/translations';
 import { getRouterLinkProps } from '../utils/get_router_link_props';
@@ -69,8 +72,6 @@ const ServerlessTopNav = ({
   services,
   state$,
 }: Pick<LogExplorerTopNavMenuProps, 'services' | 'state$'>) => {
-  const { euiTheme } = useEuiTheme();
-
   return (
     <EuiHeader data-test-subj="logExplorerHeaderMenu">
       <EuiHeaderSection>
@@ -83,7 +84,7 @@ const ServerlessTopNav = ({
       <EuiHeaderSection
         side="right"
         css={css`
-          gap: ${euiTheme.size.m};
+          gap: ${euiThemeVars.euiSizeM};
         `}
       >
         <EuiHeaderSectionItem>
@@ -95,6 +96,10 @@ const ServerlessTopNav = ({
             alignment="middle"
           />
         </EuiHeaderSectionItem>
+        <EuiHeaderSectionItem>
+          <FeedbackLink />
+          <VerticalRule />
+        </EuiHeaderSectionItem>
         <EuiHeaderSectionItem>
           <OnboardingLink services={services} />
         </EuiHeaderSectionItem>
@@ -109,8 +114,6 @@ const StatefulTopNav = ({
   state$,
   theme$,
 }: LogExplorerTopNavMenuProps) => {
-  const { euiTheme } = useEuiTheme();
-
   /**
    * Since the breadcrumbsAppendExtension might be set only during a plugin start (e.g. search session)
    * we retrieve the latest valid extension in order to restore it once we unmount the beta badge.
@@ -130,7 +133,7 @@ const StatefulTopNav = ({
           <EuiHeaderSection
             data-test-subj="logExplorerHeaderMenu"
             css={css`
-              margin-left: ${euiTheme.size.m};
+              margin-left: ${euiThemeVars.euiSizeM};
             `}
           >
             <EuiHeaderSectionItem>
@@ -142,6 +145,9 @@ const StatefulTopNav = ({
                 alignment="middle"
               />
             </EuiHeaderSectionItem>
+            <EuiHeaderSectionItem>
+              <FeedbackLink />
+            </EuiHeaderSectionItem>
           </EuiHeaderSection>,
           { theme, i18n }
         ),
@@ -153,7 +159,7 @@ const StatefulTopNav = ({
         chrome.setBreadcrumbsAppendExtension(previousAppendExtension);
       }
     };
-  }, [euiTheme, services, previousAppendExtension]);
+  }, [services, previousAppendExtension]);
 
   return (
     <HeaderMenuPortal setHeaderActionMenu={setHeaderActionMenu} theme$={theme$}>
@@ -248,3 +254,24 @@ const OnboardingLink = React.memo(({ services }: Pick<LogExplorerTopNavMenuProps
     </EuiButton>
   );
 });
+
+const FeedbackLink = React.memo(() => {
+  return (
+    <EuiHeaderLink
+      color="primary"
+      href={LOG_EXPLORER_FEEDBACK_LINK}
+      iconType="popout"
+      iconSide="right"
+      iconSize="s"
+      target="_blank"
+    >
+      {feedbackLinkTitle}
+    </EuiHeaderLink>
+  );
+});
+
+const VerticalRule = styled.span`
+  width: 1px;
+  height: 20px;
+  background-color: ${euiThemeVars.euiColorLightShade};
+`;

x-pack/plugins/observability_log_explorer/tsconfig.json

@@ -32,7 +32,8 @@
     "@kbn/core-notifications-browser",
     "@kbn/core-mount-utils-browser-internal",
     "@kbn/xstate-utils",
-    "@kbn/shared-ux-utility"
+    "@kbn/shared-ux-utility",
+    "@kbn/ui-theme"
   ],
   "exclude": [
     "target/**/*"

x-pack/plugins/observability_shared/common/index.ts

@@ -139,3 +139,4 @@ export { ObservabilityTriggerId } from './trigger_ids';
 export { getInspectResponse } from './utils/get_inspect_response';
 
 export const LOGS_ONBOARDING_FEEDBACK_LINK = 'https://ela.st/logs-onboarding-feedback';
+export const LOG_EXPLORER_FEEDBACK_LINK = 'https://ela.st/explorer-feedback';