From 104ef7b315a6022fa9e7f538d3f5d4bde6541908 Mon Sep 17 00:00:00 2001 From: hegeaal Date: Fri, 27 Dec 2024 09:32:38 +0100 Subject: [PATCH] feat: add helptexts and labels to dataset form --- .../dataset-form/components/about-section.tsx | 53 +-- .../access-rights-uri-table.tsx | 29 +- .../dataset-form-access-rights-section.tsx | 50 +-- .../components/concept-section.tsx | 21 +- .../details-section/hidden-detail-fields.tsx | 171 ++++++--- .../recommended-detail-fields.tsx | 32 +- .../distribution-details.tsx | 7 +- .../distribution-modal.tsx | 326 +++++++++++------- ...n-section.tsx => distribution-section.tsx} | 19 +- .../components/information-model-section.tsx | 75 ++-- .../qualified-attributions-section.tsx | 58 ++-- .../relations-section/references-table.tsx | 6 +- .../relations-section/relations-section.tsx | 15 +- .../dataset-form/components/theme-section.tsx | 22 +- .../components/toggle-field-button.tsx | 4 +- .../uri-with-label-field-set-table.tsx | 6 +- .../components/dataset-form/index.tsx | 4 +- .../utils/dataset-initial-values.tsx | 2 +- libs/types/src/lib/dataset.ts | 2 +- .../label-with-help-text-and-tag/index.tsx | 11 +- .../utils/src/lib/language/dataset.form.nb.ts | 178 +++++----- 21 files changed, 670 insertions(+), 421 deletions(-) rename apps/dataset-catalog/components/dataset-form/components/distribution-section/{dataset-form-distribution-section.tsx => distribution-section.tsx} (95%) diff --git a/apps/dataset-catalog/components/dataset-form/components/about-section.tsx b/apps/dataset-catalog/components/dataset-form/components/about-section.tsx index b642017d1..e37a37571 100644 --- a/apps/dataset-catalog/components/dataset-form/components/about-section.tsx +++ b/apps/dataset-catalog/components/dataset-form/components/about-section.tsx @@ -1,13 +1,7 @@ import { Dataset } from '@catalog-frontend/types'; -import { - FormikLanguageFieldset, - HelpMarkdown, - LabelWithHelpTextAndTag, - TextareaWithPrefix, - TitleWithTag, -} from '@catalog-frontend/ui'; +import { FormikLanguageFieldset, LabelWithHelpTextAndTag, TextareaWithPrefix } from '@catalog-frontend/ui'; import { localization } from '@catalog-frontend/utils'; -import { Textfield, Label } from '@digdir/designsystemet-react'; +import { Textfield } from '@digdir/designsystemet-react'; import { FastField, useFormikContext } from 'formik'; import { FieldsetDivider } from '@catalog-frontend/ui'; import { AccessRightFields } from './access-rights.tsx/dataset-form-access-rights-section'; @@ -21,19 +15,13 @@ export const AboutSection = () => { as={Textfield} requiredLanguages={['nb']} legend={ - <> - - - - Tittelen skal være kortfattet, kunne stå alene og gi mening. Forkortelser skal skrives helt ut - - - } - tagTitle={localization.tag.required} - /> - + + {localization.title} + } /> @@ -42,18 +30,13 @@ export const AboutSection = () => { as={TextareaWithPrefix} requiredLanguages={['nb']} legend={ - - - - Beskrivelsen skal være kortfattet. Det bør fremgå hvilke opplysninger som utgjør kjernen i datasettet, - samt formålet til datasettet. - - - } + + > + {localization.description} + } /> @@ -71,11 +54,11 @@ export const AboutSection = () => { label={ - {localization.datasetForm.heading.releaseDate} + {localization.datasetForm.fieldLabel.releaseDate} } /> diff --git a/apps/dataset-catalog/components/dataset-form/components/access-rights.tsx/access-rights-uri-table.tsx b/apps/dataset-catalog/components/dataset-form/components/access-rights.tsx/access-rights-uri-table.tsx index 77b69bf57..7a628c7fb 100644 --- a/apps/dataset-catalog/components/dataset-form/components/access-rights.tsx/access-rights-uri-table.tsx +++ b/apps/dataset-catalog/components/dataset-form/components/access-rights.tsx/access-rights-uri-table.tsx @@ -1,5 +1,12 @@ import { Dataset, UriWithLabel } from '@catalog-frontend/types'; -import { AddButton, DeleteButton, EditButton, FieldsetDivider, FormikLanguageFieldset } from '@catalog-frontend/ui'; +import { + AddButton, + DeleteButton, + EditButton, + FieldsetDivider, + FormikLanguageFieldset, + LabelWithHelpTextAndTag, +} from '@catalog-frontend/ui'; import { getTranslateText, localization, trimObjectWhitespace } from '@catalog-frontend/utils'; import { Button, Label, Modal, Radio, Table, Textfield } from '@digdir/designsystemet-react'; import { FastField, Formik, useFormikContext } from 'formik'; @@ -63,9 +70,14 @@ export const AccessRightsUriTable = () => { return (
- - - {allLegalBases && allLegalBases?.length > 0 && !hasNoFieldValues(allLegalBases[0].uriWithLabel) && ( + + {localization.datasetForm.fieldLabel.legalBasis} + + + {allLegalBases && allLegalBases?.length > 0 && !hasNoFieldValues(allLegalBases[0]?.uriWithLabel) && ( @@ -147,7 +159,14 @@ const FieldModal = ({ template, formType, onSuccess, initialType = 'legalBasisFo + {localization.type} + + } onChange={(val) => { setLegalBasis(val); }} diff --git a/apps/dataset-catalog/components/dataset-form/components/access-rights.tsx/dataset-form-access-rights-section.tsx b/apps/dataset-catalog/components/dataset-form/components/access-rights.tsx/dataset-form-access-rights-section.tsx index 4818eeb1d..76ce5b832 100644 --- a/apps/dataset-catalog/components/dataset-form/components/access-rights.tsx/dataset-form-access-rights-section.tsx +++ b/apps/dataset-catalog/components/dataset-form/components/access-rights.tsx/dataset-form-access-rights-section.tsx @@ -1,7 +1,7 @@ import { AccessRights, Dataset } from '@catalog-frontend/types'; -import { TitleWithTag } from '@catalog-frontend/ui'; +import { LabelWithHelpTextAndTag } from '@catalog-frontend/ui'; import { localization } from '@catalog-frontend/utils'; -import { Card, Combobox } from '@digdir/designsystemet-react'; +import { Card, Combobox, Fieldset } from '@digdir/designsystemet-react'; import { useFormikContext } from 'formik'; import { AccessRightsUriTable } from './access-rights-uri-table'; import styles from '../../dataset-form.module.css'; @@ -17,26 +17,34 @@ export const AccessRightFields = () => { return ( -
- - setFieldValue('accessRights.uri', values.toString())} - > - {accessRightsOptions.map((option) => ( - +
- {option.label} - - ))} - + {localization.access} + + } + > + setFieldValue('accessRights.uri', values.toString())} + > + {accessRightsOptions.map((option) => ( + + {option.label} + + ))} + +
{(values.accessRights?.uri === AccessRights.RESTRICTED || diff --git a/apps/dataset-catalog/components/dataset-form/components/concept-section.tsx b/apps/dataset-catalog/components/dataset-form/components/concept-section.tsx index c322e1874..16932d2f7 100644 --- a/apps/dataset-catalog/components/dataset-form/components/concept-section.tsx +++ b/apps/dataset-catalog/components/dataset-form/components/concept-section.tsx @@ -6,7 +6,7 @@ import { useState } from 'react'; import { capitalizeFirstLetter, getTranslateText, localization } from '@catalog-frontend/utils'; import styles from '../dataset-form.module.css'; import { useSearchConceptsByUri, useSearchConceptSuggestions } from '../../../hooks/useSearchService'; -import { TitleWithTag } from '@catalog-frontend/ui'; +import { LabelWithHelpTextAndTag } from '@catalog-frontend/ui'; import classNames from 'classnames'; interface Props { @@ -58,11 +58,15 @@ export const ConceptSection = ({ searchEnv }: Props) => { return ( <>
- + helpAriaLabel={localization.datasetForm.fieldLabel.concept} + helpText={localization.datasetForm.helptext.concept} + > + {localization.datasetForm.fieldLabel.concept} + + setFieldValue('conceptList', selectedValues)} @@ -99,11 +103,14 @@ export const ConceptSection = ({ searchEnv }: Props) => { + helpAriaLabel={localization.datasetForm.fieldLabel.keyword} + helpText={localization.datasetForm.helptext.keyword} + > + {localization.datasetForm.fieldLabel.keyword} + } type='text' value={inputValue} diff --git a/apps/dataset-catalog/components/dataset-form/components/details-section/hidden-detail-fields.tsx b/apps/dataset-catalog/components/dataset-form/components/details-section/hidden-detail-fields.tsx index 550f34460..fd44d12d6 100644 --- a/apps/dataset-catalog/components/dataset-form/components/details-section/hidden-detail-fields.tsx +++ b/apps/dataset-catalog/components/dataset-form/components/details-section/hidden-detail-fields.tsx @@ -1,8 +1,8 @@ 'use client'; -import { AddButton, FormikLanguageFieldset, TextareaWithPrefix } from '@catalog-frontend/ui'; +import { AddButton, FormikLanguageFieldset, LabelWithHelpTextAndTag, TextareaWithPrefix } from '@catalog-frontend/ui'; import { capitalizeFirstLetter, getTranslateText, localization } from '@catalog-frontend/utils'; -import { Combobox, Textfield } from '@digdir/designsystemet-react'; +import { Combobox, Fieldset, Textfield } from '@digdir/designsystemet-react'; import { FastField, FieldArray, useFormikContext } from 'formik'; import { Dataset, ReferenceDataCode } from '@catalog-frontend/types'; import styles from './details.module.css'; @@ -76,7 +76,18 @@ export const HiddenDetailFields = ({ datasetTypes, provenanceStatements, frequen arrayHelpers.remove(index)}> + {localization.datasetForm.fieldLabel.landingPage} + + ) : ( + '' + ) + } as={Textfield} size='sm' error={errors?.landingPage?.[index]} @@ -86,7 +97,7 @@ export const HiddenDetailFields = ({ datasetTypes, provenanceStatements, frequen ))} arrayHelpers.push('')}> - {`${localization.datasetForm.heading.landingPage}`} + {`${localization.datasetForm.fieldLabel.landingPage}`} )} @@ -98,18 +109,28 @@ export const HiddenDetailFields = ({ datasetTypes, provenanceStatements, frequen hasDeleteButton fieldValues={values?.type} > - setFieldValue('type', value.toString())} +
+ {localization.datasetForm.fieldLabel.type} + + } > - {`${localization.choose}...`} - {datasetTypeOptions} - + setFieldValue('type', value.toString())} + > + {`${localization.choose}...`} + {datasetTypeOptions} + +
- setFieldValue('provenance.uri', value.toString())} - label={localization.datasetForm.heading.provenance} - size='sm' +
+ {localization.datasetForm.fieldLabel.provenance} + + } > - {`${localization.choose}...`} - {provenanceOptions} - + setFieldValue('provenance.uri', value.toString())} + size='sm' + > + {`${localization.choose}...`} + {provenanceOptions} + +
- setFieldValue('accrualPeriodicity.uri', value.toString())} - label={localization.datasetForm.heading.frequency} +
+ {localization.datasetForm.fieldLabel.accrualPeriodicity} + + } > - {`${localization.choose}...`} - {frequencyOptions} - + setFieldValue('accrualPeriodicity.uri', value.toString())} + > + {`${localization.choose}...`} + {frequencyOptions} + +
+ {localization.datasetForm.fieldLabel.modified} + + } size='sm' /> @@ -169,13 +217,28 @@ export const HiddenDetailFields = ({ datasetTypes, provenanceStatements, frequen + {localization.datasetForm.fieldLabel.hasCurrentnessAnnotation} + + } /> + {localization.datasetForm.fieldLabel.conformsTo} + + } /> + {localization.datasetForm.fieldLabel.hasRelevanceAnnotation} + + } /> @@ -198,7 +268,14 @@ export const HiddenDetailFields = ({ datasetTypes, provenanceStatements, frequen + {localization.datasetForm.fieldLabel.hasCompletenessAnnotation} + + } /> @@ -210,7 +287,14 @@ export const HiddenDetailFields = ({ datasetTypes, provenanceStatements, frequen + {localization.datasetForm.fieldLabel.hasAccuracyAnnotation} + + } /> @@ -222,7 +306,14 @@ export const HiddenDetailFields = ({ datasetTypes, provenanceStatements, frequen + {localization.datasetForm.fieldLabel.hasAvailabilityAnnotation} + + } /> diff --git a/apps/dataset-catalog/components/dataset-form/components/details-section/recommended-detail-fields.tsx b/apps/dataset-catalog/components/dataset-form/components/details-section/recommended-detail-fields.tsx index f28e9cd38..d4c7ff5c5 100644 --- a/apps/dataset-catalog/components/dataset-form/components/details-section/recommended-detail-fields.tsx +++ b/apps/dataset-catalog/components/dataset-form/components/details-section/recommended-detail-fields.tsx @@ -1,16 +1,15 @@ 'use client'; import { FieldsetDivider, FormikSearchCombobox, LabelWithHelpTextAndTag, TitleWithTag } from '@catalog-frontend/ui'; import { getTranslateText, localization } from '@catalog-frontend/utils'; -import { Checkbox, Label, Textfield } from '@digdir/designsystemet-react'; +import { Checkbox } from '@digdir/designsystemet-react'; import { useCallback, useState } from 'react'; import { useSearchAdministrativeUnits, useSearchAdministrativeUnitsByUri, } from '../../../../hooks/useReferenceDataSearch'; -import { FastField, FieldArray, useFormikContext } from 'formik'; +import { useFormikContext } from 'formik'; import { Dataset, ReferenceDataCode } from '@catalog-frontend/types'; import { debounce, sortBy } from 'lodash'; -import FieldsetWithDelete from '../../../fieldset-with-delete'; import styles from '../../dataset-form.module.css'; import { TemporalModal } from './temporal-modal'; @@ -55,11 +54,14 @@ export const RecommendedDetailFields = ({ referenceDataEnv, languages }: Props) onChange={(values) => setFieldValue('languageList', values)} value={values.languageList} legend={ - + helpAriaLabel={localization.datasetForm.fieldLabel.language} + helpText={localization.datasetForm.helptext.language} + > + {localization.datasetForm.fieldLabel.language} + } size='sm' > @@ -82,13 +84,19 @@ export const RecommendedDetailFields = ({ referenceDataEnv, languages }: Props) ))} + +
- + helpAriaLabel={localization.datasetForm.fieldLabel.spatial} + helpText={localization.datasetForm.helptext.spatial} + > + {localization.datasetForm.fieldLabel.spatial} + + - {localization.datasetForm.heading.temporal} + {localization.datasetForm.fieldLabel.temporal} } /> diff --git a/apps/dataset-catalog/components/dataset-form/components/distribution-section/distribution-details.tsx b/apps/dataset-catalog/components/dataset-form/components/distribution-section/distribution-details.tsx index eecfd78a7..c6c6524df 100644 --- a/apps/dataset-catalog/components/dataset-form/components/distribution-section/distribution-details.tsx +++ b/apps/dataset-catalog/components/dataset-form/components/distribution-section/distribution-details.tsx @@ -22,7 +22,12 @@ export const DistributionDetails = ({ distribution, searchEnv, referenceDataEnv, const { data: selectedMediaTypes } = useSearchMediaTypeByUri(distribution?.mediaType ?? [], referenceDataEnv); const hasConformsToValues = _.some(distribution?.conformsTo, (item) => { - return _.trim(item.uri) || _.trim(_.get(item, 'prefLabel.nb')); + const uri = item.uri || ''; + + const prefLabelNb = _.get(item, 'prefLabel.nb'); + const prefLabelNbString = Array.isArray(prefLabelNb) ? prefLabelNb.join(' ') : prefLabelNb || ''; + + return _.trim(uri) || _.trim(prefLabelNbString); }); return ( diff --git a/apps/dataset-catalog/components/dataset-form/components/distribution-section/distribution-modal.tsx b/apps/dataset-catalog/components/dataset-form/components/distribution-section/distribution-modal.tsx index 81ca0f10a..1bf375ad4 100644 --- a/apps/dataset-catalog/components/dataset-form/components/distribution-section/distribution-modal.tsx +++ b/apps/dataset-catalog/components/dataset-form/components/distribution-section/distribution-modal.tsx @@ -7,11 +7,11 @@ import { FieldsetDivider, FormikLanguageFieldset, FormikSearchCombobox, + LabelWithHelpTextAndTag, TextareaWithPrefix, - TitleWithTag, } from '@catalog-frontend/ui'; import { getTranslateText, localization, trimObjectWhitespace } from '@catalog-frontend/utils'; -import { Button, Card, Combobox, Label, Modal, Radio, Textfield } from '@digdir/designsystemet-react'; +import { Button, Card, Combobox, Fieldset, Modal, Radio, Textfield } from '@digdir/designsystemet-react'; import { useSearchFileTypeByUri, useSearchFileTypes, @@ -33,7 +33,7 @@ type Props = { onSuccess: (values: FormikDistribution) => void; initialValues: Partial | undefined; type: 'new' | 'edit'; - initialDistributionType?: 'distribution' | 'exampledata'; + initialDistributionType?: 'distribution' | 'sample'; }; type FormikDistribution = { @@ -128,48 +128,60 @@ export const DistributionModal = ({ modalRef.current?.close(); }} > - {({ errors, isSubmitting, submitForm, values, dirty, setFieldValue }) => { + {({ errors, isSubmitting, submitForm, values, setFieldValue }) => { return ( <> {initialValues && ( <> - {type === 'new' ? localization.datasetForm.button.addDistribution : localization.edit} + {type === 'new' + ? localization.datasetForm.button.addDistribution + : `${localization.edit} ${localization.datasetForm.fieldLabel.distribution.toLowerCase()}`} {type === 'new' && ( - { - setDistributionType(val); - }} - value={distributionType} - > - {distributionTypes.map((type) => ( - - {localization.datasetForm.fieldLabel[type]} - - ))} - + <> + + {localization.type} + + } + onChange={(val) => { + setDistributionType(val); + }} + value={distributionType} + > + {distributionTypes.map((type) => ( + + {localization.datasetForm.fieldLabel[type]} + + ))} + + + )} {distributionType === 'distribution' && ( <> - + > + {localization.title} + } /> @@ -182,10 +194,13 @@ export const DistributionModal = ({ as={Textfield} size='sm' label={ - + helpAriaLabel={localization.datasetForm.fieldLabel.accessURL} + helpText={localization.datasetForm.helptext.accessURL} + > + {localization.datasetForm.fieldLabel.accessURL} + } error={errors?.accessURL?.[0]} /> @@ -194,51 +209,34 @@ export const DistributionModal = ({ name='downloadURL[0]' as={Textfield} size='sm' - label={localization.datasetForm.fieldLabel.downloadUrl} + label={ + + {localization.datasetForm.fieldLabel.downloadURL} + + } error={errors?.downloadURL?.[0]} /> - - -
- - setSearchQueryFileTypes(event.target.value)} - onValueChange={(selectedValues) => setFieldValue('format', selectedValues)} - value={values?.format || []} - selectedValuesSearchHits={selectedFileTypes ?? []} - querySearchHits={fileTypes ?? []} - formikValues={initialValues?.format ?? []} - loading={loadingSelectedFileTypes || searchingFileTypes} - portal={false} - /> -
- - setSearchQueryMediaTypes(event.target.value)} - onValueChange={(selectedValues) => setFieldValue('mediaType', selectedValues)} - value={values?.mediaType || []} - selectedValuesSearchHits={selectedMediaTypes ?? []} - querySearchHits={mediaTypes ?? []} - formikValues={initialValues?.mediaType ?? []} - loading={loadingSelectedMediaTypes || searchingMediaTypes} - portal={false} - label={localization.datasetForm.fieldLabel.mediaTypes} - /> {!isLoadingSelectedDataServices && distributionType === 'distribution' && ( - <> - +
+ {localization.datasetForm.fieldLabel.accessService} + + } + > setSearchDataServicesQuery(event.target.value)} value={[...(values.accessServiceList || []), ...(initialValues?.accessServiceList || [])]} onValueChange={(selectedValues) => setFieldValue('accessServiceList', selectedValues)} - label={localization.datasetForm.fieldLabel.accessService} placeholder={`${localization.search.search}...`} size='sm' > @@ -251,30 +249,91 @@ export const DistributionModal = ({ ))} - +
)} + + +
+ {localization.datasetForm.fieldLabel.format} + + } + > + setSearchQueryFileTypes(event.target.value)} + onValueChange={(selectedValues) => setFieldValue('format', selectedValues)} + value={values?.format || []} + selectedValuesSearchHits={selectedFileTypes ?? []} + querySearchHits={fileTypes ?? []} + formikValues={initialValues?.format ?? []} + loading={loadingSelectedFileTypes || searchingFileTypes} + portal={false} + /> +
+
+ {localization.datasetForm.fieldLabel.mediaType} + + } + > + setSearchQueryMediaTypes(event.target.value)} + onValueChange={(selectedValues) => setFieldValue('mediaType', selectedValues)} + value={values?.mediaType || []} + selectedValuesSearchHits={selectedMediaTypes ?? []} + querySearchHits={mediaTypes ?? []} + formikValues={initialValues?.mediaType ?? []} + loading={loadingSelectedMediaTypes || searchingMediaTypes} + portal={false} + /> +
+ {distributionType === 'distribution' && ( <> - setFieldValue('license.uri', selectedValues.toString())} - size='sm' +
+ {localization.datasetForm.fieldLabel.license} + + } > - {openLicenses && - openLicenses.map((license, i) => ( - - {getTranslateText(license.label)} - - ))} - + + setFieldValue('license.uri', selectedValues.toString()) + } + size='sm' + > + {openLicenses && + openLicenses.map((license, i) => ( + + {getTranslateText(license.label)} + + ))} + +
)} @@ -282,14 +341,27 @@ export const DistributionModal = ({ + {localization.description} + + } name='description' requiredLanguages={['nb']} /> - + {localization.datasetForm.fieldLabel.distributionLink} + + } as={Textfield} name='page[0].uri' size='sm' @@ -301,46 +373,56 @@ export const DistributionModal = ({ <> - - - {({ push, remove }) => ( - <> - {values.conformsTo?.map((item, i) => ( -
- -
- + {localization.datasetForm.fieldLabel.conformsTo} + + } + > + + {({ push, remove }) => ( + <> + {values.conformsTo?.map((item, i) => ( +
+ +
+ +
+ + + +
+ remove(i)} />
- - - -
- remove(i)} />
-
- ))} - push({ uri: '', prefLabel: { nb: '' } })}> - {localization.datasetForm.button.addStandard} - - - )} - + ))} + push({ uri: '', prefLabel: { nb: '' } })}> + {localization.datasetForm.button.addStandard} + + + )} + + )} diff --git a/apps/dataset-catalog/components/dataset-form/components/distribution-section/dataset-form-distribution-section.tsx b/apps/dataset-catalog/components/dataset-form/components/distribution-section/distribution-section.tsx similarity index 95% rename from apps/dataset-catalog/components/dataset-form/components/distribution-section/dataset-form-distribution-section.tsx rename to apps/dataset-catalog/components/dataset-form/components/distribution-section/distribution-section.tsx index b58a8e3de..67e8bcd7d 100644 --- a/apps/dataset-catalog/components/dataset-form/components/distribution-section/dataset-form-distribution-section.tsx +++ b/apps/dataset-catalog/components/dataset-form/components/distribution-section/distribution-section.tsx @@ -71,7 +71,20 @@ export const DistributionSection = ({ referenceDataEnv, searchEnv, openLicenses return ( <> - {values?.distribution && Distribusjoner} + {values?.distribution && ( + + {localization.datasetForm.fieldLabel.distributions} + + {localization.tag.recommended} + + + )} {values?.distribution?.map((item, index) => (
@@ -108,7 +121,7 @@ export const DistributionSection = ({ referenceDataEnv, searchEnv, openLicenses
- {item.accessURL && } + {item.accessURL && } {item?.accessURL?.[0]}
@@ -169,7 +182,7 @@ export const DistributionSection = ({ referenceDataEnv, searchEnv, openLicenses
- {item.accessURL && } + {item.accessURL && } {item?.accessURL?.[0]}
diff --git a/apps/dataset-catalog/components/dataset-form/components/information-model-section.tsx b/apps/dataset-catalog/components/dataset-form/components/information-model-section.tsx index fcef1f1b6..5d4213e65 100644 --- a/apps/dataset-catalog/components/dataset-form/components/information-model-section.tsx +++ b/apps/dataset-catalog/components/dataset-form/components/information-model-section.tsx @@ -1,8 +1,8 @@ 'use client'; import { Dataset } from '@catalog-frontend/types'; -import { AddButton } from '@catalog-frontend/ui'; +import { LabelWithHelpTextAndTag } from '@catalog-frontend/ui'; import { capitalizeFirstLetter, getTranslateText, localization } from '@catalog-frontend/utils'; -import { Combobox } from '@digdir/designsystemet-react'; +import { Combobox, Fieldset } from '@digdir/designsystemet-react'; import { useSearchInformationModelsByUri, useSearchInformationModelsSuggestions, @@ -62,39 +62,56 @@ export const InformationModelSection = ({ searchEnv }: Props) => { return ( <> {!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.datasetForm.fieldLabel.informationModelsFromFDK} + + } > - {`${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) ?? ''}
-
- - ))} - + 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) ?? ''}
+
+ + ))} + +
)} + {localization.datasetForm.fieldLabel.informationModel} + + } /> ); diff --git a/apps/dataset-catalog/components/dataset-form/components/qualified-attributions-section.tsx b/apps/dataset-catalog/components/dataset-form/components/qualified-attributions-section.tsx index 705772d94..d5615a13f 100644 --- a/apps/dataset-catalog/components/dataset-form/components/qualified-attributions-section.tsx +++ b/apps/dataset-catalog/components/dataset-form/components/qualified-attributions-section.tsx @@ -1,7 +1,7 @@ import { Dataset } from '@catalog-frontend/types'; -import { FormContainer } from '@catalog-frontend/ui'; +import { LabelWithHelpTextAndTag } from '@catalog-frontend/ui'; import { containsNonNumberRegex, localization, onlyNumbersRegex } from '@catalog-frontend/utils'; -import { Heading, Combobox } from '@digdir/designsystemet-react'; +import { Combobox, Fieldset } from '@digdir/designsystemet-react'; import { useSearchEnheter, useSearchEnheterByOrgNmbs } from '../../../hooks/useEnhetsregister'; import { useFormikContext } from 'formik'; import { debounce } from 'lodash'; @@ -45,28 +45,38 @@ export const QualifiedAttributionsSection = () => { ]; return ( - 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} - - ))} - + {localization.datasetForm.fieldLabel.qualifiedAttributions} + + } + > + 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} + + ))} + + ); }; diff --git a/apps/dataset-catalog/components/dataset-form/components/relations-section/references-table.tsx b/apps/dataset-catalog/components/dataset-form/components/relations-section/references-table.tsx index 7d5e69f93..fb831a392 100644 --- a/apps/dataset-catalog/components/dataset-form/components/relations-section/references-table.tsx +++ b/apps/dataset-catalog/components/dataset-form/components/relations-section/references-table.tsx @@ -39,10 +39,10 @@ export const ReferenceTable = ({ searchEnv }: Props) => { return (
- {'Relaterte datasett'} + {localization.datasetForm.fieldLabel.references} {values?.references && _.compact(values?.references).length > 0 && (
diff --git a/apps/dataset-catalog/components/dataset-form/components/relations-section/relations-section.tsx b/apps/dataset-catalog/components/dataset-form/components/relations-section/relations-section.tsx index 1ba8a359b..47b90b27e 100644 --- a/apps/dataset-catalog/components/dataset-form/components/relations-section/relations-section.tsx +++ b/apps/dataset-catalog/components/dataset-form/components/relations-section/relations-section.tsx @@ -1,7 +1,7 @@ import { Dataset, DatasetSeries } from '@catalog-frontend/types'; import { FieldsetDivider, LabelWithHelpTextAndTag } from '@catalog-frontend/ui'; import { getTranslateText, localization } from '@catalog-frontend/utils'; -import { Combobox, Label, Divider } from '@digdir/designsystemet-react'; +import { Combobox } from '@digdir/designsystemet-react'; import { useFormikContext } from 'formik'; import { UriWithLabelFieldsetTable } from '../uri-with-label-field-set-table'; import { ReferenceTable } from './references-table'; @@ -21,10 +21,10 @@ export const RelationsSection = ({ searchEnv, datasetSeries }: Props) => {
- Relasjon til datasettserie + {localization.datasetForm.fieldLabel.inSeries} {datasetSeries && ( @@ -51,7 +51,12 @@ export const RelationsSection = ({ searchEnv, datasetSeries }: Props) => {
- + + {localization.datasetForm.fieldLabel.relations} + { return ( <>
- + helpAriaLabel={localization.datasetForm.fieldLabel.euTheme} + helpText={localization.datasetForm.helptext.euTheme} + > + {localization.datasetForm.fieldLabel.euTheme} + {
- + + {localization.datasetForm.fieldLabel.theme} + { setFieldValue(fieldName, addValue); }} - >{`${localization.add} ${localization.datasetForm.hiddenFieldLabel[fieldName.split('.')[0]]}`} + >{`${localization.add} ${localization.datasetForm.fieldLabel[fieldName.split('.')[0]].toLowerCase()}`} )}
); diff --git a/apps/dataset-catalog/components/dataset-form/components/uri-with-label-field-set-table.tsx b/apps/dataset-catalog/components/dataset-form/components/uri-with-label-field-set-table.tsx index 34fc3dccb..b1215a5f2 100644 --- a/apps/dataset-catalog/components/dataset-form/components/uri-with-label-field-set-table.tsx +++ b/apps/dataset-catalog/components/dataset-form/components/uri-with-label-field-set-table.tsx @@ -4,14 +4,14 @@ import { getTranslateText, localization, trimObjectWhitespace } from '@catalog-f import { Button, Label, Modal, Table, Textfield } from '@digdir/designsystemet-react'; import { FastField, Formik, useFormikContext } from 'formik'; import styles from '../dataset-form.module.css'; -import { useRef, useState } from 'react'; +import { ReactNode, useRef, useState } from 'react'; import _ from 'lodash'; import { uriWithLabelSchema } from '../utils/validation-schema'; interface Props { values: UriWithLabel[] | undefined; fieldName: string; - label?: string; + label?: string | ReactNode; } interface ModalProps { @@ -31,7 +31,7 @@ export const UriWithLabelFieldsetTable = ({ fieldName, values, label }: Props) = return (
- + {typeof label === 'string' ? : label} {values && values?.length > 0 && !hasNoFieldValues(values[0]) && (
{ ? dataset.theme.filter((t) => t.uri && t.uri.includes('/data-theme/')).map((t) => t.uri) : [], type: dataset?.type, - keywordList: dataset.keyword ? groupByKeys(dataset.keyword) : { nb: [] }, + keywordList: dataset.keyword ? groupByKeys(dataset?.keyword) : { nb: [] }, conceptList: dataset.concepts ? dataset.concepts.map((concept) => concept.uri) : [], provenance: dataset?.provenance?.uri ? { uri: dataset?.provenance?.uri } : undefined, accrualPeriodicity: dataset?.accrualPeriodicity?.uri ? { uri: dataset?.accrualPeriodicity?.uri } : undefined, diff --git a/libs/types/src/lib/dataset.ts b/libs/types/src/lib/dataset.ts index c1b05b750..5cb091767 100644 --- a/libs/types/src/lib/dataset.ts +++ b/libs/types/src/lib/dataset.ts @@ -20,7 +20,7 @@ export type DatasetToBeCreated = { landingPage?: string[]; theme?: { uri: string }[]; type?: string; - keyword?: LocalizedStrings[]; + keyword?: { [key: string]: string }[]; keywordList?: { nb?: string[]; nn?: string[]; en?: string[] }; concepts?: [{ uri: string }]; provenance?: ReferenceDataCode; diff --git a/libs/ui/src/lib/label-with-help-text-and-tag/index.tsx b/libs/ui/src/lib/label-with-help-text-and-tag/index.tsx index b73404c69..e57df0854 100644 --- a/libs/ui/src/lib/label-with-help-text-and-tag/index.tsx +++ b/libs/ui/src/lib/label-with-help-text-and-tag/index.tsx @@ -8,7 +8,7 @@ type Props = { tagColor?: TagColor; tagSize?: TagSize; helpText?: string; - helpTitle?: string; + helpAriaLabel?: string; } & PropsWithChildren; type TagColor = 'first' | 'second' | 'success' | 'danger' | 'third' | 'neutral' | 'info' | 'warning'; @@ -22,19 +22,14 @@ export function LabelWithHelpTextAndTag({ tagTitle, tagColor = 'warning', tagSize = 'sm', - helpTitle, + helpAriaLabel, helpText, }: Props) { return (
{typeof children === 'string' ? : children} - {helpText && helpTitle && ( - - )} + {helpText && helpAriaLabel && {helpText}} {tagTitle && (