Add WelcomeBanner.width extension API (#3663)

* Allow to add WelcomeBannerRegistration.width and use that to caculate to width of Banner container

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

* Export at const

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

src/extensions/registries/welcome-banner-registry.ts

@@ -30,6 +30,10 @@ export interface WelcomeBannerRegistration {
    * The banner component to be shown on the welcome screen.
    */
   Banner?: React.ComponentType
+  /**
+   * The banner width in px.
+   */
+  width?: number
 }
 
 export class WelcomeBannerRegistry extends BaseRegistry<WelcomeBannerRegistration> { }

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

@@ -24,6 +24,7 @@ import { render, screen } from "@testing-library/react";
 import "@testing-library/jest-dom/extend-expect";
 import { Welcome } from "../welcome";
 import { TopBarRegistry, WelcomeMenuRegistry, WelcomeBannerRegistry } from "../../../../extensions/registries";
+import { defaultWidth } from "../welcome";
 
 describe("<Welcome/>", () => {
   beforeEach(() => {
@@ -69,4 +70,30 @@ describe("<Welcome/>", () => {
     expect(screen.queryByTestId(testId)).toBeInTheDocument();
     expect(container.getElementsByClassName("logo").length).toBe(0);
   });
+
+  it("calculates max width from WelcomeBanner.width registered in WelcomeBannerRegistry", async () => {
+    WelcomeBannerRegistry.getInstance().getItems = jest.fn().mockImplementationOnce(() => [
+      {
+        width: 100,
+        Banner: () => <div />
+      },
+      {
+        width: 800,
+        Banner: () => <div />
+      }
+    ]);
+
+    render(<Welcome />);
+
+    expect(screen.queryByTestId("welcome-banner-container")).toHaveStyle({
+      // should take the max width of the banners (if > defaultWidth)
+      width: `800px`,
+    });
+    expect(screen.queryByTestId("welcome-text-container")).toHaveStyle({
+      width: `${defaultWidth}px`
+    });
+    expect(screen.queryByTestId("welcome-menu-container")).toHaveStyle({
+      width: `${defaultWidth}px`
+    });
+  });
 });

src/renderer/components/+welcome/welcome.scss

@@ -25,10 +25,6 @@
   height: 100%;
   z-index: 1;
 
-  .box {
-    width: 320px;
-  }
-
   h2 {
     color: var(--textColorAccent);
     font-weight: 600;
@@ -41,7 +37,6 @@
   }
 
   ul {
-    width: 200px;
     margin-top: 20px;
 
     li {

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

@@ -29,21 +29,35 @@ import { WelcomeMenuRegistry } from "../../../extensions/registries";
 import { WelcomeTopbar } from "../cluster-manager/welcome-topbar";
 import { WelcomeBannerRegistry } from "../../../extensions/registries";
 
+export const defaultWidth = 320;
+
 @observer
 export class Welcome extends React.Component {
   render() {
     const welcomeBanner = WelcomeBannerRegistry.getInstance().getItems();
 
+    // if there is banner with specified width, use it to calculate the width of the container
+    const maxWidth = welcomeBanner.reduce((acc, curr) => {
+      const currWidth = curr.width ?? 0;
+
+      if (acc > currWidth) {
+        return acc;
+      }
+
+      return currWidth;
+    }, defaultWidth);
+
     return (
       <>
         <WelcomeTopbar/>
         <div className="flex justify-center Welcome align-center">
-          <div className="box">
+          <div style={{ width: `${maxWidth}px` }} data-testid="welcome-banner-container">
             {welcomeBanner.length > 0 ? (
               <Carousel
                 stopAutoPlayOnHover={true}
                 indicators={welcomeBanner.length > 1}
                 autoPlay={true}
+                navButtonsAlwaysInvisible={true}
               >
                 {welcomeBanner.map((item, index) =>
                   <item.Banner key={index} />
@@ -51,21 +65,25 @@ export class Welcome extends React.Component {
               </Carousel>
             ) : <Icon svg="logo-lens" className="logo" />}
 
-            <h2>Welcome to {productName} 5!</h2>
+            <div className="flex justify-center">
+              <div style={{ width: `${defaultWidth}px` }} data-testid="welcome-text-container">
+                <h2>Welcome to {productName} 5!</h2>
 
-            <p>
+                <p>
               To get you started we have auto-detected your clusters in your kubeconfig file and added them to the catalog, your centralized view for managing all your cloud-native resources.
-              <br/><br/>
+                  <br /><br />
               If you have any questions or feedback, please join our <a href={slackUrl} target="_blank" rel="noreferrer" className="link">Lens Community slack channel</a>.
-            </p>
+                </p>
 
-            <ul className="box">
+                <ul className="block" style={{ width: `${defaultWidth}px` }} data-testid="welcome-menu-container">
-              {WelcomeMenuRegistry.getInstance().getItems().map((item, index) => (
+                  {WelcomeMenuRegistry.getInstance().getItems().map((item, index) => (
-                <li key={index} className="flex grid-12" onClick={() => item.click()}>
+                    <li key={index} className="flex grid-12" onClick={() => item.click()}>
-                  <Icon material={item.icon} className="box col-1" /> <a className="box col-10">{typeof item.title === "string" ? item.title : item.title()}</a> <Icon material="navigate_next" className="box col-1" />
+                      <Icon material={item.icon} className="box col-1" /> <a className="box col-10">{typeof item.title === "string" ? item.title : item.title()}</a> <Icon material="navigate_next" className="box col-1" />
-                </li>
+                    </li>
-              ))}
+                  ))}
-            </ul>
+                </ul>
+              </div>
+            </div>
           </div>
         </div>
       </>