feat(auth-admin): View delegation and refactor access card

libs/api/domains/auth-admin/src/lib/delegationAdmin/delegation-admin.resolver.ts

@@ -91,6 +91,17 @@ export class DelegationAdminResolver {
     return identityLoader.load(customDelegation.toNationalId)
   }
 
+  @ResolveField('createdBy', () => Identity, { nullable: true })
+  resolveCreatedByIdentity(
+    @Loader(IdentityLoader) identityLoader: IdentityDataLoader,
+    @Parent() customDelegation: DelegationDTO,
+  ) {
+    if (!customDelegation.createdByNationalId) {
+      return null
+    }
+    return identityLoader.load(customDelegation.createdByNationalId)
+  }
+
   @ResolveField('validTo', () => Date, { nullable: true })
   resolveValidTo(@Parent() delegation: DelegationDTO): Date | undefined {
     if (!delegation.validTo) {

libs/api/domains/auth/src/lib/models/delegation.model.ts

@@ -51,6 +51,9 @@ export abstract class Delegation {
   @Field(() => Identity)
   to!: Identity
 
+  @Field(() => Identity, { nullable: true })
+  createdBy?: Identity
+
   @Field(() => AuthDelegationType)
   type!: AuthDelegationType
 

libs/api/domains/auth/src/lib/resolvers/delegation.resolver.ts

@@ -128,6 +128,17 @@ export class DelegationResolver {
     )
   }
 
+  @ResolveField('createdBy', () => Identity, { nullable: true })
+  async resolveCreatedBy(
+    @Parent() delegation: DelegationDTO,
+  ): Promise<Identity | null> {
+    if (!delegation.createdByNationalId) {
+      return null
+    }
+
+    return this.identityService.getIdentity(delegation.createdByNationalId)
+  }
+
   @ResolveField('validTo', () => Date, { nullable: true })
   resolveValidTo(@Parent() delegation: DelegationDTO): Date | undefined {
     if (!delegation.validTo) {

libs/api/mocks/src/domains/auth/factories.ts

@@ -44,6 +44,11 @@ export const customDelegation = factory<AuthCustomDelegation>({
     name: faker.name.findName(),
     type: 'Person',
   }),
+  createdBy: () => ({
+    nationalId: createNationalId('person'),
+    name: faker.name.findName(),
+    type: 'Person',
+  }),
   type: 'Custom',
   provider: 'delegationdb',
   scopes: () => delegationScope.list(5),

libs/auth-api-lib/src/lib/delegations/dto/delegation.dto.ts

@@ -68,6 +68,11 @@ export class DelegationDTO {
   @IsString()
   referenceId?: string | null
 
+  @IsOptional()
+  @IsString()
+  @ApiPropertyOptional({ nullable: true, type: String })
+  createdByNationalId?: string | null
+
   @IsOptional()
   @ApiPropertyOptional({ type: [DelegationScopeDTO] })
   @IsArray()

libs/auth-api-lib/src/lib/delegations/models/delegation.model.ts

@@ -141,6 +141,7 @@ export class Delegation extends Model<
       fromNationalId: this.fromNationalId,
       toNationalId: this.toNationalId,
       toName: this.toName,
+      createdByNationalId: this.createdByNationalId,
       validTo: this.validTo,
       scopes: this.delegationScopes
         ? this.delegationScopes.map((scope) => scope.toDTO())

libs/portals/admin/delegation-admin/src/components/CreateDelegationConfirmModal.tsx

@@ -24,13 +24,15 @@ type CreateDelegationConfirmModalProps = Pick<
     referenceId: string
     validTo?: string | undefined
   } | null
+  loading: boolean
   onConfirm(): void
 }
 
 export const CreateDelegationConfirmModal = ({
   fromIdentity,
   toIdentity,
   data,
+  loading,
   onClose,
   onConfirm,
   ...rest
@@ -43,10 +45,6 @@ export const CreateDelegationConfirmModal = ({
     isDisabled: !rest.isVisible,
   })
 
-  const typeLabels: Record<string, string> = {
-    general: formatMessage(m.typeGeneral), // Todo: use enum yet to be created
-  }
-
   return (
     <Modal
       id="access-confirm-modal"
@@ -86,7 +84,7 @@ export const CreateDelegationConfirmModal = ({
         {data?.type && (
           <IdentityCard
             label={formatMessage(m.type)}
-            title={typeLabels[data.type]}
+            title={formatMessage(m.generalMandateLabel)}
             imgSrc="./assets/images/skjaldarmerki.svg"
           />
         )}
@@ -120,6 +118,7 @@ export const CreateDelegationConfirmModal = ({
       <Box position="sticky" bottom={0}>
         <DelegationsFormFooter
           showShadow={showShadow}
+          loading={loading}
           onCancel={onClose}
           onConfirm={onConfirm}
           confirmLabel={formatMessage(coreMessages.codeConfirmation)}

libs/portals/admin/delegation-admin/src/components/DelegationDeleteModal.tsx

@@ -0,0 +1,125 @@
+import { Box, useBreakpoint } from '@island.is/island-ui/core'
+import { useLocale } from '@island.is/localization'
+import { formatNationalId, m as coreMessages } from '@island.is/portals/core'
+import { Modal, ModalProps } from '@island.is/react/components'
+import { m } from '../lib/messages'
+import {
+  DelegationsFormFooter,
+  IdentityCard,
+  useDynamicShadow,
+} from '@island.is/portals/shared-modules/delegations'
+import { AuthCustomDelegation } from '@island.is/api/schema'
+import format from 'date-fns/format'
+import isValid from 'date-fns/isValid'
+import { AuthDelegationType } from '@island.is/shared/types'
+
+type DelegationDeleteModalProps = Pick<
+  ModalProps,
+  'id' | 'onClose' | 'isVisible'
+> & {
+  loading: boolean
+  delegation?: AuthCustomDelegation
+  onDelete(): void
+}
+
+export const DelegationDeleteModal = ({
+  id,
+  loading,
+  delegation,
+  onClose,
+  onDelete,
+  ...rest
+}: DelegationDeleteModalProps) => {
+  const { formatMessage } = useLocale()
+  const { md } = useBreakpoint()
+
+  const { showShadow, pxProps } = useDynamicShadow({
+    rootMargin: md ? '-128px' : '-104px',
+    isDisabled: !rest.isVisible,
+  })
+
+  return (
+    <Modal
+      id={id}
+      label={formatMessage(m.deleteDelegationModalTitle)}
+      title={formatMessage(m.deleteDelegationModalTitle)}
+      onClose={onClose}
+      noPaddingBottom
+      scrollType="inside"
+      closeButtonLabel={formatMessage(m.cancel)}
+      {...rest}
+    >
+      <Box marginY={4} display="flex" flexDirection="column" rowGap={3}>
+        <Box
+          width="full"
+          display="flex"
+          flexDirection={['column', 'column', 'column', 'row']}
+          rowGap={[3, 3, 3, 0]}
+          columnGap={[0, 0, 0, 3]}
+        >
+          {delegation?.from?.name && delegation?.from?.nationalId && (
+            <IdentityCard
+              label={formatMessage(m.fromNationalId)}
+              title={delegation?.from?.name}
+              description={formatNationalId(delegation?.from?.nationalId)}
+              color="blue"
+            />
+          )}
+          {delegation?.to?.name && delegation?.to?.nationalId && (
+            <IdentityCard
+              label={formatMessage(m.toNationalId)}
+              title={delegation?.to.name}
+              description={formatNationalId(delegation?.to.nationalId)}
+              color="purple"
+            />
+          )}
+        </Box>
+        {delegation?.type &&
+          delegation.type === AuthDelegationType.GeneralMandate && (
+            <IdentityCard
+              label={formatMessage(m.type)}
+              title={formatMessage(m.generalMandateLabel)}
+              imgSrc="./assets/images/skjaldarmerki.svg"
+            />
+          )}
+
+        <Box
+          display="flex"
+          flexDirection={['column', 'row']}
+          justifyContent="spaceBetween"
+          columnGap={[0, 3]}
+          rowGap={[3, 0]}
+        >
+          <IdentityCard
+            label={formatMessage(m.validTo)}
+            title={
+              delegation?.validTo && isValid(delegation.validTo)
+                ? format(new Date(delegation?.validTo), 'dd.MM.yyyy')
+                : formatMessage(m.noEndDate)
+            }
+          />
+          {delegation?.referenceId && (
+            <IdentityCard
+              label={formatMessage(m.referenceId)}
+              title={delegation?.referenceId}
+            />
+          )}
+        </Box>
+      </Box>
+
+      <div {...pxProps} />
+
+      <Box position="sticky" bottom={0}>
+        <DelegationsFormFooter
+          loading={loading}
+          showShadow={showShadow}
+          confirmButtonColorScheme="destructive"
+          onCancel={onClose}
+          onConfirm={onDelete}
+          confirmLabel={formatMessage(coreMessages.buttonDestroy)}
+          containerPaddingBottom={[3, 3, 6]}
+        />
+      </Box>
+    </Modal>
+  )
+}

libs/portals/admin/delegation-admin/src/components/DelegationList.tsx

@@ -1,45 +1,79 @@
 import { AuthCustomDelegation } from '@island.is/api/schema'
 import { Box, Stack } from '@island.is/island-ui/core'
-import { AccessCard } from '@island.is/portals/shared-modules/delegations'
+import { AccessCard, DelegationViewModal } from '@island.is/portals/shared-modules/delegations'
 import { useDeleteCustomDelegationAdminMutation } from '../screens/DelegationAdminDetails/DelegationAdmin.generated'
 import { useRevalidator } from 'react-router-dom'
+import React, { useState } from 'react'
+import { DelegationDeleteModal } from './DelegationDeleteModal'
 
 interface DelegationProps {
   direction: 'incoming' | 'outgoing'
   delegationsList: AuthCustomDelegation[]
 }
 
 const DelegationList = ({ delegationsList, direction }: DelegationProps) => {
-  const [deleteCustomDelegationAdminMutation] =
+  const [deleteCustomDelegationAdminMutation, { loading }] =
     useDeleteCustomDelegationAdminMutation()
   const { revalidate } = useRevalidator()
+  const [delegationToDelete, setDelegationToDelete] =
+    useState<AuthCustomDelegation | null>(null)
+  const [delegationView, setDelegationView] =
+    useState<AuthCustomDelegation | null>(null)
+
+  const deleteHandler = async (id: string) => {
+    const { data } = await deleteCustomDelegationAdminMutation({
+      variables: {
+        id,
+      },
+    })
+    if (data) {
+      revalidate()
+      setDelegationToDelete(null)
+    }
+  }
 
   return (
-    <Box marginTop={2}>
-      <Stack space={3}>
-        {delegationsList.map((delegation) => {
-          return (
-            <AccessCard
-              canModify={!!delegation.referenceId} // only allow deletion of paper delegations
-              direction={direction}
-              key={delegation.id}
-              delegation={delegation}
-              isAdminView={true}
-              onDelete={async () => {
-                const { data } = await deleteCustomDelegationAdminMutation({
-                  variables: {
-                    id: delegation.id as string,
-                  },
-                })
-                if (data) {
-                  revalidate()
+    <>
+      <Box marginTop={2}>
+        <Stack space={3}>
+          {delegationsList.map((delegation) => {
+            return (
+              <AccessCard
+                key={delegation.id}
+                delegation={delegation}
+                isAdminView
+                variant={direction}
+                onView={delegation.referenceId ? (d) => setDelegationView(d) : undefined}
+                onDelete={
+                  delegation.referenceId
+                    ? () => setDelegationToDelete(delegation)
+                    : undefined
                 }
-              }}
-            />
-          )
-        })}
-      </Stack>
-    </Box>
+              />
+            )
+          })}
+        </Stack>
+      </Box>
+      <DelegationDeleteModal
+        id={`${direction}-delegation-delete-modal`}
+        delegation={delegationToDelete as AuthCustomDelegation}
+        loading={loading}
+        onClose={() => setDelegationToDelete(null)}
+        onDelete={() => {
+          if (delegationToDelete) {
+            deleteHandler(delegationToDelete.id as string)
+          }
+        }}
+        isVisible={!!delegationToDelete}
+      />
+      <DelegationViewModal
+        onClose={() => setDelegationView(null)}
+        isVisible={!!delegationView}
+        delegation={delegationView || undefined}
+        direction={direction}
+        isAdminView
+      />
+    </>
   )
 }
 

libs/portals/admin/delegation-admin/src/lib/messages.ts

@@ -61,9 +61,13 @@ export const m = defineMessages({
     id: 'admin.delegationAdmin:create',
     defaultMessage: 'Skrá umboð',
   },
+  delete: {
+    id: 'admin.delegationAdmin:delete',
+    defaultMessage: 'Eyða umboði',
+  },
   noEndDate: {
     id: 'admin.delegationAdmin:noEndDate',
-    defaultMessage: 'Gildis tími óendanlegur',
+    defaultMessage: 'Gildistími óendanlegur',
   },
   validTo: {
     id: 'admin.delegationAdmin:validTo',
@@ -73,8 +77,8 @@ export const m = defineMessages({
     id: 'admin.delegationAdmin:type',
     defaultMessage: 'Aðgangstegund',
   },
-  typeGeneral: {
-    id: 'admin.delegationAdmin:typeGeneral',
+  generalMandateLabel: {
+    id: 'admin.delegationAdmin:generalMandateLabel',
     defaultMessage: 'Allsherjarumboð',
   },
   referenceId: {
@@ -117,6 +121,10 @@ export const m = defineMessages({
     id: 'admin.delegationAdmin:createDelegationConfirmModalTitle',
     defaultMessage: 'Þú ert að skrá nýtt umboð',
   },
+  deleteDelegationModalTitle: {
+    id: 'admin.delegationAdmin:deleteDelegationModalTitle',
+    defaultMessage: 'Eyða umboði',
+  },
   createDelegationSuccessToast: {
     id: 'admin.delegationAdmin:createDelegationSuccessToast',
     defaultMessage: 'Umboð var skráð',