Empty state for kubeconfig sync list

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>
   );

src/renderer/components/+preferences/kubeconfig-syncs.tsx

@@ -22,6 +22,7 @@ import fse from "fs-extra";
 import { action, computed, makeObservable, observable, reaction } from "mobx";
 import { disposeOnUnmount, observer } from "mobx-react";
 import React from "react";
+import { Notice } from "../+extensions/notice";
 
 import { KubeconfigSyncEntry, KubeconfigSyncValue, UserStore } from "../../../common/user-store";
 import { isWindows } from "../../../common/vars";
@@ -148,6 +149,14 @@ export class KubeconfigSyncs extends React.Component {
       );
     }
 
+    if (!entries.length) {
+      return (
+        <Notice className="mt-3">
+          <div className="flex-grow text-center">No files and folders have been synced yet</div>
+        </Notice>
+      );
+    }
+
     return (
       <div>
         {entries.map(this.renderEntry)}

src/renderer/components/cluster-settings/components/cluster-kubeconfig.tsx

@@ -43,7 +43,7 @@ export class ClusterKubeconfig extends React.Component<Props> {
 
   render() {
     return (
-      <Notice>
+      <Notice className="mb-14 mt-3">
         <SubTitle title="Kubeconfig" />
         <span>
           <a className="link value" onClick={this.openKubeconfig}>{this.props.cluster.kubeConfigPath}</a>