workspace list card

Signed-off-by: Hailong Cui <ihailong@amazon.com>

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();
+ });
+});