Polishing Kubernetes section view in Preferences (#3603)

* Using RemovableItem for items in Kubernetes page

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>

* Helm Charts empty state

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>

* Empty state for kubeconfig sync list

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>

* Remove unused styles

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>

* Fixing tests

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>

src/renderer/components/+extensions/extensions.tsx

@@ -515,7 +515,7 @@ export class Extensions extends React.Component<Props> {
           <section>
             <h1>Extensions</h1>
 
-            <Notice>
+            <Notice className="mb-14 mt-3">
               <p>
                 Add new features via Lens Extensions.{" "}
                 Check out <a href={`${docsUrl}/extensions/`} target="_blank" rel="noreferrer">docs</a>{" "}

src/renderer/components/+extensions/notice.module.css

@@ -20,7 +20,7 @@
  */
 
 .notice {
-  @apply p-8 flex flex-col gap-2 mb-14 mt-3 rounded-lg;
+  @apply p-8 flex flex-col gap-2 rounded-lg;
   background-color: var(--inputControlBackground);
   border: 1px solid var(--boxShadow);
   color: var(--textColorTertiary);

src/renderer/components/+extensions/notice.tsx

@@ -21,12 +21,15 @@
 
 import styles from "./notice.module.css";
 import React, { DOMAttributes } from "react";
+import { cssNames } from "../../utils";
 
-interface Props extends DOMAttributes<any> {}
+interface Props extends DOMAttributes<any> {
+  className?: string;
+}
 
 export function Notice(props: Props) {
   return (
-    <div className={styles.notice}>
+    <div className={cssNames(styles.notice, props.className)}>
       {props.children}
     </div>
   );