refactoring components one more level

frontend/packages/process-editor/src/components/Canvas/VersionHelpText/VersionHelpText.tsx

@@ -27,7 +27,7 @@ export const VersionHelpText = (): JSX.Element => {
         </Paragraph>
         <Paragraph size='small' spacing>
           <Trans i18nKey={t('process_editor.help_text_and_links')}>
-            gagag Trenger du hjelp til å oppgradere, kan du{' '}
+            Trenger du hjelp til å oppgradere, kan du{' '}
             <Link href='/contact'>ta kontakte med oss</Link>.
           </Trans>
         </Paragraph>

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

@@ -1,7 +1,7 @@
 .headerWrapper {
   display: flex;
   align-items: center;
-  margin-inline: var(--margin-inline);
+  margin-inline: 1rem;
   margin-top: 1rem;
   justify-content: space-between;
 }
@@ -11,10 +11,3 @@
   align-items: center;
   gap: 1rem;
 }
-
-.configDetailsRowWrapper {
-  display: flex;
-  flex-direction: column;
-  margin-inline: var(--margin-inline);
-  gap: 1rem;
-}

frontend/packages/process-editor/src/components/ConfigPanel/ConfigSection/ConfigSection.test.tsx → frontend/packages/process-editor/src/components/ConfigPanel/ConfigContent/ConfigContent.test.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { ConfigSection } from './ConfigSection';
+import { ConfigContent } from './ConfigContent';
 import { render as rtlRender, screen } from '@testing-library/react';
 import { textMock } from '../../../../../../testing/mocks/i18nMock';
 import { BpmnContext, BpmnContextProps } from '../../../contexts/BpmnContext';
@@ -30,7 +30,7 @@ const mockBpmnContextValue: BpmnContextProps = {
   setBpmnDetails: jest.fn(),
 };
 
-describe('ConfigSection', () => {
+describe('ConfigContent', () => {
   afterEach(jest.clearAllMocks);
 
   it('should display the details about the selected task when a "data" task is selected', () => {
@@ -93,7 +93,7 @@ describe('ConfigSection', () => {
 const render = (rootContextProps: Partial<BpmnContextProps> = {}) => {
   return rtlRender(
     <BpmnContext.Provider value={{ ...mockBpmnContextValue, ...rootContextProps }}>
-      <ConfigSection />
+      <ConfigContent />
     </BpmnContext.Provider>,
   );
 };

frontend/packages/process-editor/src/components/ConfigPanel/ConfigSection/ConfigSection.tsx → frontend/packages/process-editor/src/components/ConfigPanel/ConfigContent/ConfigContent.tsx

@@ -1,13 +1,14 @@
 import React from 'react';
-import classes from './ConfigSection.module.css';
+import classes from './ConfigContent.module.css';
 import { useTranslation } from 'react-i18next';
 import { Divider, Heading, HelpText, Paragraph } from '@digdir/design-system-react';
 import { ConfigIcon } from './ConfigIcon';
 import { ConfigDetailsRow } from './ConfigDetailsRow';
 import { getConfigTitleKey, getConfigTitleHelpTextKey } from '../../../utils/configPanelUtils';
 import { useBpmnContext } from '../../../contexts/BpmnContext';
+import { ConfigSectionWrapper } from './ConfigSectionWrapper';
 
-export const ConfigSection = () => {
+export const ConfigContent = (): JSX.Element => {
   const { t } = useTranslation();
   const { bpmnDetails } = useBpmnContext();
 
@@ -31,7 +32,7 @@ export const ConfigSection = () => {
         </HelpText>
       </div>
       <Divider />
-      <div className={classes.configDetailsRowWrapper}>
+      <ConfigSectionWrapper>
         <ConfigDetailsRow
           title={t('process_editor.configuration_panel_id_label')}
           text={bpmnDetails.id}
@@ -40,8 +41,7 @@ export const ConfigSection = () => {
           title={t('process_editor.configuration_panel_name_label')}
           text={bpmnDetails.name}
         />
-      </div>
-      <Divider />
+      </ConfigSectionWrapper>
     </>
   );
 };

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

@@ -0,0 +1,6 @@
+.configSectionWrapper {
+  display: flex;
+  flex-direction: column;
+  margin-inline: 1rem;
+  gap: 1rem;
+}

frontend/packages/process-editor/src/components/ConfigPanel/ConfigContent/ConfigSectionWrapper/ConfigSectionWrapper.tsx

@@ -0,0 +1,16 @@
+import React, { ReactNode } from 'react';
+import classes from './ConfigSectionWrapper.module.css';
+import { Divider } from '@digdir/design-system-react';
+
+export type ConfigSectionWrapperProps = {
+  children: ReactNode;
+};
+
+export const ConfigSectionWrapper = ({ children }: ConfigSectionWrapperProps): JSX.Element => {
+  return (
+    <>
+      <div className={classes.configSectionWrapper}>{children}</div>
+      <Divider />
+    </>
+  );
+};

frontend/packages/process-editor/src/components/ConfigPanel/ConfigContent/ConfigSectionWrapper/index.ts

@@ -0,0 +1 @@
+export { ConfigSectionWrapper } from './ConfigSectionWrapper';

frontend/packages/process-editor/src/components/ConfigPanel/ConfigContent/index.ts

@@ -0,0 +1 @@
+export { ConfigContent } from './ConfigContent';

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

@@ -1,13 +1,11 @@
 .configPanel {
-  --margin-inline: 1rem;
-
   background-color: var(--fds-semantic-surface-neutral-subtle);
   flex: 1;
   overflow-y: scroll;
   border-left: 1px solid var(--fds-semantic-border-neutral-subtle);
 }
 
 .configPanelParagraph {
-  margin-inline: var(--margin-inline);
+  margin-inline: 1rem;
   margin-top: 1rem;
 }

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

@@ -5,7 +5,7 @@ import { useTranslation } from 'react-i18next';
 import { Paragraph } from '@digdir/design-system-react';
 import { useBpmnContext } from '../../contexts/BpmnContext';
 import { BpmnTypeEnum } from '../../enum/BpmnTypeEnum';
-import { ConfigSection } from './ConfigSection';
+import { ConfigContent } from './ConfigContent';
 
 /**
  * @component
@@ -25,7 +25,7 @@ export const ConfigPanel = (): JSX.Element => {
         </Paragraph>
       );
     } else if (bpmnDetails.type === BpmnTypeEnum.Task) {
-      return <ConfigSection />;
+      return <ConfigContent />;
     } else {
       return (
         <Paragraph className={classes.configPanelParagraph} size='small'>

frontend/packages/process-editor/src/types/BpmnBusinessObjectEditor.ts

@@ -6,6 +6,9 @@ export interface BpmnBusinessObjectEditor {
   id: string;
   name?: string;
   extensionElements?: BpmnExtensionElementsEditor;
+  $attrs?: {
+    'altinn:tasktype': BpmnTaskType;
+  };
 }
 
 export interface BpmnExtensionElementsEditor {

frontend/packages/process-editor/src/utils/hookUtils/hookUtils.ts

@@ -40,12 +40,15 @@ export const getBpmnEditorDetailsFromBusinessObject = (
 
   const extensionElements = businessObject?.extensionElements;
   const values = extensionElements?.values;
-  const taskType = values ? values[0].taskType : null;
+  const taskTypeFromV8 = values ? values[0].taskType : null;
+
+  const bpmnAttrs = businessObject.$attrs;
+  const taskTypeFromV7 = bpmnAttrs ? bpmnAttrs['altinn:tasktype'] : null;
 
   const bpmnDetails: BpmnDetails = {
     id: bpmnId,
     name: bpmnName,
-    taskType,
+    taskType: taskTypeFromV8 || taskTypeFromV7,
     type: bpmnType,
   };
   return bpmnDetails;