Closest Preview: Add Sidebar UI [MAPS-58]

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",

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<SidebarAppSDK>();
+  useAutoResizer();
+  const [entries, setEntries] = useState<EntryProps[]>([]);
 
-  return <Paragraph>Hello Sidebar Component (AppId: {sdk.ids.app})</Paragraph>;
+  // 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 (
+    <List>
+      {entries.map((entry: EntryProps) => {
+        const entryLink = `https://${sdk.hostnames.webapp}/spaces/${sdk.ids.space}/environments/${sdk.ids.environment}/entries/${entry.sys.id}`;
+        return (
+          <Box key={entry.sys.id} marginBottom="spacingS">
+            <List.Item key={entry.sys.id}>
+              <TextLink
+                href={entryLink}
+                target="_blank"
+                rel="noopener noreferrer"
+                icon={<ArrowSquareOutIcon />}
+                alignIcon="end">
+                {/* TODO: get the title of the entry */}
+                {entry.sys.id.slice(0, 8)}
+              </TextLink>
+              <br />
+              <Paragraph fontSize="fontSizeM" fontColor="gray500" fontWeight="fontWeightMedium">
+                Updated <RelativeDateTime date={entry.sys.updatedAt} />
+              </Paragraph>
+            </List.Item>
+          </Box>
+        );
+      })}
+    </List>
+  );
 };
 
 export default Sidebar;

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<any>) => {
@@ -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(<ConfigScreen />);
-
-    await waitFor(() => {
-      expect(mockSdk.app.getParameters).toHaveBeenCalled();
-      expect(mockSdk.app.setReady).toHaveBeenCalled();
-    });
-  });
-
   it('registers onConfigure callback on mount', async () => {
     render(<ConfigScreen />);
 

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(<Sidebar />);
+  it('Renders entry list with ids and relative dates', async () => {
+    const { getAllByText } = render(<Sidebar />);
 
-    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);
   });
 });

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 };

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(),