Merge pull request #391 from folio-org/release/2.0.2

Release 2.0.2

Author: Jack-Golding

CHANGELOG.md

@@ -1,5 +1,9 @@
 # change history for ui-serials-management
 
+## 2.0.2 2025-04-01
+  * UISER-208 TypeError on the publication pattern create/edit form
+  * UISER-206 Fields in publication pattern creation form do not have correct width
+
 ## 2.0.1 2025-03-18
   * UISER-188 Review current state of test coverage and sonarqube code smells
     * Increased code coverage and resolved various code smells and reliability issues

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@folio/serials-management",
-  "version": "2.0.1",
+  "version": "2.0.2",
   "description": "FOLIO app for serials-management",
   "main": "src/index.js",
   "repository": "folio-org/ui-serials-management",

src/components/RulesetFormSections/ChronologyFieldArray/ChronologyField/ChronologyField.js

@@ -46,7 +46,7 @@ const ChronologyField = ({ name, chronologyRule, index }) => {
     }
   }, [chronologyRule?.templateMetadataRuleFormat, index]);
 
-  const renderTemplateTokensInfo = () => {
+  const renderTemplateTokensInfoPopover = () => {
     return (
       <InfoPopover
         content={
@@ -72,6 +72,19 @@ const ChronologyField = ({ name, chronologyRule, index }) => {
     );
   };
 
+  const renderTemplateTokens = useCallback(() => {
+    return (
+      <>
+        <Label id="template-token-header">
+          <FormattedMessage id="ui-serials-management.ruleset.template.tokens" />
+          {renderTemplateTokensInfoPopover()}
+          <ClipCopy text={tokenText} />
+        </Label>
+        {tokenText}
+      </>
+    );
+  }, [tokenText]);
+
   const renderWeekdayFormatField = useCallback(() => {
     return (
       <Field
@@ -172,50 +185,26 @@ const ChronologyField = ({ name, chronologyRule, index }) => {
           renderMonthDayFormatField(),
           renderMonthFormatField(),
           renderYearFormatField(),
-          <>
-            <Label id="template-token-header">
-              <FormattedMessage id="ui-serials-management.ruleset.template.tokens" />
-              {renderTemplateTokensInfo()}
-              <ClipCopy text={tokenText} />
-            </Label>
-            {tokenText}
-          </>,
+          renderTemplateTokens(),
         ],
       },
       chronology_month: {
         getFields: () => [
           renderMonthFormatField(),
           renderYearFormatField(),
-          <>
-            <Label id="template-token-header">
-              <FormattedMessage id="ui-serials-management.ruleset.template.tokens" />
-              {renderTemplateTokensInfo()}
-              <ClipCopy text={tokenText} />
-            </Label>
-            {tokenText}
-          </>,
+          renderTemplateTokens(),
         ],
       },
       chronology_year: {
-        getFields: () => [
-          renderYearFormatField(),
-          <>
-            <Label id="template-token-header">
-              <FormattedMessage id="ui-serials-management.ruleset.template.tokens" />
-              {renderTemplateTokensInfo()}
-              <ClipCopy text={tokenText} />
-            </Label>
-            {tokenText}
-          </>,
-        ],
+        getFields: () => [renderYearFormatField(), renderTemplateTokens()],
       },
     }),
     [
       renderMonthDayFormatField,
       renderMonthFormatField,
+      renderTemplateTokens,
       renderWeekdayFormatField,
       renderYearFormatField,
-      tokenText,
     ]
   );
 
@@ -225,9 +214,9 @@ const ChronologyField = ({ name, chronologyRule, index }) => {
         ?.getFields()
         ?.map((chronologyField, fieldIndex) => {
           return (
-            <div key={`chronology-field-${name}[${fieldIndex}]`}>
-              <Col xs={3}>{chronologyField}</Col>
-            </div>
+            <Col key={`chronology-field-${name}[${fieldIndex}]`} xs={3}>
+              {chronologyField}
+            </Col>
           );
         })}
     </Row>

src/components/RulesetFormSections/PatternTimePeriodForm/PatternTimePeriodForm.js

@@ -1,5 +1,5 @@
 import { Field, useFormState, useForm } from 'react-final-form';
-import { FormattedMessage, useIntl } from 'react-intl';
+import { FormattedMessage } from 'react-intl';
 import { NumberField } from '@k-int/stripes-kint-components';
 
 import {
@@ -39,7 +39,6 @@ const TIME_UNIT_LIMITERS = {
 const PatternTimePeriodForm = () => {
   const { values } = useFormState();
   const { change, batch } = useForm();
-  const intl = useIntl();
   const refdataValues = useSerialsManagementRefdata([TIME_UNITS]);
 
   const timeUnitOnChange = (e) => {
@@ -138,18 +137,13 @@ const PatternTimePeriodForm = () => {
                 id="number-of-time-unit"
                 input={input}
                 label={
-                  <FormattedMessage
-                    id="ui-serials-management.ruleset.numberOfTimeUnit"
-                    values={{
-                      timeUnit:
-                        values?.recurrence?.timeUnit?.value ||
-                        intl
-                          .formatMessage({
-                            id: 'ui-serials-management.ruleset.timeUnit',
-                          })
-                          .toLocaleLowerCase(),
-                    }}
-                  />
+                  values?.recurrence?.timeUnit?.value ? (
+                    <FormattedMessage
+                      id={`ui-serials-management.ruleset.numberOfTimeUnit.${values?.recurrence?.timeUnit?.value}`}
+                    />
+                  ) : (
+                    <FormattedMessage id="ui-serials-management.ruleset.numberOfTimeUnit" />
+                  )
                 }
                 meta={meta}
                 onChange={(e) => periodOnChange(e)}