Extract feedback snippet to shared components folder and remove navigation solutionId prop

Author: angeles-mb

.github/CODEOWNERS

@@ -640,6 +640,7 @@ src/platform/packages/shared/shared-ux/chrome/navigation @elastic/appex-sharedux
 src/platform/packages/shared/shared-ux/code_editor/impl @elastic/appex-sharedux
 src/platform/packages/shared/shared-ux/code_editor/mocks @elastic/appex-sharedux
 src/platform/packages/shared/shared-ux/error_boundary @elastic/appex-sharedux
+src/platform/packages/shared/shared-ux/feedback_snippet/impl @elastic/appex-sharedux
 src/platform/packages/shared/shared-ux/file/context @elastic/appex-sharedux
 src/platform/packages/shared/shared-ux/file/file_picker/impl @elastic/appex-sharedux
 src/platform/packages/shared/shared-ux/file/file_upload/impl @elastic/appex-sharedux

package.json

@@ -971,6 +971,7 @@
     "@kbn/shared-ux-card-no-data-types": "link:src/platform/packages/shared/shared-ux/card/no_data/types",
     "@kbn/shared-ux-chrome-navigation": "link:src/platform/packages/shared/shared-ux/chrome/navigation",
     "@kbn/shared-ux-error-boundary": "link:src/platform/packages/shared/shared-ux/error_boundary",
+    "@kbn/shared-ux-feedback-snippet": "link:src/platform/packages/shared/shared-ux/feedback_snippet/impl",
     "@kbn/shared-ux-file-context": "link:src/platform/packages/shared/shared-ux/file/context",
     "@kbn/shared-ux-file-image": "link:src/platform/packages/shared/shared-ux/file/image/impl",
     "@kbn/shared-ux-file-picker": "link:src/platform/packages/shared/shared-ux/file/file_picker/impl",

src/core/packages/chrome/browser-internal/src/ui/project/sidenav_v2/navigation/navigation.tsx

@@ -25,6 +25,7 @@ import { RedirectNavigationAppLinks } from './redirect_app_links';
 import type { NavigationItems } from './to_navigation_items';
 import { toNavigationItems } from './to_navigation_items';
 import { PanelStateManager } from './panel_state_manager';
+import { NavigationFeedbackSnippet } from './navigation_feedback_snippet';
 
 export interface ChromeNavigationProps {
   // sidenav state
@@ -63,7 +64,7 @@ export const Navigation = (props: ChromeNavigationProps) => {
       <NavigationComponent
         items={navItems}
         logo={logoItem}
-        solutionId={solutionId}
+        sidePanelFooter={<NavigationFeedbackSnippet solutionId={solutionId} />}
         isCollapsed={props.isCollapsed}
         setWidth={props.setWidth}
         activeItemId={activeItemId}

src/core/packages/chrome/browser-internal/src/ui/project/sidenav_v2/navigation/navigation_feedback_snippet.tsx

@@ -0,0 +1,55 @@
+/*
+ * 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", the "GNU Affero General Public License v3.0 only", and the "Server Side
+ * Public License v 1"; you may not use this file except in compliance with, at
+ * your election, the "Elastic License 2.0", the "GNU Affero General Public
+ * License v3.0 only", or the "Server Side Public License, v 1".
+ */
+
+import React from 'react';
+import { FeedbackSnippet } from '@kbn/shared-ux-feedback-snippet';
+import type { SolutionId } from '@kbn/core-chrome-browser';
+import { FormattedMessage } from '@kbn/i18n-react';
+
+interface NavigationFeedbackSnippetProps {
+  solutionId: SolutionId;
+}
+
+const feedbackPanelLocalStorageKey = 'core.ui.chrome.sideNavigation.feedbackInteraction';
+const feedbackSnippetId = 'sideNavigationFeedback';
+
+const feedbackUrls: { [id in SolutionId]: string } = {
+  es: 'https://ela.st/search-nav-feedback',
+  chat: 'https://ela.st/search-nav-feedback',
+  oblt: 'https://ela.st/o11y-nav-feedback',
+  security: 'https://ela.st/security-nav-feedback',
+};
+
+const feedbackButtonMessage = (
+  <FormattedMessage
+    id="core.ui.chrome.sideNavigation.sideNavigation.feedbackButtonText"
+    defaultMessage="Navigation feedback"
+  />
+);
+
+const promptViewMessage = (
+  <FormattedMessage
+    id="core.ui.chrome.sideNavigation.feedbackPanel.promptTitle"
+    defaultMessage="How's the navigation working for you?"
+  />
+);
+
+export const NavigationFeedbackSnippet = ({ solutionId }: NavigationFeedbackSnippetProps) => {
+  const feedbackSurveyUrl = feedbackUrls[solutionId];
+
+  return (
+    <FeedbackSnippet
+      feedbackButtonMessage={feedbackButtonMessage}
+      feedbackSnippetId={feedbackSnippetId}
+      feedbackPanelLocalStorageKey={feedbackPanelLocalStorageKey}
+      promptViewMessage={promptViewMessage}
+      surveyUrl={feedbackSurveyUrl}
+    />
+  );
+};

src/core/packages/chrome/navigation/src/__stories__/navigation.stories.tsx

@@ -76,7 +76,6 @@ export default {
       iconType: LOGO.type,
     },
     setWidth: () => {},
-    solutionId: 'oblt',
   },
 } as Meta<PropsAndArgs>;
 
@@ -221,7 +220,6 @@ const Layout = ({ ...props }: PropsAndArgs) => {
               items={props.items}
               logo={props.logo}
               setWidth={setNavigationWidth}
-              solutionId={props.solutionId}
             />
           }
           sidebar={

src/core/packages/chrome/navigation/src/components/navigation.tsx

@@ -12,7 +12,6 @@ import React from 'react';
 import { useIsWithinBreakpoints } from '@elastic/eui';
 import { css } from '@emotion/react';
 
-import type { SolutionId } from '@kbn/core-chrome-browser';
 import { i18n } from '@kbn/i18n';
 import { FormattedMessage } from '@kbn/i18n-react';
 import type { MenuItem, NavigationStructure, SecondaryMenuItem, SideNavLogo } from '../../types';
@@ -32,9 +31,9 @@ export interface NavigationProps {
    */
   activeItemId?: string;
   /**
-   * The solution id, used for building feedback survey links.
+   * Content to display inside the side panel footer.
    */
-  solutionId: SolutionId;
+  sidePanelFooter?: React.ReactNode;
   /**
    * Whether the navigation is collapsed. This can be controlled by the parent component.
    */
@@ -63,7 +62,7 @@ export const Navigation = ({
   items,
   logo,
   setWidth,
-  solutionId,
+  sidePanelFooter,
   ...rest
 }: NavigationProps) => {
   const isMobile = useIsWithinBreakpoints(['xs', 's']);
@@ -347,7 +346,7 @@ export const Navigation = ({
       </SideNav>
 
       {isSidePanelOpen && sidePanelContent && (
-        <SideNav.Panel solutionId={solutionId}>
+        <SideNav.Panel sidePanelFooter={sidePanelFooter}>
           <SecondaryMenu
             badgeType={sidePanelContent.badgeType}
             isPanel

src/core/packages/chrome/navigation/src/components/side_nav/panel.tsx

@@ -12,13 +12,11 @@ import type { ReactNode } from 'react';
 import React, { useRef } from 'react';
 import { css } from '@emotion/react';
 
-import type { SolutionId } from '@kbn/core-chrome-browser';
 import { useRovingIndex } from '../../utils/use_roving_index';
-import { FeedbackSnippet } from '../feedback_snippet';
 
 export interface SideNavPanelProps {
   children: ReactNode;
-  solutionId: SolutionId;
+  sidePanelFooter?: ReactNode;
 }
 
 /**
@@ -28,7 +26,7 @@ export interface SideNavPanelProps {
  *
  * TODO: pass ref to EuiPanel
  */
-export const SideNavPanel = ({ children, solutionId }: SideNavPanelProps): JSX.Element => {
+export const SideNavPanel = ({ children, sidePanelFooter }: SideNavPanelProps): JSX.Element => {
   const ref = useRef<HTMLDivElement | null>(null);
 
   const { euiTheme } = useEuiTheme();
@@ -63,7 +61,7 @@ export const SideNavPanel = ({ children, solutionId }: SideNavPanelProps): JSX.E
         >
           {children}
         </div>
-        <FeedbackSnippet solutionId={solutionId} />
+        {sidePanelFooter}
       </EuiPanel>
     </div>
   );

src/core/packages/chrome/navigation/tsconfig.json

@@ -20,5 +20,6 @@
     "@kbn/i18n",
     "@kbn/i18n-react",
     "@kbn/core-chrome-browser",
+    "@kbn/shared-ux-feedback-snippet"
   ]
 }

src/platform/packages/shared/shared-ux/feedback_snippet/impl/README.md

@@ -0,0 +1,23 @@
+# @kbn/shared-ux-feedback-snippet
+
+---
+id: sharedUX/Components/FeedbackSnippet
+slug: /shared-ux/components/feedback_snippet
+title: Feedback Snippet
+summary: A component to gather user feedback that initially renders as a panel and becomes a button after interaction.
+tags: ['shared-ux', 'component']
+date: 2025-09-11
+---
+ 
+# Feedback Snippet
+A snippet to gather user feedback. It initially renders as a panel, and once interacted with, it becomes a persistent button. It manages its own state (panel vs. button) based on user interaction tracked in `localStorage`.
+
+## Behavior
+The component has two main states:
+- **Panel:** On its first render for a user, the component displays as a full panel with the `promptViewMessage` and options to provide positive ("Yes") or negative ("No") feedback. A "Dismiss" (x) button is also available.
+- **Button:** The component uses the provided `feedbackPanelLocalStorageKey` to track whether the user has interacted with it. If a value is present for that key, the component will render as a button instead.
+
+## Feedback Panel Views
+- **Prompt:** The panel shows a custom `promptViewMessage` to gather feedback from the user.
+- **Positive:** The panel shows a thank you message and then automatically dismisses itself.
+- **Negative:** The panel updates to show a custom `surveyUrl` call-to-action button. The panel remains visible until the user explicitly dismisses it or navigates to the survey (which opens in a new tab).

src/platform/packages/shared/shared-ux/feedback_snippet/impl/index.tsx

@@ -0,0 +1,10 @@
+/*
+ * 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", the "GNU Affero General Public License v3.0 only", and the "Server Side
+ * Public License v 1"; you may not use this file except in compliance with, at
+ * your election, the "Elastic License 2.0", the "GNU Affero General Public
+ * License v3.0 only", or the "Server Side Public License, v 1".
+ */
+
+export { FeedbackSnippet } from './src/feedback_snippet';