feat: Homepage new design, news feed (microsoft#6642)

* new design in homepage

* update

* update

* add feeds

* feed server api

* update

* fix when fetch error

* update tests

* update styles

* add tests

* verify feed version

* no border line above empty box

* fetch feed once.

* update styles

* update

* handle aka.ms redirect

* update feed url

Composer/cypress/integration/HomePage.spec.ts

@@ -15,6 +15,6 @@ context('Home Page ', () => {
     cy.findByText('Select a Bot').should('exist');
     cy.findByText('Cancel').should('exist');
     cy.findByText('Cancel').click();
-    cy.findByTestId('homePage-body-New').click();
+    cy.findByTestId('homePage-Toolbar-New').click();
   });
 });

Composer/packages/client/__tests__/components/CreationFlow/index.test.tsx

@@ -26,6 +26,7 @@ describe('<CreationFlow/>', () => {
       fetchTemplateProjects: jest.fn(),
       onboardingAddCoachMarkRef: jest.fn(),
       fetchRecentProjects: jest.fn(),
+      fetchFeed: jest.fn(),
       fetchTemplates: jest.fn(),
       fetchTemplatesV2: jest.fn(),
       setCreationFlowStatus: jest.fn(),

Composer/packages/client/__tests__/components/CreationFlowV2/index.test.tsx

@@ -26,6 +26,7 @@ describe('<CreationFlowV2/>', () => {
       fetchTemplateProjects: jest.fn(),
       onboardingAddCoachMarkRef: jest.fn(),
       fetchRecentProjects: jest.fn(),
+      fetchFeed: jest.fn(),
       fetchTemplates: jest.fn(),
       fetchTemplatesV2: jest.fn(),
       setCreationFlowStatus: jest.fn(),

Composer/packages/client/__tests__/components/home.test.tsx

@@ -4,10 +4,10 @@
 import * as React from 'react';
 import { fireEvent, render } from '@botframework-composer/test-utils';
 import { Toolbar } from '@bfc/ui-shared';
-import { BotTemplate } from '@bfc/shared';
 
 import { RecentBotList } from '../../src/pages/home/RecentBotList';
-import { ExampleList } from '../../src/pages/home/ExampleList';
+import { WhatsNewsList } from '../../src/pages/home/WhatsNewsList';
+import { CardWidget } from '../../src/pages/home/CardWidget';
 import { renderWithRecoil } from '../testUtils';
 
 describe('<Home/>', () => {
@@ -29,17 +29,22 @@ describe('<Home/>', () => {
     }
   });
 
-  it('should dispatch onClick event when clicked on an ExampleList', () => {
-    const templates = [
-      { description: 'echo bot', id: 'EchoBot', name: 'Echo Bot' },
-      { description: 'empty bot', id: 'EmptyBot', name: 'Empty Bot' },
-    ] as BotTemplate[];
-    const onClickTemplate = jest.fn((item) => item);
-    const { container, getByText } = render(<ExampleList examples={templates} onClick={onClickTemplate} />);
-    expect(container).toHaveTextContent('Echo Bot');
-    const link = getByText('Echo Bot');
-    fireEvent.click(link);
-    expect(onClickTemplate.mock.results[0].value).toBe('EchoBot');
+  it("should render what's news List", () => {
+    const newsList = [
+      {
+        title: 'Composer 1.4',
+        description: "Learn about new features in Composer's latest release.",
+        url: 'https://www.microsoft.com',
+      },
+      {
+        title: 'Conversational AI at Microsoft Ignite',
+        description:
+          'Updates from Microsoft Ignite. New Composer release, public preview of Orchestrator and updates to Azure Bot Service and Bot Framework SDK.',
+        url: 'https://www.microsoft.com',
+      },
+    ];
+    const { container } = render(<WhatsNewsList newsList={newsList} />);
+    expect(container).toHaveTextContent(newsList[0].description);
   });
 
   it('should call onClick handler when clicked', () => {
@@ -90,4 +95,24 @@ describe('<Home/>', () => {
     fireEvent.click(link);
     expect(setCreationFlowStatus.mock.results[0].value).toBe('NEW');
   });
+
+  it('should render resoure, article, video cards', () => {
+    const videoItem = {
+      image: 'https://via.placeholder.com/244x95/0078d4/ffffff?text=Bot+FrameWork+Composer',
+      title: 'Introduction to Composer',
+      description: 'A five minute intro to Composer',
+      url: 'https://www.youtube.com/watch?v=hiIiZnRcCv0',
+    };
+    const { container } = renderWithRecoil(
+      <CardWidget
+        ariaLabel="test"
+        cardType={'video'}
+        content={videoItem.description}
+        href={videoItem.url}
+        imageCover={videoItem.image}
+        title={videoItem.title}
+      />
+    );
+    expect(container).toHaveTextContent(videoItem.title);
+  });
 });

Composer/packages/client/src/components/CreationFlow/CreationFlow.tsx

@@ -33,6 +33,7 @@ const CreationFlow: React.FC<CreationFlowProps> = (props: CreationFlowProps) =>
   const {
     fetchTemplatesV2,
     fetchRecentProjects,
+    fetchFeed,
     fetchStorages,
     fetchFolderItemsByPath,
     setCreationFlowStatus,
@@ -73,6 +74,7 @@ const CreationFlow: React.FC<CreationFlowProps> = (props: CreationFlowProps) =>
       await fetchProjectById(cachedProjectId);
     }
     await fetchStorages();
+    fetchFeed();
     fetchRecentProjects();
     fetchTemplatesV2([firstPartyTemplateFeed]);
   };

Composer/packages/client/src/components/CreationFlow/v2/CreationFlow.tsx

@@ -40,6 +40,7 @@ const CreationFlowV2: React.FC<CreationFlowProps> = () => {
     updateFolder,
     saveTemplateId,
     fetchRecentProjects,
+    fetchFeed,
     openProject,
     saveProjectAs,
     fetchProjectById,
@@ -76,7 +77,7 @@ const CreationFlowV2: React.FC<CreationFlowProps> = () => {
     }
     await fetchStorages();
     await fetchTemplatesV2([firstPartyTemplateFeed]);
-
+    fetchFeed();
     fetchRecentProjects();
   };
 

Composer/packages/client/src/constants.ts

@@ -14,6 +14,8 @@ import { IDropdownOption } from 'office-ui-fabric-react/lib/Dropdown';
 export const BASEPATH = process.env.PUBLIC_URL || '/';
 export const BASEURL = `${process.env.PUBLIC_URL || ''}/api`;
 
+export const FEEDVERSION = 1;
+
 //the count about the undo/redo
 export const UNDO_LIMIT = 10;