diff --git a/frontend/language/src/nb.json b/frontend/language/src/nb.json index 996adcbe898..4272bb5fc23 100644 --- a/frontend/language/src/nb.json +++ b/frontend/language/src/nb.json @@ -1311,6 +1311,7 @@ "ux_editor.component_properties.dateSent": "Dato eksemplaret ble sendt inn", "ux_editor.component_properties.defaultTab": "Standardfane", "ux_editor.component_properties.deleteButton": "Slett-knapp", + "ux_editor.component_properties.deprecated.Summary": "Vi har forbedret komponenten for å oppsummere data. Bruk den nye oppsummeringskomponenten i stedet. Hvis du har brukt den gamle i apper som fortsatt er aktive, vil den fungere som normalt", "ux_editor.component_properties.direction": "Retning", "ux_editor.component_properties.display": "Visning", "ux_editor.component_properties.displayMode": "Visningsmodus (enkel eller liste)", 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 index 06c8f1a0bd0..913e4db3958 100644 --- a/frontend/packages/ux-editor/src/components/Properties/PropertiesHeader/PropertiesHeader.module.css +++ b/frontend/packages/ux-editor/src/components/Properties/PropertiesHeader/PropertiesHeader.module.css @@ -5,3 +5,7 @@ gap: var(--fds-spacing-2); align-items: flex-start; } + +.alertWrapper { + margin: var(--fds-spacing-3); +} 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 index eda89576cdd..9a6ed6b7955 100644 --- a/frontend/packages/ux-editor/src/components/Properties/PropertiesHeader/PropertiesHeader.test.tsx +++ b/frontend/packages/ux-editor/src/components/Properties/PropertiesHeader/PropertiesHeader.test.tsx @@ -15,6 +15,7 @@ import { layout1NameMock, layoutMock } from '@altinn/ux-editor/testing/layoutMoc import type { IFormLayouts } from '@altinn/ux-editor/types/global'; import { app, org } from '@studio/testing/testids'; import { ComponentType } from 'app-shared/types/ComponentType'; +import { componentMocks } from '@altinn/ux-editor/testing/componentMocks'; const mockHandleComponentUpdate = jest.fn(); @@ -149,6 +150,18 @@ describe('PropertiesHeader', () => { }); expect(setLayoutSetButton).not.toBeInTheDocument(); }); + + it('should show warning when component is deprecated', () => { + renderPropertiesHeader({ formItem: componentMocks[ComponentType.Summary] }); + const alert = screen.getByText(textMock('ux_editor.component_properties.deprecated.Summary')); + expect(alert).toBeInTheDocument(); + }); + + it('should not show warning when component is not deprecated', () => { + renderPropertiesHeader({ formItem: componentMocks[ComponentType.Input] }); + const alert = screen.queryByText(textMock('ux_editor.component_properties.deprecated.Input')); + expect(alert).not.toBeInTheDocument(); + }); }); const renderPropertiesHeader = (props: Partial = {}) => { const componentType = props.formItem ? props.formItem.type : defaultProps.formItem.type; diff --git a/frontend/packages/ux-editor/src/components/Properties/PropertiesHeader/PropertiesHeader.tsx b/frontend/packages/ux-editor/src/components/Properties/PropertiesHeader/PropertiesHeader.tsx index 557ca268a85..77306d385cd 100644 --- a/frontend/packages/ux-editor/src/components/Properties/PropertiesHeader/PropertiesHeader.tsx +++ b/frontend/packages/ux-editor/src/components/Properties/PropertiesHeader/PropertiesHeader.tsx @@ -2,8 +2,7 @@ import React from 'react'; import classes from './PropertiesHeader.module.css'; import { formItemConfigs } from '../../../data/formItemConfig'; import { QuestionmarkDiamondIcon } from '@studio/icons'; -import { StudioSectionHeader } from '@studio/components'; - +import { StudioAlert, StudioSectionHeader } from '@studio/components'; import { getComponentHelperTextByComponentType } from '../../../utils/language'; import { useTranslation } from 'react-i18next'; import { EditComponentIdRow } from './EditComponentIdRow'; @@ -11,6 +10,7 @@ import type { FormItem } from '../../../types/FormItem'; import { ComponentType } from 'app-shared/types/ComponentType'; import { EditLayoutSetForSubform } from './EditLayoutSetForSubform'; import { ComponentMainConfig } from './ComponentMainConfig'; +import { isComponentDeprecated } from '@altinn/ux-editor/utils/component'; import { FeatureFlag, shouldDisplayFeature } from 'app-shared/utils/featureToggleUtils'; export type PropertiesHeaderProps = { @@ -42,6 +42,11 @@ export const PropertiesHeader = ({ title: t('ux_editor.component_help_text_general_title'), }} /> + {isComponentDeprecated(formItem.type) && ( + + {t(`ux_editor.component_properties.deprecated.${formItem.type}`)} + + )}
{formItem.type === ComponentType.Subform && ( 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 9ee89c296fc..de6d572c679 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 @@ -24,3 +24,7 @@ .duplicateComponentIds { background-color: var(--fds-semantic-surface-danger-subtle) !important; } + +.deprecatedComponent { + background-color: var(--fds-semantic-surface-warning-default); +} diff --git a/frontend/packages/ux-editor/src/containers/DesignView/FormTree/FormItem/FormItemTitle/FormItemTitle.tsx b/frontend/packages/ux-editor/src/containers/DesignView/FormTree/FormItem/FormItemTitle/FormItemTitle.tsx index aadc278206c..098e4cdcedd 100644 --- a/frontend/packages/ux-editor/src/containers/DesignView/FormTree/FormItem/FormItemTitle/FormItemTitle.tsx +++ b/frontend/packages/ux-editor/src/containers/DesignView/FormTree/FormItem/FormItemTitle/FormItemTitle.tsx @@ -11,6 +11,7 @@ import { isContainer } from '../../../../../utils/formItemUtils'; import { useFormItemContext } from '../../../../FormItemContext'; import { useAppContext } from '../../../../../hooks'; import classNames from 'classnames'; +import { isComponentDeprecated } from '@altinn/ux-editor/utils/component'; export interface FormItemTitleProps { children: ReactNode; @@ -43,6 +44,7 @@ export const FormItemTitle = ({ children, formItem, duplicateComponents }: FormI
{children}
diff --git a/frontend/packages/ux-editor/src/testing/componentMocks.ts b/frontend/packages/ux-editor/src/testing/componentMocks.ts index 72167c9475a..5300eaff3c1 100644 --- a/frontend/packages/ux-editor/src/testing/componentMocks.ts +++ b/frontend/packages/ux-editor/src/testing/componentMocks.ts @@ -177,6 +177,12 @@ const repeatingGroupContainer: FormContainer = { itemType: 'CONTAINER', dataModelBindings: { group: '' }, }; + +const summaryComponent: FormComponent = { + ...commonProps(ComponentType.Summary), + componentRef: 'some-component', +}; + const summary2Component: FormComponent = { ...commonProps(ComponentType.Summary2), target: { @@ -211,5 +217,6 @@ export const componentMocks = { [ComponentType.Subform]: subformComponent, [ComponentType.TextArea]: textareaComponent, [ComponentType.Custom]: thirdPartyComponent, + [ComponentType.Summary]: summaryComponent, [ComponentType.Summary2]: summary2Component, }; diff --git a/frontend/packages/ux-editor/src/utils/component.test.ts b/frontend/packages/ux-editor/src/utils/component.test.ts index 141e8a79924..57218f1eb2c 100644 --- a/frontend/packages/ux-editor/src/utils/component.test.ts +++ b/frontend/packages/ux-editor/src/utils/component.test.ts @@ -11,6 +11,7 @@ import { PropertyTypes, propertyTypeMatcher, getSupportedPropertyKeysForPropertyType, + isComponentDeprecated, } from './component'; import { ComponentType, CustomComponentType } from 'app-shared/types/ComponentType'; import type { @@ -466,3 +467,13 @@ describe('getSupportedPropertyKeysForPropertyType', () => { ).toEqual(['testProperty1']); }); }); + +describe('isComponentDeprecated', () => { + it('should return true if component is deprecated', () => { + expect(isComponentDeprecated(ComponentType.Summary)).toBe(true); + }); + + it('should return false if component is not deprecated', () => { + expect(isComponentDeprecated(ComponentType.Input)).toBe(false); + }); +}); diff --git a/frontend/packages/ux-editor/src/utils/component.ts b/frontend/packages/ux-editor/src/utils/component.ts index d7d7a35b1a3..df9d6773fae 100644 --- a/frontend/packages/ux-editor/src/utils/component.ts +++ b/frontend/packages/ux-editor/src/utils/component.ts @@ -6,7 +6,7 @@ import type { FormRadioButtonsComponent, SelectionComponentType, } from '../types/FormComponent'; -import type { ComponentType, CustomComponentType } from 'app-shared/types/ComponentType'; +import { ComponentType, type CustomComponentType } from 'app-shared/types/ComponentType'; import { formItemConfigs } from '../data/formItemConfig'; import type { FormItem } from '../types/FormItem'; import type { KeyValuePairs } from 'app-shared/types/KeyValuePairs'; @@ -208,3 +208,8 @@ export const isPropertyTypeSupported = (property: KeyValuePairs) => { return supportedPropertyTypes.includes(property?.type); }; + +export const isComponentDeprecated = (type: ComponentType) => { + const deprecatedComponents = [ComponentType.Summary]; + return deprecatedComponents.includes(type); +};