Merge branch 'main' into MHV-55400/medications-shipped-tracking

src/applications/appeals/shared/components/FileField.jsx

@@ -28,8 +28,10 @@ import { focusAddAnotherButton, focusCancelButton } from '../utils/focus';
 import {
   MISSING_PASSWORD_ERROR,
   INCORRECT_PASSWORD_ERROR,
+  FILE_NAME_TOO_LONG_ERROR,
   createContent,
   reMapErrorMessage,
+  checkIsFileNameTooLong,
   hasSomeUploading,
   checkUploadVisibility,
 } from '../utils/upload';
@@ -211,6 +213,12 @@ const FileField = props => {
         name: currentFile.name,
       };
 
+      if (checkIsFileNameTooLong(currentFile.name)) {
+        allFiles[idx].errorMessage = FILE_NAME_TOO_LONG_ERROR;
+        props.onChange(allFiles);
+        return;
+      }
+
       if (currentFile.type === 'testing') {
         // Skip read file for Cypress testing
         checkResults = {

src/applications/appeals/shared/tests/components/FileField.unit.spec.jsx

@@ -24,6 +24,8 @@ import FileField from '../../components/FileField';
 
 import {
   errormessageMaps,
+  FILE_NAME_TOO_LONG_ERROR,
+  MAX_FILE_NAME_LENGTH,
   MISSING_PASSWORD_ERROR,
   INCORRECT_PASSWORD_ERROR,
 } from '../../utils/upload';
@@ -537,6 +539,54 @@ describe('Schemaform <FileField>', () => {
     expect($('div.usa-input-error-message', container)).to.exist;
   });
 
+  it('should render file name too long error', async () => {
+    const onChangeSpy = sinon.spy();
+    const schema = {
+      additionalItems: {},
+      items: [
+        {
+          properties: {},
+        },
+      ],
+    };
+    const uiSchema = fileUploadUI('Files');
+    const fileWithLongName = new File(
+      ['test 123'],
+      'a'.repeat(MAX_FILE_NAME_LENGTH + 1),
+      {
+        type: fileTypeSignatures.pdf.mime,
+      },
+    );
+    const errorSchema = {};
+    const registry = {
+      fields: {
+        SchemaField: () => <div />,
+      },
+    };
+    const { container } = render(
+      <FileField
+        registry={registry}
+        schema={schema}
+        uiSchema={uiSchema}
+        idSchema={idSchema}
+        errorSchema={errorSchema}
+        formData={[]}
+        formContext={formContext}
+        onChange={onChangeSpy}
+        requiredSchema={requiredSchema}
+      />,
+    );
+
+    fireEvent.change($('input[type="file"]', container), {
+      target: { files: [fileWithLongName] },
+    });
+
+    expect(onChangeSpy.calledOnce).to.be.true;
+    expect(onChangeSpy.args[0][0][0].errorMessage).to.eq(
+      FILE_NAME_TOO_LONG_ERROR,
+    );
+  });
+
   it('should remap PDF dimension error', () => {
     const error = 'exceeds the page size limit';
     const schema = {

src/applications/appeals/shared/tests/utils/upload.unit.spec.js

@@ -3,6 +3,8 @@ import { expect } from 'chai';
 import {
   createPayload,
   parseResponse,
+  MAX_FILE_NAME_LENGTH,
+  checkIsFileNameTooLong,
   hasSomeUploading,
   checkUploadVisibility,
   createContent,
@@ -47,6 +49,24 @@ describe('parseResponse', () => {
   });
 });
 
+describe('checkIsFileNameTooLong', () => {
+  it('should return false for file names under the size limit', () => {
+    expect(checkIsFileNameTooLong()).to.be.false;
+    expect(checkIsFileNameTooLong('')).to.be.false;
+    expect(checkIsFileNameTooLong('abcd')).to.be.false;
+    expect(checkIsFileNameTooLong('a'.repeat(MAX_FILE_NAME_LENGTH / 2))).to.be
+      .false;
+    expect(checkIsFileNameTooLong('a'.repeat(MAX_FILE_NAME_LENGTH - 1))).to.be
+      .false;
+  });
+  it('should return true for file names over the size limit', () => {
+    expect(checkIsFileNameTooLong('a'.repeat(MAX_FILE_NAME_LENGTH + 1))).to.be
+      .true;
+    expect(checkIsFileNameTooLong('a'.repeat(MAX_FILE_NAME_LENGTH * 2))).to.be
+      .true;
+  });
+});
+
 describe('hasSomeUploading', () => {
   it('should return false if no files are uploading', () => {
     expect(hasSomeUploading([])).to.be.false;

src/applications/appeals/shared/utils/upload.js

@@ -9,6 +9,10 @@ export const MISSING_PASSWORD_ERROR = [
   'Document is locked with a user password',
 ];
 
+// Lighthouse limits file names to 255 characters
+export const MAX_FILE_NAME_LENGTH = 255;
+export const FILE_NAME_TOO_LONG_ERROR = `Your file name can’t exceed ${MAX_FILE_NAME_LENGTH} characters. Rename your file and try again.`;
+
 export const INCORRECT_PASSWORD_ERROR =
   'We couldn’t unlock your PDF. Save the PDF without a password and try again.';
 
@@ -24,6 +28,9 @@ export const reMapErrorMessage = error => {
   return errormessageMaps?.[result] ?? error;
 };
 
+export const checkIsFileNameTooLong = (name = '') =>
+  name.length > MAX_FILE_NAME_LENGTH;
+
 export const createPayload = (file, _formId, password) => {
   const payload = new FormData();
   payload.append('decision_review_evidence_attachment[file_data]', file);

src/applications/claims-status/components/appeals-v2/Docket.jsx

@@ -5,7 +5,6 @@ import { flow, sortBy, toPairs } from 'lodash';
 import omit from 'platform/utilities/data/omit';
 
 import DocketCard from './DocketCard';
-import DurationCard from './DurationCard';
 import {
   APPEAL_ACTIONS,
   DOCKET_TYPES,
@@ -50,11 +49,6 @@ function Docket({
     'MMMM YYYY',
   );
 
-  const etaFormatted =
-    eta &&
-    eta[amaDocket] &&
-    moment(eta[amaDocket], 'YYYY-MM-DD').format('MMMM YYYY');
-
   const otherEtas = flow(
     e => omit(amaDocket, e),
     toPairs,
@@ -148,14 +142,6 @@ function Docket({
         </p>
         {yourPlaceText}
         {ahead && <DocketCard total={total} ahead={ahead} docket={amaDocket} />}
-        {etaFormatted && (
-          <DurationCard
-            durationText={etaFormatted}
-            cardDescription={`Estimate of when your appeal will reach the front of the ${getDocketName(
-              amaDocket,
-            )} docket line`}
-          />
-        )}
         <h2>Is there a way to prioritize my appeal?</h2>
         <p>
           If you are suffering a serious illness or are in financial distress,

src/applications/claims-status/components/appeals-v2/NextEvent.jsx

@@ -1,31 +1,18 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import DurationCard from './DurationCard';
 
-const NextEvent = ({
-  title,
-  description,
-  durationText,
-  cardDescription,
-  showSeparator,
-}) => (
+const NextEvent = ({ description, showSeparator, title }) => (
   <li className="next-event">
     <h3>{title}</h3>
     <div>{description}</div>
-    <DurationCard
-      durationText={durationText}
-      cardDescription={cardDescription}
-    />
     {showSeparator && <span className="sidelines">or</span>}
   </li>
 );
 
 NextEvent.propTypes = {
-  title: PropTypes.string.isRequired,
   description: PropTypes.element.isRequired,
-  durationText: PropTypes.string.isRequired,
-  cardDescription: PropTypes.string.isRequired,
   showSeparator: PropTypes.bool.isRequired,
+  title: PropTypes.string.isRequired,
 };
 
 export default NextEvent;

src/applications/claims-status/components/appeals-v2/WhatsNext.jsx

@@ -1,7 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import NextEvent from './NextEvent';
-import DurationCard from './DurationCard';
 
 const WhatsNext = ({ nextEvents }) => {
   const { header, events } = nextEvents;
@@ -10,35 +9,15 @@ const WhatsNext = ({ nextEvents }) => {
       key={event.title}
       title={event.title}
       description={event.description}
-      durationText={event.durationText}
-      cardDescription={event.cardDescription}
       // show a separator after all events except the last one
       showSeparator={index !== events.length - 1}
     />
   ));
 
-  // Some current status types (really, just pendingSoc) have multiple
-  // NextEvents that each have the same duration. In these cases, we want to
-  // show one duration card, above the NextEvent list, instead of one card for
-  // each NextEvent item. getNextEvents() will only return a headerCard
-  // property if the corresponding current status type should be treated in
-  // this way
-  let headerDurationCard = null;
-  if (nextEvents.headerCard) {
-    const { durationText, cardDescription } = nextEvents.headerCard;
-    headerDurationCard = (
-      <DurationCard
-        durationText={durationText}
-        cardDescription={cardDescription}
-      />
-    );
-  }
-
   return (
     <div>
       <h2>What happens next?</h2>
       <p>{header}</p>
-      {headerDurationCard}
       <ul className="appeals-next-list">{eventsList}</ul>
     </div>
   );
@@ -47,16 +26,10 @@ const WhatsNext = ({ nextEvents }) => {
 WhatsNext.propTypes = {
   nextEvents: PropTypes.shape({
     header: PropTypes.string.isRequired,
-    headerCard: PropTypes.shape({
-      durationText: PropTypes.string.isRequired,
-      cardDescription: PropTypes.string.isRequired,
-    }),
     events: PropTypes.arrayOf(
       PropTypes.shape({
         title: PropTypes.string.isRequired,
         description: PropTypes.element.isRequired,
-        durationText: PropTypes.string.isRequired,
-        cardDescription: PropTypes.string.isRequired,
       }),
     ).isRequired,
   }).isRequired,

src/applications/claims-status/tests/components/appeals-v2/Docket.unit.spec.jsx

@@ -126,12 +126,6 @@ describe('Appeals V2 Docket', () => {
     wrapper.unmount();
   });
 
-  it('should render a time estimate', () => {
-    const wrapper = shallow(<Docket {...amaProps} />);
-    expect(wrapper.find('DurationCard').length).to.equal(1);
-    wrapper.unmount();
-  });
-
   it('should include docket switch instructions if eligible', () => {
     const wrapper = shallow(<Docket {...amaProps} />);
     expect(wrapper.text()).to.contain(

src/applications/claims-status/tests/components/appeals-v2/NextEvent.unit.spec.jsx

@@ -9,8 +9,6 @@ const defaultProps = {
   your appeal to the Board of Veterans’ Appeals. This evidence could cause VBA
   to grant your appeal, but if not, they will need to produce an additional
   Statement of the Case.`,
-  durationText: '11 months',
-  cardDescription: 'Test description',
   showSeparator: true,
 };