[navigation-next] feat: add recent works in new homepage

changelogs/fragments/7237.yml

@@ -0,0 +1,2 @@
+feat:
+- [navigation-next] add recent works in new homepage ([#7237](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/7237))

src/core/public/chrome/index.ts

@@ -44,7 +44,12 @@ export {
   ChromeHelpExtensionMenuDocumentationLink,
   ChromeHelpExtensionMenuGitHubLink,
 } from './ui/header/header_help_menu';
-export { NavType, RightNavigationButton, RightNavigationButtonProps } from './ui';
+export {
+  NavType,
+  RightNavigationButton,
+  RightNavigationButtonProps,
+  createRecentNavLink,
+} from './ui';
 export { ChromeNavLink, ChromeNavLinks, ChromeNavLinkUpdateableFields } from './nav_links';
 export {
   ChromeRecentlyAccessed,

src/core/public/chrome/recently_accessed/recently_accessed_service.ts

@@ -41,6 +41,10 @@ export interface ChromeRecentlyAccessedHistoryItem {
   label: string;
   id: string;
   workspaceId?: string;
+  extraProps?: {
+    type?: string;
+    viewedAt?: number;
+  };
 }
 
 interface StartDeps {
@@ -59,14 +63,25 @@ export class RecentlyAccessedService {
 
     return {
       /** Adds a new item to the history. */
-      add: (link: string, label: string, id: string) => {
+      add: (
+        link: string,
+        label: string,
+        id: string,
+        extraProps?: ChromeRecentlyAccessedHistoryItem['extraProps']
+      ) => {
         const currentWorkspaceId = workspaces.currentWorkspaceId$.getValue();
 
         history.add({
           link,
           label,
           id,
           ...(currentWorkspaceId && { workspaceId: currentWorkspaceId }),
+          ...(extraProps?.type && {
+            extraProps: {
+              viewedAt: Date.now(),
+              ...extraProps,
+            },
+          }),
         });
       },
 
@@ -96,7 +111,12 @@ export interface ChromeRecentlyAccessed {
    * @param label the label to display in the UI
    * @param id a unique string used to de-duplicate the recently accessed list.
    */
-  add(link: string, label: string, id: string): void;
+  add(
+    link: string,
+    label: string,
+    id: string,
+    extraProps?: ChromeRecentlyAccessedHistoryItem['extraProps']
+  ): void;
 
   /**
    * Gets an Array of the current recently accessed history.

src/core/public/chrome/ui/header/index.ts

@@ -38,3 +38,4 @@ export {
   ChromeHelpExtensionMenuGitHubLink,
 } from './header_help_menu';
 export { RightNavigationButton, RightNavigationButtonProps } from './right_navigation_button';
+export { createRecentNavLink } from './nav_link';

src/core/public/chrome/ui/index.ts

@@ -39,4 +39,5 @@ export {
   NavType,
   RightNavigationButton,
   RightNavigationButtonProps,
+  createRecentNavLink,
 } from './header';

src/core/public/index.ts

@@ -76,6 +76,7 @@ import {
   PersistedLog,
   NavGroupItemInMap,
   fulfillRegistrationLinksToChromeNavLinks,
+  createRecentNavLink,
 } from './chrome';
 import { FatalErrorsSetup, FatalErrorsStart, FatalErrorInfo } from './fatal_errors';
 import { HttpSetup, HttpStart } from './http';
@@ -379,6 +380,7 @@ export {
   PersistedLog,
   NavGroupItemInMap,
   fulfillRegistrationLinksToChromeNavLinks,
+  createRecentNavLink,
 };
 
 export { __osdBootstrap__ } from './osd_bootstrap';

src/plugins/dashboard/public/application/utils/use/use_saved_dashboard_instance.test.ts

@@ -38,6 +38,7 @@ describe('useSavedDashboardInstance', () => {
         getFilters: () => dashboardAppStateStub.filters,
         optionsJSON: JSON.stringify(dashboardAppStateStub.options),
         getFullPath: () => `/${dashboardIdFromUrl}`,
+        getOpenSearchType: () => 'dashboard',
       },
     } as unknown) as SavedObjectDashboard;
     dashboard = new Dashboard(convertToSerializedDashboard(savedDashboardInstance));

src/plugins/dashboard/public/application/utils/use/use_saved_dashboard_instance.ts

@@ -129,7 +129,8 @@ export const useSavedDashboardInstance = ({
             chrome.recentlyAccessed.add(
               savedDashboard.getFullPath(),
               savedDashboard.title,
-              dashboardIdFromUrl
+              dashboardIdFromUrl,
+              { type: savedDashboard.getOpenSearchType() }
             );
             setSavedDashboardInstance(dashboardInstance);
           } catch (error: any) {

src/plugins/discover/public/application/view_components/utils/use_search.ts

@@ -309,7 +309,10 @@ export const useSearch = (services: DiscoverViewServices) => {
         chrome.recentlyAccessed.add(
           savedSearchInstance.getFullPath(),
           savedSearchInstance.title,
-          savedSearchInstance.id
+          savedSearchInstance.id,
+          {
+            type: savedSearchInstance.getOpenSearchType(),
+          }
         );
       }
     })();

src/plugins/discover/public/saved_searches/types.ts

@@ -36,7 +36,14 @@ export type SortOrder = [string, SortDirection];
 export interface SavedSearch
   extends Pick<
     SavedObject,
-    'id' | 'title' | 'copyOnSave' | 'destroy' | 'lastSavedTitle' | 'save' | 'getFullPath'
+    | 'id'
+    | 'title'
+    | 'copyOnSave'
+    | 'destroy'
+    | 'lastSavedTitle'
+    | 'save'
+    | 'getFullPath'
+    | 'getOpenSearchType'
   > {
   searchSource: ISearchSource; // This is optional in SavedObject, but required for SavedSearch
   description?: string;

src/plugins/home/public/application/home_render.tsx

@@ -26,7 +26,19 @@
         order: 2000,
         title: 'Recently viewed',
         kind: 'custom',
-        render: () => <></>,
+        render: (contents) => {
+          return (
+            <>
+              {contents.map((content) => {
+                if (content.kind === 'custom') {
+                  return content.render();
+                }
+
+                return null;
+              })}
+            </>
+          );
+        },
       },
       {
         id: SECTIONS.GET_STARTED,

src/plugins/home/public/index.ts

@@ -49,6 +49,7 @@ export {
   TutorialModuleNoticeComponent,
 } from './services';
 export * from '../common/instruction_variant';
+export { HOME_CONTENT_AREAS } from '../common/constants';
 import { HomePublicPlugin } from './plugin';
 
 export const plugin = (initializerContext: PluginInitializerContext) =>

src/plugins/saved_objects/public/saved_object/helpers/save_saved_object.ts

@@ -123,7 +123,10 @@ export async function saveSavedObject(
       chrome.recentlyAccessed.add(
         savedObject.getFullPath(),
         savedObject.title,
-        String(savedObject.id)
+        String(savedObject.id),
+        {
+          type: savedObject.getOpenSearchType(),
+        }
       );
     }
     savedObject.isSaving = false;

src/plugins/saved_objects_management/opensearch_dashboards.json

@@ -12,7 +12,8 @@
     "visBuilder",
     "visAugmenter",
     "dataSource",
-    "dataSourceManagement"
+    "dataSourceManagement",
+    "contentManagement"
   ],
   "extraPublicDirs": ["public/lib"],
   "requiredBundles": ["opensearchDashboardsReact", "home"]

src/plugins/saved_objects_management/public/management_section/recent_work.test.tsx

@@ -0,0 +1,98 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import React from 'react';
+import { BehaviorSubject } from 'rxjs';
+import { fireEvent, render } from '@testing-library/react';
+import { RecentWork } from './recent_work';
+import { coreMock } from '../../../../core/public/mocks';
+import { ChromeRecentlyAccessedHistoryItem } from 'opensearch-dashboards/public';
+import { SavedObjectWithMetadata } from '../types';
+
+const mockedRecentItems: ChromeRecentlyAccessedHistoryItem[] = [
+  {
+    link: '/app/visualize',
+    label: 'visualize',
+    id: 'visualize',
+    extraProps: {
+      type: 'visualize',
+    },
+  },
+  {
+    link: '/app/dashboard',
+    label: 'dashboard',
+    id: 'dashboard-in-workspace',
+    workspaceId: 'workspace-id',
+    extraProps: {
+      type: 'dashboard',
+    },
+  },
+];
+
+const savedObjectsFromServer: SavedObjectWithMetadata[] = [
+  {
+    type: 'visualize',
+    id: 'visualize',
+    attributes: {},
+    references: [],
+    updated_at: '2024-07-20T00:00:00.000Z',
+    meta: {},
+  },
+  {
+    type: 'dashboard',
+    id: 'dashboard-in-workspace',
+    attributes: {},
+    references: [],
+    updated_at: '2024-07-20T00:00:01.000Z',
+    meta: {},
+  },
+];
+
+const getStartMockForRecentWork = () => {
+  const coreStartMock = coreMock.createStart();
+  coreStartMock.chrome.recentlyAccessed.get$.mockReturnValue(new BehaviorSubject([]));
+  coreStartMock.chrome.navLinks.getNavLinks$.mockReturnValue(new BehaviorSubject([]));
+  return coreStartMock;
+};
+
+describe('<RecentWork />', () => {
+  it('render with emty recent work', async () => {
+    const { findByText } = render(<RecentWork core={getStartMockForRecentWork()} />);
+    await findByText('No recent work');
+  });
+
+  it('render with recent works', async () => {
+    const coreStartMock = getStartMockForRecentWork();
+    coreStartMock.http.get.mockImplementation((url) => {
+      if (typeof url === 'string') {
+        if ((url as string).includes(mockedRecentItems[0].id)) {
+          return Promise.resolve(savedObjectsFromServer[0]);
+        } else {
+          return Promise.resolve(savedObjectsFromServer[1]);
+        }
+      }
+
+      return Promise.reject({});
+    });
+
+    coreStartMock.chrome.recentlyAccessed.get$.mockReturnValue(
+      new BehaviorSubject(mockedRecentItems)
+    );
+
+    const { findAllByTestId, getByTestId } = render(<RecentWork core={coreStartMock} />);
+    const allCards = await findAllByTestId('recentlyCard');
+    expect(allCards.length).toBe(2);
+    expect(allCards[0].querySelector('.euiCard__titleAnchor')?.textContent).toEqual(
+      mockedRecentItems[0].label
+    );
+
+    // click the filter button
+    fireEvent.click(getByTestId('filterButton-recently%20updated'));
+    const allCardsAfterSort = await findAllByTestId('recentlyCard');
+    expect(allCardsAfterSort[0].querySelector('.euiCard__titleAnchor')?.textContent).toEqual(
+      mockedRecentItems[1].label
+    );
+  });
+});