Sidebar cluster avatar (#3765)

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

@@ -51,23 +51,6 @@ describe("<Welcome/>", () => {
     WelcomeBannerRegistry.resetInstance();
   });
 
-  it("renders items in the top bar", async () => {
-    const testId = "testId";
-    const text = "topBarItem";
- 
-    TopBarRegistry.getInstance().getItems = jest.fn().mockImplementationOnce(() => [
-      {
-        components: {
-          Item: () => <span data-testid={testId}>{text}</span>
-        }
-      }
-    ]);
-
-    render(<Welcome />);
-
-    expect(screen.getByTestId(testId)).toHaveTextContent(text);
-  });
-
   it("renders <Banner /> registered in WelcomeBannerRegistry and hide logo", async () => {
     const testId = "testId";
 

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

@@ -27,7 +27,6 @@ import { Icon } from "../icon";
 import { productName, slackUrl } from "../../../common/vars";
 import { WelcomeMenuRegistry } from "../../../extensions/registries";
 import { WelcomeBannerRegistry } from "../../../extensions/registries";
-import { TopBar } from "../layout/topbar";
 
 export const defaultWidth = 320;
 
@@ -48,56 +47,53 @@ export class Welcome extends React.Component {
     }, defaultWidth);
 
     return (
-      <>
-        <TopBar/>
-        <div className="flex justify-center Welcome align-center">
-          <div style={{ width: `${maxWidth}px` }} data-testid="welcome-banner-container">
-            {welcomeBanner.length > 0 ? (
-              <Carousel
-                stopAutoPlayOnHover={true}
-                indicators={welcomeBanner.length > 1}
-                autoPlay={true}
-                navButtonsAlwaysInvisible={true}
-                indicatorIconButtonProps={{
-                  style: {
-                    color: "var(--iconActiveBackground)"
-                  }
-                }}
-                activeIndicatorIconButtonProps={{
-                  style: {
-                    color: "var(--iconActiveColor)"
-                  }
-                }}
-                interval={8000}
-              >
-                {welcomeBanner.map((item, index) =>
-                  <item.Banner key={index} />
-                )}
-              </Carousel>
-            ) : <Icon svg="logo-lens" className="logo" />}
+      <div className="flex justify-center Welcome align-center">
+        <div style={{ width: `${maxWidth}px` }} data-testid="welcome-banner-container">
+          {welcomeBanner.length > 0 ? (
+            <Carousel
+              stopAutoPlayOnHover={true}
+              indicators={welcomeBanner.length > 1}
+              autoPlay={true}
+              navButtonsAlwaysInvisible={true}
+              indicatorIconButtonProps={{
+                style: {
+                  color: "var(--iconActiveBackground)"
+                }
+              }}
+              activeIndicatorIconButtonProps={{
+                style: {
+                  color: "var(--iconActiveColor)"
+                }
+              }}
+              interval={8000}
+            >
+              {welcomeBanner.map((item, index) =>
+                <item.Banner key={index} />
+              )}
+            </Carousel>
+          ) : <Icon svg="logo-lens" className="logo" />}
 
-            <div className="flex justify-center">
-              <div style={{ width: `${defaultWidth}px` }} data-testid="welcome-text-container">
-                <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>
-              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 />
-              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>
+            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 />
+            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>
 
-                <ul className="block" style={{ width: `${defaultWidth}px` }} data-testid="welcome-menu-container">
-                  {WelcomeMenuRegistry.getInstance().getItems().map((item, index) => (
-                    <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" />
-                    </li>
-                  ))}
-                </ul>
-              </div>
+              <ul className="block" style={{ width: `${defaultWidth}px` }} data-testid="welcome-menu-container">
+                {WelcomeMenuRegistry.getInstance().getItems().map((item, index) => (
+                  <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" />
+                  </li>
+                ))}
+              </ul>
             </div>
           </div>
         </div>
-      </>
+      </div>
     );
   }
 }