feat: reorganize summary2 config

frontend/language/src/nb.json

@@ -384,6 +384,7 @@
   "general.production_environment_alt": "Produksjonsmiljøet",
   "general.profile_icon": "Profilikon",
   "general.reload": "Last inn på nytt",
+  "general.required": "Må fylles ut",
   "general.save": "Lagre",
   "general.saving": "Lagrer",
   "general.search": "Søk",
@@ -1394,6 +1395,7 @@
   "ux_editor.component_properties.layout": "Visning",
   "ux_editor.component_properties.layoutSet": "Navn på sidegruppe",
   "ux_editor.component_properties.loading": "Laster inn",
+  "ux_editor.component_properties.main_configuration": "Hovedinnstillinger",
   "ux_editor.component_properties.mapping": "Mapping",
   "ux_editor.component_properties.maxCount": "Maks antall repetisjoner",
   "ux_editor.component_properties.maxDate": "Seneste dato",

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

@@ -0,0 +1,3 @@
+.componentMainConfig {
+  padding: var(--fds-spacing-5);
+}

frontend/packages/ux-editor/src/components/Properties/PropertiesHeader/ComponentMainConfig.test.tsx

@@ -8,7 +8,11 @@ import userEvent from '@testing-library/user-event';
 import { createQueryClientMock } from 'app-shared/mocks/queryClientMock';
 import { QueryKey } from 'app-shared/types/QueryKey';
 import { app, org } from '@studio/testing/testids';
-import { layoutSet1NameMock } from '../../../testing/layoutSetsMock';
+import {
+  layoutSet1NameMock,
+  layoutSet2NameMock,
+  layoutSetsMock,
+} from '../../../testing/layoutSetsMock';
 import { layout1NameMock, layoutMock } from '../../../testing/layoutMock';
 
 const summary2Component: FormItem = {
@@ -20,6 +24,10 @@ const summary2Component: FormItem = {
 
 describe('ComponentMainConfig', () => {
   describe('Summary2', () => {
+    beforeEach(() => {
+      jest.clearAllMocks();
+    });
+
     it('should render summary2 config', async () => {
       const user = userEvent.setup();
       render(summary2Component);
@@ -46,6 +54,13 @@ describe('ComponentMainConfig', () => {
       await user.click(summary2AddOverrideButton());
       expect(handleComponentChange).toHaveBeenCalledTimes(1);
     });
+
+    it('should call handleComponentChange when changing target', async () => {
+      const user = userEvent.setup();
+      render(summary2Component);
+      await user.selectOptions(summary2TargetLayoutSet(), layoutSet2NameMock);
+      expect(handleComponentChange).toHaveBeenCalledTimes(1);
+    });
   });
 });
 
@@ -58,12 +73,16 @@ const summary2CollapsedButton = (n: number) =>
     name: new RegExp(`ux_editor.component_properties.summary.overrides.nth.*:${n}}`),
   });
 
+const summary2TargetLayoutSet = () =>
+  screen.getByRole('combobox', { name: /ux_editor.component_properties.target_layoutSet_id/ });
+
 const handleComponentChange = jest.fn();
 const render = (component: FormItem) => {
   const queryClient = createQueryClientMock();
   queryClient.setQueryData([QueryKey.FormLayouts, org, app, layoutSet1NameMock], {
     [layout1NameMock]: layoutMock,
   });
+  queryClient.setQueryData([QueryKey.LayoutSets, org, app], layoutSetsMock);
   renderWithProviders(
     <ComponentMainConfig component={component} handleComponentChange={handleComponentChange} />,
     {

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

@@ -1,10 +1,17 @@
 import React from 'react';
 import type { FormItem } from '../../../types/FormItem';
+import classes from './ComponentMainConfig.module.css';
 import { ComponentType } from 'app-shared/types/ComponentType';
 import { Accordion } from '@digdir/designsystemet-react';
 import { useTranslation } from 'react-i18next';
 import { Summary2Override } from '../../config/componentSpecificContent/Summary2/Override/Summary2Override';
-import type { Summary2OverrideConfig } from 'app-shared/types/ComponentSpecificConfig';
+import type {
+  Summary2OverrideConfig,
+  Summary2TargetConfig,
+} from 'app-shared/types/ComponentSpecificConfig';
+import { Summary2Target } from '../../config/componentSpecificContent/Summary2/Summary2Target/Summary2Target';
+import { StudioHeading } from '@studio/components';
+import { RequiredIndicator } from '../../RequiredIndicator';
 
 export type ComponentMainConfigProps = {
   component: FormItem;
@@ -24,25 +31,43 @@ export const ComponentMainConfig = ({
     handleComponentChange(updatedComponent);
   };
 
+  const handleTargetChange = (updatedTarget: Summary2TargetConfig): void => {
+    const updatedComponent = { ...component } as FormItem<ComponentType.Summary2>;
+    updatedComponent.target = updatedTarget;
+    handleComponentChange(updatedComponent);
+  };
+
   return (
     <>
       {component.type === ComponentType.Summary2 && (
-        <Accordion color='subtle'>
-          <Accordion.Item open={accordionOpen['summary2overrides'] === true}>
-            <Accordion.Header
-              onHeaderClick={() =>
-                setAccordionOpen((prev) => {
-                  return { ...prev, summary2overrides: !prev['summary2overrides'] };
-                })
-              }
-            >
-              {t('ux_editor.component_properties.summary.override.title')}
-            </Accordion.Header>
-            <Accordion.Content>
-              <Summary2Override overrides={component.overrides} onChange={handleOverridesChange} />
-            </Accordion.Content>
-          </Accordion.Item>
-        </Accordion>
+        <>
+          <div className={classes.componentMainConfig}>
+            <StudioHeading size='2xs'>
+              {t('ux_editor.component_properties.main_configuration')}
+              <RequiredIndicator />
+            </StudioHeading>
+            <Summary2Target target={component.target} onChange={handleTargetChange} />
+          </div>
+          <Accordion color='subtle'>
+            <Accordion.Item open={accordionOpen['summary2overrides'] === true}>
+              <Accordion.Header
+                onHeaderClick={() =>
+                  setAccordionOpen((prev) => {
+                    return { ...prev, summary2overrides: !prev['summary2overrides'] };
+                  })
+                }
+              >
+                {t('ux_editor.component_properties.summary.override.title')}
+              </Accordion.Header>
+              <Accordion.Content>
+                <Summary2Override
+                  overrides={component.overrides}
+                  onChange={handleOverridesChange}
+                />
+              </Accordion.Content>
+            </Accordion.Item>
+          </Accordion>
+        </>
       )}
     </>
   );

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

@@ -0,0 +1,6 @@
+.requiredIndicator {
+  display: inline;
+  height: var(--fds-sizing-7);
+  border-radius: var(--fds-radius-sm);
+  padding: var(--fds-spacing-2);
+}

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

@@ -0,0 +1,14 @@
+import React from 'react';
+import classes from './RequiredIndicator.module.css';
+import { StudioTag } from '@studio/components';
+import { useTranslation } from 'react-i18next';
+
+export const RequiredIndicator = () => {
+  const { t } = useTranslation();
+
+  return (
+    <StudioTag size='sm' className={classes.requiredIndicator} color='warning'>
+      {t('general.required')}
+    </StudioTag>
+  );
+};

frontend/packages/ux-editor/src/components/config/componentSpecificContent/Summary2/Summary2Target/Summary2Target.module.css

@@ -0,0 +1,7 @@
+.targetConfig {
+  padding-top: var(--fds-spacing-5);
+}
+
+.targetConfig > * {
+  padding-bottom: var(--fds-spacing-2);
+}

frontend/packages/ux-editor/src/components/config/componentSpecificContent/Summary2/Summary2Target/Summary2Target.tsx

@@ -1,12 +1,12 @@
 import { Summary2ComponentReferenceSelector } from '../Summary2ComponentReferenceSelector';
 import {
-  StudioCard,
   StudioHeading,
   StudioParagraph,
   StudioNativeSelect,
   StudioTextfield,
 } from '@studio/components';
 import React from 'react';
+import classes from './Summary2Target.module.css';
 import { useStudioEnvironmentParams } from 'app-shared/hooks/useStudioEnvironmentParams';
 import type {
   Summary2TargetConfig,
@@ -62,66 +62,62 @@ export const Summary2Target = ({ target, onChange }: Summary2TargetProps) => {
   };
 
   return (
-    <StudioCard>
-      <StudioCard.Header>
-        <StudioHeading size='2xs'>{t('ux_editor.component_properties.target')}</StudioHeading>
-      </StudioCard.Header>
+    <div className={classes.targetConfig}>
+      <StudioHeading size='2xs'>{t('ux_editor.component_properties.target')}</StudioHeading>
       <StudioParagraph size='sm'>
         {t('ux_editor.component_properties.target_description')}
       </StudioParagraph>
-      <StudioCard.Content>
-        <StudioNativeSelect
+      <StudioNativeSelect
+        size='sm'
+        label={t('ux_editor.component_properties.target_layoutSet_id')}
+        value={target.taskId}
+        onChange={(e) => handleLayoutSetChange(e.target.value)}
+      >
+        {layoutSetOptions.map((layoutSet) => (
+          <option key={layoutSet.id} value={layoutSet.tasks[0]}>
+            {layoutSet.id}
+          </option>
+        ))}
+      </StudioNativeSelect>
+      <StudioNativeSelect
+        size='sm'
+        label={t('ux_editor.component_properties.target_type')}
+        value={target.type}
+        onChange={handleTypeChange}
+      >
+        {targetTypes.map((type) => (
+          <option key={type.value} value={type.value}>
+            {type.label}
+          </option>
+        ))}
+      </StudioNativeSelect>
+      {target.type === 'page' && (
+        <Summary2ComponentReferenceSelector
+          key={target.id} // TODO: Remove the key when https://github.com/digdir/designsystemet/issues/2264 is fixed
+          label={t('ux_editor.component_properties.target_unit_page')}
+          value={target.id}
+          options={pageOptions}
+          onValueChange={handleTargetIdChange}
+        />
+      )}
+      {target.type === 'component' && (
+        <Summary2ComponentReferenceSelector
+          key={target.id} // TODO: Remove the key when https://github.com/digdir/designsystemet/issues/2264 is fixed
+          label={t('ux_editor.component_properties.target_unit_component')}
+          value={target.id}
+          options={componentOptions}
+          onValueChange={handleTargetIdChange}
+        />
+      )}
+      {target.type === 'layoutSet' && (
+        <StudioTextfield
+          key={target.id} // TODO: Remove the key when https://github.com/digdir/designsystemet/issues/2264 is fixed
           size='sm'
-          label={t('ux_editor.component_properties.target_layoutSet_id')}
-          value={target.taskId}
-          onChange={(e) => handleLayoutSetChange(e.target.value)}
-        >
-          {layoutSetOptions.map((layoutSet) => (
-            <option key={layoutSet.id} value={layoutSet.tasks[0]}>
-              {layoutSet.id}
-            </option>
-          ))}
-        </StudioNativeSelect>
-        <StudioNativeSelect
-          size='sm'
-          label={t('ux_editor.component_properties.target_type')}
-          value={target.type}
-          onChange={handleTypeChange}
-        >
-          {targetTypes.map((type) => (
-            <option key={type.value} value={type.value}>
-              {type.label}
-            </option>
-          ))}
-        </StudioNativeSelect>
-        {target.type === 'page' && (
-          <Summary2ComponentReferenceSelector
-            key={target.id} // TODO: Remove the key when https://github.com/digdir/designsystemet/issues/2264 is fixed
-            label={t('ux_editor.component_properties.target_unit_page')}
-            value={target.id}
-            options={pageOptions}
-            onValueChange={handleTargetIdChange}
-          />
-        )}
-        {target.type === 'component' && (
-          <Summary2ComponentReferenceSelector
-            key={target.id} // TODO: Remove the key when https://github.com/digdir/designsystemet/issues/2264 is fixed
-            label={t('ux_editor.component_properties.target_unit_component')}
-            value={target.id}
-            options={componentOptions}
-            onValueChange={handleTargetIdChange}
-          />
-        )}
-        {target.type === 'layoutSet' && (
-          <StudioTextfield
-            key={target.id} // TODO: Remove the key when https://github.com/digdir/designsystemet/issues/2264 is fixed
-            size='sm'
-            label={t('ux_editor.component_properties.target_unit_layout_set')}
-            value={selectedLayoutSetTargetName}
-            disabled={true}
-          />
-        )}
-      </StudioCard.Content>
-    </StudioCard>
+          label={t('ux_editor.component_properties.target_unit_layout_set')}
+          value={selectedLayoutSetTargetName}
+          disabled={true}
+        />
+      )}
+    </div>
   );
 };