[Backport 2.x] [Navigation-next]Register workspace list card into home page

changelogs/fragments/7247.yml

@@ -0,0 +1,2 @@
+feat:
+- Register workspace list card into home page ([#7247](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/7247))

src/core/types/workspace.ts

@@ -14,6 +14,7 @@ export interface WorkspaceAttribute {
   icon?: string;
   reserved?: boolean;
   uiSettings?: Record<string, any>;
+  lastUpdatedTime?: string;
 }
 
 export interface WorkspaceAttributeWithPermission extends WorkspaceAttribute {

src/plugins/workspace/public/components/service_card/index.ts

@@ -0,0 +1,6 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+export { WorkspaceListCard } from './workspace_list_card';

src/plugins/workspace/public/components/service_card/workspace_list_card.test.tsx

@@ -0,0 +1,66 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import React from 'react';
+import { coreMock } from '../../../../../core/public/mocks';
+import { fireEvent, render, waitFor } from '@testing-library/react';
+import { WorkspaceListCard } from './workspace_list_card';
+import { recentWorkspaceManager } from '../../recent_workspace_manager';
+
+describe('workspace list card render normally', () => {
+  const coreStart = coreMock.createStart();
+
+  beforeAll(() => {
+    const workspaceList = [
+      {
+        id: 'ws-1',
+        name: 'foo',
+        lastUpdatedTime: new Date().toISOString(),
+      },
+      {
+        id: 'ws-2',
+        name: 'bar',
+        lastUpdatedTime: new Date().toISOString(),
+      },
+    ];
+    coreStart.workspaces.workspaceList$.next(workspaceList);
+  });
+
+  it('should show workspace list card correctly', () => {
+    const { container } = render(<WorkspaceListCard core={coreStart} />);
+    expect(container).toMatchSnapshot();
+  });
+
+  it('should show empty state if no recently viewed workspace', () => {
+    const { getByTestId, getByText } = render(<WorkspaceListCard core={coreStart} />);
+    expect(getByTestId('workspace_filter')).toHaveDisplayValue('Recently viewed');
+
+    // empty statue for recently viewed
+    expect(getByText('Workspaces you have recently viewed will appear here.')).toBeInTheDocument();
+  });
+
+  it('should show default filter as recently viewed', () => {
+    recentWorkspaceManager.addRecentWorkspace('foo');
+    const { getByTestId, getByText } = render(<WorkspaceListCard core={coreStart} />);
+    expect(getByTestId('workspace_filter')).toHaveDisplayValue('Recently viewed');
+
+    waitFor(() => {
+      expect(getByText('foo')).toBeInTheDocument();
+    });
+  });
+
+  it('should show updated filter correctly', () => {
+    const { getByTestId, getByText } = render(<WorkspaceListCard core={coreStart} />);
+    expect(getByTestId('workspace_filter')).toHaveDisplayValue('Recently viewed');
+
+    const filterSelector = getByTestId('workspace_filter');
+    fireEvent.change(filterSelector, { target: { value: 'updated' } });
+    expect(getByTestId('workspace_filter')).toHaveDisplayValue('Recently updated');
+
+    // workspace list
+    expect(getByText('foo')).toBeInTheDocument();
+    expect(getByText('bar')).toBeInTheDocument();
+  });
+});