Add long text validation and apply it to use case and justification (#1083)

Author: zhx828

screenshot-test/__baseline_snapshots__/Company User Details Page-snap.png

@@ -40,6 +40,7 @@ import client from 'app/shared/api/clientInstance';
 import { notifyError } from 'app/shared/utils/NotificationUtils';
 import {
   EMAIL_VAL,
+  LONG_TEXT_VAL,
   SHORT_TEXT_VAL,
   TEXT_VAL,
 } from 'app/shared/utils/FormValidationUtils';
@@ -663,7 +664,7 @@ export class NewAccountForm extends React.Component<INewAccountForm> {
                         placeholder={this.useCasePlaceholder}
                         rows={6}
                         validate={{
-                          ...TEXT_VAL,
+                          ...LONG_TEXT_VAL,
                           required: {
                             value: true,
                             errorMessage: 'Your use case is required.',
@@ -753,6 +754,13 @@ export class NewAccountForm extends React.Component<INewAccountForm> {
                         rows={6}
                         type={'textarea'}
                         required={this.apiAccessRequested}
+                        validate={{
+                          ...LONG_TEXT_VAL,
+                          required: {
+                            value: true,
+                            errorMessage: 'Your justification is required.',
+                          },
+                        }}
                       />
                     </div>
                   )}

screenshot-test/__baseline_snapshots__/User Details Page-snap.png

@@ -725,7 +725,7 @@ export enum ACCOUNT_TITLES {
   COUNTRY = 'Country',
   API_TOKEN = 'API Token',
   LICENSE_TYPE = 'License',
-  ADDITIONAL_INFO_USER_CASE = 'Use Case',
+  ADDITIONAL_INFO_USE_CASE = 'Use Case',
 }
 
 export enum API_CALL_STATUS {

src/main/webapp/app/components/newAccountForm/NewAccountForm.tsx

@@ -69,7 +69,11 @@ import { SimpleConfirmModal } from 'app/shared/modal/SimpleConfirmModal';
 import DocumentTitle from 'react-document-title';
 import { Link } from 'react-router-dom';
 import { RouterStore } from 'mobx-react-router';
-import { SHORT_TEXT_VAL, TEXT_VAL } from 'app/shared/utils/FormValidationUtils';
+import {
+  LONG_TEXT_VAL,
+  SHORT_TEXT_VAL,
+  TEXT_VAL,
+} from 'app/shared/utils/FormValidationUtils';
 import AuthenticationStore from 'app/store/AuthenticationStore';
 import ButtonWithTooltip from 'app/shared/button/ButtonWithTooltip';
 import {
@@ -401,7 +405,7 @@ export default class UserPage extends React.Component<IUserPage> {
     if (this.user) {
       const updatedUserCompany: UserCompany = {
         ...this.user.additionalInfo?.userCompany,
-        useCase: values.additionalInfoUserCase,
+        useCase: values.additionalInfoUseCase,
       };
       const updatedAdditionalInfo: AdditionalInfoDTO = {
         ...this.user.additionalInfo,
@@ -898,17 +902,19 @@ export default class UserPage extends React.Component<IUserPage> {
                             disabled={this.user.company != null}
                           />
                           <AvField
-                            name="additionalInfoUserCase"
+                            name="additionalInfoUseCase"
                             label={
                               <BoldAccountTitle
-                                title={ACCOUNT_TITLES.ADDITIONAL_INFO_USER_CASE}
+                                title={ACCOUNT_TITLES.ADDITIONAL_INFO_USE_CASE}
                                 licenseType={this.selectedLicense}
                               />
                             }
                             value={
                               this.user.additionalInfo?.userCompany?.useCase
                             }
-                            validate={TEXT_VAL}
+                            rows={3}
+                            type={'textarea'}
+                            validate={LONG_TEXT_VAL}
                           />
                           <AvField
                             name="city"

src/main/webapp/app/config/constants.tsx

@@ -77,6 +77,8 @@ export const TEXT_VAL = textValidation(2, 255);
 
 export const SHORT_TEXT_VAL = textValidation(2, 50);
 
+export const LONG_TEXT_VAL = textValidation(2);
+
 export const EMAIL_VAL = {
   required: {
     value: true,