+
+
+ {t('api_errors.DM_01')}
+
+ }
+ >
+ {t('general.close')}
+
+ -
+ {schemaGenerationErrorMessages?.map((errorMessage, index) => {
+ return (
+
-
+
+ {isKnownErrorMessage(errorMessage) ? ( + +}} + /> + ) : ( + errorMessage + )} +
+ );
+ })}
+
- {modelPath && }
+ {modelPath && (
+
+ onSetSchemaGenerationErrorMessages(errorMessages)
+ }
+ />
+ )}
- {selectedOption}
+
);
};
From 1307a9b4e3c05db57a47d617569f14dfe7061f7a Mon Sep 17 00:00:00 2001
From: Nina Kylstad
-
- }
- />
- );
- },
-);
+ case 'setup': {
+ return
-
- {displayTabs()}
-
+
+
+
+ {displayTabs()}
+
-
- {t('settings_modal.local_changes_tab_delete_modal_text')}
-
- setNameToDelete(e.target.value)}
- />
-
- }
- />
- );
- },
-);
-
-DeleteModal.displayName = 'DeleteModal';
+ return (
+
-
-
-
-
+
+ {t('settings_modal.local_changes_tab_delete_modal_text')}
+
+ setNameToDelete(e.target.value)}
+ />
+
+
+
+
+
+
-
-);
-
-const MockContent: ReactNode = (
+const mockTitle: ReactNode = (
{mockHeaderText}
-
-
);
-const MockFooter: ReactNode = (
+const mockChildren = (
{mockContentText}
+Title
-
);
-const mockOnClose = jest.fn();
-
-const defaultProps: StudioModalProps = {
- onClose: mockOnClose,
- header: MockHeader,
- content: MockContent,
- open: true,
-};
-
-describe('StudioModal', () => {
+describe('Modal', () => {
afterEach(jest.clearAllMocks);
- it('shows the header and content components correctly, and hides the footer when not present', () => {
- render({mockFooterText}
+Modal test
+ * Some name
+ *
+ * }
+ * >
+ *
+ *
+ *
+ {title}
+
+
+ }
+ onClick={onClose}
+ aria-label={t('modal.close_icon')}
+ />
+
+ {children}
+
+ {text}
+
+
+
+
+
- }
- content={
-
- {text}
-
- }
- />
- );
- },
-);
-
-VerificationModal.displayName = 'VerificationModal';
+
+
-
-
-
-
-
-
-
- {selectedEnv && (
-
-
- {selectedEnv && selectedService && (
-
-
-
-
- )}
-
+
+ {selectedEnv && (
+
+
+ {selectedEnv && selectedService && (
+
+
+
+
+ )}
+
-
+
+ {title}
+
+
+ }
+ >
+
-
-
- {t('merge_conflict.download_edited_files')}
+ return (
+
+ {t('merge_conflict.body1')}
+ {t('merge_conflict.body2')}
+
+ );
+};
diff --git a/frontend/resourceadm/components/MergeConflictModal/RemoveChangesModal/RemoveChangesModal.tsx b/frontend/resourceadm/components/MergeConflictModal/RemoveChangesModal/RemoveChangesModal.tsx
index 126125e7a9c..2a70abcb259 100644
--- a/frontend/resourceadm/components/MergeConflictModal/RemoveChangesModal/RemoveChangesModal.tsx
+++ b/frontend/resourceadm/components/MergeConflictModal/RemoveChangesModal/RemoveChangesModal.tsx
@@ -1,13 +1,28 @@
-import React, { forwardRef, useState } from 'react';
-import { useTranslation } from 'react-i18next';
+import React, { useState } from 'react';
+import { Trans, useTranslation } from 'react-i18next';
import { Button, Textfield, Paragraph } from '@digdir/design-system-react';
import classes from './RemoveChangesModal.module.css';
import { Modal } from 'resourceadm/components/Modal';
import { ScreenReaderSpan } from 'resourceadm/components/ScreenReaderSpan';
type RemoveChangesModalProps = {
+ /**
+ * Boolean for if the modal is open
+ */
+ isOpen: boolean;
+ /**
+ * Function to handle close
+ * @returns void
+ */
onClose: () => void;
+ /**
+ * Function to be executed when the reset repo is clicked
+ * @returns void
+ */
handleClickResetRepo: () => void;
+ /**
+ * The name of the repo
+ */
repo: string;
};
@@ -15,66 +30,78 @@ type RemoveChangesModalProps = {
* @Component
* Content to be displayed inside the modal where the user removes their changes in a merge conflict
*
+ * @property {boolean}[isOpen] - Boolean for if the modal is open
* @property {function}[onClose] - Function to handle close
* @property {function}[handleClickResetRepo] - Function to be executed when the reset repo is clicked
* @property {string}[repo] - The name of the repo
*
- * @returns {JSX.Element} - The rendered component
+ * @returns {React.ReactNode} - The rendered component
*/
-export const RemoveChangesModal = forwardRef(
- ({ onClose, handleClickResetRepo, repo }, ref): JSX.Element => {
- const { t } = useTranslation();
+export const RemoveChangesModal = ({
+ isOpen,
+ onClose,
+ handleClickResetRepo,
+ repo,
+}: RemoveChangesModalProps): React.ReactNode => {
+ const { t } = useTranslation();
- const [deleteRepoName, setDeleteRepoName] = useState('');
+ const [deleteRepoName, setDeleteRepoName] = useState('');
- const handleClose = () => {
- setDeleteRepoName('');
- onClose();
- };
+ /**
+ * Handles the closing of the modal
+ */
+ const handleClose = () => {
+ setDeleteRepoName('');
+ onClose();
+ };
- const handleDelete = () => {
- handleClose();
- handleClickResetRepo();
- };
+ /**
+ * Handles the deletion of the changes
+ */
+ const handleDelete = () => {
+ handleClose();
+ handleClickResetRepo();
+ };
- return (
-
-
- {t('settings_modal.local_changes_tab_delete_modal_text')}
-
-
- );
- },
-);
-
-RemoveChangesModal.displayName = 'RemoveChangesModal';
+ return (
+
+
+
+
+ );
+};
diff --git a/frontend/resourceadm/components/Modal/Modal.tsx b/frontend/resourceadm/components/Modal/Modal.tsx
index 2a1e9f05601..90c91b34d3d 100644
--- a/frontend/resourceadm/components/Modal/Modal.tsx
+++ b/frontend/resourceadm/components/Modal/Modal.tsx
@@ -1,10 +1,11 @@
-import React, { ReactNode, forwardRef } from 'react';
+import React, { ReactNode } from 'react';
import classes from './Modal.module.css';
import cn from 'classnames';
import { Heading } from '@digdir/design-system-react';
import { StudioModal } from '@studio/components';
type ModalProps = {
+ isOpen: boolean;
title: string;
onClose?: () => void;
children: ReactNode;
@@ -16,10 +17,11 @@ type ModalProps = {
* Modal component implementing the react-modal.
*
* @example
- *
+ *
*
*
+ * @property {boolean}[isOpen] - Boolean for if the modal is open
* @property {string}[title] - Title to be displayed in the modal
* @property {function}[onClose] - Function to handle close of the modal
* @property {ReactNode}[children] - React components inside the Modal
@@ -27,23 +29,26 @@ type ModalProps = {
*
* @returns {React.ReactNode} - The rendered component
*/
-export const Modal = forwardRef(
- ({ title, onClose, children, contentClassName }, ref): React.ReactNode => {
- return (
-
-
- {title}
-
-
- }
- content={
+ setResetModalOpen(false)}
+ handleClickResetRepo={handleClickResetRepo}
+ repo={repo}
+ />
+
+
+
+
+ {t('merge_conflict.download_edited_files')}
+
+ removeChangesModalRef.current?.close()}
- handleClickResetRepo={handleClickResetRepo}
- repo={repo}
- />
-
- );
- },
-);
-
-MergeConflictModal.displayName = 'MergeConflictModal';
+
+
+
+ {t('merge_conflict.download_entire_repo')}
-
-
-
-
- {t('merge_conflict.download_entire_repo')}
-
-
- setDeleteRepoName(e.target.value)}
- aria-labelledby='delete-changes'
- />
-
-
-
-
-
-
+ setDeleteRepoName(e.target.value)}
+ aria-labelledby='delete-changes'
+ />
+
+
+
+
+
+ ...
* {children}
}
- />
- );
- },
-);
-
-Modal.displayName = 'Modal';
+export const Modal = ({
+ isOpen,
+ title,
+ onClose,
+ children,
+ contentClassName,
+}: ModalProps): React.ReactNode => {
+ return (
+ {children}
+
-
);
};
diff --git a/frontend/resourceadm/pages/ResourcePage/ResourcePage.tsx b/frontend/resourceadm/pages/ResourcePage/ResourcePage.tsx
index ae24346a025..2ced58b5a69 100644
--- a/frontend/resourceadm/pages/ResourcePage/ResourcePage.tsx
+++ b/frontend/resourceadm/pages/ResourcePage/ResourcePage.tsx
@@ -1,4 +1,4 @@
-import React, { useEffect, useRef, useState } from 'react';
+import React, { useEffect, useState } from 'react';
import { useNavigate, useParams } from 'react-router-dom';
import type { NavigationBarPage } from 'resourceadm/types/global';
import classes from './ResourcePage.module.css';
@@ -53,6 +53,8 @@ export const ResourcePage = (): React.ReactNode => {
// Handle the state of resource and policy errors
const [showResourceErrors, setShowResourceErrors] = useState(false);
const [showPolicyErrors, setShowPolicyErrors] = useState(false);
+ const [resourceErrorModalOpen, setResourceErrorModalOpen] = useState(false);
+ const [policyErrorModalOpen, setPolicyErrorModalOpen] = useState(false);
// Get the metadata for Gitea
const { data: repoStatus, refetch } = useRepoStatusQuery(selectedContext, repo);
@@ -79,10 +81,6 @@ export const ResourcePage = (): React.ReactNode => {
// Mutation function for editing a resource
const { mutate: editResource } = useEditResourceMutation(selectedContext, repo, resourceId);
- const resourceErrorModalRef = useRef
-
-
- {label}
);
diff --git a/frontend/packages/ux-editor/src/containers/DesignView/DesignView.module.css b/frontend/packages/ux-editor/src/containers/DesignView/DesignView.module.css
index 1a94552a923..83a0b8a5d24 100644
--- a/frontend/packages/ux-editor/src/containers/DesignView/DesignView.module.css
+++ b/frontend/packages/ux-editor/src/containers/DesignView/DesignView.module.css
@@ -25,7 +25,6 @@
}
.wrapper {
- display: flex;
align-items: flex-start;
justify-content: space-between;
overflow-wrap: anywhere;
diff --git a/frontend/packages/ux-editor/src/containers/DesignView/FormTree/FormItem/FormItemTitle/FormItemTitle.module.css b/frontend/packages/ux-editor/src/containers/DesignView/FormTree/FormItem/FormItemTitle/FormItemTitle.module.css
index 7e3ced478ea..e0083ff0da6 100644
--- a/frontend/packages/ux-editor/src/containers/DesignView/FormTree/FormItem/FormItemTitle/FormItemTitle.module.css
+++ b/frontend/packages/ux-editor/src/containers/DesignView/FormTree/FormItem/FormItemTitle/FormItemTitle.module.css
@@ -4,6 +4,7 @@
.label {
flex: 1;
+ min-width: 0;
}
.root:hover .label {
From 4b59daf5ad371365b3813f863f7510a100207235 Mon Sep 17 00:00:00 2001
From: Nina Kylstad
@@ -54,22 +50,18 @@ export const EnumField = ({
disabled={readOnly}
value={inputValue}
onChange={handleChange}
- onBlur={onBlur}
onKeyDown={onKeyDown}
error={!isValid}
/>
- {onDelete && (
- }
- id={`${baseId}-delete-${value}`}
- onClick={() => onDelete?.(path, value)}
- color='danger'
- variant='tertiary'
- />
- )}
+ }
+ onClick={() => onDelete()}
+ color='danger'
+ variant='tertiary'
+ />
);
};
diff --git a/frontend/packages/schema-editor/src/components/SchemaInspector/ItemRestrictions/EnumList/EnumField/index.ts b/frontend/packages/schema-editor/src/components/SchemaInspector/ItemRestrictions/EnumList/EnumField/index.ts
new file mode 100644
index 00000000000..c3a8d3442df
--- /dev/null
+++ b/frontend/packages/schema-editor/src/components/SchemaInspector/ItemRestrictions/EnumList/EnumField/index.ts
@@ -0,0 +1 @@
+export { EnumField } from './EnumField';
diff --git a/frontend/packages/schema-editor/src/components/SchemaInspector/ItemRestrictions/EnumList/EnumList.module.css b/frontend/packages/schema-editor/src/components/SchemaInspector/ItemRestrictions/EnumList/EnumList.module.css
new file mode 100644
index 00000000000..e69de29bb2d
diff --git a/frontend/packages/schema-editor/src/components/SchemaInspector/ItemRestrictions/EnumList/EnumList.test.tsx b/frontend/packages/schema-editor/src/components/SchemaInspector/ItemRestrictions/EnumList/EnumList.test.tsx
new file mode 100644
index 00000000000..d356dce38bf
--- /dev/null
+++ b/frontend/packages/schema-editor/src/components/SchemaInspector/ItemRestrictions/EnumList/EnumList.test.tsx
@@ -0,0 +1,150 @@
+import React from 'react';
+import { screen, act } from '@testing-library/react';
+import { EnumList, EnumListProps } from './EnumList';
+import { fieldNode1Mock, uiSchemaNodesMock } from '../../../../../test/mocks/uiSchemaMock';
+import userEvent from '@testing-library/user-event';
+import { renderWithProviders } from '../../../../../test/renderWithProviders';
+import { FieldNode, SchemaModel } from '../../../../../../schema-model';
+import { textMock } from '../../../../../../../testing/mocks/i18nMock';
+
+const mockEnums: string[] = ['a', 'b', 'c'];
+
+const defaultProps: EnumListProps = {
+ schemaNode: fieldNode1Mock,
+};
+const mockSaveDataModel = jest.fn();
+
+describe('EnumList', () => {
+ beforeEach(jest.clearAllMocks);
+
+ it('renders the description about enum being empty when there is no enums on the field node', () => {
+ renderEnumList();
+
+ expect(screen.getByText(textMock('schema_editor.enum_empty'))).toBeInTheDocument();
+ });
+
+ it('renders EnumList component with existing enum values', () => {
+ renderEnumList({ schemaNode: { ...fieldNode1Mock, enum: mockEnums } });
+
+ expect(screen.queryByText(textMock('schema_editor.enum_empty'))).not.toBeInTheDocument();
+
+ const enumLabelA = screen.getByRole('textbox', {
+ name: textMock('schema_editor.enum_value', { index: 0 }),
+ });
+ expect(enumLabelA).toBeInTheDocument();
+ const enumLabelB = screen.getByRole('textbox', {
+ name: textMock('schema_editor.enum_value', { index: 1 }),
+ });
+ expect(enumLabelB).toBeInTheDocument();
+ const enumLabelC = screen.getByRole('textbox', {
+ name: textMock('schema_editor.enum_value', { index: 2 }),
+ });
+ expect(enumLabelC).toBeInTheDocument();
+ });
+
+ it('handles adding a new enum value', async () => {
+ const user = userEvent.setup();
+ renderEnumList();
+
+ const addEnumButton = screen.getByRole('button', { name: textMock('schema_editor.add_enum') });
+ await act(() => user.click(addEnumButton));
+
+ const enumLabel = screen.getByRole('textbox', {
+ name: textMock('schema_editor.enum_value', { index: 0 }),
+ });
+ expect(enumLabel).toBeInTheDocument();
+ expect(mockSaveDataModel).not.toHaveBeenCalled();
+ });
+
+ it('handles deleting an enum value correctly', async () => {
+ const user = userEvent.setup();
+ const schemaModel = SchemaModel.fromArray(uiSchemaNodesMock).deepClone();
+ renderEnumList({ schemaNode: { ...fieldNode1Mock, enum: mockEnums } }, schemaModel);
+
+ const allDeleteButtons = screen.getAllByRole('button', {
+ name: textMock('schema_editor.delete_field'),
+ });
+ expect(allDeleteButtons).toHaveLength(3);
+
+ const [, deleteEnumButtonB] = screen.getAllByRole('button', {
+ name: textMock('schema_editor.delete_field'),
+ });
+ await act(() => user.click(deleteEnumButtonB));
+
+ const allDeleteButtonsAfter = screen.getAllByRole('button', {
+ name: textMock('schema_editor.delete_field'),
+ });
+ expect(allDeleteButtonsAfter).toHaveLength(2);
+ });
+
+ it('displays error message when having duplicates, and removes error message when error is fixed and saves the schema model', async () => {
+ const user = userEvent.setup();
+ const schemaModel = SchemaModel.fromArray(uiSchemaNodesMock).deepClone();
+ const mockSchemaNode = { schemaNode: { ...fieldNode1Mock, enum: mockEnums } };
+ renderEnumList(mockSchemaNode, schemaModel);
+
+ const addEnumButton = screen.getByRole('button', { name: textMock('schema_editor.add_enum') });
+ await act(() => user.click(addEnumButton));
+ expect(mockSaveDataModel).not.toHaveBeenCalled();
+
+ const newEnumInput = screen.getByRole('textbox', {
+ name: textMock('schema_editor.enum_value', { index: 3 }),
+ });
+
+ await act(() => user.type(newEnumInput, 'a'));
+
+ const errorMessage = screen.getByText(textMock('schema_editor.enum_error_duplicate'));
+ expect(errorMessage).toBeInTheDocument();
+ expect(mockSaveDataModel).not.toHaveBeenCalled();
+
+ await act(() => user.type(newEnumInput, 'a'));
+
+ const errorMessageAfter = screen.queryByText(textMock('schema_editor.enum_error_duplicate'));
+ expect(errorMessageAfter).not.toBeInTheDocument();
+
+ expect(mockSaveDataModel).toHaveBeenCalledTimes(1);
+ expect(mockSaveDataModel).toHaveBeenCalledWith(schemaModel);
+
+ const updatedNode: FieldNode = schemaModel.getNode(fieldNode1Mock.pointer) as FieldNode;
+ const updatedEnum: string[] = updatedNode.enum;
+
+ const expectedEnum: string[] = ['a', 'b', 'c', 'aa'];
+ expect(updatedEnum).toEqual(expectedEnum);
+ });
+
+ it('updates an enum correctly when values are changed', async () => {
+ const user = userEvent.setup();
+ const schemaModel = SchemaModel.fromArray(uiSchemaNodesMock).deepClone();
+ const mockSchemaNode = { schemaNode: { ...fieldNode1Mock, enum: mockEnums } };
+ renderEnumList(mockSchemaNode, schemaModel);
+
+ const enumFieldB = screen.getByRole('textbox', {
+ name: textMock('schema_editor.enum_value', { index: 1 }),
+ });
+ expect(enumFieldB).toHaveValue('b');
+
+ await act(() => user.type(enumFieldB, 'x'));
+
+ expect(mockSaveDataModel).toHaveBeenCalledTimes(1);
+ expect(mockSaveDataModel).toHaveBeenCalledWith(schemaModel);
+
+ const updatedNode: FieldNode = schemaModel.getNode(fieldNode1Mock.pointer) as FieldNode;
+ const updatedEnum: string[] = updatedNode.enum;
+
+ const expectedEnum: string[] = ['a', 'bx', 'c'];
+ expect(updatedEnum).toEqual(expectedEnum);
+
+ const enumFieldBAfter = screen.getByRole('textbox', {
+ name: textMock('schema_editor.enum_value', { index: 1 }),
+ });
+ expect(enumFieldBAfter).toHaveValue('bx');
+ });
+});
+
+const renderEnumList = (props?: Partial
-
-
- {errorMessage}
-
-
-
+ onChange={handleOnChange}
+ onKeyDown={handleKeyPress}
+ value={newName}
+ error={errorMessage !== null}
+ />
+
-
-
-
-
+
+
+
+
+
+
);
};
diff --git a/frontend/packages/ux-editor/src/containers/DesignView/PageAccordion/NavigationMenu/NavigationMenu.test.tsx b/frontend/packages/ux-editor/src/containers/DesignView/PageAccordion/NavigationMenu/NavigationMenu.test.tsx
index 9dde9eb8486..81b7aa385a2 100644
--- a/frontend/packages/ux-editor/src/containers/DesignView/PageAccordion/NavigationMenu/NavigationMenu.test.tsx
+++ b/frontend/packages/ux-editor/src/containers/DesignView/PageAccordion/NavigationMenu/NavigationMenu.test.tsx
@@ -9,14 +9,12 @@ import {
renderWithMockStore,
} from '../../../../testing/mocks';
import { formDesignerMock } from '../../../../testing/stateMocks';
-import { layout2NameMock } from '../../../../testing/layoutMock';
import { useFormLayoutSettingsQuery } from '../../../../hooks/queries/useFormLayoutSettingsQuery';
const mockOrg = 'org';
const mockApp = 'app';
const mockPageName1: string = formDesignerMock.layout.selectedLayout;
const mockSelectedLayoutSet = 'test-layout-set';
-const mockPageName2 = layout2NameMock;
const mockSetSearchParams = jest.fn();
const mockSearchParams = { layout: mockPageName1 };
@@ -49,34 +47,10 @@ describe('NavigationMenu', () => {
const menuButton = screen.getByRole('button', { name: textMock('general.options') });
await act(() => user.click(menuButton));
- const elementInMenuAfter = screen.getByText(textMock('ux_editor.page_menu_up'));
- expect(elementInMenuAfter).toBeInTheDocument();
- });
-
- it('should update the url to new page when deleting selected page', async () => {
- const user = userEvent.setup();
- await render();
-
- const menuButton = screen.getByRole('button', { name: textMock('general.options') });
- await act(() => user.click(menuButton));
-
- const deleteButton = screen.getByText(textMock('ux_editor.page_menu_delete'));
- await act(() => user.click(deleteButton));
-
- const confirmButton = screen.getByRole('button', {
- name: textMock('ux_editor.page_delete_confirm'),
+ const elementInMenuAfter = screen.getByRole('menuitem', {
+ name: textMock('ux_editor.page_menu_up'),
});
- await act(() => user.click(confirmButton));
-
- expect(queriesMock.deleteFormLayout).toBeCalledWith(
- mockOrg,
- mockApp,
- mockPageName1,
- mockSelectedLayoutSet,
- );
- await waitFor(() => expect(screen.queryByRole('dialog')).not.toBeInTheDocument());
-
- expect(mockSetSearchParams).toHaveBeenCalledWith({ layout: mockPageName2 });
+ expect(elementInMenuAfter).toBeInTheDocument();
});
it('Calls updateFormLayoutName with new name when name is changed by the user', async () => {
@@ -84,7 +58,9 @@ describe('NavigationMenu', () => {
await render();
await act(() => user.click(screen.getByTitle(textMock('general.options'))));
- await act(() => user.click(screen.getByText(textMock('ux_editor.page_menu_edit'))));
+ await act(() =>
+ user.click(screen.getByRole('menuitem', { name: textMock('ux_editor.page_menu_edit') })),
+ );
const inputField = screen.getByLabelText(textMock('ux_editor.input_popover_label'));
expect(inputField).toHaveValue(mockPageName1);
@@ -114,8 +90,10 @@ describe('NavigationMenu', () => {
await act(() => user.click(screen.getByTitle(textMock('general.options'))));
- const upButton = screen.queryByText(textMock('ux_editor.page_menu_up'));
- const downButton = screen.queryByText(textMock('ux_editor.page_menu_down'));
+ const upButton = screen.queryByRole('menuitem', { name: textMock('ux_editor.page_menu_up') });
+ const downButton = screen.queryByRole('menuitem', {
+ name: textMock('ux_editor.page_menu_down'),
+ });
expect(upButton).not.toBeInTheDocument();
expect(downButton).not.toBeInTheDocument();
@@ -127,8 +105,10 @@ describe('NavigationMenu', () => {
await act(() => user.click(screen.getByTitle(textMock('general.options'))));
- const upButton = screen.getByText(textMock('ux_editor.page_menu_up'));
- const downButton = screen.getByText(textMock('ux_editor.page_menu_down'));
+ const upButton = screen.getByRole('menuitem', { name: textMock('ux_editor.page_menu_up') });
+ const downButton = screen.getByRole('menuitem', {
+ name: textMock('ux_editor.page_menu_down'),
+ });
expect(upButton).toBeInTheDocument();
expect(downButton).toBeInTheDocument();
diff --git a/frontend/packages/ux-editor/src/containers/DesignView/PageAccordion/NavigationMenu/NavigationMenu.tsx b/frontend/packages/ux-editor/src/containers/DesignView/PageAccordion/NavigationMenu/NavigationMenu.tsx
index 704cb4174a9..fc771dec222 100644
--- a/frontend/packages/ux-editor/src/containers/DesignView/PageAccordion/NavigationMenu/NavigationMenu.tsx
+++ b/frontend/packages/ux-editor/src/containers/DesignView/PageAccordion/NavigationMenu/NavigationMenu.tsx
@@ -1,33 +1,19 @@
-import React, { ReactNode, MouseEvent, SyntheticEvent, useState } from 'react';
+import React, { useState, useRef } from 'react';
import { useTranslation } from 'react-i18next';
-import { Button } from '@digdir/design-system-react';
-import {
- MenuElipsisVerticalIcon,
- ArrowUpIcon,
- ArrowDownIcon,
- PencilIcon,
- TrashIcon,
-} from '@navikt/aksel-icons';
-import { AltinnMenu, AltinnMenuItem } from 'app-shared/components';
+import { Button, DropdownMenu } from '@digdir/design-system-react';
+import { MenuElipsisVerticalIcon, ArrowUpIcon, ArrowDownIcon } from '@navikt/aksel-icons';
import { useFormLayoutSettingsQuery } from '../../../../hooks/queries/useFormLayoutSettingsQuery';
import { useUpdateLayoutOrderMutation } from '../../../../hooks/mutations/useUpdateLayoutOrderMutation';
import { useUpdateLayoutNameMutation } from '../../../../hooks/mutations/useUpdateLayoutNameMutation';
import { useStudioUrlParams } from 'app-shared/hooks/useStudioUrlParams';
import { useSelector } from 'react-redux';
-import { useDeleteLayoutMutation } from '../../../../hooks/mutations/useDeleteLayoutMutation';
import type { IAppState } from '../../../../types/global';
-import { Divider } from 'app-shared/primitives';
-import { AltinnConfirmDialog } from 'app-shared/components';
import { useSearchParams } from 'react-router-dom';
-import { firstAvailableLayout } from '../../../../utils/formLayoutsUtils';
import { InputPopover } from './InputPopover';
import { deepCopy } from 'app-shared/pure';
import { useAppContext } from '../../../../hooks/useAppContext';
export type NavigationMenuProps = {
- /**
- * The name of the page
- */
pageName: string;
pageIsReceipt: boolean;
};
@@ -37,10 +23,11 @@ export type NavigationMenuProps = {
* Displays the buttons to move a page accoridon up or down, edit the name and delete the page
*
* @property {string}[pageName] - The name of the page
+ * @property {boolean}[pageIsReceipt] - If the page is a receipt page
*
- * @returns {ReactNode} - The rendered component
+ * @returns {JSX.Element} - The rendered component
*/
-export const NavigationMenu = ({ pageName, pageIsReceipt }: NavigationMenuProps): ReactNode => {
+export const NavigationMenu = ({ pageName, pageIsReceipt }: NavigationMenuProps): JSX.Element => {
const { t } = useTranslation();
const { org, app } = useStudioUrlParams();
@@ -58,41 +45,18 @@ export const NavigationMenu = ({ pageName, pageIsReceipt }: NavigationMenuProps)
const disableDown = layoutOrder.indexOf(pageName) === layoutOrder.length - 1;
const { mutate: updateLayoutOrder } = useUpdateLayoutOrderMutation(org, app, selectedLayoutSet);
- const { mutate: deleteLayout } = useDeleteLayoutMutation(org, app, selectedLayoutSet);
const { mutate: updateLayoutName } = useUpdateLayoutNameMutation(org, app, selectedLayoutSet);
- const [menuAnchorEl, setMenuAnchorEl] = useState
}
- onClick={onPageSettingsClick}
+ onClick={() => setDropdownOpen((v) => !v)}
+ aria-haspopup='menu'
+ aria-expanded={dropdownOpen}
variant='tertiary'
title={t('general.options')}
size='small'
+ ref={settingsRef}
/>
-
- {!pageIsReceipt && (
- !(disableUp || invalid) && onMenuItemClick(event, 'up')}
- disabled={disableUp || invalid}
- text={t('ux_editor.page_menu_up')}
- icon={ArrowUpIcon}
- id='move-page-up-button'
- testId='move-page-up-button-test-id'
- />
- )}
- {!pageIsReceipt && (
- !(disableDown || invalid) && onMenuItemClick(event, 'down')}
- disabled={disableDown || invalid}
- text={t('ux_editor.page_menu_down')}
- icon={ArrowDownIcon}
- id='move-page-down-button'
- testId='move-page-down-button-test-id'
+ setDropdownOpen(false)}
+ size='small'
+ >
+
+ {!pageIsReceipt && (
+ <>
+ !(disableUp || invalid) && moveLayout('up')}
+ disabled={disableUp || invalid}
+ id='move-page-up-button'
+ >
+
+ !(disableDown || invalid) && moveLayout('down')}
+ disabled={disableDown || invalid}
+ id='move-page-down-button'
+ >
+
+
+ )}
+ setDropdownOpen(false)}
/>
- )}
- {
- setIsEditDialogOpen(false);
- setMenuAnchorEl(null);
- }}
- open={isEditDialogOpen}
- trigger={
- onMenuItemClick(event, 'edit')}
- text={t('ux_editor.page_menu_edit')}
- icon={PencilIcon}
- id='edit-page-button'
- disabled={invalid}
- />
- }
- />
- {
- handleConfirmDelete();
- setMenuAnchorEl(null);
- }}
- onClose={() => {
- setIsConfirmDeleteDialogOpen(false);
- setMenuAnchorEl(null);
- }}
- trigger={
- onMenuItemClick(event, 'delete')}
- text={t('ux_editor.page_menu_delete')}
- icon={TrashIcon}
- id='delete-page-button'
- />
- }
- >
-
-
+
+
);
};
diff --git a/frontend/packages/ux-editor/src/containers/DesignView/PageAccordion/PageAccordion.test.tsx b/frontend/packages/ux-editor/src/containers/DesignView/PageAccordion/PageAccordion.test.tsx
index 950c03450a4..059991cd5aa 100644
--- a/frontend/packages/ux-editor/src/containers/DesignView/PageAccordion/PageAccordion.test.tsx
+++ b/frontend/packages/ux-editor/src/containers/DesignView/PageAccordion/PageAccordion.test.tsx
@@ -6,14 +6,16 @@ import { textMock } from '../../../../../../testing/mocks/i18nMock';
import { formDesignerMock } from '../../../testing/stateMocks';
import { useFormLayoutSettingsQuery } from '../../../hooks/queries/useFormLayoutSettingsQuery';
import { renderHookWithMockStore, renderWithMockStore } from '../../../testing/mocks';
+import { layout2NameMock } from '../../../testing/layoutMock';
const mockOrg = 'org';
const mockApp = 'app';
-const mockPageName: string = formDesignerMock.layout.selectedLayout;
+const mockPageName1: string = formDesignerMock.layout.selectedLayout;
const mockSelectedLayoutSet = 'test-layout-set';
+const mockPageName2 = layout2NameMock;
const mockSetSearchParams = jest.fn();
-const mockSearchParams = { layout: mockPageName };
+const mockSearchParams = { layout: mockPageName1 };
jest.mock('react-router-dom', () => ({
...jest.requireActual('react-router-dom'),
useParams: () => ({
@@ -25,6 +27,11 @@ jest.mock('react-router-dom', () => ({
},
}));
+const mockDeleteFormLayout = jest.fn();
+jest.mock('./useDeleteLayout', () => ({
+ useDeleteLayout: () => mockDeleteFormLayout,
+}));
+
const mockChildren: ReactNode = (
{t('ux_editor.page_delete_text')}
-{t('ux_editor.page_delete_information')}
-
@@ -33,7 +40,7 @@ const mockChildren: ReactNode = (
const mockOnClick = jest.fn();
const defaultProps: PageAccordionProps = {
- pageName: mockPageName,
+ pageName: mockPageName1,
children: mockChildren,
isOpen: false,
onClick: mockOnClick,
@@ -46,7 +53,7 @@ describe('PageAccordion', () => {
const user = userEvent.setup();
await render();
- const accordionButton = screen.getByRole('button', { name: mockPageName });
+ const accordionButton = screen.getByRole('button', { name: mockPageName1 });
await act(() => user.click(accordionButton));
expect(mockOnClick).toHaveBeenCalledTimes(1);
@@ -65,6 +72,23 @@ describe('PageAccordion', () => {
const elementInMenuAfter = screen.getByText(textMock('ux_editor.page_menu_up'));
expect(elementInMenuAfter).toBeInTheDocument();
});
+
+ it('Calls deleteLayout with pageName when delete button is clicked and deletion is confirmed, and updates the url correctly', async () => {
+ jest.spyOn(window, 'confirm').mockImplementation(jest.fn(() => true));
+ await render();
+
+ await screen.getByRole('button', { name: textMock('general.delete') }).click();
+ expect(mockDeleteFormLayout).toHaveBeenCalledTimes(1);
+ expect(mockDeleteFormLayout).toHaveBeenCalledWith(mockPageName1);
+ expect(mockSetSearchParams).toHaveBeenCalledWith({ layout: mockPageName2 });
+ });
+
+ it('Does not call deleteLayout when delete button is clicked, but deletion is not confirmed', async () => {
+ jest.spyOn(window, 'confirm').mockImplementation(jest.fn(() => false));
+ await render();
+ await screen.getByRole('button', { name: textMock('general.delete') }).click();
+ expect(mockDeleteFormLayout).not.toHaveBeenCalled();
+ });
});
const waitForData = async () => {
diff --git a/frontend/packages/ux-editor/src/containers/DesignView/PageAccordion/PageAccordion.tsx b/frontend/packages/ux-editor/src/containers/DesignView/PageAccordion/PageAccordion.tsx
index 18ea10f42f0..859ab542ec0 100644
--- a/frontend/packages/ux-editor/src/containers/DesignView/PageAccordion/PageAccordion.tsx
+++ b/frontend/packages/ux-editor/src/containers/DesignView/PageAccordion/PageAccordion.tsx
@@ -1,9 +1,17 @@
-import React, { ReactNode } from 'react';
+import React, { ReactNode, useCallback } from 'react';
import classes from './PageAccordion.module.css';
import cn from 'classnames';
-import { Accordion } from '@digdir/design-system-react';
+import { Accordion, Button } from '@digdir/design-system-react';
import { NavigationMenu } from './NavigationMenu';
import * as testids from '../../../../../../testing/testids';
+import { TrashIcon } from '@studio/icons';
+import { useTranslation } from 'react-i18next';
+import { useSearchParams } from 'react-router-dom';
+import { useStudioUrlParams } from 'app-shared/hooks/useStudioUrlParams';
+import { useAppContext } from '../../../hooks/useAppContext';
+import { firstAvailableLayout } from '../../../utils/formLayoutsUtils';
+import { useFormLayoutSettingsQuery } from '../../../hooks/queries/useFormLayoutSettingsQuery';
+import { useDeleteLayout } from './useDeleteLayout';
export type PageAccordionProps = {
pageName: string;
@@ -33,6 +41,28 @@ export const PageAccordion = ({
onClick,
pageIsReceipt,
}: PageAccordionProps): ReactNode => {
+ const { t } = useTranslation();
+ const { org, app } = useStudioUrlParams();
+ const { selectedLayoutSet } = useAppContext();
+ const [searchParams, setSearchParams] = useSearchParams();
+ const selectedLayout = searchParams.get('layout');
+
+ const { data: formLayoutSettings } = useFormLayoutSettingsQuery(org, app, selectedLayoutSet);
+ const layoutOrder = formLayoutSettings?.pages.order;
+
+ const deleteLayout = useDeleteLayout();
+
+ const handleConfirmDelete = useCallback(() => {
+ if (confirm(t('ux_editor.page_delete_text'))) {
+ deleteLayout(pageName);
+
+ if (selectedLayout === pageName) {
+ const layoutToSelect = firstAvailableLayout(pageName, layoutOrder);
+ setSearchParams({ layout: layoutToSelect });
+ }
+ }
+ }, [deleteLayout, layoutOrder, pageName, selectedLayout, setSearchParams, t]);
+
return (
-
+
+
+
+ {t('contact.github_issue.heading')}
+
+ {t('contact.github_issue.content')}
+
+
+
+
+
+
+ {t('session.inactive')}
-
);
diff --git a/frontend/app-development/layout/AppShell.test.tsx b/frontend/app-development/layout/PageLayout.test.tsx
similarity index 96%
rename from frontend/app-development/layout/AppShell.test.tsx
rename to frontend/app-development/layout/PageLayout.test.tsx
index c4248403305..3be31feab19 100644
--- a/frontend/app-development/layout/AppShell.test.tsx
+++ b/frontend/app-development/layout/PageLayout.test.tsx
@@ -1,5 +1,5 @@
import React from 'react';
-import { AppShell } from './AppShell';
+import { PageLayout } from './PageLayout';
import { screen, waitForElementToBeRemoved } from '@testing-library/react';
import { APP_DEVELOPMENT_BASENAME } from 'app-shared/constants';
import { renderWithProviders } from '../test/testUtils';
@@ -43,7 +43,7 @@ jest.mock('react-router-dom', () => ({
// Mocking console.error due to Tanstack Query removing custom logger between V4 and v5 see issue: #11692
const realConsole = console;
-describe('App', () => {
+describe('PageLayout', () => {
beforeEach(() => {
global.console = {
...console,
@@ -112,7 +112,7 @@ const render = async (queries: Partial
-
-
-
- );
-};
+export const PageRoutes = () =>
{isEditAllowed && (
diff --git a/frontend/packages/process-editor/src/contexts/BpmnContext.tsx b/frontend/packages/process-editor/src/contexts/BpmnContext.tsx
index c3aba92f0c2..f2354532923 100644
--- a/frontend/packages/process-editor/src/contexts/BpmnContext.tsx
+++ b/frontend/packages/process-editor/src/contexts/BpmnContext.tsx
@@ -23,7 +23,7 @@ export const BpmnContext = createContext({
appLibVersion: '',
});
-type BpmnContextProviderProps = {
+export type BpmnContextProviderProps = {
children: React.ReactNode;
bpmnXml: string | undefined | null;
appLibVersion: string;
diff --git a/frontend/packages/shared/package.json b/frontend/packages/shared/package.json
index 4d9d1865623..74c44dd4fe5 100644
--- a/frontend/packages/shared/package.json
+++ b/frontend/packages/shared/package.json
@@ -14,7 +14,7 @@
"react-dnd-html5-backend": "16.0.1",
"react-dom": "18.2.0",
"react-redux": "8.1.3",
- "react-router-dom": "6.18.0",
+ "react-router-dom": "6.20.0",
"react-select": "5.7.7",
"redux-saga": "1.2.3"
},
diff --git a/frontend/packages/shared/src/hooks/useConfirmationDialogOnPageLeave.test.tsx b/frontend/packages/shared/src/hooks/useConfirmationDialogOnPageLeave.test.tsx
new file mode 100644
index 00000000000..5d4b2fa2c24
--- /dev/null
+++ b/frontend/packages/shared/src/hooks/useConfirmationDialogOnPageLeave.test.tsx
@@ -0,0 +1,142 @@
+import React from 'react';
+import { act, render as rtlRender } from '@testing-library/react';
+import { useConfirmationDialogOnPageLeave } from './useConfirmationDialogOnPageLeave';
+import { RouterProvider, createMemoryRouter, useBeforeUnload } from 'react-router-dom';
+
+jest.mock('react-router-dom', () => ({
+ ...jest.requireActual('react-router-dom'),
+ useBeforeUnload: jest.fn(),
+}));
+
+const confirmationMessage = 'test';
+
+const Component = ({ showConfirmationDialog }: { showConfirmationDialog: boolean }) => {
+ useConfirmationDialogOnPageLeave(showConfirmationDialog, confirmationMessage);
+ return null;
+};
+
+const render = (showConfirmationDialog: boolean) => {
+ const router = createMemoryRouter([
+ {
+ path: '/',
+ element: ).mock
+ .calls[0][0];
+ callbackFn(event);
+
+ expect(event.preventDefault).toHaveBeenCalled();
+ expect(event.returnValue).toBe(confirmationMessage);
+ });
+
+ it('should not prevent navigation if showConfirmationDialog is false', () => {
+ const event = {
+ type: 'beforeunload',
+ returnValue: '',
+ } as BeforeUnloadEvent;
+ event.preventDefault = jest.fn();
+
+ const showConfirmationDialog = false;
+ render(showConfirmationDialog);
+
+ const callbackFn = (useBeforeUnload as jest.MockedFunction).mock
+ .calls[0][0];
+ callbackFn(event);
+
+ expect(event.preventDefault).not.toHaveBeenCalled();
+ expect(event.returnValue).toBe('');
+ });
+
+ it('doesnt show confirmation dialog when there are no unsaved changes', async () => {
+ window.confirm = jest.fn();
+
+ const showConfirmationDialog = false;
+ const { router } = render(showConfirmationDialog);
+
+ await act(async () => {
+ await router.navigate('/test');
+ });
+
+ expect(window.confirm).toHaveBeenCalledTimes(0);
+ expect(router.state.location.pathname).toBe('/test');
+ });
+
+ it('show confirmation dialog when there are unsaved changes', async () => {
+ window.confirm = jest.fn();
+
+ const showConfirmationDialog = true;
+ const { router } = render(showConfirmationDialog);
+
+ await act(async () => {
+ await router.navigate('/test');
+ });
+
+ expect(window.confirm).toHaveBeenCalledTimes(1);
+ expect(router.state.location.pathname).toBe('/');
+ });
+
+ it('cancel redirection when clicking cancel', async () => {
+ window.confirm = jest.fn(() => false);
+
+ const showConfirmationDialog = true;
+ const { router } = render(showConfirmationDialog);
+
+ await act(async () => {
+ await router.navigate('/test');
+ });
+
+ expect(window.confirm).toHaveBeenCalledTimes(1);
+ expect(router.state.location.pathname).toBe('/');
+ });
+
+ it('redirect when clicking OK', async () => {
+ window.confirm = jest.fn(() => true);
+
+ const showConfirmationDialog = true;
+ const { router } = render(showConfirmationDialog);
+
+ await act(async () => {
+ await router.navigate('/test');
+ });
+
+ expect(window.confirm).toHaveBeenCalledTimes(1);
+ expect(router.state.location.pathname).toBe('/test');
+ });
+});
diff --git a/frontend/packages/shared/src/hooks/useConfirmationDialogOnPageLeave.ts b/frontend/packages/shared/src/hooks/useConfirmationDialogOnPageLeave.ts
new file mode 100644
index 00000000000..24b7a993d0c
--- /dev/null
+++ b/frontend/packages/shared/src/hooks/useConfirmationDialogOnPageLeave.ts
@@ -0,0 +1,34 @@
+import { useCallback, useEffect } from 'react';
+import { useBeforeUnload, useBlocker } from 'react-router-dom';
+
+export const useConfirmationDialogOnPageLeave = (
+ showConfirmationDialog: boolean,
+ confirmationMessage: string,
+) => {
+ useBeforeUnload(
+ useCallback(
+ (event: BeforeUnloadEvent) => {
+ if (showConfirmationDialog) {
+ event.preventDefault();
+ event.returnValue = confirmationMessage;
+ }
+ },
+ [showConfirmationDialog, confirmationMessage],
+ ),
+ { capture: true },
+ );
+
+ const blocker = useBlocker(({ currentLocation, nextLocation }) => {
+ return showConfirmationDialog && currentLocation.pathname !== nextLocation.pathname;
+ });
+
+ useEffect(() => {
+ if (blocker.state === 'blocked') {
+ if (window.confirm(confirmationMessage)) {
+ blocker.proceed();
+ } else {
+ blocker.reset();
+ }
+ }
+ }, [blocker, confirmationMessage]);
+};
diff --git a/frontend/resourceadm/package.json b/frontend/resourceadm/package.json
index 71c832237b1..b0b621c8835 100644
--- a/frontend/resourceadm/package.json
+++ b/frontend/resourceadm/package.json
@@ -12,7 +12,7 @@
"@mui/x-data-grid": "5.17.26",
"react": "18.2.0",
"react-dom": "18.2.0",
- "react-router-dom": "6.18.0",
+ "react-router-dom": "6.20.0",
"react-use": "17.4.0"
},
"devDependencies": {
diff --git a/package.json b/package.json
index a11ab547b23..d5330568b3a 100644
--- a/package.json
+++ b/package.json
@@ -13,10 +13,10 @@
"@tanstack/react-query-devtools": "5.8.1",
"ajv": "8.12.0",
"ajv-formats": "2.1.1",
- "react-error-boundary": "^4.0.11",
+ "react-error-boundary": "4.0.11",
"react-i18next": "13.3.1",
- "react-router-dom": "6.18.0",
- "react-toastify": "^9.1.3"
+ "react-router-dom": "6.20.0",
+ "react-toastify": "9.1.3"
},
"devDependencies": {
"@emotion/react": "11.11.1",
@@ -60,7 +60,7 @@
"lint-staged": "15.1.0",
"mini-css-extract-plugin": "2.7.6",
"msw": "1.3.2",
- "prettier": "^3.0.3",
+ "prettier": "3.0.3",
"react": "18.2.0",
"react-dom": "18.2.0",
"redux-mock-store": "1.5.4",
diff --git a/yarn.lock b/yarn.lock
index 3018d53ebd5..77f40340a4d 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -3763,10 +3763,10 @@ __metadata:
languageName: node
linkType: hard
-"@remix-run/router@npm:1.11.0":
- version: 1.11.0
- resolution: "@remix-run/router@npm:1.11.0"
- checksum: 629ec578b9dfd3c5cb5de64a0798dd7846ec5ba0351aa66f42b1c65efb43da8f30366be59b825303648965b0df55b638c110949b24ef94fd62e98117fdfb0c0f
+"@remix-run/router@npm:1.13.0":
+ version: 1.13.0
+ resolution: "@remix-run/router@npm:1.13.0"
+ checksum: bb173a012d2036c5ee69babfe30c73975b970c2e5a0edaba138c302ae80d255e238e462e77365ab4efe819b6397e1a7f3a416d6200d17f9655f0ca1c51c4f45e
languageName: node
linkType: hard
@@ -5606,13 +5606,13 @@ __metadata:
lint-staged: "npm:15.1.0"
mini-css-extract-plugin: "npm:2.7.6"
msw: "npm:1.3.2"
- prettier: "npm:^3.0.3"
+ prettier: "npm:3.0.3"
react: "npm:18.2.0"
react-dom: "npm:18.2.0"
- react-error-boundary: "npm:^4.0.11"
+ react-error-boundary: "npm:4.0.11"
react-i18next: "npm:13.3.1"
- react-router-dom: "npm:6.18.0"
- react-toastify: "npm:^9.1.3"
+ react-router-dom: "npm:6.20.0"
+ react-toastify: "npm:9.1.3"
redux-mock-store: "npm:1.5.4"
redux-saga: "npm:1.2.3"
redux-saga-test-plan: "npm:4.0.6"
@@ -5740,7 +5740,7 @@ __metadata:
react-dom: "npm:18.2.0"
react-i18next: "npm:13.3.1"
react-redux: "npm:8.1.3"
- react-router-dom: "npm:6.18.0"
+ react-router-dom: "npm:6.20.0"
redux: "npm:4.2.1"
redux-saga: "npm:1.2.3"
reselect: "npm:4.1.8"
@@ -5762,7 +5762,7 @@ __metadata:
react: "npm:18.2.0"
react-dom: "npm:18.2.0"
react-redux: "npm:8.1.3"
- react-router-dom: "npm:6.18.0"
+ react-router-dom: "npm:6.20.0"
typescript: "npm:5.2.2"
webpack: "npm:5.89.0"
webpack-dev-server: "npm:4.15.1"
@@ -5786,7 +5786,7 @@ __metadata:
react-dnd-html5-backend: "npm:16.0.1"
react-dom: "npm:18.2.0"
react-redux: "npm:8.1.3"
- react-router-dom: "npm:6.18.0"
+ react-router-dom: "npm:6.20.0"
react-select: "npm:5.7.7"
redux-saga: "npm:1.2.3"
typescript: "npm:5.2.2"
@@ -7630,7 +7630,7 @@ __metadata:
jest: "npm:29.7.0"
react: "npm:18.2.0"
react-dom: "npm:18.2.0"
- react-router-dom: "npm:6.18.0"
+ react-router-dom: "npm:6.20.0"
react-use: "npm:17.4.0"
typescript: "npm:5.2.2"
webpack: "npm:5.89.0"
@@ -14054,7 +14054,7 @@ __metadata:
languageName: node
linkType: hard
-"prettier@npm:^3.0.3":
+"prettier@npm:3.0.3":
version: 3.0.3
resolution: "prettier@npm:3.0.3"
bin:
@@ -14370,7 +14370,7 @@ __metadata:
languageName: node
linkType: hard
-"react-error-boundary@npm:^4.0.11":
+"react-error-boundary@npm:4.0.11":
version: 4.0.11
resolution: "react-error-boundary@npm:4.0.11"
dependencies:
@@ -14534,27 +14534,27 @@ __metadata:
languageName: node
linkType: hard
-"react-router-dom@npm:6.18.0":
- version: 6.18.0
- resolution: "react-router-dom@npm:6.18.0"
+"react-router-dom@npm:6.20.0":
+ version: 6.20.0
+ resolution: "react-router-dom@npm:6.20.0"
dependencies:
- "@remix-run/router": "npm:1.11.0"
- react-router: "npm:6.18.0"
+ "@remix-run/router": "npm:1.13.0"
+ react-router: "npm:6.20.0"
peerDependencies:
react: ">=16.8"
react-dom: ">=16.8"
- checksum: b0e72603d73172b6c6662afe2faed326753d5bbd9905aa560e3dade7996fc13d19e34e3ed668d2849efd685e2db2f711129c84b1439870e92c9cc91ddc343cf5
+ checksum: 4b6741c545cedf5a5c4f996deb953679dcc985425e0664e27b97fdb9ab1387cbe1a6a12bfc7f7c38ec40b15759b4bf6396930ec26540a4a81ae16d154fd35049
languageName: node
linkType: hard
-"react-router@npm:6.18.0":
- version: 6.18.0
- resolution: "react-router@npm:6.18.0"
+"react-router@npm:6.20.0":
+ version: 6.20.0
+ resolution: "react-router@npm:6.20.0"
dependencies:
- "@remix-run/router": "npm:1.11.0"
+ "@remix-run/router": "npm:1.13.0"
peerDependencies:
react: ">=16.8"
- checksum: a00c8f347b7ffee575f4a7731782e688e3fca458ca5bd970fb41cef66a6851853caa24464155ab438d5879f367b1223a539642a405a865913ffe7e63e53b1245
+ checksum: 2cdac5ad8b7a7bc230173b26768bcf3f6a9abc0a19983fa7b76b9ffdbeb44bfbd88fcc2033e9062defafef144db207859eb3162a9c9742d70cfce4e7166ff1e5
languageName: node
linkType: hard
@@ -14595,7 +14595,7 @@ __metadata:
languageName: node
linkType: hard
-"react-toastify@npm:^9.1.3":
+"react-toastify@npm:9.1.3":
version: 9.1.3
resolution: "react-toastify@npm:9.1.3"
dependencies:
@@ -15090,7 +15090,7 @@ __metadata:
jest: "npm:29.7.0"
react: "npm:18.2.0"
react-dom: "npm:18.2.0"
- react-router-dom: "npm:6.18.0"
+ react-router-dom: "npm:6.20.0"
react-use: "npm:17.4.0"
typescript: "npm:5.2.2"
webpack: "npm:5.89.0"
From c8303a2b5a8d2c5290d619f1c3fa73b8e74399f6 Mon Sep 17 00:00:00 2001
From: Mirko Sekulic
Date: Wed, 13 Dec 2023 12:29:25 +0100
Subject: [PATCH 13/21] chore(deps): libgit2sharp 0.28.0 => 0.29.0 (#11852)
---
backend/packagegroups/NuGet.props | 2 +-
.../src/Designer/Services/Implementation/SourceControlSI.cs | 4 ++--
2 files changed, 3 insertions(+), 3 deletions(-)
diff --git a/backend/packagegroups/NuGet.props b/backend/packagegroups/NuGet.props
index a00cf3b7690..987d677484b 100644
--- a/backend/packagegroups/NuGet.props
+++ b/backend/packagegroups/NuGet.props
@@ -14,7 +14,7 @@
Date: Wed, 13 Dec 2023 12:35:49 +0100
Subject: [PATCH 14/21] Fix failing Cypress tests (#11853)
---
frontend/language/src/nb.json | 3 ++-
.../PageAccordion/PageAccordion.test.tsx | 4 ++--
.../DesignView/PageAccordion/PageAccordion.tsx | 4 ++--
.../cypress/src/integration/studio/designer.js | 16 +---------------
.../testing/cypress/src/selectors/settings.js | 2 +-
5 files changed, 8 insertions(+), 21 deletions(-)
diff --git a/frontend/language/src/nb.json b/frontend/language/src/nb.json
index f1830ab12f6..de753de85ce 100644
--- a/frontend/language/src/nb.json
+++ b/frontend/language/src/nb.json
@@ -255,6 +255,7 @@
"general.date": "Dato",
"general.date_time_format": "{{date}} kl. {{time}}",
"general.delete": "Slett",
+ "general.delete_item": "Slett {{item}}",
"general.details": "Detaljer",
"general.disabled": "Deaktivert",
"general.edit": "Endre",
@@ -1585,4 +1586,4 @@
"validation_errors.pattern": "Feil format eller verdi",
"validation_errors.required": "Feltet er påkrevd",
"validation_errors.value_as_url": "Ugyldig lenke"
-}
\ No newline at end of file
+}
diff --git a/frontend/packages/ux-editor/src/containers/DesignView/PageAccordion/PageAccordion.test.tsx b/frontend/packages/ux-editor/src/containers/DesignView/PageAccordion/PageAccordion.test.tsx
index 059991cd5aa..2f0beea0766 100644
--- a/frontend/packages/ux-editor/src/containers/DesignView/PageAccordion/PageAccordion.test.tsx
+++ b/frontend/packages/ux-editor/src/containers/DesignView/PageAccordion/PageAccordion.test.tsx
@@ -77,7 +77,7 @@ describe('PageAccordion', () => {
jest.spyOn(window, 'confirm').mockImplementation(jest.fn(() => true));
await render();
- await screen.getByRole('button', { name: textMock('general.delete') }).click();
+ await screen.getByRole('button', { name: textMock('general.delete_item', { item: mockPageName1 }) }).click();
expect(mockDeleteFormLayout).toHaveBeenCalledTimes(1);
expect(mockDeleteFormLayout).toHaveBeenCalledWith(mockPageName1);
expect(mockSetSearchParams).toHaveBeenCalledWith({ layout: mockPageName2 });
@@ -86,7 +86,7 @@ describe('PageAccordion', () => {
it('Does not call deleteLayout when delete button is clicked, but deletion is not confirmed', async () => {
jest.spyOn(window, 'confirm').mockImplementation(jest.fn(() => false));
await render();
- await screen.getByRole('button', { name: textMock('general.delete') }).click();
+ await screen.getByRole('button', { name: textMock('general.delete_item', { item: mockPageName1 }) }).click();
expect(mockDeleteFormLayout).not.toHaveBeenCalled();
});
});
diff --git a/frontend/packages/ux-editor/src/containers/DesignView/PageAccordion/PageAccordion.tsx b/frontend/packages/ux-editor/src/containers/DesignView/PageAccordion/PageAccordion.tsx
index 859ab542ec0..25fef05562c 100644
--- a/frontend/packages/ux-editor/src/containers/DesignView/PageAccordion/PageAccordion.tsx
+++ b/frontend/packages/ux-editor/src/containers/DesignView/PageAccordion/PageAccordion.tsx
@@ -76,9 +76,9 @@ export const PageAccordion = ({
{{nodeName}} 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...",
@@ -1586,4 +1587,4 @@
"validation_errors.pattern": "Feil format eller verdi",
"validation_errors.required": "Feltet er påkrevd",
"validation_errors.value_as_url": "Ugyldig lenke"
-}
+}
\ No newline at end of file
diff --git a/frontend/packages/shared/src/contexts/ServicesContext.test.tsx b/frontend/packages/shared/src/contexts/ServicesContext.test.tsx
index 2ad7af74ea1..8739d4c0316 100644
--- a/frontend/packages/shared/src/contexts/ServicesContext.test.tsx
+++ b/frontend/packages/shared/src/contexts/ServicesContext.test.tsx
@@ -20,6 +20,8 @@ jest.mock('react-i18next', () => ({
Trans: ({ i18nKey }: { i18nKey: any }) => textMock(i18nKey),
}));
+jest.useFakeTimers();
+
const wrapper = ({
children,
queries = {},
@@ -35,12 +37,11 @@ const wrapper = ({
};
describe('ServicesContext', () => {
- it('logs the user out when the session is invalid or expired', async () => {
+ it('logs the user out after displaying a toast for a given time when the api says unauthorized', async () => {
const mockConsoleError = jest.spyOn(console, 'error').mockImplementation();
-
+ jest.spyOn(global, 'setTimeout');
const logout = jest.fn().mockImplementation(() => Promise.resolve());
-
- const { result } = renderHook(
+ renderHook(
() =>
useQuery({
queryKey: ['fetchData'],
@@ -53,10 +54,12 @@ describe('ServicesContext', () => {
},
},
);
+ expect(await screen.findByText(textMock('api_errors.Unauthorized'))).toBeInTheDocument();
+ jest.runAllTimers();
+ await waitFor(() => {
+ expect(logout).toHaveBeenCalledTimes(1);
+ });
- await waitFor(() => result.current.isError);
-
- expect(logout).toHaveBeenCalledTimes(1);
expect(mockConsoleError).toHaveBeenCalled();
});
@@ -92,7 +95,7 @@ describe('ServicesContext', () => {
});
it('displays a default error message if API returns an error code but the error message does not exist', async () => {
- const { result } = renderHook(
+ const {} = renderHook(
() =>
useQuery({
queryKey: ['fetchData'],
@@ -102,8 +105,6 @@ describe('ServicesContext', () => {
{ wrapper },
);
- await waitFor(() => result.current.isError);
-
expect(await screen.findByText(textMock('general.error_message'))).toBeInTheDocument();
});
diff --git a/frontend/packages/shared/src/contexts/ServicesContext.tsx b/frontend/packages/shared/src/contexts/ServicesContext.tsx
index cb6d201f392..a4a3c42735a 100644
--- a/frontend/packages/shared/src/contexts/ServicesContext.tsx
+++ b/frontend/packages/shared/src/contexts/ServicesContext.tsx
@@ -32,6 +32,8 @@ export type ServicesContextProviderProps = ServicesContextProps & {
clientConfig?: QueryClientConfig;
};
+const LOG_OUT_TIMER_MS = 5000;
+
const ServicesContext = createContext(null);
const handleError = (
@@ -44,7 +46,13 @@ const handleError = (
// TODO : log axios errors
if (error?.response?.status === ServerCodes.Unauthorized) {
- logout().then(() => window.location.assign(userLogoutAfterPath()));
+ const errorMessageKey = 'api_errors.Unauthorized';
+ if (i18n.exists(errorMessageKey)) {
+ toast.error(t(errorMessageKey), { toastId: errorMessageKey, autoClose: LOG_OUT_TIMER_MS });
+ }
+ setTimeout(() => {
+ logout().then(() => window.location.assign(userLogoutAfterPath()));
+ }, LOG_OUT_TIMER_MS);
return;
}
From 9b686ddd9c83eb8b99be6dd7969950304c92e11d Mon Sep 17 00:00:00 2001
From: WilliamThorenfeldt
<133344438+WilliamThorenfeldt@users.noreply.github.com>
Date: Thu, 14 Dec 2023 18:12:57 +0100
Subject: [PATCH 16/21] fixing the message (#11861)
---
.../app-development/features/processEditor/ProcessEditor.tsx | 2 +-
frontend/language/src/nb.json | 1 +
2 files changed, 2 insertions(+), 1 deletion(-)
diff --git a/frontend/app-development/features/processEditor/ProcessEditor.tsx b/frontend/app-development/features/processEditor/ProcessEditor.tsx
index 6c2ea02f9ea..67c3cfdf8c6 100644
--- a/frontend/app-development/features/processEditor/ProcessEditor.tsx
+++ b/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'));
},
},
);
diff --git a/frontend/language/src/nb.json b/frontend/language/src/nb.json
index db55d81b415..2f952f1cccc 100644
--- a/frontend/language/src/nb.json
+++ b/frontend/language/src/nb.json
@@ -648,6 +648,7 @@
"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_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!",
From 7e4a6a6696678e1191cafbf4833adb001e9c09d2 Mon Sep 17 00:00:00 2001
From: WilliamThorenfeldt
<133344438+WilliamThorenfeldt@users.noreply.github.com>
Date: Fri, 15 Dec 2023 12:54:45 +0100
Subject: [PATCH 17/21] Feature/11772 details about selected task in
process-editor (#11854)
* making it possible to get the needed data
* adding bpmn to context
* adding more details
* adding task icons to studio/icons
* removing usage
* tryinng to get something to work
* refactoring the style of the page
* creating design on page
* refactoring code
* implementing logic to get the bpmn details
* finalising tests
* fixing broken cypress and removing console.log
* trying to commit
* fixing some feedback from PR
* fixing final comments from PR
* refactoring components one more level
* fixing feedback from PR
---
frontend/language/src/nb.json | 21 ++-
.../process-editor/src/ProcessEditor.test.tsx | 13 +-
.../src/components/Canvas/Canvas.test.tsx | 4 +-
.../src/components/Canvas/Canvas.tsx | 18 +--
.../CanvasActionMenu.module.css | 1 +
.../CanvasActionMenu.test.tsx | 43 +++---
.../CanvasActionMenu/CanvasActionMenu.tsx | 32 ++--
.../VersionHelpText.module.css | 11 ++
.../VersionHelpText/VersionHelpText.test.tsx} | 18 +--
.../VersionHelpText/VersionHelpText.tsx | 37 +++++
.../Canvas/VersionHelpText/index.ts | 1 +
.../ConfigContent/ConfigContent.module.css | 13 ++
.../ConfigContent/ConfigContent.test.tsx | 99 +++++++++++++
.../ConfigContent/ConfigContent.tsx | 47 ++++++
.../ConfigDetailsRow.module.css | 5 +
.../ConfigDetailsRow.test.tsx | 22 +++
.../ConfigDetailsRow/ConfigDetailsRow.tsx | 26 ++++
.../ConfigContent/ConfigDetailsRow/index.ts | 1 +
.../ConfigIcon/ConfigIcon.module.css | 3 +
.../ConfigContent/ConfigIcon/ConfigIcon.tsx | 21 +++
.../ConfigContent/ConfigIcon/index.ts | 1 +
.../ConfigSectionWrapper.module.css | 6 +
.../ConfigSectionWrapper.tsx | 16 ++
.../ConfigSectionWrapper/index.ts | 1 +
.../ConfigPanel/ConfigContent/index.ts | 1 +
.../ConfigPanel/ConfigPanel.module.css | 6 +-
.../ConfigPanel/ConfigPanel.test.tsx | 139 +++++++++++++++---
.../components/ConfigPanel/ConfigPanel.tsx | 45 +++---
.../VersionAlert/VersionAlert.module.css | 8 -
.../ConfigPanel/VersionAlert/VersionAlert.tsx | 42 ------
.../ConfigPanel/VersionAlert/index.ts | 1 -
.../src/contexts/BpmnContext.tsx | 12 +-
.../process-editor/src/enum/BpmnTypeEnum.ts | 7 +
.../process-editor/src/hooks/useBpmnEditor.ts | 15 +-
.../process-editor/src/hooks/useBpmnViewer.ts | 15 +-
.../src/types/BpmnBusinessObjectEditor.ts | 19 +++
.../src/types/BpmnBusinessObjectViewer.ts | 11 ++
.../process-editor/src/types/BpmnDetails.ts | 9 ++
.../process-editor/src/types/BpmnTaskType.ts | 1 +
.../configPanelUtils/configPanelUtils.test.ts | 47 ++++++
.../configPanelUtils/configPanelUtils.ts | 20 +++
.../src/utils/configPanelUtils/index.ts | 1 +
.../src/utils/hookUtils/hookUtils.test.ts | 112 ++++++++++++++
.../src/utils/hookUtils/hookUtils.ts | 46 ++++++
.../src/utils/hookUtils/index.ts | 4 +
.../PageAccordion/PageAccordion.test.tsx | 8 +-
frontend/testing/cypress/cypress.config.js | 11 ++
.../src/integration/studio/designer.js | 4 +-
48 files changed, 854 insertions(+), 190 deletions(-)
create mode 100644 frontend/packages/process-editor/src/components/Canvas/VersionHelpText/VersionHelpText.module.css
rename frontend/packages/process-editor/src/components/{ConfigPanel/VersionAlert/VersionAlert.test.tsx => Canvas/VersionHelpText/VersionHelpText.test.tsx} (60%)
create mode 100644 frontend/packages/process-editor/src/components/Canvas/VersionHelpText/VersionHelpText.tsx
create mode 100644 frontend/packages/process-editor/src/components/Canvas/VersionHelpText/index.ts
create mode 100644 frontend/packages/process-editor/src/components/ConfigPanel/ConfigContent/ConfigContent.module.css
create mode 100644 frontend/packages/process-editor/src/components/ConfigPanel/ConfigContent/ConfigContent.test.tsx
create mode 100644 frontend/packages/process-editor/src/components/ConfigPanel/ConfigContent/ConfigContent.tsx
create mode 100644 frontend/packages/process-editor/src/components/ConfigPanel/ConfigContent/ConfigDetailsRow/ConfigDetailsRow.module.css
create mode 100644 frontend/packages/process-editor/src/components/ConfigPanel/ConfigContent/ConfigDetailsRow/ConfigDetailsRow.test.tsx
create mode 100644 frontend/packages/process-editor/src/components/ConfigPanel/ConfigContent/ConfigDetailsRow/ConfigDetailsRow.tsx
create mode 100644 frontend/packages/process-editor/src/components/ConfigPanel/ConfigContent/ConfigDetailsRow/index.ts
create mode 100644 frontend/packages/process-editor/src/components/ConfigPanel/ConfigContent/ConfigIcon/ConfigIcon.module.css
create mode 100644 frontend/packages/process-editor/src/components/ConfigPanel/ConfigContent/ConfigIcon/ConfigIcon.tsx
create mode 100644 frontend/packages/process-editor/src/components/ConfigPanel/ConfigContent/ConfigIcon/index.ts
create mode 100644 frontend/packages/process-editor/src/components/ConfigPanel/ConfigContent/ConfigSectionWrapper/ConfigSectionWrapper.module.css
create mode 100644 frontend/packages/process-editor/src/components/ConfigPanel/ConfigContent/ConfigSectionWrapper/ConfigSectionWrapper.tsx
create mode 100644 frontend/packages/process-editor/src/components/ConfigPanel/ConfigContent/ConfigSectionWrapper/index.ts
create mode 100644 frontend/packages/process-editor/src/components/ConfigPanel/ConfigContent/index.ts
delete mode 100644 frontend/packages/process-editor/src/components/ConfigPanel/VersionAlert/VersionAlert.module.css
delete mode 100644 frontend/packages/process-editor/src/components/ConfigPanel/VersionAlert/VersionAlert.tsx
delete mode 100644 frontend/packages/process-editor/src/components/ConfigPanel/VersionAlert/index.ts
create mode 100644 frontend/packages/process-editor/src/enum/BpmnTypeEnum.ts
create mode 100644 frontend/packages/process-editor/src/types/BpmnBusinessObjectEditor.ts
create mode 100644 frontend/packages/process-editor/src/types/BpmnBusinessObjectViewer.ts
create mode 100644 frontend/packages/process-editor/src/types/BpmnDetails.ts
create mode 100644 frontend/packages/process-editor/src/types/BpmnTaskType.ts
create mode 100644 frontend/packages/process-editor/src/utils/configPanelUtils/configPanelUtils.test.ts
create mode 100644 frontend/packages/process-editor/src/utils/configPanelUtils/configPanelUtils.ts
create mode 100644 frontend/packages/process-editor/src/utils/configPanelUtils/index.ts
create mode 100644 frontend/packages/process-editor/src/utils/hookUtils/hookUtils.test.ts
create mode 100644 frontend/packages/process-editor/src/utils/hookUtils/hookUtils.ts
create mode 100644 frontend/packages/process-editor/src/utils/hookUtils/index.ts
diff --git a/frontend/language/src/nb.json b/frontend/language/src/nb.json
index 2f952f1cccc..cda785540bb 100644
--- a/frontend/language/src/nb.json
+++ b/frontend/language/src/nb.json
@@ -634,21 +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. Trenger du hjelp til å oppgradere, kan du <1>kontakte oss.",
+ "process_editor.help_text_and_links": "Trenger du hjelp til å oppgradere, kan du <0>ta kontakte med oss.",
"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!",
diff --git a/frontend/packages/process-editor/src/ProcessEditor.test.tsx b/frontend/packages/process-editor/src/ProcessEditor.test.tsx
index 4c83df6c36c..0203911bccb 100644
--- a/frontend/packages/process-editor/src/ProcessEditor.test.tsx
+++ b/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();
});
});
diff --git a/frontend/packages/process-editor/src/components/Canvas/Canvas.test.tsx b/frontend/packages/process-editor/src/components/Canvas/Canvas.test.tsx
index 7041eec6e1b..5ecb832fe89 100644
--- a/frontend/packages/process-editor/src/components/Canvas/Canvas.test.tsx
+++ b/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;
});
});
diff --git a/frontend/packages/process-editor/src/components/Canvas/Canvas.tsx b/frontend/packages/process-editor/src/components/Canvas/Canvas.tsx
index 816afea5c64..0837440f64c 100644
--- a/frontend/packages/process-editor/src/components/Canvas/Canvas.tsx
+++ b/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 => {
onSave(await getUpdatedXml());
@@ -45,14 +41,8 @@ export const Canvas = ({ onSave }: CanvasProps): JSX.Element => {
return (
+ ,
+ );
+};
diff --git a/frontend/packages/process-editor/src/components/Canvas/CanvasActionMenu/CanvasActionMenu.tsx b/frontend/packages/process-editor/src/components/Canvas/CanvasActionMenu/CanvasActionMenu.tsx
index a94f04b3ffa..181315cbc9d 100644
--- a/frontend/packages/process-editor/src/components/Canvas/CanvasActionMenu/CanvasActionMenu.tsx
+++ b/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 (
- :
{t('process_editor.unsaved_changes', { count: numberOfUnsavedChanges })}
-
+
)}
- {isEditorView && (
+ {isEditAllowed && (
diff --git a/frontend/packages/process-editor/src/components/Canvas/VersionHelpText/VersionHelpText.module.css b/frontend/packages/process-editor/src/components/Canvas/VersionHelpText/VersionHelpText.module.css
new file mode 100644
index 00000000000..daf572924a1
--- /dev/null
+++ b/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;
+}
diff --git a/frontend/packages/process-editor/src/components/ConfigPanel/VersionAlert/VersionAlert.test.tsx b/frontend/packages/process-editor/src/components/Canvas/VersionHelpText/VersionHelpText.test.tsx
similarity index 60%
rename from frontend/packages/process-editor/src/components/ConfigPanel/VersionAlert/VersionAlert.test.tsx
rename to frontend/packages/process-editor/src/components/Canvas/VersionHelpText/VersionHelpText.test.tsx
index f0c150989df..2624f276b61 100644
--- a/frontend/packages/process-editor/src/components/ConfigPanel/VersionAlert/VersionAlert.test.tsx
+++ b/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 = ``;
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}
>
- = {}) => {
+ return rtlRender(
+
+ ,
+ );
+};
diff --git a/frontend/packages/process-editor/src/components/ConfigPanel/ConfigContent/ConfigContent.tsx b/frontend/packages/process-editor/src/components/ConfigPanel/ConfigContent/ConfigContent.tsx
new file mode 100644
index 00000000000..95803712790
--- /dev/null
+++ b/frontend/packages/process-editor/src/components/ConfigPanel/ConfigContent/ConfigContent.tsx
@@ -0,0 +1,47 @@
+import React from 'react';
+import classes from './ConfigContent.module.css';
+import { useTranslation } from 'react-i18next';
+import { Divider, Heading, HelpText, Paragraph } from '@digdir/design-system-react';
+import { ConfigIcon } from './ConfigIcon';
+import { ConfigDetailsRow } from './ConfigDetailsRow';
+import { getConfigTitleKey, getConfigTitleHelpTextKey } from '../../../utils/configPanelUtils';
+import { useBpmnContext } from '../../../contexts/BpmnContext';
+import { ConfigSectionWrapper } from './ConfigSectionWrapper';
+
+export const ConfigContent = (): JSX.Element => {
+ const { t } = useTranslation();
+ const { bpmnDetails } = useBpmnContext();
+
+ const configTitle = t(getConfigTitleKey(bpmnDetails?.taskType));
+ const configHeaderHelpText = t(getConfigTitleHelpTextKey(bpmnDetails?.taskType));
+
+ return (
+ <>
+
+
+
+ );
+};
diff --git a/frontend/packages/process-editor/src/components/ConfigPanel/ConfigContent/ConfigDetailsRow/ConfigDetailsRow.module.css b/frontend/packages/process-editor/src/components/ConfigPanel/ConfigContent/ConfigDetailsRow/ConfigDetailsRow.module.css
new file mode 100644
index 00000000000..cfdfa5d251d
--- /dev/null
+++ b/frontend/packages/process-editor/src/components/ConfigPanel/ConfigContent/ConfigDetailsRow/ConfigDetailsRow.module.css
@@ -0,0 +1,5 @@
+.wrapper {
+ display: flex;
+ gap: 0.25rem;
+ align-items: center;
+}
diff --git a/frontend/packages/process-editor/src/components/ConfigPanel/ConfigContent/ConfigDetailsRow/ConfigDetailsRow.test.tsx b/frontend/packages/process-editor/src/components/ConfigPanel/ConfigContent/ConfigDetailsRow/ConfigDetailsRow.test.tsx
new file mode 100644
index 00000000000..aa95a6ceefd
--- /dev/null
+++ b/frontend/packages/process-editor/src/components/ConfigPanel/ConfigContent/ConfigDetailsRow/ConfigDetailsRow.test.tsx
@@ -0,0 +1,22 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import { ConfigDetailsRow, ConfigDetailsRowProps } from './ConfigDetailsRow';
+
+const mockTitle: string = 'Title';
+const mockText: string = 'Text';
+
+const defaultProps: ConfigDetailsRowProps = {
+ title: mockTitle,
+ text: mockText,
+};
+
+describe('ConfigDetailsRow', () => {
+ afterEach(jest.clearAllMocks);
+
+ it('displays the title and text correctly on screen', () => {
+ render(
- ,
- );
- };
+ it('should display the details about the selected task when a "feedback" task is selected', () => {
+ render({ bpmnDetails: { ...mockBpmnDetails, taskType: 'feedback' } });
+
+ expect(
+ screen.getByRole('heading', {
+ name: textMock('process_editor.configuration_panel_feedback_task'),
+ level: 2,
+ }),
+ ).toBeInTheDocument();
+
+ expect(screen.getByText(mockBpmnDetails.id)).toBeInTheDocument();
+ expect(screen.getByText(mockBpmnDetails.name)).toBeInTheDocument();
+ });
+
+ it('should display the details about the selected task when a "signing" task is selected', () => {
+ render({ bpmnDetails: { ...mockBpmnDetails, taskType: 'signing' } });
+
+ expect(
+ screen.getByRole('heading', {
+ name: textMock('process_editor.configuration_panel_signing_task'),
+ level: 2,
+ }),
+ ).toBeInTheDocument();
+
+ expect(screen.getByText(mockBpmnDetails.id)).toBeInTheDocument();
+ expect(screen.getByText(mockBpmnDetails.name)).toBeInTheDocument();
+ });
});
+
+const render = (rootContextProps: Partial = {}) => {
+ return rtlRender(
+
+ ,
+ );
+};
diff --git a/frontend/packages/process-editor/src/components/ConfigPanel/ConfigPanel.tsx b/frontend/packages/process-editor/src/components/ConfigPanel/ConfigPanel.tsx
index c4af8b56656..70bc05e3194 100644
--- a/frontend/packages/process-editor/src/components/ConfigPanel/ConfigPanel.tsx
+++ b/frontend/packages/process-editor/src/components/ConfigPanel/ConfigPanel.tsx
@@ -1,10 +1,11 @@
import React from 'react';
import classes from './ConfigPanel.module.css';
-import { VersionAlert } from './VersionAlert';
import { useTranslation } from 'react-i18next';
-import { Alert, Heading, Paragraph } from '@digdir/design-system-react';
+import { Paragraph } from '@digdir/design-system-react';
import { useBpmnContext } from '../../contexts/BpmnContext';
+import { BpmnTypeEnum } from '../../enum/BpmnTypeEnum';
+import { ConfigContent } from './ConfigContent';
/**
* @component
@@ -14,23 +15,25 @@ import { useBpmnContext } from '../../contexts/BpmnContext';
*/
export const ConfigPanel = (): JSX.Element => {
const { t } = useTranslation();
- const { isEditAllowed } = useBpmnContext();
- return (
-
+ {t('process_editor.configuration_panel_no_task')}
+
+ );
+ } else if (bpmnDetails.type === BpmnTypeEnum.Task) {
+ return
+ {t('process_editor.configuration_panel_element_not_supported')}
+
+ );
+ }
+ };
+
+ return
-
- {t('process_editor.too_old_version_title')}
-
-
- {t('process_editor.too_old_version_text', { version: appLibVersion })}
-
-
- {t('process_editor.need_to_contact_text')}
-
-
-
-
- Les mer om hvordan dette gjøres her
-
- . Trenger du hjelp til å oppgradere, kan du kontakte oss.
-
-
-
- );
-};
diff --git a/frontend/packages/process-editor/src/components/ConfigPanel/VersionAlert/index.ts b/frontend/packages/process-editor/src/components/ConfigPanel/VersionAlert/index.ts
deleted file mode 100644
index 4b52507c1c1..00000000000
--- a/frontend/packages/process-editor/src/components/ConfigPanel/VersionAlert/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { VersionAlert } from './VersionAlert';
diff --git a/frontend/packages/process-editor/src/contexts/BpmnContext.tsx b/frontend/packages/process-editor/src/contexts/BpmnContext.tsx
index f2354532923..146dbdfa72a 100644
--- a/frontend/packages/process-editor/src/contexts/BpmnContext.tsx
+++ b/frontend/packages/process-editor/src/contexts/BpmnContext.tsx
@@ -2,8 +2,9 @@ import { supportsProcessEditor } from '../utils/processEditorUtils';
import { shouldDisplayFeature } from 'app-shared/utils/featureToggleUtils';
import Modeler from 'bpmn-js/lib/Modeler';
import React, { MutableRefObject, createContext, useContext, useRef, useState } from 'react';
+import { BpmnDetails } from '../types/BpmnDetails';
-type BpmnContextProps = {
+export type BpmnContextProps = {
bpmnXml: string;
modelerRef?: MutableRefObject;
numberOfUnsavedChanges: number;
@@ -11,6 +12,8 @@ type BpmnContextProps = {
getUpdatedXml: () => Promise;
isEditAllowed: boolean;
appLibVersion: string;
+ bpmnDetails: BpmnDetails;
+ setBpmnDetails: React.Dispatch>;
};
export const BpmnContext = createContext({
@@ -21,6 +24,8 @@ export const BpmnContext = createContext({
getUpdatedXml: async () => '',
isEditAllowed: true,
appLibVersion: '',
+ bpmnDetails: null,
+ setBpmnDetails: () => {},
});
export type BpmnContextProviderProps = {
@@ -34,8 +39,11 @@ export const BpmnContextProvider = ({
appLibVersion,
}: BpmnContextProviderProps) => {
const [numberOfUnsavedChanges, setNumberOfUnsavedChanges] = useState(0);
+ const [bpmnDetails, setBpmnDetails] = useState(null);
+
const isEditAllowed =
supportsProcessEditor(appLibVersion) || shouldDisplayFeature('shouldOverrideAppLibCheck');
+
const modelerRef = useRef(null);
const getUpdatedXml = async (): Promise => {
@@ -61,6 +69,8 @@ export const BpmnContextProvider = ({
getUpdatedXml,
isEditAllowed,
appLibVersion,
+ bpmnDetails,
+ setBpmnDetails,
}}
>
{children}
diff --git a/frontend/packages/process-editor/src/enum/BpmnTypeEnum.ts b/frontend/packages/process-editor/src/enum/BpmnTypeEnum.ts
new file mode 100644
index 00000000000..d64774507c8
--- /dev/null
+++ b/frontend/packages/process-editor/src/enum/BpmnTypeEnum.ts
@@ -0,0 +1,7 @@
+export enum BpmnTypeEnum {
+ Process = 'bpmn:Process',
+ Task = 'bpmn:Task',
+ SequenceFlow = 'bpmn:SequenceFlow',
+ StartEvent = 'bpmn:StartEvent',
+ EndEvent = 'bpmn:EndEvent',
+}
diff --git a/frontend/packages/process-editor/src/hooks/useBpmnEditor.ts b/frontend/packages/process-editor/src/hooks/useBpmnEditor.ts
index 896dd0d7640..d973c61e8a3 100644
--- a/frontend/packages/process-editor/src/hooks/useBpmnEditor.ts
+++ b/frontend/packages/process-editor/src/hooks/useBpmnEditor.ts
@@ -3,6 +3,7 @@ import BpmnModeler from 'bpmn-js/lib/Modeler';
import { useBpmnContext } from '../contexts/BpmnContext';
import Modeler from 'bpmn-js/lib/Modeler';
import { useBpmnModeler } from './useBpmnModeler';
+import { getBpmnEditorDetailsFromBusinessObject } from '../utils/hookUtils';
// Wrapper around bpmn-js to Reactify it
@@ -12,7 +13,7 @@ type UseBpmnViewerResult = {
};
export const useBpmnEditor = (): UseBpmnViewerResult => {
- const { bpmnXml, modelerRef, setNumberOfUnsavedChanges } = useBpmnContext();
+ const { bpmnXml, modelerRef, setNumberOfUnsavedChanges, setBpmnDetails } = useBpmnContext();
const canvasRef = useRef(null);
const { getModeler } = useBpmnModeler();
@@ -32,6 +33,16 @@ export const useBpmnEditor = (): UseBpmnViewerResult => {
});
};
+ const eventBus: any = modelerInstance.get('eventBus');
+ const events = ['element.click'];
+
+ events.forEach((event) => {
+ eventBus.on(event, (e: any) => {
+ const bpmnDetails = getBpmnEditorDetailsFromBusinessObject(e?.element?.businessObject);
+ setBpmnDetails(bpmnDetails);
+ });
+ });
+
const initializeEditor = async () => {
try {
await modelerInstance.importXML(bpmnXml);
@@ -44,7 +55,7 @@ export const useBpmnEditor = (): UseBpmnViewerResult => {
initializeEditor();
initializeUnsavedChangesCount();
- }, [bpmnXml, modelerRef, setNumberOfUnsavedChanges]);
+ }, [bpmnXml, modelerRef, setBpmnDetails, setNumberOfUnsavedChanges]);
return { canvasRef, modelerRef };
};
diff --git a/frontend/packages/process-editor/src/hooks/useBpmnViewer.ts b/frontend/packages/process-editor/src/hooks/useBpmnViewer.ts
index 59b6c2ff1d1..8babcf9c443 100644
--- a/frontend/packages/process-editor/src/hooks/useBpmnViewer.ts
+++ b/frontend/packages/process-editor/src/hooks/useBpmnViewer.ts
@@ -2,6 +2,7 @@ import { MutableRefObject, useRef, useEffect, useState } from 'react';
import BpmnJS from 'bpmn-js/dist/bpmn-navigated-viewer.development.js';
import { useBpmnContext } from '../contexts/BpmnContext';
import type { BpmnViewerError } from '../types/BpmnViewerError';
+import { getBpmnViewerDetailsFromBusinessObject } from '../utils/hookUtils';
// Wrapper around bpmn-js to Reactify it
@@ -16,7 +17,7 @@ type UseBpmnViewerResult = {
};
export const useBpmnViewer = (): UseBpmnViewerResult => {
- const { bpmnXml } = useBpmnContext();
+ const { bpmnXml, setBpmnDetails } = useBpmnContext();
const canvasRef = useRef(null);
const [bpmnViewerError, setBpmnViewerError] = useState(undefined);
@@ -28,6 +29,16 @@ export const useBpmnViewer = (): UseBpmnViewerResult => {
const viewer = new BpmnJS({ container: canvasRef.current });
+ const eventBus = viewer.get('eventBus');
+ const events = ['element.click'];
+
+ events.forEach((event) => {
+ eventBus.on(event, (e: any) => {
+ const bpmnDetails = getBpmnViewerDetailsFromBusinessObject(e?.element?.businessObject);
+ setBpmnDetails(bpmnDetails);
+ });
+ });
+
const initializeViewer = async () => {
try {
await viewer.importXML(bpmnXml);
@@ -37,7 +48,7 @@ export const useBpmnViewer = (): UseBpmnViewerResult => {
};
initializeViewer();
- }, [bpmnXml]);
+ }, [bpmnXml, setBpmnDetails]);
return { canvasRef, bpmnViewerError };
};
diff --git a/frontend/packages/process-editor/src/types/BpmnBusinessObjectEditor.ts b/frontend/packages/process-editor/src/types/BpmnBusinessObjectEditor.ts
new file mode 100644
index 00000000000..5dca17a793b
--- /dev/null
+++ b/frontend/packages/process-editor/src/types/BpmnBusinessObjectEditor.ts
@@ -0,0 +1,19 @@
+import type { BpmnTaskType } from './BpmnTaskType';
+import type { BpmnTypeEnum } from '../enum/BpmnTypeEnum';
+
+export interface BpmnBusinessObjectEditor {
+ $type: BpmnTypeEnum;
+ id: string;
+ name?: string;
+ extensionElements?: BpmnExtensionElementsEditor;
+ $attrs?: {
+ 'altinn:tasktype': BpmnTaskType;
+ };
+}
+
+export interface BpmnExtensionElementsEditor {
+ values?: Array<{
+ taskType: BpmnTaskType;
+ $type: string;
+ }>;
+}
diff --git a/frontend/packages/process-editor/src/types/BpmnBusinessObjectViewer.ts b/frontend/packages/process-editor/src/types/BpmnBusinessObjectViewer.ts
new file mode 100644
index 00000000000..9d207fb53f9
--- /dev/null
+++ b/frontend/packages/process-editor/src/types/BpmnBusinessObjectViewer.ts
@@ -0,0 +1,11 @@
+import type { BpmnTaskType } from './BpmnTaskType';
+import type { BpmnTypeEnum } from '../enum/BpmnTypeEnum';
+
+export interface BpmnBusinessObjectViewer {
+ $type: BpmnTypeEnum;
+ id: string;
+ name?: string;
+ $attrs: {
+ 'altinn:tasktype': BpmnTaskType;
+ };
+}
diff --git a/frontend/packages/process-editor/src/types/BpmnDetails.ts b/frontend/packages/process-editor/src/types/BpmnDetails.ts
new file mode 100644
index 00000000000..9ad2d52258d
--- /dev/null
+++ b/frontend/packages/process-editor/src/types/BpmnDetails.ts
@@ -0,0 +1,9 @@
+import { BpmnTaskType } from './BpmnTaskType';
+import { BpmnTypeEnum } from '../enum/BpmnTypeEnum';
+
+export interface BpmnDetails {
+ id: string;
+ name: string;
+ taskType: BpmnTaskType | null;
+ type: BpmnTypeEnum;
+}
diff --git a/frontend/packages/process-editor/src/types/BpmnTaskType.ts b/frontend/packages/process-editor/src/types/BpmnTaskType.ts
new file mode 100644
index 00000000000..e5aaaae7d0a
--- /dev/null
+++ b/frontend/packages/process-editor/src/types/BpmnTaskType.ts
@@ -0,0 +1 @@
+export type BpmnTaskType = 'data' | 'confirmation' | 'feedback' | 'signing';
diff --git a/frontend/packages/process-editor/src/utils/configPanelUtils/configPanelUtils.test.ts b/frontend/packages/process-editor/src/utils/configPanelUtils/configPanelUtils.test.ts
new file mode 100644
index 00000000000..3ab508fa348
--- /dev/null
+++ b/frontend/packages/process-editor/src/utils/configPanelUtils/configPanelUtils.test.ts
@@ -0,0 +1,47 @@
+import { getConfigTitleHelpTextKey, getConfigTitleKey } from './configPanelUtils';
+
+describe('configPanelUtils', () => {
+ describe('getConfigTitleKey', () => {
+ it('returns data task key when taskType is "data"', () => {
+ const key = getConfigTitleKey('data');
+ expect(key).toEqual('process_editor.configuration_panel_data_task');
+ });
+
+ it('returns confirmation task key when taskType is "confirmation"', () => {
+ const key = getConfigTitleKey('confirmation');
+ expect(key).toEqual('process_editor.configuration_panel_confirmation_task');
+ });
+
+ it('returns feedback task key when taskType is "feedback"', () => {
+ const key = getConfigTitleKey('feedback');
+ expect(key).toEqual('process_editor.configuration_panel_feedback_task');
+ });
+
+ it('returns signing task key when taskType is "signing"', () => {
+ const key = getConfigTitleKey('signing');
+ expect(key).toEqual('process_editor.configuration_panel_signing_task');
+ });
+ });
+
+ describe('getConfigTitleHelpTextKey', () => {
+ it('returns data helptext key when taskType is "data"', () => {
+ const key = getConfigTitleHelpTextKey('data');
+ expect(key).toEqual('process_editor.configuration_panel_header_help_text_data');
+ });
+
+ it('returns confirmation helptext key when taskType is "confirmation"', () => {
+ const key = getConfigTitleHelpTextKey('confirmation');
+ expect(key).toEqual('process_editor.configuration_panel_header_help_text_confirmation');
+ });
+
+ it('returns feedback helptext key when taskType is "feedback"', () => {
+ const key = getConfigTitleHelpTextKey('feedback');
+ expect(key).toEqual('process_editor.configuration_panel_header_help_text_feedback');
+ });
+
+ it('returns signing helptext key when taskType is "signing"', () => {
+ const key = getConfigTitleHelpTextKey('signing');
+ expect(key).toEqual('process_editor.configuration_panel_header_help_text_signing');
+ });
+ });
+});
diff --git a/frontend/packages/process-editor/src/utils/configPanelUtils/configPanelUtils.ts b/frontend/packages/process-editor/src/utils/configPanelUtils/configPanelUtils.ts
new file mode 100644
index 00000000000..19772d6622b
--- /dev/null
+++ b/frontend/packages/process-editor/src/utils/configPanelUtils/configPanelUtils.ts
@@ -0,0 +1,20 @@
+import { BpmnTaskType } from '../../types/BpmnTaskType';
+
+/**
+ * Returns the title to show in the config panel when a task is selected.
+ * @param taskType the task type of the bpmn.
+ * @returns the correct title key.
+ *
+ */
+export const getConfigTitleKey = (taskType: BpmnTaskType) => {
+ return `process_editor.configuration_panel_${taskType}_task`;
+};
+
+/**
+ * Returns the text to show in the config panel helptext based on the tasktype
+ * @param taskType the task type of the bpmn
+ * @returns the correct helptext key
+ */
+export const getConfigTitleHelpTextKey = (taskType: BpmnTaskType) => {
+ return `process_editor.configuration_panel_header_help_text_${taskType}`;
+};
diff --git a/frontend/packages/process-editor/src/utils/configPanelUtils/index.ts b/frontend/packages/process-editor/src/utils/configPanelUtils/index.ts
new file mode 100644
index 00000000000..301b12445a5
--- /dev/null
+++ b/frontend/packages/process-editor/src/utils/configPanelUtils/index.ts
@@ -0,0 +1 @@
+export { getConfigTitleKey, getConfigTitleHelpTextKey } from './configPanelUtils';
diff --git a/frontend/packages/process-editor/src/utils/hookUtils/hookUtils.test.ts b/frontend/packages/process-editor/src/utils/hookUtils/hookUtils.test.ts
new file mode 100644
index 00000000000..9808116d2f7
--- /dev/null
+++ b/frontend/packages/process-editor/src/utils/hookUtils/hookUtils.test.ts
@@ -0,0 +1,112 @@
+import { BpmnTypeEnum } from '../../enum/BpmnTypeEnum';
+import { BpmnBusinessObjectViewer } from '../../types/BpmnBusinessObjectViewer';
+import {
+ BpmnBusinessObjectEditor,
+ BpmnExtensionElementsEditor,
+} from '../../types/BpmnBusinessObjectEditor';
+import { BpmnDetails } from '../../types/BpmnDetails';
+import { BpmnTaskType } from '../../types/BpmnTaskType';
+import {
+ getBpmnEditorDetailsFromBusinessObject,
+ getBpmnViewerDetailsFromBusinessObject,
+} from './hookUtils';
+
+describe('hookUtils', () => {
+ afterEach(jest.clearAllMocks);
+
+ describe('getBpmnViewerDetailsFromBusinessObject', () => {
+ const mockTypeTask: BpmnTypeEnum = BpmnTypeEnum.Task;
+ const mockId: string = 'mockId';
+ const mockName: string = 'mockName';
+ const mockTaskTypeData: BpmnTaskType = 'data';
+
+ const mockBpmnBusinessObject: BpmnBusinessObjectViewer = {
+ $type: mockTypeTask,
+ id: mockId,
+ name: mockName,
+ $attrs: {
+ 'altinn:tasktype': mockTaskTypeData,
+ },
+ };
+
+ it('returns the BpmnDetails with correct values', () => {
+ const bpmnDetails: BpmnDetails =
+ getBpmnViewerDetailsFromBusinessObject(mockBpmnBusinessObject);
+ expect(bpmnDetails.id).toEqual(mockId);
+ expect(bpmnDetails.name).toEqual(mockName);
+ expect(bpmnDetails.type).toEqual(mockTypeTask);
+ expect(bpmnDetails.taskType).toEqual(mockTaskTypeData);
+ });
+
+ it('returns taskType with value "null" when $attrs are not present', () => {
+ const bpmnBusinessObject: BpmnBusinessObjectViewer = {
+ ...mockBpmnBusinessObject,
+ $attrs: undefined,
+ };
+ const bpmnDetails: BpmnDetails = getBpmnViewerDetailsFromBusinessObject(bpmnBusinessObject);
+ expect(bpmnDetails.id).toEqual(mockId);
+ expect(bpmnDetails.name).toEqual(mockName);
+ expect(bpmnDetails.type).toEqual(mockTypeTask);
+ expect(bpmnDetails.taskType).toBeNull();
+ });
+ });
+
+ describe('getBpmnEditorDetailsFromBusinessObject', () => {
+ const mockTypeTask: BpmnTypeEnum = BpmnTypeEnum.Task;
+ const mockId: string = 'mockId';
+ const mockName: string = 'mockName';
+ const mockTaskTypeData: BpmnTaskType = 'data';
+
+ const mockBpmnExtensionElements: BpmnExtensionElementsEditor = {
+ values: [
+ {
+ taskType: mockTaskTypeData,
+ $type: 'altinn:taskType',
+ },
+ ],
+ };
+
+ const mockBpmnBusinessObject: BpmnBusinessObjectEditor = {
+ $type: mockTypeTask,
+ id: mockId,
+ name: mockName,
+ extensionElements: mockBpmnExtensionElements,
+ };
+
+ it('returns the BpmnDetails with correct values', () => {
+ const bpmnDetails: BpmnDetails =
+ getBpmnEditorDetailsFromBusinessObject(mockBpmnBusinessObject);
+ expect(bpmnDetails.id).toEqual(mockId);
+ expect(bpmnDetails.name).toEqual(mockName);
+ expect(bpmnDetails.type).toEqual(mockTypeTask);
+ expect(bpmnDetails.taskType).toEqual(mockTaskTypeData);
+ });
+
+ it('returns taskType with value "null" when etensionElements are not present', () => {
+ const bpmnBusinessObject: BpmnBusinessObjectEditor = {
+ ...mockBpmnBusinessObject,
+ extensionElements: undefined,
+ };
+ const bpmnDetails: BpmnDetails = getBpmnEditorDetailsFromBusinessObject(bpmnBusinessObject);
+ expect(bpmnDetails.id).toEqual(mockId);
+ expect(bpmnDetails.name).toEqual(mockName);
+ expect(bpmnDetails.type).toEqual(mockTypeTask);
+ expect(bpmnDetails.taskType).toBeNull();
+ });
+
+ it('returns taskType with value "null" when etensionElements.values are not present', () => {
+ const bpmnBusinessObject: BpmnBusinessObjectEditor = {
+ ...mockBpmnBusinessObject,
+ extensionElements: {
+ ...mockBpmnExtensionElements,
+ values: undefined,
+ },
+ };
+ const bpmnDetails: BpmnDetails = getBpmnEditorDetailsFromBusinessObject(bpmnBusinessObject);
+ expect(bpmnDetails.id).toEqual(mockId);
+ expect(bpmnDetails.name).toEqual(mockName);
+ expect(bpmnDetails.type).toEqual(mockTypeTask);
+ expect(bpmnDetails.taskType).toBeNull();
+ });
+ });
+});
diff --git a/frontend/packages/process-editor/src/utils/hookUtils/hookUtils.ts b/frontend/packages/process-editor/src/utils/hookUtils/hookUtils.ts
new file mode 100644
index 00000000000..e3703a14250
--- /dev/null
+++ b/frontend/packages/process-editor/src/utils/hookUtils/hookUtils.ts
@@ -0,0 +1,46 @@
+import type { BpmnDetails } from '../../types/BpmnDetails';
+import type { BpmnBusinessObjectViewer } from '../../types/BpmnBusinessObjectViewer';
+import type { BpmnBusinessObjectEditor } from '../../types/BpmnBusinessObjectEditor';
+
+/**
+ * Gets the bpmn details from the business object in viewer mode
+ * @param businessObject the business object in viewer mode
+ * @returns the bpmn details
+ */
+export const getBpmnViewerDetailsFromBusinessObject = (
+ businessObject: BpmnBusinessObjectViewer,
+): BpmnDetails => {
+ const bpmnAttrs = businessObject?.$attrs;
+ const bpmnTasktype = bpmnAttrs ? bpmnAttrs['altinn:tasktype'] : null;
+
+ const bpmnDetails: BpmnDetails = {
+ id: businessObject?.id,
+ name: businessObject?.name,
+ taskType: bpmnTasktype,
+ type: businessObject?.$type,
+ };
+ return bpmnDetails;
+};
+
+/**
+ * Gets the bpmn details from the business object in editor mode
+ * @param businessObject the business object in editor mode
+ * @returns the bpmn details
+ */
+export const getBpmnEditorDetailsFromBusinessObject = (
+ businessObject: BpmnBusinessObjectEditor,
+): BpmnDetails => {
+ const extensionElementsValues = businessObject?.extensionElements?.values;
+ const taskTypeFromV8 = extensionElementsValues ? extensionElementsValues[0].taskType : null;
+
+ const bpmnAttrs = businessObject.$attrs;
+ const taskTypeFromV7 = bpmnAttrs ? bpmnAttrs['altinn:tasktype'] : null;
+
+ const bpmnDetails: BpmnDetails = {
+ id: businessObject?.id,
+ name: businessObject?.name,
+ taskType: taskTypeFromV8 || taskTypeFromV7,
+ type: businessObject?.$type,
+ };
+ return bpmnDetails;
+};
diff --git a/frontend/packages/process-editor/src/utils/hookUtils/index.ts b/frontend/packages/process-editor/src/utils/hookUtils/index.ts
new file mode 100644
index 00000000000..4e0f1ccb8db
--- /dev/null
+++ b/frontend/packages/process-editor/src/utils/hookUtils/index.ts
@@ -0,0 +1,4 @@
+export {
+ getBpmnViewerDetailsFromBusinessObject,
+ getBpmnEditorDetailsFromBusinessObject,
+} from './hookUtils';
diff --git a/frontend/packages/ux-editor/src/containers/DesignView/PageAccordion/PageAccordion.test.tsx b/frontend/packages/ux-editor/src/containers/DesignView/PageAccordion/PageAccordion.test.tsx
index 2f0beea0766..de5b64389b5 100644
--- a/frontend/packages/ux-editor/src/containers/DesignView/PageAccordion/PageAccordion.test.tsx
+++ b/frontend/packages/ux-editor/src/containers/DesignView/PageAccordion/PageAccordion.test.tsx
@@ -77,7 +77,9 @@ describe('PageAccordion', () => {
jest.spyOn(window, 'confirm').mockImplementation(jest.fn(() => true));
await render();
- await screen.getByRole('button', { name: textMock('general.delete_item', { item: mockPageName1 }) }).click();
+ await screen
+ .getByRole('button', { name: textMock('general.delete_item', { item: mockPageName1 }) })
+ .click();
expect(mockDeleteFormLayout).toHaveBeenCalledTimes(1);
expect(mockDeleteFormLayout).toHaveBeenCalledWith(mockPageName1);
expect(mockSetSearchParams).toHaveBeenCalledWith({ layout: mockPageName2 });
@@ -86,7 +88,9 @@ describe('PageAccordion', () => {
it('Does not call deleteLayout when delete button is clicked, but deletion is not confirmed', async () => {
jest.spyOn(window, 'confirm').mockImplementation(jest.fn(() => false));
await render();
- await screen.getByRole('button', { name: textMock('general.delete_item', { item: mockPageName1 }) }).click();
+ await screen
+ .getByRole('button', { name: textMock('general.delete_item', { item: mockPageName1 }) })
+ .click();
expect(mockDeleteFormLayout).not.toHaveBeenCalled();
});
});
diff --git a/frontend/testing/cypress/cypress.config.js b/frontend/testing/cypress/cypress.config.js
index 8c78e33d88c..726a338ba37 100644
--- a/frontend/testing/cypress/cypress.config.js
+++ b/frontend/testing/cypress/cypress.config.js
@@ -4,6 +4,7 @@ const path = require('path');
module.exports = defineConfig({
chromeWebSecurity: false,
projectId: 'o7mikf',
+
e2e: {
experimentalRunAllSpecs: true,
supportFile: 'src/support/index.js',
@@ -15,6 +16,7 @@ module.exports = defineConfig({
);
},
},
+
video: false,
fixturesFolder: 'src/fixtures',
downloadsFolder: 'downloads',
@@ -27,11 +29,20 @@ module.exports = defineConfig({
requestTimeout: 10000,
defaultCommandTimeout: 8000,
reporter: 'junit',
+
reporterOptions: {
mochaFile: 'reports/result-[hash].xml',
},
+
retries: {
runMode: 1,
openMode: 0,
},
+
+ component: {
+ devServer: {
+ framework: 'react',
+ bundler: 'webpack',
+ },
+ },
});
diff --git a/frontend/testing/cypress/src/integration/studio/designer.js b/frontend/testing/cypress/src/integration/studio/designer.js
index 584e8f0320e..0dc2307cefc 100644
--- a/frontend/testing/cypress/src/integration/studio/designer.js
+++ b/frontend/testing/cypress/src/integration/studio/designer.js
@@ -45,7 +45,9 @@ context('Designer', () => {
.findByRole('treeitem', { name: texts['ux_editor.component_title.Input'] });
// Do not need to confirm alert.confirm dialog, since Cypress default to click "Ok".
- cy.findByTitle(texts['general.delete_item'].replace('{{item}}', 'Side1')).click({ force: true });
+ cy.findByTitle(texts['general.delete_item'].replace('{{item}}', 'Side1')).click({
+ force: true,
+ });
});
it('should add navigation buttons when adding more than one page', () => {
From f9eef7225a663651332fe8fd719fc2cf70fbcdcf Mon Sep 17 00:00:00 2001
From: Mirko Sekulic
Date: Mon, 18 Dec 2023 09:42:36 +0100
Subject: [PATCH 18/21] Cypress tests on PR pipeline (#11873)
* init cypress pipeline
* comment dns check
* print hosts file
* add curl to studio.localhost
* Try run cypress tests
* try install parameter
* increase pipeline timeout
* IGNORE_DOCKER_DNS_LOOKUP fix
* pipeline steps cleanup
* remove wait for startup script
---
.github/workflows/run-cypress-on-pr.yaml | 69 ++++++++++++++++++++++++
development/setup.js | 4 +-
2 files changed, 72 insertions(+), 1 deletion(-)
create mode 100644 .github/workflows/run-cypress-on-pr.yaml
diff --git a/.github/workflows/run-cypress-on-pr.yaml b/.github/workflows/run-cypress-on-pr.yaml
new file mode 100644
index 00000000000..af1048731c0
--- /dev/null
+++ b/.github/workflows/run-cypress-on-pr.yaml
@@ -0,0 +1,69 @@
+name: Cypress tests on pr
+on:
+ pull_request:
+ branches: [ master ]
+ types: [opened, synchronize, reopened]
+ paths:
+ - 'frontend/**'
+ - '!frontend/stats/**'
+ - 'backend/**'
+ - '.github/workflows/run-cypress-on-pr.yaml'
+ - 'docker-compose.yml'
+ - 'Dockerfile'
+ - 'gitea/**'
+ workflow_dispatch:
+
+jobs:
+ cypress-tests:
+ name: Build environment and run e2e test
+ timeout-minutes: 25
+ runs-on: ubuntu-latest
+
+ steps:
+ - uses: actions/checkout@v4
+ with:
+ fetch-depth: 0 # Shallow clones should be disabled for a better relevancy of analysis
+
+ - name: Generate .env file
+ run: |
+ echo CYPRESS_TEST_APP=autodeploy-v3 >> .env
+ echo DEVELOP_APP_DEVELOPMENT=0 >> .env
+ echo DEVELOP_RESOURCE_ADMIN=0 >> .env
+ echo DEVELOP_BACKEND=0 >> .env
+ echo DEVELOP_DASHBOARD=0 >> .env
+ echo DEVELOP_PREVIEW=0 >> .env
+ echo GITEA_ADMIN_PASS=g9wDIG@6gf >> .env
+ echo GITEA_ADMIN_USER=localg1iteaadmin >> .env
+ echo GITEA_CYPRESS_USER=cypress_testuser >> .env
+ echo GITEA_CYPRESS_PASS=g9wDIG@6gf >> .env
+ echo GITEA_ORG_USER=ttd >> .env
+ echo POSTGRES_PASSWORD=kyeDIG@eip >> .env
+ echo COMMIT= >> .env
+ echo IGNORE_DOCKER_DNS_LOOKUP=true >> .env
+
+ - name: Build all images
+ run: |
+ docker compose build --no-cache
+
+ - name: Install node
+ uses: actions/setup-node@v4
+ with:
+ cache: 'yarn'
+
+ - name: Run setup.js script
+ run: |
+ node ./development/setup.js
+
+ - name: Cypress run
+ uses: cypress-io/github-action@v5
+ with:
+ install: true
+ working-directory: frontend/testing/cypress
+ env: environment=local
+ spec: src/integration/studio/*.js
+ record: false
+ parallel: false
+
+ - name: Stop compose file
+ if: always()
+ run: docker-compose down
diff --git a/development/setup.js b/development/setup.js
index 22e7e61989c..6e35c7adcb5 100644
--- a/development/setup.js
+++ b/development/setup.js
@@ -105,7 +105,9 @@ const addReleaseAndDeployTestDataToDb = async () =>
const script = async () => {
const env = ensureDotEnv();
await dnsIsOk('studio.localhost');
- await dnsIsOk('host.docker.internal');
+ if (!(env.IGNORE_DOCKER_DNS_LOOKUP === 'true')){
+ await dnsIsOk('host.docker.internal');
+ }
await startingDockerCompose();
await waitFor('http://studio.localhost/repos/');
await createUser(env.GITEA_ADMIN_USER, env.GITEA_ADMIN_PASS, true);
From ff1d577c88b2bbdae83bad6a2ce65eb7f6ee805d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?David=20=C3=98vrelid?=
<46874830+framitdavid@users.noreply.github.com>
Date: Mon, 18 Dec 2023 10:00:21 +0100
Subject: [PATCH 19/21] fix(SchemaInspector): fixing renaming objects with
child nodes (#11870)
* fix(SchemaInspector): fixing renaming objects with child nodes
* removed empty string
* added one more test
* PR feedback
---
frontend/language/src/nb.json | 2 +
.../src/components/SchemaInspector.test.tsx | 4 +-
.../src/components/SchemaInspector.tsx | 87 ++++++-------------
.../ItemFieldsTab/ItemFieldsTab.tsx | 2 +-
.../ItemFieldsTable/ItemFieldsTable.tsx | 6 +-
.../ItemPropertiesTab.test.tsx | 13 ++-
.../SchemaInspector/ItemPropertiesTab.tsx | 11 ++-
7 files changed, 52 insertions(+), 73 deletions(-)
diff --git a/frontend/language/src/nb.json b/frontend/language/src/nb.json
index cda785540bb..c314649e951 100644
--- a/frontend/language/src/nb.json
+++ b/frontend/language/src/nb.json
@@ -34,10 +34,12 @@
"app_create_release_errors.check_status_on_build_error": "Oi! Vi opplever en teknisk feil og får derfor ikke oppdatert status på bygget. Vi forsøker å sjekke status på nytt...",
"app_create_release_errors.fetch_release_failed": "Huff da, vi opplever en teknisk feil som ikke gjør det mulig for deg å bygge versjoner eller deploye en applikasjon til miljøene akkurat nå. Prøv igjen senere. Dersom problemet vedvarer, kontakt <0 href=\"mailto:tjenesteeier@altinn.no\">Altinn servicedesk.",
"app_create_release_errors.technical_error_code": "Teknisk feilkode",
+ "app_data_modelling.fields_information": "Kun objekter kan tilordnes felter i datamodelleringsverktøyet. Tekst, heltall, desimaltall og ja/nei støtter ikke egne felter. For å løse dette, velg et element som er et objekt eller konverter gjeldende element til et objekt.",
"app_data_modelling.landing_dialog_create": "Lag en ny datamodell",
"app_data_modelling.landing_dialog_header": "Last opp eller lag en ny datamodell for å starte",
"app_data_modelling.landing_dialog_paragraph": "Du er nå kommet til datamodelleringsverktøyet. Her kan du laste opp en eksisterende datamodell eller lage en ny modell for bruk i din Altinn-app.",
"app_data_modelling.landing_dialog_upload": "Last opp datamodell",
+ "app_data_modelling.properties_information": "Ingen egenskaper vises for øyeblikket fordi ingen elementer er valgt. Velg et element for å konfigurere og vise egenskapene til det valgte elementet.",
"app_data_modelling.select_xsd": "Velg en XSD",
"app_data_modelling.upload_xsd": "Last opp",
"app_data_modelling.uploading_xsd": "Laster opp XSD...",
diff --git a/frontend/packages/schema-editor/src/components/SchemaInspector.test.tsx b/frontend/packages/schema-editor/src/components/SchemaInspector.test.tsx
index 2a21bc9bfea..1061eb04cbe 100644
--- a/frontend/packages/schema-editor/src/components/SchemaInspector.test.tsx
+++ b/frontend/packages/schema-editor/src/components/SchemaInspector.test.tsx
@@ -74,9 +74,7 @@ describe('SchemaInspector', () => {
renderSchemaInspector(mockUiSchema, getMockSchemaByPath('#/$defs/Kommentar2000Restriksjon'));
const tablist = screen.getByRole('tablist');
expect(tablist).toBeDefined();
- const tabpanel = screen.getByRole('tabpanel');
- expect(tabpanel).toBeDefined();
- expect(screen.getAllByRole('tab')).toHaveLength(1);
+ expect(screen.getAllByRole('tab')).toHaveLength(2);
const textboxes = screen.getAllByRole('textbox');
for (const textbox of textboxes) {
diff --git a/frontend/packages/schema-editor/src/components/SchemaInspector.tsx b/frontend/packages/schema-editor/src/components/SchemaInspector.tsx
index 8b5d9f22501..d70a9f0102a 100644
--- a/frontend/packages/schema-editor/src/components/SchemaInspector.tsx
+++ b/frontend/packages/schema-editor/src/components/SchemaInspector.tsx
@@ -1,7 +1,6 @@
-import React, { useEffect, useState } from 'react';
-import { LegacyTabs } from '@digdir/design-system-react';
-import type { LegacyTabItem } from '@digdir/design-system-react';
-import { FieldType, isField, isObject, ObjectKind } from '@altinn/schema-model';
+import React from 'react';
+import { Alert, Tabs } from '@digdir/design-system-react';
+import { isObject } from '@altinn/schema-model';
import { ItemPropertiesTab } from './SchemaInspector/ItemPropertiesTab';
import { ItemFieldsTab } from './SchemaInspector/ItemFieldsTab';
import classes from './SchemaInspector.module.css';
@@ -13,71 +12,35 @@ import { useSchemaAndReduxSelector } from '../hooks/useSchemaAndReduxSelector';
export const SchemaInspector = () => {
const { t } = useTranslation();
- enum TabValue {
- Properties = 'properties',
- Fields = 'fields',
- }
- const [tabsFor, setTabsFor] = useState(undefined);
- const [activeTab, setActiveTab] = useState(TabValue.Properties);
- const [tabItems, setTabItems] = useState([
- {
- name: t('schema_editor.properties'),
- content: null,
- value: TabValue.Properties,
- },
- ]);
-
const selectedItem = useSchemaAndReduxSelector(selectedItemSelector);
- useEffect(() => {
- if (!selectedItem) return;
- if (tabsFor !== selectedItem.pointer) setActiveTab(TabValue.Properties);
- const tabs = [
- {
- name: t('schema_editor.properties'),
- content:
- {isEditAllowed && (
-
);
};
diff --git a/frontend/packages/process-editor/src/components/Canvas/CanvasActionMenu/CanvasActionMenu.module.css b/frontend/packages/process-editor/src/components/Canvas/CanvasActionMenu/CanvasActionMenu.module.css
index 69148fd21a3..aefbf95f825 100644
--- a/frontend/packages/process-editor/src/components/Canvas/CanvasActionMenu/CanvasActionMenu.module.css
+++ b/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;
}
diff --git a/frontend/packages/process-editor/src/components/Canvas/CanvasActionMenu/CanvasActionMenu.test.tsx b/frontend/packages/process-editor/src/components/Canvas/CanvasActionMenu/CanvasActionMenu.test.tsx
index 32cf04c8824..d06e252b4d4 100644
--- a/frontend/packages/process-editor/src/components/Canvas/CanvasActionMenu/CanvasActionMenu.test.tsx
+++ b/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 = ``;
+
+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({isEditorView ?
+ {isEditAllowed ?
{!isEditAllowed &&
+ {isEditAllowed && numberOfUnsavedChanges > 0 && (
+
+ {t('process_editor.too_old_version_title')}
+
+
+ {t('process_editor.too_old_version_helptext_content', { version: appLibVersion })}
+
+
+
+ Trenger du hjelp til å oppgradere, kan du{' '}
+ ta kontakte med oss.
+
+
+
+
+ );
+};
diff --git a/frontend/packages/process-editor/src/components/Canvas/VersionHelpText/index.ts b/frontend/packages/process-editor/src/components/Canvas/VersionHelpText/index.ts
new file mode 100644
index 00000000000..10fc68032b2
--- /dev/null
+++ b/frontend/packages/process-editor/src/components/Canvas/VersionHelpText/index.ts
@@ -0,0 +1 @@
+export { VersionHelpText } from './VersionHelpText';
diff --git a/frontend/packages/process-editor/src/components/ConfigPanel/ConfigContent/ConfigContent.module.css b/frontend/packages/process-editor/src/components/ConfigPanel/ConfigContent/ConfigContent.module.css
new file mode 100644
index 00000000000..c9098953650
--- /dev/null
+++ b/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;
+}
diff --git a/frontend/packages/process-editor/src/components/ConfigPanel/ConfigContent/ConfigContent.test.tsx b/frontend/packages/process-editor/src/components/ConfigPanel/ConfigContent/ConfigContent.test.tsx
new file mode 100644
index 00000000000..cc5a137c893
--- /dev/null
+++ b/frontend/packages/process-editor/src/components/ConfigPanel/ConfigContent/ConfigContent.test.tsx
@@ -0,0 +1,99 @@
+import React from 'react';
+import { ConfigContent } from './ConfigContent';
+import { render as rtlRender, screen } from '@testing-library/react';
+import { textMock } from '../../../../../../testing/mocks/i18nMock';
+import { BpmnContext, BpmnContextProps } from '../../../contexts/BpmnContext';
+import { BpmnDetails } from '../../../types/BpmnDetails';
+import { BpmnTypeEnum } from '../../../enum/BpmnTypeEnum';
+
+const mockBPMNXML: string = ``;
+const mockAppLibVersion8: string = '8.0.3';
+
+const mockId: string = 'testId';
+const mockName: string = 'testName';
+
+const mockBpmnDetails: BpmnDetails = {
+ id: mockId,
+ name: mockName,
+ taskType: 'data',
+ type: BpmnTypeEnum.Task,
+};
+
+const mockBpmnContextValue: BpmnContextProps = {
+ bpmnXml: mockBPMNXML,
+ appLibVersion: mockAppLibVersion8,
+ numberOfUnsavedChanges: 0,
+ setNumberOfUnsavedChanges: jest.fn(),
+ getUpdatedXml: jest.fn(),
+ isEditAllowed: true,
+ bpmnDetails: mockBpmnDetails,
+ setBpmnDetails: jest.fn(),
+};
+
+describe('ConfigContent', () => {
+ afterEach(jest.clearAllMocks);
+
+ it('should display the details about the selected task when a "data" task is selected', () => {
+ render();
+
+ expect(
+ screen.getByRole('heading', {
+ name: textMock('process_editor.configuration_panel_data_task'),
+ level: 2,
+ }),
+ ).toBeInTheDocument();
+
+ expect(screen.getByText(mockBpmnDetails.id)).toBeInTheDocument();
+ expect(screen.getByText(mockBpmnDetails.name)).toBeInTheDocument();
+ });
+
+ it('should display the details about the selected task when a "confirmation" task is selected', () => {
+ render({ bpmnDetails: { ...mockBpmnDetails, taskType: 'confirmation' } });
+
+ expect(
+ screen.getByRole('heading', {
+ name: textMock('process_editor.configuration_panel_confirmation_task'),
+ level: 2,
+ }),
+ ).toBeInTheDocument();
+
+ expect(screen.getByText(mockBpmnDetails.id)).toBeInTheDocument();
+ expect(screen.getByText(mockBpmnDetails.name)).toBeInTheDocument();
+ });
+
+ it('should display the details about the selected task when a "feedback" task is selected', () => {
+ render({ bpmnDetails: { ...mockBpmnDetails, taskType: 'feedback' } });
+
+ expect(
+ screen.getByRole('heading', {
+ name: textMock('process_editor.configuration_panel_feedback_task'),
+ level: 2,
+ }),
+ ).toBeInTheDocument();
+
+ expect(screen.getByText(mockBpmnDetails.id)).toBeInTheDocument();
+ expect(screen.getByText(mockBpmnDetails.name)).toBeInTheDocument();
+ });
+
+ it('should display the details about the selected task when a "signing" task is selected', () => {
+ render({ bpmnDetails: { ...mockBpmnDetails, taskType: 'signing' } });
+
+ expect(
+ screen.getByRole('heading', {
+ name: textMock('process_editor.configuration_panel_signing_task'),
+ level: 2,
+ }),
+ ).toBeInTheDocument();
+
+ expect(screen.getByText(mockBpmnDetails.id)).toBeInTheDocument();
+ expect(screen.getByText(mockBpmnDetails.name)).toBeInTheDocument();
+ });
+});
+
+const render = (rootContextProps: Partial
+
+ {configHeaderHelpText}
+
+
+
+
+ {configTitle}
+
+
+
+
+ {title}
+
+ {text}
+
+);
diff --git a/frontend/packages/process-editor/src/components/ConfigPanel/ConfigContent/ConfigDetailsRow/index.ts b/frontend/packages/process-editor/src/components/ConfigPanel/ConfigContent/ConfigDetailsRow/index.ts
new file mode 100644
index 00000000000..a6f5006aac9
--- /dev/null
+++ b/frontend/packages/process-editor/src/components/ConfigPanel/ConfigContent/ConfigDetailsRow/index.ts
@@ -0,0 +1 @@
+export { ConfigDetailsRow } from './ConfigDetailsRow';
diff --git a/frontend/packages/process-editor/src/components/ConfigPanel/ConfigContent/ConfigIcon/ConfigIcon.module.css b/frontend/packages/process-editor/src/components/ConfigPanel/ConfigContent/ConfigIcon/ConfigIcon.module.css
new file mode 100644
index 00000000000..fc2e696b413
--- /dev/null
+++ b/frontend/packages/process-editor/src/components/ConfigPanel/ConfigContent/ConfigIcon/ConfigIcon.module.css
@@ -0,0 +1,3 @@
+.icon {
+ font-size: 2rem;
+}
diff --git a/frontend/packages/process-editor/src/components/ConfigPanel/ConfigContent/ConfigIcon/ConfigIcon.tsx b/frontend/packages/process-editor/src/components/ConfigPanel/ConfigContent/ConfigIcon/ConfigIcon.tsx
new file mode 100644
index 00000000000..ce18e6f2346
--- /dev/null
+++ b/frontend/packages/process-editor/src/components/ConfigPanel/ConfigContent/ConfigIcon/ConfigIcon.tsx
@@ -0,0 +1,21 @@
+import React from 'react';
+import classes from './ConfigIcon.module.css';
+import { BpmnTaskType } from '../../../../types/BpmnTaskType';
+import { ConfirmationTask, DataTask, FeedbackTask, SignTask } from '@studio/icons';
+
+export type ConfigIconProps = {
+ taskType: BpmnTaskType;
+};
+
+export const ConfigIcon = ({ taskType }: ConfigIconProps): JSX.Element => {
+ switch (taskType) {
+ case 'data':
+ return {children}
+
- {!isEditAllowed &&
- );
+ const { bpmnDetails } = useBpmnContext();
+
+ const displayContent = () => {
+ if (bpmnDetails === null || bpmnDetails.type === BpmnTypeEnum.Process) {
+ return (
+
-
- {t('process_editor.configuration_panel_heading')}
-
-
-
- {t('process_editor.configuration_panel.under_development_title')}
-
-
- {t('process_editor.configuration_panel.under_development_body')}
-
-
-
- {displayContent()}
;
};
diff --git a/frontend/packages/process-editor/src/components/ConfigPanel/VersionAlert/VersionAlert.module.css b/frontend/packages/process-editor/src/components/ConfigPanel/VersionAlert/VersionAlert.module.css
deleted file mode 100644
index eb6db9c78b9..00000000000
--- a/frontend/packages/process-editor/src/components/ConfigPanel/VersionAlert/VersionAlert.module.css
+++ /dev/null
@@ -1,8 +0,0 @@
-.alert {
- height: max-content;
-}
-
-.alertText {
- white-space: pre-line;
- word-wrap: break-word;
-}
diff --git a/frontend/packages/process-editor/src/components/ConfigPanel/VersionAlert/VersionAlert.tsx b/frontend/packages/process-editor/src/components/ConfigPanel/VersionAlert/VersionAlert.tsx
deleted file mode 100644
index ca53ea9cb56..00000000000
--- a/frontend/packages/process-editor/src/components/ConfigPanel/VersionAlert/VersionAlert.tsx
+++ /dev/null
@@ -1,42 +0,0 @@
-import { Alert, Heading, Link, Paragraph } from '@digdir/design-system-react';
-import classes from './VersionAlert.module.css';
-import React, { ReactNode } from 'react';
-import { useTranslation, Trans } from 'react-i18next';
-import { useBpmnContext } from '../../../contexts/BpmnContext';
-
-/**
- * @component
- * Displays the alert informing the user that their version is too old
- *
- * @returns {ReactNode} - The rendered component
- */
-export const VersionAlert = (): ReactNode => {
- const { t } = useTranslation();
- const { appLibVersion } = useBpmnContext();
-
- return (
-
-
+
+ {t('schema_editor.properties')}
+ {t('schema_editor.fields')}
+
+
+
+ {shouldDisplayFieldsTab ? (
+
+
+ ) : (
+ {t('app_data_modelling.fields_information')}
+ )}
+
);
};
diff --git a/frontend/packages/schema-editor/src/components/SchemaInspector/ItemFieldsTab/ItemFieldsTab.tsx b/frontend/packages/schema-editor/src/components/SchemaInspector/ItemFieldsTab/ItemFieldsTab.tsx
index 5fd888aa136..0fe71a71ff4 100644
--- a/frontend/packages/schema-editor/src/components/SchemaInspector/ItemFieldsTab/ItemFieldsTab.tsx
+++ b/frontend/packages/schema-editor/src/components/SchemaInspector/ItemFieldsTab/ItemFieldsTab.tsx
@@ -1,6 +1,6 @@
import type { BaseSyntheticEvent } from 'react';
import React, { useEffect } from 'react';
-import type { FieldNode } from '@altinn/schema-model';
+import { FieldNode } from '@altinn/schema-model';
import { FieldType, isField, isReference, ObjectKind } from '@altinn/schema-model';
import classes from './ItemFieldsTab.module.css';
import { usePrevious } from 'app-shared/hooks/usePrevious';
diff --git a/frontend/packages/schema-editor/src/components/SchemaInspector/ItemFieldsTab/ItemFieldsTable/ItemFieldsTable.tsx b/frontend/packages/schema-editor/src/components/SchemaInspector/ItemFieldsTab/ItemFieldsTable/ItemFieldsTable.tsx
index 772f47aacba..9dafef44037 100644
--- a/frontend/packages/schema-editor/src/components/SchemaInspector/ItemFieldsTab/ItemFieldsTable/ItemFieldsTable.tsx
+++ b/frontend/packages/schema-editor/src/components/SchemaInspector/ItemFieldsTab/ItemFieldsTable/ItemFieldsTable.tsx
@@ -16,10 +16,7 @@ export type ItemFieldsTableProps = {
* @component
* Displays the Item Fields as a table
*/
-export const ItemFieldsTable = ({
- readonly,
- selectedItem,
-}: ItemFieldsTableProps): ReactNode => {
+export const ItemFieldsTable = ({ readonly, selectedItem }: ItemFieldsTableProps): ReactNode => {
const { t } = useTranslation();
const { schemaModel } = useSchemaEditorAppContext();
const addProperty = useAddProperty();
@@ -28,6 +25,7 @@ export const ItemFieldsTable = ({
addProperty(ObjectKind.Field, FieldType.String, selectedItem.pointer);
const fieldNodes = schemaModel.getChildNodes(selectedItem.pointer);
+
const displayTableRows = fieldNodes.map((fieldNode, i) => (
{
validateTestUiSchema(uiSchemaNodes);
renderWithProviders({
appContextProps: { schemaModel: SchemaModel.fromArray(uiSchemaNodes) },
- })();
+ })({t('app_data_modelling.properties_information')} ;
} else {
return
Date: Mon, 18 Dec 2023 12:59:58 +0100
Subject: [PATCH 21/21] Remove cypress from verification step in pr template
(#11882)
---
.github/pull_request_template.md | 1 -
1 file changed, 1 deletion(-)
diff --git a/.github/pull_request_template.md b/.github/pull_request_template.md
index 4132ec96ea8..cd6b79b44a8 100644
--- a/.github/pull_request_template.md
+++ b/.github/pull_request_template.md
@@ -10,7 +10,6 @@
- [ ] **Your** code builds clean without any errors or warnings
- [ ] Manual testing done (required)
- [ ] Relevant automated test added (if you find this hard, leave it and we'll help out)
-- [ ] Cypress tests run green locally (https://github.com/Altinn/altinn-studio/tree/master/frontend/testing/cypress#run-altinn-studio-tests)
## Documentation
- [ ] User documentation is updated with a separate linked PR in [altinn-studio-docs.](https://github.com/Altinn/altinn-studio-docs) (if applicable)
+
);
}
+ const shouldDisplayFieldsTab = 'fieldType' in selectedItem && isObject(selectedItem);
+
return (
- {t('schema_editor.no_item_selected')}
+
-
+ - {t('schema_editor.no_item_selected')} -
-