Fix: preventing <App/> to render on cluster refresh (#2253)

* Removing @observer decorator from <App/>

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

* Add observer wrapper to <MainLayoutHeader/>

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

* Fix eslint claim

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

* Moving extension route renderers to components

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

* Clean up

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

* Removing external observables out from App render()

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

* Fetching hosted cluster inside Command Palette

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

* Setting route lists explicitly
To avoid using observable data within tabRoutes arrays

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

* Review fixes

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

src/renderer/components/layout/main-layout-header.tsx

@@ -1,3 +1,4 @@
+import { observer } from "mobx-react";
 import React from "react";
 
 import { clusterSettingsURL } from "../+cluster-settings";
@@ -11,7 +12,7 @@ interface Props {
   className?: string
 }
 
-export function MainLayoutHeader({ cluster, className }: Props) {
+export const MainLayoutHeader = observer(({ cluster, className }: Props) => {
   return (
     <header className={cssNames("flex gaps align-center justify-space-between", className)}>
       <span className="cluster">{cluster.name}</span>
@@ -29,4 +30,4 @@ export function MainLayoutHeader({ cluster, className }: Props) {
       />
     </header>
   );
-}
+});