From 7595171e19ed0eb832501dbb9e0b10d558bdc7ba Mon Sep 17 00:00:00 2001 From: hegeaal Date: Wed, 27 Nov 2024 18:18:00 +0100 Subject: [PATCH] feat: add design to dataset-form --- .../dataset-form-access-rights-section.tsx | 294 +++++++++--------- .../dataset-form-concept-section.tsx | 151 ++++----- .../dataset-form-content-section.tsx | 142 ++++----- .../dataset-form-example-data-section.tsx | 102 +++--- .../dataset-form-geography-section.tsx | 197 ++++++------ ...dataset-form-information-model-section.tsx | 148 ++++----- .../dataset-form-provenance-section.tsx | 108 +++---- ...et-form-qualified-attributions-section.tsx | 64 ++-- .../components/dataset-form-theme-section.tsx | 20 +- .../components/dataset-form-type-section.tsx | 50 ++- .../components/dataset-from-title-section.tsx | 130 +++----- .../components/dataset-form/index.tsx | 85 ++++- .../utils/dataset-initial-values.tsx | 4 - .../fieldset-with-delete.module.scss | 20 ++ .../components/fieldset-with-delete/index.tsx | 23 ++ libs/ui/src/index.ts | 1 + libs/ui/src/lib/button/add.tsx | 2 + libs/ui/src/lib/button/button.module.css | 10 + libs/ui/src/lib/button/delete.tsx | 1 + .../utils/src/lib/language/dataset.form.nb.ts | 8 +- 20 files changed, 751 insertions(+), 809 deletions(-) create mode 100644 apps/dataset-catalog/components/fieldset-with-delete/fieldset-with-delete.module.scss create mode 100644 apps/dataset-catalog/components/fieldset-with-delete/index.tsx diff --git a/apps/dataset-catalog/components/dataset-form/components/dataset-form-access-rights-section.tsx b/apps/dataset-catalog/components/dataset-form/components/dataset-form-access-rights-section.tsx index d523f7236..1942d5163 100644 --- a/apps/dataset-catalog/components/dataset-form/components/dataset-form-access-rights-section.tsx +++ b/apps/dataset-catalog/components/dataset-form/components/dataset-form-access-rights-section.tsx @@ -13,182 +13,174 @@ type AccessRightsSectionProps = { export const AccessRightsSection = ({ errors, values }: AccessRightsSectionProps) => { return (
- - {localization.datasetForm.heading.accessRights} - - - - - {({ field, form }: { field: any; form: FormikHelpers }) => ( - - } - > - - - - - - )} - + /> */} + + {({ field, form }: { field: any; form: FormikHelpers }) => ( + + } + > + + + + + + )} + - {(values.accessRights?.uri === AccessRights.RESTRICTED || - values.accessRights?.uri === AccessRights.NON_PUBLIC) && ( - <> - - - {({ remove, push }) => ( - <> - {values.legalBasisForRestriction?.map((_, index) => ( -
- - - -
- ))} -
+ {(values.accessRights?.uri === AccessRights.RESTRICTED || + values.accessRights?.uri === AccessRights.NON_PUBLIC) && ( + <> + + + {({ remove, push }) => ( + <> + {values.legalBasisForRestriction?.map((_, index) => ( +
+ +
- - )} - + ))} +
+ +
+ + )} + - + - - {({ remove, push }) => ( - <> - {values.legalBasisForProcessing?.map((_, index) => ( -
- - - -
- ))} -
+ + {({ remove, push }) => ( + <> + {values.legalBasisForProcessing?.map((_, index) => ( +
+ +
- - )} - + ))} +
+ +
+ + )} + - + - - {({ remove, push }) => ( - <> - {values.legalBasisForAccess?.map((_, index) => ( -
- - - -
- ))} -
+ + {({ remove, push }) => ( + <> + {values.legalBasisForAccess?.map((_, index) => ( +
+ +
- - )} - - - )} - + ))} +
+ +
+ + )} + + + )}
); }; diff --git a/apps/dataset-catalog/components/dataset-form/components/dataset-form-concept-section.tsx b/apps/dataset-catalog/components/dataset-form/components/dataset-form-concept-section.tsx index 59f02d77b..a9a256ca5 100644 --- a/apps/dataset-catalog/components/dataset-form/components/dataset-form-concept-section.tsx +++ b/apps/dataset-catalog/components/dataset-form/components/dataset-form-concept-section.tsx @@ -56,96 +56,77 @@ export const ConceptSection = ({ searchEnv }: Props) => { return (
- - {localization.datasetForm.heading.concept} - - - + + setFieldValue('conceptList', selectedValues)} + onChange={(input: React.ChangeEvent) => setSearchQuery(input.target.value)} + loading={searching} + multiple + value={values.conceptList} + placeholder={localization.datasetForm.helptext.searchConcept} + filter={() => true} // Deactivate filter, handled by backend + > + {`${localization.search.noHits}... `} + {comboboxOptions.map((suggestion) => ( + + {getTranslateText(suggestion.organization?.prefLabel)} - <> - - setFieldValue('conceptList', selectedValues)} - onChange={(input: React.ChangeEvent) => setSearchQuery(input.target.value)} - loading={searching} - multiple - value={values.conceptList} - placeholder={localization.datasetForm.helptext.searchConcept} - filter={() => true} // Deactivate filter, handled by backend - > - {`${localization.search.noHits}... `} - {comboboxOptions.map((suggestion) => ( - - {getTranslateText(suggestion.organization?.prefLabel)} - -
-
{capitalizeFirstLetter(getTranslateText(suggestion.title) as string) ?? suggestion.uri}
-
{capitalizeFirstLetter(getTranslateText(suggestion.description) as string)}
-
{getTranslateText(suggestion.organization?.prefLabel)}
-
- - ))} - - +
+
{capitalizeFirstLetter(getTranslateText(suggestion.title) as string) ?? suggestion.uri}
+
{capitalizeFirstLetter(getTranslateText(suggestion.description) as string)}
+
{getTranslateText(suggestion.organization?.prefLabel)}
+
+ + ))} + + - -
-
- +
+
+ + } + type='text' + value={inputValue} + onChange={(e) => setInputValue(e.target.value)} + onKeyDown={(e) => { + if (e.key === 'Enter') { + e.preventDefault(); + addKeyword(); } - type='text' - value={inputValue} - onChange={(e) => setInputValue(e.target.value)} - onKeyDown={(e) => { - if (e.key === 'Enter') { - e.preventDefault(); - addKeyword(); - } - }} - /> -
-
- -
+ }} + />
- - {values.keywordList?.nb?.map((value: string) => ( - removeKeyword(value)} - > - {value} - - ))} - - +
+ +
+
+ + {values.keywordList?.nb?.map((value: string) => ( + removeKeyword(value)} + > + {value} + + ))} +
); }; diff --git a/apps/dataset-catalog/components/dataset-form/components/dataset-form-content-section.tsx b/apps/dataset-catalog/components/dataset-form/components/dataset-form-content-section.tsx index 121e2c6f9..d9d0c1d4b 100644 --- a/apps/dataset-catalog/components/dataset-form/components/dataset-form-content-section.tsx +++ b/apps/dataset-catalog/components/dataset-form/components/dataset-form-content-section.tsx @@ -1,103 +1,75 @@ 'use client'; import { Dataset } from '@catalog-frontend/types'; -import { FormContainer } from '@catalog-frontend/ui'; +import { AddButton, FormContainer } from '@catalog-frontend/ui'; import { localization } from '@catalog-frontend/utils'; -import { Heading, Textfield, Textarea, Button } from '@digdir/designsystemet-react'; +import { Heading, Textfield, Textarea, Button, Label, HelpText, Fieldset } from '@digdir/designsystemet-react'; import { MinusCircleIcon, PlusCircleIcon } from '@navikt/aksel-icons'; import { Field, FieldArray, useFormikContext } from 'formik'; +import FieldsetWithDelete from '../../fieldset-with-delete'; +import styles from '../dataset-form.module.css'; export const ContentSection = () => { const { errors, values } = useFormikContext(); return (
- - {localization.datasetForm.heading.content} - - - - - {({ push, remove }) => ( - <> + + {({ push, remove }) => ( + <> +
{values.conformsTo && values.conformsTo.map((_, index) => ( -
- - - -
+ <> +
+ remove(index)}> + + + +
+ ))} -
- -
- - )} - - - - - - - - - - + push({ prefLabel: { nb: '' }, uri: '' })}> + {localization.button.addUrl} + +
+ + )} + + + + + + + + +
); }; diff --git a/apps/dataset-catalog/components/dataset-form/components/dataset-form-example-data-section.tsx b/apps/dataset-catalog/components/dataset-form/components/dataset-form-example-data-section.tsx index 66bda02ce..b98e897f0 100644 --- a/apps/dataset-catalog/components/dataset-form/components/dataset-form-example-data-section.tsx +++ b/apps/dataset-catalog/components/dataset-form/components/dataset-form-example-data-section.tsx @@ -2,7 +2,7 @@ import { Dataset } from '@catalog-frontend/types'; import { FormContainer, FormikSearchCombobox } from '@catalog-frontend/ui'; import { localization } from '@catalog-frontend/utils'; -import { Heading, Textfield, Textarea } from '@digdir/designsystemet-react'; +import { Heading, Textfield, Textarea, Label } from '@digdir/designsystemet-react'; import { useSearchFileTypeByUri, useSearchFileTypes, @@ -39,69 +39,45 @@ export const ExampleDataSection = ({ referenceDataEnv }: Props) => { ); return ( -
- - {localization.datasetForm.heading.exampleData} - - - - - - + <> + + - setSearchQueryFileTypes(event.target.value)} - onValueChange={(selectedValues: string[]) => setFieldValue(`sample[0].format`, selectedValues)} - value={(values?.sample && values?.sample[0]?.format) || []} - selectedValuesSearchHits={selectedFileTypes ?? []} - querySearchHits={fileTypes ?? []} - formikValues={values?.sample?.[0]?.format ?? []} - loading={loadingSelectedFileTypes || searchingFileTypes} - /> + setSearchQueryFileTypes(event.target.value)} + onValueChange={(selectedValues: string[]) => setFieldValue(`sample[0].format`, selectedValues)} + value={(values?.sample && values?.sample[0]?.format) || []} + selectedValuesSearchHits={selectedFileTypes ?? []} + querySearchHits={fileTypes ?? []} + formikValues={values?.sample?.[0]?.format ?? []} + loading={loadingSelectedFileTypes || searchingFileTypes} + label={localization.datasetForm.fieldLabel.format} + /> + setSearchQueryMediaTypes(event.target.value)} + onValueChange={(selectedValues: string[]) => setFieldValue(`sample[0].mediaType`, selectedValues)} + value={(values?.sample && values?.sample[0]?.mediaType) || []} + selectedValuesSearchHits={selectedMediaTypes ?? []} + querySearchHits={mediaTypes ?? []} + formikValues={values?.sample?.[0]?.mediaType ?? []} + loading={loadingSelectedMediaTypes || searchingMediaTypes} + virtual + label={localization.datasetForm.fieldLabel.mediaTypes} + /> - - - setSearchQueryMediaTypes(event.target.value)} - onValueChange={(selectedValues: string[]) => setFieldValue(`sample[0].mediaType`, selectedValues)} - value={(values?.sample && values?.sample[0]?.mediaType) || []} - selectedValuesSearchHits={selectedMediaTypes ?? []} - querySearchHits={mediaTypes ?? []} - formikValues={values?.sample?.[0]?.mediaType ?? []} - loading={loadingSelectedMediaTypes || searchingMediaTypes} - virtual - /> - - - - -
+ + ); }; diff --git a/apps/dataset-catalog/components/dataset-form/components/dataset-form-geography-section.tsx b/apps/dataset-catalog/components/dataset-form/components/dataset-form-geography-section.tsx index 9ce15f1fa..02a2f9574 100644 --- a/apps/dataset-catalog/components/dataset-form/components/dataset-form-geography-section.tsx +++ b/apps/dataset-catalog/components/dataset-form/components/dataset-form-geography-section.tsx @@ -1,13 +1,14 @@ 'use client'; import { AddButton, DeleteButton, FormContainer, FormikSearchCombobox, TitleWithTag } from '@catalog-frontend/ui'; import { getTranslateText, localization } from '@catalog-frontend/utils'; -import { Checkbox, Heading, Textfield } from '@digdir/designsystemet-react'; +import { Checkbox, Heading, Label, Textfield } from '@digdir/designsystemet-react'; import { useCallback, useState } from 'react'; import { useSearchAdministrativeUnits, useSearchAdministrativeUnitsByUri } from '../../../hooks/useReferenceDataSearch'; import { Field, FieldArray, useFormikContext } from 'formik'; import { Dataset, ReferenceDataCode } from '@catalog-frontend/types'; import { debounce, sortBy } from 'lodash'; import styles from '../dataset-form.module.css'; +import FieldsetWithDelete from '../../fieldset-with-delete'; interface Props { envVariable: string; @@ -45,116 +46,96 @@ export const GeographySection = ({ envVariable, languages }: Props) => { }); return ( -
- + setFieldValue('spatialList', selectedValues)} + value={values.spatialList || []} + virtual + loading={isSearching} + label={localization.datasetForm.heading.spatial} + /> + ( +
+ + {values.temporal && + values.temporal.map((_, index) => ( + remove(index)} + key={`fieldset-${index}`} + > + + } + type='date' + name={`temporal.${index}.startDate`} + /> + + } + type='date' + name={`temporal.${index}.endDate`} + /> + + ))} + + push({ startDate: '', endDate: '' })}> + {localization.datasetForm.button.addDate} + +
+ )} + /> + + + + setFieldValue('languageList', values)} + value={values.languageList} + legend={localization.datasetForm.heading.language} > - {localization.datasetForm.heading.geography} - - - - setFieldValue('spatialList', selectedValues)} - value={values.spatialList || []} - virtual - loading={isSearching} - /> - - ( -
- {values.temporal && - values.temporal.map((_, index) => ( -
- - } - type='date' - name={`temporal.${index}.startDate`} - /> - - } - type='date' - name={`temporal.${index}.endDate`} - /> - remove(index)} /> -
- ))} -
- push({ startDate: '', endDate: '' })}> - {localization.datasetForm.button.addDate} - -
-
- )} - /> - - - - setFieldValue('languageList', values)} - value={values.languageList} - > - {values.languageList && values.languageList.includes('NOR') && ( + {values.languageList && values.languageList.includes('NOR') && ( + + {getTranslateText(langNOR.label)} + + )} + {sortedLanguages + .filter((lang) => lang.code !== 'NOR') + .map((lang) => ( - {getTranslateText(langNOR.label)} + {getTranslateText(lang.label)} - )} - {sortedLanguages - .filter((lang) => lang.code !== 'NOR') - .map((lang) => ( - - {getTranslateText(lang.label)} - - ))} - - -
+ ))} + + ); }; diff --git a/apps/dataset-catalog/components/dataset-form/components/dataset-form-information-model-section.tsx b/apps/dataset-catalog/components/dataset-form/components/dataset-form-information-model-section.tsx index 781344282..b1a45fbe1 100644 --- a/apps/dataset-catalog/components/dataset-form/components/dataset-form-information-model-section.tsx +++ b/apps/dataset-catalog/components/dataset-form/components/dataset-form-information-model-section.tsx @@ -2,7 +2,7 @@ import { Dataset } from '@catalog-frontend/types'; import { AddButton, DeleteButton, FormContainer } from '@catalog-frontend/ui'; import { capitalizeFirstLetter, getTranslateText, localization } from '@catalog-frontend/utils'; -import { Heading, Combobox, Textfield } from '@digdir/designsystemet-react'; +import { Heading, Combobox, Textfield, Label, Fieldset } from '@digdir/designsystemet-react'; import { useSearchInformationModelsByUri, useSearchInformationModelsSuggestions, @@ -11,6 +11,7 @@ import { Field, FieldArray, useFormikContext } from 'formik'; import { debounce } from 'lodash'; import { useCallback, useState } from 'react'; import styles from '../dataset-form.module.css'; +import FieldsetWithDelete from '../../fieldset-with-delete'; interface Props { searchEnv: string; @@ -59,87 +60,72 @@ export const InformationModelSection = ({ searchEnv }: Props) => { ); return ( -
- - {localization.datasetForm.heading.informationModel} - - - - {!isLoading && ( - setFieldValue('informationModelsFromFDK', selectedValues)} - onChange={(input: any) => debouncedSearch(input.target.value)} - loading={searching} - multiple - value={values.informationModelsFromFDK} - placeholder={`${localization.search.search}...`} - filter={() => true} // Deactivate filter, handled by backend - > - {`${localization.search.noHits}...`} - {comboboxOptions && - comboboxOptions.map((suggestion) => ( - -
-
{capitalizeFirstLetter(getTranslateText(suggestion.title) as string) ?? suggestion.uri}
-
{capitalizeFirstLetter(getTranslateText(suggestion.description) as string) ?? ''}
-
{getTranslateText(suggestion.organization?.prefLabel) ?? ''}
-
- - ))} - - )} + <> + {!isLoading && ( + setFieldValue('informationModelsFromFDK', selectedValues)} + onChange={(input: any) => debouncedSearch(input.target.value)} + loading={searching} + multiple + value={values.informationModelsFromFDK} + placeholder={`${localization.search.search}...`} + filter={() => true} // Deactivate filter, handled by backend + label={localization.datasetForm.heading.informationModelFDK} + > + {`${localization.search.noHits}...`} + {comboboxOptions && + comboboxOptions.map((suggestion) => ( + +
+
{capitalizeFirstLetter(getTranslateText(suggestion.title) as string) ?? suggestion.uri}
+
{capitalizeFirstLetter(getTranslateText(suggestion.description) as string) ?? ''}
+
{getTranslateText(suggestion.organization?.prefLabel) ?? ''}
+
+ + ))} + + )} - - ( -
- {values.informationModel && - values.informationModel.map((_, index) => ( -
- - + ( +
+ {values.informationModel && + values.informationModel.map((_, index) => ( + <> + +
+ remove(index)} + > + + + +
+ + ))} -
- remove(index)} /> -
-
- ))} -
- push('informationModel')}> - {localization.datasetForm.button.addInformationModel} - -
-
- )} - /> - -
+ push('informationModel')}> + {localization.datasetForm.button.addInformationModel} + +
+ )} + /> + ); }; diff --git a/apps/dataset-catalog/components/dataset-form/components/dataset-form-provenance-section.tsx b/apps/dataset-catalog/components/dataset-form/components/dataset-form-provenance-section.tsx index 4d56bd52c..2e3ac6303 100644 --- a/apps/dataset-catalog/components/dataset-form/components/dataset-form-provenance-section.tsx +++ b/apps/dataset-catalog/components/dataset-form/components/dataset-form-provenance-section.tsx @@ -15,71 +15,53 @@ export const ProvenanceSection = ({ data }: Props) => { return (
- setFieldValue('provenance.uri', value.toString())} + label={localization.datasetForm.heading.provenance} > - {localization.datasetForm.heading.provenanceAndFrequency} - - - - setFieldValue('provenance.uri', value.toString())} - > - {`${localization.choose}...`} - {provenanceStatements.map((item) => ( - - {getTranslateText(item.label)} - - ))} - + {`${localization.choose}...`} + {provenanceStatements.map((item) => ( + + {getTranslateText(item.label)} + + ))} + - - setFieldValue('accrualPeriodicity.uri', value.toString())} - > - {`${localization.choose}...`} - {frequencies.map((item) => ( - - {capitalizeFirstLetter(getTranslateText(item.label).toString())} - - ))} - - - - - - + setFieldValue('accrualPeriodicity.uri', value.toString())} + label={localization.datasetForm.heading.frequency} + > + {`${localization.choose}...`} + {frequencies.map((item) => ( + + {capitalizeFirstLetter(getTranslateText(item.label).toString())} + + ))} + + + + +
); }; diff --git a/apps/dataset-catalog/components/dataset-form/components/dataset-form-qualified-attributions-section.tsx b/apps/dataset-catalog/components/dataset-form/components/dataset-form-qualified-attributions-section.tsx index cc9161144..6cb82a52c 100644 --- a/apps/dataset-catalog/components/dataset-form/components/dataset-form-qualified-attributions-section.tsx +++ b/apps/dataset-catalog/components/dataset-form/components/dataset-form-qualified-attributions-section.tsx @@ -45,43 +45,31 @@ export const QualifiedAttributionsSection = () => { ]; return ( -
- - {localization.datasetForm.heading.qualifiedAttributions} - - - - - {!isLoading && ( - 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 - > - {`${localization.search.noHits}...`} - {comboboxOptions.map((org) => ( - - {org.navn} - - ))} - - )} - -
+ <> + {!isLoading && ( + 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} + > + {`${localization.search.noHits}...`} + {comboboxOptions.map((org) => ( + + {org.navn} + + ))} + + )} + ); }; diff --git a/apps/dataset-catalog/components/dataset-form/components/dataset-form-theme-section.tsx b/apps/dataset-catalog/components/dataset-form/components/dataset-form-theme-section.tsx index 9e88eca72..56622b60a 100644 --- a/apps/dataset-catalog/components/dataset-form/components/dataset-form-theme-section.tsx +++ b/apps/dataset-catalog/components/dataset-form/components/dataset-form-theme-section.tsx @@ -42,12 +42,8 @@ export const ThemeSection = ({ losThemes, dataThemes }: Props) => { }; return ( - - - <> + <> +
{ ))}
- - + {/* - <> + /> */} +
{ ))}
- - +
+ ); }; diff --git a/apps/dataset-catalog/components/dataset-form/components/dataset-form-type-section.tsx b/apps/dataset-catalog/components/dataset-form/components/dataset-form-type-section.tsx index b4a4fea01..ef368620d 100644 --- a/apps/dataset-catalog/components/dataset-form/components/dataset-form-type-section.tsx +++ b/apps/dataset-catalog/components/dataset-form/components/dataset-form-type-section.tsx @@ -13,38 +13,26 @@ export const TypeSection = ({ datasetTypes }: Props) => { const { setFieldValue, values } = useFormikContext(); return (
- setFieldValue('type', value.toString())} > - {localization.type} - - - - setFieldValue('type', value.toString())} - > - {`${localization.choose}...`} - {datasetTypes.map((type) => ( - - {getTranslateText(type?.label)} - - ))} - - + {`${localization.choose}...`} + {datasetTypes.map((type) => ( + + {getTranslateText(type?.label)} + + ))} +
); }; diff --git a/apps/dataset-catalog/components/dataset-form/components/dataset-from-title-section.tsx b/apps/dataset-catalog/components/dataset-form/components/dataset-from-title-section.tsx index 84649e474..5e0ee337f 100644 --- a/apps/dataset-catalog/components/dataset-form/components/dataset-from-title-section.tsx +++ b/apps/dataset-catalog/components/dataset-form/components/dataset-from-title-section.tsx @@ -1,97 +1,67 @@ import { Dataset } from '@catalog-frontend/types'; -import { FormContainer, TitleWithTag } from '@catalog-frontend/ui'; +import { AddButton, FormikLanguageFieldset, TextareaWithPrefix, TitleWithTag } from '@catalog-frontend/ui'; import { localization } from '@catalog-frontend/utils'; -import { Heading, Textfield, Textarea, Button } from '@digdir/designsystemet-react'; -import { MinusCircleIcon, PlusCircleIcon } from '@navikt/aksel-icons'; -import { Field, FieldArray, FormikErrors } from 'formik'; +import { Textfield, Fieldset } from '@digdir/designsystemet-react'; +import { Field, FieldArray, useFormikContext } from 'formik'; +import FieldsetWithDelete from '../../fieldset-with-delete'; +import { FieldsetDivider } from '@catalog-frontend/ui'; -type TitleSectionProps = { - errors: FormikErrors; -}; - -export const TitleSection = ({ errors }: TitleSectionProps) => { +export const TitleSection = () => { + const errors = useFormikContext()?.errors; return ( -
- +
+ } > - {localization.datasetForm.heading.titleAndDescription} - - - - - } - error={errors?.title?.nb} - /> - - - } - error={errors?.description?.nb} +
+
+ } + > + +
- + - - {(arrayHelpers) => ( - <> - {arrayHelpers.form.values.landingPage && - arrayHelpers.form.values.landingPage.map((_: string, index: number) => ( -
+ + {(arrayHelpers) => ( + <> + {arrayHelpers.form.values.landingPage && + arrayHelpers.form.values.landingPage.map((_: string, index: number) => ( +
+ arrayHelpers.remove(index)}> - -
- ))} -
- -
- - )} - - -
+ +
+ ))} + + arrayHelpers.push('')}>{localization.button.addUrl} + + )} + + ); }; diff --git a/apps/dataset-catalog/components/dataset-form/index.tsx b/apps/dataset-catalog/components/dataset-form/index.tsx index a7020d6fc..34fd6be5f 100644 --- a/apps/dataset-catalog/components/dataset-form/index.tsx +++ b/apps/dataset-catalog/components/dataset-form/index.tsx @@ -89,7 +89,10 @@ export const DatasetForm = ({ initialValues, submitType, referenceData, searchEn }} > - {/* + - */} -
- + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + -
+ ); diff --git a/apps/dataset-catalog/components/dataset-form/utils/dataset-initial-values.tsx b/apps/dataset-catalog/components/dataset-form/utils/dataset-initial-values.tsx index b1ccde04c..1883ae432 100644 --- a/apps/dataset-catalog/components/dataset-form/utils/dataset-initial-values.tsx +++ b/apps/dataset-catalog/components/dataset-form/utils/dataset-initial-values.tsx @@ -8,13 +8,9 @@ export const datasetTemplate = (dataset: Dataset): Dataset => { _lastModified: dataset?._lastModified, title: { nb: (dataset && dataset.title?.nb) ?? '', - nn: (dataset && dataset.title?.nn) ?? '', - en: (dataset && dataset.title?.en) ?? '', }, description: { nb: (dataset && dataset.description?.nb) ?? '', - nn: (dataset && dataset.description?.nn) ?? '', - en: (dataset && dataset.description?.en) ?? '', }, accessRights: { uri: dataset?.accessRights?.uri ?? AccessRights.PUBLIC }, legalBasisForAccess: dataset?.legalBasisForAccess ?? [{ uri: '', prefLabel: { nb: '' } }], diff --git a/apps/dataset-catalog/components/fieldset-with-delete/fieldset-with-delete.module.scss b/apps/dataset-catalog/components/fieldset-with-delete/fieldset-with-delete.module.scss new file mode 100644 index 000000000..97b830639 --- /dev/null +++ b/apps/dataset-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/dataset-catalog/components/fieldset-with-delete/index.tsx b/apps/dataset-catalog/components/fieldset-with-delete/index.tsx new file mode 100644 index 000000000..dc0030738 --- /dev/null +++ b/apps/dataset-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 ( +
+
{children}
+ +
+ ); +}; + +export default FieldsetWithDelete; diff --git a/libs/ui/src/index.ts b/libs/ui/src/index.ts index 9fa20302b..62e0c08e1 100644 --- a/libs/ui/src/index.ts +++ b/libs/ui/src/index.ts @@ -40,3 +40,4 @@ export * from './lib/tag'; export * from './lib/textarea-with-prefix'; export * from './lib/title-with-tag'; export * from './lib/use-warn-if-unsaved-changes'; +export * from './lib/fieldset-divider'; diff --git a/libs/ui/src/lib/button/add.tsx b/libs/ui/src/lib/button/add.tsx index 894dc2f2c..994682c17 100644 --- a/libs/ui/src/lib/button/add.tsx +++ b/libs/ui/src/lib/button/add.tsx @@ -1,12 +1,14 @@ import { Button, ButtonProps } from '@digdir/designsystemet-react'; import { localization } from '@catalog-frontend/utils'; import { PlusCircleIcon } from '@navikt/aksel-icons'; +import styles from './button.module.css'; const AddButton = ({ children = localization.add, ...props }: ButtonProps) => (