[Shared UX] Implement side nav v2 feedback snippet (#234187)

Closes elastic/eui-private#385 

## Summary

- Added a feedback snippet to the new side nav (v2) which can take the
shape of:
  - A panel when seen for the first time
- A button after any interaction with the panel occurs (dismiss, thumb
up or thumb down)
- Test it here in a solution specific space:
https://angeles-mb-pr-234187-385-implement-side-nav-feedback-snippe.kbndev.co/
- Its goal is to gather user feedback in the form of:
- Tracked click events (on this first iteration: EBT out of the box
support to record clicks based on id on dismiss, thumb up, thumb down
and open survey)
  - Qualtrics surveys
- User interaction is stored in local storage
- Feedback panel has 3 views: prompt, positive and negative 
- Added `confetti` functionality to the positive view from
[canvas-confetti](https://www.npmjs.com/package/canvas-confetti) library
- Included license notice and ran `node scripts/notice` to update
NOTICE.txt
- Purpose: adds confetti functionality to meet the design expectations
for this component
- Justification: ready to use confetti functionality to surprise and
congratulate the user
- Alternatives explored: this library was recommended by the team and
lightweight
  - Existing dependencies: I didn't find anything similar
- **Still TODO**:
  - Write UTs #234445

## Visuals
Video contains following scenarios:
1. Dismiss panel on 'x' -> feedback button appears -> navigate to survey
2. Click on Thumb Up -> positive view -> feedback button appears ->
navigate to survey
3. Click on Thumb Down -> negative view -> navigate away closing
secondary menu -> open a secondary menu again -> feedback button appears
4. Click on Thumb Down -> negative view -> navigate to survey


https://github.com/user-attachments/assets/8eb43915-71d9-479d-9360-2396a637bae2

---------

Co-authored-by: kibanamachine <[email protected]>

Author: angeles-mb

.buildkite/scripts/steps/security/third_party_packages.txt

@@ -7,3 +7,5 @@ tree-dump
 @opentelemetry/exporter-metrics-otlp-http
 inversify
 @types/d3-color
+canvas-confetti
+@types/canvas-confetti

.github/CODEOWNERS

@@ -642,6 +642,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

@@ -973,6 +973,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",
@@ -1216,6 +1217,7 @@
     "byte-size": "^9.0.1",
     "cacheable-lookup": "6",
     "camelcase-keys": "7.0.2",
+    "canvas-confetti": "^1.9.3",
     "canvg": "^3.0.9",
     "chalk": "^4.1.0",
     "cheerio": "^1.0.0-rc.12",
@@ -1712,6 +1714,7 @@
     "@types/base64-js": "^1.5.0",
     "@types/byte-size": "^8.1.2",
     "@types/cache-manager-fs-hash": "^0.0.5",
+    "@types/canvas-confetti": "^1.9.0",
     "@types/chance": "^1.0.0",
     "@types/chroma-js": "^2.1.0",
     "@types/chrome-remote-interface": "^0.31.14",

renovate.json

@@ -4678,6 +4678,25 @@
       ],
       "minimumReleaseAge": "7 days",
       "enabled": true
+    },
+    {
+      "groupName": "canvas-confetti",
+      "matchDepNames": [
+        "canvas-confetti",
+        "@types/canvas-confetti"
+      ],
+      "reviewers": [
+        "team:appex-sharedux"
+      ],
+      "matchBaseBranches": [
+        "main"
+      ],
+      "labels": [
+        "Team:SharedUX",
+        "release_note:skip",
+        "backport:skip"
+      ],
+      "enabled": true
     }
   ],
   "customManagers": [

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
@@ -56,13 +57,14 @@ export const Navigation = (props: ChromeNavigationProps) => {
     return null;
   }
 
-  const { navItems, logoItem, activeItemId } = state;
+  const { navItems, logoItem, activeItemId, solutionId } = state;
 
   return (
     <RedirectNavigationAppLinks application={props.application}>
       <NavigationComponent
         items={navItems}
         logo={logoItem}
+        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,53 @@
+/*
+ * 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 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}
+      promptViewMessage={promptViewMessage}
+      surveyUrl={feedbackSurveyUrl}
+    />
+  );
+};

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

@@ -22,6 +22,7 @@ import type {
   SecondaryMenuSection,
   SideNavLogo,
 } from '@kbn/core-chrome-navigation/types';
+import type { SolutionId } from '@kbn/core-chrome-browser';
 
 import { isActiveFromUrl } from '@kbn/shared-ux-chrome-navigation/src/utils';
 import { AppDeepLinkIdToIcon } from './known_icons_mappings';
@@ -31,6 +32,7 @@ export interface NavigationItems {
   logoItem: SideNavLogo;
   navItems: NavigationStructure;
   activeItemId?: string;
+  solutionId: SolutionId;
 }
 
 /**
@@ -313,7 +315,12 @@ export const toNavigationItems = (
   // Check for duplicate icons
   warnAboutDuplicateIcons(logoItem, primaryItems);
 
-  return { logoItem, navItems: { primaryItems, footerItems }, activeItemId: deepestActiveItemId };
+  return {
+    logoItem,
+    navItems: { primaryItems, footerItems },
+    activeItemId: deepestActiveItemId,
+    solutionId: navigationTree.id,
+  };
 };
 
 // =====================

src/core/packages/chrome/browser-internal/tsconfig.json

@@ -69,7 +69,8 @@
     "@kbn/core-chrome-layout-constants",
     "@kbn/core-feature-flags-browser",
     "@kbn/core-feature-flags-browser-mocks",
-    "@kbn/core-chrome-layout-feature-flags"
+    "@kbn/core-chrome-layout-feature-flags",
+    "@kbn/shared-ux-feedback-snippet"
   ],
   "exclude": [
     "target/**/*",

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

@@ -30,6 +30,10 @@ export interface NavigationProps {
    * The active path for the navigation, used for highlighting the current item.
    */
   activeItemId?: string;
+  /**
+   * Content to display inside the side panel footer.
+   */
+  sidePanelFooter?: React.ReactNode;
   /**
    * Whether the navigation is collapsed. This can be controlled by the parent component.
    */
@@ -58,6 +62,7 @@ export const Navigation = ({
   items,
   logo,
   setWidth,
+  sidePanelFooter,
   ...rest
 }: NavigationProps) => {
   const isMobile = useIsWithinBreakpoints(['xs', 's']);
@@ -341,7 +346,7 @@ export const Navigation = ({
       </SideNav>
 
       {isSidePanelOpen && sidePanelContent && (
-        <SideNav.Panel>
+        <SideNav.Panel footer={sidePanelFooter}>
           <SecondaryMenu
             badgeType={sidePanelContent.badgeType}
             isPanel

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

@@ -16,6 +16,7 @@ import { useRovingIndex } from '../../utils/use_roving_index';
 
 export interface SideNavPanelProps {
   children: ReactNode;
+  footer?: ReactNode;
 }
 
 /**
@@ -25,7 +26,7 @@ export interface SideNavPanelProps {
  *
  * TODO: pass ref to EuiPanel
  */
-export const SideNavPanel = ({ children }: SideNavPanelProps): JSX.Element => {
+export const SideNavPanel = ({ children, footer }: SideNavPanelProps): JSX.Element => {
   const ref = useRef<HTMLDivElement | null>(null);
 
   const { euiTheme } = useEuiTheme();
@@ -41,6 +42,8 @@ export const SideNavPanel = ({ children }: SideNavPanelProps): JSX.Element => {
           border-right: ${euiTheme.border.width.thin} ${euiTheme.colors.borderBaseSubdued} solid;
           height: 100%;
           scroll-padding-top: 44px; /* account for fixed header when scrolling to elements */
+          display: flex;
+          flex-direction: column;
         `}
         color="subdued"
         // > For instance, only plain or transparent panels can have a border and/or shadow.
@@ -50,7 +53,15 @@ export const SideNavPanel = ({ children }: SideNavPanelProps): JSX.Element => {
         borderRadius="none"
         grow={false}
       >
-        {children}
+        <div
+          css={css`
+            flex-grow: 1;
+            overflow-y: auto;
+          `}
+        >
+          {children}
+        </div>
+        {footer}
       </EuiPanel>
     </div>
   );