Merge branch 'master' into 11692-improve-unit-tests-after-upgrade-to-…

…react-query-v5

frontend/app-development/features/processEditor/ProcessEditor.tsx

@@ -23,7 +23,7 @@ export const ProcessEditor = () => {
       { bpmnXml: xml },
       {
         onSuccess: () => {
-          toast.success('Bpmn saved successfully');
+          toast.success(t('process_editor.saved_successfully'));
         },
       },
     );

frontend/language/src/nb.json

@@ -17,6 +17,7 @@
   "api_errors.DM_CsharpCompiler_NameCollision": "Navnet <bold>{{nodeName}}</bold> er i bruk på et element som har et overordnet element med samme navn. Gi et av disse elementene et annet navn.",
   "api_errors.GT_01": "Deling av endringer mislyktes. Vennligst prøv igjen.",
   "api_errors.ResourceNotFound": "Fant ikke en fil applikasjonen din prøvde å få tak i.",
+  "api_errors.Unauthorized": "Handlingen du prøver å utføre krever rettigheter du ikke har. Du blir nå logget ut.",
   "app_create_release.application_builds_based_on": "Applikasjonen bygges basert på",
   "app_create_release.build_version": "Bygg versjon",
   "app_create_release.check_status": "Sjekker status på applikasjonen din...",
@@ -633,20 +634,32 @@
   "preview.subheader.showas": "Vis som",
   "preview.view_size_desktop": "Desktop",
   "preview.view_size_mobile": "Mobil",
-  "process_editor.configuration_panel.under_development_body": "Dette området er under utvikling. Her vil det bli mulig å konfigurere innstillinger knyttet til prosess.",
-  "process_editor.configuration_panel.under_development_title": "Under utvikling",
-  "process_editor.configuration_panel_heading": "Konfigurasjon",
+  "process_editor.configuration_panel_confirmation_task": "Task: Bekreftelse",
+  "process_editor.configuration_panel_data_task": "Task: Utfylling",
+  "process_editor.configuration_panel_element_not_supported": "Vi støtter foreløpig kun å se på Tasks. Velg en Task for å se detaljer.",
+  "process_editor.configuration_panel_feedback_task": "Task: Tilbakemelding",
+  "process_editor.configuration_panel_header_help_text_confirmation": "Bekreftelse-task (confirmation) brukes for å vise sluttbruker en oppsummering som de kan bekrefte.",
+  "process_editor.configuration_panel_header_help_text_data": "Utfylling-task (data) brukes dersom det skal samles inn eller vises frem data.",
+  "process_editor.configuration_panel_header_help_text_feedback": "Tilbakemelding-task (feedback) brukes når sluttbruker må vente på tilbakemelding fra tjenesteeier før de kan gå videre i, eller avslutte, prosessen.",
+  "process_editor.configuration_panel_header_help_text_signing": "Signerings-task (signing) brukes når sluttbruker skal bekrefte med signatur.",
+  "process_editor.configuration_panel_header_help_text_title": "Informasjon om valgt task",
+  "process_editor.configuration_panel_id_label": "ID:",
+  "process_editor.configuration_panel_name_label": "Navn: ",
+  "process_editor.configuration_panel_no_task": "Velg et element i prosessen for å se detaljer.",
+  "process_editor.configuration_panel_signing_task": "Task: Signering",
   "process_editor.edit_mode": "Redigeringsmodus",
   "process_editor.fetch_bpmn_error_message": "Kunne ikke laste inn BPMN for denne appen. Prøv igjen senere.",
   "process_editor.fetch_bpmn_error_title": "En feil oppstod ved innlasting av BPMN",
-  "process_editor.help_text_and_links": "<0>Les mer om hvordan dette gjøres her</0>. Trenger du hjelp til å oppgradere, kan du <1>kontakte oss</1>.",
+  "process_editor.help_text_and_links": "Trenger du hjelp til å oppgradere, kan du <0>ta kontakte med oss</0>.",
   "process_editor.loading": "Laster inn BPMN",
-  "process_editor.need_to_contact_text": "Du kan se på prosessen, men for å redigere den i dette verktøyet må du oppgradere til versjon 8 eller nyere.",
   "process_editor.not_found_diagram_error_message": "Vi kan dessverre ikke vise BPMN-diagrammet for øyeblikket. En mulig årsak til dette kan være at BPMN-filen din ikke inneholder et diagram som er riktig definert innenfor bpmn:diagram-taggen. Du kan verifisere om diagram-taggen finnes i BPMN-filen. En løsning kan være å rekonstruere diagrammet på nytt ved hjelp av prosessverktøyet.",
   "process_editor.not_found_diagram_heading": "Ingen tilgjengelig diagramdata",
   "process_editor.not_found_process_error_message": "Det finnes ingen prosess definert innenfor BPMN, Du kan verifisere om prosessen finnes i BPMN-filen.",
   "process_editor.not_found_process_heading": "Ingen tilgjengelig prosess",
   "process_editor.save": "Lagre",
+  "process_editor.saved_successfully": "Bpmn prosessen ble lagret",
+  "process_editor.too_old_version_helptext_content": "Applikasjonen din har versjon {{ version }} av app-lib-pakken. \nVersjonen er for gammel for å kunne redigere denne modellen.\nDu kan se på prosessen og konfigurere oppsett tilknyttet prosessen, men vi anbefaler at du oppgraderer til versjon 8 eller nyere.",
+  "process_editor.too_old_version_helptext_title": "Du kan ikke redigere prosessen",
   "process_editor.too_old_version_text": "Applikasjonen din har versjon {{ version }} av app-lib-pakken.\nVi støtter kun redigering av prosesser for applikasjoner som bruker versjon 8 eller nyere.",
   "process_editor.too_old_version_title": "Du kan ikke redigere denne prosessen",
   "process_editor.unknown_heading_error_message": "Obs, noe gikk galt!",
@@ -1586,4 +1599,4 @@
   "validation_errors.pattern": "Feil format eller verdi",
   "validation_errors.required": "Feltet er påkrevd",
   "validation_errors.value_as_url": "Ugyldig lenke"
-}
+}

frontend/packages/process-editor/src/ProcessEditor.test.tsx

@@ -48,18 +48,18 @@ describe('ProcessEditor', () => {
     ).toBeInTheDocument();
   });
 
-  it('should render "canvas" when bpmnXml is provided and default render is view-mode', async () => {
+  it('should render "canvas" when bpmnXml is provided and default render is edit-mode', async () => {
     // eslint-disable-next-line testing-library/no-unnecessary-act
     await act(() => {
       render();
     });
 
     expect(
-      screen.getByRole('button', { name: textMock('process_editor.edit_mode') }),
+      screen.getByRole('button', { name: textMock('process_editor.save') }),
     ).toBeInTheDocument();
   });
 
-  it('does not display the alert when the version is 8 or newer', async () => {
+  it('does not display the information about too old version when the version is 8 or newer', async () => {
     const user = userEvent.setup();
     render();
 
@@ -80,10 +80,7 @@ describe('ProcessEditor', () => {
     // Fix to remove act error
     await act(() => user.tab());
 
-    const alertHeader = screen.getByRole('heading', {
-      name: textMock('process_editor.too_old_version_title'),
-      level: 1,
-    });
-    expect(alertHeader).toBeInTheDocument();
+    const tooOldText = screen.getByText(textMock('process_editor.too_old_version_title'));
+    expect(tooOldText).toBeInTheDocument();
   });
 });

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

@@ -43,7 +43,7 @@ describe('Canvas', () => {
     // Fix to remove act error
     await act(() => user.tab());
 
-    const editButton = screen.queryByRole('button', { name: textMock('process_editor.edit_mode') });
+    const editButton = screen.queryByRole('button', { name: textMock('process_editor.save') });
     expect(editButton).not.toBeInTheDocument;
   });
 
@@ -54,7 +54,7 @@ describe('Canvas', () => {
     // Fix to remove act error
     await act(() => user.tab());
 
-    const editButton = screen.getByRole('button', { name: textMock('process_editor.edit_mode') });
+    const editButton = screen.getByRole('button', { name: textMock('process_editor.save') });
     expect(editButton).toBeInTheDocument;
   });
 });

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

@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React from 'react';
 import { useTranslation } from 'react-i18next';
 
 import 'bpmn-js/dist/assets/diagram-js.css';
@@ -27,12 +27,8 @@ export type CanvasProps = {
  */
 export const Canvas = ({ onSave }: CanvasProps): JSX.Element => {
   const { getUpdatedXml, isEditAllowed, numberOfUnsavedChanges } = useBpmnContext();
-  const [isEditorView, setIsEditorView] = useState(false);
-  const { t } = useTranslation();
 
-  const toggleViewModus = (): void => {
-    setIsEditorView((prevIsEditorView) => !prevIsEditorView);
-  };
+  const { t } = useTranslation();
 
   const handleOnSave = async (): Promise<void> => {
     onSave(await getUpdatedXml());
@@ -45,14 +41,8 @@ export const Canvas = ({ onSave }: CanvasProps): JSX.Element => {
 
   return (
     <div className={classes.container}>
-      {isEditAllowed && (
-        <CanvasActionMenu
-          onSave={handleOnSave}
-          toggleViewModus={toggleViewModus}
-          isEditorView={isEditorView}
-        />
-      )}
-      <div className={classes.wrapper}>{isEditorView ? <BPMNEditor /> : <BPMNViewer />}</div>
+      <CanvasActionMenu onSave={handleOnSave} />
+      <div className={classes.wrapper}>{isEditAllowed ? <BPMNEditor /> : <BPMNViewer />}</div>
     </div>
   );
 };

frontend/packages/process-editor/src/components/Canvas/CanvasActionMenu/CanvasActionMenu.module.css

@@ -3,6 +3,7 @@
   margin-top: 18px;
   box-sizing: border-box;
   justify-content: space-between;
+  align-items: center;
   display: flex;
   gap: 8px;
 }

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

@@ -1,24 +1,27 @@
 import React from 'react';
-import { render, screen, act } from '@testing-library/react';
+import { render as rtlRender, screen, act } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import { CanvasActionMenu, CanvasActionMenuProps } from './CanvasActionMenu';
 import { textMock } from '../../../../../../testing/mocks/i18nMock';
+import { BpmnContextProvider } from '../../../contexts/BpmnContext';
+
+const mockBPMNXML: string = `<?xml version="1.0" encoding="UTF-8"?></xml>`;
+
+const mockAppLibVersion7: string = '7.0.0';
+const mockAppLibVersion8: string = '8.0.0';
 
 const mockOnSave = jest.fn();
-const mockToggleViewModus = jest.fn();
 
 const defaultProps: CanvasActionMenuProps = {
-  isEditorView: false,
   onSave: mockOnSave,
-  toggleViewModus: mockToggleViewModus,
 };
 
 describe('CanvasActionMenu', () => {
   afterEach(jest.clearAllMocks);
 
-  it('hides the save button when the user is not in editor view', async () => {
+  it('hides the save button when the version is too old', async () => {
     const user = userEvent.setup();
-    render(<CanvasActionMenu {...defaultProps} />);
+    render(mockAppLibVersion7);
 
     // Fix to remove act error
     await act(() => user.tab());
@@ -29,29 +32,19 @@ describe('CanvasActionMenu', () => {
 
   it('calls "onSave" when the user is in edit more and clicks save button', async () => {
     const user = userEvent.setup();
-    render(<CanvasActionMenu {...defaultProps} isEditorView />);
+    render();
 
     const editButton = screen.getByRole('button', { name: textMock('process_editor.save') });
     await act(() => user.click(editButton));
 
     expect(mockOnSave).toHaveBeenCalledTimes(1);
   });
-
-  it('calls "toggleViewModus" when the user clicks toggle button', async () => {
-    const user = userEvent.setup();
-    render(<CanvasActionMenu {...defaultProps} />);
-
-    const toggleButtonView = screen.queryByRole('button', {
-      name: textMock('process_editor.view_mode'),
-    });
-    const toggleButtonEdit = screen.getByRole('button', {
-      name: textMock('process_editor.edit_mode'),
-    });
-
-    expect(toggleButtonView).not.toBeInTheDocument();
-    expect(toggleButtonEdit).toBeInTheDocument();
-
-    await act(() => user.click(toggleButtonEdit));
-    expect(mockToggleViewModus).toHaveBeenCalledTimes(1);
-  });
 });
+
+const render = (appLibVersion?: string) => {
+  return rtlRender(
+    <BpmnContextProvider bpmnXml={mockBPMNXML} appLibVersion={appLibVersion || mockAppLibVersion8}>
+      <CanvasActionMenu {...defaultProps} />
+    </BpmnContextProvider>,
+  );
+};

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

@@ -1,49 +1,35 @@
 import React, { ReactNode } from 'react';
 import classes from './CanvasActionMenu.module.css';
 import { useTranslation } from 'react-i18next';
-import { CogIcon, EyeFillIcon } from '@studio/icons';
-import { Button } from '@digdir/design-system-react';
+import { Button, Paragraph } from '@digdir/design-system-react';
 import { useBpmnContext } from '../../../contexts/BpmnContext';
+import { VersionHelpText } from '../VersionHelpText';
 
 export type CanvasActionMenuProps = {
-  isEditorView: boolean;
   onSave: () => void;
-  toggleViewModus: () => void;
 };
 
 /**
  * @component
  *  Displays the action menu in the canvas
  *
- * @property {boolean}[isEditorView] - Flag to decide the button content
  * @property {function}[onSave] - Function to be executed when saving
- * @property {function}[toggleViewModus] - Function that toggles the view mode
  *
  * @returns {ReactNode} - The rendered component
  */
-export const CanvasActionMenu = ({
-  isEditorView,
-  onSave,
-  toggleViewModus,
-}: CanvasActionMenuProps): ReactNode => {
+export const CanvasActionMenu = ({ onSave }: CanvasActionMenuProps): ReactNode => {
   const { t } = useTranslation();
-  const { numberOfUnsavedChanges } = useBpmnContext();
+  const { numberOfUnsavedChanges, isEditAllowed } = useBpmnContext();
 
   return (
     <span className={classes.canvasMenuContainer}>
-      <Button
-        onClick={toggleViewModus}
-        variant='secondary'
-        icon={isEditorView ? <EyeFillIcon /> : <CogIcon />}
-      >
-        {isEditorView ? t('process_editor.view_mode') : t('process_editor.edit_mode')}
-      </Button>
-      {numberOfUnsavedChanges > 0 && (
-        <span className={classes.unsavedChanges}>
+      <div>{!isEditAllowed && <VersionHelpText />}</div>
+      {isEditAllowed && numberOfUnsavedChanges > 0 && (
+        <Paragraph className={classes.unsavedChanges}>
           {t('process_editor.unsaved_changes', { count: numberOfUnsavedChanges })}
-        </span>
+        </Paragraph>
       )}
-      {isEditorView && (
+      {isEditAllowed && (
         <Button onClick={onSave} color='success'>
           {t('process_editor.save')}
         </Button>

frontend/packages/process-editor/src/components/Canvas/VersionHelpText/VersionHelpText.module.css

@@ -0,0 +1,11 @@
+.helpTextWrapper {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: 1rem;
+}
+
+.helpTextContent {
+  white-space: pre-line;
+  word-wrap: break-word;
+}

frontend/packages/process-editor/src/components/ConfigPanel/VersionAlert/VersionAlert.test.tsx → frontend/packages/process-editor/src/components/Canvas/VersionHelpText/VersionHelpText.test.tsx

@@ -2,22 +2,16 @@ import React from 'react';
 import { render as rtlRender, screen } from '@testing-library/react';
 import { textMock } from '../../../../../../testing/mocks/i18nMock';
 import { BpmnContextProvider } from '../../../contexts/BpmnContext';
-import { VersionAlert } from './VersionAlert';
+import { VersionHelpText } from './VersionHelpText';
 
 const mockBPMNXML: string = `<?xml version="1.0" encoding="UTF-8"?></xml>`;
 const mockAppLibVersion7: string = '7.0.3';
 
-describe('VersionAlert', () => {
-  it('should render VersionAlert', () => {
+describe('VersionHelpText', () => {
+  it('should render VersionHelpText', () => {
     render(mockAppLibVersion7);
-    expect(
-      screen.getByRole('heading', { name: textMock('process_editor.too_old_version_title') }),
-    ).toBeInTheDocument();
-    expect(
-      screen.getByText(
-        textMock('process_editor.too_old_version_text', { version: mockAppLibVersion7 }),
-      ),
-    );
+    const tooOldText = screen.getByText(textMock('process_editor.too_old_version_title'));
+    expect(tooOldText).toBeInTheDocument();
   });
 
   const render = (appLibVersion?: string) => {
@@ -26,7 +20,7 @@ describe('VersionAlert', () => {
         bpmnXml={mockBPMNXML}
         appLibVersion={appLibVersion || mockAppLibVersion7}
       >
-        <VersionAlert />
+        <VersionHelpText />
       </BpmnContextProvider>,
     );
   };

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

@@ -0,0 +1,37 @@
+import React from 'react';
+import classes from './VersionHelpText.module.css';
+import { HelpText, Link, Paragraph } from '@digdir/design-system-react';
+import { useTranslation, Trans } from 'react-i18next';
+import { useBpmnContext } from '../../../contexts/BpmnContext';
+
+/**
+ * @component
+ *  Displays the helptext informing the user that their version is too old
+ *
+ * @returns {JSX.Element} - The rendered component
+ */
+export const VersionHelpText = (): JSX.Element => {
+  const { t } = useTranslation();
+  const { appLibVersion } = useBpmnContext();
+
+  return (
+    <div className={classes.helpTextWrapper}>
+      <Paragraph size='medium'>{t('process_editor.too_old_version_title')}</Paragraph>
+      <HelpText
+        size='medium'
+        title={t('process_editor.too_old_version_helptext_title')}
+        placement='bottom'
+      >
+        <Paragraph spacing size='small' className={classes.helpTextContent}>
+          {t('process_editor.too_old_version_helptext_content', { version: appLibVersion })}
+        </Paragraph>
+        <Paragraph size='small' spacing>
+          <Trans i18nKey={t('process_editor.help_text_and_links')}>
+            Trenger du hjelp til å oppgradere, kan du{' '}
+            <Link href='/contact'>ta kontakte med oss</Link>.
+          </Trans>
+        </Paragraph>
+      </HelpText>
+    </div>
+  );
+};

frontend/packages/process-editor/src/components/Canvas/VersionHelpText/index.ts

@@ -0,0 +1 @@
+export { VersionHelpText } from './VersionHelpText';

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

@@ -0,0 +1,13 @@
+.headerWrapper {
+  display: flex;
+  align-items: center;
+  margin-inline: 1rem;
+  margin-top: 1rem;
+  justify-content: space-between;
+}
+
+.headerTextAndIconWrapper {
+  display: flex;
+  align-items: center;
+  gap: 1rem;
+}