From a3054de7ce140659059ac582f7dd034123308943 Mon Sep 17 00:00:00 2001 From: robinvandermolen Date: Wed, 6 Nov 2024 10:56:51 +0100 Subject: [PATCH 1/3] :bug: [#4802] Prevent react-select from growing beyond its max inline size --- src/openforms/scss/vendor/_react-select.scss | 1 + 1 file changed, 1 insertion(+) diff --git a/src/openforms/scss/vendor/_react-select.scss b/src/openforms/scss/vendor/_react-select.scss index a7a1d020e0..7742660e24 100644 --- a/src/openforms/scss/vendor/_react-select.scss +++ b/src/openforms/scss/vendor/_react-select.scss @@ -25,4 +25,5 @@ 100%, var(--of-admin-select-max-inline-size) ); + max-inline-size: var(--of-admin-select-max-inline-size); } From 3887e9de90d98f24713e853f718fd96bfe1636c6 Mon Sep 17 00:00:00 2001 From: robinvandermolen Date: Wed, 6 Nov 2024 11:02:24 +0100 Subject: [PATCH 2/3] :lipstick: [#4802] Remove unnessecery html elements from dom The .catalogi-type-option span element is only needed for the dropdown menu, not when it is the selected value. So the element should only be added when it's used in the dropdown menu. This also solves some styling issues when the content is beyond the max size of the ReactSelect --- .../objectsapi/fields/DocumentTypes.js | 24 +++++++++++++------ .../zgw/fields/CaseTypeSelect.js | 23 ++++++++++++++---- .../admin/_catalogi-type-option.scss | 5 ---- 3 files changed, 35 insertions(+), 17 deletions(-) diff --git a/src/openforms/js/components/admin/form_design/registrations/objectsapi/fields/DocumentTypes.js b/src/openforms/js/components/admin/form_design/registrations/objectsapi/fields/DocumentTypes.js index 63381cfb44..4b955256f2 100644 --- a/src/openforms/js/components/admin/form_design/registrations/objectsapi/fields/DocumentTypes.js +++ b/src/openforms/js/components/admin/form_design/registrations/objectsapi/fields/DocumentTypes.js @@ -3,6 +3,7 @@ import {useField, useFormikContext} from 'formik'; import PropTypes from 'prop-types'; import {useContext, useEffect} from 'react'; import {FormattedMessage, useIntl} from 'react-intl'; +import {components} from 'react-select'; import {useAsync, usePrevious} from 'react-use'; import {FeatureFlagsContext} from 'components/admin/form_design/Context'; @@ -42,7 +43,17 @@ const getDocumentTypes = async (apiGroupID, catalogueUrl) => { const documentTypes = response.data.sort((a, b) => a.omschrijving.localeCompare(b.omschrijving)); return documentTypes.map(({omschrijving, isPublished}) => ({ value: omschrijving, - label: ( + label: omschrijving, + isPublished: isPublished, + })); +}; + +// Components + +const DocumentTypeSelectOption = props => { + const {isPublished, label} = props.data; + return ( + { > (not published)} other {}}`} + defaultMessage={`{label} {isPublished, select, false {(not published)} other {}}`} values={{ - omschrijving, + label, isPublished, draft: chunks => {chunks}, }} /> - ), - })); + + ); }; -// Components - const DocumentType = ({name, label, loading, options, isDisabled, helpText}) => { const intl = useIntl(); const [{value}, , fieldHelpers] = useField(name); @@ -91,6 +100,7 @@ const DocumentType = ({name, label, loading, options, isDisabled, helpText}) => setValue(selectedOption ? selectedOption.value : undefined); }} isClearable + components={{Option: DocumentTypeSelectOption}} /> {showWarning && ( { const caseTypes = response.data.sort((a, b) => a.description.localeCompare(b.description)); return caseTypes.map(({identification, description, isPublished}) => ({ value: identification, - label: ( + label: description, + isPublished: isPublished, + })); +}; + +// Components + +const CaseTypeSelectOption = props => { + const {isPublished, label} = props.data; + return ( + { > (not published)} other {}}`} + defaultMessage={`{label} {isPublished, select, false {(not published)} other {}}`} values={{ - description, + label, isPublished, draft: chunks => {chunks}, }} /> - ), - })); + + ); }; const CaseTypeSelect = ({catalogueUrl = ''}) => { @@ -88,6 +100,7 @@ const CaseTypeSelect = ({catalogueUrl = ''}) => { // TODO: make required once legacy config is dropped required={false} isClearable + components={{Option: CaseTypeSelectOption}} onChange={selectedOption => { setValue(selectedOption ? selectedOption.value : undefined); }} diff --git a/src/openforms/scss/components/admin/_catalogi-type-option.scss b/src/openforms/scss/components/admin/_catalogi-type-option.scss index 0b68988471..47b5da9c1a 100644 --- a/src/openforms/scss/components/admin/_catalogi-type-option.scss +++ b/src/openforms/scss/components/admin/_catalogi-type-option.scss @@ -7,10 +7,5 @@ @include bem.element('draft-suffix') { color: var(--body-quiet-color); - - // only display the suffix in the dropdown - @at-root .admin-react-select__value-container & { - display: none; - } } } From 0db34e92fec8c10ca194da0fa682beeafaeb54ba Mon Sep 17 00:00:00 2001 From: robinvandermolen Date: Wed, 6 Nov 2024 11:13:51 +0100 Subject: [PATCH 3/3] :white_check_mark: [#4802] Updated storybook mock data --- .../objectsapi/ObjectsApiOptionsFormFields.stories.js | 2 +- .../admin/form_design/registrations/objectsapi/mocks.js | 2 +- .../components/admin/form_design/registrations/zgw/mocks.js | 5 +++++ 3 files changed, 7 insertions(+), 2 deletions(-) diff --git a/src/openforms/js/components/admin/form_design/registrations/objectsapi/ObjectsApiOptionsFormFields.stories.js b/src/openforms/js/components/admin/form_design/registrations/objectsapi/ObjectsApiOptionsFormFields.stories.js index e4ae881daf..0452234bc4 100644 --- a/src/openforms/js/components/admin/form_design/registrations/objectsapi/ObjectsApiOptionsFormFields.stories.js +++ b/src/openforms/js/components/admin/form_design/registrations/objectsapi/ObjectsApiOptionsFormFields.stories.js @@ -325,7 +325,7 @@ export const DraftDocumentTypesFeatureFlagOn = { rsin: '111111111', domain: 'TEST', }, - iotSubmissionReport: 'A rather long draft description', + iotSubmissionReport: 'Document type 4 with a rather long draft description', iotSubmissionCsv: 'Not-found documenttype', }, }, diff --git a/src/openforms/js/components/admin/form_design/registrations/objectsapi/mocks.js b/src/openforms/js/components/admin/form_design/registrations/objectsapi/mocks.js index a44f4a5ce3..7017da2b99 100644 --- a/src/openforms/js/components/admin/form_design/registrations/objectsapi/mocks.js +++ b/src/openforms/js/components/admin/form_design/registrations/objectsapi/mocks.js @@ -105,7 +105,7 @@ const DOCUMENT_TYPES = { }, { url: 'https://example.com/catalogi/api/v1/iot/13', - omschrijving: 'A rather long draft description', + omschrijving: 'Document type 4 with a rather long draft description', catalogusLabel: 'TEST (111111111)', isPublished: false, }, diff --git a/src/openforms/js/components/admin/form_design/registrations/zgw/mocks.js b/src/openforms/js/components/admin/form_design/registrations/zgw/mocks.js index 5ff745cbf3..4cdfe12acc 100644 --- a/src/openforms/js/components/admin/form_design/registrations/zgw/mocks.js +++ b/src/openforms/js/components/admin/form_design/registrations/zgw/mocks.js @@ -65,6 +65,11 @@ const CASE_TYPES = { description: 'Draft case type', isPublished: false, }, + { + identification: 'ZT23', + description: 'Published case type with a rather long description', + isPublished: true, + }, ], };