feat: add data service endpointDescriptions to endpoint section

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

apps/data-service-catalog/components/data-service-form/components/endpoint.module.css

@@ -0,0 +1,3 @@
+.padding {
+  padding-bottom: 0.5rem;
+}

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;

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: [],
   };
 };

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

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;

libs/types/src/lib/data-service.ts

@@ -11,4 +11,5 @@ export interface DataServiceToBeCreated {
   modified: string;
   status: string;
   endpointUrl: string;
+  endpointDescriptions: string[];
 }

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?',