workspace list card

Signed-off-by: Hailong Cui <[email protected]>

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/common/constants.ts

@@ -184,3 +184,5 @@ export const WORKSPACE_USE_CASES = Object.freeze({
 });
 
 export const CURRENT_USER_PLACEHOLDER = '%me%';
+export const MAX_WORKSPACE_NAME_LENGTH = 25;
+export const RECENT_WORKSPACES_KEY = 'recentWorkspaces';

src/plugins/workspace/opensearch_dashboards.json

@@ -7,6 +7,6 @@
     "savedObjects",
     "opensearchDashboardsReact"
   ],
-  "optionalPlugins": ["savedObjectsManagement","management","dataSourceManagement"],
+  "optionalPlugins": ["savedObjectsManagement","management","dataSourceManagement","contentManagement"],
   "requiredBundles": ["opensearchDashboardsReact"]
 }

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,91 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import React from 'react';
+import { coreMock } from '../../../../../core/public/mocks';
+import { fireEvent, render } from '@testing-library/react';
+import { WorkspaceListCard } from './workspace_list_card';
+import { addRecentWorkspace } from '../../utils';
+
+interface LooseObject {
+  [key: string]: any;
+}
+
+// Mock localStorage
+const localStorageMock = (() => {
+  let store = {} as LooseObject;
+  return {
+    getItem(key: string) {
+      return store[key] || null;
+    },
+    setItem(key: string, value: string) {
+      store[key] = value.toString();
+    },
+    removeItem(key: string) {
+      delete store[key];
+    },
+    clear() {
+      store = {};
+    },
+  };
+})();
+
+Object.defineProperty(window, 'localStorage', { value: localStorageMock });
+
+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);
+    addRecentWorkspace('foo');
+  });
+
+  it('should show workspace list card correctly', () => {
+    const { container } = render(<WorkspaceListCard core={coreStart} />);
+    expect(container).toMatchSnapshot();
+  });
+
+  it('should show default filter as recently viewed', () => {
+    const { getByTestId, getByText } = render(<WorkspaceListCard core={coreStart} />);
+    expect(getByTestId('workspace_filter')).toHaveDisplayValue('Recently viewed');
+
+    expect(getByText('foo')).toBeInTheDocument();
+  });
+
+  it('should show empty state if no recently viewed workspace', () => {
+    localStorageMock.clear();
+
+    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 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();
+  });
+});