feat(Actions): re-implemented action with new UI

frontend/app-development/layout/PageLayout.tsx

@@ -21,7 +21,7 @@ export const PageLayout = (): React.ReactNode => {
 
   const { data: orgs, isPending: orgsPending } = useOrgListQuery();
   const { data: repository } = useRepoMetadataQuery(org, app);
-  const repoOwnerIsOrg = !orgsPending && Object.keys(orgs).includes(repository?.owner.login);
+  const repoOwnerIsOrg = !orgsPending && Object.keys(orgs).includes(repository?.owner?.login);
 
   const {
     data: repoStatus,

frontend/language/src/nb.json

@@ -763,7 +763,12 @@
   "process_editor.configuration_panel.edit_policy_alert_message": "Du må ha tilgangsregler som dekker alle oppgaver. Gå til Tilganger for å sjekke om du har en regel som dekker denne oppgaven. Hvis du ikke har en regel for oppgaven, kan du enten lage en ny regel eller inkludere denne oppgaven i en regel som allerede finnes.",
   "process_editor.configuration_panel.edit_policy_open_policy_editor_button": "Gå til Tilganger",
   "process_editor.configuration_panel.edit_policy_open_policy_editor_heading": "Åpne Tilganger for å redigere tilgangsregler",
+  "process_editor.configuration_panel_actions_action_card_custom": "Lag egendefinert handling",
+  "process_editor.configuration_panel_actions_action_card_custom_label": "Skriv inn navnet på handlingen du vil lage",
+  "process_editor.configuration_panel_actions_action_card_title": "Handling {{ actionIndex }}",
   "process_editor.configuration_panel_actions_action_label": "Handling {{ actionIndex }}: {{ actionName }}",
+  "process_editor.configuration_panel_actions_action_selector_label": "Velg en handling fra listen",
+  "process_editor.configuration_panel_actions_action_tab_predefined": "Velg standard handling",
   "process_editor.configuration_panel_actions_action_type_help_text": "Hjelpetekst for valg av handlingstype",
   "process_editor.configuration_panel_actions_add_new": "Legg til ny handling",
   "process_editor.configuration_panel_actions_combobox_description": "Velg en predefinert handling eller definer din egen ved å skrive inn navnet som fritekst i feltet",

frontend/libs/studio-components/src/components/StudioCard/index.tsx

@@ -0,0 +1 @@
+export { Card as StudioCard, type CardProps as StudioCardProps } from '@digdir/design-system-react';

frontend/libs/studio-components/src/components/StudioDivider/index.tsx

@@ -0,0 +1,4 @@
+export {
+  Divider as StudioDivider,
+  type DividerProps as StudioDividerProps,
+} from '@digdir/design-system-react';

frontend/libs/studio-components/src/components/StudioHeading/index.ts

@@ -0,0 +1,4 @@
+export {
+  Heading as StudioHeading,
+  type HeadingProps as HeadingProps,
+} from '@digdir/design-system-react';

frontend/libs/studio-components/src/components/StudioParagraph/index.tsx

@@ -0,0 +1 @@
+export { Paragraph as StudioParagraph } from '@digdir/design-system-react';

frontend/libs/studio-components/src/components/StudioTabs/index.ts

@@ -0,0 +1 @@
+export { Tabs as StudioTabs, type TabsProps as StudioTabsProps } from '@digdir/design-system-react';

frontend/libs/studio-components/src/components/index.ts

@@ -3,6 +3,7 @@ export * from './StudioBooleanToggleGroup';
 export * from './StudioButton';
 export * from './StudioCenter';
 export * from './StudioCodeFragment';
+export * from './StudioCard';
 export * from './StudioDecimalInput';
 export * from './StudioDeleteButton';
 export * from './StudioDropdownMenu';
@@ -15,6 +16,7 @@ export * from './StudioLabelWrapper';
 export * from './StudioModal';
 export * from './StudioNativeSelect';
 export * from './StudioNotFoundPage';
+export * from './StudioParagraph';
 export * from './StudioPageSpinner';
 export * from './StudioPopover';
 export * from './StudioProperty';
@@ -27,3 +29,6 @@ export * from './StudioTextfield';
 export * from './StudioToggleableTextfield';
 export * from './StudioToggleableTextfieldSchema';
 export * from './StudioTreeView';
+export * from './StudioTabs';
+export * from './StudioHeading';
+export * from './StudioDivider';

frontend/packages/process-editor/src/components/Canvas/Canvas.tsx

@@ -11,14 +11,12 @@ import { BPMNEditor } from './BPMNEditor';
 import { VersionHelpText } from './VersionHelpText';
 
 export const Canvas = (): React.ReactElement => {
-  const { isEditAllowed, bpmnXml } = useBpmnContext();
+  const { isEditAllowed } = useBpmnContext();
 
   return (
     <>
       {!isEditAllowed && <VersionHelpText />}
-      <div className={classes.wrapper} key={bpmnXml}>
-        {isEditAllowed ? <BPMNEditor /> : <BPMNViewer />}
-      </div>
+      <div className={classes.wrapper}>{isEditAllowed ? <BPMNEditor /> : <BPMNViewer />}</div>
     </>
   );
 };

frontend/packages/process-editor/src/components/ConfigPanel/ConfigContent/EditActions/ActionsEditor/ActionsEditor.module.css

@@ -0,0 +1,31 @@
+/*  Needs important to be able to override designsystem. Can be removed after we upgrade to latest version */
+
+.cardHeader {
+  padding: var(--fds-spacing-2) !important;
+}
+
+.cardFooter {
+  padding: 0 0 var(--fds-spacing-3) var(--fds-spacing-3) !important;
+  gap: var(--fds-spacing-3);
+}
+
+.cardDivider {
+  margin: 0 !important;
+}
+
+.cardContent {
+  padding-left: var(--fds-spacing-3) !important;
+  padding-right: var(--fds-spacing-3) !important;
+}
+
+.tabsContainer {
+  border: 0;
+}
+
+.tabsContent {
+  padding: var(--fds-spacing-2) 0 !important;
+}
+
+.actionView {
+  margin-bottom: var(--fds-spacing-3);
+}

frontend/packages/process-editor/src/components/ConfigPanel/ConfigContent/EditActions/ActionsEditor/ActionsEditor.test.tsx

@@ -0,0 +1,22 @@
+import { render } from '@testing-library/react';
+import { BpmnContext } from '@altinn/process-editor/contexts/BpmnContext';
+import { mockBpmnContextValue } from '../../../../../../test/mocks/bpmnContextMock';
+import { BpmnConfigPanelFormContextProvider } from '@altinn/process-editor/contexts/BpmnConfigPanelContext';
+import { PredefinedActions } from '@altinn/process-editor/components/ConfigPanel/ConfigContent/EditActions/ActionsEditor/PredefinedActions';
+import React from 'react';
+
+describe('ActionsEditor', () => {
+  it('should be possible to add new action', () => {
+    re;
+  });
+});
+
+const renderActionsEditor = () => {
+  return render(
+    <BpmnContext.Provider value={mockBpmnContextValue}>
+      <BpmnConfigPanelFormContextProvider>
+        <PredefinedActions actionElement={actionElementMock} />
+      </BpmnConfigPanelFormContextProvider>
+    </BpmnContext.Provider>,
+  );
+};

frontend/packages/process-editor/src/components/ConfigPanel/ConfigContent/EditActions/ActionsEditor/ActionsEditor.tsx

@@ -0,0 +1,134 @@
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+import {
+  StudioCard,
+  StudioTabs,
+  StudioDivider,
+  StudioButton,
+  StudioDeleteButton,
+  StudioProperty,
+  StudioParagraph,
+} from '@studio/components';
+import { CheckmarkIcon } from '@studio/icons';
+import { PredefinedActions } from './PredefinedActions';
+import { CustomActions } from './CustomActions';
+import { type Action, BpmnActionModeler } from '../../../../../utils/bpmn/BpmnActionModeler';
+import { useBpmnContext } from '../../../../../contexts/BpmnContext';
+import { getPredefinedActions, isActionRequiredForTask } from '../ActionsUtils';
+
+import classes from './ActionsEditor.module.css';
+
+enum TabIds {
+  Predefined = 'predefined',
+  Custom = 'custom',
+}
+
+type ComponentMode = 'edit' | 'view';
+
+type ActionsEditorProps = {
+  actionElement: Action;
+  actionIndex: number;
+  mode?: ComponentMode;
+};
+export const ActionsEditor = ({
+  actionElement,
+  actionIndex,
+  mode,
+}: ActionsEditorProps): React.ReactElement => {
+  const [componentMode, setComponentMode] = React.useState<ComponentMode>(mode || 'view');
+  const { t } = useTranslation();
+  const { bpmnDetails } = useBpmnContext();
+  const bpmnActionModeler = new BpmnActionModeler(bpmnDetails.element);
+
+  const actionLabel = t('process_editor.configuration_panel_actions_action_label', {
+    actionIndex: actionIndex + 1,
+    actionName: actionElement.action,
+  });
+
+  if (componentMode === 'edit') {
+    return (
+      <ActionEditable
+        actionElement={actionElement}
+        actionIndex={actionIndex}
+        onClose={() => setComponentMode('view')}
+        onDelete={() => bpmnActionModeler.deleteActionFromTask(actionElement)}
+      />
+    );
+  }
+
+  return (
+    <StudioProperty.Button
+      aria-label={actionLabel}
+      readOnly={isActionRequiredForTask(actionElement.action, bpmnDetails.taskType)}
+      onClick={() => setComponentMode('edit')}
+      property={actionLabel}
+      value={actionElement.action}
+      className={classes.actionView}
+    />
+  );
+};
+
+type ActionEditableProps = {
+  actionElement: Action;
+  actionIndex: number;
+  onClose: () => void;
+  onDelete: () => void;
+};
+const ActionEditable = ({
+  actionElement,
+  actionIndex,
+  onClose,
+  onDelete,
+}: ActionEditableProps): React.ReactElement => {
+  const { t } = useTranslation();
+  const { bpmnDetails } = useBpmnContext();
+
+  const isCustomAction =
+    actionElement.action !== undefined &&
+    !getPredefinedActions(bpmnDetails.taskType).includes(actionElement.action);
+
+  return (
+    <StudioCard>
+      <StudioCard.Header className={classes.cardHeader}>
+        <StudioParagraph size='small'>
+          {t('process_editor.configuration_panel_actions_action_card_title', {
+            actionIndex: actionIndex + 1,
+          })}
+        </StudioParagraph>
+      </StudioCard.Header>
+      <StudioDivider color='subtle' className={classes.cardDivider} />
+      <StudioCard.Content className={classes.cardContent}>
+        <StudioTabs
+          defaultValue={isCustomAction ? TabIds.Custom : TabIds.Predefined}
+          size='small'
+          className={classes.tabsContainer}
+        >
+          <StudioTabs.List>
+            <StudioTabs.Tab value={TabIds.Predefined}>
+              {t('process_editor.configuration_panel_actions_action_tab_predefined')}
+            </StudioTabs.Tab>
+            <StudioTabs.Tab value={TabIds.Custom}>
+              {t('process_editor.configuration_panel_actions_action_card_custom')}
+            </StudioTabs.Tab>
+          </StudioTabs.List>
+          <StudioTabs.Content value={TabIds.Predefined} className={classes.tabsContent}>
+            <PredefinedActions actionElement={actionElement} />
+          </StudioTabs.Content>
+          <StudioTabs.Content value={TabIds.Custom} className={classes.tabsContent}>
+            <CustomActions actionElement={actionElement} />
+          </StudioTabs.Content>
+        </StudioTabs>
+      </StudioCard.Content>
+      <StudioCard.Footer className={classes.cardFooter}>
+        <StudioButton
+          size='small'
+          variant='secondary'
+          color='success'
+          icon={<CheckmarkIcon />}
+          onClick={onClose}
+        />
+        <StudioDeleteButton size='small' onDelete={onDelete} />
+      </StudioCard.Footer>
+    </StudioCard>
+  );
+};

frontend/packages/process-editor/src/components/ConfigPanel/ConfigContent/EditActions/ActionsEditor/CustomActions/CustomAction.test.tsx

@@ -0,0 +1,78 @@
+import React from 'react';
+import { userEvent } from '@testing-library/user-event';
+import { textMock } from '@studio/testing/mocks/i18nMock';
+import { render, screen, waitFor } from '@testing-library/react';
+import { CustomActions } from './CustomActions';
+import { useActionHandler } from '../hooks/useOnActionChange';
+import { BpmnContext } from '../../../../../../contexts/BpmnContext';
+import { mockBpmnContextValue } from '../../../../../../../test/mocks/bpmnContextMock';
+import { type Action, BpmnActionModeler } from '../../../../../../utils/bpmn/BpmnActionModeler';
+import { BpmnConfigPanelFormContextProvider } from '../../../../../../contexts/BpmnConfigPanelContext';
+
+jest.mock('../hooks/useOnActionChange');
+jest.mock('../../../../../../utils/bpmn/BpmnActionModeler');
+
+const actionElementMock: Action = {
+  $type: 'altinn:Action',
+};
+
+describe('CustomActions', () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  it('should be possible to add new custom action', async () => {
+    const user = userEvent.setup();
+
+    const handeOnActionChangeMock = jest.fn();
+    (useActionHandler as jest.Mock).mockImplementation(() => ({
+      handleOnActionChange: handeOnActionChangeMock,
+    }));
+
+    renderCustomAction();
+
+    const inputField = screen.getByLabelText(
+      textMock('process_editor.configuration_panel_actions_action_card_custom_label'),
+    );
+
+    await user.type(inputField, 'My custom action');
+    await waitFor(() => expect(handeOnActionChangeMock).toHaveBeenCalledTimes(1));
+    expect(handeOnActionChangeMock).toHaveBeenCalledWith(
+      expect.objectContaining({
+        target: expect.objectContaining({
+          value: 'My custom action',
+        }),
+      }),
+    );
+  });
+
+  it('should be possible to change action type', async () => {
+    const user = userEvent.setup();
+
+    const updateTypeForActionMock = jest.fn();
+    (BpmnActionModeler as jest.Mock).mockImplementation(() => ({
+      updateTypeForAction: updateTypeForActionMock,
+      getTypeForAction: jest.fn().mockReturnValue('Process'),
+    }));
+
+    renderCustomAction();
+
+    const actionTypeSwitch = screen.getByLabelText(
+      textMock('process_editor.configuration_panel_actions_set_server_action_label'),
+    );
+    await user.click(actionTypeSwitch);
+
+    expect(updateTypeForActionMock).toHaveBeenCalledTimes(1);
+    expect(updateTypeForActionMock).toHaveBeenCalledWith(actionElementMock, 'serverAction');
+  });
+});
+
+const renderCustomAction = () => {
+  return render(
+    <BpmnContext.Provider value={mockBpmnContextValue}>
+      <BpmnConfigPanelFormContextProvider>
+        <CustomActions actionElement={actionElementMock} />
+      </BpmnConfigPanelFormContextProvider>
+    </BpmnContext.Provider>,
+  );
+};

frontend/packages/process-editor/src/components/ConfigPanel/ConfigContent/EditActions/ActionsEditor/CustomActions/CustomActions.module.css

@@ -0,0 +1,3 @@
+.customActionTextfield {
+  margin-bottom: var(--fds-spacing-2);
+}