From 512ab2d82f92771542e8cfb8faa2cf4d76240035 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Cau=C3=AA=20Marcondes?=
 <55978943+cauemarcondes@users.noreply.github.com>
Date: Mon, 16 Aug 2021 12:44:45 -0400
Subject: [PATCH] [OBS] Editing navigation docs adding badge information
 (#108530)

* Adding badge description

* apm-new-badge_docs

* adding warning

* addressing PR comments

* changing i18n

* adjusting docs

* addressing PR comments

Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com>
---
 x-pack/plugins/apm/public/plugin.ts           |   6 +---
 .../components/shared/page_template/README.md |  32 ++++++++++++++++++
 .../components/shared/page_template/badge.png | Bin 0 -> 10163 bytes
 .../page_template/nav_name_with_badge.tsx     |  28 +++++++++------
 .../shared/page_template/page_template.tsx    |  12 +++----
 .../public/services/navigation_registry.ts    |   4 +--
 6 files changed, 56 insertions(+), 26 deletions(-)
 create mode 100644 x-pack/plugins/observability/public/components/shared/page_template/badge.png

diff --git a/x-pack/plugins/apm/public/plugin.ts b/x-pack/plugins/apm/public/plugin.ts
index 32eed1cf53d8..1644e5ceed8e 100644
--- a/x-pack/plugins/apm/public/plugin.ts
+++ b/x-pack/plugins/apm/public/plugin.ts
@@ -95,10 +95,6 @@ const backendsTitle = i18n.translate('xpack.apm.navigation.backendsTitle', {
   defaultMessage: 'Backends',
 });
 
-const newBadgeLabel = i18n.translate('xpack.apm.navigation.newBadge', {
-  defaultMessage: 'NEW',
-});
-
 export class ApmPlugin implements Plugin<ApmPluginSetup, ApmPluginStart> {
   constructor(
     private readonly initializerContext: PluginInitializerContext<ConfigSchema>
@@ -131,7 +127,7 @@ export class ApmPlugin implements Plugin<ApmPluginSetup, ApmPluginStart> {
                     label: backendsTitle,
                     app: 'apm',
                     path: '/backends',
-                    sideBadgeLabel: newBadgeLabel,
+                    isNewFeature: true,
                     onClick: () => {
                       const { usageCollection } = pluginsStart as {
                         usageCollection?: UsageCollectionStart;
diff --git a/x-pack/plugins/observability/public/components/shared/page_template/README.md b/x-pack/plugins/observability/public/components/shared/page_template/README.md
index 104b365e94fe..acc1d8017063 100644
--- a/x-pack/plugins/observability/public/components/shared/page_template/README.md
+++ b/x-pack/plugins/observability/public/components/shared/page_template/README.md
@@ -44,6 +44,8 @@ export interface NavigationEntry {
   matchFullPath?: boolean;
   // whether to ignore trailing slashes, defaults to `true`
   ignoreTrailingSlash?: boolean;
+  // shows NEW badge besides the navigation label, which will automatically disappear when menu item is clicked.
+  isNewFeature?: boolean;
 }
 ```
 
@@ -140,3 +142,33 @@ The `<ObservabilityPageTemplate />` component is a wrapper around the `<KibanaPa
 After these two steps we should see something like the following (note the navigation on the left):
 
 ![Page template rendered example](./page_template.png)
+
+## Adding NEW badge
+
+You can add a NEW badge beside the label by using the property `isNewFeature?: boolean;`.
+
+```js
+setup(core: CoreSetup, plugins: PluginsSetup) {
+    plugins.observability.navigation.registerSections(
+      of([
+        {
+          label: 'A solution section',
+          sortKey: 200,
+          entries: [
+            { label: 'Backends', app: 'exampleA', path: '/example', isNewFeature: true  },
+          ],
+        }
+      ])
+    );
+  }
+
+```
+![NEW Badge example](./badge.png)
+
+The badge is going to be shown until user clicks on the menu item for the first time. Then we'll save an information at local storage, following this pattern `observability.nav_item_badge_visible_${app}${path}`, the above example would save `observability.nav_item_badge_visible_exampleA/example`. And the badge is removed. It'll only show again if the item saved at local storage is removed or set to `false`.
+
+It's recommended to remove the badge (e.g. a new feature promotion) in the subsequent release.
+
+To avoid the navigation flooding with badges, we also want to propose keeping it to maximum 2 active badges for every iteration
+
+
diff --git a/x-pack/plugins/observability/public/components/shared/page_template/badge.png b/x-pack/plugins/observability/public/components/shared/page_template/badge.png
new file mode 100644
index 0000000000000000000000000000000000000000..55ebc28febb4340beb2439dfeeefb5136cd95b09
GIT binary patch
literal 10163
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

literal 0
HcmV?d00001

diff --git a/x-pack/plugins/observability/public/components/shared/page_template/nav_name_with_badge.tsx b/x-pack/plugins/observability/public/components/shared/page_template/nav_name_with_badge.tsx
index fc3d249dac9f..4c12ab810799 100644
--- a/x-pack/plugins/observability/public/components/shared/page_template/nav_name_with_badge.tsx
+++ b/x-pack/plugins/observability/public/components/shared/page_template/nav_name_with_badge.tsx
@@ -5,13 +5,13 @@
  * 2.0.
  */
 import { EuiBadge } from '@elastic/eui';
+import { i18n } from '@kbn/i18n';
 import React from 'react';
 import styled from 'styled-components';
 
 interface Props {
   label: string;
-  badgeLabel: string;
-  localstorageId: string;
+  localStorageId: string;
 }
 
 const LabelContainer = styled.span`
@@ -30,10 +30,10 @@ const StyledBadge = styled(EuiBadge)`
 /**
  * Gets current state from local storage to show or hide the badge.
  * Default value: true
- * @param localstorageId
+ * @param localStorageId
  */
-function getBadgeVisibility(localstorageId: string) {
-  const storedItem = window.localStorage.getItem(localstorageId);
+function getBadgeVisibility(localStorageId: string) {
+  const storedItem = window.localStorage.getItem(localStorageId);
   if (storedItem) {
     return JSON.parse(storedItem) as boolean;
   }
@@ -43,20 +43,26 @@ function getBadgeVisibility(localstorageId: string) {
 
 /**
  * Saves on local storage that this item should no longer be visible
- * @param localstorageId
+ * @param localStorageId
  */
-export function hideBadge(localstorageId: string) {
-  window.localStorage.setItem(localstorageId, JSON.stringify(false));
+export function hideBadge(localStorageId: string) {
+  window.localStorage.setItem(localStorageId, JSON.stringify(false));
 }
 
-export function NavNameWithBadge({ label, badgeLabel, localstorageId }: Props) {
-  const isBadgeVisible = getBadgeVisibility(localstorageId);
+export function NavNameWithBadge({ label, localStorageId }: Props) {
+  const isBadgeVisible = getBadgeVisibility(localStorageId);
   return (
     <>
       <LabelContainer className="eui-textTruncate">
         <span>{label}</span>
       </LabelContainer>
-      {isBadgeVisible && <StyledBadge color="accent">{badgeLabel}</StyledBadge>}
+      {isBadgeVisible && (
+        <StyledBadge color="accent">
+          {i18n.translate('xpack.observability.navigation.newBadge', {
+            defaultMessage: 'NEW',
+          })}
+        </StyledBadge>
+      )}
     </>
   );
 }
diff --git a/x-pack/plugins/observability/public/components/shared/page_template/page_template.tsx b/x-pack/plugins/observability/public/components/shared/page_template/page_template.tsx
index 5a9b07a15d71..965e5dba6a80 100644
--- a/x-pack/plugins/observability/public/components/shared/page_template/page_template.tsx
+++ b/x-pack/plugins/observability/public/components/shared/page_template/page_template.tsx
@@ -75,12 +75,8 @@ export function ObservabilityPageTemplate({
           const badgeLocalStorageId = `observability.nav_item_badge_visible_${entry.app}${entry.path}`;
           return {
             id: `${sectionIndex}.${entryIndex}`,
-            name: entry.sideBadgeLabel ? (
-              <NavNameWithBadge
-                label={entry.label}
-                badgeLabel={entry.sideBadgeLabel}
-                localstorageId={badgeLocalStorageId}
-              />
+            name: entry.isNewFeature ? (
+              <NavNameWithBadge label={entry.label} localStorageId={badgeLocalStorageId} />
             ) : (
               entry.label
             ),
@@ -91,8 +87,8 @@ export function ObservabilityPageTemplate({
                 entry.onClick(event);
               }
 
-              // When side badge is defined hides it when the item is clicked
-              if (entry.sideBadgeLabel) {
+              // Hides NEW badge when the item is clicked
+              if (entry.isNewFeature) {
                 hideBadge(badgeLocalStorageId);
               }
 
diff --git a/x-pack/plugins/observability/public/services/navigation_registry.ts b/x-pack/plugins/observability/public/services/navigation_registry.ts
index 7e0c8b304c07..6efa1e014c0c 100644
--- a/x-pack/plugins/observability/public/services/navigation_registry.ts
+++ b/x-pack/plugins/observability/public/services/navigation_registry.ts
@@ -30,8 +30,8 @@ export interface NavigationEntry {
   ignoreTrailingSlash?: boolean;
   // handler to be called when the item is clicked
   onClick?: (event: React.MouseEvent<HTMLElement | HTMLButtonElement, MouseEvent>) => void;
-  // the label of the badge that is shown besides the navigation label
-  sideBadgeLabel?: string;
+  // shows NEW badge besides the navigation label, which will automatically disappear when menu item is clicked.
+  isNewFeature?: boolean;
 }
 
 export interface NavigationRegistry {