refactor: add 'page' suffix to the library page components (#14279)

Co-authored-by: Tomas Engebretsen <[email protected]>

frontend/app-development/features/appContentLibrary/AppContentLibrary.test.tsx

@@ -18,9 +18,9 @@ const updateCodeListButtonTextMock = 'Update Code List';
 const codeListNameMock = 'codeListNameMock';
 const codeListMock: CodeList = [{ value: '', label: '' }];
 jest.mock(
-  '../../../libs/studio-content-library/src/ContentLibrary/LibraryBody/pages/CodeList',
+  '../../../libs/studio-content-library/src/ContentLibrary/LibraryBody/pages/CodeListPage',
   () => ({
-    CodeList: ({ onUpdateCodeList, onUploadCodeList }: any) => (
+    CodeListPage: ({ onUpdateCodeList, onUploadCodeList }: any) => (
       <div>
         <button
           onClick={() =>

frontend/libs/studio-content-library/src/ContentLibrary/LibraryBody/pages/CodeList/CodeList.test.tsx → frontend/libs/studio-content-library/src/ContentLibrary/LibraryBody/pages/CodeListPage/CodeListPage.test.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { render, screen } from '@testing-library/react';
-import type { CodeListProps, CodeListWithMetadata } from './CodeList';
-import { CodeList } from './CodeList';
+import type { CodeListPageProps, CodeListWithMetadata } from './CodeListPage';
+import { CodeListPage } from './CodeListPage';
 import { textMock } from '@studio/testing/mocks/i18nMock';
 
 const onUpdateCodeListMock = jest.fn();
@@ -12,7 +12,7 @@ const codeListMock: CodeListWithMetadata = {
   codeList: [{ value: 'value', label: 'label' }],
 };
 
-describe('CodeList', () => {
+describe('CodeListPage', () => {
   it('renders the codeList heading', () => {
     renderCodeList();
     const codeListHeading = screen.getByRole('heading', {
@@ -56,7 +56,7 @@ describe('CodeList', () => {
   });
 });
 
-const defaultCodeListProps: CodeListProps = {
+const defaultCodeListProps: CodeListPageProps = {
   codeLists: [codeListMock],
   onUpdateCodeList: onUpdateCodeListMock,
   onUploadCodeList: onUploadCodeListMock,
@@ -68,9 +68,9 @@ const renderCodeList = ({
   onUpdateCodeList,
   onUploadCodeList,
   fetchDataError,
-}: Partial<CodeListProps> = defaultCodeListProps) => {
+}: Partial<CodeListPageProps> = defaultCodeListProps) => {
   render(
-    <CodeList
+    <CodeListPage
       codeLists={codeLists}
       onUpdateCodeList={onUpdateCodeList}
       onUploadCodeList={onUploadCodeList}

frontend/libs/studio-content-library/src/ContentLibrary/LibraryBody/pages/CodeList/CodeList.tsx → frontend/libs/studio-content-library/src/ContentLibrary/LibraryBody/pages/CodeListPage/CodeListPage.tsx

@@ -5,26 +5,26 @@ import { useTranslation } from 'react-i18next';
 import { CodeListsActionsBar } from './CodeListsActionsBar';
 import { CodeLists } from './CodeLists';
 import { CodeListsCounterMessage } from './CodeListsCounterMessage';
-import classes from './CodeList.module.css';
+import classes from './CodeListPage.module.css';
 import { ArrayUtils } from '@studio/pure-functions';
 
 export type CodeListWithMetadata = {
   codeList: StudioComponentCodeList;
   title: string;
 };
 
-export type CodeListProps = {
+export type CodeListPageProps = {
   codeLists: CodeListWithMetadata[];
   onUpdateCodeList: (updatedCodeList: CodeListWithMetadata) => void;
   onUploadCodeList: (uploadedCodeList: File) => void;
   fetchDataError: boolean;
 };
-export function CodeList({
+export function CodeListPage({
   codeLists,
   onUpdateCodeList,
   onUploadCodeList,
   fetchDataError,
-}: CodeListProps): React.ReactElement {
+}: CodeListPageProps): React.ReactElement {
   const { t } = useTranslation();
 
   if (fetchDataError)

frontend/libs/studio-content-library/src/ContentLibrary/LibraryBody/pages/CodeList/CodeLists/CodeLists.test.tsx → frontend/libs/studio-content-library/src/ContentLibrary/LibraryBody/pages/CodeListPage/CodeLists/CodeLists.test.tsx

@@ -3,7 +3,7 @@ import { render, screen } from '@testing-library/react';
 import type { CodeListsProps } from './CodeLists';
 import { updateCodeListWithMetadata, CodeLists } from './CodeLists';
 import { textMock } from '@studio/testing/mocks/i18nMock';
-import type { CodeListWithMetadata } from '../CodeList';
+import type { CodeListWithMetadata } from '../CodeListPage';
 import type { UserEvent } from '@testing-library/user-event';
 import type { RenderResult } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';

frontend/libs/studio-content-library/src/ContentLibrary/LibraryBody/pages/CodeList/CodeLists/CodeLists.tsx → frontend/libs/studio-content-library/src/ContentLibrary/LibraryBody/pages/CodeListPage/CodeLists/CodeLists.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import type { CodeListWithMetadata } from '../CodeList';
+import type { CodeListWithMetadata } from '../CodeListPage';
 import { Accordion } from '@digdir/designsystemet-react';
 import { StudioCodeListEditor } from '@studio/components';
 import type { CodeList as StudioComponentsCodeList, CodeListEditorTexts } from '@studio/components';

frontend/libs/studio-content-library/src/ContentLibrary/LibraryBody/pages/CodeList/CodeListsActionsBar/CodeListsActionsBar.tsx → frontend/libs/studio-content-library/src/ContentLibrary/LibraryBody/pages/CodeListPage/CodeListsActionsBar/CodeListsActionsBar.tsx

@@ -3,7 +3,7 @@ import { Search } from '@digdir/designsystemet-react';
 import { StudioFileUploader } from '@studio/components';
 import classes from './CodeListsActionsBar.module.css';
 import { useTranslation } from 'react-i18next';
-import type { CodeListWithMetadata } from '../CodeList';
+import type { CodeListWithMetadata } from '../CodeListPage';
 import { CreateNewCodeListModal } from './CreateNewCodeListModal/CreateNewCodeListModal';
 import { FileNameUtils } from '@studio/pure-functions';
 import { useUploadCodeListNameErrorMessage } from '../hooks/useUploadCodeListNameErrorMessage';

frontend/libs/studio-content-library/src/ContentLibrary/LibraryBody/pages/CodeList/CodeListsActionsBar/CreateNewCodeListModal/CreateNewCodeListModal.tsx → frontend/libs/studio-content-library/src/ContentLibrary/LibraryBody/pages/CodeListPage/CodeListsActionsBar/CreateNewCodeListModal/CreateNewCodeListModal.tsx

@@ -10,7 +10,7 @@ import { useTranslation } from 'react-i18next';
 import { useOptionListEditorTexts } from '../../hooks/useCodeListEditorTexts';
 import { CheckmarkIcon } from '@studio/icons';
 import classes from './CreateNewCodeListModal.module.css';
-import type { CodeListWithMetadata } from '../../CodeList';
+import type { CodeListWithMetadata } from '../../CodeListPage';
 import { FileNameUtils } from '@studio/pure-functions';
 import { useInputCodeListNameErrorMessage } from '../../hooks/useInputCodeListNameErrorMessage';
 

frontend/libs/studio-content-library/src/ContentLibrary/LibraryBody/pages/CodeListPage/index.ts

@@ -0,0 +1,2 @@
+export { CodeListPage } from './CodeListPage';
+export type { CodeListWithMetadata, CodeListPageProps } from './CodeListPage';

frontend/libs/studio-content-library/src/ContentLibrary/LibraryBody/pages/Images/Images.test.tsx → frontend/libs/studio-content-library/src/ContentLibrary/LibraryBody/pages/ImagesPage/ImagesPage.test.tsx

@@ -2,16 +2,16 @@ import React from 'react';
 import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import { textMock } from '@studio/testing/mocks/i18nMock';
-import type { Image, ImagesProps } from './Images';
-import { Images } from './Images';
+import type { Image, ImagesPageProps } from './ImagesPage';
+import { ImagesPage } from './ImagesPage';
 
 const onUpdateImageMock = jest.fn();
 const imageMock: Image = {
   title: 'image',
   imageSrc: 'www.external-image-url.com',
 };
 
-describe('Images', () => {
+describe('ImagesPage', () => {
   it('renders the images heading', () => {
     renderImages();
     const imagesHeading = screen.getByRole('heading', {
@@ -36,11 +36,11 @@ describe('Images', () => {
   });
 });
 
-const defaultImagesProps: ImagesProps = {
+const defaultImagesProps: ImagesPageProps = {
   images: [imageMock],
   onUpdateImage: onUpdateImageMock,
 };
 
-const renderImages = (imagesProps: ImagesProps = defaultImagesProps) => {
-  render(<Images {...imagesProps} />);
+const renderImages = (imagesProps: ImagesPageProps = defaultImagesProps) => {
+  render(<ImagesPage {...imagesProps} />);
 };

frontend/libs/studio-content-library/src/ContentLibrary/LibraryBody/pages/Images/Images.tsx → frontend/libs/studio-content-library/src/ContentLibrary/LibraryBody/pages/ImagesPage/ImagesPage.tsx

@@ -8,12 +8,12 @@ export type Image = {
   imageSrc: string;
 };
 
-export type ImagesProps = {
+export type ImagesPageProps = {
   images: Image[];
   onUpdateImage: (updatedImage: Image) => void;
 };
 
-export function Images({ images, onUpdateImage }: ImagesProps): React.ReactElement {
+export function ImagesPage({ images, onUpdateImage }: ImagesPageProps): React.ReactElement {
   const { t } = useTranslation();
 
   const noExistingImages = images.length === 0;

frontend/libs/studio-content-library/src/ContentLibrary/LibraryBody/pages/ImagesPage/index.ts

@@ -0,0 +1 @@
+export * from './ImagesPage';

frontend/libs/studio-content-library/src/ContentLibrary/LibraryBody/pages/index.ts

@@ -1 +1 @@
-export type { CodeListWithMetadata } from './CodeList';
+export type { CodeListWithMetadata } from './CodeListPage';

frontend/libs/studio-content-library/src/types/PagesProps.ts

@@ -1,11 +1,11 @@
-import type { CodeListProps } from '../ContentLibrary/LibraryBody/pages/CodeList';
+import type { CodeListPageProps } from '../ContentLibrary/LibraryBody/pages/CodeListPage';
 import type { PageName } from './PageName';
-import type { ImagesProps } from '../ContentLibrary/LibraryBody/pages/Images';
+import type { ImagesPageProps } from '../ContentLibrary/LibraryBody/pages/ImagesPage';
 
 export type PagePropsMap<P extends PageName> = {
   landingPage: {};
-  codeList: CodeListProps;
-  images: ImagesProps;
+  codeList: CodeListPageProps;
+  images: ImagesPageProps;
 }[P];
 
 type GlobalPageConfig<T> = {

frontend/libs/studio-content-library/src/utils/router/RouterRouteMapper.test.ts

@@ -1,6 +1,6 @@
 import { RouterRouteMapperImpl } from './RouterRouteMapper';
 import { LandingPage } from '../../ContentLibrary/LibraryBody/pages/LandingPage';
-import { CodeList } from '../../ContentLibrary/LibraryBody/pages/CodeList';
+import { CodeListPage } from '../../ContentLibrary/LibraryBody/pages/CodeListPage';
 import { mockPagesConfig } from '../../../mocks/mockPagesConfig';
 
 describe('RouterRouteMapperImpl', () => {
@@ -11,7 +11,7 @@ describe('RouterRouteMapperImpl', () => {
     expect(routes.has('landingPage')).toBeTruthy();
     expect(routes.has('codeList')).toBeTruthy();
     expect(routes.get('landingPage')).toBe(LandingPage);
-    expect(routes.get('codeList')).toBe(CodeList);
+    expect(routes.get('codeList')).toBe(CodeListPage);
   });
 
   it('should always include landingPage even when noe pages are passed', () => {

frontend/libs/studio-content-library/src/utils/router/RouterRouteMapper.ts

@@ -1,14 +1,14 @@
 import { type ComponentProps, type ReactElement } from 'react';
-import { CodeList } from '../../ContentLibrary/LibraryBody/pages/CodeList';
+import { CodeListPage } from '../../ContentLibrary/LibraryBody/pages/CodeListPage';
 import type { PageName } from '../../types/PageName';
 import { LandingPage } from '../../ContentLibrary/LibraryBody/pages/LandingPage';
 import type { PagesConfig } from '../../types/PagesProps';
-import { Images } from '../../ContentLibrary/LibraryBody/pages/Images';
+import { ImagesPage } from '../../ContentLibrary/LibraryBody/pages/ImagesPage';
 
 type PageProps =
   | ComponentProps<typeof LandingPage>
-  | ComponentProps<typeof CodeList>
-  | ComponentProps<typeof Images>;
+  | ComponentProps<typeof CodeListPage>
+  | ComponentProps<typeof ImagesPage>;
 
 export type PageComponent<P = PageProps> = (props: P) => ReactElement;
 
@@ -36,10 +36,10 @@ export class RouterRouteMapperImpl implements RouterRouteMapper {
 
     Object.keys(pages).forEach((page: PageName) => {
       if (page === 'codeList') {
-        pageMap.set('codeList', CodeList);
+        pageMap.set('codeList', CodeListPage);
       }
       if (page === 'images') {
-        pageMap.set('images', Images);
+        pageMap.set('images', ImagesPage);
       }
     });