Create infra for plugins

webui/src/exported/lakefsApp.tsx

@@ -0,0 +1,18 @@
+import React from 'react';
+import { PluginManager } from "./plugins/pluginManager";
+import { IndexPage } from "../pages";
+import { PluginManagerProvider } from "./plugins/pluginsContext";
+
+interface AppProps {
+    pluginManager: PluginManager;
+}
+
+const LakeFSApp: React.FC<AppProps> = ({pluginManager}) => {
+    return (
+        <PluginManagerProvider pluginManager={pluginManager}>
+            <IndexPage/>
+        </PluginManagerProvider>
+    );
+};
+
+export default LakeFSApp;

webui/src/exported/plugins/pluginAppTabs.ts

@@ -0,0 +1,11 @@
+import React from "react";
+
+export interface AppTab {
+    id: string;
+    name: string;
+    component: React.FC;
+}
+
+export interface PluginAppTabs {
+    tabs: AppTab[];
+}

webui/src/exported/plugins/pluginManager.ts

@@ -0,0 +1,13 @@
+import { PluginAppTabs } from './pluginAppTabs';
+
+export class PluginManager {
+    private _appTabs: PluginAppTabs | null = null;
+
+    registerPluginAppTabs(pluginAppTabs: PluginAppTabs) {
+        this._appTabs = pluginAppTabs;
+    }
+
+    get appTabs(): PluginAppTabs | null {
+        return this._appTabs;
+    }
+}

webui/src/exported/plugins/pluginsContext.tsx

@@ -0,0 +1,25 @@
+import React, { createContext, useContext } from 'react';
+import { PluginManager } from "./pluginManager";
+
+const PluginsContext = createContext<PluginManager | undefined>(undefined);
+
+interface PluginManagerProviderProps {
+    pluginManager: PluginManager;
+    children: React.ReactNode;
+}
+
+export const PluginManagerProvider: React.FC<PluginManagerProviderProps> = ({pluginManager, children}) => {
+    return (
+        <PluginsContext.Provider value={pluginManager}>
+            {children}
+        </PluginsContext.Provider>
+    );
+};
+
+export const usePluginManager = (): PluginManager => {
+    const context = useContext(PluginsContext);
+    if (!context) {
+        throw new Error('usePluginManager must be used within a PluginManagerProvider');
+    }
+    return context;
+};

webui/src/lib/components/navbar.jsx

@@ -9,6 +9,7 @@ import {Navbar, Nav, NavDropdown} from "react-bootstrap";
 import Container from "react-bootstrap/Container";
 import {useLoginConfigContext} from "../hooks/conf";
 import {FeedPersonIcon} from "@primer/octicons-react";
+import {usePluginManager} from "../../exported/plugins/pluginsContext";
 
 const NavUserInfo = () => {
     const { user, loading, error } = useUser();
@@ -65,6 +66,9 @@ const TopNavLink = ({ href, children }) => {
 };
 
 const TopNav = ({logged = true}) => {
+    const pluginManager = usePluginManager();
+    const pluginTabs = pluginManager.appTabs?.tabs;
+
     if (!logged) {
         return (
             <Navbar variant="dark" bg="dark" expand="md">
@@ -90,6 +94,9 @@ const TopNav = ({logged = true}) => {
                          navbarScroll>
                         <TopNavLink href="/repositories">Repositories</TopNavLink>
                         <TopNavLink href="/auth">Administration</TopNavLink>
+                        {pluginTabs?.map((tab) => (
+                            <TopNavLink href={"/" + tab.id}>{tab.name}</TopNavLink>
+                        ))}
                     </Nav>
 
                     <DarkModeToggle/>

webui/src/main.tsx

@@ -5,11 +5,14 @@ import { createRoot } from 'react-dom/client';
 import 'bootstrap/dist/css/bootstrap.css';
 import './styles/globals.css';
 
-// main page
-import {IndexPage} from './pages';
+// app and plugins system
+import LakeFSApp from "./exported/lakefsApp";
+import { PluginManager } from "./exported/plugins/pluginManager";
+
+const pluginManager = new PluginManager();
 
 const container = document.getElementById('root');
 if (!container) throw new Error("Failed to find root element!");
 
 const root = createRoot(container);
-root.render(<IndexPage />);
+root.render(<LakeFSApp pluginManager={pluginManager} />);

webui/src/pages/index.jsx

@@ -45,8 +45,12 @@ import Setup from "./setup";
 import {AuthLayout} from "../lib/components/auth/layout";
 import RepositoryActionPage from "./repositories/repository/actions/run";
 import {WithAppContext} from "../lib/hooks/appContext";
+import {usePluginManager} from "../exported/plugins/pluginsContext";
 
 export const IndexPage = () => {
+    const pluginManager = usePluginManager();
+    const pluginTabs = pluginManager.appTabs?.tabs;
+
     return (
         <Router>
             <WithAppContext>
@@ -114,6 +118,11 @@ export const IndexPage = () => {
                                 </Route>
                             </Route>
                         </Route>
+                        {pluginTabs?.map((tab) => (
+                            <Route path={tab.id} element={<Layout logged={true}/>}>
+                                <Route index element={<tab.component/>}/>
+                            </Route>
+                        ))}
                         <Route path="/setup" element={<Layout logged={false}/>}>
                             <Route index element={<Setup/>}/>
                             <Route path="*" element={<Setup/>}/>