Extensions-api: initial hello-world example (#817)

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

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

@@ -17,7 +17,7 @@ export interface TabRoute extends RouteProps {
   url: string;
 }
 
-interface Props {
+export interface MainLayoutProps {
   className?: any;
   tabs?: TabRoute[];
   footer?: React.ReactNode;
@@ -27,7 +27,7 @@ interface Props {
 }
 
 @observer
-export class MainLayout extends React.Component<Props> {
+export class MainLayout extends React.Component<MainLayoutProps> {
   public storage = createStorage("main_layout", { pinnedSidebar: true });
 
   @observable isPinned = this.storage.get().pinnedSidebar;

src/renderer/components/layout/sidebar.tsx

@@ -28,6 +28,7 @@ import { CrdList, crdResourcesRoute, crdRoute, crdURL } from "../+custom-resourc
 import { CustomResources } from "../+custom-resources/custom-resources";
 import { navigation } from "../../navigation";
 import { isAllowedResource } from "../../../common/rbac"
+import { dynamicPages } from "../../../extensions/register-page";
 
 const SidebarContext = React.createContext<SidebarContextValue>({ pinned: false });
 type SidebarContextValue = {
@@ -183,6 +184,18 @@ export class Sidebar extends React.Component<Props> {
             >
               {this.renderCustomResources()}
             </SidebarNavItem>
+            {dynamicPages.clusterPages.map(({ path, menuTitle, components: { MenuIcon } }) => {
+              return (
+                <SidebarNavItem
+                  key={path}
+                  id={`extension-${path}`}
+                  url={path}
+                  routePath={path}
+                  text={menuTitle}
+                  icon={<MenuIcon/>}
+                />
+              )
+            })}
           </div>
         </div>
       </SidebarContext.Provider>