From e79230bd05d5071440b6eedaac1a7720f32854c5 Mon Sep 17 00:00:00 2001
From: Nils Ove Tendenes <nils.ove@tendenes.com>
Date: Thu, 16 Jan 2025 09:36:28 +0100
Subject: [PATCH] feat: add data service endpointDescriptions to endpoint
 section

---
 .../data-service-form-endpoint-section.tsx    | 28 --------
 .../components/endpoint-section.tsx           | 71 +++++++++++++++++++
 .../components/endpoint.module.css            |  3 +
 ...rm-title-section.tsx => title-section.tsx} |  0
 .../components/data-service-form/index.tsx    |  4 +-
 .../utils/data-service-initial-values.tsx     |  1 +
 .../fieldset-with-delete.module.scss          | 20 ++++++
 .../components/fieldset-with-delete/index.tsx | 23 ++++++
 libs/types/src/lib/data-service.ts            |  1 +
 .../src/lib/language/data.service.form.nb.ts  |  3 +
 10 files changed, 124 insertions(+), 30 deletions(-)
 delete mode 100644 apps/data-service-catalog/components/data-service-form/components/data-service-form-endpoint-section.tsx
 create mode 100644 apps/data-service-catalog/components/data-service-form/components/endpoint-section.tsx
 create mode 100644 apps/data-service-catalog/components/data-service-form/components/endpoint.module.css
 rename apps/data-service-catalog/components/data-service-form/components/{data-service-form-title-section.tsx => title-section.tsx} (100%)
 create mode 100644 apps/data-service-catalog/components/fieldset-with-delete/fieldset-with-delete.module.scss
 create mode 100644 apps/data-service-catalog/components/fieldset-with-delete/index.tsx

diff --git a/apps/data-service-catalog/components/data-service-form/components/data-service-form-endpoint-section.tsx b/apps/data-service-catalog/components/data-service-form/components/data-service-form-endpoint-section.tsx
deleted file mode 100644
index a38f58609..000000000
--- a/apps/data-service-catalog/components/data-service-form/components/data-service-form-endpoint-section.tsx
+++ /dev/null
@@ -1,28 +0,0 @@
-import { DataService } from '@catalog-frontend/types';
-import { LabelWithHelpTextAndTag } from '@catalog-frontend/ui';
-import { localization } from '@catalog-frontend/utils';
-import { Textfield } from '@digdir/designsystemet-react';
-import { FastField, useFormikContext } from 'formik';
-
-export const EndpointSection = () => {
-  const errors = useFormikContext<DataService>()?.errors;
-  return (
-    <>
-      <FastField
-        name='endpointUrl'
-        as={Textfield}
-        size='sm'
-        label={
-          <LabelWithHelpTextAndTag
-            tagTitle={localization.tag.required}
-            helpText={localization.dataServiceForm.helptext.endpoint}
-            helpAriaLabel={localization.dataServiceForm.fieldLabel.endpoint}
-          >
-            {localization.dataServiceForm.fieldLabel.endpoint}
-          </LabelWithHelpTextAndTag>
-        }
-        error={errors?.endpointUrl}
-      />
-    </>
-  );
-};
diff --git a/apps/data-service-catalog/components/data-service-form/components/endpoint-section.tsx b/apps/data-service-catalog/components/data-service-form/components/endpoint-section.tsx
new file mode 100644
index 000000000..ecc3ccb56
--- /dev/null
+++ b/apps/data-service-catalog/components/data-service-form/components/endpoint-section.tsx
@@ -0,0 +1,71 @@
+import { DataService } from '@catalog-frontend/types';
+import { AddButton, LabelWithHelpTextAndTag } from '@catalog-frontend/ui';
+import { localization } from '@catalog-frontend/utils';
+import { Textfield } from '@digdir/designsystemet-react';
+import { FastField, FieldArray, useFormikContext } from 'formik';
+import FieldsetWithDelete from '../../fieldset-with-delete';
+import styles from './endpoint.module.css';
+
+export const EndpointSection = () => {
+  const errors = useFormikContext<DataService>()?.errors;
+  return (
+    <>
+      <FastField
+        name='endpointUrl'
+        as={Textfield}
+        size='sm'
+        label={
+          <LabelWithHelpTextAndTag
+            tagTitle={localization.tag.required}
+            helpText={localization.dataServiceForm.helptext.endpoint}
+            helpAriaLabel={localization.dataServiceForm.fieldLabel.endpoint}
+          >
+            {localization.dataServiceForm.fieldLabel.endpoint}
+          </LabelWithHelpTextAndTag>
+        }
+        error={errors?.endpointUrl}
+      />
+
+      <div>
+        <FieldArray name='endpointDescriptions'>
+          {(arrayHelpers) => (
+            <>
+              {arrayHelpers.form.values.endpointDescriptions &&
+                arrayHelpers.form.values.endpointDescriptions.map((_, index: number) => (
+                  <div
+                    key={`endpointDescriptions-${index}`}
+                    className={styles.padding}
+                  >
+                    <FieldsetWithDelete onDelete={() => arrayHelpers.remove(index)}>
+                      <FastField
+                        name={`endpointDescriptions[${index}]`}
+                        label={
+                          index < 1 ? (
+                            <LabelWithHelpTextAndTag
+                              helpAriaLabel={localization.dataServiceForm.fieldLabel.endpointDescriptions}
+                              helpText={localization.dataServiceForm.helptext.endpointDescriptions}
+                            >
+                              {localization.dataServiceForm.fieldLabel.endpointDescriptions}
+                            </LabelWithHelpTextAndTag>
+                          ) : (
+                            ''
+                          )
+                        }
+                        as={Textfield}
+                        size='sm'
+                        error={errors?.endpointDescriptions?.[index]}
+                      />
+                    </FieldsetWithDelete>
+                  </div>
+                ))}
+
+              <AddButton onClick={() => arrayHelpers.push('')}>
+                {`${localization.dataServiceForm.fieldLabel.endpointDescriptions}`}
+              </AddButton>
+            </>
+          )}
+        </FieldArray>
+      </div>
+    </>
+  );
+};
diff --git a/apps/data-service-catalog/components/data-service-form/components/endpoint.module.css b/apps/data-service-catalog/components/data-service-form/components/endpoint.module.css
new file mode 100644
index 000000000..b11177c65
--- /dev/null
+++ b/apps/data-service-catalog/components/data-service-form/components/endpoint.module.css
@@ -0,0 +1,3 @@
+.padding {
+  padding-bottom: 0.5rem;
+}
diff --git a/apps/data-service-catalog/components/data-service-form/components/data-service-form-title-section.tsx b/apps/data-service-catalog/components/data-service-form/components/title-section.tsx
similarity index 100%
rename from apps/data-service-catalog/components/data-service-form/components/data-service-form-title-section.tsx
rename to apps/data-service-catalog/components/data-service-form/components/title-section.tsx
diff --git a/apps/data-service-catalog/components/data-service-form/index.tsx b/apps/data-service-catalog/components/data-service-form/index.tsx
index b4a44976a..a51557837 100644
--- a/apps/data-service-catalog/components/data-service-form/index.tsx
+++ b/apps/data-service-catalog/components/data-service-form/index.tsx
@@ -4,12 +4,12 @@ import { DataService, DataServiceToBeCreated } from '@catalog-frontend/types';
 import { FormLayout, StickyFooterBar, useWarnIfUnsavedChanges } from '@catalog-frontend/ui';
 import { Formik, Form } from 'formik';
 import { useState } from 'react';
-import { TitleSection } from './components/data-service-form-title-section';
+import { TitleSection } from './components/title-section';
 import { useParams, useRouter } from 'next/navigation';
 import { createDataService, updateDataService } from '../../app/actions/actions';
 import { Button } from '@digdir/designsystemet-react';
 import styles from './data-service-form.module.css';
-import { EndpointSection } from './components/data-service-form-endpoint-section';
+import { EndpointSection } from './components/endpoint-section';
 
 type Props = {
   initialValues: DataService | DataServiceToBeCreated;
diff --git a/apps/data-service-catalog/components/data-service-form/utils/data-service-initial-values.tsx b/apps/data-service-catalog/components/data-service-form/utils/data-service-initial-values.tsx
index 26a8e7bae..43e31b787 100644
--- a/apps/data-service-catalog/components/data-service-form/utils/data-service-initial-values.tsx
+++ b/apps/data-service-catalog/components/data-service-form/utils/data-service-initial-values.tsx
@@ -11,5 +11,6 @@ export const dataServiceToBeCreatedTemplate = (): DataServiceToBeCreated => {
     modified: '',
     status: '',
     endpointUrl: '',
+    endpointDescriptions: [],
   };
 };
diff --git a/apps/data-service-catalog/components/fieldset-with-delete/fieldset-with-delete.module.scss b/apps/data-service-catalog/components/fieldset-with-delete/fieldset-with-delete.module.scss
new file mode 100644
index 000000000..97b830639
--- /dev/null
+++ b/apps/data-service-catalog/components/fieldset-with-delete/fieldset-with-delete.module.scss
@@ -0,0 +1,20 @@
+.content {
+  display: flex;
+  align-items: flex-end;
+}
+
+.singleChild {
+  width: 100%;
+}
+
+.twoChildren {
+  display: grid;
+  grid-template-columns: 49% 49%;
+  gap: 2%;
+  width: 100%;
+}
+
+.deleteButton {
+  height: fit-content;
+  width: fit-content;
+}
diff --git a/apps/data-service-catalog/components/fieldset-with-delete/index.tsx b/apps/data-service-catalog/components/fieldset-with-delete/index.tsx
new file mode 100644
index 000000000..dc0030738
--- /dev/null
+++ b/apps/data-service-catalog/components/fieldset-with-delete/index.tsx
@@ -0,0 +1,23 @@
+import React, { PropsWithChildren } from 'react';
+import { DeleteButton } from '@catalog-frontend/ui';
+import styles from './fieldset-with-delete.module.scss';
+
+type Props = {
+  onDelete: () => void;
+} & PropsWithChildren;
+
+export const FieldsetWithDelete = ({ children, onDelete }: Props) => {
+  const childArray = React.Children.toArray(children).filter(Boolean);
+
+  return (
+    <div className={styles.content}>
+      <div className={childArray.length === 1 ? styles.singleChild : styles.twoChildren}>{children}</div>
+      <DeleteButton
+        className={styles.deleteButton}
+        onClick={onDelete}
+      />
+    </div>
+  );
+};
+
+export default FieldsetWithDelete;
diff --git a/libs/types/src/lib/data-service.ts b/libs/types/src/lib/data-service.ts
index 8881e1dbc..ddec6446f 100644
--- a/libs/types/src/lib/data-service.ts
+++ b/libs/types/src/lib/data-service.ts
@@ -11,4 +11,5 @@ export interface DataServiceToBeCreated {
   modified: string;
   status: string;
   endpointUrl: string;
+  endpointDescriptions: string[];
 }
diff --git a/libs/utils/src/lib/language/data.service.form.nb.ts b/libs/utils/src/lib/language/data.service.form.nb.ts
index e4ef8e5b5..7825b716c 100644
--- a/libs/utils/src/lib/language/data.service.form.nb.ts
+++ b/libs/utils/src/lib/language/data.service.form.nb.ts
@@ -3,6 +3,8 @@ export const dataServiceFormNb = {
     title: 'Tittelen skal være kortfattet, kunne stå alene og gi mening. Forkortelser skal skrives helt ut.',
     description: 'Beskrivelsen skal være kortfattet. Det bør fremgå hva som er formålet til APIet.',
     endpoint: 'Rotplassering eller primært endepunkt for APIet.',
+    endpointDescriptions:
+      'Legg til lenke til spesifikasjon av APIet. F.eks OAS, Swagger, GraphQL eller lignende.',
   },
   heading: {
     titleAndDescription: 'Tittel og beskrivelse',
@@ -12,6 +14,7 @@ export const dataServiceFormNb = {
     description: 'Beskrivelse av APIet',
     title: 'Tittel',
     endpoint: 'EndepunktURL',
+    endpointDescriptions: 'Endepunktsbeskrivelse',
   },
   alert: {
     confirmDelete: 'Er du sikker på at du vil slette API-beskrivelsen?',