Add 'welcome banner' extension API (#3656)

* Add react-material-ui-carousel

Signed-off-by: Hung-Han (Henry) Chen <chenhungh@gmail.com>

* Add welcomeBanners extension api

Signed-off-by: Hung-Han (Henry) Chen <chenhungh@gmail.com>

src/renderer/components/+welcome/__test__/welcome.test.tsx

@@ -20,20 +20,22 @@
  */
 
 import React from "react";
-import { render } from "@testing-library/react";
+import { render, screen } from "@testing-library/react";
 import "@testing-library/jest-dom/extend-expect";
 import { Welcome } from "../welcome";
-import { TopBarRegistry, WelcomeMenuRegistry } from "../../../../extensions/registries";
+import { TopBarRegistry, WelcomeMenuRegistry, WelcomeBannerRegistry } from "../../../../extensions/registries";
 
 describe("<Welcome/>", () => {
   beforeEach(() => {
     TopBarRegistry.createInstance();
     WelcomeMenuRegistry.createInstance();
+    WelcomeBannerRegistry.createInstance();
   });
 
   afterEach(() => {
     TopBarRegistry.resetInstance();
     WelcomeMenuRegistry.resetInstance();
+    WelcomeBannerRegistry.resetInstance();
   });
 
   it("renders items in the top bar", async () => {
@@ -48,8 +50,23 @@ describe("<Welcome/>", () => {
       }
     ]);
 
-    const { getByTestId } = render(<Welcome  />);
+    render(<Welcome />);
 
-    expect(await getByTestId(testId)).toHaveTextContent(text);
+    expect(screen.getByTestId(testId)).toHaveTextContent(text);
+  });
+
+  it("renders <Banner /> registered in WelcomeBannerRegistry and hide logo", async () => {
+    const testId = "testId";
+
+    WelcomeBannerRegistry.getInstance().getItems = jest.fn().mockImplementationOnce(() => [
+      {
+        Banner: () => <div data-testid={testId} />
+      }
+    ]);
+
+    const { container } = render(<Welcome />);
+
+    expect(screen.queryByTestId(testId)).toBeInTheDocument();
+    expect(container.getElementsByClassName("logo").length).toBe(0);
   });
 });

src/renderer/components/+welcome/welcome.tsx

@@ -22,20 +22,34 @@
 import "./welcome.scss";
 import React from "react";
 import { observer } from "mobx-react";
+import Carousel from "react-material-ui-carousel";
 import { Icon } from "../icon";
 import { productName, slackUrl } from "../../../common/vars";
 import { WelcomeMenuRegistry } from "../../../extensions/registries";
 import { WelcomeTopbar } from "../cluster-manager/welcome-topbar";
+import { WelcomeBannerRegistry } from "../../../extensions/registries";
 
 @observer
 export class Welcome extends React.Component {
   render() {
+    const welcomeBanner = WelcomeBannerRegistry.getInstance().getItems();
+
     return (
       <>
         <WelcomeTopbar/>
-        <div className="Welcome flex justify-center align-center">
+        <div className="flex justify-center Welcome align-center">
           <div className="box">
-            <Icon svg="logo-lens" className="logo" />
+            {welcomeBanner.length > 0 ? (
+              <Carousel
+                stopAutoPlayOnHover={true}
+                indicators={welcomeBanner.length > 1}
+                autoPlay={true}
+              >
+                {welcomeBanner.map((item, index) =>
+                  <item.Banner key={index} />
+                )}
+              </Carousel>
+            ) : <Icon svg="logo-lens" className="logo" />}
 
             <h2>Welcome to {productName} 5!</h2>
 

src/renderer/initializers/registries.ts

@@ -34,6 +34,7 @@ export function initRegistries() {
   registries.KubeObjectStatusRegistry.createInstance();
   registries.StatusBarRegistry.createInstance();
   registries.WelcomeMenuRegistry.createInstance();
+  registries.WelcomeBannerRegistry.createInstance();
   registries.WorkloadsOverviewDetailRegistry.createInstance();
   registries.TopBarRegistry.createInstance();
 }