From ee8ef99ef7a3379cdaa40deb2df5c235b6afeadc Mon Sep 17 00:00:00 2001
From: WilliamThorenfeldt <william.thorenfeldt@accenture.com>
Date: Thu, 14 Dec 2023 15:16:31 +0100
Subject: [PATCH] refactoring components one more level

---
 .../Canvas/VersionHelpText/VersionHelpText.tsx   |  2 +-
 .../ConfigContent.module.css}                    |  9 +--------
 .../ConfigContent.test.tsx}                      |  6 +++---
 .../ConfigContent.tsx}                           | 10 +++++-----
 .../ConfigDetailsRow/ConfigDetailsRow.module.css |  0
 .../ConfigDetailsRow/ConfigDetailsRow.test.tsx   |  0
 .../ConfigDetailsRow/ConfigDetailsRow.tsx        |  0
 .../ConfigDetailsRow/index.ts                    |  0
 .../ConfigIcon/ConfigIcon.module.css             |  0
 .../ConfigIcon/ConfigIcon.tsx                    |  0
 .../ConfigIcon/index.ts                          |  0
 .../ConfigSectionWrapper.module.css              |  6 ++++++
 .../ConfigSectionWrapper.tsx                     | 16 ++++++++++++++++
 .../ConfigContent/ConfigSectionWrapper/index.ts  |  1 +
 .../ConfigPanel/ConfigContent/index.ts           |  1 +
 .../ConfigPanel/ConfigPanel.module.css           |  4 +---
 .../src/components/ConfigPanel/ConfigPanel.tsx   |  4 ++--
 .../ConfigPanel/ConfigSection/index.ts           |  1 -
 .../src/types/BpmnBusinessObjectEditor.ts        |  3 +++
 .../src/utils/hookUtils/hookUtils.ts             |  7 +++++--
 20 files changed, 45 insertions(+), 25 deletions(-)
 rename frontend/packages/process-editor/src/components/ConfigPanel/{ConfigSection/ConfigSection.module.css => ConfigContent/ConfigContent.module.css} (54%)
 rename frontend/packages/process-editor/src/components/ConfigPanel/{ConfigSection/ConfigSection.test.tsx => ConfigContent/ConfigContent.test.tsx} (96%)
 rename frontend/packages/process-editor/src/components/ConfigPanel/{ConfigSection/ConfigSection.tsx => ConfigContent/ConfigContent.tsx} (86%)
 rename frontend/packages/process-editor/src/components/ConfigPanel/{ConfigSection => ConfigContent}/ConfigDetailsRow/ConfigDetailsRow.module.css (100%)
 rename frontend/packages/process-editor/src/components/ConfigPanel/{ConfigSection => ConfigContent}/ConfigDetailsRow/ConfigDetailsRow.test.tsx (100%)
 rename frontend/packages/process-editor/src/components/ConfigPanel/{ConfigSection => ConfigContent}/ConfigDetailsRow/ConfigDetailsRow.tsx (100%)
 rename frontend/packages/process-editor/src/components/ConfigPanel/{ConfigSection => ConfigContent}/ConfigDetailsRow/index.ts (100%)
 rename frontend/packages/process-editor/src/components/ConfigPanel/{ConfigSection => ConfigContent}/ConfigIcon/ConfigIcon.module.css (100%)
 rename frontend/packages/process-editor/src/components/ConfigPanel/{ConfigSection => ConfigContent}/ConfigIcon/ConfigIcon.tsx (100%)
 rename frontend/packages/process-editor/src/components/ConfigPanel/{ConfigSection => ConfigContent}/ConfigIcon/index.ts (100%)
 create mode 100644 frontend/packages/process-editor/src/components/ConfigPanel/ConfigContent/ConfigSectionWrapper/ConfigSectionWrapper.module.css
 create mode 100644 frontend/packages/process-editor/src/components/ConfigPanel/ConfigContent/ConfigSectionWrapper/ConfigSectionWrapper.tsx
 create mode 100644 frontend/packages/process-editor/src/components/ConfigPanel/ConfigContent/ConfigSectionWrapper/index.ts
 create mode 100644 frontend/packages/process-editor/src/components/ConfigPanel/ConfigContent/index.ts
 delete mode 100644 frontend/packages/process-editor/src/components/ConfigPanel/ConfigSection/index.ts

diff --git a/frontend/packages/process-editor/src/components/Canvas/VersionHelpText/VersionHelpText.tsx b/frontend/packages/process-editor/src/components/Canvas/VersionHelpText/VersionHelpText.tsx
index 22031348dd6..584072e99da 100644
--- a/frontend/packages/process-editor/src/components/Canvas/VersionHelpText/VersionHelpText.tsx
+++ b/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>
diff --git a/frontend/packages/process-editor/src/components/ConfigPanel/ConfigSection/ConfigSection.module.css b/frontend/packages/process-editor/src/components/ConfigPanel/ConfigContent/ConfigContent.module.css
similarity index 54%
rename from frontend/packages/process-editor/src/components/ConfigPanel/ConfigSection/ConfigSection.module.css
rename to frontend/packages/process-editor/src/components/ConfigPanel/ConfigContent/ConfigContent.module.css
index 564d0cef872..c9098953650 100644
--- a/frontend/packages/process-editor/src/components/ConfigPanel/ConfigSection/ConfigSection.module.css
+++ b/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;
-}
diff --git a/frontend/packages/process-editor/src/components/ConfigPanel/ConfigSection/ConfigSection.test.tsx b/frontend/packages/process-editor/src/components/ConfigPanel/ConfigContent/ConfigContent.test.tsx
similarity index 96%
rename from frontend/packages/process-editor/src/components/ConfigPanel/ConfigSection/ConfigSection.test.tsx
rename to frontend/packages/process-editor/src/components/ConfigPanel/ConfigContent/ConfigContent.test.tsx
index 8c2ab45029c..cc5a137c893 100644
--- a/frontend/packages/process-editor/src/components/ConfigPanel/ConfigSection/ConfigSection.test.tsx
+++ b/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>,
   );
 };
diff --git a/frontend/packages/process-editor/src/components/ConfigPanel/ConfigSection/ConfigSection.tsx b/frontend/packages/process-editor/src/components/ConfigPanel/ConfigContent/ConfigContent.tsx
similarity index 86%
rename from frontend/packages/process-editor/src/components/ConfigPanel/ConfigSection/ConfigSection.tsx
rename to frontend/packages/process-editor/src/components/ConfigPanel/ConfigContent/ConfigContent.tsx
index 9fb760ad4f1..95803712790 100644
--- a/frontend/packages/process-editor/src/components/ConfigPanel/ConfigSection/ConfigSection.tsx
+++ b/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>
     </>
   );
 };
diff --git a/frontend/packages/process-editor/src/components/ConfigPanel/ConfigSection/ConfigDetailsRow/ConfigDetailsRow.module.css b/frontend/packages/process-editor/src/components/ConfigPanel/ConfigContent/ConfigDetailsRow/ConfigDetailsRow.module.css
similarity index 100%
rename from frontend/packages/process-editor/src/components/ConfigPanel/ConfigSection/ConfigDetailsRow/ConfigDetailsRow.module.css
rename to frontend/packages/process-editor/src/components/ConfigPanel/ConfigContent/ConfigDetailsRow/ConfigDetailsRow.module.css
diff --git a/frontend/packages/process-editor/src/components/ConfigPanel/ConfigSection/ConfigDetailsRow/ConfigDetailsRow.test.tsx b/frontend/packages/process-editor/src/components/ConfigPanel/ConfigContent/ConfigDetailsRow/ConfigDetailsRow.test.tsx
similarity index 100%
rename from frontend/packages/process-editor/src/components/ConfigPanel/ConfigSection/ConfigDetailsRow/ConfigDetailsRow.test.tsx
rename to frontend/packages/process-editor/src/components/ConfigPanel/ConfigContent/ConfigDetailsRow/ConfigDetailsRow.test.tsx
diff --git a/frontend/packages/process-editor/src/components/ConfigPanel/ConfigSection/ConfigDetailsRow/ConfigDetailsRow.tsx b/frontend/packages/process-editor/src/components/ConfigPanel/ConfigContent/ConfigDetailsRow/ConfigDetailsRow.tsx
similarity index 100%
rename from frontend/packages/process-editor/src/components/ConfigPanel/ConfigSection/ConfigDetailsRow/ConfigDetailsRow.tsx
rename to frontend/packages/process-editor/src/components/ConfigPanel/ConfigContent/ConfigDetailsRow/ConfigDetailsRow.tsx
diff --git a/frontend/packages/process-editor/src/components/ConfigPanel/ConfigSection/ConfigDetailsRow/index.ts b/frontend/packages/process-editor/src/components/ConfigPanel/ConfigContent/ConfigDetailsRow/index.ts
similarity index 100%
rename from frontend/packages/process-editor/src/components/ConfigPanel/ConfigSection/ConfigDetailsRow/index.ts
rename to frontend/packages/process-editor/src/components/ConfigPanel/ConfigContent/ConfigDetailsRow/index.ts
diff --git a/frontend/packages/process-editor/src/components/ConfigPanel/ConfigSection/ConfigIcon/ConfigIcon.module.css b/frontend/packages/process-editor/src/components/ConfigPanel/ConfigContent/ConfigIcon/ConfigIcon.module.css
similarity index 100%
rename from frontend/packages/process-editor/src/components/ConfigPanel/ConfigSection/ConfigIcon/ConfigIcon.module.css
rename to frontend/packages/process-editor/src/components/ConfigPanel/ConfigContent/ConfigIcon/ConfigIcon.module.css
diff --git a/frontend/packages/process-editor/src/components/ConfigPanel/ConfigSection/ConfigIcon/ConfigIcon.tsx b/frontend/packages/process-editor/src/components/ConfigPanel/ConfigContent/ConfigIcon/ConfigIcon.tsx
similarity index 100%
rename from frontend/packages/process-editor/src/components/ConfigPanel/ConfigSection/ConfigIcon/ConfigIcon.tsx
rename to frontend/packages/process-editor/src/components/ConfigPanel/ConfigContent/ConfigIcon/ConfigIcon.tsx
diff --git a/frontend/packages/process-editor/src/components/ConfigPanel/ConfigSection/ConfigIcon/index.ts b/frontend/packages/process-editor/src/components/ConfigPanel/ConfigContent/ConfigIcon/index.ts
similarity index 100%
rename from frontend/packages/process-editor/src/components/ConfigPanel/ConfigSection/ConfigIcon/index.ts
rename to frontend/packages/process-editor/src/components/ConfigPanel/ConfigContent/ConfigIcon/index.ts
diff --git a/frontend/packages/process-editor/src/components/ConfigPanel/ConfigContent/ConfigSectionWrapper/ConfigSectionWrapper.module.css b/frontend/packages/process-editor/src/components/ConfigPanel/ConfigContent/ConfigSectionWrapper/ConfigSectionWrapper.module.css
new file mode 100644
index 00000000000..9b9af439fcf
--- /dev/null
+++ b/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;
+}
diff --git a/frontend/packages/process-editor/src/components/ConfigPanel/ConfigContent/ConfigSectionWrapper/ConfigSectionWrapper.tsx b/frontend/packages/process-editor/src/components/ConfigPanel/ConfigContent/ConfigSectionWrapper/ConfigSectionWrapper.tsx
new file mode 100644
index 00000000000..c7f376231e6
--- /dev/null
+++ b/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 />
+    </>
+  );
+};
diff --git a/frontend/packages/process-editor/src/components/ConfigPanel/ConfigContent/ConfigSectionWrapper/index.ts b/frontend/packages/process-editor/src/components/ConfigPanel/ConfigContent/ConfigSectionWrapper/index.ts
new file mode 100644
index 00000000000..3b5b0d80b3c
--- /dev/null
+++ b/frontend/packages/process-editor/src/components/ConfigPanel/ConfigContent/ConfigSectionWrapper/index.ts
@@ -0,0 +1 @@
+export { ConfigSectionWrapper } from './ConfigSectionWrapper';
diff --git a/frontend/packages/process-editor/src/components/ConfigPanel/ConfigContent/index.ts b/frontend/packages/process-editor/src/components/ConfigPanel/ConfigContent/index.ts
new file mode 100644
index 00000000000..92e87a3f2da
--- /dev/null
+++ b/frontend/packages/process-editor/src/components/ConfigPanel/ConfigContent/index.ts
@@ -0,0 +1 @@
+export { ConfigContent } from './ConfigContent';
diff --git a/frontend/packages/process-editor/src/components/ConfigPanel/ConfigPanel.module.css b/frontend/packages/process-editor/src/components/ConfigPanel/ConfigPanel.module.css
index 894c4708ab9..bcc6becd43a 100644
--- a/frontend/packages/process-editor/src/components/ConfigPanel/ConfigPanel.module.css
+++ b/frontend/packages/process-editor/src/components/ConfigPanel/ConfigPanel.module.css
@@ -1,6 +1,4 @@
 .configPanel {
-  --margin-inline: 1rem;
-
   background-color: var(--fds-semantic-surface-neutral-subtle);
   flex: 1;
   overflow-y: scroll;
@@ -8,6 +6,6 @@
 }
 
 .configPanelParagraph {
-  margin-inline: var(--margin-inline);
+  margin-inline: 1rem;
   margin-top: 1rem;
 }
diff --git a/frontend/packages/process-editor/src/components/ConfigPanel/ConfigPanel.tsx b/frontend/packages/process-editor/src/components/ConfigPanel/ConfigPanel.tsx
index ab517cc8826..70bc05e3194 100644
--- a/frontend/packages/process-editor/src/components/ConfigPanel/ConfigPanel.tsx
+++ b/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'>
diff --git a/frontend/packages/process-editor/src/components/ConfigPanel/ConfigSection/index.ts b/frontend/packages/process-editor/src/components/ConfigPanel/ConfigSection/index.ts
deleted file mode 100644
index 988cf2f7440..00000000000
--- a/frontend/packages/process-editor/src/components/ConfigPanel/ConfigSection/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { ConfigSection } from './ConfigSection';
diff --git a/frontend/packages/process-editor/src/types/BpmnBusinessObjectEditor.ts b/frontend/packages/process-editor/src/types/BpmnBusinessObjectEditor.ts
index 875ac9be7ee..5dca17a793b 100644
--- a/frontend/packages/process-editor/src/types/BpmnBusinessObjectEditor.ts
+++ b/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 {
diff --git a/frontend/packages/process-editor/src/utils/hookUtils/hookUtils.ts b/frontend/packages/process-editor/src/utils/hookUtils/hookUtils.ts
index ac8e48853b6..0a22aace73a 100644
--- a/frontend/packages/process-editor/src/utils/hookUtils/hookUtils.ts
+++ b/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;