Add support for specifying an entity's shortName

- Remove CatalogEntityItem as it is a needless abstraction

- Refix transparent background bug after bad rebase

- Improve type safety around CatalogEntities by having CatalogEntitySpec
  be Partial<Record<string, unknown>>

- Cleanup implementation of catalogSyncToRendererInjectable

- Always use EntityPreferencesStore as an injectable

Signed-off-by: Sebastian Malton <sebastian@malton.name>

Make CatalogEntityRegistry.init redundent
- Make all IPC injectable

Signed-off-by: Sebastian Malton <sebastian@malton.name>

Ensure that catalog is initialized during startFrame

Signed-off-by: Sebastian Malton <sebastian@malton.name>

Fix tests that overroad catalog sync
- Actually use the catalog sync

Signed-off-by: Sebastian Malton <sebastian@malton.name>

Add behavioural tests

Signed-off-by: Sebastian Malton <sebastian@malton.name>

Don't assign in a computed

Signed-off-by: Sebastian Malton <sebastian@malton.name>

Make each store have a seperate migration version

- Allows each store to only bump its version when necessary
- Allows more decoupling from the extension API version so that PRs go stale slower

Signed-off-by: Sebastian Malton <sebastian@malton.name>

Add behavioural tests for short name length

Signed-off-by: Sebastian Malton <sebastian@malton.name>

Fix uses of testUsingTakeTime

Signed-off-by: Sebastian Malton <sebastian@malton.name>

Fix test flakiness by removing animate delay in tests

Signed-off-by: Sebastian Malton <sebastian@malton.name>

Update snapshots after removing timing sideeffects

Signed-off-by: Sebastian Malton <sebastian@malton.name>

package.json

@@ -315,7 +315,7 @@
     "@testing-library/dom": "^7.31.2",
     "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/react": "^12.1.5",
-    "@testing-library/user-event": "^13.5.0",
+    "@testing-library/user-event": "^14.4.3",
     "@types/byline": "^4.2.33",
     "@types/chart.js": "^2.9.36",
     "@types/circular-dependency-plugin": "5.0.5",

src/common/__tests__/cluster-store.test.ts

@@ -17,7 +17,6 @@ import directoryForTempInjectable from "../app-paths/directory-for-temp/director
 import kubectlBinaryNameInjectable from "../../main/kubectl/binary-name.injectable";
 import kubectlDownloadingNormalizedArchInjectable from "../../main/kubectl/normalized-arch.injectable";
 import normalizedPlatformInjectable from "../vars/normalized-platform.injectable";
-import storeMigrationVersionInjectable from "../vars/store-migration-version.injectable";
 import type { WriteJsonSync } from "../fs/write-json-sync.injectable";
 import writeJsonSyncInjectable from "../fs/write-json-sync.injectable";
 import type { ReadFileSync } from "../fs/read-file-sync.injectable";
@@ -27,6 +26,7 @@ import type { WriteFileSync } from "../fs/write-file-sync.injectable";
 import writeFileSyncInjectable from "../fs/write-file-sync.injectable";
 import type { WriteBufferSync } from "../fs/write-buffer-sync.injectable";
 import writeBufferSyncInjectable from "../fs/write-buffer-sync.injectable";
+import clusterStoreMigrationVersionInjectable from "../cluster-store/migration-version.injectable";
 
 // NOTE: this is intended to read the actual file system
 const testDataIcon = readFileSync("test-data/cluster-store-migration-icon.png");
@@ -281,7 +281,7 @@ describe("cluster-store", () => {
       });
       writeBufferSync("/some-directory-for-user-data/icon_path", testDataIcon);
 
-      di.override(storeMigrationVersionInjectable, () => "3.6.0");
+      di.override(clusterStoreMigrationVersionInjectable, () => "3.6.0");
 
       clusterStore = di.inject(clusterStoreInjectable);
       clusterStore.load();

src/common/__tests__/hotbar-store.test.ts

@@ -16,8 +16,8 @@ import catalogCatalogEntityInjectable from "../catalog-entities/general-catalog-
 import loggerInjectable from "../logger.injectable";
 import type { Logger } from "../logger";
 import directoryForUserDataInjectable from "../app-paths/directory-for-user-data/directory-for-user-data.injectable";
-import storeMigrationVersionInjectable from "../vars/store-migration-version.injectable";
 import writeJsonSyncInjectable from "../fs/write-json-sync.injectable";
+import hotbarStoreMigrationVersionInjectable from "../hotbars/migration-version.injectable";
 
 function getMockCatalogEntity(data: Partial<CatalogEntityData> & CatalogEntityKindData): CatalogEntity {
   return {
@@ -260,7 +260,7 @@ describe("HotbarStore", () => {
     });
   });
 
-  describe("given data from 5.0.0-beta.3 and version being 5.0.0-beta.10", () => {
+  describe("given data from 5.0.0-beta.3 and version being 5.6.0-alpha.7", () => {
     beforeEach(() => {
       const writeJsonSync = di.inject(writeJsonSyncInjectable);
 
@@ -322,7 +322,7 @@ describe("HotbarStore", () => {
         ],
       });
 
-      di.override(storeMigrationVersionInjectable, () => "5.0.0-beta.10");
+      di.override(hotbarStoreMigrationVersionInjectable, () => "5.6.0-alpha.7");
 
       hotbarStore = di.inject(hotbarStoreInjectable);
 
@@ -349,6 +349,7 @@ describe("HotbarStore", () => {
           name: "my-aws-cluster",
           source: "local",
           uid: "some-aws-id",
+          shortName: "mac",
         },
       });
     });

src/common/__tests__/user-store.test.ts

@@ -10,11 +10,11 @@ import type { ClusterStoreModel } from "../cluster-store/cluster-store";
 import { defaultThemeId } from "../vars";
 import writeFileInjectable from "../fs/write-file.injectable";
 import { getDiForUnitTesting } from "../../main/getDiForUnitTesting";
-import storeMigrationVersionInjectable from "../vars/store-migration-version.injectable";
 import releaseChannelInjectable from "../vars/release-channel.injectable";
 import defaultUpdateChannelInjectable from "../../features/application-update/common/selected-update-channel/default-update-channel.injectable";
 import writeJsonSyncInjectable from "../fs/write-json-sync.injectable";
 import writeFileSyncInjectable from "../fs/write-file-sync.injectable";
+import userStoreMigrationVersionInjectable from "../user-store/migration-version.injectable";
 
 describe("user store tests", () => {
   let userStore: UserStore;
@@ -88,7 +88,7 @@ describe("user store tests", () => {
 
       writeFileSync("/some/other/path", "is file");
 
-      di.override(storeMigrationVersionInjectable, () => "10.0.0");
+      di.override(userStoreMigrationVersionInjectable, () => "10.0.0");
 
       userStore.load();
     });

src/common/base-store/base-store.ts

@@ -8,7 +8,6 @@ import type { Migrations, Options as ConfOptions } from "conf/dist/source/types"
 import type { IEqualsComparer } from "mobx";
 import { makeObservable, reaction } from "mobx";
 import { disposer, isPromiseLike, toJS } from "../utils";
-import { broadcastMessage } from "../ipc";
 import isEqual from "lodash/isEqual";
 import { kebabCase } from "lodash";
 import type { GetConfigurationFileModel } from "../get-configuration-file-model/get-configuration-file-model.injectable";
@@ -16,18 +15,20 @@ import type { Logger } from "../logger";
 import type { PersistStateToConfig } from "./save-to-file";
 import type { GetBasenameOfPath } from "../path/get-basename.injectable";
 import type { EnlistMessageChannelListener } from "../utils/channel/enlist-message-channel-listener-injection-token";
+import type { SendMessageToChannel } from "../utils/channel/message-to-channel-injection-token";
+import type { MessageChannel } from "../utils/channel/message-channel-listener-injection-token";
 
-export interface BaseStoreParams<T> extends Omit<ConfOptions<T>, "migrations"> {
+export interface BaseStoreParams<T> extends Omit<ConfOptions<T>, "migrations" | "projectVersion"> {
   syncOptions?: {
     fireImmediately?: boolean;
     equals?: IEqualsComparer<T>;
   };
-  configName: string;
+  readonly configName: string;
 }
 
 export interface IpcChannelPrefixes {
-  local: string;
-  remote: string;
+  readonly local: string;
+  readonly remote: string;
 }
 
 export interface BaseStoreDependencies {
@@ -41,6 +42,7 @@ export interface BaseStoreDependencies {
   persistStateToConfig: PersistStateToConfig;
   getBasenameOfPath: GetBasenameOfPath;
   enlistMessageChannelListener: EnlistMessageChannelListener;
+  sendMessageToChannel: SendMessageToChannel;
 }
 
 /**
@@ -90,20 +92,26 @@ export abstract class BaseStore<T extends object> {
     const name = this.dependencies.getBasenameOfPath(config.path);
 
     const disableSync = () => this.syncDisposers();
+
+    const sendChannel: MessageChannel<T> = {
+      id: `${this.dependencies.ipcChannelPrefixes.remote}:${config.path}`,
+    };
+    const receiveChannel: MessageChannel<T> = {
+      id: `${this.dependencies.ipcChannelPrefixes.local}:${config.path}`,
+    };
+
     const enableSync = () => {
       this.syncDisposers.push(
         reaction(
           () => toJS(this.toJSON()), // unwrap possible observables and react to everything
           model => {
             this.dependencies.persistStateToConfig(config, model);
-            broadcastMessage(`${this.dependencies.ipcChannelPrefixes.remote}:${config.path}`, model);
+            this.dependencies.sendMessageToChannel(sendChannel, model);
           },
           this.params.syncOptions,
         ),
         this.dependencies.enlistMessageChannelListener({
-          channel: {
-            id: `${this.dependencies.ipcChannelPrefixes.local}:${config.path}`,
-          },
+          channel: receiveChannel,
           handler: (model) => {
             this.dependencies.logger.silly(`[${this.displayName}]: syncing ${name}`, { model });
 
@@ -113,11 +121,13 @@ export abstract class BaseStore<T extends object> {
 
             // todo: use "resourceVersion" if merge required (to avoid equality checks => better performance)
             if (!isEqual(this.toJSON(), model)) {
-              this.fromStore(model as T);
+              this.fromStore(model);
             }
 
             if (this.dependencies.shouldDisableSyncInListener) {
-              enableSync();
+              setImmediate(() => {
+                enableSync();
+              });
             }
           },
         }),

src/common/catalog-entities/kubernetes-cluster.ts

@@ -97,7 +97,7 @@ export class KubernetesCluster<
     }
   }
 
-  async onRun(context: CatalogEntityActionContext) {
+  onRun(context: CatalogEntityActionContext) {
     context.navigate(`/cluster/${this.getId()}`);
   }
 

src/common/catalog-entities/web-link.ts

@@ -4,7 +4,7 @@
  */
 
 import { Environments, getEnvironmentSpecificLegacyGlobalDiForExtensionApi } from "../../extensions/as-legacy-globals-for-extension-api/legacy-global-di-for-extension-api";
-import type { CatalogEntityContextMenuContext, CatalogEntityMetadata, CatalogEntityStatus } from "../catalog";
+import type { CatalogEntityContextMenuContext, CatalogEntityMetadata, CatalogEntitySpec, CatalogEntityStatus } from "../catalog";
 import { CatalogCategory, CatalogEntity, categoryVersion } from "../catalog/catalog-entity";
 import productNameInjectable from "../vars/product-name.injectable";
 import weblinkStoreInjectable from "../weblinks-store/weblink-store.injectable";
@@ -15,7 +15,7 @@ export interface WebLinkStatus extends CatalogEntityStatus {
   phase: WebLinkStatusPhase;
 }
 
-export interface WebLinkSpec {
+export interface WebLinkSpec extends CatalogEntitySpec {
   url: string;
 }
 
@@ -23,10 +23,10 @@ export class WebLink extends CatalogEntity<CatalogEntityMetadata, WebLinkStatus,
   public static readonly apiVersion = "entity.k8slens.dev/v1alpha1";
   public static readonly kind = "WebLink";
 
-  public readonly apiVersion = WebLink.apiVersion;
-  public readonly kind = WebLink.kind;
+  public readonly apiVersion: string = WebLink.apiVersion;
+  public readonly kind: string = WebLink.kind;
 
-  async onRun() {
+  onRun() {
     window.open(this.spec.url, "_blank");
   }
 

src/common/catalog/__tests__/helpers.test.ts

@@ -0,0 +1,32 @@
+/**
+ * Copyright (c) OpenLens Authors. All rights reserved.
+ * Licensed under MIT License. See LICENSE in root directory for more information.
+ */
+
+import { computeDefaultShortName } from "../helpers";
+
+describe("catalog helper tests", () => {
+  describe("computeDefaultShortName", () => {
+    it.each([
+      ["a", "a"],
+      ["", "??"],
+      [1, "??"],
+      [true, "??"],
+      ["ab", "ab"],
+      ["abc", "ab"],
+      ["abcde", "ab"],
+      ["ab-cd", "ac"],
+      ["ab-cd la", "al"],
+      ["ab-cd la_1", "al"],
+      ["ab-cd la 1_3", "al1"],
+      ["ab-cd la 1_3 lk", "al1"],
+      ["ab-cd la 1_3 lk aj", "al1"],
+      ["😀 a", "😀a"],
+      ["😀😎 a", "😀a"],
+      ["🇫🇮 Finland", "🇫🇮F"],
+      ["إعجم", "إع"],
+    ])("should compute from %p into %p", (input: any, output: string) => {
+      expect(computeDefaultShortName(input)).toBe(output);
+    });
+  });
+});

src/common/catalog/catalog-entity.ts

@@ -321,7 +321,7 @@ export interface CatalogEntityAddMenuContext {
   menuItems: CatalogEntityAddMenu[];
 }
 
-export type CatalogEntitySpec = Record<string, any>;
+export type CatalogEntitySpec = Partial<Record<string, unknown>>;
 
 
 export interface CatalogEntityData<
@@ -359,8 +359,6 @@ export abstract class CatalogEntity<
   @observable spec: Spec;
 
   constructor({ metadata, status, spec }: CatalogEntityData<Metadata, Status, Spec>) {
-    makeObservable(this);
-
     if (!metadata || typeof metadata !== "object") {
       throw new TypeError("CatalogEntity's metadata must be a defined object");
     }
@@ -376,6 +374,8 @@ export abstract class CatalogEntity<
     this.metadata = metadata;
     this.status = status;
     this.spec = spec;
+
+    makeObservable(this);
   }
 
   /**

src/common/catalog/helpers.ts

@@ -0,0 +1,83 @@
+/**
+ * Copyright (c) OpenLens Authors. All rights reserved.
+ * Licensed under MIT License. See LICENSE in root directory for more information.
+ */
+
+import type { CatalogEntity } from "./catalog-entity";
+import GraphemeSplitter from "grapheme-splitter";
+import { hasOwnProperty, hasTypedProperty, isObject, isString, iter } from "../utils";
+
+function getNameParts(name: string): string[] {
+  const byWhitespace = name.split(/\s+/);
+
+  if (byWhitespace.length > 1) {
+    return byWhitespace;
+  }
+
+  const byDashes = name.split(/[-_]+/);
+
+  if (byDashes.length > 1) {
+    return byDashes;
+  }
+
+  return name.split(/@+/);
+}
+
+export function limitGraphemeLengthOf(src: string, count: number): string {
+  const splitter = new GraphemeSplitter();
+
+  return iter
+    .chain(splitter.iterateGraphemes(src))
+    .take(count)
+    .join("");
+}
+
+export function computeDefaultShortName(name: string) {
+  if (!name || typeof name !== "string") {
+    return "??";
+  }
+
+  const [rawFirst, rawSecond, rawThird] = getNameParts(name);
+  const splitter = new GraphemeSplitter();
+  const first = splitter.iterateGraphemes(rawFirst);
+  const second = rawSecond ? splitter.iterateGraphemes(rawSecond): first;
+  const third = rawThird ? splitter.iterateGraphemes(rawThird) : iter.newEmpty<string>();
+
+  return iter.chain(iter.take(first, 1))
+    .concat(iter.take(second, 1))
+    .concat(iter.take(third, 1))
+    .join("");
+}
+
+export function getShortName(entity: CatalogEntity): string {
+  return entity.metadata.shortName || computeDefaultShortName(entity.getName());
+}
+
+export function getIconColourHash(entity: CatalogEntity): string {
+  return `${entity.metadata.name}-${entity.metadata.source}`;
+}
+
+export function getIconBackground(entity: CatalogEntity): string | undefined {
+  if (isObject(entity.spec.icon)) {
+    if (hasTypedProperty(entity.spec.icon, "background", isString)) {
+      return entity.spec.icon.background;
+    }
+
+    return hasOwnProperty(entity.spec.icon, "src")
+      ? "transparent"
+      : undefined;
+  }
+
+  return undefined;
+}
+
+export function getIconMaterial(entity: CatalogEntity): string | undefined {
+  if (
+    isObject(entity.spec.icon)
+    && hasTypedProperty(entity.spec.icon, "material", isString)
+  ) {
+    return entity.spec.icon.material;
+  }
+
+  return undefined;
+}

src/common/cluster-store/cluster-store.injectable.ts

@@ -10,7 +10,6 @@ import emitAppEventInjectable from "../app-event-bus/emit-event.injectable";
 import directoryForUserDataInjectable from "../app-paths/directory-for-user-data/directory-for-user-data.injectable";
 import getConfigurationFileModelInjectable from "../get-configuration-file-model/get-configuration-file-model.injectable";
 import loggerInjectable from "../logger.injectable";
-import storeMigrationVersionInjectable from "../vars/store-migration-version.injectable";
 import storeMigrationsInjectable from "../base-store/migrations.injectable";
 import { clusterStoreMigrationInjectionToken } from "./migration-token";
 import { baseStoreIpcChannelPrefixesInjectionToken } from "../base-store/channel-prefix";
@@ -18,6 +17,8 @@ import { shouldBaseStoreDisableSyncInIpcListenerInjectionToken } from "../base-s
 import { persistStateToConfigInjectionToken } from "../base-store/save-to-file";
 import getBasenameOfPathInjectable from "../path/get-basename.injectable";
 import { enlistMessageChannelListenerInjectionToken } from "../utils/channel/enlist-message-channel-listener-injection-token";
+import clusterStoreMigrationVersionInjectable from "./migration-version.injectable";
+import { sendMessageToChannelInjectionToken } from "../utils/channel/message-to-channel-injection-token";
 
 const clusterStoreInjectable = getInjectable({
   id: "cluster-store",
@@ -29,13 +30,14 @@ const clusterStoreInjectable = getInjectable({
     directoryForUserData: di.inject(directoryForUserDataInjectable),
     getConfigurationFileModel: di.inject(getConfigurationFileModelInjectable),
     logger: di.inject(loggerInjectable),
-    storeMigrationVersion: di.inject(storeMigrationVersionInjectable),
+    storeMigrationVersion: di.inject(clusterStoreMigrationVersionInjectable),
     migrations: di.inject(storeMigrationsInjectable, clusterStoreMigrationInjectionToken),
     getBasenameOfPath: di.inject(getBasenameOfPathInjectable),
     ipcChannelPrefixes: di.inject(baseStoreIpcChannelPrefixesInjectionToken),
     persistStateToConfig: di.inject(persistStateToConfigInjectionToken),
     enlistMessageChannelListener: di.inject(enlistMessageChannelListenerInjectionToken),
     shouldDisableSyncInListener: di.inject(shouldBaseStoreDisableSyncInIpcListenerInjectionToken),
+    sendMessageToChannel: di.inject(sendMessageToChannelInjectionToken),
   }),
 });
 

src/common/cluster-store/migration-version.injectable.ts

@@ -0,0 +1,12 @@
+/**
+ * Copyright (c) OpenLens Authors. All rights reserved.
+ * Licensed under MIT License. See LICENSE in root directory for more information.
+ */
+import { getInjectable } from "@ogre-tools/injectable";
+
+const clusterStoreMigrationVersionInjectable = getInjectable({
+  id: "cluster-store-migration-version",
+  instantiate: () => "6.4.0",
+});
+
+export default clusterStoreMigrationVersionInjectable;

src/common/entity-preferences/get-shortname.injectable.ts

@@ -0,0 +1,17 @@
+/**
+ * Copyright (c) OpenLens Authors. All rights reserved.
+ * Licensed under MIT License. See LICENSE in root directory for more information.
+ */
+import { getInjectable } from "@ogre-tools/injectable";
+import entityPreferencesStoreInjectable from "./store.injectable";
+
+const getEntityShortnameInjectable = getInjectable({
+  id: "get-entity-shortname",
+  instantiate: (di) => {
+    const entityPreferencesStore = di.inject(entityPreferencesStoreInjectable);
+
+    return (uid: string) => entityPreferencesStore.preferences.get(uid)?.shortName;
+  },
+});
+
+export default getEntityShortnameInjectable;

src/common/entity-preferences/migration-version.injectable.ts

@@ -0,0 +1,12 @@
+/**
+ * Copyright (c) OpenLens Authors. All rights reserved.
+ * Licensed under MIT License. See LICENSE in root directory for more information.
+ */
+import { getInjectable } from "@ogre-tools/injectable";
+
+const entityPreferencesStoreMigrationVersionInjectable = getInjectable({
+  id: "entity-preferences-store-migration-version",
+  instantiate: () => "6.4.0",
+});
+
+export default entityPreferencesStoreMigrationVersionInjectable;

src/common/entity-preferences/store.injectable.ts

@@ -0,0 +1,35 @@
+/**
+ * Copyright (c) OpenLens Authors. All rights reserved.
+ * Licensed under MIT License. See LICENSE in root directory for more information.
+ */
+import { getInjectable } from "@ogre-tools/injectable";
+import directoryForUserDataInjectable from "../app-paths/directory-for-user-data/directory-for-user-data.injectable";
+import { baseStoreIpcChannelPrefixesInjectionToken } from "../base-store/channel-prefix";
+import { shouldBaseStoreDisableSyncInIpcListenerInjectionToken } from "../base-store/disable-sync";
+import { persistStateToConfigInjectionToken } from "../base-store/save-to-file";
+import getConfigurationFileModelInjectable from "../get-configuration-file-model/get-configuration-file-model.injectable";
+import loggerInjectable from "../logger.injectable";
+import getBasenameOfPathInjectable from "../path/get-basename.injectable";
+import { enlistMessageChannelListenerInjectionToken } from "../utils/channel/enlist-message-channel-listener-injection-token";
+import { sendMessageToChannelInjectionToken } from "../utils/channel/message-to-channel-injection-token";
+import entityPreferencesStoreMigrationVersionInjectable from "./migration-version.injectable";
+import { EntityPreferencesStore } from "./store";
+
+const entityPreferencesStoreInjectable = getInjectable({
+  id: "entity-preferences-store",
+  instantiate: (di) => new EntityPreferencesStore({
+    directoryForUserData: di.inject(directoryForUserDataInjectable),
+    getConfigurationFileModel: di.inject(getConfigurationFileModelInjectable),
+    logger: di.inject(loggerInjectable),
+    storeMigrationVersion: di.inject(entityPreferencesStoreMigrationVersionInjectable),
+    getBasenameOfPath: di.inject(getBasenameOfPathInjectable),
+    ipcChannelPrefixes: di.inject(baseStoreIpcChannelPrefixesInjectionToken),
+    persistStateToConfig: di.inject(persistStateToConfigInjectionToken),
+    enlistMessageChannelListener: di.inject(enlistMessageChannelListenerInjectionToken),
+    shouldDisableSyncInListener: di.inject(shouldBaseStoreDisableSyncInIpcListenerInjectionToken),
+    migrations: {},
+    sendMessageToChannel: di.inject(sendMessageToChannelInjectionToken),
+  }),
+});
+
+export default entityPreferencesStoreInjectable;

src/common/entity-preferences/store.ts

@@ -0,0 +1,49 @@
+/**
+ * Copyright (c) OpenLens Authors. All rights reserved.
+ * Licensed under MIT License. See LICENSE in root directory for more information.
+ */
+
+import { merge } from "lodash";
+import { action, makeObservable, observable } from "mobx";
+import type { PartialDeep } from "type-fest";
+import type { BaseStoreDependencies } from "../base-store/base-store";
+import { BaseStore } from "../base-store/base-store";
+
+export interface EntityPreferencesModel {
+  /**
+   * Is used for displaying entity icons.
+   */
+  shortName?: string;
+}
+
+export interface EntityPreferencesStoreModel {
+  entities?: [string, EntityPreferencesModel][];
+}
+
+export class EntityPreferencesStore extends BaseStore<EntityPreferencesStoreModel> {
+  @observable readonly preferences = observable.map<string, PartialDeep<EntityPreferencesModel>>();
+
+  constructor(deps: BaseStoreDependencies) {
+    super(deps, {
+      configName: "lens-entity-preferences-store",
+    });
+
+    makeObservable(this);
+  }
+
+  @action
+  mergePreferences(entityId: string, preferences: PartialDeep<EntityPreferencesModel>): void {
+    this.preferences.set(entityId, merge(this.preferences.get(entityId), preferences));
+  }
+
+  @action
+  protected fromStore(data: EntityPreferencesStoreModel): void {
+    this.preferences.replace(data.entities ?? []);
+  }
+
+  toJSON(): EntityPreferencesStoreModel {
+    return {
+      entities: this.preferences.toJSON(),
+    };
+  }
+}

src/common/hotbars/migration-version.injectable.ts

@@ -0,0 +1,12 @@
+/**
+ * Copyright (c) OpenLens Authors. All rights reserved.
+ * Licensed under MIT License. See LICENSE in root directory for more information.
+ */
+import { getInjectable } from "@ogre-tools/injectable";
+
+const hotbarStoreMigrationVersionInjectable = getInjectable({
+  id: "hotbar-store-migration-version",
+  instantiate: () => "6.4.0",
+});
+
+export default hotbarStoreMigrationVersionInjectable;

src/common/hotbars/store.injectable.ts

@@ -8,7 +8,6 @@ import { HotbarStore } from "./store";
 import loggerInjectable from "../logger.injectable";
 import directoryForUserDataInjectable from "../app-paths/directory-for-user-data/directory-for-user-data.injectable";
 import getConfigurationFileModelInjectable from "../get-configuration-file-model/get-configuration-file-model.injectable";
-import storeMigrationVersionInjectable from "../vars/store-migration-version.injectable";
 import storeMigrationsInjectable from "../base-store/migrations.injectable";
 import { hotbarStoreMigrationInjectionToken } from "./migrations-token";
 import getBasenameOfPathInjectable from "../path/get-basename.injectable";
@@ -16,6 +15,8 @@ import { baseStoreIpcChannelPrefixesInjectionToken } from "../base-store/channel
 import { persistStateToConfigInjectionToken } from "../base-store/save-to-file";
 import { enlistMessageChannelListenerInjectionToken } from "../utils/channel/enlist-message-channel-listener-injection-token";
 import { shouldBaseStoreDisableSyncInIpcListenerInjectionToken } from "../base-store/disable-sync";
+import hotbarStoreMigrationVersionInjectable from "./migration-version.injectable";
+import { sendMessageToChannelInjectionToken } from "../utils/channel/message-to-channel-injection-token";
 
 const hotbarStoreInjectable = getInjectable({
   id: "hotbar-store",
@@ -25,13 +26,14 @@ const hotbarStoreInjectable = getInjectable({
     logger: di.inject(loggerInjectable),
     directoryForUserData: di.inject(directoryForUserDataInjectable),
     getConfigurationFileModel: di.inject(getConfigurationFileModelInjectable),
-    storeMigrationVersion: di.inject(storeMigrationVersionInjectable),
+    storeMigrationVersion: di.inject(hotbarStoreMigrationVersionInjectable),
     migrations: di.inject(storeMigrationsInjectable, hotbarStoreMigrationInjectionToken),
     getBasenameOfPath: di.inject(getBasenameOfPathInjectable),
     ipcChannelPrefixes: di.inject(baseStoreIpcChannelPrefixesInjectionToken),
     persistStateToConfig: di.inject(persistStateToConfigInjectionToken),
     enlistMessageChannelListener: di.inject(enlistMessageChannelListenerInjectionToken),
     shouldDisableSyncInListener: di.inject(shouldBaseStoreDisableSyncInIpcListenerInjectionToken),
+    sendMessageToChannel: di.inject(sendMessageToChannelInjectionToken),
   }),
 });
 

src/common/hotbars/store.ts

@@ -15,6 +15,7 @@ import { hotbarTooManyItemsChannel } from "../ipc/hotbar";
 import type { GeneralEntity } from "../catalog-entities";
 import type { Logger } from "../logger";
 import assert from "assert";
+import { computeDefaultShortName, getShortName } from "../catalog/helpers";
 
 export interface HotbarStoreModel {
   hotbars: Hotbar[];
@@ -82,18 +83,30 @@ export class HotbarStore extends BaseStore<HotbarStoreModel> {
     if (!data.hotbars || !data.hotbars.length) {
       const hotbar = getEmptyHotbar("Default");
       const {
-        metadata: { uid, name, source },
+        metadata: {
+          uid,
+          name,
+          source,
+        },
       } = this.dependencies.catalogCatalogEntity;
-      const initialItem = { entity: { uid, name, source }};
-
-      hotbar.items[0] = initialItem;
 
+      hotbar.items[0] = {
+        entity: {
+          uid,
+          name,
+          source,
+          shortName: getShortName(this.dependencies.catalogCatalogEntity),
+        },
+      };
       this.hotbars = [hotbar];
     } else {
       this.hotbars = data.hotbars;
     }
 
-    this.hotbars.forEach(ensureExactHotbarItemLength);
+    for (const hotbar of this.hotbars) {
+      ensureExactHotbarItemLength(hotbar);
+      ensureNamesAndShortNames(hotbar);
+    }
 
     if (data.activeHotbarId) {
       this._activeHotbarId = data.activeHotbarId;
@@ -102,6 +115,12 @@ export class HotbarStore extends BaseStore<HotbarStoreModel> {
     if (!this._activeHotbarId) {
       this._activeHotbarId = this.hotbars[0].id;
     }
+
+    const activeHotbarExists = this.hotbars.findIndex(hotbar => hotbar.id === this._activeHotbarId) >= 0;
+
+    if (!activeHotbarExists) {
+      this._activeHotbarId = this.hotbars[0].id;
+    }
   }
 
   toJSON(): HotbarStoreModel {
@@ -168,6 +187,7 @@ export class HotbarStore extends BaseStore<HotbarStoreModel> {
     const hotbar = this.getActive();
     const uid = item.getId();
     const name = item.getName();
+    const shortName = getShortName(item);
 
     if (typeof uid !== "string") {
       throw new TypeError("CatalogEntity's ID must be a string");
@@ -177,6 +197,10 @@ export class HotbarStore extends BaseStore<HotbarStoreModel> {
       throw new TypeError("CatalogEntity's NAME must be a string");
     }
 
+    if (typeof shortName !== "string") {
+      throw new TypeError("CatalogEntity's SHORT_NAME must be a string");
+    }
+
     if (this.isAddedToActive(item)) {
       return;
     }
@@ -185,6 +209,7 @@ export class HotbarStore extends BaseStore<HotbarStoreModel> {
       uid,
       name,
       source: item.metadata.source,
+      shortName,
     };
     const newItem = { entity };
 
@@ -349,3 +374,23 @@ function ensureExactHotbarItemLength(hotbar: Hotbar) {
     }
   }
 }
+
+/**
+ * This function ensures that the data coming in has the correct form
+ * @param hotbar The hotbar to modify
+ */
+function ensureNamesAndShortNames(hotbar: Hotbar) {
+  for (let i = 0; i < hotbar.items.length; i += 1) {
+    const item = hotbar.items[i];
+
+    if (!item) {
+      continue;
+    }
+
+    if (!item.entity.name || typeof item.entity.name !== "string") {
+      hotbar.items[i] = null;
+    } else if (!item.entity.shortName || typeof item.entity.shortName !== "string") {
+      item.entity.shortName = computeDefaultShortName(item.entity.name);
+    }
+  }
+}

src/common/hotbars/types.ts

@@ -7,15 +7,16 @@ import * as uuid from "uuid";
 import type { Tuple } from "../utils";
 import { tuple } from "../utils";
 
+export interface HotbarItemEntity {
+  uid: string;
+  name: string;
+  shortName: string;
+  source?: string;
+}
+
 export interface HotbarItem {
-  entity: {
-    uid: string;
-    name: string;
-    source?: string;
-  };
-  params?: {
-    [key: string]: string;
-  };
+  entity: HotbarItemEntity;
+  params?: Partial<Record<string, string>>;
 }
 
 export type Hotbar = Required<CreateHotbarData>;

src/common/ipc/catalog.ts

@@ -1,19 +0,0 @@
-/**
- * Copyright (c) OpenLens Authors. All rights reserved.
- * Licensed under MIT License. See LICENSE in root directory for more information.
- */
-
-/**
- * This is used to activate a specific entity in the renderer main frame
- */
-export const catalogEntityRunListener = "catalog-entity:run";
-
-/**
- * This is broadcast on whenever there is an update to any catalog item
- */
-export const catalogItemsChannel = "catalog:items";
-
-/**
- * This can be sent from renderer to main to initialize a broadcast of ITEMS
- */
-export const catalogInitChannel = "catalog:init";

src/common/test-utils/use-fake-time.ts

@@ -16,10 +16,21 @@ export const advanceFakeTime = (milliseconds: number) => {
   });
 };
 
-export const testUsingFakeTime = (dateTime = "2015-10-21T07:28:00Z") => {
+export interface TestUsingFakeTimeOptions {
+  dateTime?: string;
+  autoAdvance?: boolean;
+}
+
+export const testUsingFakeTime = ({ autoAdvance = false, dateTime: dateTime = "2015-10-21T07:28:00Z" }: TestUsingFakeTimeOptions = {}) => {
   usingFakeTime = true;
 
+  const setInterval = global.setInterval;
+
   jest.useFakeTimers();
 
+  if (autoAdvance) {
+    setInterval(() => advanceFakeTime(100), 100);
+  }
+
   jest.setSystemTime(new Date(dateTime));
 };

src/common/user-store/migration-version.injectable.ts

@@ -0,0 +1,12 @@
+/**
+ * Copyright (c) OpenLens Authors. All rights reserved.
+ * Licensed under MIT License. See LICENSE in root directory for more information.
+ */
+import { getInjectable } from "@ogre-tools/injectable";
+
+const userStoreMigrationVersionInjectable = getInjectable({
+  id: "user-store-migration-version",
+  instantiate: () => "6.4.0",
+});
+
+export default userStoreMigrationVersionInjectable;

src/common/user-store/user-store.injectable.ts

@@ -9,7 +9,6 @@ import emitAppEventInjectable from "../app-event-bus/emit-event.injectable";
 import directoryForUserDataInjectable from "../app-paths/directory-for-user-data/directory-for-user-data.injectable";
 import getConfigurationFileModelInjectable from "../get-configuration-file-model/get-configuration-file-model.injectable";
 import loggerInjectable from "../logger.injectable";
-import storeMigrationVersionInjectable from "../vars/store-migration-version.injectable";
 import storeMigrationsInjectable from "../base-store/migrations.injectable";
 import { userStoreMigrationInjectionToken } from "./migrations-token";
 import { baseStoreIpcChannelPrefixesInjectionToken } from "../base-store/channel-prefix";
@@ -18,6 +17,8 @@ import { persistStateToConfigInjectionToken } from "../base-store/save-to-file";
 import getBasenameOfPathInjectable from "../path/get-basename.injectable";
 import { enlistMessageChannelListenerInjectionToken } from "../utils/channel/enlist-message-channel-listener-injection-token";
 import userStorePreferenceDescriptorsInjectable from "./preference-descriptors.injectable";
+import userStoreMigrationVersionInjectable from "./migration-version.injectable";
+import { sendMessageToChannelInjectionToken } from "../utils/channel/message-to-channel-injection-token";
 
 const userStoreInjectable = getInjectable({
   id: "user-store",
@@ -28,7 +29,7 @@ const userStoreInjectable = getInjectable({
     directoryForUserData: di.inject(directoryForUserDataInjectable),
     getConfigurationFileModel: di.inject(getConfigurationFileModelInjectable),
     logger: di.inject(loggerInjectable),
-    storeMigrationVersion: di.inject(storeMigrationVersionInjectable),
+    storeMigrationVersion: di.inject(userStoreMigrationVersionInjectable),
     migrations: di.inject(storeMigrationsInjectable, userStoreMigrationInjectionToken),
     getBasenameOfPath: di.inject(getBasenameOfPathInjectable),
     ipcChannelPrefixes: di.inject(baseStoreIpcChannelPrefixesInjectionToken),
@@ -36,6 +37,7 @@ const userStoreInjectable = getInjectable({
     enlistMessageChannelListener: di.inject(enlistMessageChannelListenerInjectionToken),
     shouldDisableSyncInListener: di.inject(shouldBaseStoreDisableSyncInIpcListenerInjectionToken),
     preferenceDescriptors: di.inject(userStorePreferenceDescriptorsInjectable),
+    sendMessageToChannel: di.inject(sendMessageToChannelInjectionToken),
   }),
 });
 

src/common/utils/channel/enlist-message-channel-listener-injection-token.ts

@@ -6,7 +6,7 @@ import { getInjectionToken } from "@ogre-tools/injectable";
 import type { Disposer } from "../disposer";
 import type { MessageChannel, MessageChannelListener } from "./message-channel-listener-injection-token";
 
-export type EnlistMessageChannelListener = (listener: MessageChannelListener<MessageChannel<unknown>>) => Disposer;
+export type EnlistMessageChannelListener = <T>(listener: MessageChannelListener<MessageChannel<T>>) => Disposer;
 
 export const enlistMessageChannelListenerInjectionToken = getInjectionToken<EnlistMessageChannelListener>({
   id: "enlist-message-channel-listener",

src/common/utils/iter.ts

@@ -14,6 +14,7 @@ interface Iterator<T> extends Iterable<T> {
   flatMap<U>(fn: (val: T) => U[]): Iterator<U>;
   concat(src2: IterableIterator<T>): Iterator<T>;
   join(sep?: string): string;
+  take(count: number): Iterator<T>;
 }
 
 export function chain<T>(src: IterableIterator<T>): Iterator<T> {
@@ -26,6 +27,7 @@ export function chain<T>(src: IterableIterator<T>): Iterator<T> {
     join: (sep) => join(src, sep),
     collect: (fn) => fn(src),
     concat: (src2) => chain(concat(src, src2)),
+    take: (count) => chain(take(src, count)),
     [Symbol.iterator]: () => src,
   };
 }

src/common/utils/reactive-now/reactive-now.test.tsx

@@ -15,7 +15,9 @@ describe("reactiveNow", () => {
   let someComputed: IComputedValue<boolean>;
 
   beforeEach(() => {
-    testUsingFakeTime("2015-10-21T07:28:00Z");
+    testUsingFakeTime({
+      dateTime: "2015-10-21T07:28:00Z",
+    });
 
     someComputed = computed(() => {
       const currentTimestamp = reactiveNow();

src/common/vars/store-migration-version.injectable.ts

@@ -1,13 +0,0 @@
-/**
- * Copyright (c) OpenLens Authors. All rights reserved.
- * Licensed under MIT License. See LICENSE in root directory for more information.
- */
-import { getInjectable } from "@ogre-tools/injectable";
-import applicationInformationToken from "./application-information-token";
-
-const storeMigrationVersionInjectable = getInjectable({
-  id: "store-migration-version",
-  instantiate: (di) => di.inject(applicationInformationToken).version,
-});
-
-export default storeMigrationVersionInjectable;

src/common/weblinks-store/migration-version.injectable.ts

@@ -0,0 +1,12 @@
+/**
+ * Copyright (c) OpenLens Authors. All rights reserved.
+ * Licensed under MIT License. See LICENSE in root directory for more information.
+ */
+import { getInjectable } from "@ogre-tools/injectable";
+
+const weblinksStoreMigrationVersionInjectable = getInjectable({
+  id: "weblinks-store-migration-version",
+  instantiate: () => "6.4.0",
+});
+
+export default weblinksStoreMigrationVersionInjectable;

src/common/weblinks-store/weblink-store.injectable.ts

@@ -12,8 +12,9 @@ import getConfigurationFileModelInjectable from "../get-configuration-file-model
 import loggerInjectable from "../logger.injectable";
 import getBasenameOfPathInjectable from "../path/get-basename.injectable";
 import { enlistMessageChannelListenerInjectionToken } from "../utils/channel/enlist-message-channel-listener-injection-token";
-import storeMigrationVersionInjectable from "../vars/store-migration-version.injectable";
+import { sendMessageToChannelInjectionToken } from "../utils/channel/message-to-channel-injection-token";
 import { weblinkStoreMigrationInjectionToken } from "./migration-token";
+import weblinksStoreMigrationVersionInjectable from "./migration-version.injectable";
 import { WeblinkStore } from "./weblink-store";
 
 const weblinkStoreInjectable = getInjectable({
@@ -22,13 +23,14 @@ const weblinkStoreInjectable = getInjectable({
     directoryForUserData: di.inject(directoryForUserDataInjectable),
     getConfigurationFileModel: di.inject(getConfigurationFileModelInjectable),
     logger: di.inject(loggerInjectable),
-    storeMigrationVersion: di.inject(storeMigrationVersionInjectable),
+    storeMigrationVersion: di.inject(weblinksStoreMigrationVersionInjectable),
     migrations: di.inject(storeMigrationsInjectable, weblinkStoreMigrationInjectionToken),
     getBasenameOfPath: di.inject(getBasenameOfPathInjectable),
     ipcChannelPrefixes: di.inject(baseStoreIpcChannelPrefixesInjectionToken),
     persistStateToConfig: di.inject(persistStateToConfigInjectionToken),
     enlistMessageChannelListener: di.inject(enlistMessageChannelListenerInjectionToken),
     shouldDisableSyncInListener: di.inject(shouldBaseStoreDisableSyncInIpcListenerInjectionToken),
+    sendMessageToChannel: di.inject(sendMessageToChannelInjectionToken),
   }),
 });
 

src/extensions/extension-loader/extension-is-enabled-for-cluster.injectable.ts

@@ -14,16 +14,14 @@ interface ExtensionIsEnabledForCluster {
 const extensionIsEnabledForClusterInjectable = getInjectable({
   id: "extension-is-enabled-for-cluster",
 
-  instantiate: async (
-    di,
-    { extension, cluster }: ExtensionIsEnabledForCluster,
-  ) => (await extension.isEnabledForCluster(cluster)) as boolean,
+  instantiate: async (di, { extension, cluster }: ExtensionIsEnabledForCluster) => (
+    await extension.isEnabledForCluster(cluster) as boolean
+  ),
 
   lifecycle: lifecycleEnum.keyedSingleton({
-    getInstanceKey: (
-      di,
-      { extension, cluster }: ExtensionIsEnabledForCluster,
-    ) => `${extension.sanitizedExtensionId}-${cluster.getId()}`,
+    getInstanceKey: (di, { extension, cluster }: ExtensionIsEnabledForCluster) => (
+      `${extension.sanitizedExtensionId}-${cluster.getId()}`
+    ),
   }),
 });
 

src/extensions/extension-loader/extension/extension.injectable.ts

@@ -43,7 +43,7 @@ const extensionInjectable = getInjectable({
 
               reactionDisposer.push(
                 // injectables is either an array or a computed array, in which case
-                // we need to update the registered injectables with a reaction every time they change 
+                // we need to update the registered injectables with a reaction every time they change
                 reaction(
                   () => Array.isArray(injectables) ? injectables : injectables.get(),
                   (currentInjectables, previousInjectables = []) => {

src/extensions/extension-loader/file-system-provisioner-store/file-system-provisioner-store.injectable.ts

@@ -11,12 +11,13 @@ import randomBytesInjectable from "../../../common/utils/random-bytes.injectable
 import directoryForUserDataInjectable from "../../../common/app-paths/directory-for-user-data/directory-for-user-data.injectable";
 import getConfigurationFileModelInjectable from "../../../common/get-configuration-file-model/get-configuration-file-model.injectable";
 import loggerInjectable from "../../../common/logger.injectable";
-import storeMigrationVersionInjectable from "../../../common/vars/store-migration-version.injectable";
 import { baseStoreIpcChannelPrefixesInjectionToken } from "../../../common/base-store/channel-prefix";
 import { shouldBaseStoreDisableSyncInIpcListenerInjectionToken } from "../../../common/base-store/disable-sync";
 import { persistStateToConfigInjectionToken } from "../../../common/base-store/save-to-file";
 import getBasenameOfPathInjectable from "../../../common/path/get-basename.injectable";
 import { enlistMessageChannelListenerInjectionToken } from "../../../common/utils/channel/enlist-message-channel-listener-injection-token";
+import fileSystemProvisionerStoreMigrationVersionInjectable from "./migration-version.injectable";
+import { sendMessageToChannelInjectionToken } from "../../../common/utils/channel/message-to-channel-injection-token";
 
 const fileSystemProvisionerStoreInjectable = getInjectable({
   id: "file-system-provisioner-store",
@@ -29,13 +30,14 @@ const fileSystemProvisionerStoreInjectable = getInjectable({
     directoryForUserData: di.inject(directoryForUserDataInjectable),
     getConfigurationFileModel: di.inject(getConfigurationFileModelInjectable),
     logger: di.inject(loggerInjectable),
-    storeMigrationVersion: di.inject(storeMigrationVersionInjectable),
+    storeMigrationVersion: di.inject(fileSystemProvisionerStoreMigrationVersionInjectable),
     migrations: {},
     getBasenameOfPath: di.inject(getBasenameOfPathInjectable),
     ipcChannelPrefixes: di.inject(baseStoreIpcChannelPrefixesInjectionToken),
     persistStateToConfig: di.inject(persistStateToConfigInjectionToken),
     enlistMessageChannelListener: di.inject(enlistMessageChannelListenerInjectionToken),
     shouldDisableSyncInListener: di.inject(shouldBaseStoreDisableSyncInIpcListenerInjectionToken),
+    sendMessageToChannel: di.inject(sendMessageToChannelInjectionToken),
   }),
 });
 

src/extensions/extension-loader/file-system-provisioner-store/migration-version.injectable.ts

@@ -0,0 +1,12 @@
+/**
+ * Copyright (c) OpenLens Authors. All rights reserved.
+ * Licensed under MIT License. See LICENSE in root directory for more information.
+ */
+import { getInjectable } from "@ogre-tools/injectable";
+
+const fileSystemProvisionerStoreMigrationVersionInjectable = getInjectable({
+  id: "file-system-provisioner-store-migration-version",
+  instantiate: () => "6.4.0",
+});
+
+export default fileSystemProvisionerStoreMigrationVersionInjectable;

src/extensions/extension-store.ts

@@ -14,13 +14,13 @@ import { getLegacyGlobalDiForExtensionApi } from "./as-legacy-globals-for-extens
 import directoryForUserDataInjectable from "../common/app-paths/directory-for-user-data/directory-for-user-data.injectable";
 import getConfigurationFileModelInjectable from "../common/get-configuration-file-model/get-configuration-file-model.injectable";
 import loggerInjectable from "../common/logger.injectable";
-import storeMigrationVersionInjectable from "../common/vars/store-migration-version.injectable";
 import type { Migrations } from "conf/dist/source/types";
 import { baseStoreIpcChannelPrefixesInjectionToken } from "../common/base-store/channel-prefix";
 import { shouldBaseStoreDisableSyncInIpcListenerInjectionToken } from "../common/base-store/disable-sync";
 import { persistStateToConfigInjectionToken } from "../common/base-store/save-to-file";
 import getBasenameOfPathInjectable from "../common/path/get-basename.injectable";
 import { enlistMessageChannelListenerInjectionToken } from "../common/utils/channel/enlist-message-channel-listener-injection-token";
+import { sendMessageToChannelInjectionToken } from "../common/utils/channel/message-to-channel-injection-token";
 
 export interface ExtensionStoreParams<T extends object> extends BaseStoreParams<T> {
   migrations?: Migrations<T>;
@@ -52,18 +52,29 @@ export abstract class ExtensionStore<T extends object> extends BaseStore<T> {
   constructor({ migrations, ...params }: ExtensionStoreParams<T>) {
     const di = getLegacyGlobalDiForExtensionApi();
 
-    super({
+    super(Object.defineProperty({
       directoryForUserData: di.inject(directoryForUserDataInjectable),
       getConfigurationFileModel: di.inject(getConfigurationFileModelInjectable),
       logger: di.inject(loggerInjectable),
-      storeMigrationVersion: di.inject(storeMigrationVersionInjectable),
+      storeMigrationVersion: "",
       migrations: migrations as Migrations<Record<string, unknown>>,
       getBasenameOfPath: di.inject(getBasenameOfPathInjectable),
       ipcChannelPrefixes: di.inject(baseStoreIpcChannelPrefixesInjectionToken),
       persistStateToConfig: di.inject(persistStateToConfigInjectionToken),
       enlistMessageChannelListener: di.inject(enlistMessageChannelListenerInjectionToken),
       shouldDisableSyncInListener: di.inject(shouldBaseStoreDisableSyncInIpcListenerInjectionToken),
-    }, params);
+      sendMessageToChannel: di.inject(sendMessageToChannelInjectionToken),
+    }, "storeMigrationVersion", {
+      get: () => {
+        const { version } = this.extension ?? {};
+
+        if (!version) {
+          throw new Error("Extension must be loaded before creating store");
+        }
+
+        return version;
+      },
+    }), params);
   }
 
   /**
@@ -78,8 +89,6 @@ export abstract class ExtensionStore<T extends object> extends BaseStore<T> {
   loadExtension(extension: LensExtension) {
     this.extension = extension;
 
-    this.params.projectVersion ??= this.extension.version;
-
     return super.load();
   }
 

src/extensions/extensions-store/extensions-store.injectable.ts

@@ -11,8 +11,9 @@ import getConfigurationFileModelInjectable from "../../common/get-configuration-
 import loggerInjectable from "../../common/logger.injectable";
 import getBasenameOfPathInjectable from "../../common/path/get-basename.injectable";
 import { enlistMessageChannelListenerInjectionToken } from "../../common/utils/channel/enlist-message-channel-listener-injection-token";
-import storeMigrationVersionInjectable from "../../common/vars/store-migration-version.injectable";
+import { sendMessageToChannelInjectionToken } from "../../common/utils/channel/message-to-channel-injection-token";
 import { ExtensionsStore } from "./extensions-store";
+import extensionsStoreMigrationVersionInjectable from "./migration-version.injectable";
 
 const extensionsStoreInjectable = getInjectable({
   id: "extensions-store",
@@ -20,13 +21,14 @@ const extensionsStoreInjectable = getInjectable({
     directoryForUserData: di.inject(directoryForUserDataInjectable),
     getConfigurationFileModel: di.inject(getConfigurationFileModelInjectable),
     logger: di.inject(loggerInjectable),
-    storeMigrationVersion: di.inject(storeMigrationVersionInjectable),
+    storeMigrationVersion: di.inject(extensionsStoreMigrationVersionInjectable),
     migrations: {},
     getBasenameOfPath: di.inject(getBasenameOfPathInjectable),
     ipcChannelPrefixes: di.inject(baseStoreIpcChannelPrefixesInjectionToken),
     persistStateToConfig: di.inject(persistStateToConfigInjectionToken),
     enlistMessageChannelListener: di.inject(enlistMessageChannelListenerInjectionToken),
     shouldDisableSyncInListener: di.inject(shouldBaseStoreDisableSyncInIpcListenerInjectionToken),
+    sendMessageToChannel: di.inject(sendMessageToChannelInjectionToken),
   }),
 });
 

src/extensions/extensions-store/migration-version.injectable.ts

@@ -0,0 +1,12 @@
+/**
+ * Copyright (c) OpenLens Authors. All rights reserved.
+ * Licensed under MIT License. See LICENSE in root directory for more information.
+ */
+import { getInjectable } from "@ogre-tools/injectable";
+
+const extensionsStoreMigrationVersionInjectable = getInjectable({
+  id: "extensions-store-migration-version",
+  instantiate: () => "6.4.0",
+});
+
+export default extensionsStoreMigrationVersionInjectable;

src/extensions/lens-extension-set-dependencies.ts

@@ -7,7 +7,7 @@ import type { IComputedValue } from "mobx";
 import type { CatalogCategoryRegistry } from "../common/catalog";
 import type { NavigateToRoute } from "../common/front-end-routing/navigate-to-route-injection-token";
 import type { Route } from "../common/front-end-routing/front-end-route-injection-token";
-import type { CatalogEntityRegistry as MainCatalogEntityRegistry } from "../main/catalog";
+import type { CatalogEntityRegistry as MainCatalogEntityRegistry } from "../main/catalog/entity-registry";
 import type { CatalogEntityRegistry as RendererCatalogEntityRegistry } from "../renderer/api/catalog/entity/registry";
 import type { GetExtensionPageParameters } from "../renderer/routes/get-extension-page-parameters.injectable";
 import type { FileSystemProvisionerStore } from "./extension-loader/file-system-provisioner-store/file-system-provisioner-store";

src/features/__snapshots__/extension-special-characters-in-page-registrations.test.tsx.snap

@@ -162,22 +162,42 @@ exports[`extension special characters in page registrations renders 1`] = `
         class="HotbarItems flex column gaps"
       >
         <div
-          class="HotbarCell isDraggingOwner animateDown"
+          class="HotbarCell animateDown"
           index="0"
         >
           <div
             style="z-index: 12; position: absolute;"
           >
             <div
-              class="HotbarIcon contextMenuAvailable"
+              class="HotbarIcon"
             >
               <div
-                class="Avatar rounded disabled avatar"
-                id="hotbarIcon-hotbar-icon-catalog-entity"
-                style="width: 40px; height: 40px; background: rgb(5, 1, 130);"
+                class="Avatar rounded avatar"
+                data-testid="hotbar-icon-for-catalog-entity"
+                id="hotbar-icon-for-catalog-entity"
+                style="width: 40px; height: 40px; background-color: rgb(61, 144, 206);"
               >
-                Ca
+                <i
+                  class="Icon material focusable"
+                >
+                  <span
+                    class="icon"
+                    data-icon-name="view_list"
+                  >
+                    view_list
+                  </span>
+                </i>
               </div>
+              <i
+                class="Icon badge material focusable"
+              >
+                <span
+                  class="icon"
+                  data-icon-name="settings"
+                >
+                  settings
+                </span>
+              </i>
             </div>
           </div>
         </div>
@@ -366,22 +386,42 @@ exports[`extension special characters in page registrations when navigating to r
         class="HotbarItems flex column gaps"
       >
         <div
-          class="HotbarCell isDraggingOwner animateDown"
+          class="HotbarCell animateDown"
           index="0"
         >
           <div
             style="z-index: 12; position: absolute;"
           >
             <div
-              class="HotbarIcon contextMenuAvailable"
+              class="HotbarIcon"
             >
               <div
-                class="Avatar rounded disabled avatar"
-                id="hotbarIcon-hotbar-icon-catalog-entity"
-                style="width: 40px; height: 40px; background: rgb(5, 1, 130);"
+                class="Avatar rounded avatar"
+                data-testid="hotbar-icon-for-catalog-entity"
+                id="hotbar-icon-for-catalog-entity"
+                style="width: 40px; height: 40px; background-color: rgb(61, 144, 206);"
               >
-                Ca
+                <i
+                  class="Icon material focusable"
+                >
+                  <span
+                    class="icon"
+                    data-icon-name="view_list"
+                  >
+                    view_list
+                  </span>
+                </i>
               </div>
+              <i
+                class="Icon badge material focusable"
+              >
+                <span
+                  class="icon"
+                  data-icon-name="settings"
+                >
+                  settings
+                </span>
+              </i>
             </div>
           </div>
         </div>

src/features/__snapshots__/navigate-to-extension-page.test.tsx.snap

@@ -162,22 +162,42 @@ exports[`navigate to extension page renders 1`] = `
         class="HotbarItems flex column gaps"
       >
         <div
-          class="HotbarCell isDraggingOwner animateDown"
+          class="HotbarCell animateDown"
           index="0"
         >
           <div
             style="z-index: 12; position: absolute;"
           >
             <div
-              class="HotbarIcon contextMenuAvailable"
+              class="HotbarIcon"
             >
               <div
-                class="Avatar rounded disabled avatar"
-                id="hotbarIcon-hotbar-icon-catalog-entity"
-                style="width: 40px; height: 40px; background: rgb(5, 1, 130);"
+                class="Avatar rounded avatar"
+                data-testid="hotbar-icon-for-catalog-entity"
+                id="hotbar-icon-for-catalog-entity"
+                style="width: 40px; height: 40px; background-color: rgb(61, 144, 206);"
               >
-                Ca
+                <i
+                  class="Icon material focusable"
+                >
+                  <span
+                    class="icon"
+                    data-icon-name="view_list"
+                  >
+                    view_list
+                  </span>
+                </i>
               </div>
+              <i
+                class="Icon badge material focusable"
+              >
+                <span
+                  class="icon"
+                  data-icon-name="settings"
+                >
+                  settings
+                </span>
+              </i>
             </div>
           </div>
         </div>
@@ -366,22 +386,42 @@ exports[`navigate to extension page when extension navigates to child route rend
         class="HotbarItems flex column gaps"
       >
         <div
-          class="HotbarCell isDraggingOwner animateDown"
+          class="HotbarCell animateDown"
           index="0"
         >
           <div
             style="z-index: 12; position: absolute;"
           >
             <div
-              class="HotbarIcon contextMenuAvailable"
+              class="HotbarIcon"
             >
               <div
-                class="Avatar rounded disabled avatar"
-                id="hotbarIcon-hotbar-icon-catalog-entity"
-                style="width: 40px; height: 40px; background: rgb(5, 1, 130);"
+                class="Avatar rounded avatar"
+                data-testid="hotbar-icon-for-catalog-entity"
+                id="hotbar-icon-for-catalog-entity"
+                style="width: 40px; height: 40px; background-color: rgb(61, 144, 206);"
               >
-                Ca
+                <i
+                  class="Icon material focusable"
+                >
+                  <span
+                    class="icon"
+                    data-icon-name="view_list"
+                  >
+                    view_list
+                  </span>
+                </i>
               </div>
+              <i
+                class="Icon badge material focusable"
+              >
+                <span
+                  class="icon"
+                  data-icon-name="settings"
+                >
+                  settings
+                </span>
+              </i>
             </div>
           </div>
         </div>
@@ -586,22 +626,42 @@ exports[`navigate to extension page when extension navigates to route with param
         class="HotbarItems flex column gaps"
       >
         <div
-          class="HotbarCell isDraggingOwner animateDown"
+          class="HotbarCell animateDown"
           index="0"
         >
           <div
             style="z-index: 12; position: absolute;"
           >
             <div
-              class="HotbarIcon contextMenuAvailable"
+              class="HotbarIcon"
             >
               <div
-                class="Avatar rounded disabled avatar"
-                id="hotbarIcon-hotbar-icon-catalog-entity"
-                style="width: 40px; height: 40px; background: rgb(5, 1, 130);"
+                class="Avatar rounded avatar"
+                data-testid="hotbar-icon-for-catalog-entity"
+                id="hotbar-icon-for-catalog-entity"
+                style="width: 40px; height: 40px; background-color: rgb(61, 144, 206);"
               >
-                Ca
+                <i
+                  class="Icon material focusable"
+                >
+                  <span
+                    class="icon"
+                    data-icon-name="view_list"
+                  >
+                    view_list
+                  </span>
+                </i>
               </div>
+              <i
+                class="Icon badge material focusable"
+              >
+                <span
+                  class="icon"
+                  data-icon-name="settings"
+                >
+                  settings
+                </span>
+              </i>
             </div>
           </div>
         </div>
@@ -806,22 +866,42 @@ exports[`navigate to extension page when extension navigates to route without pa
         class="HotbarItems flex column gaps"
       >
         <div
-          class="HotbarCell isDraggingOwner animateDown"
+          class="HotbarCell animateDown"
           index="0"
         >
           <div
             style="z-index: 12; position: absolute;"
           >
             <div
-              class="HotbarIcon contextMenuAvailable"
+              class="HotbarIcon"
             >
               <div
-                class="Avatar rounded disabled avatar"
-                id="hotbarIcon-hotbar-icon-catalog-entity"
-                style="width: 40px; height: 40px; background: rgb(5, 1, 130);"
+                class="Avatar rounded avatar"
+                data-testid="hotbar-icon-for-catalog-entity"
+                id="hotbar-icon-for-catalog-entity"
+                style="width: 40px; height: 40px; background-color: rgb(61, 144, 206);"
               >
-                Ca
+                <i
+                  class="Icon material focusable"
+                >
+                  <span
+                    class="icon"
+                    data-icon-name="view_list"
+                  >
+                    view_list
+                  </span>
+                </i>
               </div>
+              <i
+                class="Icon badge material focusable"
+              >
+                <span
+                  class="icon"
+                  data-icon-name="settings"
+                >
+                  settings
+                </span>
+              </i>
             </div>
           </div>
         </div>
@@ -1026,22 +1106,42 @@ exports[`navigate to extension page when extension navigates to route without pa
         class="HotbarItems flex column gaps"
       >
         <div
-          class="HotbarCell isDraggingOwner animateDown"
+          class="HotbarCell animateDown"
           index="0"
         >
           <div
             style="z-index: 12; position: absolute;"
           >
             <div
-              class="HotbarIcon contextMenuAvailable"
+              class="HotbarIcon"
             >
               <div
-                class="Avatar rounded disabled avatar"
-                id="hotbarIcon-hotbar-icon-catalog-entity"
-                style="width: 40px; height: 40px; background: rgb(5, 1, 130);"
+                class="Avatar rounded avatar"
+                data-testid="hotbar-icon-for-catalog-entity"
+                id="hotbar-icon-for-catalog-entity"
+                style="width: 40px; height: 40px; background-color: rgb(61, 144, 206);"
               >
-                Ca
+                <i
+                  class="Icon material focusable"
+                >
+                  <span
+                    class="icon"
+                    data-icon-name="view_list"
+                  >
+                    view_list
+                  </span>
+                </i>
               </div>
+              <i
+                class="Icon badge material focusable"
+              >
+                <span
+                  class="icon"
+                  data-icon-name="settings"
+                >
+                  settings
+                </span>
+              </i>
             </div>
           </div>
         </div>

src/features/__snapshots__/navigating-between-routes.test.tsx.snap

@@ -86,22 +86,42 @@ exports[`navigating between routes given route with optional path parameters whe
         class="HotbarItems flex column gaps"
       >
         <div
-          class="HotbarCell isDraggingOwner animateDown"
+          class="HotbarCell animateDown"
           index="0"
         >
           <div
             style="z-index: 12; position: absolute;"
           >
             <div
-              class="HotbarIcon contextMenuAvailable"
+              class="HotbarIcon"
             >
               <div
-                class="Avatar rounded disabled avatar"
-                id="hotbarIcon-hotbar-icon-catalog-entity"
-                style="width: 40px; height: 40px; background: rgb(5, 1, 130);"
+                class="Avatar rounded avatar"
+                data-testid="hotbar-icon-for-catalog-entity"
+                id="hotbar-icon-for-catalog-entity"
+                style="width: 40px; height: 40px; background-color: rgb(61, 144, 206);"
               >
-                Ca
+                <i
+                  class="Icon material focusable"
+                >
+                  <span
+                    class="icon"
+                    data-icon-name="view_list"
+                  >
+                    view_list
+                  </span>
+                </i>
               </div>
+              <i
+                class="Icon badge material focusable"
+              >
+                <span
+                  class="icon"
+                  data-icon-name="settings"
+                >
+                  settings
+                </span>
+              </i>
             </div>
           </div>
         </div>
@@ -290,22 +310,42 @@ exports[`navigating between routes given route without path parameters when navi
         class="HotbarItems flex column gaps"
       >
         <div
-          class="HotbarCell isDraggingOwner animateDown"
+          class="HotbarCell animateDown"
           index="0"
         >
           <div
             style="z-index: 12; position: absolute;"
           >
             <div
-              class="HotbarIcon contextMenuAvailable"
+              class="HotbarIcon"
             >
               <div
-                class="Avatar rounded disabled avatar"
-                id="hotbarIcon-hotbar-icon-catalog-entity"
-                style="width: 40px; height: 40px; background: rgb(5, 1, 130);"
+                class="Avatar rounded avatar"
+                data-testid="hotbar-icon-for-catalog-entity"
+                id="hotbar-icon-for-catalog-entity"
+                style="width: 40px; height: 40px; background-color: rgb(61, 144, 206);"
               >
-                Ca
+                <i
+                  class="Icon material focusable"
+                >
+                  <span
+                    class="icon"
+                    data-icon-name="view_list"
+                  >
+                    view_list
+                  </span>
+                </i>
               </div>
+              <i
+                class="Icon badge material focusable"
+              >
+                <span
+                  class="icon"
+                  data-icon-name="settings"
+                >
+                  settings
+                </span>
+              </i>
             </div>
           </div>
         </div>

src/features/add-cluster/__snapshots__/navigation-using-application-menu.test.tsx.snap

@@ -162,22 +162,42 @@ exports[`add-cluster - navigation using application menu renders 1`] = `
         class="HotbarItems flex column gaps"
       >
         <div
-          class="HotbarCell isDraggingOwner animateDown"
+          class="HotbarCell animateDown"
           index="0"
         >
           <div
             style="z-index: 12; position: absolute;"
           >
             <div
-              class="HotbarIcon contextMenuAvailable"
+              class="HotbarIcon"
             >
               <div
-                class="Avatar rounded disabled avatar"
-                id="hotbarIcon-hotbar-icon-catalog-entity"
-                style="width: 40px; height: 40px; background: rgb(5, 1, 130);"
+                class="Avatar rounded avatar"
+                data-testid="hotbar-icon-for-catalog-entity"
+                id="hotbar-icon-for-catalog-entity"
+                style="width: 40px; height: 40px; background-color: rgb(61, 144, 206);"
               >
-                Ca
+                <i
+                  class="Icon material focusable"
+                >
+                  <span
+                    class="icon"
+                    data-icon-name="view_list"
+                  >
+                    view_list
+                  </span>
+                </i>
               </div>
+              <i
+                class="Icon badge material focusable"
+              >
+                <span
+                  class="icon"
+                  data-icon-name="settings"
+                >
+                  settings
+                </span>
+              </i>
             </div>
           </div>
         </div>
@@ -450,22 +470,42 @@ exports[`add-cluster - navigation using application menu when navigating to add
         class="HotbarItems flex column gaps"
       >
         <div
-          class="HotbarCell isDraggingOwner animateDown"
+          class="HotbarCell animateDown"
           index="0"
         >
           <div
             style="z-index: 12; position: absolute;"
           >
             <div
-              class="HotbarIcon contextMenuAvailable"
+              class="HotbarIcon"
             >
               <div
-                class="Avatar rounded disabled avatar"
-                id="hotbarIcon-hotbar-icon-catalog-entity"
-                style="width: 40px; height: 40px; background: rgb(5, 1, 130);"
+                class="Avatar rounded avatar"
+                data-testid="hotbar-icon-for-catalog-entity"
+                id="hotbar-icon-for-catalog-entity"
+                style="width: 40px; height: 40px; background-color: rgb(61, 144, 206);"
               >
-                Ca
+                <i
+                  class="Icon material focusable"
+                >
+                  <span
+                    class="icon"
+                    data-icon-name="view_list"
+                  >
+                    view_list
+                  </span>
+                </i>
               </div>
+              <i
+                class="Icon badge material focusable"
+              >
+                <span
+                  class="icon"
+                  data-icon-name="settings"
+                >
+                  settings
+                </span>
+              </i>
             </div>
           </div>
         </div>

src/features/application-menu/application-menu.test.ts

@@ -5,7 +5,7 @@
 import type { ApplicationBuilder } from "../../renderer/components/test-utils/get-application-builder";
 import { getApplicationBuilder } from "../../renderer/components/test-utils/get-application-builder";
 import populateApplicationMenuInjectable from "./main/populate-application-menu.injectable";
-import { advanceFakeTime, testUsingFakeTime } from "../../common/test-utils/use-fake-time";
+import { advanceFakeTime } from "../../common/test-utils/use-fake-time";
 import { getCompositePaths } from "../../common/utils/composite/get-composite-paths/get-composite-paths";
 import platformInjectable, { allPlatforms } from "../../common/vars/platform.injectable";
 
@@ -14,8 +14,6 @@ describe.each(allPlatforms)("application-menu, given platform is '%s'", (platfor
   let populateApplicationMenuMock: jest.Mock;
 
   beforeEach(async () => {
-    testUsingFakeTime();
-
     populateApplicationMenuMock = jest.fn();
 
     builder = getApplicationBuilder();

src/features/application-menu/handling-of-orphan-application-menu-items.test.ts

@@ -5,7 +5,7 @@
 import type { ApplicationBuilder } from "../../renderer/components/test-utils/get-application-builder";
 import { getApplicationBuilder } from "../../renderer/components/test-utils/get-application-builder";
 import populateApplicationMenuInjectable from "./main/populate-application-menu.injectable";
-import { advanceFakeTime, testUsingFakeTime } from "../../common/test-utils/use-fake-time";
+import { advanceFakeTime } from "../../common/test-utils/use-fake-time";
 import { getCompositePaths } from "../../common/utils/composite/get-composite-paths/get-composite-paths";
 import { getInjectable } from "@ogre-tools/injectable";
 import applicationMenuItemInjectionToken from "./main/menu-items/application-menu-item-injection-token";
@@ -18,8 +18,6 @@ describe("handling-of-orphan-application-menu-items, given orphan menu item", ()
   let logErrorMock: jest.Mock;
 
   beforeEach(async () => {
-    testUsingFakeTime();
-
     populateApplicationMenuMock = jest.fn();
     logErrorMock = jest.fn();
 

src/features/application-update/__snapshots__/installing-update.test.ts.snap

@@ -163,22 +163,42 @@ exports[`installing update when started renders 1`] = `
           class="HotbarItems flex column gaps"
         >
           <div
-            class="HotbarCell isDraggingOwner animateDown"
+            class="HotbarCell animateDown"
             index="0"
           >
             <div
               style="z-index: 12; position: absolute;"
             >
               <div
-                class="HotbarIcon contextMenuAvailable"
+                class="HotbarIcon"
               >
                 <div
-                  class="Avatar rounded disabled avatar"
-                  id="hotbarIcon-hotbar-icon-catalog-entity"
-                  style="width: 40px; height: 40px; background: rgb(5, 1, 130);"
+                  class="Avatar rounded avatar"
+                  data-testid="hotbar-icon-for-catalog-entity"
+                  id="hotbar-icon-for-catalog-entity"
+                  style="width: 40px; height: 40px; background-color: rgb(61, 144, 206);"
                 >
-                  Ca
+                  <i
+                    class="Icon material focusable"
+                  >
+                    <span
+                      class="icon"
+                      data-icon-name="view_list"
+                    >
+                      view_list
+                    </span>
+                  </i>
                 </div>
+                <i
+                  class="Icon badge material focusable"
+                >
+                  <span
+                    class="icon"
+                    data-icon-name="settings"
+                  >
+                    settings
+                  </span>
+                </i>
               </div>
             </div>
           </div>
@@ -448,22 +468,42 @@ exports[`installing update when started when user checks for updates renders 1`]
           class="HotbarItems flex column gaps"
         >
           <div
-            class="HotbarCell isDraggingOwner animateDown"
+            class="HotbarCell animateDown"
             index="0"
           >
             <div
               style="z-index: 12; position: absolute;"
             >
               <div
-                class="HotbarIcon contextMenuAvailable"
+                class="HotbarIcon"
               >
                 <div
-                  class="Avatar rounded disabled avatar"
-                  id="hotbarIcon-hotbar-icon-catalog-entity"
-                  style="width: 40px; height: 40px; background: rgb(5, 1, 130);"
+                  class="Avatar rounded avatar"
+                  data-testid="hotbar-icon-for-catalog-entity"
+                  id="hotbar-icon-for-catalog-entity"
+                  style="width: 40px; height: 40px; background-color: rgb(61, 144, 206);"
                 >
-                  Ca
+                  <i
+                    class="Icon material focusable"
+                  >
+                    <span
+                      class="icon"
+                      data-icon-name="view_list"
+                    >
+                      view_list
+                    </span>
+                  </i>
                 </div>
+                <i
+                  class="Icon badge material focusable"
+                >
+                  <span
+                    class="icon"
+                    data-icon-name="settings"
+                  >
+                    settings
+                  </span>
+                </i>
               </div>
             </div>
           </div>
@@ -733,22 +773,42 @@ exports[`installing update when started when user checks for updates when new up
           class="HotbarItems flex column gaps"
         >
           <div
-            class="HotbarCell isDraggingOwner animateDown"
+            class="HotbarCell animateDown"
             index="0"
           >
             <div
               style="z-index: 12; position: absolute;"
             >
               <div
-                class="HotbarIcon contextMenuAvailable"
+                class="HotbarIcon"
               >
                 <div
-                  class="Avatar rounded disabled avatar"
-                  id="hotbarIcon-hotbar-icon-catalog-entity"
-                  style="width: 40px; height: 40px; background: rgb(5, 1, 130);"
+                  class="Avatar rounded avatar"
+                  data-testid="hotbar-icon-for-catalog-entity"
+                  id="hotbar-icon-for-catalog-entity"
+                  style="width: 40px; height: 40px; background-color: rgb(61, 144, 206);"
                 >
-                  Ca
+                  <i
+                    class="Icon material focusable"
+                  >
+                    <span
+                      class="icon"
+                      data-icon-name="view_list"
+                    >
+                      view_list
+                    </span>
+                  </i>
                 </div>
+                <i
+                  class="Icon badge material focusable"
+                >
+                  <span
+                    class="icon"
+                    data-icon-name="settings"
+                  >
+                    settings
+                  </span>
+                </i>
               </div>
             </div>
           </div>
@@ -1043,22 +1103,42 @@ exports[`installing update when started when user checks for updates when new up
           class="HotbarItems flex column gaps"
         >
           <div
-            class="HotbarCell isDraggingOwner animateDown"
+            class="HotbarCell animateDown"
             index="0"
           >
             <div
               style="z-index: 12; position: absolute;"
             >
               <div
-                class="HotbarIcon contextMenuAvailable"
+                class="HotbarIcon"
               >
                 <div
-                  class="Avatar rounded disabled avatar"
-                  id="hotbarIcon-hotbar-icon-catalog-entity"
-                  style="width: 40px; height: 40px; background: rgb(5, 1, 130);"
+                  class="Avatar rounded avatar"
+                  data-testid="hotbar-icon-for-catalog-entity"
+                  id="hotbar-icon-for-catalog-entity"
+                  style="width: 40px; height: 40px; background-color: rgb(61, 144, 206);"
                 >
-                  Ca
+                  <i
+                    class="Icon material focusable"
+                  >
+                    <span
+                      class="icon"
+                      data-icon-name="view_list"
+                    >
+                      view_list
+                    </span>
+                  </i>
                 </div>
+                <i
+                  class="Icon badge material focusable"
+                >
+                  <span
+                    class="icon"
+                    data-icon-name="settings"
+                  >
+                    settings
+                  </span>
+                </i>
               </div>
             </div>
           </div>
@@ -1353,22 +1433,42 @@ exports[`installing update when started when user checks for updates when new up
           class="HotbarItems flex column gaps"
         >
           <div
-            class="HotbarCell isDraggingOwner animateDown"
+            class="HotbarCell animateDown"
             index="0"
           >
             <div
               style="z-index: 12; position: absolute;"
             >
               <div
-                class="HotbarIcon contextMenuAvailable"
+                class="HotbarIcon"
               >
                 <div
-                  class="Avatar rounded disabled avatar"
-                  id="hotbarIcon-hotbar-icon-catalog-entity"
-                  style="width: 40px; height: 40px; background: rgb(5, 1, 130);"
+                  class="Avatar rounded avatar"
+                  data-testid="hotbar-icon-for-catalog-entity"
+                  id="hotbar-icon-for-catalog-entity"
+                  style="width: 40px; height: 40px; background-color: rgb(61, 144, 206);"
                 >
-                  Ca
+                  <i
+                    class="Icon material focusable"
+                  >
+                    <span
+                      class="icon"
+                      data-icon-name="view_list"
+                    >
+                      view_list
+                    </span>
+                  </i>
                 </div>
+                <i
+                  class="Icon badge material focusable"
+                >
+                  <span
+                    class="icon"
+                    data-icon-name="settings"
+                  >
+                    settings
+                  </span>
+                </i>
               </div>
             </div>
           </div>
@@ -1638,22 +1738,42 @@ exports[`installing update when started when user checks for updates when no new
           class="HotbarItems flex column gaps"
         >
           <div
-            class="HotbarCell isDraggingOwner animateDown"
+            class="HotbarCell animateDown"
             index="0"
           >
             <div
               style="z-index: 12; position: absolute;"
             >
               <div
-                class="HotbarIcon contextMenuAvailable"
+                class="HotbarIcon"
               >
                 <div
-                  class="Avatar rounded disabled avatar"
-                  id="hotbarIcon-hotbar-icon-catalog-entity"
-                  style="width: 40px; height: 40px; background: rgb(5, 1, 130);"
+                  class="Avatar rounded avatar"
+                  data-testid="hotbar-icon-for-catalog-entity"
+                  id="hotbar-icon-for-catalog-entity"
+                  style="width: 40px; height: 40px; background-color: rgb(61, 144, 206);"
                 >
-                  Ca
+                  <i
+                    class="Icon material focusable"
+                  >
+                    <span
+                      class="icon"
+                      data-icon-name="view_list"
+                    >
+                      view_list
+                    </span>
+                  </i>
                 </div>
+                <i
+                  class="Icon badge material focusable"
+                >
+                  <span
+                    class="icon"
+                    data-icon-name="settings"
+                  >
+                    settings
+                  </span>
+                </i>
               </div>
             </div>
           </div>

src/features/application-update/analytics-for-installing-update.test.ts

@@ -17,7 +17,7 @@ import type { DownloadPlatformUpdate } from "./main/download-update/download-pla
 import downloadPlatformUpdateInjectable from "./main/download-update/download-platform-update/download-platform-update.injectable";
 import quitAndInstallUpdateInjectable from "./main/quit-and-install-update.injectable";
 import periodicalCheckForUpdatesInjectable from "./child-features/periodical-checking-of-updates/main/periodical-check-for-updates.injectable";
-import { advanceFakeTime, testUsingFakeTime } from "../../common/test-utils/use-fake-time";
+import { advanceFakeTime } from "../../common/test-utils/use-fake-time";
 import emitEventInjectable from "../../common/app-event-bus/emit-event.injectable";
 import getBuildVersionInjectable from "../../main/vars/build-version/get-build-version.injectable";
 
@@ -29,9 +29,11 @@ describe("analytics for installing update", () => {
   let mainDi: DiContainer;
 
   beforeEach(async () => {
-    testUsingFakeTime("2015-10-21T07:28:00Z");
-
-    builder = getApplicationBuilder();
+    builder = getApplicationBuilder({
+      useFakeTime: {
+        dateTime: "2015-10-21T07:28:00Z",
+      },
+    });
 
     analyticsListenerMock = jest.fn();
 

src/features/application-update/child-features/application-update-using-top-bar/__snapshots__/installing-update-using-topbar-button.test.tsx.snap

@@ -188,22 +188,42 @@ exports[`encourage user to update when sufficient time passed since update was d
           class="HotbarItems flex column gaps"
         >
           <div
-            class="HotbarCell isDraggingOwner animateDown"
+            class="HotbarCell animateDown"
             index="0"
           >
             <div
               style="z-index: 12; position: absolute;"
             >
               <div
-                class="HotbarIcon contextMenuAvailable"
+                class="HotbarIcon"
               >
                 <div
-                  class="Avatar rounded disabled avatar"
-                  id="hotbarIcon-hotbar-icon-catalog-entity"
-                  style="width: 40px; height: 40px; background: rgb(5, 1, 130);"
+                  class="Avatar rounded avatar"
+                  data-testid="hotbar-icon-for-catalog-entity"
+                  id="hotbar-icon-for-catalog-entity"
+                  style="width: 40px; height: 40px; background-color: rgb(61, 144, 206);"
                 >
-                  Ca
+                  <i
+                    class="Icon material focusable"
+                  >
+                    <span
+                      class="icon"
+                      data-icon-name="view_list"
+                    >
+                      view_list
+                    </span>
+                  </i>
                 </div>
+                <i
+                  class="Icon badge material focusable"
+                >
+                  <span
+                    class="icon"
+                    data-icon-name="settings"
+                  >
+                    settings
+                  </span>
+                </i>
               </div>
             </div>
           </div>
@@ -473,22 +493,42 @@ exports[`encourage user to update when sufficient time passed since update was d
           class="HotbarItems flex column gaps"
         >
           <div
-            class="HotbarCell isDraggingOwner animateDown"
+            class="HotbarCell animateDown"
             index="0"
           >
             <div
               style="z-index: 12; position: absolute;"
             >
               <div
-                class="HotbarIcon contextMenuAvailable"
+                class="HotbarIcon"
               >
                 <div
-                  class="Avatar rounded disabled avatar"
-                  id="hotbarIcon-hotbar-icon-catalog-entity"
-                  style="width: 40px; height: 40px; background: rgb(5, 1, 130);"
+                  class="Avatar rounded avatar"
+                  data-testid="hotbar-icon-for-catalog-entity"
+                  id="hotbar-icon-for-catalog-entity"
+                  style="width: 40px; height: 40px; background-color: rgb(61, 144, 206);"
                 >
-                  Ca
+                  <i
+                    class="Icon material focusable"
+                  >
+                    <span
+                      class="icon"
+                      data-icon-name="view_list"
+                    >
+                      view_list
+                    </span>
+                  </i>
                 </div>
+                <i
+                  class="Icon badge material focusable"
+                >
+                  <span
+                    class="icon"
+                    data-icon-name="settings"
+                  >
+                    settings
+                  </span>
+                </i>
               </div>
             </div>
           </div>

src/features/application-update/child-features/application-update-using-top-bar/installing-update-using-topbar-button.test.tsx

@@ -16,7 +16,7 @@ import type { ApplicationBuilder } from "../../../../renderer/components/test-ut
 import { getApplicationBuilder } from "../../../../renderer/components/test-utils/get-application-builder";
 import processCheckingForUpdatesInjectable from "../../main/process-checking-for-updates.injectable";
 import quitAndInstallUpdateInjectable from "../../main/quit-and-install-update.injectable";
-import { advanceFakeTime, testUsingFakeTime } from "../../../../common/test-utils/use-fake-time";
+import { advanceFakeTime } from "../../../../common/test-utils/use-fake-time";
 
 function daysToMilliseconds(days: number) {
   return Math.round(days * 24 * 60 * 60 * 1000);
@@ -29,9 +29,11 @@ describe("encourage user to update when sufficient time passed since update was
   let quitAndInstallUpdateMock: jest.MockedFunction<() => void>;
 
   beforeEach(() => {
-    testUsingFakeTime("2015-10-21T07:28:00Z");
-
-    applicationBuilder = getApplicationBuilder();
+    applicationBuilder = getApplicationBuilder({
+      useFakeTime: {
+        dateTime: "2015-10-21T07:28:00Z",
+      },
+    });
 
     applicationBuilder.beforeApplicationStart((mainDi) => {
       checkForPlatformUpdatesMock = asyncFn();

src/features/application-update/child-features/application-update-using-tray/__snapshots__/installing-update-using-tray.test.ts.snap

@@ -163,22 +163,42 @@ exports[`installing update using tray when started renders 1`] = `
           class="HotbarItems flex column gaps"
         >
           <div
-            class="HotbarCell isDraggingOwner animateDown"
+            class="HotbarCell animateDown"
             index="0"
           >
             <div
               style="z-index: 12; position: absolute;"
             >
               <div
-                class="HotbarIcon contextMenuAvailable"
+                class="HotbarIcon"
               >
                 <div
-                  class="Avatar rounded disabled avatar"
-                  id="hotbarIcon-hotbar-icon-catalog-entity"
-                  style="width: 40px; height: 40px; background: rgb(5, 1, 130);"
+                  class="Avatar rounded avatar"
+                  data-testid="hotbar-icon-for-catalog-entity"
+                  id="hotbar-icon-for-catalog-entity"
+                  style="width: 40px; height: 40px; background-color: rgb(61, 144, 206);"
                 >
-                  Ca
+                  <i
+                    class="Icon material focusable"
+                  >
+                    <span
+                      class="icon"
+                      data-icon-name="view_list"
+                    >
+                      view_list
+                    </span>
+                  </i>
                 </div>
+                <i
+                  class="Icon badge material focusable"
+                >
+                  <span
+                    class="icon"
+                    data-icon-name="settings"
+                  >
+                    settings
+                  </span>
+                </i>
               </div>
             </div>
           </div>
@@ -448,22 +468,42 @@ exports[`installing update using tray when started when user checks for updates
           class="HotbarItems flex column gaps"
         >
           <div
-            class="HotbarCell isDraggingOwner animateDown"
+            class="HotbarCell animateDown"
             index="0"
           >
             <div
               style="z-index: 12; position: absolute;"
             >
               <div
-                class="HotbarIcon contextMenuAvailable"
+                class="HotbarIcon"
               >
                 <div
-                  class="Avatar rounded disabled avatar"
-                  id="hotbarIcon-hotbar-icon-catalog-entity"
-                  style="width: 40px; height: 40px; background: rgb(5, 1, 130);"
+                  class="Avatar rounded avatar"
+                  data-testid="hotbar-icon-for-catalog-entity"
+                  id="hotbar-icon-for-catalog-entity"
+                  style="width: 40px; height: 40px; background-color: rgb(61, 144, 206);"
                 >
-                  Ca
+                  <i
+                    class="Icon material focusable"
+                  >
+                    <span
+                      class="icon"
+                      data-icon-name="view_list"
+                    >
+                      view_list
+                    </span>
+                  </i>
                 </div>
+                <i
+                  class="Icon badge material focusable"
+                >
+                  <span
+                    class="icon"
+                    data-icon-name="settings"
+                  >
+                    settings
+                  </span>
+                </i>
               </div>
             </div>
           </div>
@@ -733,22 +773,42 @@ exports[`installing update using tray when started when user checks for updates
           class="HotbarItems flex column gaps"
         >
           <div
-            class="HotbarCell isDraggingOwner animateDown"
+            class="HotbarCell animateDown"
             index="0"
           >
             <div
               style="z-index: 12; position: absolute;"
             >
               <div
-                class="HotbarIcon contextMenuAvailable"
+                class="HotbarIcon"
               >
                 <div
-                  class="Avatar rounded disabled avatar"
-                  id="hotbarIcon-hotbar-icon-catalog-entity"
-                  style="width: 40px; height: 40px; background: rgb(5, 1, 130);"
+                  class="Avatar rounded avatar"
+                  data-testid="hotbar-icon-for-catalog-entity"
+                  id="hotbar-icon-for-catalog-entity"
+                  style="width: 40px; height: 40px; background-color: rgb(61, 144, 206);"
                 >
-                  Ca
+                  <i
+                    class="Icon material focusable"
+                  >
+                    <span
+                      class="icon"
+                      data-icon-name="view_list"
+                    >
+                      view_list
+                    </span>
+                  </i>
                 </div>
+                <i
+                  class="Icon badge material focusable"
+                >
+                  <span
+                    class="icon"
+                    data-icon-name="settings"
+                  >
+                    settings
+                  </span>
+                </i>
               </div>
             </div>
           </div>
@@ -1043,22 +1103,42 @@ exports[`installing update using tray when started when user checks for updates
           class="HotbarItems flex column gaps"
         >
           <div
-            class="HotbarCell isDraggingOwner animateDown"
+            class="HotbarCell animateDown"
             index="0"
           >
             <div
               style="z-index: 12; position: absolute;"
             >
               <div
-                class="HotbarIcon contextMenuAvailable"
+                class="HotbarIcon"
               >
                 <div
-                  class="Avatar rounded disabled avatar"
-                  id="hotbarIcon-hotbar-icon-catalog-entity"
-                  style="width: 40px; height: 40px; background: rgb(5, 1, 130);"
+                  class="Avatar rounded avatar"
+                  data-testid="hotbar-icon-for-catalog-entity"
+                  id="hotbar-icon-for-catalog-entity"
+                  style="width: 40px; height: 40px; background-color: rgb(61, 144, 206);"
                 >
-                  Ca
+                  <i
+                    class="Icon material focusable"
+                  >
+                    <span
+                      class="icon"
+                      data-icon-name="view_list"
+                    >
+                      view_list
+                    </span>
+                  </i>
                 </div>
+                <i
+                  class="Icon badge material focusable"
+                >
+                  <span
+                    class="icon"
+                    data-icon-name="settings"
+                  >
+                    settings
+                  </span>
+                </i>
               </div>
             </div>
           </div>
@@ -1353,22 +1433,42 @@ exports[`installing update using tray when started when user checks for updates
           class="HotbarItems flex column gaps"
         >
           <div
-            class="HotbarCell isDraggingOwner animateDown"
+            class="HotbarCell animateDown"
             index="0"
           >
             <div
               style="z-index: 12; position: absolute;"
             >
               <div
-                class="HotbarIcon contextMenuAvailable"
+                class="HotbarIcon"
               >
                 <div
-                  class="Avatar rounded disabled avatar"
-                  id="hotbarIcon-hotbar-icon-catalog-entity"
-                  style="width: 40px; height: 40px; background: rgb(5, 1, 130);"
+                  class="Avatar rounded avatar"
+                  data-testid="hotbar-icon-for-catalog-entity"
+                  id="hotbar-icon-for-catalog-entity"
+                  style="width: 40px; height: 40px; background-color: rgb(61, 144, 206);"
                 >
-                  Ca
+                  <i
+                    class="Icon material focusable"
+                  >
+                    <span
+                      class="icon"
+                      data-icon-name="view_list"
+                    >
+                      view_list
+                    </span>
+                  </i>
                 </div>
+                <i
+                  class="Icon badge material focusable"
+                >
+                  <span
+                    class="icon"
+                    data-icon-name="settings"
+                  >
+                    settings
+                  </span>
+                </i>
               </div>
             </div>
           </div>
@@ -1638,22 +1738,42 @@ exports[`installing update using tray when started when user checks for updates
           class="HotbarItems flex column gaps"
         >
           <div
-            class="HotbarCell isDraggingOwner animateDown"
+            class="HotbarCell animateDown"
             index="0"
           >
             <div
               style="z-index: 12; position: absolute;"
             >
               <div
-                class="HotbarIcon contextMenuAvailable"
+                class="HotbarIcon"
               >
                 <div
-                  class="Avatar rounded disabled avatar"
-                  id="hotbarIcon-hotbar-icon-catalog-entity"
-                  style="width: 40px; height: 40px; background: rgb(5, 1, 130);"
+                  class="Avatar rounded avatar"
+                  data-testid="hotbar-icon-for-catalog-entity"
+                  id="hotbar-icon-for-catalog-entity"
+                  style="width: 40px; height: 40px; background-color: rgb(61, 144, 206);"
                 >
-                  Ca
+                  <i
+                    class="Icon material focusable"
+                  >
+                    <span
+                      class="icon"
+                      data-icon-name="view_list"
+                    >
+                      view_list
+                    </span>
+                  </i>
                 </div>
+                <i
+                  class="Icon badge material focusable"
+                >
+                  <span
+                    class="icon"
+                    data-icon-name="settings"
+                  >
+                    settings
+                  </span>
+                </i>
               </div>
             </div>
           </div>

src/features/application-update/child-features/force-user-to-update-when-too-long-time-since-update-was-downloaded/__snapshots__/force-user-to-update-when-too-long-time-since-update-was-downloaded.test.ts.snap

@@ -188,22 +188,42 @@ exports[`force user to update when too long since update was downloaded when app
           class="HotbarItems flex column gaps"
         >
           <div
-            class="HotbarCell isDraggingOwner animateDown"
+            class="HotbarCell animateDown"
             index="0"
           >
             <div
               style="z-index: 12; position: absolute;"
             >
               <div
-                class="HotbarIcon contextMenuAvailable"
+                class="HotbarIcon"
               >
                 <div
-                  class="Avatar rounded disabled avatar"
-                  id="hotbarIcon-hotbar-icon-catalog-entity"
-                  style="width: 40px; height: 40px; background: rgb(5, 1, 130);"
+                  class="Avatar rounded avatar"
+                  data-testid="hotbar-icon-for-catalog-entity"
+                  id="hotbar-icon-for-catalog-entity"
+                  style="width: 40px; height: 40px; background-color: rgb(61, 144, 206);"
                 >
-                  Ca
+                  <i
+                    class="Icon material focusable"
+                  >
+                    <span
+                      class="icon"
+                      data-icon-name="view_list"
+                    >
+                      view_list
+                    </span>
+                  </i>
                 </div>
+                <i
+                  class="Icon badge material focusable"
+                >
+                  <span
+                    class="icon"
+                    data-icon-name="settings"
+                  >
+                    settings
+                  </span>
+                </i>
               </div>
             </div>
           </div>
@@ -498,22 +518,42 @@ exports[`force user to update when too long since update was downloaded when app
           class="HotbarItems flex column gaps"
         >
           <div
-            class="HotbarCell isDraggingOwner animateDown"
+            class="HotbarCell animateDown"
             index="0"
           >
             <div
               style="z-index: 12; position: absolute;"
             >
               <div
-                class="HotbarIcon contextMenuAvailable"
+                class="HotbarIcon"
               >
                 <div
-                  class="Avatar rounded disabled avatar"
-                  id="hotbarIcon-hotbar-icon-catalog-entity"
-                  style="width: 40px; height: 40px; background: rgb(5, 1, 130);"
+                  class="Avatar rounded avatar"
+                  data-testid="hotbar-icon-for-catalog-entity"
+                  id="hotbar-icon-for-catalog-entity"
+                  style="width: 40px; height: 40px; background-color: rgb(61, 144, 206);"
                 >
-                  Ca
+                  <i
+                    class="Icon material focusable"
+                  >
+                    <span
+                      class="icon"
+                      data-icon-name="view_list"
+                    >
+                      view_list
+                    </span>
+                  </i>
                 </div>
+                <i
+                  class="Icon badge material focusable"
+                >
+                  <span
+                    class="icon"
+                    data-icon-name="settings"
+                  >
+                    settings
+                  </span>
+                </i>
               </div>
             </div>
           </div>
@@ -855,22 +895,42 @@ exports[`force user to update when too long since update was downloaded when app
           class="HotbarItems flex column gaps"
         >
           <div
-            class="HotbarCell isDraggingOwner animateDown"
+            class="HotbarCell animateDown"
             index="0"
           >
             <div
               style="z-index: 12; position: absolute;"
             >
               <div
-                class="HotbarIcon contextMenuAvailable"
+                class="HotbarIcon"
               >
                 <div
-                  class="Avatar rounded disabled avatar"
-                  id="hotbarIcon-hotbar-icon-catalog-entity"
-                  style="width: 40px; height: 40px; background: rgb(5, 1, 130);"
+                  class="Avatar rounded avatar"
+                  data-testid="hotbar-icon-for-catalog-entity"
+                  id="hotbar-icon-for-catalog-entity"
+                  style="width: 40px; height: 40px; background-color: rgb(61, 144, 206);"
                 >
-                  Ca
+                  <i
+                    class="Icon material focusable"
+                  >
+                    <span
+                      class="icon"
+                      data-icon-name="view_list"
+                    >
+                      view_list
+                    </span>
+                  </i>
                 </div>
+                <i
+                  class="Icon badge material focusable"
+                >
+                  <span
+                    class="icon"
+                    data-icon-name="settings"
+                  >
+                    settings
+                  </span>
+                </i>
               </div>
             </div>
           </div>

src/features/application-update/child-features/force-user-to-update-when-too-long-time-since-update-was-downloaded/force-user-to-update-when-too-long-time-since-update-was-downloaded.test.ts

@@ -14,7 +14,7 @@ import type { DiContainer } from "@ogre-tools/injectable";
 import processCheckingForUpdatesInjectable from "../../main/process-checking-for-updates.injectable";
 import type { RenderResult } from "@testing-library/react";
 import { fireEvent } from "@testing-library/react";
-import { advanceFakeTime, testUsingFakeTime } from "../../../../common/test-utils/use-fake-time";
+import { advanceFakeTime } from "../../../../common/test-utils/use-fake-time";
 import quitAndInstallUpdateInjectable from "../../main/quit-and-install-update.injectable";
 import timeAfterUpdateMustBeInstalledInjectable from "./renderer/force-update-modal/time-after-update-must-be-installed.injectable";
 import secondsAfterInstallStartsInjectable from "./renderer/force-update-modal/seconds-after-install-starts.injectable";
@@ -31,9 +31,11 @@ describe("force user to update when too long since update was downloaded", () =>
   let quitAndInstallUpdateMock: jest.Mock;
 
   beforeEach(() => {
-    testUsingFakeTime("2015-10-21T07:28:00Z");
-
-    applicationBuilder = getApplicationBuilder();
+    applicationBuilder = getApplicationBuilder({
+      useFakeTime: {
+        dateTime: "2015-10-21T07:28:00Z",
+      },
+    });
 
     applicationBuilder.beforeApplicationStart(mainDi => {
       checkForPlatformUpdatesMock = asyncFn();

src/features/application-update/child-features/periodical-checking-of-updates/__snapshots__/periodical-checking-of-updates.test.ts.snap

@@ -163,22 +163,42 @@ exports[`periodical checking of updates given updater is enabled and configurati
           class="HotbarItems flex column gaps"
         >
           <div
-            class="HotbarCell isDraggingOwner animateDown"
+            class="HotbarCell animateDown"
             index="0"
           >
             <div
               style="z-index: 12; position: absolute;"
             >
               <div
-                class="HotbarIcon contextMenuAvailable"
+                class="HotbarIcon"
               >
                 <div
-                  class="Avatar rounded disabled avatar"
-                  id="hotbarIcon-hotbar-icon-catalog-entity"
-                  style="width: 40px; height: 40px; background: rgb(5, 1, 130);"
+                  class="Avatar rounded avatar"
+                  data-testid="hotbar-icon-for-catalog-entity"
+                  id="hotbar-icon-for-catalog-entity"
+                  style="width: 40px; height: 40px; background-color: rgb(61, 144, 206);"
                 >
-                  Ca
+                  <i
+                    class="Icon material focusable"
+                  >
+                    <span
+                      class="icon"
+                      data-icon-name="view_list"
+                    >
+                      view_list
+                    </span>
+                  </i>
                 </div>
+                <i
+                  class="Icon badge material focusable"
+                >
+                  <span
+                    class="icon"
+                    data-icon-name="settings"
+                  >
+                    settings
+                  </span>
+                </i>
               </div>
             </div>
           </div>

src/features/application-update/child-features/periodical-checking-of-updates/periodical-checking-of-updates.test.ts

@@ -9,7 +9,7 @@ import electronUpdaterIsActiveInjectable from "../../../../main/electron-app/fea
 import publishIsConfiguredInjectable from "../../main/updating-is-enabled/publish-is-configured/publish-is-configured.injectable";
 import processCheckingForUpdatesInjectable from "../../main/process-checking-for-updates.injectable";
 import periodicalCheckForUpdatesInjectable from "./main/periodical-check-for-updates.injectable";
-import { advanceFakeTime, testUsingFakeTime } from "../../../../common/test-utils/use-fake-time";
+import { advanceFakeTime } from "../../../../common/test-utils/use-fake-time";
 
 const ENOUGH_TIME = 1000 * 60 * 60 * 2;
 
@@ -18,9 +18,11 @@ describe("periodical checking of updates", () => {
   let processCheckingForUpdatesMock: jest.Mock;
 
   beforeEach(() => {
-    testUsingFakeTime("2015-10-21T07:28:00Z");
-
-    builder = getApplicationBuilder();
+    builder = getApplicationBuilder({
+      useFakeTime: {
+        dateTime: "2015-10-21T07:28:00Z",
+      },
+    });
 
     builder.beforeApplicationStart((mainDi) => {
       mainDi.unoverride(periodicalCheckForUpdatesInjectable);

src/features/application-update/child-features/selection-of-update-stability/__snapshots__/selection-of-update-stability.test.ts.snap

@@ -163,22 +163,42 @@ exports[`selection of update stability when started renders 1`] = `
           class="HotbarItems flex column gaps"
         >
           <div
-            class="HotbarCell isDraggingOwner animateDown"
+            class="HotbarCell animateDown"
             index="0"
           >
             <div
               style="z-index: 12; position: absolute;"
             >
               <div
-                class="HotbarIcon contextMenuAvailable"
+                class="HotbarIcon"
               >
                 <div
-                  class="Avatar rounded disabled avatar"
-                  id="hotbarIcon-hotbar-icon-catalog-entity"
-                  style="width: 40px; height: 40px; background: rgb(5, 1, 130);"
+                  class="Avatar rounded avatar"
+                  data-testid="hotbar-icon-for-catalog-entity"
+                  id="hotbar-icon-for-catalog-entity"
+                  style="width: 40px; height: 40px; background-color: rgb(61, 144, 206);"
                 >
-                  Ca
+                  <i
+                    class="Icon material focusable"
+                  >
+                    <span
+                      class="icon"
+                      data-icon-name="view_list"
+                    >
+                      view_list
+                    </span>
+                  </i>
                 </div>
+                <i
+                  class="Icon badge material focusable"
+                >
+                  <span
+                    class="icon"
+                    data-icon-name="settings"
+                  >
+                    settings
+                  </span>
+                </i>
               </div>
             </div>
           </div>

src/features/application-update/installing-update.test.ts

@@ -16,7 +16,6 @@ import type { DownloadPlatformUpdate } from "./main/download-update/download-pla
 import downloadPlatformUpdateInjectable from "./main/download-update/download-platform-update/download-platform-update.injectable";
 import setUpdateOnQuitInjectable from "../../main/electron-app/features/set-update-on-quit.injectable";
 import processCheckingForUpdatesInjectable from "./main/process-checking-for-updates.injectable";
-import { testUsingFakeTime } from "../../common/test-utils/use-fake-time";
 import staticFilesDirectoryInjectable from "../../common/vars/static-files-directory.injectable";
 
 describe("installing update", () => {
@@ -27,9 +26,11 @@ describe("installing update", () => {
   let setUpdateOnQuitMock: jest.Mock;
 
   beforeEach(() => {
-    testUsingFakeTime("2015-10-21T07:28:00Z");
-
-    builder = getApplicationBuilder();
+    builder = getApplicationBuilder({
+      useFakeTime: {
+        dateTime: "2015-10-21T07:28:00Z",
+      },
+    });
 
     builder.beforeApplicationStart((mainDi) => {
       quitAndInstallUpdateMock = jest.fn();

src/features/catalog/opening-entity-details.test.tsx

@@ -5,12 +5,10 @@
 
 import type { DiContainer } from "@ogre-tools/injectable";
 import type { RenderResult } from "@testing-library/react";
+import { computed } from "mobx";
 import { KubernetesCluster, WebLink } from "../../common/catalog-entities";
-import getClusterByIdInjectable from "../../common/cluster-store/get-by-id.injectable";
-import type { Cluster } from "../../common/cluster/cluster";
 import navigateToCatalogInjectable from "../../common/front-end-routing/routes/catalog/navigate-to-catalog.injectable";
-import catalogEntityRegistryInjectable from "../../renderer/api/catalog/entity/registry.injectable";
-import createClusterInjectable from "../../renderer/cluster/create-cluster.injectable";
+import catalogEntityRegistryInjectable from "../../main/catalog/entity-registry.injectable";
 import { type ApplicationBuilder, getApplicationBuilder } from "../../renderer/components/test-utils/get-application-builder";
 
 describe("opening catalog entity details panel", () => {
@@ -20,14 +18,11 @@ describe("opening catalog entity details panel", () => {
   let clusterEntity: KubernetesCluster;
   let localClusterEntity: KubernetesCluster;
   let otherEntity: WebLink;
-  let cluster: Cluster;
 
   beforeEach(async () => {
     builder = getApplicationBuilder();
 
-    builder.afterWindowStart((windowDi) => {
-      const createCluster = windowDi.inject(createClusterInjectable);
-
+    builder.beforeApplicationStart((mainDi) => {
       clusterEntity = new KubernetesCluster({
         metadata: {
           labels: {},
@@ -70,27 +65,8 @@ describe("opening catalog entity details panel", () => {
           phase: "available",
         },
       });
-      cluster = createCluster({
-        contextName: clusterEntity.spec.kubeconfigContext,
-        id: clusterEntity.getId(),
-        kubeConfigPath: clusterEntity.spec.kubeconfigPath,
-      }, {
-        clusterServerUrl: "https://localhost:9999",
-      });
 
-      // TODO: remove once ClusterStore can be used without overriding it
-      windowDi.override(getClusterByIdInjectable, () => (clusterId) => {
-        if (clusterId === cluster.id) {
-          return cluster;
-        }
-
-        return undefined;
-      });
-
-      // TODO: replace with proper entity source once syncing entities between main and windows is injectable
-      const catalogEntityRegistry = windowDi.inject(catalogEntityRegistryInjectable);
-
-      catalogEntityRegistry.updateItems([clusterEntity, otherEntity, localClusterEntity]);
+      mainDi.inject(catalogEntityRegistryInjectable).addComputedSource("test-id", computed(() => [clusterEntity, otherEntity, localClusterEntity]));
     });
 
     rendered = await builder.render();

src/features/catalog/run/common/channel.ts

@@ -0,0 +1,10 @@
+/**
+ * Copyright (c) OpenLens Authors. All rights reserved.
+ * Licensed under MIT License. See LICENSE in root directory for more information.
+ */
+
+import type { MessageChannel } from "../../../../common/utils/channel/message-channel-listener-injection-token";
+
+export const catalogEntityRunChannel: MessageChannel<string> = {
+  id: "catalog-entity-run",
+};

src/features/catalog/run/renderer/emit.injectable.ts

@@ -0,0 +1,21 @@
+/**
+ * Copyright (c) OpenLens Authors. All rights reserved.
+ * Licensed under MIT License. See LICENSE in root directory for more information.
+ */
+import { getInjectable } from "@ogre-tools/injectable";
+import type { MessageChannelHandler } from "../../../../common/utils/channel/message-channel-listener-injection-token";
+import { sendMessageToChannelInjectionToken } from "../../../../common/utils/channel/message-to-channel-injection-token";
+import { catalogEntityRunChannel } from "../common/channel";
+
+export type EmitCatalogEntityRun = MessageChannelHandler<typeof catalogEntityRunChannel>;
+
+const emitCatalogEntityRunInjectable = getInjectable({
+  id: "emit-catalog-entity-run",
+  instantiate: (di): EmitCatalogEntityRun => {
+    const sendMessageToChannel = di.inject(sendMessageToChannelInjectionToken);
+
+    return (entityId) => sendMessageToChannel(catalogEntityRunChannel, entityId);
+  },
+});
+
+export default emitCatalogEntityRunInjectable;

src/features/catalog/run/renderer/listener.injectable.ts

@@ -0,0 +1,33 @@
+/**
+ * Copyright (c) OpenLens Authors. All rights reserved.
+ * Licensed under MIT License. See LICENSE in root directory for more information.
+ */
+
+import { noop } from "../../../../common/utils";
+import { getMessageChannelListenerInjectable } from "../../../../common/utils/channel/message-channel-listener-injection-token";
+import catalogEntityRegistryInjectable from "../../../../renderer/api/catalog/entity/registry.injectable";
+import currentlyInClusterFrameInjectable from "../../../../renderer/routes/currently-in-cluster-frame.injectable";
+import { catalogEntityRunChannel } from "../common/channel";
+
+const catalogEntityRunListener = getMessageChannelListenerInjectable({
+  channel: catalogEntityRunChannel,
+  id: "main",
+  handler: (di) => {
+    const catalogEntityRegistry = di.inject(catalogEntityRegistryInjectable);
+    const currentlyInClusterFrame = di.inject(currentlyInClusterFrameInjectable);
+
+    if (currentlyInClusterFrame) {
+      return noop;
+    }
+
+    return (entityId) => {
+      const entity = catalogEntityRegistry.getById(entityId);
+
+      if (entity) {
+        catalogEntityRegistry.onRun(entity);
+      }
+    };
+  },
+});
+
+export default catalogEntityRunListener;

src/features/catalog/sync/common/sync-channels.ts

@@ -0,0 +1,18 @@
+/**
+ * Copyright (c) OpenLens Authors. All rights reserved.
+ * Licensed under MIT License. See LICENSE in root directory for more information.
+ */
+
+import type { MessageChannel } from "../../../../common/utils/channel/message-channel-listener-injection-token";
+import type { CatalogEntityData, CatalogEntityKindData } from "../../../../common/catalog/catalog-entity";
+import type { RequestChannel } from "../../../../common/utils/channel/request-channel-listener-injection-token";
+
+export type RawCatalogEntityData = CatalogEntityData & CatalogEntityKindData;
+
+export const catalogEntityUpdatesChannel: MessageChannel<RawCatalogEntityData[]> = {
+  id: "catalog-entity-updates",
+};
+
+export const catalogInitialEntitiesChannel: RequestChannel<void, RawCatalogEntityData[]> = {
+  id: "catalog-initial-entities",
+};

src/features/catalog/sync/main/entity-change-set.injectable.ts

@@ -0,0 +1,32 @@
+/**
+ * Copyright (c) OpenLens Authors. All rights reserved.
+ * Licensed under MIT License. See LICENSE in root directory for more information.
+ */
+import { getInjectable } from "@ogre-tools/injectable";
+import type { IComputedValue } from "mobx";
+import { computed } from "mobx";
+import type { CatalogEntityData, CatalogEntityKindData } from "../../../../common/catalog";
+import getEntityShortnameInjectable from "../../../../common/entity-preferences/get-shortname.injectable";
+import { toJS } from "../../../../common/utils";
+import catalogEntityRegistryInjectable from "../../../../main/catalog/entity-registry.injectable";
+
+const catalogEntityChangeSetInjectable = getInjectable({
+  id: "catalog-entity-change-set",
+  instantiate: (di): IComputedValue<(CatalogEntityData & CatalogEntityKindData)[]> => {
+    const getEntityShortname = di.inject(getEntityShortnameInjectable);
+    const catalogEntityRegistry = di.inject(catalogEntityRegistryInjectable);
+
+    return computed(() => toJS(catalogEntityRegistry.items.map(({ metadata, spec, status, kind, apiVersion }) => ({
+      metadata: {
+        ...metadata,
+        shortName: getEntityShortname(metadata.uid) || metadata.shortName,
+      },
+      spec,
+      status,
+      kind,
+      apiVersion,
+    }))));
+  },
+});
+
+export default catalogEntityChangeSetInjectable;

src/features/catalog/sync/main/entity-update-broadcaster.injectable.ts

@@ -0,0 +1,27 @@
+/**
+ * Copyright (c) OpenLens Authors. All rights reserved.
+ * Licensed under MIT License. See LICENSE in root directory for more information.
+ */
+import { getInjectable } from "@ogre-tools/injectable";
+import { debounce } from "lodash";
+import type { CatalogEntityData, CatalogEntityKindData } from "../../../../common/catalog";
+import { sendMessageToChannelInjectionToken } from "../../../../common/utils/channel/message-to-channel-injection-token";
+import { catalogEntityUpdatesChannel } from "../common/sync-channels";
+
+const entityUpdateBroadcasterInjectable = getInjectable({
+  id: "entity-update-broadcaster",
+  instantiate: (di) => {
+    const sendMessageToChannel = di.inject(sendMessageToChannelInjectionToken);
+
+    return debounce(
+      (items: (CatalogEntityData & CatalogEntityKindData)[]) => sendMessageToChannel(catalogEntityUpdatesChannel, items),
+      100,
+      {
+        leading: true,
+        trailing: true,
+      },
+    );
+  },
+});
+
+export default entityUpdateBroadcasterInjectable;

src/features/catalog/sync/main/send-listener.injectable.ts

@@ -0,0 +1,19 @@
+/**
+ * Copyright (c) OpenLens Authors. All rights reserved.
+ * Licensed under MIT License. See LICENSE in root directory for more information.
+ */
+
+import { getRequestChannelListenerInjectable } from "../../../../main/utils/channel/channel-listeners/listener-tokens";
+import { catalogInitialEntitiesChannel } from "../common/sync-channels";
+import catalogEntityChangeSetInjectable from "./entity-change-set.injectable";
+
+const catalogSendEntityUpdatesListenerInjectable = getRequestChannelListenerInjectable({
+  channel: catalogInitialEntitiesChannel,
+  handler: (di) => {
+    const catalogEntityChangeSet = di.inject(catalogEntityChangeSetInjectable);
+
+    return () => catalogEntityChangeSet.get();
+  },
+});
+
+export default catalogSendEntityUpdatesListenerInjectable;

src/features/catalog/sync/renderer/entity-updates-listener.injectable.ts

@@ -0,0 +1,22 @@
+/**
+ * Copyright (c) OpenLens Authors. All rights reserved.
+ * Licensed under MIT License. See LICENSE in root directory for more information.
+ */
+
+import { getMessageChannelListenerInjectable } from "../../../../common/utils/channel/message-channel-listener-injection-token";
+import catalogEntityRegistryInjectable from "../../../../renderer/api/catalog/entity/registry.injectable";
+import { catalogEntityUpdatesChannel } from "../common/sync-channels";
+
+const catalogEntityUpdatesListener = getMessageChannelListenerInjectable({
+  channel: catalogEntityUpdatesChannel,
+  id: "main",
+  handler: (di) => {
+    const catalogEntityRegistry = di.inject(catalogEntityRegistryInjectable);
+
+    return (items) => {
+      catalogEntityRegistry.updateItems(items);
+    };
+  },
+});
+
+export default catalogEntityUpdatesListener;

src/features/catalog/sync/renderer/request-entity-updates.injectable.ts

@@ -0,0 +1,21 @@
+/**
+ * Copyright (c) OpenLens Authors. All rights reserved.
+ * Licensed under MIT License. See LICENSE in root directory for more information.
+ */
+import { getInjectable } from "@ogre-tools/injectable";
+import type { ChannelRequester } from "../../../../main/utils/channel/channel-listeners/listener-tokens";
+import requestFromChannelInjectable from "../../../../renderer/utils/channel/request-from-channel.injectable";
+import { catalogInitialEntitiesChannel } from "../common/sync-channels";
+
+export type RequestInitialCatalogEntities = ChannelRequester<typeof catalogInitialEntitiesChannel>;
+
+const requestInitialCatalogEntitiesInjectable = getInjectable({
+  id: "request-initial-catalog-entities",
+  instantiate: (di) => {
+    const requestFromChannel = di.inject(requestFromChannelInjectable);
+
+    return () => requestFromChannel(catalogInitialEntitiesChannel);
+  },
+});
+
+export default requestInitialCatalogEntitiesInjectable;

src/features/catalog/sync/renderer/setup-entity-updates.injectable.ts

@@ -0,0 +1,26 @@
+/**
+ * Copyright (c) OpenLens Authors. All rights reserved.
+ * Licensed under MIT License. See LICENSE in root directory for more information.
+ */
+import { getInjectable } from "@ogre-tools/injectable";
+import catalogEntityRegistryInjectable from "../../../../renderer/api/catalog/entity/registry.injectable";
+import { beforeFrameStartsSecondInjectionToken } from "../../../../renderer/before-frame-starts/tokens";
+import requestInitialCatalogEntitiesInjectable from "./request-entity-updates.injectable";
+
+const setupCatalogEntityUpdatesInjectable = getInjectable({
+  id: "setup-catalog-entity-updates",
+  instantiate: (di) => ({
+    id: "setup-catalog-entity-updates",
+    run: async () => {
+      const requestInitialCatalogEntities = di.inject(requestInitialCatalogEntitiesInjectable);
+      const catalogEntityRegistry = di.inject(catalogEntityRegistryInjectable);
+
+      const rawEntities = await requestInitialCatalogEntities();
+
+      catalogEntityRegistry.updateItems(rawEntities);
+    },
+  }),
+  injectionToken: beforeFrameStartsSecondInjectionToken,
+});
+
+export default setupCatalogEntityUpdatesInjectable;

src/features/cluster/__snapshots__/legacy-extension-adding-cluster-frame-components.test.tsx.snap

@@ -2,44 +2,6 @@
 
 exports[`legacy extension adding cluster frame components given custom components for cluster view available renders 1`] = `
 <div>
-  <div
-    class="Animate slide-right Drawer KubeObjectDetails flex column right enter leave"
-    style="--size: 725px; --enter-duration: 100ms; --leave-duration: 100ms;"
-  >
-    <div
-      class="drawer-wrapper flex column"
-    >
-      <div
-        class="drawer-title flex align-center"
-      >
-        <div
-          class="drawer-title-text flex gaps align-center"
-        >
-          
-        </div>
-        <i
-          class="Icon material interactive focusable"
-          tabindex="0"
-        >
-          <span
-            class="icon"
-            data-icon-name="close"
-          >
-            close
-          </span>
-        </i>
-        <div>
-          Close
-        </div>
-      </div>
-      <div
-        class="drawer-content flex column box grow"
-      />
-    </div>
-    <div
-      class="ResizingAnchor horizontal leading"
-    />
-  </div>
   <div
     class="Notifications flex column align-flex-end"
   />
@@ -56,16 +18,31 @@ exports[`legacy extension adding cluster frame components given custom component
       >
         <div
           class="SidebarCluster"
+          data-testid="sidebar-cluster-dropdown"
+          id="cluster-some-cluster-id"
+          role="menubar"
+          tabindex="0"
         >
           <div
-            class="Avatar rounded loadingAvatar"
-            style="width: 40px; height: 40px;"
+            class="Avatar rounded avatar"
+            style="width: 40px; height: 40px; background-color: red;"
           >
             ??
           </div>
           <div
-            class="loadingClusterName"
+            class="clusterName"
+            id="tooltip-cluster-some-cluster-id"
           />
+          <i
+            class="Icon dropdown material focusable"
+          >
+            <span
+              class="icon"
+              data-icon-name="arrow_drop_down"
+            >
+              arrow_drop_down
+            </span>
+          </i>
         </div>
         <div
           class="sidebarNav sidebar-active-status"

src/features/cluster/__snapshots__/order-of-sidebar-items.test.tsx.snap

@@ -56,16 +56,31 @@ exports[`cluster - order of sidebar items when rendered renders 1`] = `
       >
         <div
           class="SidebarCluster"
+          data-testid="sidebar-cluster-dropdown"
+          id="cluster-some-cluster-id"
+          role="menubar"
+          tabindex="0"
         >
           <div
-            class="Avatar rounded loadingAvatar"
-            style="width: 40px; height: 40px;"
+            class="Avatar rounded avatar"
+            style="width: 40px; height: 40px; background-color: red;"
           >
             ??
           </div>
           <div
-            class="loadingClusterName"
+            class="clusterName"
+            id="tooltip-cluster-some-cluster-id"
           />
+          <i
+            class="Icon dropdown material focusable"
+          >
+            <span
+              class="icon"
+              data-icon-name="arrow_drop_down"
+            >
+              arrow_drop_down
+            </span>
+          </i>
         </div>
         <div
           class="sidebarNav sidebar-active-status"
@@ -605,44 +620,6 @@ exports[`cluster - order of sidebar items when rendered renders 1`] = `
 
 exports[`cluster - order of sidebar items when rendered when parent is expanded renders 1`] = `
 <div>
-  <div
-    class="Animate slide-right Drawer KubeObjectDetails flex column right enter leave"
-    style="--size: 725px; --enter-duration: 100ms; --leave-duration: 100ms;"
-  >
-    <div
-      class="drawer-wrapper flex column"
-    >
-      <div
-        class="drawer-title flex align-center"
-      >
-        <div
-          class="drawer-title-text flex gaps align-center"
-        >
-          
-        </div>
-        <i
-          class="Icon material interactive focusable"
-          tabindex="0"
-        >
-          <span
-            class="icon"
-            data-icon-name="close"
-          >
-            close
-          </span>
-        </i>
-        <div>
-          Close
-        </div>
-      </div>
-      <div
-        class="drawer-content flex column box grow"
-      />
-    </div>
-    <div
-      class="ResizingAnchor horizontal leading"
-    />
-  </div>
   <div
     class="Notifications flex column align-flex-end"
   />
@@ -659,16 +636,31 @@ exports[`cluster - order of sidebar items when rendered when parent is expanded
       >
         <div
           class="SidebarCluster"
+          data-testid="sidebar-cluster-dropdown"
+          id="cluster-some-cluster-id"
+          role="menubar"
+          tabindex="0"
         >
           <div
-            class="Avatar rounded loadingAvatar"
-            style="width: 40px; height: 40px;"
+            class="Avatar rounded avatar"
+            style="width: 40px; height: 40px; background-color: red;"
           >
             ??
           </div>
           <div
-            class="loadingClusterName"
+            class="clusterName"
+            id="tooltip-cluster-some-cluster-id"
           />
+          <i
+            class="Icon dropdown material focusable"
+          >
+            <span
+              class="icon"
+              data-icon-name="arrow_drop_down"
+            >
+              arrow_drop_down
+            </span>
+          </i>
         </div>
         <div
           class="sidebarNav sidebar-active-status"

src/features/cluster/__snapshots__/sidebar-and-tab-navigation-for-core.test.tsx.snap

@@ -56,16 +56,31 @@ exports[`cluster - sidebar and tab navigation for core given core registrations
       >
         <div
           class="SidebarCluster"
+          data-testid="sidebar-cluster-dropdown"
+          id="cluster-some-cluster-id"
+          role="menubar"
+          tabindex="0"
         >
           <div
-            class="Avatar rounded loadingAvatar"
-            style="width: 40px; height: 40px;"
+            class="Avatar rounded avatar"
+            style="width: 40px; height: 40px; background-color: red;"
           >
             ??
           </div>
           <div
-            class="loadingClusterName"
+            class="clusterName"
+            id="tooltip-cluster-some-cluster-id"
           />
+          <i
+            class="Icon dropdown material focusable"
+          >
+            <span
+              class="icon"
+              data-icon-name="arrow_drop_down"
+            >
+              arrow_drop_down
+            </span>
+          </i>
         </div>
         <div
           class="sidebarNav sidebar-active-status"
@@ -632,16 +647,31 @@ exports[`cluster - sidebar and tab navigation for core given core registrations
       >
         <div
           class="SidebarCluster"
+          data-testid="sidebar-cluster-dropdown"
+          id="cluster-some-cluster-id"
+          role="menubar"
+          tabindex="0"
         >
           <div
-            class="Avatar rounded loadingAvatar"
-            style="width: 40px; height: 40px;"
+            class="Avatar rounded avatar"
+            style="width: 40px; height: 40px; background-color: red;"
           >
             ??
           </div>
           <div
-            class="loadingClusterName"
+            class="clusterName"
+            id="tooltip-cluster-some-cluster-id"
           />
+          <i
+            class="Icon dropdown material focusable"
+          >
+            <span
+              class="icon"
+              data-icon-name="arrow_drop_down"
+            >
+              arrow_drop_down
+            </span>
+          </i>
         </div>
         <div
           class="sidebarNav sidebar-active-status"
@@ -1154,44 +1184,6 @@ exports[`cluster - sidebar and tab navigation for core given core registrations
 
 exports[`cluster - sidebar and tab navigation for core given core registrations given no initially persisted state for sidebar items, when rendered when a parent sidebar item is expanded renders 1`] = `
 <div>
-  <div
-    class="Animate slide-right Drawer KubeObjectDetails flex column right enter leave"
-    style="--size: 725px; --enter-duration: 100ms; --leave-duration: 100ms;"
-  >
-    <div
-      class="drawer-wrapper flex column"
-    >
-      <div
-        class="drawer-title flex align-center"
-      >
-        <div
-          class="drawer-title-text flex gaps align-center"
-        >
-          
-        </div>
-        <i
-          class="Icon material interactive focusable"
-          tabindex="0"
-        >
-          <span
-            class="icon"
-            data-icon-name="close"
-          >
-            close
-          </span>
-        </i>
-        <div>
-          Close
-        </div>
-      </div>
-      <div
-        class="drawer-content flex column box grow"
-      />
-    </div>
-    <div
-      class="ResizingAnchor horizontal leading"
-    />
-  </div>
   <div
     class="Notifications flex column align-flex-end"
   />
@@ -1208,16 +1200,31 @@ exports[`cluster - sidebar and tab navigation for core given core registrations
       >
         <div
           class="SidebarCluster"
+          data-testid="sidebar-cluster-dropdown"
+          id="cluster-some-cluster-id"
+          role="menubar"
+          tabindex="0"
         >
           <div
-            class="Avatar rounded loadingAvatar"
-            style="width: 40px; height: 40px;"
+            class="Avatar rounded avatar"
+            style="width: 40px; height: 40px; background-color: red;"
           >
             ??
           </div>
           <div
-            class="loadingClusterName"
+            class="clusterName"
+            id="tooltip-cluster-some-cluster-id"
           />
+          <i
+            class="Icon dropdown material focusable"
+          >
+            <span
+              class="icon"
+              data-icon-name="arrow_drop_down"
+            >
+              arrow_drop_down
+            </span>
+          </i>
         </div>
         <div
           class="sidebarNav sidebar-active-status"
@@ -1750,44 +1757,6 @@ exports[`cluster - sidebar and tab navigation for core given core registrations
 
 exports[`cluster - sidebar and tab navigation for core given core registrations given no initially persisted state for sidebar items, when rendered when a parent sidebar item is expanded when a child of the parent is selected renders 1`] = `
 <div>
-  <div
-    class="Animate slide-right Drawer KubeObjectDetails flex column right enter leave"
-    style="--size: 725px; --enter-duration: 100ms; --leave-duration: 100ms;"
-  >
-    <div
-      class="drawer-wrapper flex column"
-    >
-      <div
-        class="drawer-title flex align-center"
-      >
-        <div
-          class="drawer-title-text flex gaps align-center"
-        >
-          
-        </div>
-        <i
-          class="Icon material interactive focusable"
-          tabindex="0"
-        >
-          <span
-            class="icon"
-            data-icon-name="close"
-          >
-            close
-          </span>
-        </i>
-        <div>
-          Close
-        </div>
-      </div>
-      <div
-        class="drawer-content flex column box grow"
-      />
-    </div>
-    <div
-      class="ResizingAnchor horizontal leading"
-    />
-  </div>
   <div
     class="Notifications flex column align-flex-end"
   />
@@ -1804,16 +1773,31 @@ exports[`cluster - sidebar and tab navigation for core given core registrations
       >
         <div
           class="SidebarCluster"
+          data-testid="sidebar-cluster-dropdown"
+          id="cluster-some-cluster-id"
+          role="menubar"
+          tabindex="0"
         >
           <div
-            class="Avatar rounded loadingAvatar"
-            style="width: 40px; height: 40px;"
+            class="Avatar rounded avatar"
+            style="width: 40px; height: 40px; background-color: red;"
           >
             ??
           </div>
           <div
-            class="loadingClusterName"
+            class="clusterName"
+            id="tooltip-cluster-some-cluster-id"
           />
+          <i
+            class="Icon dropdown material focusable"
+          >
+            <span
+              class="icon"
+              data-icon-name="arrow_drop_down"
+            >
+              arrow_drop_down
+            </span>
+          </i>
         </div>
         <div
           class="sidebarNav sidebar-active-status"
@@ -2224,44 +2208,6 @@ exports[`cluster - sidebar and tab navigation for core given core registrations
 
 exports[`cluster - sidebar and tab navigation for core given core registrations given no state for expanded sidebar items exists, and navigated to child sidebar item, when rendered renders 1`] = `
 <div>
-  <div
-    class="Animate slide-right Drawer KubeObjectDetails flex column right enter leave"
-    style="--size: 725px; --enter-duration: 100ms; --leave-duration: 100ms;"
-  >
-    <div
-      class="drawer-wrapper flex column"
-    >
-      <div
-        class="drawer-title flex align-center"
-      >
-        <div
-          class="drawer-title-text flex gaps align-center"
-        >
-          
-        </div>
-        <i
-          class="Icon material interactive focusable"
-          tabindex="0"
-        >
-          <span
-            class="icon"
-            data-icon-name="close"
-          >
-            close
-          </span>
-        </i>
-        <div>
-          Close
-        </div>
-      </div>
-      <div
-        class="drawer-content flex column box grow"
-      />
-    </div>
-    <div
-      class="ResizingAnchor horizontal leading"
-    />
-  </div>
   <div
     class="Notifications flex column align-flex-end"
   />
@@ -2278,16 +2224,31 @@ exports[`cluster - sidebar and tab navigation for core given core registrations
       >
         <div
           class="SidebarCluster"
+          data-testid="sidebar-cluster-dropdown"
+          id="cluster-some-cluster-id"
+          role="menubar"
+          tabindex="0"
         >
           <div
-            class="Avatar rounded loadingAvatar"
-            style="width: 40px; height: 40px;"
+            class="Avatar rounded avatar"
+            style="width: 40px; height: 40px; background-color: red;"
           >
             ??
           </div>
           <div
-            class="loadingClusterName"
+            class="clusterName"
+            id="tooltip-cluster-some-cluster-id"
           />
+          <i
+            class="Icon dropdown material focusable"
+          >
+            <span
+              class="icon"
+              data-icon-name="arrow_drop_down"
+            >
+              arrow_drop_down
+            </span>
+          </i>
         </div>
         <div
           class="sidebarNav sidebar-active-status"
@@ -2731,16 +2692,31 @@ exports[`cluster - sidebar and tab navigation for core given core registrations
       >
         <div
           class="SidebarCluster"
+          data-testid="sidebar-cluster-dropdown"
+          id="cluster-some-cluster-id"
+          role="menubar"
+          tabindex="0"
         >
           <div
-            class="Avatar rounded loadingAvatar"
-            style="width: 40px; height: 40px;"
+            class="Avatar rounded avatar"
+            style="width: 40px; height: 40px; background-color: red;"
           >
             ??
           </div>
           <div
-            class="loadingClusterName"
+            class="clusterName"
+            id="tooltip-cluster-some-cluster-id"
           />
+          <i
+            class="Icon dropdown material focusable"
+          >
+            <span
+              class="icon"
+              data-icon-name="arrow_drop_down"
+            >
+              arrow_drop_down
+            </span>
+          </i>
         </div>
         <div
           class="sidebarNav sidebar-active-status"
@@ -3327,16 +3303,31 @@ exports[`cluster - sidebar and tab navigation for core given core registrations
       >
         <div
           class="SidebarCluster"
+          data-testid="sidebar-cluster-dropdown"
+          id="cluster-some-cluster-id"
+          role="menubar"
+          tabindex="0"
         >
           <div
-            class="Avatar rounded loadingAvatar"
-            style="width: 40px; height: 40px;"
+            class="Avatar rounded avatar"
+            style="width: 40px; height: 40px; background-color: red;"
           >
             ??
           </div>
           <div
-            class="loadingClusterName"
+            class="clusterName"
+            id="tooltip-cluster-some-cluster-id"
           />
+          <i
+            class="Icon dropdown material focusable"
+          >
+            <span
+              class="icon"
+              data-icon-name="arrow_drop_down"
+            >
+              arrow_drop_down
+            </span>
+          </i>
         </div>
         <div
           class="sidebarNav sidebar-active-status"

src/features/cluster/__snapshots__/sidebar-and-tab-navigation-for-extensions.test.tsx.snap

@@ -2,44 +2,6 @@
 
 exports[`cluster - sidebar and tab navigation for extensions given extension with cluster pages and cluster page menus given empty state for expanded sidebar items already exists, when rendered renders without errors 1`] = `
 <div>
-  <div
-    class="Animate slide-right Drawer KubeObjectDetails flex column right enter leave"
-    style="--size: 725px; --enter-duration: 100ms; --leave-duration: 100ms;"
-  >
-    <div
-      class="drawer-wrapper flex column"
-    >
-      <div
-        class="drawer-title flex align-center"
-      >
-        <div
-          class="drawer-title-text flex gaps align-center"
-        >
-          
-        </div>
-        <i
-          class="Icon material interactive focusable"
-          tabindex="0"
-        >
-          <span
-            class="icon"
-            data-icon-name="close"
-          >
-            close
-          </span>
-        </i>
-        <div>
-          Close
-        </div>
-      </div>
-      <div
-        class="drawer-content flex column box grow"
-      />
-    </div>
-    <div
-      class="ResizingAnchor horizontal leading"
-    />
-  </div>
   <div
     class="Notifications flex column align-flex-end"
   />
@@ -56,16 +18,31 @@ exports[`cluster - sidebar and tab navigation for extensions given extension wit
       >
         <div
           class="SidebarCluster"
+          data-testid="sidebar-cluster-dropdown"
+          id="cluster-some-cluster-id"
+          role="menubar"
+          tabindex="0"
         >
           <div
-            class="Avatar rounded loadingAvatar"
-            style="width: 40px; height: 40px;"
+            class="Avatar rounded avatar"
+            style="width: 40px; height: 40px; background-color: red;"
           >
             ??
           </div>
           <div
-            class="loadingClusterName"
+            class="clusterName"
+            id="tooltip-cluster-some-cluster-id"
           />
+          <i
+            class="Icon dropdown material focusable"
+          >
+            <span
+              class="icon"
+              data-icon-name="arrow_drop_down"
+            >
+              arrow_drop_down
+            </span>
+          </i>
         </div>
         <div
           class="sidebarNav sidebar-active-status"
@@ -578,44 +555,6 @@ exports[`cluster - sidebar and tab navigation for extensions given extension wit
 
 exports[`cluster - sidebar and tab navigation for extensions given extension with cluster pages and cluster page menus given no initially persisted state for sidebar items, when rendered renders 1`] = `
 <div>
-  <div
-    class="Animate slide-right Drawer KubeObjectDetails flex column right enter leave"
-    style="--size: 725px; --enter-duration: 100ms; --leave-duration: 100ms;"
-  >
-    <div
-      class="drawer-wrapper flex column"
-    >
-      <div
-        class="drawer-title flex align-center"
-      >
-        <div
-          class="drawer-title-text flex gaps align-center"
-        >
-          
-        </div>
-        <i
-          class="Icon material interactive focusable"
-          tabindex="0"
-        >
-          <span
-            class="icon"
-            data-icon-name="close"
-          >
-            close
-          </span>
-        </i>
-        <div>
-          Close
-        </div>
-      </div>
-      <div
-        class="drawer-content flex column box grow"
-      />
-    </div>
-    <div
-      class="ResizingAnchor horizontal leading"
-    />
-  </div>
   <div
     class="Notifications flex column align-flex-end"
   />
@@ -632,16 +571,31 @@ exports[`cluster - sidebar and tab navigation for extensions given extension wit
       >
         <div
           class="SidebarCluster"
+          data-testid="sidebar-cluster-dropdown"
+          id="cluster-some-cluster-id"
+          role="menubar"
+          tabindex="0"
         >
           <div
-            class="Avatar rounded loadingAvatar"
-            style="width: 40px; height: 40px;"
+            class="Avatar rounded avatar"
+            style="width: 40px; height: 40px; background-color: red;"
           >
             ??
           </div>
           <div
-            class="loadingClusterName"
+            class="clusterName"
+            id="tooltip-cluster-some-cluster-id"
           />
+          <i
+            class="Icon dropdown material focusable"
+          >
+            <span
+              class="icon"
+              data-icon-name="arrow_drop_down"
+            >
+              arrow_drop_down
+            </span>
+          </i>
         </div>
         <div
           class="sidebarNav sidebar-active-status"
@@ -1154,44 +1108,6 @@ exports[`cluster - sidebar and tab navigation for extensions given extension wit
 
 exports[`cluster - sidebar and tab navigation for extensions given extension with cluster pages and cluster page menus given no initially persisted state for sidebar items, when rendered when a parent sidebar item is expanded renders 1`] = `
 <div>
-  <div
-    class="Animate slide-right Drawer KubeObjectDetails flex column right enter leave"
-    style="--size: 725px; --enter-duration: 100ms; --leave-duration: 100ms;"
-  >
-    <div
-      class="drawer-wrapper flex column"
-    >
-      <div
-        class="drawer-title flex align-center"
-      >
-        <div
-          class="drawer-title-text flex gaps align-center"
-        >
-          
-        </div>
-        <i
-          class="Icon material interactive focusable"
-          tabindex="0"
-        >
-          <span
-            class="icon"
-            data-icon-name="close"
-          >
-            close
-          </span>
-        </i>
-        <div>
-          Close
-        </div>
-      </div>
-      <div
-        class="drawer-content flex column box grow"
-      />
-    </div>
-    <div
-      class="ResizingAnchor horizontal leading"
-    />
-  </div>
   <div
     class="Notifications flex column align-flex-end"
   />
@@ -1208,16 +1124,31 @@ exports[`cluster - sidebar and tab navigation for extensions given extension wit
       >
         <div
           class="SidebarCluster"
+          data-testid="sidebar-cluster-dropdown"
+          id="cluster-some-cluster-id"
+          role="menubar"
+          tabindex="0"
         >
           <div
-            class="Avatar rounded loadingAvatar"
-            style="width: 40px; height: 40px;"
+            class="Avatar rounded avatar"
+            style="width: 40px; height: 40px; background-color: red;"
           >
             ??
           </div>
           <div
-            class="loadingClusterName"
+            class="clusterName"
+            id="tooltip-cluster-some-cluster-id"
           />
+          <i
+            class="Icon dropdown material focusable"
+          >
+            <span
+              class="icon"
+              data-icon-name="arrow_drop_down"
+            >
+              arrow_drop_down
+            </span>
+          </i>
         </div>
         <div
           class="sidebarNav sidebar-active-status"
@@ -1766,44 +1697,6 @@ exports[`cluster - sidebar and tab navigation for extensions given extension wit
 
 exports[`cluster - sidebar and tab navigation for extensions given extension with cluster pages and cluster page menus given no initially persisted state for sidebar items, when rendered when a parent sidebar item is expanded when a child of the parent is selected renders 1`] = `
 <div>
-  <div
-    class="Animate slide-right Drawer KubeObjectDetails flex column right enter leave"
-    style="--size: 725px; --enter-duration: 100ms; --leave-duration: 100ms;"
-  >
-    <div
-      class="drawer-wrapper flex column"
-    >
-      <div
-        class="drawer-title flex align-center"
-      >
-        <div
-          class="drawer-title-text flex gaps align-center"
-        >
-          
-        </div>
-        <i
-          class="Icon material interactive focusable"
-          tabindex="0"
-        >
-          <span
-            class="icon"
-            data-icon-name="close"
-          >
-            close
-          </span>
-        </i>
-        <div>
-          Close
-        </div>
-      </div>
-      <div
-        class="drawer-content flex column box grow"
-      />
-    </div>
-    <div
-      class="ResizingAnchor horizontal leading"
-    />
-  </div>
   <div
     class="Notifications flex column align-flex-end"
   />
@@ -1820,16 +1713,31 @@ exports[`cluster - sidebar and tab navigation for extensions given extension wit
       >
         <div
           class="SidebarCluster"
+          data-testid="sidebar-cluster-dropdown"
+          id="cluster-some-cluster-id"
+          role="menubar"
+          tabindex="0"
         >
           <div
-            class="Avatar rounded loadingAvatar"
-            style="width: 40px; height: 40px;"
+            class="Avatar rounded avatar"
+            style="width: 40px; height: 40px; background-color: red;"
           >
             ??
           </div>
           <div
-            class="loadingClusterName"
+            class="clusterName"
+            id="tooltip-cluster-some-cluster-id"
           />
+          <i
+            class="Icon dropdown material focusable"
+          >
+            <span
+              class="icon"
+              data-icon-name="arrow_drop_down"
+            >
+              arrow_drop_down
+            </span>
+          </i>
         </div>
         <div
           class="sidebarNav sidebar-active-status"
@@ -2297,44 +2205,6 @@ exports[`cluster - sidebar and tab navigation for extensions given extension wit
 
 exports[`cluster - sidebar and tab navigation for extensions given extension with cluster pages and cluster page menus given no initially persisted state for sidebar items, when rendered when a parent sidebar item is expanded when a child of the parent is selected when selecting sibling tab renders 1`] = `
 <div>
-  <div
-    class="Animate slide-right Drawer KubeObjectDetails flex column right enter leave"
-    style="--size: 725px; --enter-duration: 100ms; --leave-duration: 100ms;"
-  >
-    <div
-      class="drawer-wrapper flex column"
-    >
-      <div
-        class="drawer-title flex align-center"
-      >
-        <div
-          class="drawer-title-text flex gaps align-center"
-        >
-          
-        </div>
-        <i
-          class="Icon material interactive focusable"
-          tabindex="0"
-        >
-          <span
-            class="icon"
-            data-icon-name="close"
-          >
-            close
-          </span>
-        </i>
-        <div>
-          Close
-        </div>
-      </div>
-      <div
-        class="drawer-content flex column box grow"
-      />
-    </div>
-    <div
-      class="ResizingAnchor horizontal leading"
-    />
-  </div>
   <div
     class="Notifications flex column align-flex-end"
   />
@@ -2351,16 +2221,31 @@ exports[`cluster - sidebar and tab navigation for extensions given extension wit
       >
         <div
           class="SidebarCluster"
+          data-testid="sidebar-cluster-dropdown"
+          id="cluster-some-cluster-id"
+          role="menubar"
+          tabindex="0"
         >
           <div
-            class="Avatar rounded loadingAvatar"
-            style="width: 40px; height: 40px;"
+            class="Avatar rounded avatar"
+            style="width: 40px; height: 40px; background-color: red;"
           >
             ??
           </div>
           <div
-            class="loadingClusterName"
+            class="clusterName"
+            id="tooltip-cluster-some-cluster-id"
           />
+          <i
+            class="Icon dropdown material focusable"
+          >
+            <span
+              class="icon"
+              data-icon-name="arrow_drop_down"
+            >
+              arrow_drop_down
+            </span>
+          </i>
         </div>
         <div
           class="sidebarNav sidebar-active-status"
@@ -2828,44 +2713,6 @@ exports[`cluster - sidebar and tab navigation for extensions given extension wit
 
 exports[`cluster - sidebar and tab navigation for extensions given extension with cluster pages and cluster page menus given no state for expanded sidebar items exists, and navigated to child sidebar item, when rendered renders 1`] = `
 <div>
-  <div
-    class="Animate slide-right Drawer KubeObjectDetails flex column right enter leave"
-    style="--size: 725px; --enter-duration: 100ms; --leave-duration: 100ms;"
-  >
-    <div
-      class="drawer-wrapper flex column"
-    >
-      <div
-        class="drawer-title flex align-center"
-      >
-        <div
-          class="drawer-title-text flex gaps align-center"
-        >
-          
-        </div>
-        <i
-          class="Icon material interactive focusable"
-          tabindex="0"
-        >
-          <span
-            class="icon"
-            data-icon-name="close"
-          >
-            close
-          </span>
-        </i>
-        <div>
-          Close
-        </div>
-      </div>
-      <div
-        class="drawer-content flex column box grow"
-      />
-    </div>
-    <div
-      class="ResizingAnchor horizontal leading"
-    />
-  </div>
   <div
     class="Notifications flex column align-flex-end"
   />
@@ -2882,16 +2729,31 @@ exports[`cluster - sidebar and tab navigation for extensions given extension wit
       >
         <div
           class="SidebarCluster"
+          data-testid="sidebar-cluster-dropdown"
+          id="cluster-some-cluster-id"
+          role="menubar"
+          tabindex="0"
         >
           <div
-            class="Avatar rounded loadingAvatar"
-            style="width: 40px; height: 40px;"
+            class="Avatar rounded avatar"
+            style="width: 40px; height: 40px; background-color: red;"
           >
             ??
           </div>
           <div
-            class="loadingClusterName"
+            class="clusterName"
+            id="tooltip-cluster-some-cluster-id"
           />
+          <i
+            class="Icon dropdown material focusable"
+          >
+            <span
+              class="icon"
+              data-icon-name="arrow_drop_down"
+            >
+              arrow_drop_down
+            </span>
+          </i>
         </div>
         <div
           class="sidebarNav sidebar-active-status"
@@ -3322,44 +3184,6 @@ exports[`cluster - sidebar and tab navigation for extensions given extension wit
 
 exports[`cluster - sidebar and tab navigation for extensions given extension with cluster pages and cluster page menus given state for expanded sidebar items already exists, when rendered renders 1`] = `
 <div>
-  <div
-    class="Animate slide-right Drawer KubeObjectDetails flex column right enter leave"
-    style="--size: 725px; --enter-duration: 100ms; --leave-duration: 100ms;"
-  >
-    <div
-      class="drawer-wrapper flex column"
-    >
-      <div
-        class="drawer-title flex align-center"
-      >
-        <div
-          class="drawer-title-text flex gaps align-center"
-        >
-          
-        </div>
-        <i
-          class="Icon material interactive focusable"
-          tabindex="0"
-        >
-          <span
-            class="icon"
-            data-icon-name="close"
-          >
-            close
-          </span>
-        </i>
-        <div>
-          Close
-        </div>
-      </div>
-      <div
-        class="drawer-content flex column box grow"
-      />
-    </div>
-    <div
-      class="ResizingAnchor horizontal leading"
-    />
-  </div>
   <div
     class="Notifications flex column align-flex-end"
   />
@@ -3376,16 +3200,31 @@ exports[`cluster - sidebar and tab navigation for extensions given extension wit
       >
         <div
           class="SidebarCluster"
+          data-testid="sidebar-cluster-dropdown"
+          id="cluster-some-cluster-id"
+          role="menubar"
+          tabindex="0"
         >
           <div
-            class="Avatar rounded loadingAvatar"
-            style="width: 40px; height: 40px;"
+            class="Avatar rounded avatar"
+            style="width: 40px; height: 40px; background-color: red;"
           >
             ??
           </div>
           <div
-            class="loadingClusterName"
+            class="clusterName"
+            id="tooltip-cluster-some-cluster-id"
           />
+          <i
+            class="Icon dropdown material focusable"
+          >
+            <span
+              class="icon"
+              data-icon-name="arrow_drop_down"
+            >
+              arrow_drop_down
+            </span>
+          </i>
         </div>
         <div
           class="sidebarNav sidebar-active-status"
@@ -3934,44 +3773,6 @@ exports[`cluster - sidebar and tab navigation for extensions given extension wit
 
 exports[`cluster - sidebar and tab navigation for extensions given extension with cluster pages and cluster page menus given state for expanded unknown sidebar items already exists, when rendered renders without errors 1`] = `
 <div>
-  <div
-    class="Animate slide-right Drawer KubeObjectDetails flex column right enter leave"
-    style="--size: 725px; --enter-duration: 100ms; --leave-duration: 100ms;"
-  >
-    <div
-      class="drawer-wrapper flex column"
-    >
-      <div
-        class="drawer-title flex align-center"
-      >
-        <div
-          class="drawer-title-text flex gaps align-center"
-        >
-          
-        </div>
-        <i
-          class="Icon material interactive focusable"
-          tabindex="0"
-        >
-          <span
-            class="icon"
-            data-icon-name="close"
-          >
-            close
-          </span>
-        </i>
-        <div>
-          Close
-        </div>
-      </div>
-      <div
-        class="drawer-content flex column box grow"
-      />
-    </div>
-    <div
-      class="ResizingAnchor horizontal leading"
-    />
-  </div>
   <div
     class="Notifications flex column align-flex-end"
   />
@@ -3988,16 +3789,31 @@ exports[`cluster - sidebar and tab navigation for extensions given extension wit
       >
         <div
           class="SidebarCluster"
+          data-testid="sidebar-cluster-dropdown"
+          id="cluster-some-cluster-id"
+          role="menubar"
+          tabindex="0"
         >
           <div
-            class="Avatar rounded loadingAvatar"
-            style="width: 40px; height: 40px;"
+            class="Avatar rounded avatar"
+            style="width: 40px; height: 40px; background-color: red;"
           >
             ??
           </div>
           <div
-            class="loadingClusterName"
+            class="clusterName"
+            id="tooltip-cluster-some-cluster-id"
           />
+          <i
+            class="Icon dropdown material focusable"
+          >
+            <span
+              class="icon"
+              data-icon-name="arrow_drop_down"
+            >
+              arrow_drop_down
+            </span>
+          </i>
         </div>
         <div
           class="sidebarNav sidebar-active-status"

src/features/cluster/__snapshots__/visibility-of-sidebar-items.test.tsx.snap

@@ -56,16 +56,31 @@ exports[`cluster - visibility of sidebar items given kube resource for route is
       >
         <div
           class="SidebarCluster"
+          data-testid="sidebar-cluster-dropdown"
+          id="cluster-some-cluster-id"
+          role="menubar"
+          tabindex="0"
         >
           <div
-            class="Avatar rounded loadingAvatar"
-            style="width: 40px; height: 40px;"
+            class="Avatar rounded avatar"
+            style="width: 40px; height: 40px; background-color: red;"
           >
             ??
           </div>
           <div
-            class="loadingClusterName"
+            class="clusterName"
+            id="tooltip-cluster-some-cluster-id"
           />
+          <i
+            class="Icon dropdown material focusable"
+          >
+            <span
+              class="icon"
+              data-icon-name="arrow_drop_down"
+            >
+              arrow_drop_down
+            </span>
+          </i>
         </div>
         <div
           class="sidebarNav sidebar-active-status"
@@ -550,44 +565,6 @@ exports[`cluster - visibility of sidebar items given kube resource for route is
 
 exports[`cluster - visibility of sidebar items given kube resource for route is not allowed when kube resource becomes allowed renders 1`] = `
 <div>
-  <div
-    class="Animate slide-right Drawer KubeObjectDetails flex column right enter leave"
-    style="--size: 725px; --enter-duration: 100ms; --leave-duration: 100ms;"
-  >
-    <div
-      class="drawer-wrapper flex column"
-    >
-      <div
-        class="drawer-title flex align-center"
-      >
-        <div
-          class="drawer-title-text flex gaps align-center"
-        >
-          
-        </div>
-        <i
-          class="Icon material interactive focusable"
-          tabindex="0"
-        >
-          <span
-            class="icon"
-            data-icon-name="close"
-          >
-            close
-          </span>
-        </i>
-        <div>
-          Close
-        </div>
-      </div>
-      <div
-        class="drawer-content flex column box grow"
-      />
-    </div>
-    <div
-      class="ResizingAnchor horizontal leading"
-    />
-  </div>
   <div
     class="Notifications flex column align-flex-end"
   />
@@ -604,16 +581,31 @@ exports[`cluster - visibility of sidebar items given kube resource for route is
       >
         <div
           class="SidebarCluster"
+          data-testid="sidebar-cluster-dropdown"
+          id="cluster-some-cluster-id"
+          role="menubar"
+          tabindex="0"
         >
           <div
-            class="Avatar rounded loadingAvatar"
-            style="width: 40px; height: 40px;"
+            class="Avatar rounded avatar"
+            style="width: 40px; height: 40px; background-color: red;"
           >
             ??
           </div>
           <div
-            class="loadingClusterName"
+            class="clusterName"
+            id="tooltip-cluster-some-cluster-id"
           />
+          <i
+            class="Icon dropdown material focusable"
+          >
+            <span
+              class="icon"
+              data-icon-name="arrow_drop_down"
+            >
+              arrow_drop_down
+            </span>
+          </i>
         </div>
         <div
           class="sidebarNav sidebar-active-status"

src/features/cluster/__snapshots__/workload-overview.test.tsx.snap

@@ -3,44 +3,6 @@
 exports[`workload overview when navigating to workload overview renders 1`] = `
 <body>
   <div>
-    <div
-      class="Animate slide-right Drawer KubeObjectDetails flex column right enter leave"
-      style="--size: 725px; --enter-duration: 100ms; --leave-duration: 100ms;"
-    >
-      <div
-        class="drawer-wrapper flex column"
-      >
-        <div
-          class="drawer-title flex align-center"
-        >
-          <div
-            class="drawer-title-text flex gaps align-center"
-          >
-            
-          </div>
-          <i
-            class="Icon material interactive focusable"
-            tabindex="0"
-          >
-            <span
-              class="icon"
-              data-icon-name="close"
-            >
-              close
-            </span>
-          </i>
-          <div>
-            Close
-          </div>
-        </div>
-        <div
-          class="drawer-content flex column box grow"
-        />
-      </div>
-      <div
-        class="ResizingAnchor horizontal leading"
-      />
-    </div>
     <div
       class="Notifications flex column align-flex-end"
     />
@@ -57,16 +19,31 @@ exports[`workload overview when navigating to workload overview renders 1`] = `
         >
           <div
             class="SidebarCluster"
+            data-testid="sidebar-cluster-dropdown"
+            id="cluster-some-cluster-id"
+            role="menubar"
+            tabindex="0"
           >
             <div
-              class="Avatar rounded loadingAvatar"
-              style="width: 40px; height: 40px;"
+              class="Avatar rounded avatar"
+              style="width: 40px; height: 40px; background-color: red;"
             >
               ??
             </div>
             <div
-              class="loadingClusterName"
+              class="clusterName"
+              id="tooltip-cluster-some-cluster-id"
             />
+            <i
+              class="Icon dropdown material focusable"
+            >
+              <span
+                class="icon"
+                data-icon-name="arrow_drop_down"
+              >
+                arrow_drop_down
+              </span>
+            </i>
           </div>
           <div
             class="sidebarNav sidebar-active-status"

src/features/cluster/extension-api/__snapshots__/disable-cluster-pages-when-cluster-is-not-relevant.test.tsx.snap

@@ -3,44 +3,6 @@
 exports[`disable-cluster-pages-when-cluster-is-not-relevant given extension should be enabled for the cluster, when navigating renders 1`] = `
 <body>
   <div>
-    <div
-      class="Animate slide-right Drawer KubeObjectDetails flex column right enter leave"
-      style="--size: 725px; --enter-duration: 100ms; --leave-duration: 100ms;"
-    >
-      <div
-        class="drawer-wrapper flex column"
-      >
-        <div
-          class="drawer-title flex align-center"
-        >
-          <div
-            class="drawer-title-text flex gaps align-center"
-          >
-            
-          </div>
-          <i
-            class="Icon material interactive focusable"
-            tabindex="0"
-          >
-            <span
-              class="icon"
-              data-icon-name="close"
-            >
-              close
-            </span>
-          </i>
-          <div>
-            Close
-          </div>
-        </div>
-        <div
-          class="drawer-content flex column box grow"
-        />
-      </div>
-      <div
-        class="ResizingAnchor horizontal leading"
-      />
-    </div>
     <div
       class="Notifications flex column align-flex-end"
     />
@@ -57,16 +19,31 @@ exports[`disable-cluster-pages-when-cluster-is-not-relevant given extension shou
         >
           <div
             class="SidebarCluster"
+            data-testid="sidebar-cluster-dropdown"
+            id="cluster-some-cluster-id"
+            role="menubar"
+            tabindex="0"
           >
             <div
-              class="Avatar rounded loadingAvatar"
-              style="width: 40px; height: 40px;"
+              class="Avatar rounded avatar"
+              style="width: 40px; height: 40px; background-color: red;"
             >
               ??
             </div>
             <div
-              class="loadingClusterName"
+              class="clusterName"
+              id="tooltip-cluster-some-cluster-id"
             />
+            <i
+              class="Icon dropdown material focusable"
+            >
+              <span
+                class="icon"
+                data-icon-name="arrow_drop_down"
+              >
+                arrow_drop_down
+              </span>
+            </i>
           </div>
           <div
             class="sidebarNav sidebar-active-status"
@@ -431,44 +408,6 @@ exports[`disable-cluster-pages-when-cluster-is-not-relevant given extension shou
 exports[`disable-cluster-pages-when-cluster-is-not-relevant given extension shouldn't be enabled for the cluster, when navigating renders 1`] = `
 <body>
   <div>
-    <div
-      class="Animate slide-right Drawer KubeObjectDetails flex column right enter leave"
-      style="--size: 725px; --enter-duration: 100ms; --leave-duration: 100ms;"
-    >
-      <div
-        class="drawer-wrapper flex column"
-      >
-        <div
-          class="drawer-title flex align-center"
-        >
-          <div
-            class="drawer-title-text flex gaps align-center"
-          >
-            
-          </div>
-          <i
-            class="Icon material interactive focusable"
-            tabindex="0"
-          >
-            <span
-              class="icon"
-              data-icon-name="close"
-            >
-              close
-            </span>
-          </i>
-          <div>
-            Close
-          </div>
-        </div>
-        <div
-          class="drawer-content flex column box grow"
-        />
-      </div>
-      <div
-        class="ResizingAnchor horizontal leading"
-      />
-    </div>
     <div
       class="Notifications flex column align-flex-end"
     />
@@ -485,16 +424,31 @@ exports[`disable-cluster-pages-when-cluster-is-not-relevant given extension shou
         >
           <div
             class="SidebarCluster"
+            data-testid="sidebar-cluster-dropdown"
+            id="cluster-some-cluster-id"
+            role="menubar"
+            tabindex="0"
           >
             <div
-              class="Avatar rounded loadingAvatar"
-              style="width: 40px; height: 40px;"
+              class="Avatar rounded avatar"
+              style="width: 40px; height: 40px; background-color: red;"
             >
               ??
             </div>
             <div
-              class="loadingClusterName"
+              class="clusterName"
+              id="tooltip-cluster-some-cluster-id"
             />
+            <i
+              class="Icon dropdown material focusable"
+            >
+              <span
+                class="icon"
+                data-icon-name="arrow_drop_down"
+              >
+                arrow_drop_down
+              </span>
+            </i>
           </div>
           <div
             class="sidebarNav sidebar-active-status"
@@ -981,44 +935,6 @@ exports[`disable-cluster-pages-when-cluster-is-not-relevant given extension shou
 exports[`disable-cluster-pages-when-cluster-is-not-relevant given not yet known if extension should be enabled for the cluster, when navigating renders 1`] = `
 <body>
   <div>
-    <div
-      class="Animate slide-right Drawer KubeObjectDetails flex column right enter leave"
-      style="--size: 725px; --enter-duration: 100ms; --leave-duration: 100ms;"
-    >
-      <div
-        class="drawer-wrapper flex column"
-      >
-        <div
-          class="drawer-title flex align-center"
-        >
-          <div
-            class="drawer-title-text flex gaps align-center"
-          >
-            
-          </div>
-          <i
-            class="Icon material interactive focusable"
-            tabindex="0"
-          >
-            <span
-              class="icon"
-              data-icon-name="close"
-            >
-              close
-            </span>
-          </i>
-          <div>
-            Close
-          </div>
-        </div>
-        <div
-          class="drawer-content flex column box grow"
-        />
-      </div>
-      <div
-        class="ResizingAnchor horizontal leading"
-      />
-    </div>
     <div
       class="Notifications flex column align-flex-end"
     />
@@ -1035,16 +951,31 @@ exports[`disable-cluster-pages-when-cluster-is-not-relevant given not yet known
         >
           <div
             class="SidebarCluster"
+            data-testid="sidebar-cluster-dropdown"
+            id="cluster-some-cluster-id"
+            role="menubar"
+            tabindex="0"
           >
             <div
-              class="Avatar rounded loadingAvatar"
-              style="width: 40px; height: 40px;"
+              class="Avatar rounded avatar"
+              style="width: 40px; height: 40px; background-color: red;"
             >
               ??
             </div>
             <div
-              class="loadingClusterName"
+              class="clusterName"
+              id="tooltip-cluster-some-cluster-id"
             />
+            <i
+              class="Icon dropdown material focusable"
+            >
+              <span
+                class="icon"
+                data-icon-name="arrow_drop_down"
+              >
+                arrow_drop_down
+              </span>
+            </i>
           </div>
           <div
             class="sidebarNav sidebar-active-status"

src/features/cluster/extension-api/__snapshots__/disable-sidebar-items-when-cluster-is-not-relevant.test.tsx.snap

@@ -3,44 +3,6 @@
 exports[`disable sidebar items when cluster is not relevant given extension should be enabled for the cluster renders 1`] = `
 <body>
   <div>
-    <div
-      class="Animate slide-right Drawer KubeObjectDetails flex column right enter leave"
-      style="--size: 725px; --enter-duration: 100ms; --leave-duration: 100ms;"
-    >
-      <div
-        class="drawer-wrapper flex column"
-      >
-        <div
-          class="drawer-title flex align-center"
-        >
-          <div
-            class="drawer-title-text flex gaps align-center"
-          >
-            
-          </div>
-          <i
-            class="Icon material interactive focusable"
-            tabindex="0"
-          >
-            <span
-              class="icon"
-              data-icon-name="close"
-            >
-              close
-            </span>
-          </i>
-          <div>
-            Close
-          </div>
-        </div>
-        <div
-          class="drawer-content flex column box grow"
-        />
-      </div>
-      <div
-        class="ResizingAnchor horizontal leading"
-      />
-    </div>
     <div
       class="Notifications flex column align-flex-end"
     />
@@ -57,16 +19,31 @@ exports[`disable sidebar items when cluster is not relevant given extension shou
         >
           <div
             class="SidebarCluster"
+            data-testid="sidebar-cluster-dropdown"
+            id="cluster-some-cluster-id"
+            role="menubar"
+            tabindex="0"
           >
             <div
-              class="Avatar rounded loadingAvatar"
-              style="width: 40px; height: 40px;"
+              class="Avatar rounded avatar"
+              style="width: 40px; height: 40px; background-color: red;"
             >
               ??
             </div>
             <div
-              class="loadingClusterName"
+              class="clusterName"
+              id="tooltip-cluster-some-cluster-id"
             />
+            <i
+              class="Icon dropdown material focusable"
+            >
+              <span
+                class="icon"
+                data-icon-name="arrow_drop_down"
+              >
+                arrow_drop_down
+              </span>
+            </i>
           </div>
           <div
             class="sidebarNav sidebar-active-status"
@@ -571,44 +548,6 @@ exports[`disable sidebar items when cluster is not relevant given extension shou
 exports[`disable sidebar items when cluster is not relevant given extension shouldn't be enabled for the cluster renders 1`] = `
 <body>
   <div>
-    <div
-      class="Animate slide-right Drawer KubeObjectDetails flex column right enter leave"
-      style="--size: 725px; --enter-duration: 100ms; --leave-duration: 100ms;"
-    >
-      <div
-        class="drawer-wrapper flex column"
-      >
-        <div
-          class="drawer-title flex align-center"
-        >
-          <div
-            class="drawer-title-text flex gaps align-center"
-          >
-            
-          </div>
-          <i
-            class="Icon material interactive focusable"
-            tabindex="0"
-          >
-            <span
-              class="icon"
-              data-icon-name="close"
-            >
-              close
-            </span>
-          </i>
-          <div>
-            Close
-          </div>
-        </div>
-        <div
-          class="drawer-content flex column box grow"
-        />
-      </div>
-      <div
-        class="ResizingAnchor horizontal leading"
-      />
-    </div>
     <div
       class="Notifications flex column align-flex-end"
     />
@@ -625,16 +564,31 @@ exports[`disable sidebar items when cluster is not relevant given extension shou
         >
           <div
             class="SidebarCluster"
+            data-testid="sidebar-cluster-dropdown"
+            id="cluster-some-cluster-id"
+            role="menubar"
+            tabindex="0"
           >
             <div
-              class="Avatar rounded loadingAvatar"
-              style="width: 40px; height: 40px;"
+              class="Avatar rounded avatar"
+              style="width: 40px; height: 40px; background-color: red;"
             >
               ??
             </div>
             <div
-              class="loadingClusterName"
+              class="clusterName"
+              id="tooltip-cluster-some-cluster-id"
             />
+            <i
+              class="Icon dropdown material focusable"
+            >
+              <span
+                class="icon"
+                data-icon-name="arrow_drop_down"
+              >
+                arrow_drop_down
+              </span>
+            </i>
           </div>
           <div
             class="sidebarNav sidebar-active-status"
@@ -1121,44 +1075,6 @@ exports[`disable sidebar items when cluster is not relevant given extension shou
 exports[`disable sidebar items when cluster is not relevant given not yet known if extension should be enabled for the cluster renders 1`] = `
 <body>
   <div>
-    <div
-      class="Animate slide-right Drawer KubeObjectDetails flex column right enter leave"
-      style="--size: 725px; --enter-duration: 100ms; --leave-duration: 100ms;"
-    >
-      <div
-        class="drawer-wrapper flex column"
-      >
-        <div
-          class="drawer-title flex align-center"
-        >
-          <div
-            class="drawer-title-text flex gaps align-center"
-          >
-            
-          </div>
-          <i
-            class="Icon material interactive focusable"
-            tabindex="0"
-          >
-            <span
-              class="icon"
-              data-icon-name="close"
-            >
-              close
-            </span>
-          </i>
-          <div>
-            Close
-          </div>
-        </div>
-        <div
-          class="drawer-content flex column box grow"
-        />
-      </div>
-      <div
-        class="ResizingAnchor horizontal leading"
-      />
-    </div>
     <div
       class="Notifications flex column align-flex-end"
     />
@@ -1175,16 +1091,31 @@ exports[`disable sidebar items when cluster is not relevant given not yet known
         >
           <div
             class="SidebarCluster"
+            data-testid="sidebar-cluster-dropdown"
+            id="cluster-some-cluster-id"
+            role="menubar"
+            tabindex="0"
           >
             <div
-              class="Avatar rounded loadingAvatar"
-              style="width: 40px; height: 40px;"
+              class="Avatar rounded avatar"
+              style="width: 40px; height: 40px; background-color: red;"
             >
               ??
             </div>
             <div
-              class="loadingClusterName"
+              class="clusterName"
+              id="tooltip-cluster-some-cluster-id"
             />
+            <i
+              class="Icon dropdown material focusable"
+            >
+              <span
+                class="icon"
+                data-icon-name="arrow_drop_down"
+              >
+                arrow_drop_down
+              </span>
+            </i>
           </div>
           <div
             class="sidebarNav sidebar-active-status"

src/features/cluster/kube-object-details/extension-api/__snapshots__/disable-kube-object-detail-items-when-cluster-is-not-relevant.test.tsx.snap

@@ -4,7 +4,7 @@ exports[`disable kube object detail items when cluster is not relevant given ext
 <body>
   <div>
     <div
-      class="Animate slide-right Drawer KubeObjectDetails flex column right enter leave"
+      class="Animate slide-right Drawer KubeObjectDetails flex column right enter"
       style="--size: 725px; --enter-duration: 100ms; --leave-duration: 100ms;"
     >
       <div
@@ -123,16 +123,31 @@ exports[`disable kube object detail items when cluster is not relevant given ext
         >
           <div
             class="SidebarCluster"
+            data-testid="sidebar-cluster-dropdown"
+            id="cluster-some-cluster-id"
+            role="menubar"
+            tabindex="0"
           >
             <div
-              class="Avatar rounded loadingAvatar"
-              style="width: 40px; height: 40px;"
+              class="Avatar rounded avatar"
+              style="width: 40px; height: 40px; background-color: red;"
             >
               ??
             </div>
             <div
-              class="loadingClusterName"
+              class="clusterName"
+              id="tooltip-cluster-some-cluster-id"
             />
+            <i
+              class="Icon dropdown material focusable"
+            >
+              <span
+                class="icon"
+                data-icon-name="arrow_drop_down"
+              >
+                arrow_drop_down
+              </span>
+            </i>
           </div>
           <div
             class="sidebarNav sidebar-active-status"
@@ -620,7 +635,7 @@ exports[`disable kube object detail items when cluster is not relevant given ext
 <body>
   <div>
     <div
-      class="Animate slide-right Drawer KubeObjectDetails flex column right enter leave"
+      class="Animate slide-right Drawer KubeObjectDetails flex column right enter"
       style="--size: 725px; --enter-duration: 100ms; --leave-duration: 100ms;"
     >
       <div
@@ -734,16 +749,31 @@ exports[`disable kube object detail items when cluster is not relevant given ext
         >
           <div
             class="SidebarCluster"
+            data-testid="sidebar-cluster-dropdown"
+            id="cluster-some-cluster-id"
+            role="menubar"
+            tabindex="0"
           >
             <div
-              class="Avatar rounded loadingAvatar"
-              style="width: 40px; height: 40px;"
+              class="Avatar rounded avatar"
+              style="width: 40px; height: 40px; background-color: red;"
             >
               ??
             </div>
             <div
-              class="loadingClusterName"
+              class="clusterName"
+              id="tooltip-cluster-some-cluster-id"
             />
+            <i
+              class="Icon dropdown material focusable"
+            >
+              <span
+                class="icon"
+                data-icon-name="arrow_drop_down"
+              >
+                arrow_drop_down
+              </span>
+            </i>
           </div>
           <div
             class="sidebarNav sidebar-active-status"
@@ -1231,7 +1261,7 @@ exports[`disable kube object detail items when cluster is not relevant given not
 <body>
   <div>
     <div
-      class="Animate slide-right Drawer KubeObjectDetails flex column right enter leave"
+      class="Animate slide-right Drawer KubeObjectDetails flex column right enter"
       style="--size: 725px; --enter-duration: 100ms; --leave-duration: 100ms;"
     >
       <div
@@ -1345,16 +1375,31 @@ exports[`disable kube object detail items when cluster is not relevant given not
         >
           <div
             class="SidebarCluster"
+            data-testid="sidebar-cluster-dropdown"
+            id="cluster-some-cluster-id"
+            role="menubar"
+            tabindex="0"
           >
             <div
-              class="Avatar rounded loadingAvatar"
-              style="width: 40px; height: 40px;"
+              class="Avatar rounded avatar"
+              style="width: 40px; height: 40px; background-color: red;"
             >
               ??
             </div>
             <div
-              class="loadingClusterName"
+              class="clusterName"
+              id="tooltip-cluster-some-cluster-id"
             />
+            <i
+              class="Icon dropdown material focusable"
+            >
+              <span
+                class="icon"
+                data-icon-name="arrow_drop_down"
+              >
+                arrow_drop_down
+              </span>
+            </i>
           </div>
           <div
             class="sidebarNav sidebar-active-status"

src/features/cluster/kube-object-details/extension-api/__snapshots__/reactively-hide-kube-object-detail-item.test.tsx.snap

@@ -4,7 +4,7 @@ exports[`reactively hide kube object detail item renders 1`] = `
 <body>
   <div>
     <div
-      class="Animate slide-right Drawer KubeObjectDetails flex column right enter leave"
+      class="Animate slide-right Drawer KubeObjectDetails flex column right enter"
       style="--size: 725px; --enter-duration: 100ms; --leave-duration: 100ms;"
     >
       <div
@@ -118,16 +118,31 @@ exports[`reactively hide kube object detail item renders 1`] = `
         >
           <div
             class="SidebarCluster"
+            data-testid="sidebar-cluster-dropdown"
+            id="cluster-some-cluster-id"
+            role="menubar"
+            tabindex="0"
           >
             <div
-              class="Avatar rounded loadingAvatar"
-              style="width: 40px; height: 40px;"
+              class="Avatar rounded avatar"
+              style="width: 40px; height: 40px; background-color: red;"
             >
               ??
             </div>
             <div
-              class="loadingClusterName"
+              class="clusterName"
+              id="tooltip-cluster-some-cluster-id"
             />
+            <i
+              class="Icon dropdown material focusable"
+            >
+              <span
+                class="icon"
+                data-icon-name="arrow_drop_down"
+              >
+                arrow_drop_down
+              </span>
+            </i>
           </div>
           <div
             class="sidebarNav sidebar-active-status"
@@ -615,7 +630,7 @@ exports[`reactively hide kube object detail item when the item is shown renders
 <body>
   <div>
     <div
-      class="Animate slide-right Drawer KubeObjectDetails flex column right enter leave"
+      class="Animate slide-right Drawer KubeObjectDetails flex column right enter"
       style="--size: 725px; --enter-duration: 100ms; --leave-duration: 100ms;"
     >
       <div
@@ -734,16 +749,31 @@ exports[`reactively hide kube object detail item when the item is shown renders
         >
           <div
             class="SidebarCluster"
+            data-testid="sidebar-cluster-dropdown"
+            id="cluster-some-cluster-id"
+            role="menubar"
+            tabindex="0"
           >
             <div
-              class="Avatar rounded loadingAvatar"
-              style="width: 40px; height: 40px;"
+              class="Avatar rounded avatar"
+              style="width: 40px; height: 40px; background-color: red;"
             >
               ??
             </div>
             <div
-              class="loadingClusterName"
+              class="clusterName"
+              id="tooltip-cluster-some-cluster-id"
             />
+            <i
+              class="Icon dropdown material focusable"
+            >
+              <span
+                class="icon"
+                data-icon-name="arrow_drop_down"
+              >
+                arrow_drop_down
+              </span>
+            </i>
           </div>
           <div
             class="sidebarNav sidebar-active-status"

src/features/cluster/kube-object-menu/extension-api/__snapshots__/disable-kube-object-menu-items-when-cluster-is-not-relevant.test.tsx.snap

@@ -3,44 +3,6 @@
 exports[`disable kube object menu items when cluster is not relevant given extension should be enabled for the cluster renders 1`] = `
 <body>
   <div>
-    <div
-      class="Animate slide-right Drawer KubeObjectDetails flex column right enter leave"
-      style="--size: 725px; --enter-duration: 100ms; --leave-duration: 100ms;"
-    >
-      <div
-        class="drawer-wrapper flex column"
-      >
-        <div
-          class="drawer-title flex align-center"
-        >
-          <div
-            class="drawer-title-text flex gaps align-center"
-          >
-            
-          </div>
-          <i
-            class="Icon material interactive focusable"
-            tabindex="0"
-          >
-            <span
-              class="icon"
-              data-icon-name="close"
-            >
-              close
-            </span>
-          </i>
-          <div>
-            Close
-          </div>
-        </div>
-        <div
-          class="drawer-content flex column box grow"
-        />
-      </div>
-      <div
-        class="ResizingAnchor horizontal leading"
-      />
-    </div>
     <div
       class="Notifications flex column align-flex-end"
     />
@@ -57,16 +19,31 @@ exports[`disable kube object menu items when cluster is not relevant given exten
         >
           <div
             class="SidebarCluster"
+            data-testid="sidebar-cluster-dropdown"
+            id="cluster-some-cluster-id"
+            role="menubar"
+            tabindex="0"
           >
             <div
-              class="Avatar rounded loadingAvatar"
-              style="width: 40px; height: 40px;"
+              class="Avatar rounded avatar"
+              style="width: 40px; height: 40px; background-color: red;"
             >
               ??
             </div>
             <div
-              class="loadingClusterName"
+              class="clusterName"
+              id="tooltip-cluster-some-cluster-id"
             />
+            <i
+              class="Icon dropdown material focusable"
+            >
+              <span
+                class="icon"
+                data-icon-name="arrow_drop_down"
+              >
+                arrow_drop_down
+              </span>
+            </i>
           </div>
           <div
             class="sidebarNav sidebar-active-status"
@@ -436,44 +413,6 @@ exports[`disable kube object menu items when cluster is not relevant given exten
 exports[`disable kube object menu items when cluster is not relevant given extension shouldn't be enabled for the cluster renders 1`] = `
 <body>
   <div>
-    <div
-      class="Animate slide-right Drawer KubeObjectDetails flex column right enter leave"
-      style="--size: 725px; --enter-duration: 100ms; --leave-duration: 100ms;"
-    >
-      <div
-        class="drawer-wrapper flex column"
-      >
-        <div
-          class="drawer-title flex align-center"
-        >
-          <div
-            class="drawer-title-text flex gaps align-center"
-          >
-            
-          </div>
-          <i
-            class="Icon material interactive focusable"
-            tabindex="0"
-          >
-            <span
-              class="icon"
-              data-icon-name="close"
-            >
-              close
-            </span>
-          </i>
-          <div>
-            Close
-          </div>
-        </div>
-        <div
-          class="drawer-content flex column box grow"
-        />
-      </div>
-      <div
-        class="ResizingAnchor horizontal leading"
-      />
-    </div>
     <div
       class="Notifications flex column align-flex-end"
     />
@@ -490,16 +429,31 @@ exports[`disable kube object menu items when cluster is not relevant given exten
         >
           <div
             class="SidebarCluster"
+            data-testid="sidebar-cluster-dropdown"
+            id="cluster-some-cluster-id"
+            role="menubar"
+            tabindex="0"
           >
             <div
-              class="Avatar rounded loadingAvatar"
-              style="width: 40px; height: 40px;"
+              class="Avatar rounded avatar"
+              style="width: 40px; height: 40px; background-color: red;"
             >
               ??
             </div>
             <div
-              class="loadingClusterName"
+              class="clusterName"
+              id="tooltip-cluster-some-cluster-id"
             />
+            <i
+              class="Icon dropdown material focusable"
+            >
+              <span
+                class="icon"
+                data-icon-name="arrow_drop_down"
+              >
+                arrow_drop_down
+              </span>
+            </i>
           </div>
           <div
             class="sidebarNav sidebar-active-status"
@@ -863,44 +817,6 @@ exports[`disable kube object menu items when cluster is not relevant given exten
 exports[`disable kube object menu items when cluster is not relevant given not yet known if extension should be enabled for the cluster renders 1`] = `
 <body>
   <div>
-    <div
-      class="Animate slide-right Drawer KubeObjectDetails flex column right enter leave"
-      style="--size: 725px; --enter-duration: 100ms; --leave-duration: 100ms;"
-    >
-      <div
-        class="drawer-wrapper flex column"
-      >
-        <div
-          class="drawer-title flex align-center"
-        >
-          <div
-            class="drawer-title-text flex gaps align-center"
-          >
-            
-          </div>
-          <i
-            class="Icon material interactive focusable"
-            tabindex="0"
-          >
-            <span
-              class="icon"
-              data-icon-name="close"
-            >
-              close
-            </span>
-          </i>
-          <div>
-            Close
-          </div>
-        </div>
-        <div
-          class="drawer-content flex column box grow"
-        />
-      </div>
-      <div
-        class="ResizingAnchor horizontal leading"
-      />
-    </div>
     <div
       class="Notifications flex column align-flex-end"
     />
@@ -917,16 +833,31 @@ exports[`disable kube object menu items when cluster is not relevant given not y
         >
           <div
             class="SidebarCluster"
+            data-testid="sidebar-cluster-dropdown"
+            id="cluster-some-cluster-id"
+            role="menubar"
+            tabindex="0"
           >
             <div
-              class="Avatar rounded loadingAvatar"
-              style="width: 40px; height: 40px;"
+              class="Avatar rounded avatar"
+              style="width: 40px; height: 40px; background-color: red;"
             >
               ??
             </div>
             <div
-              class="loadingClusterName"
+              class="clusterName"
+              id="tooltip-cluster-some-cluster-id"
             />
+            <i
+              class="Icon dropdown material focusable"
+            >
+              <span
+                class="icon"
+                data-icon-name="arrow_drop_down"
+              >
+                arrow_drop_down
+              </span>
+            </i>
           </div>
           <div
             class="sidebarNav sidebar-active-status"

src/features/cluster/kube-object-status-icon/__snapshots__/show-status-for-a-kube-object.test.tsx.snap

@@ -3,44 +3,6 @@
 exports[`show status for a kube object given application starts and in test page renders 1`] = `
 <body>
   <div>
-    <div
-      class="Animate slide-right Drawer KubeObjectDetails flex column right enter leave"
-      style="--size: 725px; --enter-duration: 100ms; --leave-duration: 100ms;"
-    >
-      <div
-        class="drawer-wrapper flex column"
-      >
-        <div
-          class="drawer-title flex align-center"
-        >
-          <div
-            class="drawer-title-text flex gaps align-center"
-          >
-            
-          </div>
-          <i
-            class="Icon material interactive focusable"
-            tabindex="0"
-          >
-            <span
-              class="icon"
-              data-icon-name="close"
-            >
-              close
-            </span>
-          </i>
-          <div>
-            Close
-          </div>
-        </div>
-        <div
-          class="drawer-content flex column box grow"
-        />
-      </div>
-      <div
-        class="ResizingAnchor horizontal leading"
-      />
-    </div>
     <div
       class="Notifications flex column align-flex-end"
     />
@@ -57,16 +19,31 @@ exports[`show status for a kube object given application starts and in test page
         >
           <div
             class="SidebarCluster"
+            data-testid="sidebar-cluster-dropdown"
+            id="cluster-some-cluster-id"
+            role="menubar"
+            tabindex="0"
           >
             <div
-              class="Avatar rounded loadingAvatar"
-              style="width: 40px; height: 40px;"
+              class="Avatar rounded avatar"
+              style="width: 40px; height: 40px; background-color: red;"
             >
               ??
             </div>
             <div
-              class="loadingClusterName"
+              class="clusterName"
+              id="tooltip-cluster-some-cluster-id"
             />
+            <i
+              class="Icon dropdown material focusable"
+            >
+              <span
+                class="icon"
+                data-icon-name="arrow_drop_down"
+              >
+                arrow_drop_down
+              </span>
+            </i>
           </div>
           <div
             class="sidebarNav sidebar-active-status"
@@ -425,44 +402,6 @@ exports[`show status for a kube object given application starts and in test page
 exports[`show status for a kube object given application starts and in test page when critical status emerges renders 1`] = `
 <body>
   <div>
-    <div
-      class="Animate slide-right Drawer KubeObjectDetails flex column right enter leave"
-      style="--size: 725px; --enter-duration: 100ms; --leave-duration: 100ms;"
-    >
-      <div
-        class="drawer-wrapper flex column"
-      >
-        <div
-          class="drawer-title flex align-center"
-        >
-          <div
-            class="drawer-title-text flex gaps align-center"
-          >
-            
-          </div>
-          <i
-            class="Icon material interactive focusable"
-            tabindex="0"
-          >
-            <span
-              class="icon"
-              data-icon-name="close"
-            >
-              close
-            </span>
-          </i>
-          <div>
-            Close
-          </div>
-        </div>
-        <div
-          class="drawer-content flex column box grow"
-        />
-      </div>
-      <div
-        class="ResizingAnchor horizontal leading"
-      />
-    </div>
     <div
       class="Notifications flex column align-flex-end"
     />
@@ -479,16 +418,31 @@ exports[`show status for a kube object given application starts and in test page
         >
           <div
             class="SidebarCluster"
+            data-testid="sidebar-cluster-dropdown"
+            id="cluster-some-cluster-id"
+            role="menubar"
+            tabindex="0"
           >
             <div
-              class="Avatar rounded loadingAvatar"
-              style="width: 40px; height: 40px;"
+              class="Avatar rounded avatar"
+              style="width: 40px; height: 40px; background-color: red;"
             >
               ??
             </div>
             <div
-              class="loadingClusterName"
+              class="clusterName"
+              id="tooltip-cluster-some-cluster-id"
             />
+            <i
+              class="Icon dropdown material focusable"
+            >
+              <span
+                class="icon"
+                data-icon-name="arrow_drop_down"
+              >
+                arrow_drop_down
+              </span>
+            </i>
           </div>
           <div
             class="sidebarNav sidebar-active-status"
@@ -887,44 +841,6 @@ exports[`show status for a kube object given application starts and in test page
 exports[`show status for a kube object given application starts and in test page when info status emerges renders 1`] = `
 <body>
   <div>
-    <div
-      class="Animate slide-right Drawer KubeObjectDetails flex column right enter leave"
-      style="--size: 725px; --enter-duration: 100ms; --leave-duration: 100ms;"
-    >
-      <div
-        class="drawer-wrapper flex column"
-      >
-        <div
-          class="drawer-title flex align-center"
-        >
-          <div
-            class="drawer-title-text flex gaps align-center"
-          >
-            
-          </div>
-          <i
-            class="Icon material interactive focusable"
-            tabindex="0"
-          >
-            <span
-              class="icon"
-              data-icon-name="close"
-            >
-              close
-            </span>
-          </i>
-          <div>
-            Close
-          </div>
-        </div>
-        <div
-          class="drawer-content flex column box grow"
-        />
-      </div>
-      <div
-        class="ResizingAnchor horizontal leading"
-      />
-    </div>
     <div
       class="Notifications flex column align-flex-end"
     />
@@ -941,16 +857,31 @@ exports[`show status for a kube object given application starts and in test page
         >
           <div
             class="SidebarCluster"
+            data-testid="sidebar-cluster-dropdown"
+            id="cluster-some-cluster-id"
+            role="menubar"
+            tabindex="0"
           >
             <div
-              class="Avatar rounded loadingAvatar"
-              style="width: 40px; height: 40px;"
+              class="Avatar rounded avatar"
+              style="width: 40px; height: 40px; background-color: red;"
             >
               ??
             </div>
             <div
-              class="loadingClusterName"
+              class="clusterName"
+              id="tooltip-cluster-some-cluster-id"
             />
+            <i
+              class="Icon dropdown material focusable"
+            >
+              <span
+                class="icon"
+                data-icon-name="arrow_drop_down"
+              >
+                arrow_drop_down
+              </span>
+            </i>
           </div>
           <div
             class="sidebarNav sidebar-active-status"
@@ -1349,44 +1280,6 @@ exports[`show status for a kube object given application starts and in test page
 exports[`show status for a kube object given application starts and in test page when status for irrelevant kube object api version emerges renders 1`] = `
 <body>
   <div>
-    <div
-      class="Animate slide-right Drawer KubeObjectDetails flex column right enter leave"
-      style="--size: 725px; --enter-duration: 100ms; --leave-duration: 100ms;"
-    >
-      <div
-        class="drawer-wrapper flex column"
-      >
-        <div
-          class="drawer-title flex align-center"
-        >
-          <div
-            class="drawer-title-text flex gaps align-center"
-          >
-            
-          </div>
-          <i
-            class="Icon material interactive focusable"
-            tabindex="0"
-          >
-            <span
-              class="icon"
-              data-icon-name="close"
-            >
-              close
-            </span>
-          </i>
-          <div>
-            Close
-          </div>
-        </div>
-        <div
-          class="drawer-content flex column box grow"
-        />
-      </div>
-      <div
-        class="ResizingAnchor horizontal leading"
-      />
-    </div>
     <div
       class="Notifications flex column align-flex-end"
     />
@@ -1403,16 +1296,31 @@ exports[`show status for a kube object given application starts and in test page
         >
           <div
             class="SidebarCluster"
+            data-testid="sidebar-cluster-dropdown"
+            id="cluster-some-cluster-id"
+            role="menubar"
+            tabindex="0"
           >
             <div
-              class="Avatar rounded loadingAvatar"
-              style="width: 40px; height: 40px;"
+              class="Avatar rounded avatar"
+              style="width: 40px; height: 40px; background-color: red;"
             >
               ??
             </div>
             <div
-              class="loadingClusterName"
+              class="clusterName"
+              id="tooltip-cluster-some-cluster-id"
             />
+            <i
+              class="Icon dropdown material focusable"
+            >
+              <span
+                class="icon"
+                data-icon-name="arrow_drop_down"
+              >
+                arrow_drop_down
+              </span>
+            </i>
           </div>
           <div
             class="sidebarNav sidebar-active-status"
@@ -1771,44 +1679,6 @@ exports[`show status for a kube object given application starts and in test page
 exports[`show status for a kube object given application starts and in test page when status for irrelevant kube object kind emerges renders 1`] = `
 <body>
   <div>
-    <div
-      class="Animate slide-right Drawer KubeObjectDetails flex column right enter leave"
-      style="--size: 725px; --enter-duration: 100ms; --leave-duration: 100ms;"
-    >
-      <div
-        class="drawer-wrapper flex column"
-      >
-        <div
-          class="drawer-title flex align-center"
-        >
-          <div
-            class="drawer-title-text flex gaps align-center"
-          >
-            
-          </div>
-          <i
-            class="Icon material interactive focusable"
-            tabindex="0"
-          >
-            <span
-              class="icon"
-              data-icon-name="close"
-            >
-              close
-            </span>
-          </i>
-          <div>
-            Close
-          </div>
-        </div>
-        <div
-          class="drawer-content flex column box grow"
-        />
-      </div>
-      <div
-        class="ResizingAnchor horizontal leading"
-      />
-    </div>
     <div
       class="Notifications flex column align-flex-end"
     />
@@ -1825,16 +1695,31 @@ exports[`show status for a kube object given application starts and in test page
         >
           <div
             class="SidebarCluster"
+            data-testid="sidebar-cluster-dropdown"
+            id="cluster-some-cluster-id"
+            role="menubar"
+            tabindex="0"
           >
             <div
-              class="Avatar rounded loadingAvatar"
-              style="width: 40px; height: 40px;"
+              class="Avatar rounded avatar"
+              style="width: 40px; height: 40px; background-color: red;"
             >
               ??
             </div>
             <div
-              class="loadingClusterName"
+              class="clusterName"
+              id="tooltip-cluster-some-cluster-id"
             />
+            <i
+              class="Icon dropdown material focusable"
+            >
+              <span
+                class="icon"
+                data-icon-name="arrow_drop_down"
+              >
+                arrow_drop_down
+              </span>
+            </i>
           </div>
           <div
             class="sidebarNav sidebar-active-status"
@@ -2193,44 +2078,6 @@ exports[`show status for a kube object given application starts and in test page
 exports[`show status for a kube object given application starts and in test page when warning status emerges renders 1`] = `
 <body>
   <div>
-    <div
-      class="Animate slide-right Drawer KubeObjectDetails flex column right enter leave"
-      style="--size: 725px; --enter-duration: 100ms; --leave-duration: 100ms;"
-    >
-      <div
-        class="drawer-wrapper flex column"
-      >
-        <div
-          class="drawer-title flex align-center"
-        >
-          <div
-            class="drawer-title-text flex gaps align-center"
-          >
-            
-          </div>
-          <i
-            class="Icon material interactive focusable"
-            tabindex="0"
-          >
-            <span
-              class="icon"
-              data-icon-name="close"
-            >
-              close
-            </span>
-          </i>
-          <div>
-            Close
-          </div>
-        </div>
-        <div
-          class="drawer-content flex column box grow"
-        />
-      </div>
-      <div
-        class="ResizingAnchor horizontal leading"
-      />
-    </div>
     <div
       class="Notifications flex column align-flex-end"
     />
@@ -2247,16 +2094,31 @@ exports[`show status for a kube object given application starts and in test page
         >
           <div
             class="SidebarCluster"
+            data-testid="sidebar-cluster-dropdown"
+            id="cluster-some-cluster-id"
+            role="menubar"
+            tabindex="0"
           >
             <div
-              class="Avatar rounded loadingAvatar"
-              style="width: 40px; height: 40px;"
+              class="Avatar rounded avatar"
+              style="width: 40px; height: 40px; background-color: red;"
             >
               ??
             </div>
             <div
-              class="loadingClusterName"
+              class="clusterName"
+              id="tooltip-cluster-some-cluster-id"
             />
+            <i
+              class="Icon dropdown material focusable"
+            >
+              <span
+                class="icon"
+                data-icon-name="arrow_drop_down"
+              >
+                arrow_drop_down
+              </span>
+            </i>
           </div>
           <div
             class="sidebarNav sidebar-active-status"

src/features/cluster/kube-object-status-icon/extension-api/__snapshots__/disable-kube-object-statuses-when-cluster-is-not-relevant.test.tsx.snap

@@ -3,44 +3,6 @@
 exports[`disable kube object statuses when cluster is not relevant given extension should be enabled for the cluster renders 1`] = `
 <body>
   <div>
-    <div
-      class="Animate slide-right Drawer KubeObjectDetails flex column right enter leave"
-      style="--size: 725px; --enter-duration: 100ms; --leave-duration: 100ms;"
-    >
-      <div
-        class="drawer-wrapper flex column"
-      >
-        <div
-          class="drawer-title flex align-center"
-        >
-          <div
-            class="drawer-title-text flex gaps align-center"
-          >
-            
-          </div>
-          <i
-            class="Icon material interactive focusable"
-            tabindex="0"
-          >
-            <span
-              class="icon"
-              data-icon-name="close"
-            >
-              close
-            </span>
-          </i>
-          <div>
-            Close
-          </div>
-        </div>
-        <div
-          class="drawer-content flex column box grow"
-        />
-      </div>
-      <div
-        class="ResizingAnchor horizontal leading"
-      />
-    </div>
     <div
       class="Notifications flex column align-flex-end"
     />
@@ -57,16 +19,31 @@ exports[`disable kube object statuses when cluster is not relevant given extensi
         >
           <div
             class="SidebarCluster"
+            data-testid="sidebar-cluster-dropdown"
+            id="cluster-some-cluster-id"
+            role="menubar"
+            tabindex="0"
           >
             <div
-              class="Avatar rounded loadingAvatar"
-              style="width: 40px; height: 40px;"
+              class="Avatar rounded avatar"
+              style="width: 40px; height: 40px; background-color: red;"
             >
               ??
             </div>
             <div
-              class="loadingClusterName"
+              class="clusterName"
+              id="tooltip-cluster-some-cluster-id"
             />
+            <i
+              class="Icon dropdown material focusable"
+            >
+              <span
+                class="icon"
+                data-icon-name="arrow_drop_down"
+              >
+                arrow_drop_down
+              </span>
+            </i>
           </div>
           <div
             class="sidebarNav sidebar-active-status"
@@ -465,44 +442,6 @@ exports[`disable kube object statuses when cluster is not relevant given extensi
 exports[`disable kube object statuses when cluster is not relevant given extension shouldn't be enabled for the cluster renders 1`] = `
 <body>
   <div>
-    <div
-      class="Animate slide-right Drawer KubeObjectDetails flex column right enter leave"
-      style="--size: 725px; --enter-duration: 100ms; --leave-duration: 100ms;"
-    >
-      <div
-        class="drawer-wrapper flex column"
-      >
-        <div
-          class="drawer-title flex align-center"
-        >
-          <div
-            class="drawer-title-text flex gaps align-center"
-          >
-            
-          </div>
-          <i
-            class="Icon material interactive focusable"
-            tabindex="0"
-          >
-            <span
-              class="icon"
-              data-icon-name="close"
-            >
-              close
-            </span>
-          </i>
-          <div>
-            Close
-          </div>
-        </div>
-        <div
-          class="drawer-content flex column box grow"
-        />
-      </div>
-      <div
-        class="ResizingAnchor horizontal leading"
-      />
-    </div>
     <div
       class="Notifications flex column align-flex-end"
     />
@@ -519,16 +458,31 @@ exports[`disable kube object statuses when cluster is not relevant given extensi
         >
           <div
             class="SidebarCluster"
+            data-testid="sidebar-cluster-dropdown"
+            id="cluster-some-cluster-id"
+            role="menubar"
+            tabindex="0"
           >
             <div
-              class="Avatar rounded loadingAvatar"
-              style="width: 40px; height: 40px;"
+              class="Avatar rounded avatar"
+              style="width: 40px; height: 40px; background-color: red;"
             >
               ??
             </div>
             <div
-              class="loadingClusterName"
+              class="clusterName"
+              id="tooltip-cluster-some-cluster-id"
             />
+            <i
+              class="Icon dropdown material focusable"
+            >
+              <span
+                class="icon"
+                data-icon-name="arrow_drop_down"
+              >
+                arrow_drop_down
+              </span>
+            </i>
           </div>
           <div
             class="sidebarNav sidebar-active-status"
@@ -887,44 +841,6 @@ exports[`disable kube object statuses when cluster is not relevant given extensi
 exports[`disable kube object statuses when cluster is not relevant given not yet known if extension should be enabled for the cluster renders 1`] = `
 <body>
   <div>
-    <div
-      class="Animate slide-right Drawer KubeObjectDetails flex column right enter leave"
-      style="--size: 725px; --enter-duration: 100ms; --leave-duration: 100ms;"
-    >
-      <div
-        class="drawer-wrapper flex column"
-      >
-        <div
-          class="drawer-title flex align-center"
-        >
-          <div
-            class="drawer-title-text flex gaps align-center"
-          >
-            
-          </div>
-          <i
-            class="Icon material interactive focusable"
-            tabindex="0"
-          >
-            <span
-              class="icon"
-              data-icon-name="close"
-            >
-              close
-            </span>
-          </i>
-          <div>
-            Close
-          </div>
-        </div>
-        <div
-          class="drawer-content flex column box grow"
-        />
-      </div>
-      <div
-        class="ResizingAnchor horizontal leading"
-      />
-    </div>
     <div
       class="Notifications flex column align-flex-end"
     />
@@ -941,16 +857,31 @@ exports[`disable kube object statuses when cluster is not relevant given not yet
         >
           <div
             class="SidebarCluster"
+            data-testid="sidebar-cluster-dropdown"
+            id="cluster-some-cluster-id"
+            role="menubar"
+            tabindex="0"
           >
             <div
-              class="Avatar rounded loadingAvatar"
-              style="width: 40px; height: 40px;"
+              class="Avatar rounded avatar"
+              style="width: 40px; height: 40px; background-color: red;"
             >
               ??
             </div>
             <div
-              class="loadingClusterName"
+              class="clusterName"
+              id="tooltip-cluster-some-cluster-id"
             />
+            <i
+              class="Icon dropdown material focusable"
+            >
+              <span
+                class="icon"
+                data-icon-name="arrow_drop_down"
+              >
+                arrow_drop_down
+              </span>
+            </i>
           </div>
           <div
             class="sidebarNav sidebar-active-status"

src/features/cluster/kube-object-status-icon/show-status-for-a-kube-object.test.tsx

@@ -5,7 +5,6 @@
 import { KubeObjectStatusLevel } from "../../../common/k8s-api/kube-object-status";
 import { KubeObject } from "../../../common/k8s-api/kube-object";
 import React from "react";
-import { testUsingFakeTime } from "../../../common/test-utils/use-fake-time";
 import type { DiContainer } from "@ogre-tools/injectable";
 import { getInjectable } from "@ogre-tools/injectable";
 import type { IAtom } from "mobx";
@@ -28,9 +27,11 @@ describe("show status for a kube object", () => {
   let criticalStatusIsShown: boolean;
 
   beforeEach(() => {
-    testUsingFakeTime("2015-10-21T07:28:00Z");
-
-    builder = getApplicationBuilder();
+    builder = getApplicationBuilder({
+      useFakeTime: {
+        dateTime: "2015-10-21T07:28:00Z",
+      },
+    });
 
     infoStatusIsShown = false;
 

src/features/cluster/namespaces/__snapshots__/edit-namespace-from-previously-opened-tab.test.tsx.snap

@@ -57,16 +57,31 @@ exports[`cluster/namespaces - edit namespaces from previously opened tab given t
         >
           <div
             class="SidebarCluster"
+            data-testid="sidebar-cluster-dropdown"
+            id="cluster-some-cluster-id"
+            role="menubar"
+            tabindex="0"
           >
             <div
-              class="Avatar rounded loadingAvatar"
-              style="width: 40px; height: 40px;"
+              class="Avatar rounded avatar"
+              style="width: 40px; height: 40px; background-color: red;"
             >
               ??
             </div>
             <div
-              class="loadingClusterName"
+              class="clusterName"
+              id="tooltip-cluster-some-cluster-id"
             />
+            <i
+              class="Icon dropdown material focusable"
+            >
+              <span
+                class="icon"
+                data-icon-name="arrow_drop_down"
+              >
+                arrow_drop_down
+              </span>
+            </i>
           </div>
           <div
             class="sidebarNav sidebar-active-status"
@@ -588,44 +603,6 @@ exports[`cluster/namespaces - edit namespaces from previously opened tab given t
 exports[`cluster/namespaces - edit namespaces from previously opened tab given tab was previously opened, when application is started when call for namespace resolves with namespace renders 1`] = `
 <body>
   <div>
-    <div
-      class="Animate slide-right Drawer KubeObjectDetails flex column right enter leave"
-      style="--size: 725px; --enter-duration: 100ms; --leave-duration: 100ms;"
-    >
-      <div
-        class="drawer-wrapper flex column"
-      >
-        <div
-          class="drawer-title flex align-center"
-        >
-          <div
-            class="drawer-title-text flex gaps align-center"
-          >
-            
-          </div>
-          <i
-            class="Icon material interactive focusable"
-            tabindex="0"
-          >
-            <span
-              class="icon"
-              data-icon-name="close"
-            >
-              close
-            </span>
-          </i>
-          <div>
-            Close
-          </div>
-        </div>
-        <div
-          class="drawer-content flex column box grow"
-        />
-      </div>
-      <div
-        class="ResizingAnchor horizontal leading"
-      />
-    </div>
     <div
       class="Notifications flex column align-flex-end"
     />
@@ -642,16 +619,31 @@ exports[`cluster/namespaces - edit namespaces from previously opened tab given t
         >
           <div
             class="SidebarCluster"
+            data-testid="sidebar-cluster-dropdown"
+            id="cluster-some-cluster-id"
+            role="menubar"
+            tabindex="0"
           >
             <div
-              class="Avatar rounded loadingAvatar"
-              style="width: 40px; height: 40px;"
+              class="Avatar rounded avatar"
+              style="width: 40px; height: 40px; background-color: red;"
             >
               ??
             </div>
             <div
-              class="loadingClusterName"
+              class="clusterName"
+              id="tooltip-cluster-some-cluster-id"
             />
+            <i
+              class="Icon dropdown material focusable"
+            >
+              <span
+                class="icon"
+                data-icon-name="arrow_drop_down"
+              >
+                arrow_drop_down
+              </span>
+            </i>
           </div>
           <div
             class="sidebarNav sidebar-active-status"

src/features/cluster/sidebar-and-tab-navigation-for-core.test.tsx

@@ -20,7 +20,7 @@ import writeJsonFileInjectable from "../../common/fs/write-json-file.injectable"
 import pathExistsInjectable from "../../common/fs/path-exists.injectable";
 import readJsonFileInjectable from "../../common/fs/read-json-file.injectable";
 import { navigateToRouteInjectionToken } from "../../common/front-end-routing/navigate-to-route-injection-token";
-import { advanceFakeTime, testUsingFakeTime } from "../../common/test-utils/use-fake-time";
+import { advanceFakeTime } from "../../common/test-utils/use-fake-time";
 import storageSaveDelayInjectable from "../../renderer/utils/create-storage/storage-save-delay.injectable";
 import { flushPromises } from "../../common/test-utils/flush-promises";
 
@@ -29,9 +29,11 @@ describe("cluster - sidebar and tab navigation for core", () => {
   let rendered: RenderResult;
 
   beforeEach(() => {
-    testUsingFakeTime("2015-10-21T07:28:00Z");
-
-    builder = getApplicationBuilder();
+    builder = getApplicationBuilder({
+      useFakeTime: {
+        dateTime: "2015-10-21T07:28:00Z",
+      },
+    });
 
     builder.setEnvironmentToClusterFrame();
 

src/features/cluster/sidebar-and-tab-navigation-for-extensions.test.tsx

@@ -15,7 +15,7 @@ import pathExistsInjectable from "../../common/fs/path-exists.injectable";
 import readJsonFileInjectable from "../../common/fs/read-json-file.injectable";
 import { navigateToRouteInjectionToken } from "../../common/front-end-routing/navigate-to-route-injection-token";
 import assert from "assert";
-import { advanceFakeTime, testUsingFakeTime } from "../../common/test-utils/use-fake-time";
+import { advanceFakeTime } from "../../common/test-utils/use-fake-time";
 import type { IObservableValue } from "mobx";
 import { runInAction, computed, observable } from "mobx";
 import storageSaveDelayInjectable from "../../renderer/utils/create-storage/storage-save-delay.injectable";
@@ -27,9 +27,11 @@ describe("cluster - sidebar and tab navigation for extensions", () => {
   let rendered: RenderResult;
 
   beforeEach(() => {
-    testUsingFakeTime("2015-10-21T07:28:00Z");
-
-    applicationBuilder = getApplicationBuilder();
+    applicationBuilder = getApplicationBuilder({
+      useFakeTime: {
+        dateTime: "2015-10-21T07:28:00Z",
+      },
+    });
 
     applicationBuilder.setEnvironmentToClusterFrame();
 

src/features/cluster/workloads/overview/extension-api/__snapshots__/disable-workloads-overview-details-when-cluster-is-not-relevant.test.tsx.snap

@@ -3,44 +3,6 @@
 exports[`disable workloads overview details when cluster is not relevant given extension should be enabled for the cluster renders 1`] = `
 <body>
   <div>
-    <div
-      class="Animate slide-right Drawer KubeObjectDetails flex column right enter leave"
-      style="--size: 725px; --enter-duration: 100ms; --leave-duration: 100ms;"
-    >
-      <div
-        class="drawer-wrapper flex column"
-      >
-        <div
-          class="drawer-title flex align-center"
-        >
-          <div
-            class="drawer-title-text flex gaps align-center"
-          >
-            
-          </div>
-          <i
-            class="Icon material interactive focusable"
-            tabindex="0"
-          >
-            <span
-              class="icon"
-              data-icon-name="close"
-            >
-              close
-            </span>
-          </i>
-          <div>
-            Close
-          </div>
-        </div>
-        <div
-          class="drawer-content flex column box grow"
-        />
-      </div>
-      <div
-        class="ResizingAnchor horizontal leading"
-      />
-    </div>
     <div
       class="Notifications flex column align-flex-end"
     />
@@ -57,16 +19,31 @@ exports[`disable workloads overview details when cluster is not relevant given e
         >
           <div
             class="SidebarCluster"
+            data-testid="sidebar-cluster-dropdown"
+            id="cluster-some-cluster-id"
+            role="menubar"
+            tabindex="0"
           >
             <div
-              class="Avatar rounded loadingAvatar"
-              style="width: 40px; height: 40px;"
+              class="Avatar rounded avatar"
+              style="width: 40px; height: 40px; background-color: red;"
             >
               ??
             </div>
             <div
-              class="loadingClusterName"
+              class="clusterName"
+              id="tooltip-cluster-some-cluster-id"
             />
+            <i
+              class="Icon dropdown material focusable"
+            >
+              <span
+                class="icon"
+                data-icon-name="arrow_drop_down"
+              >
+                arrow_drop_down
+              </span>
+            </i>
           </div>
           <div
             class="sidebarNav sidebar-active-status"
@@ -558,44 +535,6 @@ exports[`disable workloads overview details when cluster is not relevant given e
 exports[`disable workloads overview details when cluster is not relevant given extension shouldn't be enabled for the cluster renders 1`] = `
 <body>
   <div>
-    <div
-      class="Animate slide-right Drawer KubeObjectDetails flex column right enter leave"
-      style="--size: 725px; --enter-duration: 100ms; --leave-duration: 100ms;"
-    >
-      <div
-        class="drawer-wrapper flex column"
-      >
-        <div
-          class="drawer-title flex align-center"
-        >
-          <div
-            class="drawer-title-text flex gaps align-center"
-          >
-            
-          </div>
-          <i
-            class="Icon material interactive focusable"
-            tabindex="0"
-          >
-            <span
-              class="icon"
-              data-icon-name="close"
-            >
-              close
-            </span>
-          </i>
-          <div>
-            Close
-          </div>
-        </div>
-        <div
-          class="drawer-content flex column box grow"
-        />
-      </div>
-      <div
-        class="ResizingAnchor horizontal leading"
-      />
-    </div>
     <div
       class="Notifications flex column align-flex-end"
     />
@@ -612,16 +551,31 @@ exports[`disable workloads overview details when cluster is not relevant given e
         >
           <div
             class="SidebarCluster"
+            data-testid="sidebar-cluster-dropdown"
+            id="cluster-some-cluster-id"
+            role="menubar"
+            tabindex="0"
           >
             <div
-              class="Avatar rounded loadingAvatar"
-              style="width: 40px; height: 40px;"
+              class="Avatar rounded avatar"
+              style="width: 40px; height: 40px; background-color: red;"
             >
               ??
             </div>
             <div
-              class="loadingClusterName"
+              class="clusterName"
+              id="tooltip-cluster-some-cluster-id"
             />
+            <i
+              class="Icon dropdown material focusable"
+            >
+              <span
+                class="icon"
+                data-icon-name="arrow_drop_down"
+              >
+                arrow_drop_down
+              </span>
+            </i>
           </div>
           <div
             class="sidebarNav sidebar-active-status"
@@ -1108,44 +1062,6 @@ exports[`disable workloads overview details when cluster is not relevant given e
 exports[`disable workloads overview details when cluster is not relevant given not yet known if extension should be enabled for the cluster renders 1`] = `
 <body>
   <div>
-    <div
-      class="Animate slide-right Drawer KubeObjectDetails flex column right enter leave"
-      style="--size: 725px; --enter-duration: 100ms; --leave-duration: 100ms;"
-    >
-      <div
-        class="drawer-wrapper flex column"
-      >
-        <div
-          class="drawer-title flex align-center"
-        >
-          <div
-            class="drawer-title-text flex gaps align-center"
-          >
-            
-          </div>
-          <i
-            class="Icon material interactive focusable"
-            tabindex="0"
-          >
-            <span
-              class="icon"
-              data-icon-name="close"
-            >
-              close
-            </span>
-          </i>
-          <div>
-            Close
-          </div>
-        </div>
-        <div
-          class="drawer-content flex column box grow"
-        />
-      </div>
-      <div
-        class="ResizingAnchor horizontal leading"
-      />
-    </div>
     <div
       class="Notifications flex column align-flex-end"
     />
@@ -1162,16 +1078,31 @@ exports[`disable workloads overview details when cluster is not relevant given n
         >
           <div
             class="SidebarCluster"
+            data-testid="sidebar-cluster-dropdown"
+            id="cluster-some-cluster-id"
+            role="menubar"
+            tabindex="0"
           >
             <div
-              class="Avatar rounded loadingAvatar"
-              style="width: 40px; height: 40px;"
+              class="Avatar rounded avatar"
+              style="width: 40px; height: 40px; background-color: red;"
             >
               ??
             </div>
             <div
-              class="loadingClusterName"
+              class="clusterName"
+              id="tooltip-cluster-some-cluster-id"
             />
+            <i
+              class="Icon dropdown material focusable"
+            >
+              <span
+                class="icon"
+                data-icon-name="arrow_drop_down"
+              >
+                arrow_drop_down
+              </span>
+            </i>
           </div>
           <div
             class="sidebarNav sidebar-active-status"

src/features/command-pallet/__snapshots__/keyboard-shortcuts.test.tsx.snap

@@ -254,22 +254,42 @@ exports[`Command Pallet: keyboard shortcut tests when on linux renders 1`] = `
           class="HotbarItems flex column gaps"
         >
           <div
-            class="HotbarCell isDraggingOwner animateDown"
+            class="HotbarCell animateDown"
             index="0"
           >
             <div
               style="z-index: 12; position: absolute;"
             >
               <div
-                class="HotbarIcon contextMenuAvailable"
+                class="HotbarIcon"
               >
                 <div
-                  class="Avatar rounded disabled avatar"
-                  id="hotbarIcon-hotbar-icon-catalog-entity"
-                  style="width: 40px; height: 40px; background: rgb(5, 1, 130);"
+                  class="Avatar rounded avatar"
+                  data-testid="hotbar-icon-for-catalog-entity"
+                  id="hotbar-icon-for-catalog-entity"
+                  style="width: 40px; height: 40px; background-color: rgb(61, 144, 206);"
                 >
-                  Ca
+                  <i
+                    class="Icon material focusable"
+                  >
+                    <span
+                      class="icon"
+                      data-icon-name="view_list"
+                    >
+                      view_list
+                    </span>
+                  </i>
                 </div>
+                <i
+                  class="Icon badge material focusable"
+                >
+                  <span
+                    class="icon"
+                    data-icon-name="settings"
+                  >
+                    settings
+                  </span>
+                </i>
               </div>
             </div>
           </div>
@@ -630,22 +650,42 @@ exports[`Command Pallet: keyboard shortcut tests when on linux when pressing ESC
           class="HotbarItems flex column gaps"
         >
           <div
-            class="HotbarCell isDraggingOwner animateDown"
+            class="HotbarCell animateDown"
             index="0"
           >
             <div
               style="z-index: 12; position: absolute;"
             >
               <div
-                class="HotbarIcon contextMenuAvailable"
+                class="HotbarIcon"
               >
                 <div
-                  class="Avatar rounded disabled avatar"
-                  id="hotbarIcon-hotbar-icon-catalog-entity"
-                  style="width: 40px; height: 40px; background: rgb(5, 1, 130);"
+                  class="Avatar rounded avatar"
+                  data-testid="hotbar-icon-for-catalog-entity"
+                  id="hotbar-icon-for-catalog-entity"
+                  style="width: 40px; height: 40px; background-color: rgb(61, 144, 206);"
                 >
-                  Ca
+                  <i
+                    class="Icon material focusable"
+                  >
+                    <span
+                      class="icon"
+                      data-icon-name="view_list"
+                    >
+                      view_list
+                    </span>
+                  </i>
                 </div>
+                <i
+                  class="Icon badge material focusable"
+                >
+                  <span
+                    class="icon"
+                    data-icon-name="settings"
+                  >
+                    settings
+                  </span>
+                </i>
               </div>
             </div>
           </div>
@@ -1006,22 +1046,42 @@ exports[`Command Pallet: keyboard shortcut tests when on linux when pressing SHI
           class="HotbarItems flex column gaps"
         >
           <div
-            class="HotbarCell isDraggingOwner animateDown"
+            class="HotbarCell animateDown"
             index="0"
           >
             <div
               style="z-index: 12; position: absolute;"
             >
               <div
-                class="HotbarIcon contextMenuAvailable"
+                class="HotbarIcon"
               >
                 <div
-                  class="Avatar rounded disabled avatar"
-                  id="hotbarIcon-hotbar-icon-catalog-entity"
-                  style="width: 40px; height: 40px; background: rgb(5, 1, 130);"
+                  class="Avatar rounded avatar"
+                  data-testid="hotbar-icon-for-catalog-entity"
+                  id="hotbar-icon-for-catalog-entity"
+                  style="width: 40px; height: 40px; background-color: rgb(61, 144, 206);"
                 >
-                  Ca
+                  <i
+                    class="Icon material focusable"
+                  >
+                    <span
+                      class="icon"
+                      data-icon-name="view_list"
+                    >
+                      view_list
+                    </span>
+                  </i>
                 </div>
+                <i
+                  class="Icon badge material focusable"
+                >
+                  <span
+                    class="icon"
+                    data-icon-name="settings"
+                  >
+                    settings
+                  </span>
+                </i>
               </div>
             </div>
           </div>
@@ -1134,7 +1194,139 @@ exports[`Command Pallet: keyboard shortcut tests when on linux when pressing SHI
       <div
         class="CommandContainer"
         data-testid="command-container"
-      />
+      >
+        <div
+          class="Select theme-dark css-b62m3t-container"
+        >
+          <span
+            class="css-1f43avz-a11yText-A11yText"
+            id="react-select-command-palette-search-input-live-region"
+          >
+            <span
+              id="aria-selection"
+            >
+              option , selected.
+            </span>
+            <span
+              id="aria-context"
+            >
+               7 results available. Use Up and Down to choose options, press Enter to select the currently focused option, press Escape to exit the menu, press Tab to select the option and exit the menu.
+            </span>
+          </span>
+          <span
+            aria-atomic="false"
+            aria-live="polite"
+            aria-relevant="additions text"
+            class="css-1f43avz-a11yText-A11yText"
+          />
+          <div
+            class="Select__control Select__control--is-focused Select__control--menu-is-open css-t3ipsp-control"
+          >
+            <div
+              class="Select__value-container css-1fdsijx-ValueContainer"
+            >
+              <div
+                class="Select__placeholder css-1jqq78o-placeholder"
+                id="react-select-command-palette-search-input-placeholder"
+              >
+                Type a command or search…
+              </div>
+              <div
+                class="Select__input-container css-qbdosj-Input"
+                data-value=""
+              >
+                <input
+                  aria-autocomplete="list"
+                  aria-controls="react-select-command-palette-search-input-listbox"
+                  aria-describedby="react-select-command-palette-search-input-placeholder"
+                  aria-expanded="true"
+                  aria-haspopup="true"
+                  aria-owns="react-select-command-palette-search-input-listbox"
+                  autocapitalize="none"
+                  autocomplete="off"
+                  autocorrect="off"
+                  class="Select__input"
+                  id="command-palette-search-input"
+                  role="combobox"
+                  spellcheck="false"
+                  style="opacity: 1; width: 100%; grid-area: 1 / 2; min-width: 2px; border: 0px; margin: 0px; outline: 0; padding: 0px;"
+                  tabindex="0"
+                  type="text"
+                  value=""
+                />
+              </div>
+            </div>
+            <div
+              class="Select__indicators css-1hb7zxy-IndicatorsContainer"
+            />
+          </div>
+          <div
+            class="theme-dark command-palette-search-input-options Select__menu css-1nmdiq5-menu"
+            id="react-select-command-palette-search-input-listbox"
+          >
+            <div
+              class="Select__menu-list css-1n6sfyn-MenuList"
+            >
+              <div
+                aria-disabled="false"
+                class="Select__option css-10wo9uf-option"
+                id="react-select-command-palette-search-input-option-0"
+                tabindex="-1"
+              >
+                Preferences: Open
+              </div>
+              <div
+                aria-disabled="false"
+                class="Select__option css-10wo9uf-option"
+                id="react-select-command-palette-search-input-option-1"
+                tabindex="-1"
+              >
+                General/Welcome Page: View Settings
+              </div>
+              <div
+                aria-disabled="false"
+                class="Select__option css-10wo9uf-option"
+                id="react-select-command-palette-search-input-option-2"
+                tabindex="-1"
+              >
+                Hotbar: Switch ...
+              </div>
+              <div
+                aria-disabled="false"
+                class="Select__option css-10wo9uf-option"
+                id="react-select-command-palette-search-input-option-3"
+                tabindex="-1"
+              >
+                Hotbar: Add Hotbar ...
+              </div>
+              <div
+                aria-disabled="false"
+                class="Select__option css-10wo9uf-option"
+                id="react-select-command-palette-search-input-option-4"
+                tabindex="-1"
+              >
+                Hotbar: Remove Hotbar ...
+              </div>
+              <div
+                aria-disabled="false"
+                class="Select__option css-10wo9uf-option"
+                id="react-select-command-palette-search-input-option-5"
+                tabindex="-1"
+              >
+                Hotbar: Rename Hotbar ...
+              </div>
+              <div
+                aria-disabled="false"
+                class="Select__option css-10wo9uf-option"
+                id="react-select-command-palette-search-input-option-6"
+                tabindex="-1"
+              >
+                Catalog: Activate Entity ...
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
     </div>
   </div>
 </body>
@@ -1394,22 +1586,42 @@ exports[`Command Pallet: keyboard shortcut tests when on linux when pressing SHI
           class="HotbarItems flex column gaps"
         >
           <div
-            class="HotbarCell isDraggingOwner animateDown"
+            class="HotbarCell animateDown"
             index="0"
           >
             <div
               style="z-index: 12; position: absolute;"
             >
               <div
-                class="HotbarIcon contextMenuAvailable"
+                class="HotbarIcon"
               >
                 <div
-                  class="Avatar rounded disabled avatar"
-                  id="hotbarIcon-hotbar-icon-catalog-entity"
-                  style="width: 40px; height: 40px; background: rgb(5, 1, 130);"
+                  class="Avatar rounded avatar"
+                  data-testid="hotbar-icon-for-catalog-entity"
+                  id="hotbar-icon-for-catalog-entity"
+                  style="width: 40px; height: 40px; background-color: rgb(61, 144, 206);"
                 >
-                  Ca
+                  <i
+                    class="Icon material focusable"
+                  >
+                    <span
+                      class="icon"
+                      data-icon-name="view_list"
+                    >
+                      view_list
+                    </span>
+                  </i>
                 </div>
+                <i
+                  class="Icon badge material focusable"
+                >
+                  <span
+                    class="icon"
+                    data-icon-name="settings"
+                  >
+                    settings
+                  </span>
+                </i>
               </div>
             </div>
           </div>
@@ -1679,22 +1891,42 @@ exports[`Command Pallet: keyboard shortcut tests when on macOS renders 1`] = `
           class="HotbarItems flex column gaps"
         >
           <div
-            class="HotbarCell isDraggingOwner animateDown"
+            class="HotbarCell animateDown"
             index="0"
           >
             <div
               style="z-index: 12; position: absolute;"
             >
               <div
-                class="HotbarIcon contextMenuAvailable"
+                class="HotbarIcon"
               >
                 <div
-                  class="Avatar rounded disabled avatar"
-                  id="hotbarIcon-hotbar-icon-catalog-entity"
-                  style="width: 40px; height: 40px; background: rgb(5, 1, 130);"
+                  class="Avatar rounded avatar"
+                  data-testid="hotbar-icon-for-catalog-entity"
+                  id="hotbar-icon-for-catalog-entity"
+                  style="width: 40px; height: 40px; background-color: rgb(61, 144, 206);"
                 >
-                  Ca
+                  <i
+                    class="Icon material focusable"
+                  >
+                    <span
+                      class="icon"
+                      data-icon-name="view_list"
+                    >
+                      view_list
+                    </span>
+                  </i>
                 </div>
+                <i
+                  class="Icon badge material focusable"
+                >
+                  <span
+                    class="icon"
+                    data-icon-name="settings"
+                  >
+                    settings
+                  </span>
+                </i>
               </div>
             </div>
           </div>
@@ -1964,22 +2196,42 @@ exports[`Command Pallet: keyboard shortcut tests when on macOS when pressing ESC
           class="HotbarItems flex column gaps"
         >
           <div
-            class="HotbarCell isDraggingOwner animateDown"
+            class="HotbarCell animateDown"
             index="0"
           >
             <div
               style="z-index: 12; position: absolute;"
             >
               <div
-                class="HotbarIcon contextMenuAvailable"
+                class="HotbarIcon"
               >
                 <div
-                  class="Avatar rounded disabled avatar"
-                  id="hotbarIcon-hotbar-icon-catalog-entity"
-                  style="width: 40px; height: 40px; background: rgb(5, 1, 130);"
+                  class="Avatar rounded avatar"
+                  data-testid="hotbar-icon-for-catalog-entity"
+                  id="hotbar-icon-for-catalog-entity"
+                  style="width: 40px; height: 40px; background-color: rgb(61, 144, 206);"
                 >
-                  Ca
+                  <i
+                    class="Icon material focusable"
+                  >
+                    <span
+                      class="icon"
+                      data-icon-name="view_list"
+                    >
+                      view_list
+                    </span>
+                  </i>
                 </div>
+                <i
+                  class="Icon badge material focusable"
+                >
+                  <span
+                    class="icon"
+                    data-icon-name="settings"
+                  >
+                    settings
+                  </span>
+                </i>
               </div>
             </div>
           </div>
@@ -2249,22 +2501,42 @@ exports[`Command Pallet: keyboard shortcut tests when on macOS when pressing SHI
           class="HotbarItems flex column gaps"
         >
           <div
-            class="HotbarCell isDraggingOwner animateDown"
+            class="HotbarCell animateDown"
             index="0"
           >
             <div
               style="z-index: 12; position: absolute;"
             >
               <div
-                class="HotbarIcon contextMenuAvailable"
+                class="HotbarIcon"
               >
                 <div
-                  class="Avatar rounded disabled avatar"
-                  id="hotbarIcon-hotbar-icon-catalog-entity"
-                  style="width: 40px; height: 40px; background: rgb(5, 1, 130);"
+                  class="Avatar rounded avatar"
+                  data-testid="hotbar-icon-for-catalog-entity"
+                  id="hotbar-icon-for-catalog-entity"
+                  style="width: 40px; height: 40px; background-color: rgb(61, 144, 206);"
                 >
-                  Ca
+                  <i
+                    class="Icon material focusable"
+                  >
+                    <span
+                      class="icon"
+                      data-icon-name="view_list"
+                    >
+                      view_list
+                    </span>
+                  </i>
                 </div>
+                <i
+                  class="Icon badge material focusable"
+                >
+                  <span
+                    class="icon"
+                    data-icon-name="settings"
+                  >
+                    settings
+                  </span>
+                </i>
               </div>
             </div>
           </div>
@@ -2377,7 +2649,91 @@ exports[`Command Pallet: keyboard shortcut tests when on macOS when pressing SHI
       <div
         class="CommandContainer"
         data-testid="command-container"
-      />
+      >
+        <div
+          class="Select theme-dark css-b62m3t-container"
+        >
+          <span
+            class="css-1f43avz-a11yText-A11yText"
+            id="react-select-command-palette-search-input-live-region"
+          />
+          <span
+            aria-atomic="false"
+            aria-live="polite"
+            aria-relevant="additions text"
+            class="css-1f43avz-a11yText-A11yText"
+          >
+            <span
+              id="aria-selection"
+            />
+            <span
+              id="aria-context"
+            >
+              option Preferences: Open focused, 1 of 2. 2 results available for search term P. Use Up and Down to choose options, press Enter to select the currently focused option, press Escape to exit the menu, press Tab to select the option and exit the menu.
+            </span>
+          </span>
+          <div
+            class="Select__control Select__control--is-focused Select__control--menu-is-open css-t3ipsp-control"
+          >
+            <div
+              class="Select__value-container css-1fdsijx-ValueContainer"
+            >
+              <div
+                class="Select__input-container css-166bipr-Input"
+                data-value="P"
+              >
+                <input
+                  aria-autocomplete="list"
+                  aria-controls="react-select-command-palette-search-input-listbox"
+                  aria-describedby="react-select-command-palette-search-input-placeholder"
+                  aria-expanded="true"
+                  aria-haspopup="true"
+                  aria-owns="react-select-command-palette-search-input-listbox"
+                  autocapitalize="none"
+                  autocomplete="off"
+                  autocorrect="off"
+                  class="Select__input"
+                  id="command-palette-search-input"
+                  role="combobox"
+                  spellcheck="false"
+                  style="opacity: 1; width: 100%; grid-area: 1 / 2; min-width: 2px; border: 0px; margin: 0px; outline: 0; padding: 0px;"
+                  tabindex="0"
+                  type="text"
+                  value="P"
+                />
+              </div>
+            </div>
+            <div
+              class="Select__indicators css-1hb7zxy-IndicatorsContainer"
+            />
+          </div>
+          <div
+            class="theme-dark command-palette-search-input-options Select__menu css-1nmdiq5-menu"
+            id="react-select-command-palette-search-input-listbox"
+          >
+            <div
+              class="Select__menu-list css-1n6sfyn-MenuList"
+            >
+              <div
+                aria-disabled="false"
+                class="Select__option Select__option--is-focused css-d7l1ni-option"
+                id="react-select-command-palette-search-input-option-0"
+                tabindex="-1"
+              >
+                Preferences: Open
+              </div>
+              <div
+                aria-disabled="false"
+                class="Select__option css-10wo9uf-option"
+                id="react-select-command-palette-search-input-option-1"
+                tabindex="-1"
+              >
+                General/Welcome Page: View Settings
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
     </div>
   </div>
 </body>
@@ -2546,22 +2902,42 @@ exports[`Command Pallet: keyboard shortcut tests when on macOS when pressing SHI
           class="HotbarItems flex column gaps"
         >
           <div
-            class="HotbarCell isDraggingOwner animateDown"
+            class="HotbarCell animateDown"
             index="0"
           >
             <div
               style="z-index: 12; position: absolute;"
             >
               <div
-                class="HotbarIcon contextMenuAvailable"
+                class="HotbarIcon"
               >
                 <div
-                  class="Avatar rounded disabled avatar"
-                  id="hotbarIcon-hotbar-icon-catalog-entity"
-                  style="width: 40px; height: 40px; background: rgb(5, 1, 130);"
+                  class="Avatar rounded avatar"
+                  data-testid="hotbar-icon-for-catalog-entity"
+                  id="hotbar-icon-for-catalog-entity"
+                  style="width: 40px; height: 40px; background-color: rgb(61, 144, 206);"
                 >
-                  Ca
+                  <i
+                    class="Icon material focusable"
+                  >
+                    <span
+                      class="icon"
+                      data-icon-name="view_list"
+                    >
+                      view_list
+                    </span>
+                  </i>
                 </div>
+                <i
+                  class="Icon badge material focusable"
+                >
+                  <span
+                    class="icon"
+                    data-icon-name="settings"
+                  >
+                    settings
+                  </span>
+                </i>
               </div>
             </div>
           </div>

src/features/command-pallet/keyboard-shortcuts.test.tsx

@@ -13,7 +13,11 @@ describe("Command Pallet: keyboard shortcut tests", () => {
   let rendered: RenderResult;
 
   beforeEach(async () => {
-    builder = getApplicationBuilder();
+    builder = getApplicationBuilder({
+      useFakeTime: {
+        autoAdvance: true,
+      },
+    });
   });
 
   describe("when on macOS", () => {
@@ -36,8 +40,8 @@ describe("Command Pallet: keyboard shortcut tests", () => {
     });
 
     describe("when pressing ESC", () => {
-      beforeEach(() => {
-        userEvent.keyboard("{Escape}");
+      beforeEach(async () => {
+        await userEvent.keyboard("{Escape}");
       });
 
       it("renders", () => {
@@ -52,8 +56,8 @@ describe("Command Pallet: keyboard shortcut tests", () => {
     });
 
     describe("when pressing SHIFT+CMD+P", () => {
-      beforeEach(() => {
-        userEvent.keyboard("{Shift>}{Meta>}P{/Meta}{/Shift}");
+      beforeEach(async () => {
+        await userEvent.keyboard("{Shift>}{Meta>}P{/Meta}{/Shift}");
       });
 
       it("renders", () => {
@@ -67,8 +71,8 @@ describe("Command Pallet: keyboard shortcut tests", () => {
       });
 
       describe("when pressing ESC", () => {
-        beforeEach(() => {
-          userEvent.keyboard("{Escape}");
+        beforeEach(async () => {
+          await userEvent.keyboard("{Escape}");
         });
 
         it("renders", () => {
@@ -104,8 +108,8 @@ describe("Command Pallet: keyboard shortcut tests", () => {
     });
 
     describe("when pressing ESC", () => {
-      beforeEach(() => {
-        userEvent.keyboard("{Escape}");
+      beforeEach(async () => {
+        await userEvent.keyboard("{Escape}");
       });
 
       it("renders", () => {
@@ -120,8 +124,8 @@ describe("Command Pallet: keyboard shortcut tests", () => {
     });
 
     describe("when pressing SHIFT+CTRL+P", () => {
-      beforeEach(() => {
-        userEvent.keyboard("{Shift>}{Control>}P{/Control}{/Shift}");
+      beforeEach(async () => {
+        await userEvent.keyboard("{Shift>}{Control>}P{/Control}{/Shift}");
       });
 
       it("renders", () => {
@@ -135,8 +139,8 @@ describe("Command Pallet: keyboard shortcut tests", () => {
       });
 
       describe("when pressing ESC", () => {
-        beforeEach(() => {
-          userEvent.keyboard("{Escape}");
+        beforeEach(async () => {
+          await userEvent.keyboard("{Escape}");
         });
 
         it("renders", () => {

src/features/entity-settings/__snapshots__/limit-short-name-length.test.tsx.snap

@@ -0,0 +1,448 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`limit short-name length tests when navigating to entity settings for #short-name renders 1`] = `
+<body>
+  <div>
+    <div
+      class="ClusterManager"
+    >
+      <div
+        class="topBar"
+      >
+        <div
+          class="items"
+        >
+          <div
+            class="preventedDragging"
+          >
+            <i
+              class="Icon material interactive focusable"
+              data-testid="home-button"
+              tabindex="0"
+            >
+              <span
+                class="icon"
+                data-icon-name="home"
+              >
+                home
+              </span>
+            </i>
+          </div>
+          <div
+            class="size-sm"
+          />
+          <div
+            class="preventedDragging"
+          >
+            <i
+              class="Icon material interactive disabled focusable"
+              data-testid="history-back"
+            >
+              <span
+                class="icon"
+                data-icon-name="arrow_back"
+              >
+                arrow_back
+              </span>
+            </i>
+          </div>
+          <div
+            class="size-sm"
+          />
+          <div
+            class="preventedDragging"
+          >
+            <i
+              class="Icon material interactive disabled focusable"
+              data-testid="history-forward"
+            >
+              <span
+                class="icon"
+                data-icon-name="arrow_forward"
+              >
+                arrow_forward
+              </span>
+            </i>
+          </div>
+          <div
+            class="separator"
+          />
+        </div>
+      </div>
+      <main>
+        <div
+          id="lens-views"
+        />
+        <div
+          class="SettingLayout showNavigation"
+          data-testid="entity-settings"
+        >
+          <nav
+            class="sidebarRegion"
+          >
+            <div
+              class="sidebar"
+            >
+              <div
+                class="avatarAndName"
+              >
+                <div
+                  class="Avatar rounded settingsAvatar"
+                  style="width: 40px; height: 40px; background-color: red;"
+                >
+                  skc
+                </div>
+                <div
+                  class="entityName"
+                >
+                  some-kubernetes-cluster
+                </div>
+              </div>
+              <div
+                class="Tabs flex column"
+              >
+                <hr />
+                <div
+                  class="header"
+                >
+                  Settings
+                </div>
+                <div
+                  class="Tab flex gaps align-center"
+                  data-testid="proxy-tab"
+                  role="tab"
+                  tabindex="0"
+                >
+                  <div
+                    class="label"
+                  >
+                    Proxy
+                  </div>
+                </div>
+                <div
+                  class="Tab flex gaps align-center active"
+                  data-testid="short-name-tab"
+                  role="tab"
+                  tabindex="0"
+                >
+                  <div
+                    class="label"
+                  >
+                    Short Name
+                  </div>
+                </div>
+                <div
+                  class="Tab flex gaps align-center"
+                  data-testid="terminal-tab"
+                  role="tab"
+                  tabindex="0"
+                >
+                  <div
+                    class="label"
+                  >
+                    Terminal
+                  </div>
+                </div>
+                <div
+                  class="Tab flex gaps align-center"
+                  data-testid="namespace-tab"
+                  role="tab"
+                  tabindex="0"
+                >
+                  <div
+                    class="label"
+                  >
+                    Namespace
+                  </div>
+                </div>
+                <div
+                  class="Tab flex gaps align-center"
+                  data-testid="metrics-tab"
+                  role="tab"
+                  tabindex="0"
+                >
+                  <div
+                    class="label"
+                  >
+                    Metrics
+                  </div>
+                </div>
+                <div
+                  class="Tab flex gaps align-center"
+                  data-testid="node-shell-tab"
+                  role="tab"
+                  tabindex="0"
+                >
+                  <div
+                    class="label"
+                  >
+                    Node Shell
+                  </div>
+                </div>
+              </div>
+            </div>
+          </nav>
+          <div
+            class="contentRegion"
+            id="ScrollSpyRoot"
+          >
+            <div
+              class="content"
+            >
+              <section>
+                <h2
+                  data-testid="short-name-header"
+                >
+                  Short Name
+                </h2>
+                <section>
+                  <section
+                    data-testid="short-name-settings-section"
+                  >
+                    <section>
+                      <div
+                        class="SubTitle"
+                      >
+                        Entity Short Name
+                         
+                      </div>
+                      <div
+                        class="Input theme round black"
+                      >
+                        <label
+                          class="input-area flex gaps align-center"
+                          id=""
+                        >
+                          <input
+                            class="input box grow"
+                            data-testid="short-name-setting-input"
+                            placeholder="skc"
+                            spellcheck="false"
+                            value=""
+                          />
+                        </label>
+                        <div
+                          class="input-info flex gaps"
+                        />
+                      </div>
+                      <small
+                        class="hint"
+                      >
+                        The text for entity icons. By default it is calculated from the entity name.
+                      </small>
+                    </section>
+                  </section>
+                </section>
+              </section>
+            </div>
+            <div
+              class="toolsRegion"
+            >
+              <div
+                class="fixed top-[60px]"
+              >
+                <div>
+                  <div
+                    aria-label="Close"
+                    class="closeButton"
+                    role="button"
+                  >
+                    <i
+                      class="Icon icon material focusable"
+                    >
+                      <span
+                        class="icon"
+                        data-icon-name="close"
+                      >
+                        close
+                      </span>
+                    </i>
+                  </div>
+                  <div
+                    aria-hidden="true"
+                    class="esc"
+                  >
+                    ESC
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </main>
+      <div
+        class="HotbarMenu flex column"
+      >
+        <div
+          class="HotbarItems flex column gaps"
+        >
+          <div
+            class="HotbarCell animateDown"
+            index="0"
+          >
+            <div
+              style="z-index: 12; position: absolute;"
+            >
+              <div
+                class="HotbarIcon"
+              >
+                <div
+                  class="Avatar rounded avatar"
+                  data-testid="hotbar-icon-for-catalog-entity"
+                  id="hotbar-icon-for-catalog-entity"
+                  style="width: 40px; height: 40px; background-color: rgb(61, 144, 206);"
+                >
+                  <i
+                    class="Icon material focusable"
+                  >
+                    <span
+                      class="icon"
+                      data-icon-name="view_list"
+                    >
+                      view_list
+                    </span>
+                  </i>
+                </div>
+                <i
+                  class="Icon badge material focusable"
+                >
+                  <span
+                    class="icon"
+                    data-icon-name="settings"
+                  >
+                    settings
+                  </span>
+                </i>
+              </div>
+            </div>
+          </div>
+          <div
+            class="HotbarCell animateDown"
+            index="1"
+          >
+            <div
+              style="z-index: 11; position: absolute;"
+            >
+              <div
+                class="HotbarIcon"
+              >
+                <div
+                  class="Avatar rounded avatar"
+                  data-testid="hotbar-icon-for-some-entity-id"
+                  id="hotbar-icon-for-some-entity-id"
+                  style="width: 40px; height: 40px; background-color: red;"
+                >
+                  skc
+                </div>
+                <div
+                  class="led"
+                />
+                <i
+                  class="Icon badge focusable"
+                >
+                  <span
+                    class="icon"
+                    data-icon-name=""
+                  />
+                </i>
+              </div>
+            </div>
+          </div>
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="2"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="3"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="4"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="5"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="6"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="7"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="8"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="9"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="10"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="11"
+          />
+        </div>
+        <div
+          class="HotbarSelector"
+        >
+          <i
+            class="Icon Icon previous material interactive focusable"
+            tabindex="0"
+          >
+            <span
+              class="icon"
+              data-icon-name="arrow_left"
+            >
+              arrow_left
+            </span>
+          </i>
+          <div
+            class="HotbarIndex"
+          >
+            <div
+              class="badge Badge small clickable"
+              id="hotbarIndex"
+            >
+              1
+            </div>
+          </div>
+          <i
+            class="Icon material interactive focusable"
+            tabindex="0"
+          >
+            <span
+              class="icon"
+              data-icon-name="arrow_right"
+            >
+              arrow_right
+            </span>
+          </i>
+        </div>
+      </div>
+      <div
+        class="StatusBar"
+        data-testid="status-bar"
+      >
+        <div
+          class="leftSide"
+          data-testid="status-bar-left"
+        />
+        <div
+          class="rightSide"
+          data-testid="status-bar-right"
+        />
+      </div>
+    </div>
+    <div
+      class="Notifications flex column align-flex-end"
+    />
+  </div>
+</body>
+`;

src/features/entity-settings/__snapshots__/showing-settings-for-correct-entity.test.tsx.snap

@@ -163,22 +163,42 @@ exports[`Showing correct entity settings renders 1`] = `
           class="HotbarItems flex column gaps"
         >
           <div
-            class="HotbarCell isDraggingOwner animateDown"
+            class="HotbarCell animateDown"
             index="0"
           >
             <div
               style="z-index: 12; position: absolute;"
             >
               <div
-                class="HotbarIcon contextMenuAvailable"
+                class="HotbarIcon"
               >
                 <div
-                  class="Avatar rounded disabled avatar"
-                  id="hotbarIcon-hotbar-icon-catalog-entity"
-                  style="width: 40px; height: 40px; background: rgb(5, 1, 130);"
+                  class="Avatar rounded avatar"
+                  data-testid="hotbar-icon-for-catalog-entity"
+                  id="hotbar-icon-for-catalog-entity"
+                  style="width: 40px; height: 40px; background-color: rgb(61, 144, 206);"
                 >
-                  Ca
+                  <i
+                    class="Icon material focusable"
+                  >
+                    <span
+                      class="icon"
+                      data-icon-name="view_list"
+                    >
+                      view_list
+                    </span>
+                  </i>
                 </div>
+                <i
+                  class="Icon badge material focusable"
+                >
+                  <span
+                    class="icon"
+                    data-icon-name="settings"
+                  >
+                    settings
+                  </span>
+                </i>
               </div>
             </div>
           </div>
@@ -373,7 +393,7 @@ exports[`Showing correct entity settings when navigating to local cluster entity
               >
                 <div
                   class="Avatar rounded settingsAvatar"
-                  style="width: 40px; height: 40px; background: rgb(83, 137, 8);"
+                  style="width: 40px; height: 40px; background-color: red;"
                 >
                   slk
                 </div>
@@ -416,6 +436,18 @@ exports[`Showing correct entity settings when navigating to local cluster entity
                     Proxy
                   </div>
                 </div>
+                <div
+                  class="Tab flex gaps align-center"
+                  data-testid="short-name-tab"
+                  role="tab"
+                  tabindex="0"
+                >
+                  <div
+                    class="label"
+                  >
+                    Short Name
+                  </div>
+                </div>
                 <div
                   class="Tab flex gaps align-center"
                   data-testid="terminal-tab"
@@ -525,22 +557,42 @@ exports[`Showing correct entity settings when navigating to local cluster entity
           class="HotbarItems flex column gaps"
         >
           <div
-            class="HotbarCell isDraggingOwner animateDown"
+            class="HotbarCell animateDown"
             index="0"
           >
             <div
               style="z-index: 12; position: absolute;"
             >
               <div
-                class="HotbarIcon contextMenuAvailable"
+                class="HotbarIcon"
               >
                 <div
-                  class="Avatar rounded disabled avatar"
-                  id="hotbarIcon-hotbar-icon-catalog-entity"
-                  style="width: 40px; height: 40px; background: rgb(5, 1, 130);"
+                  class="Avatar rounded avatar"
+                  data-testid="hotbar-icon-for-catalog-entity"
+                  id="hotbar-icon-for-catalog-entity"
+                  style="width: 40px; height: 40px; background-color: rgb(61, 144, 206);"
                 >
-                  Ca
+                  <i
+                    class="Icon material focusable"
+                  >
+                    <span
+                      class="icon"
+                      data-icon-name="view_list"
+                    >
+                      view_list
+                    </span>
+                  </i>
                 </div>
+                <i
+                  class="Icon badge material focusable"
+                >
+                  <span
+                    class="icon"
+                    data-icon-name="settings"
+                  >
+                    settings
+                  </span>
+                </i>
               </div>
             </div>
           </div>
@@ -735,7 +787,7 @@ exports[`Showing correct entity settings when navigating to non-local cluster en
               >
                 <div
                   class="Avatar rounded settingsAvatar"
-                  style="width: 40px; height: 40px; background: rgb(9, 124, 92);"
+                  style="width: 40px; height: 40px; background-color: red;"
                 >
                   skc
                 </div>
@@ -766,6 +818,18 @@ exports[`Showing correct entity settings when navigating to non-local cluster en
                     Proxy
                   </div>
                 </div>
+                <div
+                  class="Tab flex gaps align-center"
+                  data-testid="short-name-tab"
+                  role="tab"
+                  tabindex="0"
+                >
+                  <div
+                    class="label"
+                  >
+                    Short Name
+                  </div>
+                </div>
                 <div
                   class="Tab flex gaps align-center"
                   data-testid="terminal-tab"
@@ -875,22 +939,42 @@ exports[`Showing correct entity settings when navigating to non-local cluster en
           class="HotbarItems flex column gaps"
         >
           <div
-            class="HotbarCell isDraggingOwner animateDown"
+            class="HotbarCell animateDown"
             index="0"
           >
             <div
               style="z-index: 12; position: absolute;"
             >
               <div
-                class="HotbarIcon contextMenuAvailable"
+                class="HotbarIcon"
               >
                 <div
-                  class="Avatar rounded disabled avatar"
-                  id="hotbarIcon-hotbar-icon-catalog-entity"
-                  style="width: 40px; height: 40px; background: rgb(5, 1, 130);"
+                  class="Avatar rounded avatar"
+                  data-testid="hotbar-icon-for-catalog-entity"
+                  id="hotbar-icon-for-catalog-entity"
+                  style="width: 40px; height: 40px; background-color: rgb(61, 144, 206);"
                 >
-                  Ca
+                  <i
+                    class="Icon material focusable"
+                  >
+                    <span
+                      class="icon"
+                      data-icon-name="view_list"
+                    >
+                      view_list
+                    </span>
+                  </i>
                 </div>
+                <i
+                  class="Icon badge material focusable"
+                >
+                  <span
+                    class="icon"
+                    data-icon-name="settings"
+                  >
+                    settings
+                  </span>
+                </i>
               </div>
             </div>
           </div>
@@ -1085,7 +1169,7 @@ exports[`Showing correct entity settings when navigating to weblink entity setti
               >
                 <div
                   class="Avatar rounded settingsAvatar"
-                  style="width: 40px; height: 40px; background: rgb(53, 8, 142);"
+                  style="width: 40px; height: 40px; background-color: red;"
                 >
                   sw
                 </div>
@@ -1097,7 +1181,26 @@ exports[`Showing correct entity settings when navigating to weblink entity setti
               </div>
               <div
                 class="Tabs flex column"
-              />
+              >
+                <hr />
+                <div
+                  class="header"
+                >
+                  Settings
+                </div>
+                <div
+                  class="Tab flex gaps align-center active"
+                  data-testid="short-name-tab"
+                  role="tab"
+                  tabindex="0"
+                >
+                  <div
+                    class="label"
+                  >
+                    Short Name
+                  </div>
+                </div>
+              </div>
             </div>
           </nav>
           <div
@@ -1107,16 +1210,51 @@ exports[`Showing correct entity settings when navigating to weblink entity setti
             <div
               class="content"
             >
-              <div
-                class="flex items-center"
-                data-preference-page-does-not-exist-test="true"
-              >
-                No settings found for
-                 
-                entity.k8slens.dev/v1alpha1
-                /
-                WebLink
-              </div>
+              <section>
+                <h2
+                  data-testid="short-name-header"
+                >
+                  Short Name
+                </h2>
+                <section>
+                  <section
+                    data-testid="short-name-settings-section"
+                  >
+                    <section>
+                      <div
+                        class="SubTitle"
+                      >
+                        Entity Short Name
+                         
+                      </div>
+                      <div
+                        class="Input theme round black"
+                      >
+                        <label
+                          class="input-area flex gaps align-center"
+                          id=""
+                        >
+                          <input
+                            class="input box grow"
+                            data-testid="short-name-setting-input"
+                            placeholder="sw"
+                            spellcheck="false"
+                            value=""
+                          />
+                        </label>
+                        <div
+                          class="input-info flex gaps"
+                        />
+                      </div>
+                      <small
+                        class="hint"
+                      >
+                        The text for entity icons. By default it is calculated from the entity name.
+                      </small>
+                    </section>
+                  </section>
+                </section>
+              </section>
             </div>
             <div
               class="toolsRegion"
@@ -1160,22 +1298,42 @@ exports[`Showing correct entity settings when navigating to weblink entity setti
           class="HotbarItems flex column gaps"
         >
           <div
-            class="HotbarCell isDraggingOwner animateDown"
+            class="HotbarCell animateDown"
             index="0"
           >
             <div
               style="z-index: 12; position: absolute;"
             >
               <div
-                class="HotbarIcon contextMenuAvailable"
+                class="HotbarIcon"
               >
                 <div
-                  class="Avatar rounded disabled avatar"
-                  id="hotbarIcon-hotbar-icon-catalog-entity"
-                  style="width: 40px; height: 40px; background: rgb(5, 1, 130);"
+                  class="Avatar rounded avatar"
+                  data-testid="hotbar-icon-for-catalog-entity"
+                  id="hotbar-icon-for-catalog-entity"
+                  style="width: 40px; height: 40px; background-color: rgb(61, 144, 206);"
                 >
-                  Ca
+                  <i
+                    class="Icon material focusable"
+                  >
+                    <span
+                      class="icon"
+                      data-icon-name="view_list"
+                    >
+                      view_list
+                    </span>
+                  </i>
                 </div>
+                <i
+                  class="Icon badge material focusable"
+                >
+                  <span
+                    class="icon"
+                    data-icon-name="settings"
+                  >
+                    settings
+                  </span>
+                </i>
               </div>
             </div>
           </div>

src/features/entity-settings/limit-short-name-length.test.tsx

@@ -0,0 +1,137 @@
+/**
+ * Copyright (c) OpenLens Authors. All rights reserved.
+ * Licensed under MIT License. See LICENSE in root directory for more information.
+ */
+
+import type { DiContainer } from "@ogre-tools/injectable";
+import type { RenderResult } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import type { UserEvent } from "@testing-library/user-event/dist/types/setup/setup";
+import { computed } from "mobx";
+import { KubernetesCluster, WebLink } from "../../common/catalog-entities";
+import navigateToEntitySettingsInjectable from "../../common/front-end-routing/routes/entity-settings/navigate-to-entity-settings.injectable";
+import hotbarStoreInjectable from "../../common/hotbars/store.injectable";
+import catalogEntityRegistryInjectable from "../../main/catalog/entity-registry.injectable";
+import { type ApplicationBuilder, getApplicationBuilder } from "../../renderer/components/test-utils/get-application-builder";
+
+describe("limit short-name length tests", () => {
+  let builder: ApplicationBuilder;
+  let rendered: RenderResult;
+  let windowDi: DiContainer;
+  let clusterEntity: KubernetesCluster;
+  let localClusterEntity: KubernetesCluster;
+  let otherEntity: WebLink;
+  let user: UserEvent;
+
+  beforeEach(async () => {
+    builder = getApplicationBuilder({
+      useFakeTime: {
+        autoAdvance: true,
+      },
+    });
+    user = userEvent.setup();
+
+    builder.beforeApplicationStart((mainDi) => {
+      clusterEntity = new KubernetesCluster({
+        metadata: {
+          labels: {},
+          name: "some-kubernetes-cluster",
+          uid: "some-entity-id",
+        },
+        spec: {
+          kubeconfigContext: "some-context",
+          kubeconfigPath: "/some/path/to/kubeconfig",
+        },
+        status: {
+          phase: "connecting",
+        },
+      });
+      localClusterEntity = new KubernetesCluster({
+        metadata: {
+          labels: {},
+          name: "some-local-kubernetes-cluster",
+          uid: "some-entity-id-2",
+          source: "local",
+        },
+        spec: {
+          kubeconfigContext: "some-context",
+          kubeconfigPath: "/some/path/to/local/kubeconfig",
+        },
+        status: {
+          phase: "connecting",
+        },
+      });
+      otherEntity = new WebLink({
+        metadata: {
+          labels: {},
+          name: "some-weblink",
+          uid: "some-weblink-id",
+        },
+        spec: {
+          url: "https://my-websome.com",
+        },
+        status: {
+          phase: "available",
+        },
+      });
+
+      mainDi.inject(catalogEntityRegistryInjectable).addComputedSource("test-id", computed(() => [clusterEntity, otherEntity, localClusterEntity]));
+    });
+
+    builder.afterWindowStart((rendererDi) => {
+      rendererDi.inject(hotbarStoreInjectable).addToHotbar(clusterEntity);
+    });
+
+    rendered = await builder.render();
+    windowDi = builder.applicationWindow.only.di;
+  });
+
+  describe("when navigating to entity settings for #short-name", () => {
+    beforeEach(() => {
+      const navigateToEntitySettings = windowDi.inject(navigateToEntitySettingsInjectable);
+
+      navigateToEntitySettings(clusterEntity.getId(), "short-name");
+    });
+
+    it("renders", () => {
+      expect(rendered.baseElement).toMatchSnapshot();
+    });
+
+    it("shows short-name settings", () => {
+      expect(rendered.queryByTestId("short-name-settings-section")).toBeInTheDocument();
+    });
+
+    describe("when new short-name is inputed", () => {
+      beforeEach(async () => {
+        await user.click(rendered.getByTestId("short-name-setting-input"));
+        await user.keyboard("jkl{Enter}");
+      });
+
+      it("shows new short-name on hotbar icon", () => {
+        expect(rendered.getByTestId("hotbar-icon-for-some-entity-id")).toHaveTextContent("jkl");
+      });
+    });
+
+    describe("when short-name is inputed which is too long", () => {
+      beforeEach(async () => {
+        await user.click(rendered.getByTestId("short-name-setting-input"));
+        await user.keyboard("jklmnopqrs{Enter}");
+      });
+
+      it("shows length limited short-name on hotbar icon", () => {
+        expect(rendered.getByTestId("hotbar-icon-for-some-entity-id")).toHaveTextContent("jklmn");
+      });
+    });
+
+    describe("when short-name is inputed which has encoding length > 5 but has grapheme length <= 5", () => {
+      beforeEach(async () => {
+        await user.click(rendered.getByTestId("short-name-setting-input"));
+        await user.keyboard("😀😀😀😀😀{Enter}");
+      });
+
+      it("shows length limited short-name on hotbar icon", () => {
+        expect(rendered.getByTestId("hotbar-icon-for-some-entity-id")).toHaveTextContent("😀😀😀😀😀");
+      });
+    });
+  });
+});

src/features/entity-settings/showing-settings-for-correct-entity.test.tsx

@@ -5,13 +5,11 @@
 
 import type { DiContainer } from "@ogre-tools/injectable";
 import type { RenderResult } from "@testing-library/react";
+import { computed } from "mobx";
 import { KubernetesCluster, WebLink } from "../../common/catalog-entities";
-import getClusterByIdInjectable from "../../common/cluster-store/get-by-id.injectable";
-import type { Cluster } from "../../common/cluster/cluster";
 import navigateToEntitySettingsInjectable from "../../common/front-end-routing/routes/entity-settings/navigate-to-entity-settings.injectable";
-import catalogEntityRegistryInjectable from "../../renderer/api/catalog/entity/registry.injectable";
+import catalogEntityRegistryInjectable from "../../main/catalog/entity-registry.injectable";
 import { type ApplicationBuilder, getApplicationBuilder } from "../../renderer/components/test-utils/get-application-builder";
-import createClusterInjectable from "../../renderer/cluster/create-cluster.injectable";
 
 describe("Showing correct entity settings", () => {
   let builder: ApplicationBuilder;
@@ -20,14 +18,11 @@ describe("Showing correct entity settings", () => {
   let clusterEntity: KubernetesCluster;
   let localClusterEntity: KubernetesCluster;
   let otherEntity: WebLink;
-  let cluster: Cluster;
 
   beforeEach(async () => {
     builder = getApplicationBuilder();
 
-    builder.afterWindowStart((windowDi) => {
-      const createCluster = windowDi.inject(createClusterInjectable);
-
+    builder.beforeApplicationStart((mainDi) => {
       clusterEntity = new KubernetesCluster({
         metadata: {
           labels: {},
@@ -70,27 +65,8 @@ describe("Showing correct entity settings", () => {
           phase: "available",
         },
       });
-      cluster = createCluster({
-        contextName: clusterEntity.spec.kubeconfigContext,
-        id: clusterEntity.getId(),
-        kubeConfigPath: clusterEntity.spec.kubeconfigPath,
-      }, {
-        clusterServerUrl: "https://localhost:9999",
-      });
 
-      // TODO: remove once ClusterStore can be used without overriding it
-      windowDi.override(getClusterByIdInjectable, () => (clusterId) => {
-        if (clusterId === cluster.id) {
-          return cluster;
-        }
-
-        return undefined;
-      });
-
-      // TODO: replace with proper entity source once syncing entities between main and windows is injectable
-      const catalogEntityRegistry = windowDi.inject(catalogEntityRegistryInjectable);
-
-      catalogEntityRegistry.updateItems([clusterEntity, otherEntity, localClusterEntity]);
+      mainDi.inject(catalogEntityRegistryInjectable).addComputedSource("test-id", computed(() => [clusterEntity, otherEntity, localClusterEntity]));
     });
 
     rendered = await builder.render();
@@ -143,13 +119,6 @@ describe("Showing correct entity settings", () => {
     it("shows Node Shell setting tab header", () => {
       expect(rendered.queryByTestId("node-shell-tab")).toBeInTheDocument();
     });
-
-    it("shows the setting tabs in the correct order", () => {
-      expect(rendered.getByTestId("proxy-tab").nextSibling).toHaveAttribute("data-testid", "terminal-tab");
-      expect(rendered.getByTestId("terminal-tab").nextSibling).toHaveAttribute("data-testid", "namespace-tab");
-      expect(rendered.getByTestId("namespace-tab").nextSibling).toHaveAttribute("data-testid", "metrics-tab");
-      expect(rendered.getByTestId("metrics-tab").nextSibling).toHaveAttribute("data-testid", "node-shell-tab");
-    });
   });
 
   describe("when navigating to local cluster entity settings", () => {
@@ -190,14 +159,6 @@ describe("Showing correct entity settings", () => {
     it("shows Node Shell setting tab header", () => {
       expect(rendered.queryByTestId("node-shell-tab")).toBeInTheDocument();
     });
-
-    it("shows the setting tabs in the correct order", () => {
-      expect(rendered.getByTestId("general-tab").nextSibling).toHaveAttribute("data-testid", "proxy-tab");
-      expect(rendered.getByTestId("proxy-tab").nextSibling).toHaveAttribute("data-testid", "terminal-tab");
-      expect(rendered.getByTestId("terminal-tab").nextSibling).toHaveAttribute("data-testid", "namespace-tab");
-      expect(rendered.getByTestId("namespace-tab").nextSibling).toHaveAttribute("data-testid", "metrics-tab");
-      expect(rendered.getByTestId("metrics-tab").nextSibling).toHaveAttribute("data-testid", "node-shell-tab");
-    });
   });
 
   describe("when navigating to weblink entity settings", () => {
@@ -219,8 +180,8 @@ describe("Showing correct entity settings", () => {
       expect(rendered.queryByTestId("general-tab")).not.toBeInTheDocument();
     });
 
-    it("shows no settings page info", () => {
-      expect(rendered.baseElement.querySelector("[data-preference-page-does-not-exist-test='true']")).toBeInTheDocument();
+    it("shows the short name setting", () => {
+      expect(rendered.queryByTestId("short-name-tab")).toBeInTheDocument();
     });
   });
 });

src/features/extensions/__snapshots__/navigation-using-application-menu.test.ts.snap

@@ -162,22 +162,42 @@ exports[`extensions - navigation using application menu renders 1`] = `
         class="HotbarItems flex column gaps"
       >
         <div
-          class="HotbarCell isDraggingOwner animateDown"
+          class="HotbarCell animateDown"
           index="0"
         >
           <div
             style="z-index: 12; position: absolute;"
           >
             <div
-              class="HotbarIcon contextMenuAvailable"
+              class="HotbarIcon"
             >
               <div
-                class="Avatar rounded disabled avatar"
-                id="hotbarIcon-hotbar-icon-catalog-entity"
-                style="width: 40px; height: 40px; background: rgb(5, 1, 130);"
+                class="Avatar rounded avatar"
+                data-testid="hotbar-icon-for-catalog-entity"
+                id="hotbar-icon-for-catalog-entity"
+                style="width: 40px; height: 40px; background-color: rgb(61, 144, 206);"
               >
-                Ca
+                <i
+                  class="Icon material focusable"
+                >
+                  <span
+                    class="icon"
+                    data-icon-name="view_list"
+                  >
+                    view_list
+                  </span>
+                </i>
               </div>
+              <i
+                class="Icon badge material focusable"
+              >
+                <span
+                  class="icon"
+                  data-icon-name="settings"
+                >
+                  settings
+                </span>
+              </i>
             </div>
           </div>
         </div>
@@ -472,22 +492,42 @@ exports[`extensions - navigation using application menu when navigating to exten
         class="HotbarItems flex column gaps"
       >
         <div
-          class="HotbarCell isDraggingOwner animateDown"
+          class="HotbarCell animateDown"
           index="0"
         >
           <div
             style="z-index: 12; position: absolute;"
           >
             <div
-              class="HotbarIcon contextMenuAvailable"
+              class="HotbarIcon"
             >
               <div
-                class="Avatar rounded disabled avatar"
-                id="hotbarIcon-hotbar-icon-catalog-entity"
-                style="width: 40px; height: 40px; background: rgb(5, 1, 130);"
+                class="Avatar rounded avatar"
+                data-testid="hotbar-icon-for-catalog-entity"
+                id="hotbar-icon-for-catalog-entity"
+                style="width: 40px; height: 40px; background-color: rgb(61, 144, 206);"
               >
-                Ca
+                <i
+                  class="Icon material focusable"
+                >
+                  <span
+                    class="icon"
+                    data-icon-name="view_list"
+                  >
+                    view_list
+                  </span>
+                </i>
               </div>
+              <i
+                class="Icon badge material focusable"
+              >
+                <span
+                  class="icon"
+                  data-icon-name="settings"
+                >
+                  settings
+                </span>
+              </i>
             </div>
           </div>
         </div>

src/features/helm-charts/__snapshots__/add-custom-helm-repository-in-preferences.test.ts.snap

@@ -581,22 +581,42 @@ exports[`add custom helm repository in preferences when navigating to preference
           class="HotbarItems flex column gaps"
         >
           <div
-            class="HotbarCell isDraggingOwner animateDown"
+            class="HotbarCell animateDown"
             index="0"
           >
             <div
               style="z-index: 12; position: absolute;"
             >
               <div
-                class="HotbarIcon contextMenuAvailable"
+                class="HotbarIcon"
               >
                 <div
-                  class="Avatar rounded disabled avatar"
-                  id="hotbarIcon-hotbar-icon-catalog-entity"
-                  style="width: 40px; height: 40px; background: rgb(5, 1, 130);"
+                  class="Avatar rounded avatar"
+                  data-testid="hotbar-icon-for-catalog-entity"
+                  id="hotbar-icon-for-catalog-entity"
+                  style="width: 40px; height: 40px; background-color: rgb(61, 144, 206);"
                 >
-                  Ca
+                  <i
+                    class="Icon material focusable"
+                  >
+                    <span
+                      class="icon"
+                      data-icon-name="view_list"
+                    >
+                      view_list
+                    </span>
+                  </i>
                 </div>
+                <i
+                  class="Icon badge material focusable"
+                >
+                  <span
+                    class="icon"
+                    data-icon-name="settings"
+                  >
+                    settings
+                  </span>
+                </i>
               </div>
             </div>
           </div>
@@ -1323,22 +1343,42 @@ exports[`add custom helm repository in preferences when navigating to preference
           class="HotbarItems flex column gaps"
         >
           <div
-            class="HotbarCell isDraggingOwner animateDown"
+            class="HotbarCell animateDown"
             index="0"
           >
             <div
               style="z-index: 12; position: absolute;"
             >
               <div
-                class="HotbarIcon contextMenuAvailable"
+                class="HotbarIcon"
               >
                 <div
-                  class="Avatar rounded disabled avatar"
-                  id="hotbarIcon-hotbar-icon-catalog-entity"
-                  style="width: 40px; height: 40px; background: rgb(5, 1, 130);"
+                  class="Avatar rounded avatar"
+                  data-testid="hotbar-icon-for-catalog-entity"
+                  id="hotbar-icon-for-catalog-entity"
+                  style="width: 40px; height: 40px; background-color: rgb(61, 144, 206);"
                 >
-                  Ca
+                  <i
+                    class="Icon material focusable"
+                  >
+                    <span
+                      class="icon"
+                      data-icon-name="view_list"
+                    >
+                      view_list
+                    </span>
+                  </i>
                 </div>
+                <i
+                  class="Icon badge material focusable"
+                >
+                  <span
+                    class="icon"
+                    data-icon-name="settings"
+                  >
+                    settings
+                  </span>
+                </i>
               </div>
             </div>
           </div>
@@ -2065,22 +2105,42 @@ exports[`add custom helm repository in preferences when navigating to preference
           class="HotbarItems flex column gaps"
         >
           <div
-            class="HotbarCell isDraggingOwner animateDown"
+            class="HotbarCell animateDown"
             index="0"
           >
             <div
               style="z-index: 12; position: absolute;"
             >
               <div
-                class="HotbarIcon contextMenuAvailable"
+                class="HotbarIcon"
               >
                 <div
-                  class="Avatar rounded disabled avatar"
-                  id="hotbarIcon-hotbar-icon-catalog-entity"
-                  style="width: 40px; height: 40px; background: rgb(5, 1, 130);"
+                  class="Avatar rounded avatar"
+                  data-testid="hotbar-icon-for-catalog-entity"
+                  id="hotbar-icon-for-catalog-entity"
+                  style="width: 40px; height: 40px; background-color: rgb(61, 144, 206);"
                 >
-                  Ca
+                  <i
+                    class="Icon material focusable"
+                  >
+                    <span
+                      class="icon"
+                      data-icon-name="view_list"
+                    >
+                      view_list
+                    </span>
+                  </i>
                 </div>
+                <i
+                  class="Icon badge material focusable"
+                >
+                  <span
+                    class="icon"
+                    data-icon-name="settings"
+                  >
+                    settings
+                  </span>
+                </i>
               </div>
             </div>
           </div>
@@ -2918,22 +2978,42 @@ exports[`add custom helm repository in preferences when navigating to preference
           class="HotbarItems flex column gaps"
         >
           <div
-            class="HotbarCell isDraggingOwner animateDown"
+            class="HotbarCell animateDown"
             index="0"
           >
             <div
               style="z-index: 12; position: absolute;"
             >
               <div
-                class="HotbarIcon contextMenuAvailable"
+                class="HotbarIcon"
               >
                 <div
-                  class="Avatar rounded disabled avatar"
-                  id="hotbarIcon-hotbar-icon-catalog-entity"
-                  style="width: 40px; height: 40px; background: rgb(5, 1, 130);"
+                  class="Avatar rounded avatar"
+                  data-testid="hotbar-icon-for-catalog-entity"
+                  id="hotbar-icon-for-catalog-entity"
+                  style="width: 40px; height: 40px; background-color: rgb(61, 144, 206);"
                 >
-                  Ca
+                  <i
+                    class="Icon material focusable"
+                  >
+                    <span
+                      class="icon"
+                      data-icon-name="view_list"
+                    >
+                      view_list
+                    </span>
+                  </i>
                 </div>
+                <i
+                  class="Icon badge material focusable"
+                >
+                  <span
+                    class="icon"
+                    data-icon-name="settings"
+                  >
+                    settings
+                  </span>
+                </i>
               </div>
             </div>
           </div>
@@ -3037,14 +3117,6 @@ exports[`add custom helm repository in preferences when navigating to preference
       class="Notifications flex column align-flex-end"
     />
   </div>
-  <div
-    class="Animate opacity-scale Dialog flex center AddHelmRepoDialog modal enter leave"
-    style="--enter-duration: 100ms; --leave-duration: 100ms;"
-  >
-    <div
-      class="box"
-    />
-  </div>
 </body>
 `;
 
@@ -3668,22 +3740,42 @@ exports[`add custom helm repository in preferences when navigating to preference
           class="HotbarItems flex column gaps"
         >
           <div
-            class="HotbarCell isDraggingOwner animateDown"
+            class="HotbarCell animateDown"
             index="0"
           >
             <div
               style="z-index: 12; position: absolute;"
             >
               <div
-                class="HotbarIcon contextMenuAvailable"
+                class="HotbarIcon"
               >
                 <div
-                  class="Avatar rounded disabled avatar"
-                  id="hotbarIcon-hotbar-icon-catalog-entity"
-                  style="width: 40px; height: 40px; background: rgb(5, 1, 130);"
+                  class="Avatar rounded avatar"
+                  data-testid="hotbar-icon-for-catalog-entity"
+                  id="hotbar-icon-for-catalog-entity"
+                  style="width: 40px; height: 40px; background-color: rgb(61, 144, 206);"
                 >
-                  Ca
+                  <i
+                    class="Icon material focusable"
+                  >
+                    <span
+                      class="icon"
+                      data-icon-name="view_list"
+                    >
+                      view_list
+                    </span>
+                  </i>
                 </div>
+                <i
+                  class="Icon badge material focusable"
+                >
+                  <span
+                    class="icon"
+                    data-icon-name="settings"
+                  >
+                    settings
+                  </span>
+                </i>
               </div>
             </div>
           </div>
@@ -4521,22 +4613,42 @@ exports[`add custom helm repository in preferences when navigating to preference
           class="HotbarItems flex column gaps"
         >
           <div
-            class="HotbarCell isDraggingOwner animateDown"
+            class="HotbarCell animateDown"
             index="0"
           >
             <div
               style="z-index: 12; position: absolute;"
             >
               <div
-                class="HotbarIcon contextMenuAvailable"
+                class="HotbarIcon"
               >
                 <div
-                  class="Avatar rounded disabled avatar"
-                  id="hotbarIcon-hotbar-icon-catalog-entity"
-                  style="width: 40px; height: 40px; background: rgb(5, 1, 130);"
+                  class="Avatar rounded avatar"
+                  data-testid="hotbar-icon-for-catalog-entity"
+                  id="hotbar-icon-for-catalog-entity"
+                  style="width: 40px; height: 40px; background-color: rgb(61, 144, 206);"
                 >
-                  Ca
+                  <i
+                    class="Icon material focusable"
+                  >
+                    <span
+                      class="icon"
+                      data-icon-name="view_list"
+                    >
+                      view_list
+                    </span>
+                  </i>
                 </div>
+                <i
+                  class="Icon badge material focusable"
+                >
+                  <span
+                    class="icon"
+                    data-icon-name="settings"
+                  >
+                    settings
+                  </span>
+                </i>
               </div>
             </div>
           </div>
@@ -5556,22 +5668,42 @@ exports[`add custom helm repository in preferences when navigating to preference
           class="HotbarItems flex column gaps"
         >
           <div
-            class="HotbarCell isDraggingOwner animateDown"
+            class="HotbarCell animateDown"
             index="0"
           >
             <div
               style="z-index: 12; position: absolute;"
             >
               <div
-                class="HotbarIcon contextMenuAvailable"
+                class="HotbarIcon"
               >
                 <div
-                  class="Avatar rounded disabled avatar"
-                  id="hotbarIcon-hotbar-icon-catalog-entity"
-                  style="width: 40px; height: 40px; background: rgb(5, 1, 130);"
+                  class="Avatar rounded avatar"
+                  data-testid="hotbar-icon-for-catalog-entity"
+                  id="hotbar-icon-for-catalog-entity"
+                  style="width: 40px; height: 40px; background-color: rgb(61, 144, 206);"
                 >
-                  Ca
+                  <i
+                    class="Icon material focusable"
+                  >
+                    <span
+                      class="icon"
+                      data-icon-name="view_list"
+                    >
+                      view_list
+                    </span>
+                  </i>
                 </div>
+                <i
+                  class="Icon badge material focusable"
+                >
+                  <span
+                    class="icon"
+                    data-icon-name="settings"
+                  >
+                    settings
+                  </span>
+                </i>
               </div>
             </div>
           </div>
@@ -6409,22 +6541,42 @@ exports[`add custom helm repository in preferences when navigating to preference
           class="HotbarItems flex column gaps"
         >
           <div
-            class="HotbarCell isDraggingOwner animateDown"
+            class="HotbarCell animateDown"
             index="0"
           >
             <div
               style="z-index: 12; position: absolute;"
             >
               <div
-                class="HotbarIcon contextMenuAvailable"
+                class="HotbarIcon"
               >
                 <div
-                  class="Avatar rounded disabled avatar"
-                  id="hotbarIcon-hotbar-icon-catalog-entity"
-                  style="width: 40px; height: 40px; background: rgb(5, 1, 130);"
+                  class="Avatar rounded avatar"
+                  data-testid="hotbar-icon-for-catalog-entity"
+                  id="hotbar-icon-for-catalog-entity"
+                  style="width: 40px; height: 40px; background-color: rgb(61, 144, 206);"
                 >
-                  Ca
+                  <i
+                    class="Icon material focusable"
+                  >
+                    <span
+                      class="icon"
+                      data-icon-name="view_list"
+                    >
+                      view_list
+                    </span>
+                  </i>
                 </div>
+                <i
+                  class="Icon badge material focusable"
+                >
+                  <span
+                    class="icon"
+                    data-icon-name="settings"
+                  >
+                    settings
+                  </span>
+                </i>
               </div>
             </div>
           </div>
@@ -7444,22 +7596,42 @@ exports[`add custom helm repository in preferences when navigating to preference
           class="HotbarItems flex column gaps"
         >
           <div
-            class="HotbarCell isDraggingOwner animateDown"
+            class="HotbarCell animateDown"
             index="0"
           >
             <div
               style="z-index: 12; position: absolute;"
             >
               <div
-                class="HotbarIcon contextMenuAvailable"
+                class="HotbarIcon"
               >
                 <div
-                  class="Avatar rounded disabled avatar"
-                  id="hotbarIcon-hotbar-icon-catalog-entity"
-                  style="width: 40px; height: 40px; background: rgb(5, 1, 130);"
+                  class="Avatar rounded avatar"
+                  data-testid="hotbar-icon-for-catalog-entity"
+                  id="hotbar-icon-for-catalog-entity"
+                  style="width: 40px; height: 40px; background-color: rgb(61, 144, 206);"
                 >
-                  Ca
+                  <i
+                    class="Icon material focusable"
+                  >
+                    <span
+                      class="icon"
+                      data-icon-name="view_list"
+                    >
+                      view_list
+                    </span>
+                  </i>
                 </div>
+                <i
+                  class="Icon badge material focusable"
+                >
+                  <span
+                    class="icon"
+                    data-icon-name="settings"
+                  >
+                    settings
+                  </span>
+                </i>
               </div>
             </div>
           </div>
@@ -8298,22 +8470,42 @@ exports[`add custom helm repository in preferences when navigating to preference
           class="HotbarItems flex column gaps"
         >
           <div
-            class="HotbarCell isDraggingOwner animateDown"
+            class="HotbarCell animateDown"
             index="0"
           >
             <div
               style="z-index: 12; position: absolute;"
             >
               <div
-                class="HotbarIcon contextMenuAvailable"
+                class="HotbarIcon"
               >
                 <div
-                  class="Avatar rounded disabled avatar"
-                  id="hotbarIcon-hotbar-icon-catalog-entity"
-                  style="width: 40px; height: 40px; background: rgb(5, 1, 130);"
+                  class="Avatar rounded avatar"
+                  data-testid="hotbar-icon-for-catalog-entity"
+                  id="hotbar-icon-for-catalog-entity"
+                  style="width: 40px; height: 40px; background-color: rgb(61, 144, 206);"
                 >
-                  Ca
+                  <i
+                    class="Icon material focusable"
+                  >
+                    <span
+                      class="icon"
+                      data-icon-name="view_list"
+                    >
+                      view_list
+                    </span>
+                  </i>
                 </div>
+                <i
+                  class="Icon badge material focusable"
+                >
+                  <span
+                    class="icon"
+                    data-icon-name="settings"
+                  >
+                    settings
+                  </span>
+                </i>
               </div>
             </div>
           </div>
@@ -9037,22 +9229,42 @@ exports[`add custom helm repository in preferences when navigating to preference
           class="HotbarItems flex column gaps"
         >
           <div
-            class="HotbarCell isDraggingOwner animateDown"
+            class="HotbarCell animateDown"
             index="0"
           >
             <div
               style="z-index: 12; position: absolute;"
             >
               <div
-                class="HotbarIcon contextMenuAvailable"
+                class="HotbarIcon"
               >
                 <div
-                  class="Avatar rounded disabled avatar"
-                  id="hotbarIcon-hotbar-icon-catalog-entity"
-                  style="width: 40px; height: 40px; background: rgb(5, 1, 130);"
+                  class="Avatar rounded avatar"
+                  data-testid="hotbar-icon-for-catalog-entity"
+                  id="hotbar-icon-for-catalog-entity"
+                  style="width: 40px; height: 40px; background-color: rgb(61, 144, 206);"
                 >
-                  Ca
+                  <i
+                    class="Icon material focusable"
+                  >
+                    <span
+                      class="icon"
+                      data-icon-name="view_list"
+                    >
+                      view_list
+                    </span>
+                  </i>
                 </div>
+                <i
+                  class="Icon badge material focusable"
+                >
+                  <span
+                    class="icon"
+                    data-icon-name="settings"
+                  >
+                    settings
+                  </span>
+                </i>
               </div>
             </div>
           </div>
@@ -9776,22 +9988,42 @@ exports[`add custom helm repository in preferences when navigating to preference
           class="HotbarItems flex column gaps"
         >
           <div
-            class="HotbarCell isDraggingOwner animateDown"
+            class="HotbarCell animateDown"
             index="0"
           >
             <div
               style="z-index: 12; position: absolute;"
             >
               <div
-                class="HotbarIcon contextMenuAvailable"
+                class="HotbarIcon"
               >
                 <div
-                  class="Avatar rounded disabled avatar"
-                  id="hotbarIcon-hotbar-icon-catalog-entity"
-                  style="width: 40px; height: 40px; background: rgb(5, 1, 130);"
+                  class="Avatar rounded avatar"
+                  data-testid="hotbar-icon-for-catalog-entity"
+                  id="hotbar-icon-for-catalog-entity"
+                  style="width: 40px; height: 40px; background-color: rgb(61, 144, 206);"
                 >
-                  Ca
+                  <i
+                    class="Icon material focusable"
+                  >
+                    <span
+                      class="icon"
+                      data-icon-name="view_list"
+                    >
+                      view_list
+                    </span>
+                  </i>
                 </div>
+                <i
+                  class="Icon badge material focusable"
+                >
+                  <span
+                    class="icon"
+                    data-icon-name="settings"
+                  >
+                    settings
+                  </span>
+                </i>
               </div>
             </div>
           </div>
@@ -9896,7 +10128,7 @@ exports[`add custom helm repository in preferences when navigating to preference
     />
   </div>
   <div
-    class="Animate opacity-scale Dialog flex center AddHelmRepoDialog modal enter leave"
+    class="Animate opacity-scale Dialog flex center AddHelmRepoDialog modal enter"
     style="--enter-duration: 100ms; --leave-duration: 100ms;"
   >
     <div

src/features/helm-charts/__snapshots__/add-helm-repository-from-list-in-preferences.test.ts.snap

@@ -581,22 +581,42 @@ exports[`add helm repository from list in preferences when navigating to prefere
           class="HotbarItems flex column gaps"
         >
           <div
-            class="HotbarCell isDraggingOwner animateDown"
+            class="HotbarCell animateDown"
             index="0"
           >
             <div
               style="z-index: 12; position: absolute;"
             >
               <div
-                class="HotbarIcon contextMenuAvailable"
+                class="HotbarIcon"
               >
                 <div
-                  class="Avatar rounded disabled avatar"
-                  id="hotbarIcon-hotbar-icon-catalog-entity"
-                  style="width: 40px; height: 40px; background: rgb(5, 1, 130);"
+                  class="Avatar rounded avatar"
+                  data-testid="hotbar-icon-for-catalog-entity"
+                  id="hotbar-icon-for-catalog-entity"
+                  style="width: 40px; height: 40px; background-color: rgb(61, 144, 206);"
                 >
-                  Ca
+                  <i
+                    class="Icon material focusable"
+                  >
+                    <span
+                      class="icon"
+                      data-icon-name="view_list"
+                    >
+                      view_list
+                    </span>
+                  </i>
                 </div>
+                <i
+                  class="Icon badge material focusable"
+                >
+                  <span
+                    class="icon"
+                    data-icon-name="settings"
+                  >
+                    settings
+                  </span>
+                </i>
               </div>
             </div>
           </div>
@@ -1323,22 +1343,42 @@ exports[`add helm repository from list in preferences when navigating to prefere
           class="HotbarItems flex column gaps"
         >
           <div
-            class="HotbarCell isDraggingOwner animateDown"
+            class="HotbarCell animateDown"
             index="0"
           >
             <div
               style="z-index: 12; position: absolute;"
             >
               <div
-                class="HotbarIcon contextMenuAvailable"
+                class="HotbarIcon"
               >
                 <div
-                  class="Avatar rounded disabled avatar"
-                  id="hotbarIcon-hotbar-icon-catalog-entity"
-                  style="width: 40px; height: 40px; background: rgb(5, 1, 130);"
+                  class="Avatar rounded avatar"
+                  data-testid="hotbar-icon-for-catalog-entity"
+                  id="hotbar-icon-for-catalog-entity"
+                  style="width: 40px; height: 40px; background-color: rgb(61, 144, 206);"
                 >
-                  Ca
+                  <i
+                    class="Icon material focusable"
+                  >
+                    <span
+                      class="icon"
+                      data-icon-name="view_list"
+                    >
+                      view_list
+                    </span>
+                  </i>
                 </div>
+                <i
+                  class="Icon badge material focusable"
+                >
+                  <span
+                    class="icon"
+                    data-icon-name="settings"
+                  >
+                    settings
+                  </span>
+                </i>
               </div>
             </div>
           </div>
@@ -2067,22 +2107,42 @@ exports[`add helm repository from list in preferences when navigating to prefere
           class="HotbarItems flex column gaps"
         >
           <div
-            class="HotbarCell isDraggingOwner animateDown"
+            class="HotbarCell animateDown"
             index="0"
           >
             <div
               style="z-index: 12; position: absolute;"
             >
               <div
-                class="HotbarIcon contextMenuAvailable"
+                class="HotbarIcon"
               >
                 <div
-                  class="Avatar rounded disabled avatar"
-                  id="hotbarIcon-hotbar-icon-catalog-entity"
-                  style="width: 40px; height: 40px; background: rgb(5, 1, 130);"
+                  class="Avatar rounded avatar"
+                  data-testid="hotbar-icon-for-catalog-entity"
+                  id="hotbar-icon-for-catalog-entity"
+                  style="width: 40px; height: 40px; background-color: rgb(61, 144, 206);"
                 >
-                  Ca
+                  <i
+                    class="Icon material focusable"
+                  >
+                    <span
+                      class="icon"
+                      data-icon-name="view_list"
+                    >
+                      view_list
+                    </span>
+                  </i>
                 </div>
+                <i
+                  class="Icon badge material focusable"
+                >
+                  <span
+                    class="icon"
+                    data-icon-name="settings"
+                  >
+                    settings
+                  </span>
+                </i>
               </div>
             </div>
           </div>
@@ -2860,22 +2920,42 @@ exports[`add helm repository from list in preferences when navigating to prefere
           class="HotbarItems flex column gaps"
         >
           <div
-            class="HotbarCell isDraggingOwner animateDown"
+            class="HotbarCell animateDown"
             index="0"
           >
             <div
               style="z-index: 12; position: absolute;"
             >
               <div
-                class="HotbarIcon contextMenuAvailable"
+                class="HotbarIcon"
               >
                 <div
-                  class="Avatar rounded disabled avatar"
-                  id="hotbarIcon-hotbar-icon-catalog-entity"
-                  style="width: 40px; height: 40px; background: rgb(5, 1, 130);"
+                  class="Avatar rounded avatar"
+                  data-testid="hotbar-icon-for-catalog-entity"
+                  id="hotbar-icon-for-catalog-entity"
+                  style="width: 40px; height: 40px; background-color: rgb(61, 144, 206);"
                 >
-                  Ca
+                  <i
+                    class="Icon material focusable"
+                  >
+                    <span
+                      class="icon"
+                      data-icon-name="view_list"
+                    >
+                      view_list
+                    </span>
+                  </i>
                 </div>
+                <i
+                  class="Icon badge material focusable"
+                >
+                  <span
+                    class="icon"
+                    data-icon-name="settings"
+                  >
+                    settings
+                  </span>
+                </i>
               </div>
             </div>
           </div>
@@ -3602,22 +3682,42 @@ exports[`add helm repository from list in preferences when navigating to prefere
           class="HotbarItems flex column gaps"
         >
           <div
-            class="HotbarCell isDraggingOwner animateDown"
+            class="HotbarCell animateDown"
             index="0"
           >
             <div
               style="z-index: 12; position: absolute;"
             >
               <div
-                class="HotbarIcon contextMenuAvailable"
+                class="HotbarIcon"
               >
                 <div
-                  class="Avatar rounded disabled avatar"
-                  id="hotbarIcon-hotbar-icon-catalog-entity"
-                  style="width: 40px; height: 40px; background: rgb(5, 1, 130);"
+                  class="Avatar rounded avatar"
+                  data-testid="hotbar-icon-for-catalog-entity"
+                  id="hotbar-icon-for-catalog-entity"
+                  style="width: 40px; height: 40px; background-color: rgb(61, 144, 206);"
                 >
-                  Ca
+                  <i
+                    class="Icon material focusable"
+                  >
+                    <span
+                      class="icon"
+                      data-icon-name="view_list"
+                    >
+                      view_list
+                    </span>
+                  </i>
                 </div>
+                <i
+                  class="Icon badge material focusable"
+                >
+                  <span
+                    class="icon"
+                    data-icon-name="settings"
+                  >
+                    settings
+                  </span>
+                </i>
               </div>
             </div>
           </div>
@@ -4333,22 +4433,42 @@ exports[`add helm repository from list in preferences when navigating to prefere
           class="HotbarItems flex column gaps"
         >
           <div
-            class="HotbarCell isDraggingOwner animateDown"
+            class="HotbarCell animateDown"
             index="0"
           >
             <div
               style="z-index: 12; position: absolute;"
             >
               <div
-                class="HotbarIcon contextMenuAvailable"
+                class="HotbarIcon"
               >
                 <div
-                  class="Avatar rounded disabled avatar"
-                  id="hotbarIcon-hotbar-icon-catalog-entity"
-                  style="width: 40px; height: 40px; background: rgb(5, 1, 130);"
+                  class="Avatar rounded avatar"
+                  data-testid="hotbar-icon-for-catalog-entity"
+                  id="hotbar-icon-for-catalog-entity"
+                  style="width: 40px; height: 40px; background-color: rgb(61, 144, 206);"
                 >
-                  Ca
+                  <i
+                    class="Icon material focusable"
+                  >
+                    <span
+                      class="icon"
+                      data-icon-name="view_list"
+                    >
+                      view_list
+                    </span>
+                  </i>
                 </div>
+                <i
+                  class="Icon badge material focusable"
+                >
+                  <span
+                    class="icon"
+                    data-icon-name="settings"
+                  >
+                    settings
+                  </span>
+                </i>
               </div>
             </div>
           </div>
@@ -5109,22 +5229,42 @@ exports[`add helm repository from list in preferences when navigating to prefere
           class="HotbarItems flex column gaps"
         >
           <div
-            class="HotbarCell isDraggingOwner animateDown"
+            class="HotbarCell animateDown"
             index="0"
           >
             <div
               style="z-index: 12; position: absolute;"
             >
               <div
-                class="HotbarIcon contextMenuAvailable"
+                class="HotbarIcon"
               >
                 <div
-                  class="Avatar rounded disabled avatar"
-                  id="hotbarIcon-hotbar-icon-catalog-entity"
-                  style="width: 40px; height: 40px; background: rgb(5, 1, 130);"
+                  class="Avatar rounded avatar"
+                  data-testid="hotbar-icon-for-catalog-entity"
+                  id="hotbar-icon-for-catalog-entity"
+                  style="width: 40px; height: 40px; background-color: rgb(61, 144, 206);"
                 >
-                  Ca
+                  <i
+                    class="Icon material focusable"
+                  >
+                    <span
+                      class="icon"
+                      data-icon-name="view_list"
+                    >
+                      view_list
+                    </span>
+                  </i>
                 </div>
+                <i
+                  class="Icon badge material focusable"
+                >
+                  <span
+                    class="icon"
+                    data-icon-name="settings"
+                  >
+                    settings
+                  </span>
+                </i>
               </div>
             </div>
           </div>
@@ -5887,22 +6027,42 @@ exports[`add helm repository from list in preferences when navigating to prefere
           class="HotbarItems flex column gaps"
         >
           <div
-            class="HotbarCell isDraggingOwner animateDown"
+            class="HotbarCell animateDown"
             index="0"
           >
             <div
               style="z-index: 12; position: absolute;"
             >
               <div
-                class="HotbarIcon contextMenuAvailable"
+                class="HotbarIcon"
               >
                 <div
-                  class="Avatar rounded disabled avatar"
-                  id="hotbarIcon-hotbar-icon-catalog-entity"
-                  style="width: 40px; height: 40px; background: rgb(5, 1, 130);"
+                  class="Avatar rounded avatar"
+                  data-testid="hotbar-icon-for-catalog-entity"
+                  id="hotbar-icon-for-catalog-entity"
+                  style="width: 40px; height: 40px; background-color: rgb(61, 144, 206);"
                 >
-                  Ca
+                  <i
+                    class="Icon material focusable"
+                  >
+                    <span
+                      class="icon"
+                      data-icon-name="view_list"
+                    >
+                      view_list
+                    </span>
+                  </i>
                 </div>
+                <i
+                  class="Icon badge material focusable"
+                >
+                  <span
+                    class="icon"
+                    data-icon-name="settings"
+                  >
+                    settings
+                  </span>
+                </i>
               </div>
             </div>
           </div>
@@ -6724,22 +6884,42 @@ exports[`add helm repository from list in preferences when navigating to prefere
           class="HotbarItems flex column gaps"
         >
           <div
-            class="HotbarCell isDraggingOwner animateDown"
+            class="HotbarCell animateDown"
             index="0"
           >
             <div
               style="z-index: 12; position: absolute;"
             >
               <div
-                class="HotbarIcon contextMenuAvailable"
+                class="HotbarIcon"
               >
                 <div
-                  class="Avatar rounded disabled avatar"
-                  id="hotbarIcon-hotbar-icon-catalog-entity"
-                  style="width: 40px; height: 40px; background: rgb(5, 1, 130);"
+                  class="Avatar rounded avatar"
+                  data-testid="hotbar-icon-for-catalog-entity"
+                  id="hotbar-icon-for-catalog-entity"
+                  style="width: 40px; height: 40px; background-color: rgb(61, 144, 206);"
                 >
-                  Ca
+                  <i
+                    class="Icon material focusable"
+                  >
+                    <span
+                      class="icon"
+                      data-icon-name="view_list"
+                    >
+                      view_list
+                    </span>
+                  </i>
                 </div>
+                <i
+                  class="Icon badge material focusable"
+                >
+                  <span
+                    class="icon"
+                    data-icon-name="settings"
+                  >
+                    settings
+                  </span>
+                </i>
               </div>
             </div>
           </div>
@@ -7455,22 +7635,42 @@ exports[`add helm repository from list in preferences when navigating to prefere
           class="HotbarItems flex column gaps"
         >
           <div
-            class="HotbarCell isDraggingOwner animateDown"
+            class="HotbarCell animateDown"
             index="0"
           >
             <div
               style="z-index: 12; position: absolute;"
             >
               <div
-                class="HotbarIcon contextMenuAvailable"
+                class="HotbarIcon"
               >
                 <div
-                  class="Avatar rounded disabled avatar"
-                  id="hotbarIcon-hotbar-icon-catalog-entity"
-                  style="width: 40px; height: 40px; background: rgb(5, 1, 130);"
+                  class="Avatar rounded avatar"
+                  data-testid="hotbar-icon-for-catalog-entity"
+                  id="hotbar-icon-for-catalog-entity"
+                  style="width: 40px; height: 40px; background-color: rgb(61, 144, 206);"
                 >
-                  Ca
+                  <i
+                    class="Icon material focusable"
+                  >
+                    <span
+                      class="icon"
+                      data-icon-name="view_list"
+                    >
+                      view_list
+                    </span>
+                  </i>
                 </div>
+                <i
+                  class="Icon badge material focusable"
+                >
+                  <span
+                    class="icon"
+                    data-icon-name="settings"
+                  >
+                    settings
+                  </span>
+                </i>
               </div>
             </div>
           </div>

src/features/helm-charts/__snapshots__/listing-active-helm-repositories-in-preferences.test.ts.snap

@@ -581,22 +581,42 @@ exports[`listing active helm repositories in preferences when navigating to pref
           class="HotbarItems flex column gaps"
         >
           <div
-            class="HotbarCell isDraggingOwner animateDown"
+            class="HotbarCell animateDown"
             index="0"
           >
             <div
               style="z-index: 12; position: absolute;"
             >
               <div
-                class="HotbarIcon contextMenuAvailable"
+                class="HotbarIcon"
               >
                 <div
-                  class="Avatar rounded disabled avatar"
-                  id="hotbarIcon-hotbar-icon-catalog-entity"
-                  style="width: 40px; height: 40px; background: rgb(5, 1, 130);"
+                  class="Avatar rounded avatar"
+                  data-testid="hotbar-icon-for-catalog-entity"
+                  id="hotbar-icon-for-catalog-entity"
+                  style="width: 40px; height: 40px; background-color: rgb(61, 144, 206);"
                 >
-                  Ca
+                  <i
+                    class="Icon material focusable"
+                  >
+                    <span
+                      class="icon"
+                      data-icon-name="view_list"
+                    >
+                      view_list
+                    </span>
+                  </i>
                 </div>
+                <i
+                  class="Icon badge material focusable"
+                >
+                  <span
+                    class="icon"
+                    data-icon-name="settings"
+                  >
+                    settings
+                  </span>
+                </i>
               </div>
             </div>
           </div>
@@ -1312,22 +1332,42 @@ exports[`listing active helm repositories in preferences when navigating to pref
           class="HotbarItems flex column gaps"
         >
           <div
-            class="HotbarCell isDraggingOwner animateDown"
+            class="HotbarCell animateDown"
             index="0"
           >
             <div
               style="z-index: 12; position: absolute;"
             >
               <div
-                class="HotbarIcon contextMenuAvailable"
+                class="HotbarIcon"
               >
                 <div
-                  class="Avatar rounded disabled avatar"
-                  id="hotbarIcon-hotbar-icon-catalog-entity"
-                  style="width: 40px; height: 40px; background: rgb(5, 1, 130);"
+                  class="Avatar rounded avatar"
+                  data-testid="hotbar-icon-for-catalog-entity"
+                  id="hotbar-icon-for-catalog-entity"
+                  style="width: 40px; height: 40px; background-color: rgb(61, 144, 206);"
                 >
-                  Ca
+                  <i
+                    class="Icon material focusable"
+                  >
+                    <span
+                      class="icon"
+                      data-icon-name="view_list"
+                    >
+                      view_list
+                    </span>
+                  </i>
                 </div>
+                <i
+                  class="Icon badge material focusable"
+                >
+                  <span
+                    class="icon"
+                    data-icon-name="settings"
+                  >
+                    settings
+                  </span>
+                </i>
               </div>
             </div>
           </div>
@@ -1935,22 +1975,42 @@ exports[`listing active helm repositories in preferences when navigating to pref
           class="HotbarItems flex column gaps"
         >
           <div
-            class="HotbarCell isDraggingOwner animateDown"
+            class="HotbarCell animateDown"
             index="0"
           >
             <div
               style="z-index: 12; position: absolute;"
             >
               <div
-                class="HotbarIcon contextMenuAvailable"
+                class="HotbarIcon"
               >
                 <div
-                  class="Avatar rounded disabled avatar"
-                  id="hotbarIcon-hotbar-icon-catalog-entity"
-                  style="width: 40px; height: 40px; background: rgb(5, 1, 130);"
+                  class="Avatar rounded avatar"
+                  data-testid="hotbar-icon-for-catalog-entity"
+                  id="hotbar-icon-for-catalog-entity"
+                  style="width: 40px; height: 40px; background-color: rgb(61, 144, 206);"
                 >
-                  Ca
+                  <i
+                    class="Icon material focusable"
+                  >
+                    <span
+                      class="icon"
+                      data-icon-name="view_list"
+                    >
+                      view_list
+                    </span>
+                  </i>
                 </div>
+                <i
+                  class="Icon badge material focusable"
+                >
+                  <span
+                    class="icon"
+                    data-icon-name="settings"
+                  >
+                    settings
+                  </span>
+                </i>
               </div>
             </div>
           </div>
@@ -2666,22 +2726,42 @@ exports[`listing active helm repositories in preferences when navigating to pref
           class="HotbarItems flex column gaps"
         >
           <div
-            class="HotbarCell isDraggingOwner animateDown"
+            class="HotbarCell animateDown"
             index="0"
           >
             <div
               style="z-index: 12; position: absolute;"
             >
               <div
-                class="HotbarIcon contextMenuAvailable"
+                class="HotbarIcon"
               >
                 <div
-                  class="Avatar rounded disabled avatar"
-                  id="hotbarIcon-hotbar-icon-catalog-entity"
-                  style="width: 40px; height: 40px; background: rgb(5, 1, 130);"
+                  class="Avatar rounded avatar"
+                  data-testid="hotbar-icon-for-catalog-entity"
+                  id="hotbar-icon-for-catalog-entity"
+                  style="width: 40px; height: 40px; background-color: rgb(61, 144, 206);"
                 >
-                  Ca
+                  <i
+                    class="Icon material focusable"
+                  >
+                    <span
+                      class="icon"
+                      data-icon-name="view_list"
+                    >
+                      view_list
+                    </span>
+                  </i>
                 </div>
+                <i
+                  class="Icon badge material focusable"
+                >
+                  <span
+                    class="icon"
+                    data-icon-name="settings"
+                  >
+                    settings
+                  </span>
+                </i>
               </div>
             </div>
           </div>
@@ -3289,22 +3369,42 @@ exports[`listing active helm repositories in preferences when navigating to pref
           class="HotbarItems flex column gaps"
         >
           <div
-            class="HotbarCell isDraggingOwner animateDown"
+            class="HotbarCell animateDown"
             index="0"
           >
             <div
               style="z-index: 12; position: absolute;"
             >
               <div
-                class="HotbarIcon contextMenuAvailable"
+                class="HotbarIcon"
               >
                 <div
-                  class="Avatar rounded disabled avatar"
-                  id="hotbarIcon-hotbar-icon-catalog-entity"
-                  style="width: 40px; height: 40px; background: rgb(5, 1, 130);"
+                  class="Avatar rounded avatar"
+                  data-testid="hotbar-icon-for-catalog-entity"
+                  id="hotbar-icon-for-catalog-entity"
+                  style="width: 40px; height: 40px; background-color: rgb(61, 144, 206);"
                 >
-                  Ca
+                  <i
+                    class="Icon material focusable"
+                  >
+                    <span
+                      class="icon"
+                      data-icon-name="view_list"
+                    >
+                      view_list
+                    </span>
+                  </i>
                 </div>
+                <i
+                  class="Icon badge material focusable"
+                >
+                  <span
+                    class="icon"
+                    data-icon-name="settings"
+                  >
+                    settings
+                  </span>
+                </i>
               </div>
             </div>
           </div>
@@ -4020,22 +4120,42 @@ exports[`listing active helm repositories in preferences when navigating to pref
           class="HotbarItems flex column gaps"
         >
           <div
-            class="HotbarCell isDraggingOwner animateDown"
+            class="HotbarCell animateDown"
             index="0"
           >
             <div
               style="z-index: 12; position: absolute;"
             >
               <div
-                class="HotbarIcon contextMenuAvailable"
+                class="HotbarIcon"
               >
                 <div
-                  class="Avatar rounded disabled avatar"
-                  id="hotbarIcon-hotbar-icon-catalog-entity"
-                  style="width: 40px; height: 40px; background: rgb(5, 1, 130);"
+                  class="Avatar rounded avatar"
+                  data-testid="hotbar-icon-for-catalog-entity"
+                  id="hotbar-icon-for-catalog-entity"
+                  style="width: 40px; height: 40px; background-color: rgb(61, 144, 206);"
                 >
-                  Ca
+                  <i
+                    class="Icon material focusable"
+                  >
+                    <span
+                      class="icon"
+                      data-icon-name="view_list"
+                    >
+                      view_list
+                    </span>
+                  </i>
                 </div>
+                <i
+                  class="Icon badge material focusable"
+                >
+                  <span
+                    class="icon"
+                    data-icon-name="settings"
+                  >
+                    settings
+                  </span>
+                </i>
               </div>
             </div>
           </div>
@@ -4796,22 +4916,42 @@ exports[`listing active helm repositories in preferences when navigating to pref
           class="HotbarItems flex column gaps"
         >
           <div
-            class="HotbarCell isDraggingOwner animateDown"
+            class="HotbarCell animateDown"
             index="0"
           >
             <div
               style="z-index: 12; position: absolute;"
             >
               <div
-                class="HotbarIcon contextMenuAvailable"
+                class="HotbarIcon"
               >
                 <div
-                  class="Avatar rounded disabled avatar"
-                  id="hotbarIcon-hotbar-icon-catalog-entity"
-                  style="width: 40px; height: 40px; background: rgb(5, 1, 130);"
+                  class="Avatar rounded avatar"
+                  data-testid="hotbar-icon-for-catalog-entity"
+                  id="hotbar-icon-for-catalog-entity"
+                  style="width: 40px; height: 40px; background-color: rgb(61, 144, 206);"
                 >
-                  Ca
+                  <i
+                    class="Icon material focusable"
+                  >
+                    <span
+                      class="icon"
+                      data-icon-name="view_list"
+                    >
+                      view_list
+                    </span>
+                  </i>
                 </div>
+                <i
+                  class="Icon badge material focusable"
+                >
+                  <span
+                    class="icon"
+                    data-icon-name="settings"
+                  >
+                    settings
+                  </span>
+                </i>
               </div>
             </div>
           </div>
@@ -5419,22 +5559,42 @@ exports[`listing active helm repositories in preferences when navigating to pref
           class="HotbarItems flex column gaps"
         >
           <div
-            class="HotbarCell isDraggingOwner animateDown"
+            class="HotbarCell animateDown"
             index="0"
           >
             <div
               style="z-index: 12; position: absolute;"
             >
               <div
-                class="HotbarIcon contextMenuAvailable"
+                class="HotbarIcon"
               >
                 <div
-                  class="Avatar rounded disabled avatar"
-                  id="hotbarIcon-hotbar-icon-catalog-entity"
-                  style="width: 40px; height: 40px; background: rgb(5, 1, 130);"
+                  class="Avatar rounded avatar"
+                  data-testid="hotbar-icon-for-catalog-entity"
+                  id="hotbar-icon-for-catalog-entity"
+                  style="width: 40px; height: 40px; background-color: rgb(61, 144, 206);"
                 >
-                  Ca
+                  <i
+                    class="Icon material focusable"
+                  >
+                    <span
+                      class="icon"
+                      data-icon-name="view_list"
+                    >
+                      view_list
+                    </span>
+                  </i>
                 </div>
+                <i
+                  class="Icon badge material focusable"
+                >
+                  <span
+                    class="icon"
+                    data-icon-name="settings"
+                  >
+                    settings
+                  </span>
+                </i>
               </div>
             </div>
           </div>
@@ -6042,22 +6202,42 @@ exports[`listing active helm repositories in preferences when navigating to pref
           class="HotbarItems flex column gaps"
         >
           <div
-            class="HotbarCell isDraggingOwner animateDown"
+            class="HotbarCell animateDown"
             index="0"
           >
             <div
               style="z-index: 12; position: absolute;"
             >
               <div
-                class="HotbarIcon contextMenuAvailable"
+                class="HotbarIcon"
               >
                 <div
-                  class="Avatar rounded disabled avatar"
-                  id="hotbarIcon-hotbar-icon-catalog-entity"
-                  style="width: 40px; height: 40px; background: rgb(5, 1, 130);"
+                  class="Avatar rounded avatar"
+                  data-testid="hotbar-icon-for-catalog-entity"
+                  id="hotbar-icon-for-catalog-entity"
+                  style="width: 40px; height: 40px; background-color: rgb(61, 144, 206);"
                 >
-                  Ca
+                  <i
+                    class="Icon material focusable"
+                  >
+                    <span
+                      class="icon"
+                      data-icon-name="view_list"
+                    >
+                      view_list
+                    </span>
+                  </i>
                 </div>
+                <i
+                  class="Icon badge material focusable"
+                >
+                  <span
+                    class="icon"
+                    data-icon-name="settings"
+                  >
+                    settings
+                  </span>
+                </i>
               </div>
             </div>
           </div>
@@ -6665,22 +6845,42 @@ exports[`listing active helm repositories in preferences when navigating to pref
           class="HotbarItems flex column gaps"
         >
           <div
-            class="HotbarCell isDraggingOwner animateDown"
+            class="HotbarCell animateDown"
             index="0"
           >
             <div
               style="z-index: 12; position: absolute;"
             >
               <div
-                class="HotbarIcon contextMenuAvailable"
+                class="HotbarIcon"
               >
                 <div
-                  class="Avatar rounded disabled avatar"
-                  id="hotbarIcon-hotbar-icon-catalog-entity"
-                  style="width: 40px; height: 40px; background: rgb(5, 1, 130);"
+                  class="Avatar rounded avatar"
+                  data-testid="hotbar-icon-for-catalog-entity"
+                  id="hotbar-icon-for-catalog-entity"
+                  style="width: 40px; height: 40px; background-color: rgb(61, 144, 206);"
                 >
-                  Ca
+                  <i
+                    class="Icon material focusable"
+                  >
+                    <span
+                      class="icon"
+                      data-icon-name="view_list"
+                    >
+                      view_list
+                    </span>
+                  </i>
                 </div>
+                <i
+                  class="Icon badge material focusable"
+                >
+                  <span
+                    class="icon"
+                    data-icon-name="settings"
+                  >
+                    settings
+                  </span>
+                </i>
               </div>
             </div>
           </div>

src/features/helm-charts/__snapshots__/remove-helm-repository-from-list-of-active-repository-in-preferences.test.ts.snap

@@ -581,22 +581,42 @@ exports[`remove helm repository from list of active repositories in preferences
           class="HotbarItems flex column gaps"
         >
           <div
-            class="HotbarCell isDraggingOwner animateDown"
+            class="HotbarCell animateDown"
             index="0"
           >
             <div
               style="z-index: 12; position: absolute;"
             >
               <div
-                class="HotbarIcon contextMenuAvailable"
+                class="HotbarIcon"
               >
                 <div
-                  class="Avatar rounded disabled avatar"
-                  id="hotbarIcon-hotbar-icon-catalog-entity"
-                  style="width: 40px; height: 40px; background: rgb(5, 1, 130);"
+                  class="Avatar rounded avatar"
+                  data-testid="hotbar-icon-for-catalog-entity"
+                  id="hotbar-icon-for-catalog-entity"
+                  style="width: 40px; height: 40px; background-color: rgb(61, 144, 206);"
                 >
-                  Ca
+                  <i
+                    class="Icon material focusable"
+                  >
+                    <span
+                      class="icon"
+                      data-icon-name="view_list"
+                    >
+                      view_list
+                    </span>
+                  </i>
                 </div>
+                <i
+                  class="Icon badge material focusable"
+                >
+                  <span
+                    class="icon"
+                    data-icon-name="settings"
+                  >
+                    settings
+                  </span>
+                </i>
               </div>
             </div>
           </div>
@@ -1295,22 +1315,42 @@ exports[`remove helm repository from list of active repositories in preferences
           class="HotbarItems flex column gaps"
         >
           <div
-            class="HotbarCell isDraggingOwner animateDown"
+            class="HotbarCell animateDown"
             index="0"
           >
             <div
               style="z-index: 12; position: absolute;"
             >
               <div
-                class="HotbarIcon contextMenuAvailable"
+                class="HotbarIcon"
               >
                 <div
-                  class="Avatar rounded disabled avatar"
-                  id="hotbarIcon-hotbar-icon-catalog-entity"
-                  style="width: 40px; height: 40px; background: rgb(5, 1, 130);"
+                  class="Avatar rounded avatar"
+                  data-testid="hotbar-icon-for-catalog-entity"
+                  id="hotbar-icon-for-catalog-entity"
+                  style="width: 40px; height: 40px; background-color: rgb(61, 144, 206);"
                 >
-                  Ca
+                  <i
+                    class="Icon material focusable"
+                  >
+                    <span
+                      class="icon"
+                      data-icon-name="view_list"
+                    >
+                      view_list
+                    </span>
+                  </i>
                 </div>
+                <i
+                  class="Icon badge material focusable"
+                >
+                  <span
+                    class="icon"
+                    data-icon-name="settings"
+                  >
+                    settings
+                  </span>
+                </i>
               </div>
             </div>
           </div>
@@ -2009,22 +2049,42 @@ exports[`remove helm repository from list of active repositories in preferences
           class="HotbarItems flex column gaps"
         >
           <div
-            class="HotbarCell isDraggingOwner animateDown"
+            class="HotbarCell animateDown"
             index="0"
           >
             <div
               style="z-index: 12; position: absolute;"
             >
               <div
-                class="HotbarIcon contextMenuAvailable"
+                class="HotbarIcon"
               >
                 <div
-                  class="Avatar rounded disabled avatar"
-                  id="hotbarIcon-hotbar-icon-catalog-entity"
-                  style="width: 40px; height: 40px; background: rgb(5, 1, 130);"
+                  class="Avatar rounded avatar"
+                  data-testid="hotbar-icon-for-catalog-entity"
+                  id="hotbar-icon-for-catalog-entity"
+                  style="width: 40px; height: 40px; background-color: rgb(61, 144, 206);"
                 >
-                  Ca
+                  <i
+                    class="Icon material focusable"
+                  >
+                    <span
+                      class="icon"
+                      data-icon-name="view_list"
+                    >
+                      view_list
+                    </span>
+                  </i>
                 </div>
+                <i
+                  class="Icon badge material focusable"
+                >
+                  <span
+                    class="icon"
+                    data-icon-name="settings"
+                  >
+                    settings
+                  </span>
+                </i>
               </div>
             </div>
           </div>
@@ -2740,22 +2800,42 @@ exports[`remove helm repository from list of active repositories in preferences
           class="HotbarItems flex column gaps"
         >
           <div
-            class="HotbarCell isDraggingOwner animateDown"
+            class="HotbarCell animateDown"
             index="0"
           >
             <div
               style="z-index: 12; position: absolute;"
             >
               <div
-                class="HotbarIcon contextMenuAvailable"
+                class="HotbarIcon"
               >
                 <div
-                  class="Avatar rounded disabled avatar"
-                  id="hotbarIcon-hotbar-icon-catalog-entity"
-                  style="width: 40px; height: 40px; background: rgb(5, 1, 130);"
+                  class="Avatar rounded avatar"
+                  data-testid="hotbar-icon-for-catalog-entity"
+                  id="hotbar-icon-for-catalog-entity"
+                  style="width: 40px; height: 40px; background-color: rgb(61, 144, 206);"
                 >
-                  Ca
+                  <i
+                    class="Icon material focusable"
+                  >
+                    <span
+                      class="icon"
+                      data-icon-name="view_list"
+                    >
+                      view_list
+                    </span>
+                  </i>
                 </div>
+                <i
+                  class="Icon badge material focusable"
+                >
+                  <span
+                    class="icon"
+                    data-icon-name="settings"
+                  >
+                    settings
+                  </span>
+                </i>
               </div>
             </div>
           </div>

src/features/helm-charts/add-custom-helm-repository-in-preferences.test.ts

@@ -18,7 +18,6 @@ import isPathInjectable from "../../renderer/components/input/validators/is-path
 import showSuccessNotificationInjectable from "../../renderer/components/notifications/show-success-notification.injectable";
 import showErrorNotificationInjectable from "../../renderer/components/notifications/show-error-notification.injectable";
 import type { AsyncResult } from "../../common/utils/async-result";
-import { testUsingFakeTime } from "../../common/test-utils/use-fake-time";
 
 describe("add custom helm repository in preferences", () => {
   let builder: ApplicationBuilder;
@@ -29,11 +28,11 @@ describe("add custom helm repository in preferences", () => {
   let getActiveHelmRepositoriesMock: AsyncFnMock<() => Promise<AsyncResult<HelmRepo[]>>>;
 
   beforeEach(async () => {
-    jest.useFakeTimers();
-
-    builder = getApplicationBuilder();
-
-    testUsingFakeTime("2021-01-01 12:00:00");
+    builder = getApplicationBuilder({
+      useFakeTime: {
+        dateTime: "2021-01-01 12:00:00",
+      },
+    });
 
     execFileMock = asyncFn();
     getActiveHelmRepositoriesMock = asyncFn();

src/features/helm-charts/add-helm-repository-from-list-in-preferences.test.ts

@@ -27,7 +27,11 @@ describe("add helm repository from list in preferences", () => {
   let callForPublicHelmRepositoriesMock: AsyncFnMock<() => Promise<HelmRepo[]>>;
 
   beforeEach(async () => {
-    builder = getApplicationBuilder();
+    builder = getApplicationBuilder({
+      useFakeTime: {
+        autoAdvance: true,
+      },
+    });
 
     execFileMock = asyncFn();
     getActiveHelmRepositoriesMock = asyncFn();
@@ -114,7 +118,7 @@ describe("add helm repository from list in preferences", () => {
           beforeEach(async () => {
             getActiveHelmRepositoriesMock.mockClear();
 
-            builder.select.selectOption(
+            await builder.select.selectOption(
               "selection-of-active-public-helm-repository",
               "Some to be added repository",
             );
@@ -235,11 +239,11 @@ describe("add helm repository from list in preferences", () => {
                 });
 
                 describe("when active repository is selected", () => {
-                  beforeEach(() => {
+                  beforeEach(async () => {
                     execFileMock.mockClear();
                     getActiveHelmRepositoriesMock.mockClear();
 
-                    builder.select.selectOption(
+                    await builder.select.selectOption(
                       "selection-of-active-public-helm-repository",
                       "Some already active repository",
                     );