using avatars for both to and from in Rights with others pages (#1426)

Author: allinox

src/features/amUI/common/UserPageHeader/UserPageHeader.module.css

@@ -6,6 +6,9 @@
 
 .avatar {
   grid-area: avatar;
+  display: flex;
+  justify-content: center;
+  align-items: center;
 }
 .name {
   grid-area: name;

src/features/amUI/common/UserPageHeader/UserPageHeader.tsx

@@ -1,26 +1,59 @@
 import { Avatar, DsParagraph, DsHeading } from '@altinn/altinn-components';
 import type { ReactNode } from 'react';
-
-import classes from './UserPageHeader.module.css';
+import { ArrowRightIcon } from '@navikt/aksel-icons';
 
 import { PartyType } from '@/rtk/features/userInfoApi';
 
+import classes from './UserPageHeader.module.css';
+
 interface UserPageHeaderProps {
   userName?: string;
   userType?: PartyType;
   subHeading?: string;
   roles?: ReactNode;
+  secondaryAvatarName?: string;
+  secondaryAvatarType?: PartyType;
 }
 
-export const UserPageHeader = ({ userName, userType, subHeading, roles }: UserPageHeaderProps) => {
-  return (
-    <div className={classes.headingContainer}>
+export const UserPageHeader = ({
+  userName,
+  userType,
+  subHeading,
+  roles,
+  secondaryAvatarName,
+  secondaryAvatarType,
+}: UserPageHeaderProps) => {
+  const avatar = () => {
+    if (secondaryAvatarName && secondaryAvatarType) {
+      return (
+        <div className={classes.avatar}>
+          <Avatar
+            name={userName || ''}
+            size={'lg'}
+            type={userType === PartyType.Organization ? 'company' : 'person'}
+          />
+          <ArrowRightIcon style={{ fontSize: '1.5rem' }} />
+          <Avatar
+            name={secondaryAvatarName}
+            size={'lg'}
+            type={secondaryAvatarType === PartyType.Organization ? 'company' : 'person'}
+          />
+        </div>
+      );
+    }
+    return (
       <Avatar
         className={classes.avatar}
         name={userName || ''}
         size={'lg'}
         type={userType === PartyType.Organization ? 'company' : 'person'}
       />
+    );
+  };
+
+  return (
+    <div className={classes.headingContainer}>
+      {avatar()}
       <DsHeading
         level={1}
         data-size='sm'

src/features/amUI/reporteeRightsPage/ReporteeAccessPackageSection.tsx

@@ -2,14 +2,14 @@ import { useTranslation } from 'react-i18next';
 import { useEffect, useRef, useState } from 'react';
 import { DsHeading } from '@altinn/altinn-components';
 
+import type { AccessPackage } from '@/rtk/features/accessPackageApi';
+
 import { AccessPackageList } from '../common/AccessPackageList/AccessPackageList';
 import { DelegationAction } from '../common/DelegationModal/EditModal';
 import { AccessPackageInfoModal } from '../userRightsPage/AccessPackageSection/AccessPackageInfoModal';
 import { useDelegationModalContext } from '../common/DelegationModal/DelegationModalContext';
 import { OldRolesAlert } from '../common/OldRolesAlert/OldRolesAlert';
 
-import type { AccessPackage } from '@/rtk/features/accessPackageApi';
-
 interface ReporteeAccessPackageSectionProps {
   numberOfAccesses?: number;
 }
@@ -42,6 +42,7 @@ export const ReporteeAccessPackageSection = ({
         availableActions={[DelegationAction.REVOKE, DelegationAction.REQUEST]}
         useDeleteConfirm
         showAllPackages
+        minimizeAvailablePackages
         onSelect={(accessPackage) => {
           setModalItem(accessPackage);
           modalRef.current?.showModal();

src/features/amUI/reporteeRightsPage/ReporteeRightsPage.tsx

@@ -2,6 +2,15 @@ import * as React from 'react';
 import { useTranslation } from 'react-i18next';
 import { useParams } from 'react-router';
 
+import { useDocumentTitle } from '@/resources/hooks/useDocumentTitle';
+import { PageWrapper } from '@/components';
+import { useGetPartyByUUIDQuery } from '@/rtk/features/lookupApi';
+import { useGetUserAccessesQuery } from '@/rtk/features/userInfoApi';
+import { amUIPath } from '@/routes/paths';
+import { getCookie } from '@/resources/Cookie/CookieMethods';
+import { filterDigdirRole } from '@/resources/utils/roleUtils';
+import { rerouteIfNotConfetti } from '@/resources/utils/featureFlagUtils';
+
 import { UserPageHeader } from '../common/UserPageHeader/UserPageHeader';
 import { RightsTabs } from '../common/RightsTabs/RightsTabs';
 import { UserRoles } from '../common/UserRoles/UserRoles';
@@ -13,24 +22,15 @@ import { PartyRepresentationProvider } from '../common/PartyRepresentationContex
 import { ReporteeAccessPackageSection } from './ReporteeAccessPackageSection';
 import { ReporteeRoleSection } from './ReporteeRoleSection';
 
-import { useDocumentTitle } from '@/resources/hooks/useDocumentTitle';
-import { PageWrapper } from '@/components';
-import { useGetPartyByUUIDQuery } from '@/rtk/features/lookupApi';
-import { useGetReporteeQuery, useGetUserAccessesQuery } from '@/rtk/features/userInfoApi';
-import { amUIPath } from '@/routes/paths';
-import { getCookie } from '@/resources/Cookie/CookieMethods';
-import { filterDigdirRole } from '@/resources/utils/roleUtils';
-import { rerouteIfNotConfetti } from '@/resources/utils/featureFlagUtils';
-
 export const ReporteeRightsPage = () => {
   const { t } = useTranslation();
   const { id: reporteeUuid } = useParams();
 
-  const { data: reportee } = useGetReporteeQuery();
-  const { data: party } = useGetPartyByUUIDQuery(reporteeUuid ?? '');
+  const { data: toParty } = useGetPartyByUUIDQuery(getCookie('AltinnPartyUuid') ?? '');
+  const { data: fromParty } = useGetPartyByUUIDQuery(reporteeUuid ?? '');
 
   useDocumentTitle(t('user_rights_page.page_title'));
-  const name = reporteeUuid ? party?.name : '';
+  const name = reporteeUuid ? fromParty?.name : '';
 
   const { data: allAccesses } = useGetUserAccessesQuery({
     from: reporteeUuid ?? '',
@@ -51,15 +51,17 @@ export const ReporteeRightsPage = () => {
             <PageContainer backUrl={`/${amUIPath.Reportees}`}>
               <UserPageHeader
                 userName={name}
-                userType={party?.partyTypeName}
-                subHeading={t('reportee_rights_page.heading_subtitle', { name: reportee?.name })}
+                userType={fromParty?.partyTypeName}
+                secondaryAvatarName={toParty?.name}
+                secondaryAvatarType={toParty?.partyTypeName}
+                subHeading={t('reportee_rights_page.heading_subtitle', { name: toParty?.name })}
                 roles={
                   displayLimitedPreviewLaunch &&
-                  !!reportee?.partyUuid &&
-                  !!party?.partyUuid && (
+                  !!toParty?.partyUuid &&
+                  !!fromParty?.partyUuid && (
                     <UserRoles
-                      rightOwnerUuid={reportee.partyUuid}
-                      rightHolderUuid={party.partyUuid}
+                      rightOwnerUuid={toParty.partyUuid}
+                      rightHolderUuid={fromParty.partyUuid}
                     />
                   )
                 }