Merge branch 'main' into make-usebpmneditor-return-callback-ref

Author: TomasEng

frontend/language/src/nb.json

@@ -751,7 +751,7 @@
   "process_editor.configuration_panel_set_unique_from_signatures_in_data_types": "Samme person kan ikke signere både denne oppgaven og:",
   "process_editor.configuration_panel_set_unique_from_signatures_in_data_types_link": "Bruk unik signatur på denne oppgaven",
   "process_editor.configuration_panel_signing_task": "Oppgave: Signering",
-  "process_editor.configuration_view_panel_id_label": "ID: {{id}}",
+  "process_editor.configuration_view_panel_id_label": "ID:",
   "process_editor.configuration_view_panel_name_label": "Navn: ",
   "process_editor.configuration_view_panel_no_task": "Du har ikke valgt noen oppgave",
   "process_editor.configuration_view_panel_please_choose_task": "Velg en oppgave for å se detaljer om valgt oppgave.",
@@ -1836,7 +1836,11 @@
   "ux_editor.properties_panel.subform_table_columns.cell_content_query_label": "Query",
   "ux_editor.properties_panel.subform_table_columns.choose_component": "Velg komponenten fra underskjemaet som skal vises her",
   "ux_editor.properties_panel.subform_table_columns.choose_component_description": "Listen viser bare de komponentene som har minst én datamodellbinding og en ledetekst",
+  "ux_editor.properties_panel.subform_table_columns.column_cell_content": "Celleinnhold (query):",
   "ux_editor.properties_panel.subform_table_columns.column_header": "Kolonne {{columnNumber}}",
+  "ux_editor.properties_panel.subform_table_columns.column_title_edit": "Kolonnetittel",
+  "ux_editor.properties_panel.subform_table_columns.column_title_error": "Kolonnetittel er påkrevd",
+  "ux_editor.properties_panel.subform_table_columns.column_title_unedit": "Kolonnetittel:",
   "ux_editor.properties_panel.subform_table_columns.delete_column": "Slett kolonne {{columnNumber}}",
   "ux_editor.properties_panel.subform_table_columns.header_content_label": "Header Content",
   "ux_editor.properties_panel.subform_table_columns.heading": "Valg for tabell",

frontend/libs/studio-components/src/components/StudioDisplayTile/StudioDisplayTile.module.css

@@ -1,22 +1,25 @@
 .container {
-  display: flex;
+  display: grid;
+  grid-template-columns: 1fr auto;
   align-items: center;
-  justify-content: space-between;
-  flex: 1;
   gap: var(--fds-spacing-2);
-  padding: var(--fds-spacing-2) var(--fds-spacing-3);
 }
 
-.innerContainer {
-  display: flex;
-  gap: var(--fds-spacing-1);
+.prefixIcon {
+  grid-template-columns: auto 1fr;
+}
+
+.container:has(:nth-child(3)) {
+  grid-template-columns: auto 1fr auto;
 }
 
 .label {
   font-weight: 500;
 }
 
-.iconLabelContainer {
-  display: flex;
-  align-items: center;
+.label,
+.ellipsis {
+  text-overflow: ellipsis;
+  overflow: hidden;
+  white-space: nowrap;
 }

frontend/libs/studio-components/src/components/StudioDisplayTile/StudioDisplayTile.test.tsx

@@ -4,19 +4,41 @@ import { StudioDisplayTile, type StudioDisplayTileProps } from './StudioDisplayT
 
 const padlockIconTestId: string = 'padlockIconTestId';
 
+const label = 'label';
+const value = 'value';
 const defaultProps: StudioDisplayTileProps = {
-  label: 'Label',
-  value: 'value',
+  label,
+  value,
 };
 
 describe('StudioDisplayTile', () => {
-  it('should show the padlock icon when showPadlock is true', () => {
-    render(<StudioDisplayTile {...defaultProps} showPadlock />);
+  it('should render displayTile', () => {
+    render(<StudioDisplayTile {...defaultProps} />);
+    expect(screen.getByLabelText(label)).toBeInTheDocument();
+  });
+
+  it('should render displayTile with value', () => {
+    render(<StudioDisplayTile {...defaultProps} />);
+    expect(screen.getByText(value)).toBeInTheDocument();
+  });
+
+  it('should show the padlock icon by default', () => {
+    render(<StudioDisplayTile {...defaultProps} />);
     expect(screen.getByTestId(padlockIconTestId)).toBeInTheDocument();
   });
 
   it('should hide the padlock icon when showPadlock is false', () => {
     render(<StudioDisplayTile {...defaultProps} showPadlock={false} />);
     expect(screen.queryByTestId(padlockIconTestId)).not.toBeInTheDocument();
   });
+
+  it('should not assign prefix icon className by default', () => {
+    render(<StudioDisplayTile {...defaultProps} />);
+    expect(screen.getByLabelText(label)).not.toHaveClass('prefixIcon');
+  });
+
+  it('should assign prefix icon className when prefix icon is set', () => {
+    render(<StudioDisplayTile {...defaultProps} icon={<svg />} />);
+    expect(screen.getByLabelText(label)).toHaveClass('prefixIcon');
+  });
 });

frontend/libs/studio-components/src/components/StudioDisplayTile/StudioDisplayTile.tsx

@@ -1,7 +1,7 @@
 import React, { forwardRef, type HTMLAttributes } from 'react';
 import { PadlockLockedFillIcon } from '@studio/icons';
 import cn from 'classnames';
-import { Paragraph } from '@digdir/designsystemet-react';
+import { Label, Paragraph } from '@digdir/designsystemet-react';
 import classes from './StudioDisplayTile.module.css';
 
 export type StudioDisplayTileProps = {
@@ -23,18 +23,19 @@ const StudioDisplayTile = forwardRef<HTMLDivElement, StudioDisplayTileProps>(
     }: StudioDisplayTileProps,
     ref,
   ): React.ReactElement => {
-    const className = cn(givenClassName, classes.container);
+    const hasPrefixIcon = !!icon;
+    const className = cn(givenClassName, classes.container, hasPrefixIcon && classes.prefixIcon);
 
     return (
-      <div {...rest} className={className} ref={ref}>
-        <div className={classes.innerContainer}>
-          <div className={classes.iconLabelContainer}>
-            {icon ?? null}
-            <Paragraph size='small' className={classes.label}>
-              {label}
-            </Paragraph>
-          </div>
-          <Paragraph size='small'>{value}</Paragraph>
+      <div {...rest} aria-label={label} className={className} ref={ref}>
+        {icon}
+        <div className={classes.ellipsis}>
+          <Label size='small' className={classes.label}>
+            {label}
+          </Label>
+          <Paragraph size='small' className={classes.ellipsis}>
+            {value}
+          </Paragraph>
         </div>
         {showPadlock && <PadlockLockedFillIcon data-testid='padlockIconTestId' />}
       </div>

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

@@ -19,5 +19,5 @@
 }
 
 .displayTile {
-  padding-inline: var(--fds-spacing-5);
+  padding-inline: var(--fds-spacing-4);
 }

frontend/packages/process-editor/src/components/ConfigViewerPanel/ConfigViewerPanel.module.css

@@ -0,0 +1,6 @@
+.container {
+  display: flex;
+  flex-direction: column;
+  padding: var(--fds-spacing-4);
+  gap: var(--fds-spacing-2);
+}

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

@@ -6,6 +6,7 @@ import { getConfigTitleHelpTextKey, getConfigTitleKey } from '../../utils/config
 import { useTranslation } from 'react-i18next';
 import { Alert, Heading, Paragraph } from '@digdir/designsystemet-react';
 import { ConfigSurface } from '../ConfigSurface/ConfigSurface';
+import classes from './ConfigViewerPanel.module.css';
 
 export const ConfigViewerPanel = (): React.ReactElement => {
   return (
@@ -52,7 +53,7 @@ export const ConfigViewerPanelContent = (): React.ReactElement => {
           title: t('process_editor.configuration_panel_header_help_text_title'),
         }}
       />
-      <div>
+      <div className={classes.container}>
         {propertiesToDisplay.map(({ label, value }) => (
           <StudioDisplayTile key={label} label={label} value={value} />
         ))}

frontend/packages/ux-editor/src/components/Properties/EditSubformTableColumns/ColumnElement/ColumnElement.test.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { screen, waitFor } from '@testing-library/react';
+import { screen } from '@testing-library/react';
 import { ColumnElement, type ColumnElementProps } from './ColumnElement';
 import { textMock } from '@studio/testing/mocks/i18nMock';
 import { renderWithProviders } from 'dashboard/testing/mocks';
@@ -31,15 +31,15 @@ const defaultProps: ColumnElementProps = {
   isInitialOpenForEdit: false,
   onDeleteColumn: jest.fn(),
   onEdit: jest.fn(),
-  layoutSetName: layoutSet3SubformNameMock,
+  subformLayout: layoutSet3SubformNameMock,
 };
 
 describe('ColumnElement', () => {
   afterEach(() => {
     jest.clearAllMocks();
   });
 
-  it('should call onEdit with updated header content when header text field is blurred', async () => {
+  it('should call onEdit with updated header content when click on save button', async () => {
     const onEditMock = jest.fn();
 
     const user = userEvent.setup();
@@ -61,18 +61,25 @@ describe('ColumnElement', () => {
       screen.getByRole('option', { name: new RegExp(`${subformLayoutMock.component1Id}`) }),
     );
 
-    await waitFor(async () => {
-      await user.click(
-        screen.getByRole('button', {
-          name: textMock('general.save'),
-        }),
-      );
-    });
+    await user.click(
+      await screen.findByText(
+        textMock('ux_editor.properties_panel.subform_table_columns.column_title_unedit'),
+      ),
+    );
+    await user.type(
+      screen.getByText(
+        textMock('ux_editor.properties_panel.subform_table_columns.column_title_edit'),
+      ),
+      'New Title',
+    );
+
+    const saveButton = await screen.findByRole('button', { name: textMock('general.save') });
+    await user.click(saveButton);
 
     expect(onEditMock).toHaveBeenCalledTimes(1);
     expect(onEditMock).toHaveBeenCalledWith({
       ...mockTableColumn,
-      headerContent: subformLayoutMock.component1.textResourceBindings.title,
+      headerContent: expect.stringContaining('subform_table_column_title_'),
       cellContent: { query: subformLayoutMock.component1.dataModelBindings.simpleBinding },
     });
   });

frontend/packages/ux-editor/src/components/Properties/EditSubformTableColumns/ColumnElement/ColumnElement.tsx

@@ -9,7 +9,7 @@ import { useStudioEnvironmentParams } from 'app-shared/hooks/useStudioEnvironmen
 import { textResourceByLanguageAndIdSelector } from '../../../../selectors/textResourceSelectors';
 
 export type ColumnElementProps = {
-  layoutSetName: string;
+  subformLayout: string;
   tableColumn: TableColumn;
   columnNumber: number;
   isInitialOpenForEdit: boolean;
@@ -23,7 +23,7 @@ export const ColumnElement = ({
   isInitialOpenForEdit,
   onDeleteColumn,
   onEdit,
-  layoutSetName,
+  subformLayout,
 }: ColumnElementProps): ReactElement => {
   const { t } = useTranslation();
   const [editing, setEditing] = useState(isInitialOpenForEdit);
@@ -38,7 +38,7 @@ export const ColumnElement = ({
   if (editing) {
     return (
       <EditColumnElement
-        layoutSetName={layoutSetName}
+        subformLayout={subformLayout}
         sourceColumn={tableColumn}
         columnNumber={columnNumber}
         onDeleteColumn={onDeleteColumn}