Bugfix/api delegations/384 list scopes in overview

src/components/DelegationActionBar/DelegationActionBar.tsx

@@ -1,4 +1,4 @@
-import { Button, List, ListItem } from '@digdir/design-system-react';
+import { Button } from '@digdir/design-system-react';
 import { useState } from 'react';
 import * as React from 'react';
 import { useTranslation } from 'react-i18next';
@@ -8,6 +8,7 @@ import { ReactComponent as AddCircle } from '@/assets/AddCircle.svg';
 
 import { Line } from '../Line';
 import { ActionBar, type ActionBarProps } from '../ActionBar';
+import ScopeList from '../ScopeList/ScopeList';
 
 import classes from './DelegationActionBar.module.css';
 
@@ -73,15 +74,7 @@ export const DelegationActionBar = ({
         {scopeList.length > 0 && (
           <div>
             <p className={classes.scopeText}>{t('api_delegation.scopes')}:</p>
-            <List borderStyle='dashed'>
-              {scopeList.map((scope, i) => {
-                return (
-                  <ListItem key={i}>
-                    <div className={classes.scopeItems}>{scope}</div>
-                  </ListItem>
-                );
-              })}
-            </List>
+            <ScopeList scopeList={scopeList} />
           </div>
         )}
         {topContentText && (

src/components/DeletableListItem/DeletableListItem.module.css

@@ -35,4 +35,13 @@
   margin-bottom: 0.7rem;
   word-break: break-word;
   font-weight: 400;
+}
+
+.scopeText{
+  font-weight: 300;
+}
+
+.scopeListContainer{
+  margin-top: 30px;
+  margin-bottom: 30px;
 }

src/components/DeletableListItem/DeletableListItem.tsx

@@ -8,20 +8,24 @@ import { ReactComponent as MinusCircle } from '@/assets/MinusCircle.svg';
 import { ReactComponent as Cancel } from '@/assets/Cancel.svg';
 import { useMediaQuery } from '@/resources/hooks';
 
+import ScopeList from '../ScopeList/ScopeList';
+
 import classes from './DeletableListItem.module.css';
 
 export interface DeletableListItemProps {
   softDeleteCallback: () => void;
   softRestoreCallback: () => void;
   item: ApiListItem;
   isEditable: boolean;
+  scopes?: string[];
 }
 
 export const DeletableListItem = ({
   softDeleteCallback,
   softRestoreCallback,
   item,
   isEditable,
+  scopes,
 }: DeletableListItemProps) => {
   const { t } = useTranslation('common');
   const isSm = useMediaQuery('(max-width: 768px)');
@@ -64,6 +68,12 @@ export const DeletableListItem = ({
           <div className={classes.listItemTexts}>
             <div className={classes.apiListItem}>{item.apiName}</div>
             <div className={classes.ownerListItem}>{item.owner}</div>
+            {scopes && (
+              <div className={classes.scopeListContainer}>
+                <p className={classes.scopeText}>{t('api_delegation.scopes')}:</p>
+                <ScopeList scopeList={scopes} />
+              </div>
+            )}
             <div>{item.description}</div>
           </div>
         </div>

src/components/ScopeList/ScopeList.module.css

@@ -0,0 +1,4 @@
+.scopeItems {
+  word-break: break-word;
+  margin: 10px;
+}

src/components/ScopeList/ScopeList.tsx

@@ -0,0 +1,22 @@
+import { List, ListItem } from '@digdir/design-system-react';
+import * as React from 'react';
+
+import classes from './ScopeList.module.css';
+
+export interface ScopeListProps {
+  scopeList: string[];
+}
+
+const ScopeList = ({ scopeList }: ScopeListProps) => {
+  return (
+    <List borderStyle='dashed'>
+      {scopeList.map((scope, i) => (
+        <ListItem key={i}>
+          <div className={classes.scopeItems}>{scope}</div>
+        </ListItem>
+      ))}
+    </List>
+  );
+};
+
+export default ScopeList;

src/features/apiDelegation/components/OverviewPageContent/OrgDelegationActionBar/OrgDelegationActionBar.tsx

@@ -91,6 +91,7 @@ export const OrgDelegationActionBar = ({
       softRestoreCallback={() => dispatch(softRestore([organization.id, item.id]))}
       item={item}
       isEditable={isEditable}
+      scopes={item.scopes}
     ></DeletableListItem>
   ));
 
@@ -135,7 +136,7 @@ export const OrgDelegationActionBar = ({
       }
     >
       <div className={classes.actionBarContent}>
-        <List borderStyle={'dashed'}>{listItems}</List>
+        <List borderStyle={'solid'}>{listItems}</List>
       </div>
     </ActionBar>
   );

src/rtk/features/apiDelegation/overviewOrg/overviewOrgSlice.ts

@@ -12,6 +12,7 @@ export interface ApiListItem {
   isSoftDelete: boolean;
   owner: string;
   description: string;
+  scopes: string[];
 }
 
 export interface OverviewOrg {
@@ -22,6 +23,11 @@ export interface OverviewOrg {
   apiList: ApiListItem[];
 }
 
+interface ResourceReference {
+  reference: string;
+  referenceSource: string;
+  referenceType: string;
+}
 interface DelegationDTO {
   coveredByName: string;
   offeredByName: string;
@@ -31,6 +37,7 @@ interface DelegationDTO {
   resourceTitle: string;
   resourceOwnerName: string;
   rightDescription: string;
+  resourceReferences: ResourceReference[];
 }
 
 export interface SliceState {
@@ -56,13 +63,20 @@ const initialState: SliceState = {
 const mapToOverviewOrgList = (delegationArray: DelegationDTO[], layout: LayoutState) => {
   const overviewOrgList: OverviewOrg[] = [];
   for (const delegation of delegationArray) {
+    console.log('delegationblabla', delegation);
     const api: ApiListItem = {
       id: delegation.resourceId,
       apiName: delegation.resourceTitle,
       isSoftDelete: false,
       owner: delegation.resourceOwnerName,
       description: delegation.rightDescription,
+      scopes: [],
     };
+    for (const ref of delegation.resourceReferences) {
+      if (ref.referenceType === 'MaskinportenScope') {
+        api.scopes.push(ref.reference);
+      }
+    }
 
     let delegationOrg = '';
     let delegationOrgNumber = '';