feat: New / Refactor "Nav Mixin" (#9283)

* [FR/P-UI] New / Refactor "Nav Mixin"
Fixes #5269

* remove logging

* fix sample item that causes issues

* Add test coverage

* Update src/frontend/src/components/plugins/PluginUIFeatureTypes.ts

Co-authored-by: Lukas <76838159+wolflu05@users.noreply.github.com>

* [FR/P-UI] New / Refactor "Nav Mixin"
Fixes #5269

* fix style

* remove requirement for source

* fix import

* bump api version

---------

Co-authored-by: Lukas <76838159+wolflu05@users.noreply.github.com>

src/frontend/src/components/calendar/OrderCalendar.tsx

@@ -7,8 +7,7 @@ import { ModelInformationDict } from '@lib/enums/ModelInformation';
 import type { ModelType } from '@lib/enums/ModelType';
 import type { UserRoles } from '@lib/enums/Roles';
 import { apiUrl } from '@lib/functions/Api';
-import { getDetailUrl } from '@lib/functions/Navigation';
-import { navigateToLink } from '@lib/functions/Navigation';
+import { getDetailUrl, navigateToLink } from '@lib/functions/Navigation';
 import type { TableFilter } from '@lib/types/Filters';
 import { t } from '@lingui/core/macro';
 import { ActionIcon, Group, Text } from '@mantine/core';

src/frontend/src/components/nav/Header.tsx

@@ -1,3 +1,7 @@
+import { ApiEndpoints } from '@lib/enums/ApiEndpoints';
+import { apiUrl } from '@lib/functions/Api';
+import { navigateToLink } from '@lib/functions/Navigation';
+import { t } from '@lingui/core/macro';
 import {
   ActionIcon,
   Container,
@@ -12,13 +16,10 @@ import { IconBell, IconSearch } from '@tabler/icons-react';
 import { useQuery } from '@tanstack/react-query';
 import { type ReactNode, useEffect, useMemo, useState } from 'react';
 import { useMatch, useNavigate } from 'react-router-dom';
-
-import { ApiEndpoints } from '@lib/enums/ApiEndpoints';
-import { apiUrl } from '@lib/functions/Api';
-import { navigateToLink } from '@lib/functions/Navigation';
-import { t } from '@lingui/core/macro';
 import { api } from '../../App';
+import type { NavigationUIFeature } from '../../components/plugins/PluginUIFeatureTypes';
 import { getNavTabs } from '../../defaults/links';
+import { usePluginUIFeature } from '../../hooks/UsePluginUIFeature';
 import * as classes from '../../main.css';
 import { useServerApiState } from '../../states/ApiState';
 import { useLocalState } from '../../states/LocalState';
@@ -180,10 +181,18 @@ function NavTabs() {
     [userSettings]
   );
 
+  const extraNavs = usePluginUIFeature<NavigationUIFeature>({
+    featureType: 'navigation',
+    context: {}
+  });
+
   const tabs: ReactNode[] = useMemo(() => {
     const _tabs: ReactNode[] = [];
 
-    navTabs.forEach((tab) => {
+    const mainNavTabs = getNavTabs(user);
+
+    // static content
+    mainNavTabs.forEach((tab) => {
       if (tab.role && !user.hasViewRole(tab.role)) {
         return;
       }
@@ -206,9 +215,23 @@ function NavTabs() {
         </Tabs.Tab>
       );
     });
+    // dynamic content
+    extraNavs.forEach((nav) => {
+      _tabs.push(
+        <Tabs.Tab
+          value={nav.options.title}
+          key={nav.options.key}
+          onClick={(event: any) =>
+            navigateToLink(nav.options.options.url, navigate, event)
+          }
+        >
+          {nav.options.title}
+        </Tabs.Tab>
+      );
+    });
 
     return _tabs;
-  }, [navTabs, user, withIcons]);
+  }, [extraNavs, navTabs, user, withIcons]);
 
   return (
     <Tabs

src/frontend/src/components/plugins/PluginUIFeature.tsx

@@ -28,7 +28,8 @@ export enum PluginUIFeatureType {
   dashboard = 'dashboard',
   panel = 'panel',
   template_editor = 'template_editor',
-  template_preview = 'template_preview'
+  template_preview = 'template_preview',
+  navigation = 'navigation'
 }
 
 /**

src/frontend/src/components/plugins/PluginUIFeatureTypes.ts

@@ -76,3 +76,11 @@ export type TemplatePreviewUIFeature = {
   };
   featureReturnType: undefined;
 };
+
+export type NavigationUIFeature = {
+  featureType: 'navigation';
+  requestContext: {};
+  responseOptions: PluginUIFeature;
+  featureContext: {};
+  featureReturnType: undefined;
+};