chore(admin): cleanup (#18241)

Author: mlqn

.github/workflows/deploy-designer.yaml

@@ -10,7 +10,6 @@ on:
       - '.github/workflows/template-short-sha.yaml'
       - 'src/Designer/backend/**'
       - 'src/Designer/frontend/**'
-      - '!src/Designer/frontend/admin/**'
       - 'src/Designer/Dockerfile'
       - 'package.json'
       - 'charts/altinn-designer/**'

.github/workflows/designer-frontend-run-playwright-on-pr.yaml

@@ -5,7 +5,6 @@ on:
     types: [opened, reopened, synchronize, ready_for_review]
     paths:
       - 'src/Designer/frontend/**'
-      - '!src/Designer/frontend/admin/**'
       - '!src/Designer/frontend/stats/**'
       - 'src/Designer/backend/**'
       - '.github/workflows/designer-frontend-run-playwright-on-pr.yaml'

src/Designer/development/README.md

@@ -19,7 +19,7 @@ These are created by the script and are found at the root in the `.env`-file.
 CYPRESS_TEST_APP=<cypress-test-app>
 DEVELOP_APP_DEVELOPMENT=0
 DEVELOP_RESOURCE_ADMIN=0
-DEVELOP_ADMIN_FRONTEND=0
+DEVELOP_ADMIN=0
 DEVELOP_BACKEND=1
 DEVELOP_DASHBOARD=0
 DEVELOP_PREVIEW=0

src/Designer/frontend/admin/layout/NotFoundPage.tsx

@@ -1,5 +1,4 @@
-import { StudioNotFoundPage } from '@studio/components';
-import { Paragraph, Link } from '@digdir/designsystemet-react';
+import { StudioNotFoundPage, StudioParagraph, StudioLink } from '@studio/components';
 import { useTranslation, Trans } from 'react-i18next';
 
 export const NotFoundPage = () => {
@@ -9,14 +8,14 @@ export const NotFoundPage = () => {
     <StudioNotFoundPage
       title={t('not_found_page.heading')}
       body={
-        <Paragraph size='small'>
+        <StudioParagraph>
           <Trans
             i18nKey='not_found_page.text'
             components={{
-              a: <Link href='/info/contact'> </Link>,
+              a: <StudioLink href='/info/contact'> </StudioLink>,
             }}
           ></Trans>
-        </Paragraph>
+        </StudioParagraph>
       }
       redirectHref='/'
       redirectLinkText={t('not_found_page.redirect_to_dashboard')}

src/Designer/frontend/admin/layout/PageHeader.test.tsx

@@ -3,7 +3,7 @@ import userEvent from '@testing-library/user-event';
 import { MemoryRouter } from 'react-router-dom';
 import { textMock } from '@studio/testing/mocks/i18nMock';
 import { PageHeader } from './PageHeader';
-import { useMediaQuery } from '@studio/components-legacy';
+import { useMediaQuery } from '@studio/hooks';
 import type { AltinnStudioEnvironment } from 'app-shared/utils/altinnStudioEnv';
 
 const mockEnvironment: {
@@ -13,8 +13,8 @@ const mockEnvironment: {
 } = { environment: null, isLoading: false, error: null };
 const mockLogout = jest.fn();
 
-jest.mock('@studio/components-legacy', () => ({
-  ...jest.requireActual('@studio/components-legacy'),
+jest.mock('@studio/hooks', () => ({
+  ...jest.requireActual('@studio/hooks'),
   useMediaQuery: jest.fn(),
 }));
 

src/Designer/frontend/admin/layout/PageHeader.tsx

@@ -1,8 +1,8 @@
 import { MEDIA_QUERY_MAX_WIDTH, USER_SETTINGS_BASENAME } from 'app-shared/constants';
 import type { Org } from 'app-shared/types/OrgList';
-import type { StudioProfileMenuGroup } from '@studio/components-legacy';
-import { StudioPageHeader, useMediaQuery } from '@studio/components-legacy';
-import { StudioAvatar } from '@studio/components';
+import type { StudioProfileMenuGroup } from '@studio/components';
+import { StudioPageHeader, StudioAvatar } from '@studio/components';
+import { useMediaQuery } from '@studio/hooks';
 import type { ReactElement } from 'react';
 import { useTranslation } from 'react-i18next';
 import type { User } from 'app-shared/types/Repository';
@@ -20,18 +20,20 @@ export const PageHeader = (): ReactElement => {
   const { i18n } = useTranslation();
 
   return (
-    <StudioPageHeader>
-      <StudioPageHeader.Main>
-        <StudioPageHeader.Left
-          showTitle={shouldDisplayDesktopMenu}
-          title={org.name[i18n.language]}
-        />
-        {shouldDisplayDesktopMenu && <CenterContent />}
-        <StudioPageHeader.Right>
-          <ProfileMenu org={org} user={user} />
-        </StudioPageHeader.Right>
-      </StudioPageHeader.Main>
-    </StudioPageHeader>
+    <div data-color-scheme='dark'>
+      <StudioPageHeader>
+        <StudioPageHeader.Main>
+          <StudioPageHeader.Left
+            showTitle={shouldDisplayDesktopMenu}
+            title={org.name[i18n.language]}
+          />
+          {shouldDisplayDesktopMenu && <CenterContent />}
+          <StudioPageHeader.Right>
+            <ProfileMenu org={org} user={user} />
+          </StudioPageHeader.Right>
+        </StudioPageHeader.Main>
+      </StudioPageHeader>
+    </div>
   );
 };
 
@@ -42,26 +44,20 @@ const CenterContent = (): ReactElement => {
   return (
     <StudioPageHeader.Center>
       <StudioPageHeader.HeaderLink
-        color='dark'
-        variant='regular'
         renderLink={(props) => (
           <a href={`/dashboard/app-dashboard/${org}`} {...props}>
             <span>{t('dashboard.header_item_dashboard')}</span>
           </a>
         )}
       />
       <StudioPageHeader.HeaderLink
-        color='dark'
-        variant='regular'
         renderLink={(props) => (
-          <NavLink to={`/${org}/apps`} {...props}>
+          <NavLink data-color='dark' to={`/${org}/apps`} {...props}>
             <span className={classes.active}>{t('admin.apps.title')}</span>
           </NavLink>
         )}
       />
       <StudioPageHeader.HeaderLink
-        color='dark'
-        variant='regular'
         isBeta={true}
         renderLink={(props) => (
           <a href={`/dashboard/org-library/${org}`} {...props}>
@@ -118,16 +114,13 @@ const ProfileMenu = ({ user, org }: ProfileMenuProps): ReactElement => {
     <StudioPageHeader.ProfileMenu
       profileMenuGroups={profileMenuGroups}
       triggerButtonText={userNameAndOrg}
-      ariaLabelTriggerButton={userNameAndOrg}
       profileImage={
         <StudioAvatar
           src={user?.avatar_url}
           alt={t('general.profile_icon')}
           title={t('shared.header_profile_icon_text')}
         />
       }
-      color='dark'
-      variant={'regular'}
     />
   );
 };

src/Designer/frontend/admin/router/PageRouterErrorBoundary.tsx

@@ -1,7 +1,6 @@
 import type { ReactElement } from 'react';
-import { StudioParagraph, StudioPageError } from '@studio/components';
+import { StudioParagraph, StudioPageError, StudioLink } from '@studio/components';
 import { Trans, useTranslation } from 'react-i18next';
-import { Link } from '@digdir/designsystemet-react';
 
 export const ErrorBoundary = (): ReactElement => {
   const { t } = useTranslation();
@@ -13,7 +12,7 @@ export const ErrorBoundary = (): ReactElement => {
           <Trans
             i18nKey={'general.page_error_message'}
             components={{
-              a: <Link href='/info/contact'> </Link>,
+              a: <StudioLink href='/info/contact'> </StudioLink>,
             }}
           />
         </StudioParagraph>

src/Designer/frontend/admin/router/PageRoutes.tsx

@@ -20,7 +20,7 @@ const BASE_PATH = '/:org';
 
 const router = createBrowserRouter(
   createRoutesFromElements(
-    <Route path='/' element={<App />} errorElement={<AppRouteErrorBoundary />}>
+    <Route element={<App />} errorElement={<AppRouteErrorBoundary />}>
       <Route path={BASE_PATH} element={<PageLayout />} errorElement={<RouteErrorBoundary />}>
         {routerRoutes.map((route) => (
           <Route