Skip to content

Commit

Permalink
Move layoutset stuff to accordion in config panel
Browse files Browse the repository at this point in the history
  • Loading branch information
standeren committed Sep 9, 2024
1 parent e3dc397 commit 5285d29
Show file tree
Hide file tree
Showing 13 changed files with 132 additions and 33 deletions.
3 changes: 2 additions & 1 deletion frontend/language/src/nb.json
Original file line number Diff line number Diff line change
Expand Up @@ -635,6 +635,7 @@
"process_editor.configuration_panel_data_model_selection_description": "Velg en datamodell å knytte til prosessteget",
"process_editor.configuration_panel_data_task": "Oppgave: Utfylling",
"process_editor.configuration_panel_data_types_to_sign_required": "Du må velge minst en datatype",
"process_editor.configuration_panel_design_title": "Utforming",
"process_editor.configuration_panel_element_not_supported_message": "Foreløpig kan du kun se detaljene på oppgaver, ikke redigere dem. Velg en oppgave for å se detaljer.",
"process_editor.configuration_panel_element_not_supported_title": "Elementet du har valgt, støttes ikke",
"process_editor.configuration_panel_end_event": "Slutthendelse",
Expand All @@ -647,7 +648,7 @@
"process_editor.configuration_panel_header_help_text_title": "Informasjon om valgt oppgave",
"process_editor.configuration_panel_id_label": "ID:",
"process_editor.configuration_panel_layout_set_id_not_unique": "Navnet på sidegruppen må være unikt",
"process_editor.configuration_panel_layout_set_name": "Utforming: ",
"process_editor.configuration_panel_layout_set_name": "Utforming av {{taskId}}: ",
"process_editor.configuration_panel_layout_set_name_label": "Navn på utforming",
"process_editor.configuration_panel_missing_task": "Oppgave",
"process_editor.configuration_panel_name_label": "Navn: ",
Expand Down
Original file line number Diff line number Diff line change
@@ -1,6 +1,8 @@
.container {
display: flex;
gap: var(--fds-spacing-2);
padding: var(--fds-spacing-3);
box-sizing: border-box;
}

.prefixIcon {
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@
justify-content: flex-start;
align-items: center;
border-radius: 0;
width: 100%;
}

.viewModeIconsContainer {
Expand Down
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
.accordion,
.configContent {
display: flex;
flex-direction: column;
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -166,6 +166,14 @@ describe('ConfigContent', () => {
expect(editPolicyButton).toBeInTheDocument();
});

it('should render the Design accordion when a task has a connected layoutset', () => {
renderConfigContent();
const designAccordion = screen.getByRole('button', {
name: textMock('process_editor.configuration_panel_design_title'),
});
expect(designAccordion).toBeInTheDocument();
});

describe('Unique signature', () => {
const element = getMockBpmnElementForTask('signing');
element.businessObject.extensionElements.values[0].signatureConfig.uniqueFromSignaturesInDataTypes =
Expand Down Expand Up @@ -215,26 +223,16 @@ describe('ConfigContent', () => {
).toBeInTheDocument();
});

it('should show recommended action when selected task is in recommended action queue', async () => {
it('should show recommended action when task is data and is in recommended action queue', async () => {
const shouldDisplayAction = jest.fn().mockReturnValue(true);
(useStudioRecommendedNextActionContext as jest.Mock).mockReturnValue({
removeAction: jest.fn(),
addAction: jest.fn(),
shouldDisplayAction,
});
renderConfigContent(
{},
{
bpmnDetails: {
...mockBpmnDetails,
id: 'task_2',
taskType: 'signing',
element,
},
},
);
renderConfigContent();

expect(shouldDisplayAction).toHaveBeenCalledWith('task_2');
expect(shouldDisplayAction).toHaveBeenCalledWith(mockBpmnDetails.id);

expect(
screen.getByRole('textbox', {
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -53,16 +53,6 @@ export const ConfigContent = (): React.ReactElement => {
className={classes.displayTile}
showPadlock={false}
/>
{taskHasConnectedLayoutSet && (
<>
<EditLayoutSetName existingLayoutSetName={layoutSet.id} />
<EditDataTypes
connectedTaskId={layoutSet.tasks[0]}
dataModelIds={availableDataModelIds}
existingDataTypeForTask={existingDataTypeForTask}
/>
</>
)}
{isSigningTask && (
<>
<EditDataTypesToSign key={`${bpmnDetails.id}-dataTypes`} />
Expand All @@ -72,6 +62,21 @@ export const ConfigContent = (): React.ReactElement => {
</>
)}
<Accordion color='neutral'>
{taskHasConnectedLayoutSet && (
<Accordion.Item>
<Accordion.Header>
{t('process_editor.configuration_panel_design_title')}
</Accordion.Header>
<Accordion.Content className={classes.accordion}>
<EditLayoutSetName existingLayoutSetName={layoutSet.id} />
<EditDataTypes
connectedTaskId={layoutSet.tasks[0]}
dataModelIds={availableDataModelIds}
existingDataTypeForTask={existingDataTypeForTask}
/>
</Accordion.Content>
</Accordion.Item>
)}
<Accordion.Item>
<Accordion.Header>
{t('process_editor.configuration_panel_actions_title')}
Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,68 @@
import { render, screen } from '@testing-library/react';
import React from 'react';
import { EditLayoutSetName } from './EditLayoutSetName';
import { textMock } from '@studio/testing/mocks/i18nMock';
import { BpmnContext } from '../../../../contexts/BpmnContext';
import {
mockBpmnApiContextValue,
mockBpmnContextValue,
} from '../../../../../test/mocks/bpmnContextMock';
import { BpmnApiContext, type BpmnApiContextProps } from '../../../../contexts/BpmnApiContext';
import userEvent from '@testing-library/user-event';

const existingLayoutSetNameMock = 'existingLayoutSetName';

describe('EditLayoutSetName', () => {
it('should render the layoutSetName button', () => {
renderEditLayoutSetName();
const editLayoutSetName = screen.getByRole('button', {
name: textMock('process_editor.configuration_panel_layout_set_name_label'),
});
expect(editLayoutSetName).toBeInTheDocument();
});
it('should render the name of the layoutSetName textfield using the connected taskId', () => {
renderEditLayoutSetName();
const layoutSetNameViewMode = screen.getByLabelText(
textMock('process_editor.configuration_panel_layout_set_name_label'),
);
expect(layoutSetNameViewMode).toHaveTextContent(
textMock('process_editor.configuration_panel_layout_set_name', {
taskId: mockBpmnContextValue.bpmnDetails.id,
}) + existingLayoutSetNameMock,
);
});
it('should call mutateLayoutSet when changing name', async () => {
const user = userEvent.setup();
const newLayoutSetName = 'newLayoutSetName';
const mutateLayoutSetIdMock = jest.fn();
renderEditLayoutSetName({ mutateLayoutSetId: mutateLayoutSetIdMock });
const editLayoutSetName = screen.getByRole('button', {
name: textMock('process_editor.configuration_panel_layout_set_name_label'),
});
await user.click(editLayoutSetName);
const inputNewLayoutSetName = screen.getByRole('textbox', {
name: textMock('process_editor.configuration_panel_layout_set_name_label'),
});
await user.clear(inputNewLayoutSetName);
await user.type(inputNewLayoutSetName, newLayoutSetName);
await user.tab();
expect(mutateLayoutSetIdMock).toHaveBeenCalledTimes(1);
expect(mutateLayoutSetIdMock).toHaveBeenCalledWith({
layoutSetIdToUpdate: existingLayoutSetNameMock,
newLayoutSetId: newLayoutSetName,
});
});
});

const renderEditLayoutSetName = (
bpmnApiContextValue: Partial<BpmnApiContextProps> = {},
existingLayoutSetName = existingLayoutSetNameMock,
) => {
render(
<BpmnApiContext.Provider value={{ ...mockBpmnApiContextValue, ...bpmnApiContextValue }}>
<BpmnContext.Provider value={{ ...mockBpmnContextValue }}>
<EditLayoutSetName existingLayoutSetName={existingLayoutSetName} />
</BpmnContext.Provider>
</BpmnApiContext.Provider>,
);
};
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@ import { KeyVerticalIcon } from '@studio/icons';
import { useBpmnApiContext } from '../../../../contexts/BpmnApiContext';
import { Paragraph } from '@digdir/designsystemet-react';
import { useValidateLayoutSetName } from 'app-shared/hooks/useValidateLayoutSetName';
import { useBpmnContext } from '../../../../contexts/BpmnContext';

interface EditLayoutSetNameProps {
existingLayoutSetName: string;
Expand All @@ -13,6 +14,7 @@ export const EditLayoutSetName = ({
existingLayoutSetName,
}: EditLayoutSetNameProps): React.ReactElement => {
const { t } = useTranslation();
const { bpmnDetails } = useBpmnContext();
const { layoutSets, mutateLayoutSetId } = useBpmnApiContext();
const { validateLayoutSetName } = useValidateLayoutSetName();

Expand All @@ -37,7 +39,9 @@ export const EditLayoutSetName = ({
viewProps={{
children: (
<Paragraph size='small'>
<strong>{t('process_editor.configuration_panel_layout_set_name')}</strong>
<strong>
{t('process_editor.configuration_panel_layout_set_name', { taskId: bpmnDetails.id })}
</strong>
{existingLayoutSetName}
</Paragraph>
),
Expand Down

This file was deleted.

Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,6 @@ import { KeyVerticalIcon } from '@studio/icons';
import { useBpmnContext } from '../../../../contexts/BpmnContext';
import { useBpmnConfigPanelFormContext } from '../../../../contexts/BpmnConfigPanelContext';
import type Modeling from 'bpmn-js/lib/features/modeling/Modeling';
import classes from './EditTaskId.module.css';
import type { MetadataForm } from 'app-shared/types/BpmnMetadataForm';
import { useValidateBpmnTaskId } from '../../../../hooks/useValidateBpmnId';

Expand Down Expand Up @@ -47,7 +46,6 @@ export const EditTaskId = (): React.ReactElement => {
<StudioToggleableTextfield
customValidation={validateBpmnTaskId}
inputProps={{
className: classes.textfield,
icon: <KeyVerticalIcon />,
label: t('process_editor.configuration_panel_change_task_id'),
value: bpmnDetails.id,
Expand Down
4 changes: 3 additions & 1 deletion frontend/packages/process-editor/src/hooks/useBpmnEditor.ts
Original file line number Diff line number Diff line change
Expand Up @@ -35,7 +35,9 @@ export const useBpmnEditor = (): UseBpmnViewerResult => {
taskEvent,
taskType: bpmnDetails.taskType,
});
addAction(bpmnDetails.id);
// Should only be called if taskType is data or payment
if (bpmnDetails.taskType === 'data' || bpmnDetails.taskType === 'payment')
addAction(bpmnDetails.id);
updateBpmnDetailsByTaskEvent(taskEvent);
};

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,7 @@ export const mockLayoutSets: LayoutSets = {
{
id: 'testId',
dataType: 'dataTypeId1',
tasks: ['testId'],
tasks: [mockBpmnDetails.id],
},
{
id: 'layoutSetId2',
Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,23 @@
import { textMock } from '@studio/testing/mocks/i18nMock';
import { useValidateLayoutSetName } from 'app-shared/hooks/useValidateLayoutSetName';

describe('useValidateLayoutSetName', () => {
it('should return invalid layoutSetName errorText when name is invalid', () => {
const existingLayoutSetName = 'existingLayoutSetName';
const { validateLayoutSetName } = useValidateLayoutSetName();
const layoutSetNameValidation = validateLayoutSetName(existingLayoutSetName, {
sets: [{ id: existingLayoutSetName, tasks: [] }],
});
expect(layoutSetNameValidation).toBe(
textMock('process_editor.configuration_panel_layout_set_id_not_unique'),
);
});
it('should return empty string when name is valid', () => {
const uniqueLayoutSetName = 'uniqueLayoutSetName';
const { validateLayoutSetName } = useValidateLayoutSetName();
const layoutSetNameValidation = validateLayoutSetName(uniqueLayoutSetName, {
sets: [{ id: 'existingLayoutSetName', tasks: [] }],
});
expect(layoutSetNameValidation).toBe('');
});
});

0 comments on commit 5285d29

Please sign in to comment.