feat: hide fields behind buttons dataset field

apps/dataset-catalog/components/dataset-form/components/about-section.tsx

@@ -1,10 +1,11 @@
 import { Dataset } from '@catalog-frontend/types';
-import { FormikLanguageFieldset, TextareaWithPrefix, TitleWithTag } from '@catalog-frontend/ui';
+import { AddButton, FormikLanguageFieldset, TextareaWithPrefix, TitleWithTag } from '@catalog-frontend/ui';
 import { localization } from '@catalog-frontend/utils';
 import { Textfield, Fieldset } from '@digdir/designsystemet-react';
-import { Field, useFormikContext } from 'formik';
+import { Field, FieldArray, 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';
 
 export const AboutSection = () => {
   const errors = useFormikContext<Dataset>()?.errors;
@@ -46,32 +47,11 @@ export const AboutSection = () => {
 
       <Field
         as={Textfield}
+        size='sm'
         type='date'
         name='issued'
         label={localization.datasetForm.heading.releaseDate}
       />
-
-      {/* <FieldArray name='landingPage'>
-        {(arrayHelpers) => (
-          <>
-            {arrayHelpers.form.values.landingPage &&
-              arrayHelpers.form.values.landingPage.map((_: string, index: number) => (
-                <div key={`landingPage-${index}`}>
-                  <FieldsetWithDelete onDelete={() => arrayHelpers.remove(index)}>
-                    <Field
-                      name={`landingPage[${index}]`}
-                      label={localization.datasetForm.heading.landingPage}
-                      as={Textfield}
-                      error={errors?.landingPage?.[index]}
-                    />
-                  </FieldsetWithDelete>
-                </div>
-              ))}
-
-            <AddButton onClick={() => arrayHelpers.push('')}>{localization.button.addUrl}</AddButton>
-          </>
-        )}
-      </FieldArray> */}
     </>
   );
 };

apps/dataset-catalog/components/dataset-form/components/access-rights.tsx/access-rights-uri-table.tsx

@@ -137,7 +137,6 @@ const FieldModal = ({ template, formType, onSuccess, initialType = 'legalBasisFo
             validationSchema={uriWithLabelSchema}
             onSubmit={(formValues, { setSubmitting }) => {
               const trimmedValues = trimObjectWhitespace(formValues);
-              console.log('ny', { type: legalBasis, uriWithLabel: trimmedValues });
               onSuccess({ type: legalBasis, uriWithLabel: trimmedValues });
               setSubmitting(false);
               setSubmitted(true);

apps/dataset-catalog/components/dataset-form/components/dataset-form-qualified-attributions-section.tsx

@@ -45,31 +45,28 @@ export const QualifiedAttributionsSection = () => {
   ];
 
   return (
-    <>
-      {!isLoading && (
-        <Combobox
-          onValueChange={(selectedValues: string[]) => setFieldValue('qualifiedAttributions', selectedValues)}
-          onChange={(input: any) => debouncedSearch(input.target.value)}
-          loading={searching}
-          multiple
-          value={values.qualifiedAttributions}
-          placeholder={`${localization.search.search}...`}
-          filter={() => true} // Deactivate filter, handled by backend
-          virtual
-          label={localization.datasetForm.heading.qualifiedAttributions}
+    <Combobox
+      size='sm'
+      onValueChange={(selectedValues: string[]) => setFieldValue('qualifiedAttributions', selectedValues)}
+      onChange={(input: any) => debouncedSearch(input.target.value)}
+      loading={searching}
+      multiple
+      value={values.qualifiedAttributions}
+      placeholder={`${localization.search.search}...`}
+      filter={() => true} // Deactivate filter, handled by backend
+      virtual
+      label={localization.datasetForm.heading.qualifiedAttributions}
+    >
+      <Combobox.Empty>{`${localization.search.noHits}...`}</Combobox.Empty>
+      {comboboxOptions.map((org) => (
+        <Combobox.Option
+          value={org.organisasjonsnummer}
+          key={org.organisasjonsnummer}
+          description={org.organisasjonsnummer}
         >
-          <Combobox.Empty>{`${localization.search.noHits}...`}</Combobox.Empty>
-          {comboboxOptions.map((org) => (
-            <Combobox.Option
-              value={org.organisasjonsnummer}
-              key={org.organisasjonsnummer}
-              description={org.organisasjonsnummer}
-            >
-              {org.navn}
-            </Combobox.Option>
-          ))}
-        </Combobox>
-      )}
-    </>
+          {org.navn}
+        </Combobox.Option>
+      ))}
+    </Combobox>
   );
 };

apps/dataset-catalog/components/dataset-form/components/details-section/details-section.tsx

@@ -0,0 +1,32 @@
+'use client';
+
+import { FieldsetDivider } from '@catalog-frontend/ui';
+import { useFormikContext } from 'formik';
+import { Dataset, ReferenceData } from '@catalog-frontend/types';
+import { RecommendedDetailFields } from './recommended-detail-fields';
+import { HiddenDetailFields } from './hidden-detail-fields';
+
+type Props = {
+  referenceDataEnv: string;
+  referenceData: ReferenceData;
+};
+
+export const DetailsSection = ({ referenceDataEnv, referenceData }: Props) => {
+  const { datasetTypes, provenanceStatements, languages, frequencies } = referenceData;
+  return (
+    <>
+      <RecommendedDetailFields
+        referenceDataEnv={referenceDataEnv}
+        languages={languages}
+      />
+      <FieldsetDivider />
+      <div>
+        <HiddenDetailFields
+          datasetTypes={datasetTypes}
+          provenanceStatements={provenanceStatements}
+          frequencies={frequencies}
+        />
+      </div>
+    </>
+  );
+};

apps/dataset-catalog/components/dataset-form/components/details-section/details.module.css

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