feat: add library as beta to studio page header with news

frontend/app-development/enums/HeaderMenuItemKey.ts

@@ -5,5 +5,6 @@ export enum HeaderMenuItemKey {
   Text = 'top_menu.texts',
   Deploy = 'top_menu.deploy',
   ProcessEditor = 'top_menu.process_editor',
+  ContentLibrary = 'top_menu.content_library',
   None = '',
 }

frontend/app-development/features/overview/components/Navigation/Navigation.test.tsx

@@ -21,7 +21,7 @@ describe('Navigation', () => {
     });
 
     getFilteredMenuListForOverviewPage().forEach((link) => {
-      expect(screen.getByRole('link', { name: getLinkName(link) })).toBeInTheDocument();
+      expect(screen.getByRole('link', { name: textMock(link.key) })).toBeInTheDocument();
     });
   });
 
@@ -32,9 +32,9 @@ describe('Navigation', () => {
 
     getFilteredMenuListForOverviewPage().forEach((link) => {
       if (link.featureFlagName) {
-        expect(screen.queryByRole('link', { name: getLinkName(link) })).not.toBeInTheDocument();
+        expect(screen.queryByRole('link', { name: textMock(link.key) })).not.toBeInTheDocument();
       } else {
-        expect(screen.getByRole('link', { name: getLinkName(link) })).toBeInTheDocument();
+        expect(screen.getByRole('link', { name: textMock(link.key) })).toBeInTheDocument();
       }
     });
   });
@@ -47,11 +47,11 @@ describe('Navigation', () => {
     });
 
     getFilteredMenuListForOverviewPage().forEach((link) => {
-      expect(screen.getByRole('link', { name: getLinkName(link) })).toBeInTheDocument();
+      expect(screen.getByRole('link', { name: textMock(link.key) })).toBeInTheDocument();
     });
   });
 
-  it('renders "beta" tag for menu items that are tagges as beta', () => {
+  it('renders menu items that are tagged as beta, with isBeta class', () => {
     const betaItems = topBarMenuItem.filter((item) => !!item.isBeta);
 
     // ensure any feature flags are toggled on
@@ -62,18 +62,25 @@ describe('Navigation', () => {
     });
 
     betaItems.forEach((link) => {
-      expect(screen.getByRole('link', { name: `${textMock(link.key)} Beta` })).toBeInTheDocument();
+      expect(screen.getByRole('link', { name: textMock(link.key) })).toHaveClass('isBeta');
     });
   });
-});
 
-const getLinkName = (linkItem: HeaderMenuItem): string => {
-  let name = textMock(linkItem.key);
-  if (linkItem.isBeta) {
-    name = `${name} Beta`;
-  }
-  return name;
-};
+  it('renders menu items that are not tagged as beta, without isBeta class', () => {
+    const menuItemsNotBeta = getFilteredMenuListForOverviewPage().filter((item) => !item.isBeta);
+
+    // ensure any feature flags are toggled on
+    typedLocalStorage.setItem('featureFlags', getFeatureFlags(menuItemsNotBeta));
+
+    renderWithProviders(<Navigation />, {
+      startUrl: `${APP_DEVELOPMENT_BASENAME}/my-org/my-app`,
+    });
+
+    menuItemsNotBeta.forEach((link) => {
+      expect(screen.getByRole('link', { name: textMock(link.key) })).not.toHaveClass('isBeta');
+    });
+  });
+});
 
 const getFeatureFlags = (menuItems: HeaderMenuItem[]) => {
   return menuItems.filter((item) => !!item.featureFlagName).map((item) => item.featureFlagName);

frontend/app-development/features/overview/components/Navigation/Navigation.tsx

@@ -4,7 +4,8 @@ import { useTranslation } from 'react-i18next';
 import { Heading } from '@digdir/designsystemet-react';
 import { getFilteredMenuListForOverviewPage } from 'app-development/utils/headerMenu/headerMenuUtils';
 import { Link } from 'react-router-dom';
-import { StudioBetaTag } from '@studio/components';
+import cn from 'classnames';
+import { studioBetaTagClasses } from '@studio/components';
 
 export const Navigation = () => {
   const { t } = useTranslation();
@@ -19,10 +20,13 @@ export const Navigation = () => {
       <div className={classes.links}>
         {menuItems.map((menuItem) => {
           return (
-            <Link key={menuItem.key} to={`../${menuItem.link}`} className={classes.link}>
+            <Link
+              key={menuItem.key}
+              to={`../${menuItem.link}`}
+              className={cn(classes.link, menuItem.isBeta && studioBetaTagClasses.isBeta)}
+            >
               <menuItem.icon className={classes.icon} />
               <span>{t(menuItem.key)}</span>
-              {menuItem.isBeta && <StudioBetaTag />}
             </Link>
           );
         })}

frontend/app-development/features/overview/components/News/NewsContent/news.nb.json

@@ -1,6 +1,11 @@
 {
   "$schema": "news.schema.json",
   "news": [
+    {
+      "date": "2025-01-27",
+      "title": "Biblioteket er nå tilgjengelig fra menylinjen",
+      "content": "Vi har lagd et nytt bibliotek! Her finner du nå kodelistene dine. Vi jobber med å utvide biblioteket til at du kan finne eller lagre andre ting der, som bilder og tekster."
+    },
     {
       "date": "2025-01-17",
       "title": "Nå kan du ha flere datamodeller i et prosess-steg!",

frontend/app-development/layout/PageHeader/LargeNavigationMenu/LargeNavigationMenu.module.css

@@ -18,8 +18,3 @@
 .active {
   border-bottom: 2px solid var(--fds-semantic-surface-neutral-default);
 }
-
-.betaTag {
-  min-height: min-content;
-  padding: 0 var(--fds-spacing-1);
-}

frontend/app-development/layout/PageHeader/LargeNavigationMenu/LargeNavigationMenu.test.tsx

@@ -21,7 +21,7 @@ describe('LargeNavigationMenu', () => {
     renderLargeNavigationMenu();
 
     menuItems.forEach((item) => {
-      expect(screen.getByText(item.name)).toBeInTheDocument();
+      expect(screen.getByRole('link', { name: item.name })).toBeInTheDocument();
     });
   });
 
@@ -30,26 +30,20 @@ describe('LargeNavigationMenu', () => {
       routerInitialEntries: [menuItems[0].link],
     });
 
-    const activeItem = screen.getByText(menuItems[0].name);
+    const activeItem = screen.getByRole('link', { name: menuItems[0].name });
     expect(activeItem).toHaveClass('active');
   });
 
-  it('should display the beta tag for items marked as beta', () => {
+  it('should set "isBeta" className for menu item that is beta', () => {
     renderLargeNavigationMenu();
-
-    const betaTags = screen.getAllByText('Beta');
-
-    expect(betaTags.length).toEqual(menuItems.filter((item) => item.isBeta).length);
+    const menuItem = screen.getByRole('link', { name: menuItems[0].name });
+    expect(menuItem).toHaveClass('isBeta');
   });
 
-  it('should not display the beta tag for items not marked as beta', () => {
+  it('should not set "isBeta" className for menu item that is not beta', () => {
     renderLargeNavigationMenu();
-
-    const betaTags = screen.getAllByText('Beta');
-
-    expect(menuItems.length - betaTags.length).toEqual(
-      menuItems.filter((item) => !item.isBeta).length,
-    );
+    const menuItem = screen.getByRole('link', { name: menuItems[1].name });
+    expect(menuItem).not.toHaveClass('isBeta');
   });
 });
 

frontend/app-development/layout/PageHeader/LargeNavigationMenu/LargeNavigationMenu.tsx

@@ -2,7 +2,7 @@ import React, { type ReactElement } from 'react';
 import classes from './LargeNavigationMenu.module.css';
 import cn from 'classnames';
 import { NavLink, useLocation } from 'react-router-dom';
-import { StudioBetaTag, StudioPageHeader } from '@studio/components';
+import { StudioPageHeader } from '@studio/components';
 import { extractLastRouterParam } from 'app-development/utils/headerMenu/headerMenuUtils';
 import { type NavigationMenuItem } from 'app-development/types/HeaderMenu/NavigationMenuItem';
 import { usePageHeaderContext } from 'app-development/contexts/PageHeaderContext';
@@ -36,6 +36,7 @@ const HeaderButtonListItem = ({ menuItem }: HeaderButtonListItemProps): ReactEle
       <StudioPageHeader.HeaderLink
         color='dark'
         variant={variant}
+        isBeta={menuItem.isBeta}
         renderLink={(props) => (
           <NavLink to={menuItem.link} {...props}>
             <span
@@ -45,7 +46,6 @@ const HeaderButtonListItem = ({ menuItem }: HeaderButtonListItemProps): ReactEle
             >
               {menuItem.name}
             </span>
-            {menuItem.isBeta && <StudioBetaTag className={classes.betaTag} />}
           </NavLink>
         )}
       />

frontend/app-development/layout/PageHeader/SmallHeaderMenu/SmallHeaderMenuItem/SmallHeaderMenuItem.test.tsx

@@ -16,7 +16,7 @@ const mockMenuItem: NavigationMenuSmallItem = {
     href: menuItemLink,
     openInNewTab: false,
   },
-  isBeta: true,
+  isBeta: false,
 };
 
 const mockOnClick = jest.fn();
@@ -32,7 +32,7 @@ describe('SmallHeaderMenuItem', () => {
     renderSmallHeaderMenuItem();
 
     const linkElement = screen.getByRole('menuitem', {
-      name: `${textMock(menuItemName)} Beta`,
+      name: textMock(menuItemName),
     });
     expect(linkElement).toBeInTheDocument();
     expect(linkElement).toHaveAttribute('href', menuItemLink);
@@ -44,17 +44,37 @@ describe('SmallHeaderMenuItem', () => {
     });
 
     const linkElement = screen.getByRole('menuitem', {
-      name: `${textMock(menuItemName)} Beta`,
+      name: textMock(menuItemName),
     });
     expect(linkElement).toHaveClass('active');
   });
 
+  it('should add "isBeta" class when menuItem is beta', () => {
+    renderSmallHeaderMenuItem({
+      componentProps: { menuItem: { ...mockMenuItem, isBeta: true } },
+    });
+
+    const linkElement = screen.getByRole('menuitem', {
+      name: textMock(menuItemName),
+    });
+    expect(linkElement).toHaveClass('isBeta');
+  });
+
+  it('should not add "isBeta" class by default', () => {
+    renderSmallHeaderMenuItem();
+
+    const linkElement = screen.getByRole('menuitem', {
+      name: textMock(menuItemName),
+    });
+    expect(linkElement).not.toHaveClass('isBeta');
+  });
+
   it('should call onClick when the NavLink is clicked', async () => {
     const user = userEvent.setup();
     renderSmallHeaderMenuItem();
 
     const linkElement = screen.getByRole('menuitem', {
-      name: `${textMock(menuItemName)} Beta`,
+      name: textMock(menuItemName),
     });
     await user.click(linkElement);
 
@@ -76,7 +96,7 @@ describe('SmallHeaderMenuItem', () => {
     });
 
     const linkElement = screen.getByRole('menuitem', {
-      name: `${textMock('testMenuItem')} Beta`,
+      name: textMock('testMenuItem'),
     });
     expect(linkElement).toHaveAttribute('target', '_blank');
     expect(linkElement).toHaveAttribute('rel', 'noopener noreferrer');

frontend/app-development/layout/PageHeader/SmallHeaderMenu/SmallHeaderMenuItem/SmallHeaderMenuItem.tsx

@@ -5,7 +5,7 @@ import { useTranslation } from 'react-i18next';
 import { DropdownMenu } from '@digdir/designsystemet-react';
 import { extractLastRouterParam } from 'app-development/utils/headerMenu/headerMenuUtils';
 import { type NavigationMenuSmallItem } from 'app-development/types/HeaderMenu/NavigationMenuSmallItem';
-import { StudioBetaTag } from '@studio/components';
+import { studioBetaTagClasses } from '@studio/components';
 
 export type SmallHeaderMenuItemProps = {
   menuItem: NavigationMenuSmallItem;
@@ -35,13 +35,13 @@ export const SmallHeaderMenuItem = ({
   return (
     <DropdownMenu.Item key={menuItem.name} asChild className={linkItemClassName}>
       <NavLink
+        className={menuItem.isBeta && studioBetaTagClasses.isBeta}
         to={menuItem.action.href}
         onClick={onClick}
         target={menuItem.action.openInNewTab ? '_blank' : ''}
         rel={menuItem.action.openInNewTab ? 'noopener noreferrer' : ''}
       >
         {t(menuItem.name)}
-        {menuItem.isBeta && <StudioBetaTag />}
       </NavLink>
     </DropdownMenu.Item>
   );

frontend/app-development/utils/headerMenu/headerMenuUtils.test.ts

@@ -171,14 +171,13 @@ describe('headerMenuUtils', () => {
 
       // Ensure other items are still present
       const remainingKeys = filteredMenu.map((item) => item.key);
-      expect(remainingKeys).toEqual(
-        expect.arrayContaining([
-          HeaderMenuItemKey.Create,
-          HeaderMenuItemKey.DataModel,
-          HeaderMenuItemKey.Text,
-          HeaderMenuItemKey.ProcessEditor,
-        ]),
-      );
+      expect(remainingKeys).toEqual([
+        HeaderMenuItemKey.Create,
+        HeaderMenuItemKey.DataModel,
+        HeaderMenuItemKey.Text,
+        HeaderMenuItemKey.ProcessEditor,
+        HeaderMenuItemKey.ContentLibrary,
+      ]);
     });
   });
 });

frontend/app-development/utils/headerMenu/headerMenuUtils.ts

@@ -3,7 +3,14 @@ import { shouldDisplayFeature } from 'app-shared/utils/featureToggleUtils';
 import { type HeaderMenuItem } from 'app-development/types/HeaderMenu/HeaderMenuItem';
 import { HeaderMenuItemKey } from 'app-development/enums/HeaderMenuItemKey';
 import { type HeaderMenuGroup } from 'app-development/types/HeaderMenu/HeaderMenuGroup';
-import { DatabaseIcon, Density3Icon, PencilIcon, TenancyIcon, UploadIcon } from '@studio/icons';
+import {
+  BookIcon,
+  DatabaseIcon,
+  Density3Icon,
+  PencilIcon,
+  TenancyIcon,
+  UploadIcon,
+} from '@studio/icons';
 import { RoutePaths } from 'app-development/enums/RoutePaths';
 import { HeaderMenuGroupKey } from 'app-development/enums/HeaderMenuGroupKey';
 import { type NavigationMenuSmallGroup } from 'app-development/types/HeaderMenu/NavigationMenuSmallGroup';
@@ -50,6 +57,14 @@ export const topBarMenuItem: HeaderMenuItem[] = [
     repositoryTypes: [RepositoryType.App],
     group: HeaderMenuGroupKey.Other,
   },
+  {
+    key: HeaderMenuItemKey.ContentLibrary,
+    link: RoutePaths.ContentLibrary,
+    icon: BookIcon,
+    repositoryTypes: [RepositoryType.App],
+    group: HeaderMenuGroupKey.Tools,
+    isBeta: true,
+  },
 ];
 
 export const getFilteredTopBarMenu = (repositoryType: RepositoryType): HeaderMenuItem[] => {

frontend/language/src/nb.json

@@ -44,9 +44,9 @@
   "app_content_library.code_lists.search_label": "Søk på kodelister",
   "app_content_library.code_lists.upload_code_list": "Last opp din egen kodeliste",
   "app_content_library.fetch_error": "Det har oppstått et problem ved henting av data til biblioteket.",
+  "app_content_library.images.coming_soon": "Snart blir det mulig å laste opp bilder i biblioteket. Vi jobber med saken!",
   "app_content_library.images.info_box.description": "Du kan bruke bildene i biblioteket til å legge inn bilder i skjemaet. Du kan også laste opp et bilde med organisasjonens logo, og legge det som logobilde i innstillingene for appen.",
   "app_content_library.images.info_box.title": "Hva kan du bruke bildene til?",
-  "app_content_library.images.no_content": "Dette biblioteket har ingen bilder",
   "app_content_library.images.page_name": "Bilder",
   "app_content_library.info_box.title": "En kort beskrivelse om bruk av og hensikt med ressursen i bibliotket.",
   "app_content_library.landing_page.description": "Når du utvikler tjenester, er det nyttig å samle ulike filer og ressurser på ett sted. I biblioteket kan du laste opp ting andre har laget som du har bruk for, eller selv lage det du trenger til de appene og skjemaene du utvikler.",
@@ -1165,6 +1165,7 @@
   "top_bar.group_overview": "Oversikt",
   "top_bar.group_tools": "Verktøy",
   "top_menu.about": "Oversikt",
+  "top_menu.content_library": "Bibliotek",
   "top_menu.create": "Utforming",
   "top_menu.data_model": "Datamodell",
   "top_menu.deploy": "Publiser",