From 2e24dfb9a5347e910105dde4f392535836668d44 Mon Sep 17 00:00:00 2001
From: William Thorenfeldt <48119543+wrt95@users.noreply.github.com>
Date: Thu, 31 Oct 2024 09:17:57 +0100
Subject: [PATCH] chore: move AltinnContentLoader (#13932)

---
 .../AltinnContentLoader.test.tsx              | 30 +++++++++++++++++++
 .../AltinnContentLoader.tsx                   | 12 ++------
 .../components/AltinnContentLoader/index.ts   |  1 +
 .../containers/DeploymentContainer.tsx        |  2 +-
 .../features/appPublish/pages/DeployPage.tsx  |  2 +-
 .../molecules/AltinnContentLoader.md          | 11 -------
 .../molecules/AltinnPopoverSimple.module.css  |  4 ---
 7 files changed, 35 insertions(+), 27 deletions(-)
 create mode 100644 frontend/app-development/features/appPublish/components/AltinnContentLoader/AltinnContentLoader.test.tsx
 rename frontend/{packages/shared/src/components/molecules => app-development/features/appPublish/components/AltinnContentLoader}/AltinnContentLoader.tsx (52%)
 create mode 100644 frontend/app-development/features/appPublish/components/AltinnContentLoader/index.ts
 delete mode 100644 frontend/packages/shared/src/components/molecules/AltinnContentLoader.md
 delete mode 100644 frontend/packages/shared/src/components/molecules/AltinnPopoverSimple.module.css

diff --git a/frontend/app-development/features/appPublish/components/AltinnContentLoader/AltinnContentLoader.test.tsx b/frontend/app-development/features/appPublish/components/AltinnContentLoader/AltinnContentLoader.test.tsx
new file mode 100644
index 00000000000..f9d46b73e7f
--- /dev/null
+++ b/frontend/app-development/features/appPublish/components/AltinnContentLoader/AltinnContentLoader.test.tsx
@@ -0,0 +1,30 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import { AltinnContentLoader } from './AltinnContentLoader';
+
+describe('AltinnContentLoader', () => {
+  it('should render with default height and width', () => {
+    render(<AltinnContentLoader />);
+
+    const loader = screen.getByRole('img', { hidden: true });
+    expect(loader).toHaveAttribute('height', '200');
+    expect(loader).toHaveAttribute('width', '400');
+  });
+
+  it('should render with custom height and width', () => {
+    render(<AltinnContentLoader height={300} width={500} />);
+
+    const loader = screen.getByRole('img', { hidden: true });
+    expect(loader).toHaveAttribute('height', '300');
+    expect(loader).toHaveAttribute('width', '500');
+  });
+
+  it('should render children', () => {
+    render(
+      <AltinnContentLoader>
+        <rect x='0' y='0' width='100' height='100' />
+      </AltinnContentLoader>,
+    );
+    expect(screen.getByRole('img')).toBeInTheDocument();
+  });
+});
diff --git a/frontend/packages/shared/src/components/molecules/AltinnContentLoader.tsx b/frontend/app-development/features/appPublish/components/AltinnContentLoader/AltinnContentLoader.tsx
similarity index 52%
rename from frontend/packages/shared/src/components/molecules/AltinnContentLoader.tsx
rename to frontend/app-development/features/appPublish/components/AltinnContentLoader/AltinnContentLoader.tsx
index d80ec5e8bbd..35a7a1a6519 100644
--- a/frontend/packages/shared/src/components/molecules/AltinnContentLoader.tsx
+++ b/frontend/app-development/features/appPublish/components/AltinnContentLoader/AltinnContentLoader.tsx
@@ -1,21 +1,13 @@
-import React, { type ReactNode } from 'react';
+import React, { type ReactElement } from 'react';
 import type { IContentLoaderProps } from 'react-content-loader';
 import ContentLoader from 'react-content-loader';
 
-export type IAltinnContentLoaderProps = {
-  /** The height of the loader, defaults to 200 */
-  height?: number;
-  /** The width of the loader, defaults to 400 */
-  width?: number;
-  children: ReactNode;
-} & IContentLoaderProps;
-
 export const AltinnContentLoader = ({
   height,
   width,
   children,
   ...rest
-}: IAltinnContentLoaderProps) => {
+}: IContentLoaderProps): ReactElement => {
   return (
     <ContentLoader height={height ? height : 200} width={width ? width : 400} {...rest}>
       {children}
diff --git a/frontend/app-development/features/appPublish/components/AltinnContentLoader/index.ts b/frontend/app-development/features/appPublish/components/AltinnContentLoader/index.ts
new file mode 100644
index 00000000000..044a090f353
--- /dev/null
+++ b/frontend/app-development/features/appPublish/components/AltinnContentLoader/index.ts
@@ -0,0 +1 @@
+export { AltinnContentLoader } from './AltinnContentLoader';
diff --git a/frontend/app-development/features/appPublish/containers/DeploymentContainer.tsx b/frontend/app-development/features/appPublish/containers/DeploymentContainer.tsx
index 47fe12253fb..2044105fd6a 100644
--- a/frontend/app-development/features/appPublish/containers/DeploymentContainer.tsx
+++ b/frontend/app-development/features/appPublish/containers/DeploymentContainer.tsx
@@ -1,6 +1,6 @@
 import React, { useMemo } from 'react';
 import classes from './DeploymentContainer.module.css';
-import { AltinnContentLoader } from 'app-shared/components/molecules/AltinnContentLoader';
+import { AltinnContentLoader } from '../components/AltinnContentLoader';
 import {
   useOrgListQuery,
   useEnvironmentsQuery,
diff --git a/frontend/app-development/features/appPublish/pages/DeployPage.tsx b/frontend/app-development/features/appPublish/pages/DeployPage.tsx
index aa202fb85c2..060424df6c6 100644
--- a/frontend/app-development/features/appPublish/pages/DeployPage.tsx
+++ b/frontend/app-development/features/appPublish/pages/DeployPage.tsx
@@ -5,7 +5,7 @@ import { InfoCard } from '../components/InfoCard';
 import { ReleaseContainer } from '../containers/ReleaseContainer';
 import { useDeployPermissionsQuery, useOrgListQuery } from '../../../hooks/queries';
 import { Trans, useTranslation } from 'react-i18next';
-import { AltinnContentLoader } from 'app-shared/components/molecules/AltinnContentLoader';
+import { AltinnContentLoader } from '../components/AltinnContentLoader';
 import { useInvalidator } from '../../../hooks/useInvalidator';
 import { useStudioEnvironmentParams } from 'app-shared/hooks/useStudioEnvironmentParams';
 import { Link } from '@digdir/designsystemet-react';
diff --git a/frontend/packages/shared/src/components/molecules/AltinnContentLoader.md b/frontend/packages/shared/src/components/molecules/AltinnContentLoader.md
deleted file mode 100644
index 62e11cdd691..00000000000
--- a/frontend/packages/shared/src/components/molecules/AltinnContentLoader.md
+++ /dev/null
@@ -1,11 +0,0 @@
-### Default
-
-```jsx
-<AltinnContentLoader />
-```
-
-### height=125
-
-```jsx
-<AltinnContentLoader height={125} />
-```
diff --git a/frontend/packages/shared/src/components/molecules/AltinnPopoverSimple.module.css b/frontend/packages/shared/src/components/molecules/AltinnPopoverSimple.module.css
deleted file mode 100644
index 917e3f34f4a..00000000000
--- a/frontend/packages/shared/src/components/molecules/AltinnPopoverSimple.module.css
+++ /dev/null
@@ -1,4 +0,0 @@
-.container {
-  width: 445px;
-  margin: 24px;
-}