feature(menu-bar): external links to dev (#505)

* feat: add support for external links configuration via environment variable

* docs: update configuration settings to improve feature flag descriptions

* feat: integrate external links into environment variables configuration

* feat: add external links configuration description in main menu

* test: update DynamicIcon.spec.tsx to check attributes of base64 image

* feat: enhance DynamicIcon component with alt text for accessibility; update MainMenu to use new label parsing; validate external link properties in environment configuration; remove external links description from locale files; update configuration documentation

* feat: validate external link URLs in parseExternalLinks function

* feat: enhance parseExternalLinks function with detailed validation and logging for external link items

Author: NilsXitaso

.env.local

@@ -33,7 +33,9 @@ NEXTAUTH_URL=              "http://localhost:3000"
 BASYX_RBAC_SEC_SM_API_URL= "http://localhost:8089"
 
 IMPRINT_URL=        ""
-DATA_PRIVACY_URL=   "" 
+DATA_PRIVACY_URL=   ""
+EXTERNAL_LINKS=     ""
 
 EXPERIMENTAL_PRODUCT_VIEW_FEATURE_FLAG=        "false"
 EXPERIMENTAL_HIGHLIGHT_DATA_FLAG=              "false"
+

src/app/EnvProvider.tsx

@@ -39,6 +39,7 @@ export const initialEnvValues: EnvironmentalVariables = {
     KEYCLOAK_CLIENT_ID: undefined,
     SERIALIZATION_API_URL: undefined,
     EXPERIMENTAL_HIGHLIGHT_DATA_FLAG: false,
+    EXTERNAL_LINKS: [],
 };
 
 const EnvContext = createContext(initialEnvValues);

src/app/[locale]/settings/_components/mnestix-infrastructure/DefaultInfrastructure.tsx

@@ -87,14 +87,18 @@ export function DefaultInfrastructure() {
                         {t('form.endpoints')}
                     </Typography>
                     <Box>
-                        {CONNECTION_TYPES.map((type) => (
-                            <Box key={type.id} display="flex" gap={2} mb={1}>
-                                <Typography sx={{ minWidth: 320 }} variant="h5">
-                                    {type.label}
-                                </Typography>
-                                <Typography>{env[ENV_KEY_BY_CONNECTION_ID[type.id]] || '-'}</Typography>
-                            </Box>
-                        ))}
+                        {CONNECTION_TYPES.map((type) => {
+                            const value = env[ENV_KEY_BY_CONNECTION_ID[type.id]];
+                            const displayValue = typeof value === 'string' ? value : '-';
+                            return (
+                                <Box key={type.id} display="flex" gap={2} mb={1}>
+                                    <Typography sx={{ minWidth: 320 }} variant="h5">
+                                        {type.label}
+                                    </Typography>
+                                    <Typography>{displayValue}</Typography>
+                                </Box>
+                            );
+                        })}
                     </Box>
                 </Box>
             </Collapse>

src/components/basics/DynamicIcon.spec.tsx

@@ -0,0 +1,51 @@
+import React from 'react';
+import { screen } from '@testing-library/react';
+import { DynamicIcon } from './DynamicIcon';
+import { Link } from '@mui/icons-material';
+import { expect } from '@jest/globals';
+import { CustomRender } from 'test-utils/CustomRender';
+
+describe('DynamicIcon', () => {
+    it('should render Material-UI icon by name', () => {
+        const { container } = CustomRender(<DynamicIcon iconName="OpenInNew" />);
+        const svgElement = container.querySelector('svg');
+        expect(svgElement).toBeInTheDocument();
+    });
+
+    it('should render fallback icon when icon name is not found', () => {
+        const fallback = <Link data-testid="fallback-icon" />;
+        CustomRender(<DynamicIcon iconName="NonExistentIcon" fallback={fallback} />);
+        expect(screen.getByTestId('fallback-icon')).toBeInTheDocument();
+    });
+
+    it('should render base64 image when provided', () => {
+        const base64Image =
+            'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mNk+M9QDwADhgGAWjR9awAAAABJRU5ErkJggg==';
+        CustomRender(<DynamicIcon iconName={base64Image} />);
+        const imgElement = screen.getByRole('img');
+        expect(imgElement).toBeInTheDocument();
+        expect(imgElement).toHaveAttribute('src', base64Image);
+    });
+
+    it('should render nothing when no icon name is provided and no fallback', () => {
+        const { container } = CustomRender(<DynamicIcon />);
+        expect(container.firstChild).toBeNull();
+    });
+
+    it('should render fallback when no icon name is provided', () => {
+        const fallback = <Link data-testid="fallback-icon" />;
+        CustomRender(<DynamicIcon fallback={fallback} />);
+        expect(screen.getByTestId('fallback-icon')).toBeInTheDocument();
+    });
+
+    it('should apply correct styling to base64 image', () => {
+        const base64Image =
+            'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mNk+M9QDwADhgGAWjR9awAAAABJRU5ErkJggg==';
+        CustomRender(<DynamicIcon iconName={base64Image} />);
+        const imgElement = screen.getByRole('img');
+        expect(imgElement).toHaveAttribute('src', base64Image);
+        expect(imgElement).toHaveAttribute('width', '24');
+        expect(imgElement).toHaveAttribute('height', '24');
+        expect(imgElement).toHaveStyle({ objectFit: 'contain' });
+    });
+});

src/components/basics/DynamicIcon.tsx

@@ -0,0 +1,48 @@
+import React from 'react';
+import * as MuiIcons from '@mui/icons-material';
+import Image from 'next/image';
+
+/**
+ * Props for the DynamicIcon component
+ */
+interface DynamicIconProps {
+    /**
+     * Name of the Material-UI icon or base64 image data
+     */
+    iconName?: string;
+    /**
+     * Fallback icon if the specified icon is not found
+     */
+    fallback?: React.ReactElement;
+    /**
+     * Alt text for the image (for accessibility)
+     */
+    altText?: string;
+}
+
+/**
+ * Component that dynamically renders a Material-UI icon based on its name
+ * or displays an image if a base64 string is provided
+ */
+export function DynamicIcon({ iconName, fallback, altText = 'icon' }: DynamicIconProps) {
+    if (!iconName) {
+        return fallback || null;
+    }
+
+    // Check if it's a base64 image
+    if (iconName.startsWith('data:image/')) {
+        return (
+            <Image src={iconName} alt={altText} width={24} height={24} style={{ objectFit: 'contain' }} unoptimized />
+        );
+    }
+
+    // Try to find the icon in Material-UI icons
+    const IconComponent = (MuiIcons as Record<string, React.ComponentType>)[iconName];
+
+    if (IconComponent) {
+        return <IconComponent />;
+    }
+
+    // Return fallback if icon not found
+    return fallback || null;
+}

src/layout/menu/MainMenu.spec.tsx

@@ -15,6 +15,55 @@ const mockEnvVariables = jest.fn(() => {
         AAS_LIST_FEATURE_FLAG: true,
         MNESTIX_AAS_GENERATOR_API_URL: 'http://localhost:5064/backend',
         AUTHENTICATION_FEATURE_FLAG: true,
+        EXTERNAL_LINKS: [],
+    };
+});
+
+const mockEnvVariablesWithExternalLinks = jest.fn(() => {
+    return {
+        AAS_LIST_FEATURE_FLAG: true,
+        MNESTIX_BACKEND_API_URL: 'http://localhost:5064/backend',
+        AUTHENTICATION_FEATURE_FLAG: true,
+        EXTERNAL_LINKS: [
+            {
+                label: 'Test External Link',
+                url: 'https://example.com',
+                icon: 'OpenInNew',
+                target: '_blank',
+            },
+            {
+                label: 'Another Link',
+                url: 'https://another-example.com',
+                icon: 'Link',
+            },
+        ],
+    };
+});
+
+const mockEnvVariablesWithI18nExternalLinks = jest.fn(() => {
+    return {
+        AAS_LIST_FEATURE_FLAG: true,
+        MNESTIX_BACKEND_API_URL: 'http://localhost:5064/backend',
+        AUTHENTICATION_FEATURE_FLAG: true,
+        EXTERNAL_LINKS: [
+            {
+                label: {
+                    en: 'Documentation',
+                    de: 'Dokumentation',
+                },
+                url: 'https://docs.example.com',
+                icon: 'MenuBook',
+                target: '_blank',
+            },
+            {
+                label: {
+                    en: 'Support',
+                    de: 'Unterstützung',
+                },
+                url: 'https://support.example.com',
+                icon: 'Help',
+            },
+        ],
     };
 });
 
@@ -107,4 +156,43 @@ describe('MainMenu', () => {
             expect(list).toBeInTheDocument();
         });
     });
+
+    describe('external links', () => {
+        it('should render external links from environment configuration', () => {
+            (useEnv as jest.Mock).mockImplementation(mockEnvVariablesWithExternalLinks);
+            (useAuth as jest.Mock).mockImplementation(mockUseAuthAdmin);
+            renderAndOpenMenu();
+
+            const externalLink1 = screen.getByTestId('https://example.com');
+            expect(externalLink1).toBeInTheDocument();
+            expect(externalLink1).toHaveTextContent('Test External Link');
+
+            const externalLink2 = screen.getByTestId('https://another-example.com');
+            expect(externalLink2).toBeInTheDocument();
+            expect(externalLink2).toHaveTextContent('Another Link');
+        });
+
+        it('should render i18n external links with correct language', () => {
+            (useEnv as jest.Mock).mockImplementation(mockEnvVariablesWithI18nExternalLinks);
+            (useAuth as jest.Mock).mockImplementation(mockUseAuthAdmin);
+            renderAndOpenMenu();
+
+            const docLink = screen.getByTestId('https://docs.example.com');
+            expect(docLink).toBeInTheDocument();
+            expect(docLink).toHaveTextContent('Documentation'); // English is default in tests
+
+            const supportLink = screen.getByTestId('https://support.example.com');
+            expect(supportLink).toBeInTheDocument();
+            expect(supportLink).toHaveTextContent('Support');
+        });
+
+        it('should not render external links when EXTERNAL_LINKS is empty', () => {
+            (useEnv as jest.Mock).mockImplementation(mockEnvVariables);
+            (useAuth as jest.Mock).mockImplementation(mockUseAuthAdmin);
+            renderAndOpenMenu();
+
+            const externalLink = screen.queryByTestId('https://example.com');
+            expect(externalLink).not.toBeInTheDocument();
+        });
+    });
 });

src/layout/menu/MainMenu.tsx

@@ -1,6 +1,6 @@
 import MenuIcon from '@mui/icons-material/Menu';
 import { alpha, Box, Divider, Drawer, IconButton, List, styled, Typography } from '@mui/material';
-import { Dashboard, OpenInNew, Settings } from '@mui/icons-material';
+import { Dashboard, OpenInNew, Settings, Link } from '@mui/icons-material';
 import React, { useState } from 'react';
 import { useAuth } from 'lib/hooks/UseAuth';
 import { TemplateIcon } from 'components/custom-icons/TemplateIcon';
@@ -10,8 +10,9 @@ import ListIcon from '@mui/icons-material/List';
 import packageJson from '../../../package.json';
 import { useEnv } from 'app/EnvProvider';
 import BottomMenu from 'layout/menu/BottomMenu';
-import { useTranslations } from 'next-intl';
+import { useTranslations, useLocale } from 'next-intl';
 import { MnestixRole } from 'components/authentication/AllowedRoutes';
+import { DynamicIcon } from 'components/basics/DynamicIcon';
 
 const StyledDrawer = styled(Drawer)(({ theme }) => ({
     '.MuiDrawer-paper': {
@@ -63,6 +64,7 @@ export default function MainMenu() {
     const mnestixRole = auth.getAccount()?.user.mnestixRole ?? MnestixRole.MnestixGuest;
     const allowedRoutes = auth.getAccount()?.user.allowedRoutes ?? [];
     const t = useTranslations('navigation.mainMenu');
+    const locale = useLocale();
 
     const getAuthName = () => {
         const user = auth?.getAccount()?.user;
@@ -121,6 +123,23 @@ export default function MainMenu() {
         basicMenu.push(settingsMenu);
     }
 
+    if (env.EXTERNAL_LINKS && env.EXTERNAL_LINKS.length > 0) {
+        env.EXTERNAL_LINKS.forEach((link) => {
+            const label =
+                typeof link.label === 'string'
+                    ? link.label
+                    : (link.label[locale] ?? link.label['en'] ?? Object.values(link.label)[0]);
+            const externalLink: MenuListItemProps = {
+                label,
+                to: link.url,
+                icon: <DynamicIcon iconName={link.icon} fallback={<Link />} />,
+                external: true,
+                target: link.target || '_blank',
+            };
+            basicMenu.push(externalLink);
+        });
+    }
+
     const guestMoreMenu: MenuListItemProps[] = [
         {
             label: 'mnestix.io',