diff --git a/apps/closest-preview/package-lock.json b/apps/closest-preview/package-lock.json index d53e7a2c00..0b5f6ebcf4 100644 --- a/apps/closest-preview/package-lock.json +++ b/apps/closest-preview/package-lock.json @@ -10,6 +10,7 @@ "dependencies": { "@contentful/app-sdk": "4.40.0", "@contentful/f36-components": "^5.6.0", + "@contentful/f36-icons": "^5.6.0", "@contentful/f36-multiselect": "^5.6.0", "@contentful/f36-tokens": "^5.1.0", "@contentful/react-apps-toolkit": "1.2.16", diff --git a/apps/closest-preview/package.json b/apps/closest-preview/package.json index f30c626568..183e5629f1 100644 --- a/apps/closest-preview/package.json +++ b/apps/closest-preview/package.json @@ -5,6 +5,7 @@ "dependencies": { "@contentful/app-sdk": "4.40.0", "@contentful/f36-components": "^5.6.0", + "@contentful/f36-icons": "^5.6.0", "@contentful/f36-multiselect": "^5.6.0", "@contentful/f36-tokens": "^5.1.0", "@contentful/react-apps-toolkit": "1.2.16", diff --git a/apps/closest-preview/src/locations/Sidebar.tsx b/apps/closest-preview/src/locations/Sidebar.tsx index 0c37b85edb..bfecdb6ed9 100644 --- a/apps/closest-preview/src/locations/Sidebar.tsx +++ b/apps/closest-preview/src/locations/Sidebar.tsx @@ -1,11 +1,50 @@ -import { Paragraph } from '@contentful/f36-components'; +import { Box, RelativeDateTime, TextLink, List, Paragraph } from '@contentful/f36-components'; +import { ArrowSquareOutIcon } from '@contentful/f36-icons'; import { SidebarAppSDK } from '@contentful/app-sdk'; -import { useSDK } from '@contentful/react-apps-toolkit'; +import { useSDK, useAutoResizer } from '@contentful/react-apps-toolkit'; +import { EntryProps } from 'contentful-management'; +import { useState, useEffect } from 'react'; const Sidebar = () => { const sdk = useSDK(); + useAutoResizer(); + const [entries, setEntries] = useState([]); - return Hello Sidebar Component (AppId: {sdk.ids.app}); + // TODO: use entries with Live Preview. Using any entries for now. + useEffect(() => { + const fetchEntries = async () => { + const response = await sdk.cma.entry.getMany({}); + setEntries(response.items.slice(0, 5)); + }; + fetchEntries(); + }, []); + + return ( + + {entries.map((entry: EntryProps) => { + const entryLink = `https://${sdk.hostnames.webapp}/spaces/${sdk.ids.space}/environments/${sdk.ids.environment}/entries/${entry.sys.id}`; + return ( + + + } + alignIcon="end"> + {/* TODO: get the title of the entry */} + {entry.sys.id.slice(0, 8)} + +
+ + Updated + +
+
+ ); + })} +
+ ); }; export default Sidebar; diff --git a/apps/closest-preview/test/locations/ConfigScreen.spec.tsx b/apps/closest-preview/test/locations/ConfigScreen.spec.tsx index 610fb4cb15..8aee01ca34 100644 --- a/apps/closest-preview/test/locations/ConfigScreen.spec.tsx +++ b/apps/closest-preview/test/locations/ConfigScreen.spec.tsx @@ -17,7 +17,6 @@ async function saveAppInstallation() { describe('ConfigScreen', () => { beforeEach(() => { vi.clearAllMocks(); - mockSdk.app.getParameters.mockResolvedValue({}); mockSdk.app.getCurrentState.mockResolvedValue({}); mockSdk.app.setReady.mockResolvedValue(); mockSdk.app.onConfigure.mockImplementation((cb: () => Promise) => { @@ -107,7 +106,6 @@ describe('ConfigScreen', () => { }); expect(result).toEqual({ - parameters: {}, targetState: { EditorInterface: { blogPost: { @@ -129,25 +127,12 @@ describe('ConfigScreen', () => { }); expect(result).toEqual({ - parameters: {}, targetState: { EditorInterface: {}, }, }); }); - it('loads existing parameters on mount', async () => { - const existingParameters = { someParam: 'value' }; - mockSdk.app.getParameters.mockResolvedValue(existingParameters); - - render(); - - await waitFor(() => { - expect(mockSdk.app.getParameters).toHaveBeenCalled(); - expect(mockSdk.app.setReady).toHaveBeenCalled(); - }); - }); - it('registers onConfigure callback on mount', async () => { render(); diff --git a/apps/closest-preview/test/locations/Sidebar.spec.tsx b/apps/closest-preview/test/locations/Sidebar.spec.tsx index 6497b57003..43a78b1e83 100644 --- a/apps/closest-preview/test/locations/Sidebar.spec.tsx +++ b/apps/closest-preview/test/locations/Sidebar.spec.tsx @@ -1,17 +1,23 @@ import Sidebar from '../../src/locations/Sidebar'; -import { render } from '@testing-library/react'; -import { mockCma, mockSdk } from '../mocks'; +import { render, waitFor } from '@testing-library/react'; +import { mockSdk } from '../mocks'; import { vi } from 'vitest'; vi.mock('@contentful/react-apps-toolkit', () => ({ useSDK: () => mockSdk, - useCMA: () => mockCma, + useAutoResizer: () => {}, })); describe('Sidebar component', () => { - it('Component text exists', () => { - const { getByText } = render(); + it('Renders entry list with ids and relative dates', async () => { + const { getAllByText } = render(); - expect(getByText('Hello Sidebar Component (AppId: test-app)')).toBeInTheDocument(); + await waitFor(() => { + const entryIds = getAllByText('Entry id', { exact: false }); + expect(entryIds).toHaveLength(5); + }); + + const updatedTexts = getAllByText(/Updated/); + expect(updatedTexts).toHaveLength(5); }); }); diff --git a/apps/closest-preview/test/mocks/mockCma.ts b/apps/closest-preview/test/mocks/mockCma.ts index 001a9d3dee..11c802d58f 100644 --- a/apps/closest-preview/test/mocks/mockCma.ts +++ b/apps/closest-preview/test/mocks/mockCma.ts @@ -7,6 +7,48 @@ const mockCma: any = { editorInterface: { getMany: vi.fn().mockResolvedValue({ items: [] }), }, + entry: { + getMany: vi.fn().mockResolvedValue({ + items: [ + { + sys: { + id: 'Entry id 1', + updatedAt: '2021-01-01', + }, + }, + { + sys: { + id: 'Entry id 2', + updatedAt: '2021-01-01', + }, + }, + { + sys: { + id: 'Entry id 3', + updatedAt: '2021-01-01', + }, + }, + { + sys: { + id: 'Entry id 4', + updatedAt: '2021-01-01', + }, + }, + { + sys: { + id: 'Entry id 5', + updatedAt: '2021-01-01', + }, + }, + { + sys: { + id: 'Entry id 6', + updatedAt: '2021-01-01', + }, + }, + ], + }), + }, }; export { mockCma }; diff --git a/apps/closest-preview/test/mocks/mockSdk.ts b/apps/closest-preview/test/mocks/mockSdk.ts index 8c8c81b989..994006c700 100644 --- a/apps/closest-preview/test/mocks/mockSdk.ts +++ b/apps/closest-preview/test/mocks/mockSdk.ts @@ -1,4 +1,5 @@ import { vi } from 'vitest'; +import { mockCma } from './mockCma'; const mockSdk: any = { app: { @@ -12,7 +13,10 @@ const mockSdk: any = { space: 'test-space', environment: 'master', }, - cma: null, + cma: mockCma, + hostnames: { + webapp: 'app.contentful.com', + }, notifier: { error: vi.fn(), success: vi.fn(),