diff --git a/src/common/catalog-entities/icons/kubernetes.svg b/src/common/catalog-entities/icons/kubernetes.svg
new file mode 100644
index 0000000000..b4a9068420
--- /dev/null
+++ b/src/common/catalog-entities/icons/kubernetes.svg
@@ -0,0 +1,46 @@
+
+
+
diff --git a/src/common/catalog-entities/kubernetes-cluster.ts b/src/common/catalog-entities/kubernetes-cluster.ts
index b4b4c6aa5a..50f9966caf 100644
--- a/src/common/catalog-entities/kubernetes-cluster.ts
+++ b/src/common/catalog-entities/kubernetes-cluster.ts
@@ -85,7 +85,8 @@ export class KubernetesClusterCategory extends EventEmitter implements CatalogCa
public readonly apiVersion = "catalog.k8slens.dev/v1alpha1";
public readonly kind = "CatalogCategory";
public metadata = {
- name: "Kubernetes Clusters"
+ name: "Kubernetes Clusters",
+ icon: require(`!!raw-loader!./icons/kubernetes.svg`).default // eslint-disable-line
};
public spec = {
group: "entity.k8slens.dev",
diff --git a/src/common/catalog-entities/web-link.ts b/src/common/catalog-entities/web-link.ts
index db52fe0eb6..1e12db18cb 100644
--- a/src/common/catalog-entities/web-link.ts
+++ b/src/common/catalog-entities/web-link.ts
@@ -48,7 +48,8 @@ export class WebLinkCategory implements CatalogCategory {
public readonly apiVersion = "catalog.k8slens.dev/v1alpha1";
public readonly kind = "CatalogCategory";
public metadata = {
- name: "Web Links"
+ name: "Web Links",
+ icon: "link"
};
public spec = {
group: "entity.k8slens.dev",
diff --git a/src/common/catalog-entity.ts b/src/common/catalog-entity.ts
index 8430381368..f18f0fccca 100644
--- a/src/common/catalog-entity.ts
+++ b/src/common/catalog-entity.ts
@@ -8,6 +8,7 @@ export interface CatalogCategory {
kind: string;
metadata: {
name: string;
+ icon: string;
}
spec: {
group: string;
diff --git a/src/renderer/api/catalog-category-registry.ts b/src/renderer/api/catalog-category-registry.ts
new file mode 100644
index 0000000000..2e80789851
--- /dev/null
+++ b/src/renderer/api/catalog-category-registry.ts
@@ -0,0 +1 @@
+export { catalogCategoryRegistry } from "../../common/catalog-category-registry";
diff --git a/src/renderer/components/hotbar/hotbar-icon.scss b/src/renderer/components/hotbar/hotbar-icon.scss
index bce7070ad1..80252addae 100644
--- a/src/renderer/components/hotbar/hotbar-icon.scss
+++ b/src/renderer/components/hotbar/hotbar-icon.scss
@@ -38,6 +38,22 @@
}
}
+ .badge {
+ color: $textColorAccent;
+ position: absolute;
+ right: 0;
+ bottom: 0;
+ margin: -$padding;
+ font-size: $font-size-small;
+ background: $clusterMenuBackground;
+ color: white;
+ padding: 0px;
+ border-radius: 50%;
+ svg {
+ width: 13px;
+ }
+ }
+
img {
width: var(--size);
height: var(--size);
diff --git a/src/renderer/components/hotbar/hotbar-icon.tsx b/src/renderer/components/hotbar/hotbar-icon.tsx
index cbf77fba44..94a80df16a 100644
--- a/src/renderer/components/hotbar/hotbar-icon.tsx
+++ b/src/renderer/components/hotbar/hotbar-icon.tsx
@@ -12,6 +12,7 @@ import { observable } from "mobx";
import { navigate } from "../../navigation";
import { HotbarStore } from "../../../common/hotbar-store";
import { ConfirmDialog } from "../confirm-dialog";
+import { catalogCategoryRegistry } from "../../api/catalog-category-registry";
interface Props extends DOMAttributes {
entity: CatalogEntity;
@@ -55,6 +56,21 @@ export class HotbarIcon extends React.Component {
}
}
+ get badgeIcon() {
+ const className = "badge";
+ const category = catalogCategoryRegistry.getCategoryForEntity(this.props.entity);
+
+ if (!category) {
+ return ;
+ }
+
+ if (category.metadata.icon.includes(";
+ } else {
+ return ;
+ }
+ }
+
toggleMenu() {
this.menuOpen = !this.menuOpen;
}
@@ -106,6 +122,7 @@ export class HotbarIcon extends React.Component {
{entity.metadata.name}
{this.iconString}
+ { this.badgeIcon }