chore: Exchange gui actions with AC DialogActions component

packages/frontend/package.json

@@ -21,7 +21,7 @@
     "i18n:sort": "tsx ./src/i18n/check.ts --sort"
   },
   "dependencies": {
-    "@altinn/altinn-components": "^0.18.8",
+    "@altinn/altinn-components": "^0.19.1",
     "@digdir/designsystemet-css": "1.0.0-next.50",
     "@digdir/designsystemet-react": "1.0.0-next.50",
     "@digdir/designsystemet-theme": "1.0.0-next.50",

packages/frontend/src/api/useDialogById.tsx

@@ -12,7 +12,7 @@ import type {
 } from 'bff-types-generated';
 import { AttachmentUrlConsumer } from 'bff-types-generated';
 import { t } from 'i18next';
-import type { GuiActionButtonProps } from '../components';
+import type { DialogActionProps } from '../components/InboxItem/InboxItemDetail.tsx';
 import { QUERY_KEYS } from '../constants/queryKeys.ts';
 import { type ValueType, getPreferredPropertyByLocale } from '../i18n/property.ts';
 import { useOrganizations } from '../pages/Inbox/useOrganizations.ts';
@@ -61,7 +61,7 @@ export interface DialogByIdDetails {
   sender: Participant;
   receiver: Participant;
   title: string;
-  guiActions: GuiActionButtonProps[];
+  guiActions: DialogActionProps[];
   additionalInfo: { value: string; mediaType: string } | undefined;
   attachments: AttachmentFieldsFragment[];
   dialogToken: string;

packages/frontend/src/components/InboxItem/InboxItemDetail.tsx

@@ -1,11 +1,14 @@
 import {
   Article,
   type AttachmentLinkProps,
+  type DialogActionButtonProps,
+  DialogActions,
   DialogAttachments,
   DialogBody,
+  type DialogButtonPriority,
   DialogHeader,
 } from '@altinn/altinn-components';
-import type { ReactElement } from 'react';
+import { type ReactElement, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import type { DialogActivity, DialogByIdDetails, DialogTransmission } from '../../api/useDialogById.tsx';
 import { getPreferredPropertyByLocale } from '../../i18n/property.ts';
@@ -15,7 +18,6 @@ import { Activity } from '../Activity';
 import { AdditionalInfoContent } from '../AdditonalInfoContent';
 import { MainContentReference } from '../MainContentReference';
 import { Transmission } from '../Transmission';
-import { GuiActions } from './GuiActions.tsx';
 import styles from './inboxItemDetail.module.css';
 
 interface InboxItemDetailProps {
@@ -47,6 +49,51 @@ interface InboxItemDetailProps {
  * />
  */
 
+export interface DialogActionProps {
+  id: string;
+  title: string;
+  url: string;
+  httpMethod: string;
+  prompt?: string;
+  disabled?: boolean;
+  priority: string;
+}
+
+const handleDialogActionClick = async (
+  props: DialogActionProps,
+  dialogToken: string,
+  responseFinished: () => void,
+): Promise<void> => {
+  const { url, httpMethod, prompt } = props;
+
+  if (prompt && !window.confirm(prompt)) {
+    responseFinished();
+    return;
+  }
+
+  if (httpMethod === 'GET') {
+    responseFinished();
+    window.open(url, '_blank');
+  } else {
+    try {
+      const response = await fetch(url, {
+        method: httpMethod,
+        headers: {
+          Authorization: `Bearer ${dialogToken}`,
+        },
+      });
+
+      if (!response.ok) {
+        console.error(`Error: ${response.statusText}`);
+      }
+    } catch (error) {
+      console.error('Error performing action:', error);
+    } finally {
+      responseFinished();
+    }
+  }
+};
+
 export const InboxItemDetail = ({ dialog }: InboxItemDetailProps): ReactElement => {
   const { t } = useTranslation();
   const format = useFormat();
@@ -95,6 +142,22 @@ export const InboxItemDetail = ({ dialog }: InboxItemDetailProps): ReactElement
   const formatString = clockPrefix ? `do MMMM yyyy '${clockPrefix}' HH.mm` : `do MMMM yyyy HH.mm`;
   const dueAtLabel = dueAt ? format(dueAt, formatString) : '';
 
+  const [isLoading, setIsLoading] = useState<string>('');
+
+  const dialogActions: DialogActionButtonProps[] = guiActions.map((action) => ({
+    id: action.id,
+    label: action.title,
+    disabled: !!isLoading || action.disabled,
+    priority: action.priority.toLocaleLowerCase() as DialogButtonPriority,
+    url: action.url,
+    httpMethod: action.httpMethod,
+    loading: isLoading === action.id,
+    onClick: () => {
+      setIsLoading(action.id);
+      handleDialogActionClick(action, dialogToken, () => setIsLoading(''));
+    },
+  }));
+
   return (
     <Article padding={6} spacing={6}>
       <DialogHeader dueAt={dueAt} dueAtLabel={dueAtLabel} status={getDialogStatus(status, t)} title={title} />
@@ -114,7 +177,7 @@ export const InboxItemDetail = ({ dialog }: InboxItemDetailProps): ReactElement
             items={attachmentItems}
           />
         )}
-        {guiActions.length > 0 && <GuiActions actions={guiActions} dialogToken={dialogToken} />}
+        <DialogActions items={dialogActions} />
       </DialogBody>
       <AdditionalInfoContent mediaType={additionalInfo?.mediaType} value={additionalInfo?.value} />
       {activities.length > 0 && (

packages/frontend/src/components/InboxItem/index.ts

@@ -1,3 +1,2 @@
 export * from './InboxItems.tsx';
 export * from './InboxItemDetail.tsx';
-export * from './GuiActions.tsx';