feat: Warn user about deprecated components

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 fått en ny og forbedret komponent for å oppsummere data. Bruk den nye oppsummeringskomponenten i stedet.",
   "ux_editor.component_properties.direction": "Retning",
   "ux_editor.component_properties.display": "Visning",
   "ux_editor.component_properties.displayMode": "Visningsmodus (enkel eller liste)",

frontend/packages/ux-editor/src/components/Properties/Properties.module.css

@@ -13,3 +13,7 @@
   padding-block: var(--fds-spacing-5) 0;
   padding-inline: 0;
 }
+
+.alertWrapper {
+  margin: var(--fds-spacing-5);
+}

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

@@ -1,7 +1,7 @@
 import React from 'react';
 import { Text } from './Text';
 import { useTranslation } from 'react-i18next';
-import { Accordion } from '@digdir/designsystemet-react';
+import { Accordion, Alert } from '@digdir/designsystemet-react';
 import { useFormItemContext } from '../../containers/FormItemContext';
 import classes from './Properties.module.css';
 import { Dynamics } from './Dynamics';
@@ -10,6 +10,7 @@ import { EditFormComponent } from '../config/EditFormComponent';
 import { DataModelBindings } from './DataModelBindings';
 import { PageConfigPanel } from './PageConfigPanel';
 import { DeprecatedCalculationsInfo } from '@altinn/ux-editor/components/Properties/DeprecatedCalculationsInfo';
+import { isComponentDeprecated } from '@altinn/ux-editor/utils/component';
 
 export const Properties = () => {
   const { t } = useTranslation();
@@ -36,6 +37,11 @@ export const Properties = () => {
 
   return (
     <div className={classes.root} key={formItemId}>
+      {isComponentDeprecated(formItem.type) && (
+        <Alert size='sm' className={classes.alertWrapper} severity='warning'>
+          {t(`ux_editor.component_properties.deprecated.${formItem.type}`)}
+        </Alert>
+      )}
       <PropertiesHeader
         formItem={formItem}
         handleComponentUpdate={async (updatedComponent) => {

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);
+}

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
     <div
       className={classNames(classes.root, {
         [classes.duplicateComponentIds]: duplicateComponents?.includes(formItem.id),
+        [classes.deprecatedComponent]: isComponentDeprecated(formItem.type),
       })}
     >
       <div className={classes.label}>{children}</div>

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);
+  });
+});

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);
+};