[8.x] [dev docs] Add recently viewed docs (#195001) (#195779)

# Backport This will backport the following commits from `main` to `8.x`: - [[dev docs] Add recently viewed docs (#195001)](#195001)  ### Questions ? Please refer to the [Backport tool documentation](https://github.com/sqren/backport)  Co-authored-by: Anton Dosov <[email protected]>
elastic · Oct 10, 2024 · 9b03bbf · 9b03bbf
1 parent 013bfca
commit 9b03bbf
Show file tree

Hide file tree

Showing 4 changed files with 75 additions and 0 deletions.
diff --git a/dev_docs/nav-kibana-dev.docnav.json b/dev_docs/nav-kibana-dev.docnav.json
@@ -278,6 +278,10 @@
         {
           "id": "kibDevReactKibanaContext",
           "label": "Kibana React Contexts"
+        },
+        {
+          "id": "kibDevDocsChromeRecentlyAccessed",
+          "label": "Recently Viewed"
         }
       ]
     },

diff --git a/dev_docs/shared_ux/chrome_recently_accessed/chrome_recently_accessed.mdx b/dev_docs/shared_ux/chrome_recently_accessed/chrome_recently_accessed.mdx
@@ -0,0 +1,66 @@
+---
+id: kibDevDocsChromeRecentlyAccessed
+slug: /kibana-dev-docs/chrome/recently-accessed
+title: Chrome Recently Viewed
+description: How to use chrome's recently accessed service to add your links to the recently viewed list in the side navigation.
+date: 2024-10-04
+tags: ['kibana', 'dev', 'contributor', 'chrome', 'navigation', 'shared-ux']
+---
+
+## Introduction
+
+The <DocLink id="kibKbnCoreChromeBrowserPluginApi" section="def-public.ChromeRecentlyAccessed" text="ChromeRecentlyAccessed" /> service allows applications to register recently visited objects. These items are displayed in the "Recently Viewed" section of a side navigation menu, providing users with quick access to their previously visited resources. This service includes methods for adding, retrieving, and subscribing to the recently accessed history.
+
+![Recently viewed section in the sidenav](./chrome_recently_accessed.png)
+
+## Guidelines
+
+The <DocLink id="kibKbnCoreChromeBrowserPluginApi" section="def-public.ChromeRecentlyAccessed" text="ChromeRecentlyAccessed" /> service should be used thoughtfully to provide users with easy access to key resources they've interacted with. Unlike browser history, this feature is for important items that users may want to revisit.
+
+### DOs
+
+- Register important resources that users may want to revisit. Like a dashboard, a saved search, or another specific object.
+- Update the link when the state of the current resource changes. For example, if a user changes the time range while on a dashboard, update the recently viewed link to reflect the latest viewed state where possible. See below for instructions on how to update the link when state changes.
+
+### DON'Ts
+
+- Don't register every page view.
+- Don't register temporary or transient states as individual items.
+- Prevent overloading. Keep the list focused on high-value resources.
+- Don't add a recently viewed object without first speaking to relevant Product Managers.
+
+## Usage
+
+To register an item with the `ChromeRecentlyAccessed` service, provide a unique `id`, a `label`, and a `link`. The `id` is used to identify and deduplicate the item, the `label` is displayed in the "Recently Viewed" list and the `link` is used to navigate to the item when selected.
+
+```ts
+const link = '/app/map/1234';
+const label = 'Map 1234';
+const id = 'map-1234';
+
+coreStart.chrome.recentlyAccessed.add(link, label, id);
+```
+
+To update the link when state changes, add another item with the same `id`. This will replace the existing item in the "Recently Viewed" list.
+
+```ts
+const link = '/app/map/1234';
+const label = 'Map 1234';
+
+coreStart.chrome.recentlyAccessed.add(`/app/map/1234`, label, id);
+
+// User changes the time range and we want to update the link in the "Recently Viewed" list
+coreStart.chrome.recentlyAccessed.add(
+  `/app/map/1234?timeRangeFrom=now-30m&timeRangeTo=now`,
+  label,
+  id
+);
+```
+
+## Implementation details
+
+The <DocLink id="kibKbnCoreChromeBrowserPluginApi" section="def-public.ChromeRecentlyAccessed" text="ChromeRecentlyAccessed" /> services is based on <DocLink id="kibKbnRecentlyAccessedPluginApi" text="@kbn/recently-accessed"/> package. This package provides a `RecentlyAccessedService` that uses browser local storage to manage records of recently accessed objects. Internally it implements the queue with a maximum length of 20 items. When the queue is full, the oldest item is removed.
+Applications can create their own instance of `RecentlyAccessedService` to manage their own list of recently accessed items scoped to their application.
+
+- <DocLink id="kibKbnCoreChromeBrowserPluginApi" section="def-public.ChromeRecentlyAccessed" text="ChromeRecentlyAccessed" /> is a service available via `coreStart.chrome.recentlyAccessed` and should be used to add items to chrome's sidenav.
+- <DocLink id="kibKbnRecentlyAccessedPluginApi" text="@kbn/recently-accessed"/> is package that `ChromeRecentlyAccessed` is using internally and the package can be used to create your own instance and manage your own list of recently accessed items that is independent for chrome's sidenav.
diff --git a/dev_docs/shared_ux/chrome_recently_accessed/chrome_recently_accessed.png b/dev_docs/shared_ux/chrome_recently_accessed/chrome_recently_accessed.png
diff --git a/dev_docs/shared_ux/shared_ux_landing.mdx b/dev_docs/shared_ux/shared_ux_landing.mdx
@@ -66,5 +66,10 @@ layout: landing
       title: 'Kibana React Contexts',
       description: 'Learn how to use common React contexts in Kibana',
     },
+    {
+      pageId: 'kibDevDocsChromeRecentlyAccessed',
+      title: 'Chrome Recently Viewed',
+      description: 'Learn how to add recently viewed items to the side navigation',
+    },
   ]}
 />