feat: move relations to table dataset form

Informasjonsforvaltning · Dec 19, 2024 · 04d3b4e · 04d3b4e
1 parent 6dbddf7
commit 04d3b4e
Show file tree

Hide file tree

Showing 13 changed files with 423 additions and 120 deletions.
diff --git a/apps/dataset-catalog/components/dataset-form/components/about-section.tsx b/apps/dataset-catalog/components/dataset-form/components/about-section.tsx
@@ -1,11 +1,10 @@
 import { Dataset } from '@catalog-frontend/types';
-import { AddButton, FormikLanguageFieldset, TextareaWithPrefix, TitleWithTag } from '@catalog-frontend/ui';
+import { FormikLanguageFieldset, TextareaWithPrefix, TitleWithTag } from '@catalog-frontend/ui';
 import { localization } from '@catalog-frontend/utils';
 import { Textfield, Fieldset } from '@digdir/designsystemet-react';
-import { Field, FieldArray, useFormikContext } from 'formik';
+import { Field, useFormikContext } from 'formik';
 import { FieldsetDivider } from '@catalog-frontend/ui';
-import { AccessRightsForm } from './access-rights.tsx/dataset-form-access-rights-section';
-import FieldsetWithDelete from '../../fieldset-with-delete';
+import { AccessRightFields } from './access-rights.tsx/dataset-form-access-rights-section';
 
 export const AboutSection = () => {
   const errors = useFormikContext<Dataset>()?.errors;
@@ -41,7 +40,8 @@ export const AboutSection = () => {
       </Fieldset>
 
       <FieldsetDivider />
-      <AccessRightsForm />
+
+      <AccessRightFields />
 
       <FieldsetDivider />
 

diff --git a/...-catalog/components/dataset-form/components/access-rights.tsx/access-rights-uri-table.tsx b/...-catalog/components/dataset-form/components/access-rights.tsx/access-rights-uri-table.tsx
@@ -1,5 +1,5 @@
 import { Dataset, UriWithLabel } from '@catalog-frontend/types';
-import { AddButton, DeleteButton, EditButton, FormikLanguageFieldset } from '@catalog-frontend/ui';
+import { AddButton, DeleteButton, EditButton, FieldsetDivider, FormikLanguageFieldset } from '@catalog-frontend/ui';
 import { getTranslateText, localization, trimObjectWhitespace } from '@catalog-frontend/utils';
 import { Button, Divider, Label, Modal, Radio, Table, Textfield } from '@digdir/designsystemet-react';
 import { FastField, Formik, useFormikContext } from 'formik';
@@ -8,6 +8,18 @@ import { useRef, useState } from 'react';
 import _ from 'lodash';
 import { uriWithLabelSchema } from '../../utils/validation-schema';
 
+type LegalBasis = {
+  type: string;
+  uriWithLabel: UriWithLabel;
+};
+
+type ModalProps = {
+  formType: 'new' | 'edit';
+  onSuccess: (values: LegalBasis) => void;
+  template: UriWithLabel;
+  initialType?: string;
+};
+
 const hasNoFieldValues = (values: UriWithLabel) => {
   if (!values) return true;
   return _.isEmpty(_.trim(values.uri)) && _.isEmpty(_.pickBy(values.prefLabel, _.identity));
@@ -36,26 +48,22 @@ export const AccessRightsUriTable = () => {
     })),
   ];
 
-  const getFieldName = (formValues: LegalBasis): string => {
-    const fieldMap: Record<string, UriWithLabel[]> = {
-      legalBasisForRestriction: values.legalBasisForRestriction ?? [],
-      legalBasisForProcessing: values.legalBasisForProcessing ?? [],
-      legalBasisForAccess: values.legalBasisForAccess ?? [],
-    };
-
-    const fieldArray = fieldMap[formValues.type];
-    if (!fieldArray) {
-      throw new Error(`Invalid type: ${formValues.type}`);
-    }
-
-    return fieldArray.length > 0 && !hasNoFieldValues(fieldArray[0])
-      ? `${formValues.type}[${fieldArray.length}]`
-      : `${formValues.type}[0]`;
+  const getField = (formValues: LegalBasis): string => {
+    const fieldValues =
+      {
+        legalBasisForRestriction: values.legalBasisForRestriction,
+        legalBasisForProcessing: values.legalBasisForProcessing,
+        legalBasisForAccess: values.legalBasisForAccess,
+      }[formValues.type] ?? [];
+
+    const hasValues = fieldValues.length > 0 && !hasNoFieldValues(fieldValues[0]);
+
+    return `${formValues.type}[${hasValues ? fieldValues.length : 0}]`;
   };
 
   return (
-    <div>
-      <Label>{localization.datasetForm.fieldLabel.legalBasis}</Label>
+    <>
+      <Label size='sm'>{localization.datasetForm.fieldLabel.legalBasis}</Label>
 
       {allLegalBases && allLegalBases?.length > 0 && !hasNoFieldValues(allLegalBases[0].uriWithLabel) && (
         <Table size='sm'>
@@ -98,25 +106,13 @@ export const AccessRightsUriTable = () => {
         <FieldModal
           template={{ prefLabel: { nb: '' }, uri: '' }}
           formType='new'
-          onSuccess={(formValues: LegalBasis) => setFieldValue(getFieldName(formValues), formValues.uriWithLabel)}
+          onSuccess={(formValues: LegalBasis) => setFieldValue(getField(formValues), formValues.uriWithLabel)}
         />
       </div>
-    </div>
+    </>
   );
 };
 
-type LegalBasis = {
-  type: string;
-  uriWithLabel: UriWithLabel;
-};
-
-interface ModalProps {
-  formType: 'new' | 'edit';
-  onSuccess: (values: LegalBasis) => void;
-  template: UriWithLabel;
-  initialType?: string;
-}
-
 const FieldModal = ({ template, formType, onSuccess, initialType = 'legalBasisForRestriction' }: ModalProps) => {
   const [submitted, setSubmitted] = useState(false);
   const modalRef = useRef<HTMLDialogElement>(null);
@@ -176,9 +172,8 @@ const FieldModal = ({ template, formType, onSuccess, initialType = 'legalBasisFo
                     name='prefLabel'
                     legend={localization.title}
                   />
-                  <div>
-                    <Divider color='subtle' />
-                  </div>
+
+                  <FieldsetDivider />
 
                   <FastField
                     name='uri'

diff --git a/...mponents/dataset-form/components/access-rights.tsx/dataset-form-access-rights-section.tsx b/...mponents/dataset-form/components/access-rights.tsx/dataset-form-access-rights-section.tsx
@@ -1,36 +1,45 @@
 import { AccessRights, Dataset } from '@catalog-frontend/types';
 import { TitleWithTag } from '@catalog-frontend/ui';
 import { localization } from '@catalog-frontend/utils';
-import { NativeSelect } from '@digdir/designsystemet-react';
-import { Field, FormikHelpers, useFormikContext } from 'formik';
+import { Card, Combobox } from '@digdir/designsystemet-react';
+import { useFormikContext } from 'formik';
 import { AccessRightsUriTable } from './access-rights-uri-table';
 
-export const AccessRightsForm = () => {
-  const { values } = useFormikContext<Dataset>();
+const accessRightsOptions = [
+  { value: AccessRights.PUBLIC, label: localization.datasetForm.accessRight.public },
+  { value: AccessRights.RESTRICTED, label: localization.datasetForm.accessRight.restricted },
+  { value: AccessRights.NON_PUBLIC, label: localization.datasetForm.accessRight.nonPublic },
+];
+
+export const AccessRightFields = () => {
+  const { values, setFieldValue } = useFormikContext<Dataset>();
+
   return (
-    <>
-      <Field name='accessRights.uri'>
-        {({ field, form }: { field: any; form: FormikHelpers<Dataset> }) => (
-          <NativeSelect
-            {...field}
-            label={
-              <TitleWithTag
-                title={localization.access}
-                tagColor='info'
-                tagTitle={localization.tag.recommended}
-              />
-            }
-          >
-            <option value={''}>{`${localization.choose}...`}</option>
-            <option value={AccessRights.PUBLIC}>{localization.datasetForm.accessRight.public}</option>
-            <option value={AccessRights.RESTRICTED}>{localization.datasetForm.accessRight.restricted}</option>
-            <option value={AccessRights.NON_PUBLIC}>{localization.datasetForm.accessRight.nonPublic}</option>
-          </NativeSelect>
-        )}
-      </Field>
+    <Card>
+      <div>
+        <TitleWithTag
+          title={localization.access}
+          tagColor='info'
+          tagTitle={localization.tag.recommended}
+        />
+        <Combobox
+          size='sm'
+          value={[values.accessRights?.uri || AccessRights.PUBLIC]}
+          onValueChange={(values) => setFieldValue('accessRights.uri', values.toString())}
+        >
+          {accessRightsOptions.map((option) => (
+            <Combobox.Option
+              key={option.value}
+              value={option.value}
+            >
+              {option.label}
+            </Combobox.Option>
+          ))}
+        </Combobox>
+      </div>
 
       {(values.accessRights?.uri === AccessRights.RESTRICTED ||
         values.accessRights?.uri === AccessRights.NON_PUBLIC) && <AccessRightsUriTable />}
-    </>
+    </Card>
   );
 };
diff --git a/apps/dataset-catalog/components/dataset-form/components/details-section/details-section.tsx b/apps/dataset-catalog/components/dataset-form/components/details-section/details-section.tsx
@@ -1,8 +1,7 @@
 'use client';
 
 import { FieldsetDivider } from '@catalog-frontend/ui';
-import { useFormikContext } from 'formik';
-import { Dataset, ReferenceData } from '@catalog-frontend/types';
+import { ReferenceData } from '@catalog-frontend/types';
 import { RecommendedDetailFields } from './recommended-detail-fields';
 import { HiddenDetailFields } from './hidden-detail-fields';
 
@@ -20,13 +19,11 @@ export const DetailsSection = ({ referenceDataEnv, referenceData }: Props) => {
         languages={languages}
       />
       <FieldsetDivider />
-      <div>
-        <HiddenDetailFields
-          datasetTypes={datasetTypes}
-          provenanceStatements={provenanceStatements}
-          frequencies={frequencies}
-        />
-      </div>
+      <HiddenDetailFields
+        datasetTypes={datasetTypes}
+        provenanceStatements={provenanceStatements}
+        frequencies={frequencies}
+      />
     </>
   );
 };
diff --git a/...taset-catalog/components/dataset-form/components/details-section/hidden-detail-fields.tsx b/...taset-catalog/components/dataset-form/components/details-section/hidden-detail-fields.tsx
@@ -10,6 +10,7 @@ import { QualifiedAttributionsSection } from '../dataset-form-qualified-attribut
 import FieldsetWithDelete from '../../../fieldset-with-delete';
 import { ToggleFieldButton } from '../toggle-field-button';
 import { UriWithLabelFieldsetTable } from '../uri-with-label-field-set-table';
+import { useMemo } from 'react';
 
 type Props = {
   datasetTypes: ReferenceDataCode[];
@@ -20,14 +21,54 @@ type Props = {
 export const HiddenDetailFields = ({ datasetTypes, provenanceStatements, frequencies }: Props) => {
   const { setFieldValue, errors, values } = useFormikContext<Dataset>();
 
+  const datasetTypeOptions = useMemo(
+    () =>
+      datasetTypes.map((type) => (
+        <Combobox.Option
+          value={type.uri}
+          key={type.uri}
+          description={`${localization.code}: ${type.code}`}
+        >
+          {getTranslateText(type?.label)}
+        </Combobox.Option>
+      )),
+    [datasetTypes],
+  );
+
+  const provenanceOptions = useMemo(
+    () =>
+      provenanceStatements.map((item) => (
+        <Combobox.Option
+          value={item.uri}
+          key={item.uri}
+        >
+          {getTranslateText(item.label)}
+        </Combobox.Option>
+      )),
+    [provenanceStatements],
+  );
+
+  const frequencyOptions = useMemo(
+    () =>
+      frequencies.map((item) => (
+        <Combobox.Option
+          value={item.uri}
+          key={item.uri}
+        >
+          {capitalizeFirstLetter(getTranslateText(item.label).toString())}
+        </Combobox.Option>
+      )),
+    [frequencies],
+  );
+
   return (
     <>
       <div>
         <FieldArray name='landingPage'>
           {(arrayHelpers) => (
             <>
               {arrayHelpers.form.values.landingPage &&
-                arrayHelpers.form.values.landingPage.map((_: string, index: number) => (
+                arrayHelpers.form.values.landingPage.map((index: number) => (
                   <div
                     key={`landingPage-${index}`}
                     className={styles.padding}
@@ -67,15 +108,7 @@ export const HiddenDetailFields = ({ datasetTypes, provenanceStatements, frequen
           onValueChange={(value: string[]) => setFieldValue('type', value.toString())}
         >
           <Combobox.Option value={''}>{`${localization.choose}...`}</Combobox.Option>
-          {datasetTypes.map((type) => (
-            <Combobox.Option
-              value={type.uri}
-              key={type.uri}
-              description={`${localization.code}: ${type.code}`}
-            >
-              {getTranslateText(type?.label)}
-            </Combobox.Option>
-          ))}
+          {datasetTypeOptions}
         </Field>
       </ToggleFieldButton>
 
@@ -92,16 +125,10 @@ export const HiddenDetailFields = ({ datasetTypes, provenanceStatements, frequen
           size='sm'
         >
           <Combobox.Empty>{`${localization.choose}...`}</Combobox.Empty>
-          {provenanceStatements.map((item) => (
-            <Combobox.Option
-              value={item.uri}
-              key={item.uri}
-            >
-              {getTranslateText(item.label)}
-            </Combobox.Option>
-          ))}
+          {provenanceOptions}
         </Combobox>
       </ToggleFieldButton>
+
       <ToggleFieldButton
         fieldName='accrualPeriodicity.uri'
         fieldValues={values?.accrualPeriodicity?.uri}
@@ -116,14 +143,7 @@ export const HiddenDetailFields = ({ datasetTypes, provenanceStatements, frequen
           label={localization.datasetForm.heading.frequency}
         >
           <Combobox.Option value=''>{`${localization.choose}...`}</Combobox.Option>
-          {frequencies.map((item) => (
-            <Combobox.Option
-              value={item.uri}
-              key={item.uri}
-            >
-              {capitalizeFirstLetter(getTranslateText(item.label).toString())}
-            </Combobox.Option>
-          ))}
+          {frequencyOptions}
         </Combobox>
       </ToggleFieldButton>
 

diff --git a/...-catalog/components/dataset-form/components/details-section/recommended-detail-fields.tsx b/...-catalog/components/dataset-form/components/details-section/recommended-detail-fields.tsx
@@ -50,7 +50,6 @@ export const RecommendedDetailFields = ({ referenceDataEnv, languages }: Props)
   return (
     <>
       <Checkbox.Group
-        //legend={`${localization.choose}...`}
         onChange={(values) => setFieldValue('languageList', values)}
         value={values.languageList}
         legend={