Merge pull request #61 from ecmwf-projects/COPDS-1400-download-form-i…

…mprovements

Copds 1400 download form improvements

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ecmwf-projects/cads-ui-library",
-  "version": "8.1.0",
+  "version": "8.2.2",
   "description": "Common UI kit library",
   "repository": {
     "type": "git",

src/widgets/RequiredErrorMessage.tsx

@@ -0,0 +1,12 @@
+import React from 'react'
+import { Error } from './Widget'
+
+export const RequiredErrorMessage = ({ show = false }: { show?: boolean }) => {
+  if (!show) {
+    return null
+  }
+
+  return (
+    <Error data-error='required'>At least one selection must be made</Error>
+  )
+}

src/widgets/StringChoiceWidget.tsx

@@ -23,11 +23,11 @@ import {
   ReservedSpace,
   WidgetActionsWrapper,
   WidgetHeader,
-  WidgetTitle,
-  Error
+  WidgetTitle
 } from './Widget'
 
 import { isDisabled, useBypassRequired } from '../utils'
+import { RequiredErrorMessage } from './RequiredErrorMessage'
 
 export interface StringChoiceWidgetDetails {
   columns: number
@@ -140,8 +140,10 @@ const StringChoiceWidget = ({
 
   const [defaultValue] = selection || []
 
+  const requiredError = !bypassed && required && !selection?.length
+
   return (
-    <Widget data-stylizable='widget'>
+    <Widget data-stylizable='widget' data-widget-required={requiredError}>
       <WidgetHeader>
         <WidgetActionsWrapper data-stylizable='widget-action-wrapper'>
           <WidgetTitle
@@ -174,9 +176,7 @@ const StringChoiceWidget = ({
         />
       </WidgetHeader>
       <ReservedSpace data-stylizable='widget string-choice reserved-error-space'>
-        {!bypassed && required && !selection?.length ? (
-          <Error>At least one selection must be made</Error>
-        ) : null}
+        <RequiredErrorMessage show={requiredError} />
       </ReservedSpace>
       <Fieldset name={name} ref={fieldSetRef} disabled={fieldsetDisabled}>
         <Legend>{label}</Legend>

src/widgets/StringListArrayWidget.tsx

@@ -23,7 +23,6 @@ import {
   WidgetActionsWrapper,
   WidgetHeader,
   WidgetTitle,
-  Error,
   ReservedSpace
 } from './Widget'
 
@@ -34,6 +33,7 @@ import {
   useBypassRequired,
   useWidgetSelection
 } from '../utils'
+import { RequiredErrorMessage } from './RequiredErrorMessage'
 
 declare global {
   interface Set<T> {
@@ -354,8 +354,10 @@ const StringListArrayWidget = ({
 
   const allValues = getAllValues(allGroups)
 
+  const requiredError = !bypassed && required && !selection[name]?.length
+
   return (
-    <Widget data-stylizable='widget'>
+    <Widget data-stylizable='widget' data-widget-required={requiredError}>
       <WidgetHeader>
         <WidgetActionsWrapper data-stylizable='widget-action-wrapper'>
           <WidgetTitle
@@ -430,9 +432,7 @@ const StringListArrayWidget = ({
         />
       </WidgetHeader>
       <ReservedSpace data-stylizable='widget string-listarray reserved-error-space'>
-        {!bypassed && required && !selection[name]?.length ? (
-          <Error>At least one selection must be made</Error>
-        ) : null}
+        <RequiredErrorMessage show={requiredError} />
       </ReservedSpace>
       <Fieldset name={name} ref={fieldSetRef} disabled={fieldsetDisabled}>
         <Legend>{label}</Legend>

src/widgets/StringListWidget.tsx

@@ -19,7 +19,6 @@ import {
   WidgetActionsWrapper,
   WidgetHeader,
   WidgetTitle,
-  Error,
   ReservedSpace
 } from './Widget'
 
@@ -30,6 +29,7 @@ import {
   useBypassRequired,
   useWidgetSelection
 } from '../utils'
+import { RequiredErrorMessage } from './RequiredErrorMessage'
 
 declare global {
   interface Set<T> {
@@ -122,8 +122,10 @@ const StringListWidget = ({
     return Boolean(selection.find(sel => sel === value))
   }
 
+  const requiredError = !bypassed && required && !selection[name]?.length
+
   return (
-    <Widget data-stylizable='widget'>
+    <Widget data-stylizable='widget' data-widget-required={requiredError}>
       <WidgetHeader>
         <WidgetActionsWrapper data-stylizable='widget-action-wrapper'>
           <WidgetTitle
@@ -188,9 +190,7 @@ const StringListWidget = ({
         />
       </WidgetHeader>
       <ReservedSpace>
-        {!bypassed && required && !selection[name]?.length ? (
-          <Error>At least one selection must be made</Error>
-        ) : null}
+        <RequiredErrorMessage show={requiredError} />
       </ReservedSpace>
       <Fieldset name={name} ref={fieldSetRef} disabled={fieldsetDisabled}>
         <Legend>{label}</Legend>