chore(application-system): Making title an optional property on form …

…fields (#17634) * defaulting every title to empty * chore: nx format:write update dirty files * Adding a few more optionals to titles --------- Co-authored-by: andes-it <[email protected]>
island-is · Jan 30, 2025 · d46501c · d46501c
1 parent b617666
commit d46501c
Show file tree

Hide file tree

Showing 33 changed files with 70 additions and 66 deletions.
diff --git a/libs/application/core/src/lib/fieldBuilders.ts b/libs/application/core/src/lib/fieldBuilders.ts
@@ -70,7 +70,7 @@ const extractCommonFields = (
     disabled = false,
     doesNotRequireAnswer = false,
     id,
-    title,
+    title = '',
     dataTestId,
     width = 'full',
     nextButtonText,
@@ -504,7 +504,7 @@ export const buildKeyValueField = (data: {
 
 export const buildSubmitField = (data: {
   id: string
-  title: FormText
+  title?: FormText
   placement?: 'footer' | 'screen'
   marginBottom?: BoxProps['marginBottom']
   marginTop?: BoxProps['marginTop']
@@ -514,7 +514,7 @@ export const buildSubmitField = (data: {
   const {
     id,
     placement = 'footer',
-    title,
+    title = '',
     actions,
     refetchApplicationAfterSubmit,
     marginTop,
@@ -562,11 +562,11 @@ export const buildFieldRequired = (
 
 export const buildRedirectToServicePortalField = (data: {
   id: string
-  title: FormText
+  title?: FormText
   marginBottom?: BoxProps['marginBottom']
   marginTop?: BoxProps['marginTop']
 }): RedirectToServicePortalField => {
-  const { id, title, marginTop, marginBottom } = data
+  const { id, title = '', marginTop, marginBottom } = data
   return {
     children: undefined,
     id,
@@ -595,12 +595,11 @@ export const buildPaymentPendingField = (data: {
 export const buildMessageWithLinkButtonField = (
   data: Omit<MessageWithLinkButtonField, 'type' | 'component' | 'children'>,
 ): MessageWithLinkButtonField => {
-  const { id, title, url, message, buttonTitle } = data
+  const { id, url, message, buttonTitle } = data
   return {
     ...extractCommonFields(data),
     children: undefined,
     id,
-    title,
     url,
     message,
     buttonTitle,
@@ -612,12 +611,11 @@ export const buildMessageWithLinkButtonField = (
 export const buildExpandableDescriptionField = (
   data: Omit<ExpandableDescriptionField, 'type' | 'component' | 'children'>,
 ): ExpandableDescriptionField => {
-  const { id, title, description, introText, startExpanded } = data
+  const { id, description, introText, startExpanded } = data
   return {
     ...extractCommonFields(data),
     children: undefined,
     id,
-    title,
     description,
     introText,
     startExpanded,
@@ -659,13 +657,11 @@ export const buildLinkField = (
 export const buildPaymentChargeOverviewField = (
   data: Omit<PaymentChargeOverviewField, 'type' | 'component' | 'children'>,
 ): PaymentChargeOverviewField => {
-  const { id, title, forPaymentLabel, totalLabel, getSelectedChargeItems } =
-    data
+  const { id, forPaymentLabel, totalLabel, getSelectedChargeItems } = data
   return {
     ...extractCommonFields(data),
     children: undefined,
     id,
-    title,
     forPaymentLabel,
     totalLabel,
     getSelectedChargeItems,
@@ -679,7 +675,6 @@ export const buildImageField = (
 ): ImageField => {
   const {
     id,
-    title,
     image,
     alt,
     condition,
@@ -692,7 +687,6 @@ export const buildImageField = (
     ...extractCommonFields(data),
     children: undefined,
     id,
-    title,
     image,
     alt,
     imageWidth,
@@ -894,7 +888,6 @@ export const buildFieldsRepeaterField = (
 ): FieldsRepeaterField => {
   const {
     fields,
-    title,
     titleVariant,
     formTitle,
     formTitleVariant,
@@ -912,7 +905,6 @@ export const buildFieldsRepeaterField = (
     type: FieldTypes.FIELDS_REPEATER,
     component: FieldComponents.FIELDS_REPEATER,
     fields,
-    title,
     titleVariant,
     formTitle,
     formTitleVariant,
@@ -943,7 +935,7 @@ export const buildStaticTableField = (
     header,
     condition,
     dataTestId,
-    title,
+    title = '',
     description,
     rows,
     summary,
@@ -977,7 +969,7 @@ export const buildSliderField = (
 ): SliderField => {
   const {
     id,
-    title,
+    title = '',
     titleVariant = 'h2',
     condition,
     min = 0,
@@ -1040,7 +1032,6 @@ export const buildDisplayField = (
   data: Omit<DisplayField, 'type' | 'component' | 'children'>,
 ): DisplayField => {
   const {
-    title,
     titleVariant,
     label,
     variant,
@@ -1051,7 +1042,6 @@ export const buildDisplayField = (
   } = data
   return {
     ...extractCommonFields(data),
-    title,
     titleVariant,
     label,
     variant,
@@ -1070,7 +1060,7 @@ export const buildAccordionField = (
 ): AccordionField => {
   const {
     accordionItems,
-    title,
+    title = '',
     titleVariant,
     id,
     marginTop,
@@ -1093,7 +1083,7 @@ export const buildAccordionField = (
 export const buildBankAccountField = (
   data: Omit<BankAccountField, 'type' | 'component' | 'children'>,
 ): BankAccountField => {
-  const { title, id, marginBottom, marginTop, titleVariant } = data
+  const { title = '', id, marginBottom, marginTop, titleVariant } = data
   return {
     children: undefined,
     id,

diff --git a/libs/application/core/src/lib/formBuilders.ts b/libs/application/core/src/lib/formBuilders.ts
@@ -12,30 +12,31 @@ import {
 } from '@island.is/application/types'
 
 export const buildForm = (data: Omit<Form, 'type'>): Form => {
-  return { ...data, type: FormItemTypes.FORM }
+  return { ...data, title: data.title ?? '', type: FormItemTypes.FORM }
 }
 
 export const buildMultiField = (data: Omit<MultiField, 'type'>): MultiField => {
-  return { ...data, type: FormItemTypes.MULTI_FIELD }
+  return { ...data, title: data.title ?? '', type: FormItemTypes.MULTI_FIELD }
 }
 
 export const buildRepeater = (data: Omit<Repeater, 'type'>): Repeater => {
-  return { ...data, type: FormItemTypes.REPEATER }
+  return { ...data, title: data.title ?? '', type: FormItemTypes.REPEATER }
 }
 
 export const buildSection = (data: Omit<Section, 'type'>): Section => {
-  return { ...data, type: FormItemTypes.SECTION }
+  return { ...data, title: data.title ?? '', type: FormItemTypes.SECTION }
 }
 
 export const buildSubSection = (data: Omit<SubSection, 'type'>): SubSection => {
-  return { ...data, type: FormItemTypes.SUB_SECTION }
+  return { ...data, title: data.title ?? '', type: FormItemTypes.SUB_SECTION }
 }
 
 export const buildExternalDataProvider = (
   data: Omit<ExternalDataProvider, 'type' | 'isPartOfRepeater' | 'children'>,
 ): ExternalDataProvider => {
   return {
     ...data,
+    title: data.title ?? '',
     isPartOfRepeater: false,
     children: undefined,
     type: FormItemTypes.EXTERNAL_DATA_PROVIDER,
@@ -49,7 +50,7 @@ export const buildDataProviderItem = (
     id: data.provider?.externalDataId ?? data.provider?.action ?? '',
     action: data.provider?.actionId,
     order: data.provider?.order,
-    title: data.title,
+    title: data.title ?? '',
     subTitle: data.subTitle,
     pageTitle: data.pageTitle,
     source: data.source,

diff --git a/.../data-protection-complaint/src/fields/CommissionFieldRepeater/CommissionFieldRepeater.tsx b/.../data-protection-complaint/src/fields/CommissionFieldRepeater/CommissionFieldRepeater.tsx
@@ -26,7 +26,7 @@ type PersonField = {
 export const CommissionFieldRepeater: FC<
   React.PropsWithChildren<FieldBaseProps>
 > = ({ application, errors, field }) => {
-  const { id, title } = field
+  const { id, title = '' } = field
   const { formatMessage, lang: locale } = useLocale()
   const { fields, append, remove } = useFieldArray({ name: id })
 

diff --git a/libs/application/templates/data-protection-complaint/src/fields/FieldLabel.tsx b/libs/application/templates/data-protection-complaint/src/fields/FieldLabel.tsx
@@ -9,7 +9,7 @@ export const FieldLabel: FC<React.PropsWithChildren<FieldBaseProps>> = ({
   application,
   field,
 }) => {
-  const { title } = field
+  const { title = '' } = field
   const { formatMessage, lang: locale } = useLocale()
 
   return (

diff --git a/libs/application/templates/funding-government-projects/src/fields/FieldTitle/FieldTitle.tsx b/libs/application/templates/funding-government-projects/src/fields/FieldTitle/FieldTitle.tsx
@@ -24,7 +24,7 @@ export const FieldTitle = ({ field, application }: Props) => {
         marginBottom={field.description ? 1 : 0}
       >
         {formatTextWithLocale(
-          field.title,
+          field.title ?? '',
           application,
           locale as Locale,
           formatMessage,

diff --git a/...lication/templates/grindavik-housing-buyout/src/fields/AdditionalOwnersOverview/index.tsx b/...lication/templates/grindavik-housing-buyout/src/fields/AdditionalOwnersOverview/index.tsx
@@ -44,7 +44,7 @@ export const AdditionalOwnersOverview = ({
       <Box marginBottom={3}>
         <Text variant="h3" marginBottom={3}>
           {formatTextWithLocale(
-            field.title,
+            field.title ?? '',
             application,
             locale as Locale,
             formatMessage,

diff --git a/...tion/templates/institution-collaboration/src/fields/SecondaryContact/SecondaryContact.tsx b/...tion/templates/institution-collaboration/src/fields/SecondaryContact/SecondaryContact.tsx
@@ -17,7 +17,7 @@ const SecondaryContact: FC<React.PropsWithChildren<FieldBaseProps>> = ({
 }) => {
   const { setValue, getValues } = useFormContext()
   const { formatMessage, lang: locale } = useLocale()
-  const { id, title } = field
+  const { id, title = '' } = field
   const isEnabled = getValues('hasSecondaryContact') === YES
 
   const enableSecondaryContact = () => {

diff --git a/libs/application/templates/operating-license/src/fields/PropertyOverviewRepeater/index.tsx b/libs/application/templates/operating-license/src/fields/PropertyOverviewRepeater/index.tsx
@@ -18,7 +18,7 @@ export const PropertyOverviewRepeater: FC<
   React.PropsWithChildren<PropTypes>
 > = ({ field, application }) => {
   const { formatMessage, lang: locale } = useLocale()
-  const { title } = field
+  const { title = '' } = field
   const { id } = field.props as { id: string }
   const fields = getValueViaPath(application.answers, id) as Property[]
 

diff --git a/libs/application/templates/operating-license/src/fields/PropertyRepeater/index.tsx b/libs/application/templates/operating-license/src/fields/PropertyRepeater/index.tsx
@@ -34,7 +34,7 @@ export const PropertyRepeater: FC<React.PropsWithChildren<FieldBaseProps>> = ({
   errors,
 }) => {
   const { formatMessage, lang: locale } = useLocale()
-  const { id, title } = field
+  const { id, title = '' } = field
   const { fields, append, remove } = useFieldArray({
     name: `${id}`,
   })

diff --git a/libs/application/types/src/lib/Fields.ts b/libs/application/types/src/lib/Fields.ts
@@ -218,7 +218,7 @@ export interface SelectOption<T = string | number> {
 export interface BaseField extends FormItem {
   readonly id: string
   readonly component: FieldComponents | string
-  readonly title: FormTextWithLocale
+  readonly title?: FormTextWithLocale
   readonly description?: FormTextWithLocale
   readonly children: undefined
   disabled?: boolean

diff --git a/libs/application/types/src/lib/Form.ts b/libs/application/types/src/lib/Form.ts
@@ -83,7 +83,7 @@ export interface Form {
   mode?: FormModes
   renderLastScreenBackButton?: boolean
   renderLastScreenButton?: boolean
-  title: StaticText
+  title?: StaticText
   type: FormItemTypes.FORM
 }
 
@@ -102,7 +102,7 @@ export interface FormItem extends TestSupport {
   readonly id?: string
   condition?: Condition
   readonly type: string
-  readonly title: FormTextWithLocale
+  readonly title?: FormTextWithLocale
   readonly nextButtonText?: FormText
 }
 
@@ -153,7 +153,7 @@ export interface DataProviderItem {
   readonly id: string
   readonly action?: string
   readonly order?: number
-  readonly title: FormText
+  readonly title?: FormText
   readonly subTitle?: FormText
   readonly pageTitle?: FormText
   readonly source?: string //TODO see if we can remove this
@@ -162,7 +162,7 @@ export interface DataProviderItem {
 export interface DataProviderBuilderItem {
   id?: string
   type?: string //TODO REMOVE THIS
-  title: FormText
+  title?: FormText
   subTitle?: FormText
   pageTitle?: FormText
   source?: string

diff --git a/libs/application/ui-fields/src/lib/AlertMessageFormField/AlertMessageFormField.tsx b/libs/application/ui-fields/src/lib/AlertMessageFormField/AlertMessageFormField.tsx
@@ -23,7 +23,7 @@ export const AlertMessageFormField: FC<React.PropsWithChildren<Props>> = ({
       <AlertMessage
         type={field.alertType ?? 'default'}
         title={formatTextWithLocale(
-          field.title,
+          field.title ?? '',
           application,
           locale as Locale,
           formatMessage,

diff --git a/libs/application/ui-fields/src/lib/AsyncSelectFormField/AsyncSelectFormField.tsx b/libs/application/ui-fields/src/lib/AsyncSelectFormField/AsyncSelectFormField.tsx
@@ -30,7 +30,7 @@ export const AsyncSelectFormField: FC<React.PropsWithChildren<Props>> = ({
 }) => {
   const {
     id,
-    title,
+    title = '',
     description,
     loadOptions,
     loadingError,

diff --git a/libs/application/ui-fields/src/lib/CheckboxFormField/CheckboxFormField.tsx b/libs/application/ui-fields/src/lib/CheckboxFormField/CheckboxFormField.tsx
@@ -31,7 +31,7 @@ export const CheckboxFormField = ({
 }: Props) => {
   const {
     id,
-    title,
+    title = '',
     description,
     options,
     disabled,

diff --git a/libs/application/ui-fields/src/lib/CompanySearchFormField/CompanySearchFormField.tsx b/libs/application/ui-fields/src/lib/CompanySearchFormField/CompanySearchFormField.tsx
@@ -26,7 +26,7 @@ export const CompanySearchFormField: FC<React.PropsWithChildren<Props>> = ({
 }) => {
   const {
     id,
-    title,
+    title = '',
     placeholder,
     setLabelToDataSchema = true,
     shouldIncludeIsatNumber,

diff --git a/libs/application/ui-fields/src/lib/DateFormField/DateFormField.tsx b/libs/application/ui-fields/src/lib/DateFormField/DateFormField.tsx
@@ -33,7 +33,7 @@ export const DateFormField: FC<React.PropsWithChildren<Props>> = ({
   const {
     id,
     disabled,
-    title,
+    title = '',
     description,
     required,
     placeholder,

diff --git a/libs/application/ui-fields/src/lib/DescriptionFormField/DescriptionFormField.tsx b/libs/application/ui-fields/src/lib/DescriptionFormField/DescriptionFormField.tsx
@@ -27,7 +27,7 @@ export const DescriptionFormField: FC<
       {showFieldName && (
         <Text variant={field.titleVariant}>
           {formatTextWithLocale(
-            field.title,
+            field.title ?? '',
             application,
             locale as Locale,
             formatMessage,

diff --git a/...ation/ui-fields/src/lib/ExpandableDescriptionFormField/ExpandableDescriptionFormField.tsx b/...ation/ui-fields/src/lib/ExpandableDescriptionFormField/ExpandableDescriptionFormField.tsx
@@ -24,7 +24,7 @@ export const ExpandableDescriptionFormField: FC<
         startExpanded={field.startExpanded}
         id={`BulletPointFormField-${field.id}`}
         label={formatTextWithLocale(
-          field.title,
+          field.title ?? '',
           application,
           locale as Locale,
           formatMessage,

diff --git a/libs/application/ui-fields/src/lib/FieldsRepeaterFormField/FieldsRepeaterFormField.tsx b/libs/application/ui-fields/src/lib/FieldsRepeaterFormField/FieldsRepeaterFormField.tsx
@@ -40,7 +40,7 @@ export const FieldsRepeaterFormField = ({
     description,
     marginTop = 6,
     marginBottom,
-    title,
+    title = '',
     titleVariant = 'h2',
     formTitle,
     formTitleVariant = 'h4',