diff --git a/frontend/language/src/nb.json b/frontend/language/src/nb.json index 9a7289fb6ee..09346485b3b 100644 --- a/frontend/language/src/nb.json +++ b/frontend/language/src/nb.json @@ -1379,6 +1379,7 @@ "ux_editor.component_help_text.Summary": "Komponent som viser informasjon som oppsummering. Brukes ofte på slutten av et skjema for å vise brukeren hva som er fylt ut.", "ux_editor.component_help_text.TextArea": "Stort tekstfelt benyttes når brukeren skal fylle inn en lengre beskrivelse.", "ux_editor.component_help_text.default": "Mer informasjon om denne komponenten vil komme på et senere tidspunkt.", + "ux_editor.component_help_text_general_title": "Åpne hjelpetekst for komponenten", "ux_editor.component_properties.action": "Aksjon", "ux_editor.component_properties.align": "Plassering*", "ux_editor.component_properties.attribution": "Opphav", diff --git a/frontend/packages/ux-editor/src/components/Properties/Content.test.tsx b/frontend/packages/ux-editor/src/components/Properties/Content.test.tsx index aabed980cfd..e7f015c9c2f 100644 --- a/frontend/packages/ux-editor/src/components/Properties/Content.test.tsx +++ b/frontend/packages/ux-editor/src/components/Properties/Content.test.tsx @@ -4,12 +4,7 @@ import { act, screen, waitFor } from '@testing-library/react'; import userEvent from '@testing-library/user-event'; import { textMock } from '../../../../../testing/mocks/i18nMock'; import { FormContext } from '../../containers/FormContext'; -import { - component1IdMock, - component1Mock, - container1IdMock, - layoutMock, -} from '../../testing/layoutMock'; +import { container1IdMock, layoutMock } from '../../testing/layoutMock'; import type { IAppDataState } from '../../features/appData/appDataReducers'; import type { ITextResourcesState } from '../../features/appData/textResources/textResourcesSlice'; import { renderWithMockStore, renderHookWithMockStore } from '../../testing/mocks'; @@ -60,33 +55,6 @@ describe('ContentTab', () => { expect(formContextProviderMock.debounceSave).toHaveBeenCalledTimes(4); }); }); - - describe('when editing a component', () => { - const props = { - formId: component1IdMock, - form: { ...component1Mock, dataModelBindings: {} }, - }; - - it('should render the component', async () => { - jest.spyOn(console, 'error').mockImplementation(); // Silence error from Select component - await render({ props }); - expect( - screen.getByText(textMock('ux_editor.modal_properties_component_change_id')), - ).toBeInTheDocument(); - }); - - it('should auto-save when updating a field', async () => { - await render({ props }); - - const idInput = screen.getByLabelText( - textMock('ux_editor.modal_properties_component_change_id'), - ); - await act(() => user.type(idInput, 'test')); - - expect(formContextProviderMock.handleUpdate).toHaveBeenCalledTimes(4); - expect(formContextProviderMock.debounceSave).toHaveBeenCalledTimes(4); - }); - }); }); const waitForData = async () => { diff --git a/frontend/packages/ux-editor/src/components/Properties/Properties.test.tsx b/frontend/packages/ux-editor/src/components/Properties/Properties.test.tsx index 57bbe9cd464..e67b3f8c01a 100644 --- a/frontend/packages/ux-editor/src/components/Properties/Properties.test.tsx +++ b/frontend/packages/ux-editor/src/components/Properties/Properties.test.tsx @@ -1,12 +1,12 @@ import React from 'react'; import { Properties } from './Properties'; -import { render as rtlRender, act, screen, waitFor } from '@testing-library/react'; +import { act, screen, waitFor } from '@testing-library/react'; import { mockUseTranslation } from '../../../../../testing/mocks/i18nMock'; import { FormContext } from '../../containers/FormContext'; import userEvent from '@testing-library/user-event'; import { formContextProviderMock } from '../../testing/formContextMocks'; - -const user = userEvent.setup(); +import { component1Mock, component1IdMock } from '../../testing/layoutMock'; +import { renderWithProviders } from '../../testing/mocks'; // Test data: const contentText = 'Innhold'; @@ -39,15 +39,44 @@ jest.mock('./Calculations', () => ({ jest.mock('react-i18next', () => ({ useTranslation: () => mockUseTranslation(texts) })); describe('Properties', () => { + describe('Default config', () => { + it('hides the properties header when the form is undefined', () => { + renderProperties({ form: undefined }); + + const heading = screen.queryByRole('heading', { level: 2 }); + expect(heading).not.toBeInTheDocument(); + }); + + it('saves the component when changes are made in the properties header', async () => { + const user = userEvent.setup(); + renderProperties({ form: component1Mock, formId: component1IdMock }); + + const heading = screen.getByRole('heading', { + name: component1Mock.type, + level: 2, + }); + expect(heading).toBeInTheDocument(); + + const textbox = screen.getByRole('textbox', { + name: 'ux_editor.modal_properties_component_change_id', + }); + + await act(() => user.type(textbox, '2')); + expect(formContextProviderMock.handleUpdate).toHaveBeenCalledTimes(1); + expect(formContextProviderMock.debounceSave).toHaveBeenCalledTimes(1); + }); + }); + describe('Content', () => { it('Closes content on load', () => { - render(); + renderProperties(); const button = screen.queryByRole('button', { name: contentText }); expect(button).toHaveAttribute('aria-expanded', 'false'); }); it('Toggles content when clicked', async () => { - render(); + const user = userEvent.setup(); + renderProperties(); const button = screen.queryByRole('button', { name: contentText }); await act(() => user.click(button)); expect(button).toHaveAttribute('aria-expanded', 'true'); @@ -56,7 +85,7 @@ describe('Properties', () => { }); it('Opens content when a component is selected', async () => { - const { rerender } = render(); + const { rerender } = renderProperties(); rerender(getComponent({ formId: 'test' })); const button = screen.queryByRole('button', { name: contentText }); await waitFor(() => expect(button).toHaveAttribute('aria-expanded', 'true')); @@ -65,13 +94,14 @@ describe('Properties', () => { describe('Dynamics', () => { it('Closes dynamics on load', () => { - render(); + renderProperties(); const button = screen.queryByRole('button', { name: dynamicsText }); expect(button).toHaveAttribute('aria-expanded', 'false'); }); it('Toggles dynamics when clicked', async () => { - render(); + const user = userEvent.setup(); + renderProperties(); const button = screen.queryByRole('button', { name: dynamicsText }); await act(() => user.click(button)); expect(button).toHaveAttribute('aria-expanded', 'true'); @@ -80,7 +110,8 @@ describe('Properties', () => { }); it('Shows new dynamics by default', async () => { - const { rerender } = render(); + const user = userEvent.setup(); + const { rerender } = renderProperties(); rerender(getComponent({ formId: 'test' })); const dynamicsButton = screen.queryByRole('button', { name: dynamicsText }); await act(() => user.click(dynamicsButton)); @@ -91,13 +122,14 @@ describe('Properties', () => { describe('Calculations', () => { it('Closes calculations on load', () => { - render(); + renderProperties(); const button = screen.queryByRole('button', { name: calculationsText }); expect(button).toHaveAttribute('aria-expanded', 'false'); }); it('Toggles calculations when clicked', async () => { - render(); + const user = userEvent.setup(); + renderProperties(); const button = screen.queryByRole('button', { name: calculationsText }); await act(() => user.click(button)); expect(button).toHaveAttribute('aria-expanded', 'true'); @@ -108,7 +140,7 @@ describe('Properties', () => { it('Renders accordion', () => { const formIdMock = 'test-id'; - render({ formId: formIdMock }); + renderProperties({ formId: formIdMock }); expect(screen.getByText(contentText)).toBeInTheDocument(); expect(screen.getByText(dynamicsText)).toBeInTheDocument(); expect(screen.getByText(calculationsText)).toBeInTheDocument(); @@ -129,5 +161,5 @@ const getComponent = (formContextProps: Partial = {}) => ( ); -const render = (formContextProps: Partial = {}) => - rtlRender(getComponent(formContextProps)); +const renderProperties = (formContextProps: Partial = {}) => + renderWithProviders(getComponent(formContextProps)); diff --git a/frontend/packages/ux-editor/src/components/Properties/Properties.tsx b/frontend/packages/ux-editor/src/components/Properties/Properties.tsx index 5879dff6ebd..996cfd65c7d 100644 --- a/frontend/packages/ux-editor/src/components/Properties/Properties.tsx +++ b/frontend/packages/ux-editor/src/components/Properties/Properties.tsx @@ -6,10 +6,12 @@ import { Accordion } from '@digdir/design-system-react'; import { useFormContext } from '../../containers/FormContext'; import classes from './Properties.module.css'; import { Dynamics } from './Dynamics'; +import { PropertiesHeader } from './PropertiesHeader'; +import { isContainer } from '../../utils/formItemUtils'; export const Properties = () => { const { t } = useTranslation(); - const { formId } = useFormContext(); + const { formId, form, handleUpdate, debounceSave } = useFormContext(); const formIdRef = React.useRef(formId); const [openList, setOpenList] = React.useState([]); @@ -31,6 +33,16 @@ export const Properties = () => { return (
+ {form && !isContainer(form) && ( + { + handleUpdate(updatedComponent); + debounceSave(formId, updatedComponent); + }} + /> + )} toggleOpen('content')}> diff --git a/frontend/packages/ux-editor/src/components/Properties/PropertiesHeader/DataModelBindingRow/DataModelBindingRow.test.tsx b/frontend/packages/ux-editor/src/components/Properties/PropertiesHeader/DataModelBindingRow/DataModelBindingRow.test.tsx new file mode 100644 index 00000000000..0523b4e6336 --- /dev/null +++ b/frontend/packages/ux-editor/src/components/Properties/PropertiesHeader/DataModelBindingRow/DataModelBindingRow.test.tsx @@ -0,0 +1,101 @@ +import React from 'react'; +import { act, screen } from '@testing-library/react'; +import { DataModelBindingRow, type DataModelBindingRowProps } from './DataModelBindingRow'; +import { FormContext } from '../../../../containers/FormContext'; +import userEvent from '@testing-library/user-event'; +import { formContextProviderMock } from '../../../../testing/formContextMocks'; +import { component1Mock, component1IdMock } from '../../../../testing/layoutMock'; +import { renderWithProviders } from '../../../../testing/mocks'; +import { textMock } from '../../../../../../../testing/mocks/i18nMock'; + +const mockSchema = { + properties: { + dataModelBindings: { + properties: { + simpleBinding: { + description: 'Description for simpleBinding', + }, + }, + }, + }, +}; + +const mockSchemaUndefined = { + properties: { + dataModelBindings: { + properties: undefined, + }, + }, +}; + +const mockHandleComponentUpdate = jest.fn(); + +const defaultProps: DataModelBindingRowProps = { + schema: mockSchema, + component: component1Mock, + formId: component1IdMock, + handleComponentUpdate: mockHandleComponentUpdate, +}; + +describe('DataModelBindingRow', () => { + afterEach(jest.clearAllMocks); + + it('renders EditDataModelBindings component when schema is present', () => { + renderProperties({ form: component1Mock, formId: component1IdMock }); + + const datamodelButton = screen.getByRole('button', { + name: textMock('ux_editor.modal_properties_data_model_link'), + }); + expect(datamodelButton).toBeInTheDocument(); + }); + + it('does not render EditDataModelBindings component when schema.properties is undefined', () => { + renderProperties( + { form: component1Mock, formId: component1IdMock }, + { schema: mockSchemaUndefined }, + ); + + const datamodelButton = screen.queryByRole('button', { + name: textMock('ux_editor.modal_properties_data_model_link'), + }); + expect(datamodelButton).not.toBeInTheDocument(); + }); + + it('calls handleComponentUpdate when EditDataModelBindings component is updated', async () => { + const user = userEvent.setup(); + renderProperties({ form: component1Mock, formId: component1IdMock }); + + const datamodelButton = screen.getByRole('button', { + name: textMock('ux_editor.modal_properties_data_model_link'), + }); + expect( + screen.queryByRole('button', { name: textMock('general.delete') }), + ).not.toBeInTheDocument(); + + await act(() => user.click(datamodelButton)); + + const deleteButton = screen.getByRole('button', { + name: textMock('general.delete'), + }); + expect(deleteButton).toBeInTheDocument(); + + await act(() => user.click(deleteButton)); + expect(mockHandleComponentUpdate).toHaveBeenCalledTimes(1); + }); +}); + +const renderProperties = ( + formContextProps: Partial = {}, + props: Partial = {}, +) => { + return renderWithProviders( + + + , + ); +}; diff --git a/frontend/packages/ux-editor/src/components/Properties/PropertiesHeader/DataModelBindingRow/DataModelBindingRow.tsx b/frontend/packages/ux-editor/src/components/Properties/PropertiesHeader/DataModelBindingRow/DataModelBindingRow.tsx new file mode 100644 index 00000000000..860e68a935f --- /dev/null +++ b/frontend/packages/ux-editor/src/components/Properties/PropertiesHeader/DataModelBindingRow/DataModelBindingRow.tsx @@ -0,0 +1,41 @@ +import React from 'react'; +import { EditDataModelBindings } from '../../../config/editModal/EditDataModelBindings'; +import type { FormComponent } from '../../../../types/FormComponent'; + +export type DataModelBindingRowProps = { + schema: any; + component: FormComponent; + formId: string; + handleComponentUpdate: (component: FormComponent) => void; +}; + +export const DataModelBindingRow = ({ + schema, + component, + formId, + handleComponentUpdate, +}: DataModelBindingRowProps): React.JSX.Element => { + const { dataModelBindings } = schema.properties; + + return ( + dataModelBindings?.properties && ( + <> + {Object.keys(dataModelBindings?.properties).map((propertyKey: string) => { + return ( + + ); + })} + + ) + ); +}; diff --git a/frontend/packages/ux-editor/src/components/Properties/PropertiesHeader/DataModelBindingRow/index.ts b/frontend/packages/ux-editor/src/components/Properties/PropertiesHeader/DataModelBindingRow/index.ts new file mode 100644 index 00000000000..9975575ae65 --- /dev/null +++ b/frontend/packages/ux-editor/src/components/Properties/PropertiesHeader/DataModelBindingRow/index.ts @@ -0,0 +1 @@ +export { DataModelBindingRow } from './DataModelBindingRow'; diff --git a/frontend/packages/ux-editor/src/components/config/editModal/EditComponentId.tsx b/frontend/packages/ux-editor/src/components/Properties/PropertiesHeader/EditComponentIdRow/EditComponentIdRow.tsx similarity index 81% rename from frontend/packages/ux-editor/src/components/config/editModal/EditComponentId.tsx rename to frontend/packages/ux-editor/src/components/Properties/PropertiesHeader/EditComponentIdRow/EditComponentIdRow.tsx index d1f79a55558..d08853d346b 100644 --- a/frontend/packages/ux-editor/src/components/config/editModal/EditComponentId.tsx +++ b/frontend/packages/ux-editor/src/components/Properties/PropertiesHeader/EditComponentIdRow/EditComponentIdRow.tsx @@ -1,21 +1,21 @@ import React from 'react'; -import { idExists } from '../../../utils/formLayoutUtils'; +import { idExists } from '../../../../utils/formLayoutUtils'; import { useTranslation } from 'react-i18next'; -import { useSelectedFormLayout } from '../../../hooks'; -import type { FormComponent } from '../../../types/FormComponent'; -import { FormField } from '../../FormField'; +import { useSelectedFormLayout } from '../../../../hooks'; +import type { FormComponent } from '../../../../types/FormComponent'; +import { FormField } from '../../../FormField'; import { Textfield } from '@digdir/design-system-react'; -export interface IEditComponentId { +export interface EditComponentIdRowProps { handleComponentUpdate: (component: FormComponent) => void; component: FormComponent; helpText?: string; } -export const EditComponentId = ({ +export const EditComponentIdRow = ({ component, handleComponentUpdate, helpText, -}: IEditComponentId) => { +}: EditComponentIdRowProps) => { const { components, containers } = useSelectedFormLayout(); const { t } = useTranslation(); diff --git a/frontend/packages/ux-editor/src/components/Properties/PropertiesHeader/EditComponentIdRow/index.ts b/frontend/packages/ux-editor/src/components/Properties/PropertiesHeader/EditComponentIdRow/index.ts new file mode 100644 index 00000000000..e07b8bd9586 --- /dev/null +++ b/frontend/packages/ux-editor/src/components/Properties/PropertiesHeader/EditComponentIdRow/index.ts @@ -0,0 +1 @@ +export { EditComponentIdRow } from './EditComponentIdRow'; diff --git a/frontend/packages/ux-editor/src/components/Properties/PropertiesHeader/PropertiesHeader.module.css b/frontend/packages/ux-editor/src/components/Properties/PropertiesHeader/PropertiesHeader.module.css new file mode 100644 index 00000000000..854e368f8c8 --- /dev/null +++ b/frontend/packages/ux-editor/src/components/Properties/PropertiesHeader/PropertiesHeader.module.css @@ -0,0 +1,33 @@ +.header { + display: flex; + justify-content: space-between; + padding-inline: var(--fds-spacing-3); + padding-block: var(--fds-spacing-2); + background-color: var(--fds-semantic-surface-neutral-selected); +} + +.iconAndTextWrapper { + display: flex; + align-items: center; + gap: var(--fds-spacing-2); +} + +.divider { + margin: 0; + padding: 0; +} + +.content { + padding-inline: var(--fds-spacing-3); + padding-block: var(--fds-spacing-2); + background-color: var(--fds-semantic-surface-neutral-default); + display: flex; + flex-direction: column; + gap: var(--fds-spacing-2); +} + +.contentRow { + display: flex; + align-items: center; + gap: var(--fds-spacing-1); +} diff --git a/frontend/packages/ux-editor/src/components/Properties/PropertiesHeader/PropertiesHeader.test.tsx b/frontend/packages/ux-editor/src/components/Properties/PropertiesHeader/PropertiesHeader.test.tsx new file mode 100644 index 00000000000..beb520ff606 --- /dev/null +++ b/frontend/packages/ux-editor/src/components/Properties/PropertiesHeader/PropertiesHeader.test.tsx @@ -0,0 +1,75 @@ +import React from 'react'; +import { act, screen } from '@testing-library/react'; +import { PropertiesHeader, type PropertiesHeaderProps } from './PropertiesHeader'; +import { FormContext } from '../../../containers/FormContext'; +import userEvent from '@testing-library/user-event'; +import { formContextProviderMock } from '../../../testing/formContextMocks'; +import { component1Mock, component1IdMock } from '../../../testing/layoutMock'; +import { renderWithProviders } from '../../../testing/mocks'; +import { textMock } from '../../../../../../testing/mocks/i18nMock'; + +const mockHandleComponentUpdate = jest.fn(); + +const defaultProps: PropertiesHeaderProps = { + form: component1Mock, + formId: component1IdMock, + handleComponentUpdate: mockHandleComponentUpdate, +}; + +describe('PropertiesHeader', () => { + afterEach(jest.clearAllMocks); + + it('renders the header name for the component', () => { + renderProperties({ form: component1Mock, formId: component1IdMock }); + + const heading = screen.getByRole('heading', { + name: textMock(`ux_editor.component_title.${component1Mock.type}`), + level: 2, + }); + expect(heading).toBeInTheDocument(); + }); + + it('displays the help text when the help text button is clicked', async () => { + const user = userEvent.setup(); + renderProperties({ form: component1Mock, formId: component1IdMock }); + + const helpTextButton = screen.getByRole('button', { + name: textMock('ux_editor.component_help_text_general_title'), + }); + + expect( + screen.queryByText(textMock(`ux_editor.component_help_text.${component1Mock.type}`)), + ).not.toBeInTheDocument(); + + await act(() => user.click(helpTextButton)); + + expect( + screen.getByText(textMock(`ux_editor.component_help_text.${component1Mock.type}`)), + ).toBeInTheDocument(); + }); + + it('calls "handleComponentUpdate" when the id changes', async () => { + const user = userEvent.setup(); + renderProperties({ form: component1Mock, formId: component1IdMock }); + + const textbox = screen.getByRole('textbox', { + name: textMock('ux_editor.modal_properties_component_change_id'), + }); + + await act(() => user.type(textbox, '2')); + expect(mockHandleComponentUpdate).toHaveBeenCalledTimes(1); + }); +}); + +const renderProperties = (formContextProps: Partial = {}) => { + return renderWithProviders( + + + , + ); +}; diff --git a/frontend/packages/ux-editor/src/components/Properties/PropertiesHeader/PropertiesHeader.tsx b/frontend/packages/ux-editor/src/components/Properties/PropertiesHeader/PropertiesHeader.tsx new file mode 100644 index 00000000000..2a01811d4fc --- /dev/null +++ b/frontend/packages/ux-editor/src/components/Properties/PropertiesHeader/PropertiesHeader.tsx @@ -0,0 +1,68 @@ +import React from 'react'; +import classes from './PropertiesHeader.module.css'; +import { Divider, Heading, HelpText } from '@digdir/design-system-react'; +import { formItemConfigs } from '../../../data/formItemConfig'; +import { QuestionmarkDiamondIcon } from '@studio/icons'; +import type { FormComponent } from '../../../types/FormComponent'; +import { useItemTitle } from '../../../hooks/useItemTitle'; +import { getComponentHelperTextByComponentType } from '../../../utils/language'; +import { useTranslation } from 'react-i18next'; +import { useLayoutSchemaQuery } from '../../../hooks/queries/useLayoutSchemaQuery'; +import { useComponentSchemaQuery } from '../../../hooks/queries/useComponentSchemaQuery'; +import { DataModelBindingRow } from './DataModelBindingRow'; +import { EditComponentIdRow } from './EditComponentIdRow'; + +export type PropertiesHeaderProps = { + form: FormComponent; + formId: string; + handleComponentUpdate: (component: FormComponent) => void; +}; + +export const PropertiesHeader = ({ + form, + formId, + handleComponentUpdate, +}: PropertiesHeaderProps): React.JSX.Element => { + const { t } = useTranslation(); + const itemTitle = useItemTitle(); + + const isUnknownInternalComponent: boolean = !formItemConfigs[form.type]; + const Icon = isUnknownInternalComponent + ? QuestionmarkDiamondIcon + : formItemConfigs[form.type]?.icon; + + useLayoutSchemaQuery(); // Ensure we load the layout schemas so that component schemas can be loaded + const { data: schema } = useComponentSchemaQuery(form.type); + + return ( + <> +
+
+ {Icon && } + + {itemTitle(form)} + +
+ + {getComponentHelperTextByComponentType(form.type, t)} + +
+ +
+
+ +
+ {schema && ( +
+ +
+ )} +
+ + ); +}; diff --git a/frontend/packages/ux-editor/src/components/Properties/PropertiesHeader/index.ts b/frontend/packages/ux-editor/src/components/Properties/PropertiesHeader/index.ts new file mode 100644 index 00000000000..dc00e5c7c10 --- /dev/null +++ b/frontend/packages/ux-editor/src/components/Properties/PropertiesHeader/index.ts @@ -0,0 +1 @@ +export { PropertiesHeader } from './PropertiesHeader'; diff --git a/frontend/packages/ux-editor/src/components/config/EditFormComponent.test.tsx b/frontend/packages/ux-editor/src/components/config/EditFormComponent.test.tsx index 5530ff4bbbc..49b780258ae 100644 --- a/frontend/packages/ux-editor/src/components/config/EditFormComponent.test.tsx +++ b/frontend/packages/ux-editor/src/components/config/EditFormComponent.test.tsx @@ -86,28 +86,6 @@ describe('EditFormComponent', () => { jest.clearAllMocks(); }); - test('should return input specific content when type input', async () => { - await render({ - componentProps: { - type: ComponentType.Input, - }, - }); - - const labels = { - 'ux_editor.modal_properties_component_change_id': 'textbox', - 'ux_editor.modal_properties_data_model_helper': 'combobox', - 'ux_editor.modal_configure_read_only': 'checkbox', - }; - - const datamodelFieldButton = screen.getByRole('button', { name: datamodelFieldLinkLabel }); - await act(() => user.click(datamodelFieldButton)); - - Object.keys(labels).map(async (label) => - expect(await screen.findByRole(labels[label], { name: label })), - ); - expect(screen.getByRole('combobox', { name: autocompleteLabel })); - }); - test('should return header specific content when type header', async () => { await render({ componentProps: { @@ -115,7 +93,6 @@ describe('EditFormComponent', () => { }, }); - expect(screen.getByLabelText('ux_editor.modal_properties_component_change_id')); await waitFor(() => expect(screen.getByRole('combobox', { name: 'ux_editor.modal_header_type_helper' })), ); @@ -129,7 +106,6 @@ describe('EditFormComponent', () => { }); const labels = [ - 'ux_editor.modal_properties_component_change_id', 'ux_editor.modal_properties_file_upload_simple', 'ux_editor.modal_properties_file_upload_list', 'ux_editor.modal_properties_valid_file_endings_all', diff --git a/frontend/packages/ux-editor/src/components/config/EditFormComponent.tsx b/frontend/packages/ux-editor/src/components/config/EditFormComponent.tsx index f226660884f..1e38ed37e4c 100644 --- a/frontend/packages/ux-editor/src/components/config/EditFormComponent.tsx +++ b/frontend/packages/ux-editor/src/components/config/EditFormComponent.tsx @@ -10,7 +10,6 @@ import { selectedLayoutNameSelector } from '../../selectors/formLayoutSelectors' import { useComponentSchemaQuery } from '../../hooks/queries/useComponentSchemaQuery'; import { StudioSpinner } from '@studio/components'; import { FormComponentConfig } from './FormComponentConfig'; -import { EditComponentId } from './editModal/EditComponentId'; import { useLayoutSchemaQuery } from '../../hooks/queries/useLayoutSchemaQuery'; import { useSelector } from 'react-redux'; import { getComponentTitleByComponentType } from '../../utils/language'; @@ -107,7 +106,6 @@ export const EditFormComponent = ({ )} {!showComponentConfigBeta && ( <> - {renderFromComponentSpecificDefinition(getConfigDefinitionForComponent())} { it('should render expected components', async () => { render({}); - expect( - screen.getByText(textMock('ux_editor.modal_properties_component_change_id')), - ).toBeInTheDocument(); ['title', 'description', 'help'].forEach(async (key) => { expect( screen.getByText(textMock(`ux_editor.modal_properties_textResourceBindings_${key}`)), diff --git a/frontend/packages/ux-editor/src/components/config/FormComponentConfig.tsx b/frontend/packages/ux-editor/src/components/config/FormComponentConfig.tsx index 0cc044a0fcc..f2433aa1b3f 100644 --- a/frontend/packages/ux-editor/src/components/config/FormComponentConfig.tsx +++ b/frontend/packages/ux-editor/src/components/config/FormComponentConfig.tsx @@ -1,9 +1,7 @@ import React from 'react'; -import { EditComponentId } from './editModal/EditComponentId'; import { Alert, Heading, Paragraph } from '@digdir/design-system-react'; import type { FormComponent } from '../../types/FormComponent'; import { selectedLayoutNameSelector } from '../../selectors/formLayoutSelectors'; -import { EditDataModelBindings } from './editModal/EditDataModelBindings'; import { EditTextResourceBindings } from './editModal/EditTextResourceBindings'; import { EditBooleanValue } from './editModal/EditBooleanValue'; import { EditNumberValue } from './editModal/EditNumberValue'; @@ -61,13 +59,6 @@ export const FormComponentConfig = ({ ); return ( <> - {id && ( - - )} {textResourceBindings?.properties && ( <> @@ -82,28 +73,6 @@ export const FormComponentConfig = ({ /> )} - {dataModelBindings?.properties && ( - <> - - {t('top_menu.datamodel')} - - {Object.keys(dataModelBindings?.properties).map((propertyKey: string) => { - return ( - - ); - })} - - )} {grid && (
diff --git a/frontend/packages/ux-editor/src/components/config/componentConfig.tsx b/frontend/packages/ux-editor/src/components/config/componentConfig.tsx index 4d856cec498..1692c2072cf 100644 --- a/frontend/packages/ux-editor/src/components/config/componentConfig.tsx +++ b/frontend/packages/ux-editor/src/components/config/componentConfig.tsx @@ -1,7 +1,6 @@ import React from 'react'; import { ComponentType } from 'app-shared/types/ComponentType'; import { EditCodeList } from './editModal/EditCodeList'; -import { EditDataModelBindings } from './editModal/EditDataModelBindings'; import { EditHeaderSize } from './editModal/EditHeaderSize'; import { EditOptions } from './editModal/EditOptions'; import { EditPreselectedIndex } from './editModal/EditPreselectedIndex'; @@ -87,7 +86,6 @@ export const componentSpecificEditConfig: IComponentEditConfig = { }; export const configComponents: IConfigComponents = { - [EditSettings.DataModelBindings]: EditDataModelBindings, [EditSettings.Size]: EditHeaderSize, [EditSettings.Title]: ({ component, handleComponentChange }: IGenericEditComponent) => ( string) => { const componentTitle = useComponentTitle();