Merge branch 'main' into test/rewrite-delegation-tests

backend/src/Altinn.AccessManagement.UI/Altinn.AccessManagement.UI.Mocks/Data/Register/Parties/parties.json

@@ -539,7 +539,7 @@
   {
     "PartyId": 81373770,
     "PartyUuid": "1feb089d-6d08-d38a-a85d-6d4fe709ceb0",
-    "PartyTypeName": 1,
+    "PartyTypeName": 2,
     "OrgNumber": "644227165",
     "Ssn": null,
     "UnitType": null,

backend/src/Altinn.AccessManagement.UI/Altinn.AccessManagement.UI.Mocks/Data/RightHolders/51329012.json

@@ -32,6 +32,20 @@
     ],
     "subunits": []
   },
+  {
+    "partyUuid": "5c0656db-cf51-43a4-bd64-6a91c8caacfb",
+    "name": "Intelligent Albatross",
+    "organizationNumber": null,
+    "personId": "19895199357",
+    "partyId": 50707389,
+    "type": "Person",
+    "unitType": null,
+    "isDeleted": false,
+    "onlyHierarchyElementWithNoAccess": false,
+    "authorizedResources": [],
+    "authorizedRoles": [],
+    "subunits": []
+  },
   {
     "partyUuid": "bab5d1f0-0599-589f-3852-9959156108eb",
     "name": "Kevin O'Hara",

backend/src/Altinn.AccessManagement.UI/Altinn.AccessManagement.UI.Mocks/Mocks/RegisterClientMock.cs

@@ -40,7 +40,7 @@ public Task<List<Party>> GetPartyList(List<Guid> uuidList)
             if (File.Exists(testDataPath))
             {
                 string content = File.ReadAllText(testDataPath);
-                List<Party> partyList = JsonSerializer.Deserialize<List<Party>>(content);
+                List<Party> partyList = JsonSerializer.Deserialize<List<Party>>(content, new JsonSerializerOptions { PropertyNameCaseInsensitive = true });
                 return Task.FromResult(new List<Party>() { partyList?.FirstOrDefault(p => p.PartyUuid == uuidList[0]) });
             }
 

backend/src/Altinn.AccessManagement.UI/Altinn.AccessManagement.UI.Tests/Data/ExpectedResults/RightHolders/51329012.json

@@ -24,6 +24,16 @@
     "unitType": null,
     "inheritingRightHolders": []
   },
+  {
+    "partyUuid": "5c0656db-cf51-43a4-bd64-6a91c8caacfb",
+    "partyType": "Person",
+    "name": "Intelligent Albatross",
+    "registryRoles": [],
+    "personId": "19895199357",
+    "organizationNumber": null,
+    "unitType": null,
+    "inheritingRightHolders": []
+  },
   {
     "partyUuid": "bab5d1f0-0599-589f-3852-9959156108eb",
     "partyType": "Person",

backend/src/Altinn.AccessManagement.UI/Altinn.AccessManagement.UI/appsettings.AT22.json

@@ -10,9 +10,9 @@
   "GeneralSettings": {
     "FrontendBaseUrl": "https://am.ui.at22.altinn.cloud",
     "Hostname": "at22.altinn.cloud",
-    "UseMockData": false
+    "UseMockData": true
   },
   "KeyVaultSettings": {
     "SecretUri": "https://altinn-at22-am-kv.vault.azure.net/"
   }
-}
+}

package.json

@@ -21,7 +21,7 @@
     "@digdir/designsystemet-css": "0.10.0",
     "@digdir/designsystemet-react": "0.63.0",
     "@digdir/designsystemet-theme": "^0.15.0",
-    "@navikt/aksel-icons": "^6.0.0",
+    "@navikt/aksel-icons": "^7.0.0",
     "@reduxjs/toolkit": "^2.2.5",
     "@tanstack/react-query": "^5.0.0",
     "axios": "^1.7.2",

src/components/Avatar/Avatar.module.css

@@ -0,0 +1,49 @@
+.avatar {
+  --avatar-size: 2rem;
+  min-width: var(--avatar-size);
+  min-height: var(--avatar-size);
+  display: grid;
+  place-content: center;
+  background-color: #00315d;
+  color: #ffffff;
+  text-align: center;
+  text-transform: uppercase;
+}
+
+.avatar.person {
+  border-radius: 50%;
+}
+
+.avatar.organization {
+  border-radius: 0.25em;
+}
+
+.avatar.serviceOwner {
+  border-radius: 4%;
+  background-color: #5590e9;
+}
+
+.icon {
+  font-size: var(--iconFontSize);
+  display: grid;
+  place-content: center;
+}
+
+.lg {
+  --avatar-size: 2.6rem;
+  --iconFontSize: 2.3em;
+}
+
+.md {
+  --avatar-size: 2.1rem;
+  --iconFontSize: 1.8em;
+}
+
+.sm {
+  --avatar-size: 1.8rem;
+  --iconFontSize: 1.5em;
+}
+
+.initial {
+  color: #ffffff;
+}

src/components/Avatar/Avatar.tsx

@@ -0,0 +1,40 @@
+import React from 'react';
+import cn from 'classnames';
+import { Paragraph } from '@digdir/designsystemet-react';
+
+import classes from './Avatar.module.css';
+
+export type AvatarProfile = 'organization' | 'person' | 'serviceOwner';
+
+interface AvatarProps {
+  /** The size of the component */
+  size: 'lg' | 'md' | 'sm';
+  /** The name of the avatars owner*/
+  name?: string;
+  /** If displaying an icon istead of initials */
+  icon?: React.ReactNode;
+  /** Determines the shape of the avatar */
+  profile?: AvatarProfile;
+  /** Additional class names for styling */
+  className?: string;
+}
+
+export const Avatar = ({ icon, name, size = 'md', profile = 'person', className }: AvatarProps) => {
+  return (
+    <div
+      className={cn(classes.avatar, classes[size], classes[profile], className)}
+      aria-hidden
+    >
+      {name && (
+        <Paragraph
+          asChild
+          size={size}
+          className={classes.initial}
+        >
+          <span>{name.charAt(0)}</span>
+        </Paragraph>
+      )}
+      {icon && <span className={cn(classes[size], classes.icon)}>{icon}</span>}
+    </div>
+  );
+};

src/components/List/List.module.css

@@ -28,3 +28,20 @@
 .listItem:last-child {
   border-bottom: none;
 }
+
+.clickableItem {
+  background-color: var(--backgroundColor);
+  border: none;
+  padding: 0;
+  font: inherit;
+  cursor: pointer;
+  width: 100%;
+}
+
+.clickableItem:hover {
+  --backgroundColor: var(--fds-semantic-surface-neutral-subtle-hover);
+}
+
+.clickableItem:active {
+  --backgroundColor: var(--fds-semantic-surface-neutral-selected);
+}

src/components/List/List.tsx

@@ -1,4 +1,4 @@
-import classNames from 'classnames';
+import cn from 'classnames';
 import type { ReactNode } from 'react';
 import React from 'react';
 
@@ -13,17 +13,27 @@ interface ListProps extends React.HTMLAttributes<HTMLElement> {
   spacing?: boolean;
   /** Whether the list should be transparent or have a background color */
   background?: boolean;
+  /** className for styling the list */
+  className?: string;
 }
 
-export const List = ({ children, heading, spacing, background = true, ...props }: ListProps) => {
+export const List = ({
+  children,
+  heading,
+  spacing,
+  className,
+  background = true,
+  ...props
+}: ListProps) => {
   return (
     <>
       {heading}
       <ul
-        className={classNames(
+        className={cn(
           classes.list,
           spacing ? classes.spacious : classes.compact,
           background && classes.background,
+          className,
         )}
         {...props}
       >

src/components/List/ListItem.tsx

@@ -1,19 +1,30 @@
 import React from 'react';
-import classNames from 'classnames';
+import cn from 'classnames';
 
 import classes from './List.module.css';
 
 interface ListItemProps extends React.HtmlHTMLAttributes<HTMLLIElement> {
   children: React.ReactNode;
+  onClick?: () => void;
 }
 
-export const ListItem = ({ children, className, ...props }: ListItemProps) => {
+// TODO: Make this into a complete ListItem component with avatars, title and subtitle as designed
+export const ListItem = ({ children, onClick, className, ...props }: ListItemProps) => {
   return (
     <li
-      className={classNames(classes.listItem, className)}
+      className={cn(classes.listItem)}
       {...props}
     >
-      {children}
+      {onClick ? (
+        <button
+          className={cn(classes.clickableItem, className)}
+          onClick={onClick}
+        >
+          {children}
+        </button>
+      ) : (
+        <div className={className}>{children}</div>
+      )}
     </li>
   );
 };

src/components/List/index.ts

@@ -0,0 +1,2 @@
+export { List } from './List';
+export { ListItem } from './ListItem';

src/components/UserInfoBar/UserInfoBar.tsx

@@ -2,9 +2,10 @@ import * as React from 'react';
 import { Buildings3FillIcon } from '@navikt/aksel-icons';
 
 import AltinnTextLogo from '@/assets/AltinnTextLogo.svg?react';
-import classes from './UserInfoBar.module.css';
 import { useGetReporteeQuery, useGetUserInfoQuery } from '@/rtk/features/userInfo/userInfoApi';
 
+import classes from './UserInfoBar.module.css';
+
 export const UserInfoBar = () => {
   const { data: userData } = useGetUserInfoQuery();
   const { data: reporteeData } = useGetReporteeQuery();

src/components/index.ts

@@ -1,6 +1,7 @@
 export { CompactDeletableListItem, ListColor } from './CompactDeletableListItem';
 export { DeletableListItem } from './DeletableListItem';
 export { Line } from './Line';
+export { List, ListItem } from './List';
 export { PageContainer } from './PageContainer';
 export { PageWrapper } from './PageWrapper/PageWrapper';
 export { UserInfoBar } from './UserInfoBar/UserInfoBar';

src/dataObjects/dtos/resourceDelegation.tsx

@@ -55,3 +55,13 @@ export type ApiDelegationResult = {
   apiName: string;
   success: boolean;
 };
+
+export type ResourceReference = {
+  resource: IdValuePair[];
+  action?: string;
+};
+
+export enum RightStatus {
+  Delegable = 'Delegable',
+  NotDelegable = 'NotDelegable',
+}

src/features/amUI/userRightsPage/DelegationModal/DelegationModal.module.css

@@ -0,0 +1,7 @@
+.modalDialog {
+  max-width: 1100px;
+}
+
+.content {
+  margin-bottom: 1em;
+}