fix: ui issues and improvements pt. 1 (#1425)

bcgov · Jul 30, 2024 · a4997e1 · a4997e1
1 parent ea9ab17
commit a4997e1
Show file tree

Hide file tree

Showing 23 changed files with 115 additions and 52 deletions.
diff --git a/frontend/src/components/LotApplicantAndInfoForm/constants.ts b/frontend/src/components/LotApplicantAndInfoForm/constants.ts
@@ -3,20 +3,20 @@ import AgencyTextPropsType from '../../types/AgencyTextPropsType';
 import { OptionsInputType, StringInputType } from '../../types/FormInputType';
 import { ComboBoxPropsType } from './definitions';
 
-export const agencyFieldsProp: AgencyTextPropsType = {
+export const agencyFieldsText = (isReview: boolean | undefined): AgencyTextPropsType => ({
   useDefaultCheckbox: {
     name: '',
     labelText: ''
   },
   agencyInput: {
-    titleText: 'Applicant agency acronym',
+    titleText: `Applicant agency ${isReview ? '' : 'acronym'}`,
     invalidText: 'Acronym that identifies the agency'
   },
   locationCode: {
     name: 'seedlotCreationLocationCode',
-    labelText: 'Applicant agency number'
+    labelText: 'Agency location code'
   }
-};
+});
 
 export const speciesFieldConfig: ComboBoxPropsType = {
   placeholder: 'Enter or choose an species for the seedlot',

diff --git a/frontend/src/components/LotApplicantAndInfoForm/index.tsx b/frontend/src/components/LotApplicantAndInfoForm/index.tsx
@@ -23,7 +23,7 @@ import { FormProps } from './definitions';
 import {
   vegLotAgency,
   vegLotLocationCode,
-  agencyFieldsProp
+  agencyFieldsText
 } from './constants';
 
 import './styles.scss';
@@ -115,7 +115,7 @@ const LotApplicantAndInfoForm = ({
             ? seedlotFormData.locationCode
             : vegLotLocationCode
         }
-        fieldsProps={agencyFieldsProp}
+        fieldsProps={agencyFieldsText(isReview)}
         setAgencyAndCode={
           (
             _isDefault: BooleanInputType,
@@ -132,7 +132,7 @@ const LotApplicantAndInfoForm = ({
             id={seedlotFormData?.email.id}
             name="email"
             type="email"
-            labelText="Applicant email address"
+            labelText="Email address"
             helperText="The Tree Seed Centre will use this to communicate with the applicant"
             invalid={seedlotFormData ? seedlotFormData.email.isInvalid : null}
             invalidText="Please enter a valid email"

diff --git a/frontend/src/components/LotApplicantAndInfoForm/styles.scss b/frontend/src/components/LotApplicantAndInfoForm/styles.scss
@@ -20,6 +20,15 @@
   .agency-email-row{
     margin-bottom: 3rem;
   }
+
+  .#{vars.$bcgov-prefix}--radio-button__label-text {
+    p {
+      font-size: var(--#{vars.$bcgov-prefix}-body-compact-01-font-size, 0.875rem);
+      font-weight: var(--#{vars.$bcgov-prefix}-body-compact-01-font-weight, 400);
+      line-height: var(--#{vars.$bcgov-prefix}-body-compact-01-line-height, 1.28572);
+      letter-spacing: var(--#{vars.$bcgov-prefix}-body-compact-01-letter-spacing, 0.16px);
+    }
+  }
 }
 
 .applicant-info-input {

diff --git a/frontend/src/components/ScrollToTop/index.tsx b/frontend/src/components/ScrollToTop/index.tsx
@@ -0,0 +1,24 @@
+import { useEffect } from 'react';
+import { useLocation } from 'react-router-dom';
+
+interface ScrollToTopProps {
+  enabled?: boolean
+}
+
+const ScrollToTop = ({ enabled = true }: ScrollToTopProps) => {
+  const { pathname } = useLocation();
+
+  useEffect(() => {
+    if (enabled) {
+      document.documentElement.scrollTo({
+        top: 0,
+        left: 0,
+        behavior: 'smooth'
+      });
+    }
+  }, [pathname]);
+
+  return null;
+};
+
+export default ScrollToTop;
diff --git a/frontend/src/components/SeedlotRegistrationSteps/CollectionStep/constants.ts b/frontend/src/components/SeedlotRegistrationSteps/CollectionStep/constants.ts
@@ -10,7 +10,7 @@ export const agencyFieldsProps: AgencyTextPropsType = {
     labelText: 'Use applicant agency as collector agency'
   },
   agencyInput: {
-    titleText: 'Cone Collector agency',
+    titleText: 'Cone Collector agency acronym',
     invalidText: 'Please choose a valid collector agency, filter with agency number, name or acronym'
   },
   locationCode: {

diff --git a/frontend/src/components/SeedlotRegistrationSteps/CollectionStep/index.tsx b/frontend/src/components/SeedlotRegistrationSteps/CollectionStep/index.tsx
@@ -22,6 +22,7 @@ import getConeCollectionMethod from '../../../api-service/coneCollectionMethodAP
 
 import Subtitle from '../../Subtitle';
 import ApplicantAgencyFields from '../../ApplicantAgencyFields';
+import ScrollToTop from '../../ScrollToTop';
 import ClassAContext from '../../../views/Seedlot/ContextContainerClassA/context';
 import MultiOptionsObj from '../../../types/MultiOptionsObject';
 
@@ -138,6 +139,7 @@ const CollectionStep = ({ isReview }: CollectionStepProps) => {
 
   return (
     <FlexGrid className="collection-step-container">
+      <ScrollToTop enabled={!isReview} />
       <Row className="collection-step-row">
         <Column className="section-title" sm={4} md={8} lg={16} xlg={16}>
           <h2>{fieldsConfig.titleSection.title}</h2>

diff --git a/frontend/src/components/SeedlotRegistrationSteps/ExtractionAndStorageStep/constants.ts b/frontend/src/components/SeedlotRegistrationSteps/ExtractionAndStorageStep/constants.ts
@@ -8,7 +8,7 @@ export const extractorAgencyFields: AgencyTextPropsType = {
     labelText: 'The extractory agency is the Tree Seed Center (TSC)'
   },
   agencyInput: {
-    titleText: 'Extractory agency',
+    titleText: 'Extractory agency acronym',
     invalidText: 'Please choose a valid extractory agency, filter with agency number, name or acronym'
   },
   locationCode: {
@@ -23,8 +23,8 @@ export const storageAgencyFields: AgencyTextPropsType = {
     labelText: 'The seed storage agency is the Tree Seed Center (TSC)'
   },
   agencyInput: {
-    titleText: 'Seed storage agency',
-    invalidText: 'Please choose a valid extractory agency, filter with agency number, name or acronym'
+    titleText: 'Seed storage agency acronym',
+    invalidText: 'Please choose a valid seed storage agency, filter with agency number, name or acronym'
   },
   locationCode: {
     name: 'storage-locationCode',
@@ -64,6 +64,6 @@ export const inputText = {
   },
   storageTitle: {
     titleText: 'Temporary seed storage',
-    subtitleText: 'Enter the seed storage agency information and storage\'s star and end dates for this seedlot'
+    subtitleText: 'Enter the seed storage agency information and storage\'s start and end dates for this seedlot'
   }
 };
diff --git a/frontend/src/components/SeedlotRegistrationSteps/ExtractionAndStorageStep/index.tsx b/frontend/src/components/SeedlotRegistrationSteps/ExtractionAndStorageStep/index.tsx
@@ -11,6 +11,7 @@ import {
 } from '@carbon/react';
 
 import Subtitle from '../../Subtitle';
+import ScrollToTop from '../../ScrollToTop';
 import ApplicantAgencyFields from '../../ApplicantAgencyFields';
 import MultiOptionsObj from '../../../types/MultiOptionsObject';
 import ClassAContext from '../../../views/Seedlot/ContextContainerClassA/context';
@@ -95,6 +96,7 @@ const ExtractionAndStorage = (
 
   return (
     <FlexGrid className="extraction-and-storage-form" fullWidth>
+      <ScrollToTop enabled={!isReview} />
       <Row className="extraction-information-title">
         <Column className="section-title" sm={4} md={8} lg={16}>
           <h2>{inputText.extractionTitle.titleText}</h2>

diff --git a/frontend/src/components/SeedlotRegistrationSteps/InterimStep/index.tsx b/frontend/src/components/SeedlotRegistrationSteps/InterimStep/index.tsx
@@ -15,6 +15,7 @@ import {
 } from '@carbon/react';
 
 import Subtitle from '../../Subtitle';
+import ScrollToTop from '../../ScrollToTop';
 import ApplicantAgencyFields from '../../ApplicantAgencyFields';
 
 import getFacilityTypes from '../../../api-service/facilityTypesAPI';
@@ -140,6 +141,7 @@ const InterimStep = ({ isReview }:InterimStepProps) => {
 
   return (
     <FlexGrid className="interim-agency-storage-form" fullWidth>
+      <ScrollToTop enabled={!isReview} />
       <Row className="interim-title-row">
         <Column className="section-title" sm={4} md={8} lg={16}>
           <h2>{pageTexts.interimTitleSection.title}</h2>

diff --git a/frontend/src/components/SeedlotRegistrationSteps/OrchardStep/constants.ts b/frontend/src/components/SeedlotRegistrationSteps/OrchardStep/constants.ts
@@ -58,7 +58,7 @@ export const orchardStepText = {
       checkbox: 'No, there was no pollen contamination present in the seed orchard'
     },
     breedingPercentage: {
-      label: 'Contaminant pollen breeding percentage (optional) (%)',
+      label: 'Contaminant pollen breeding value (optional) (%)',
       helper: 'If contaminant pollen was present and the contaminant pollen has a breeding value',
       invalid: 'Please enter a valid value between 0 and 100'
     },

diff --git a/frontend/src/components/SeedlotRegistrationSteps/OrchardStep/index.tsx b/frontend/src/components/SeedlotRegistrationSteps/OrchardStep/index.tsx
@@ -28,6 +28,7 @@ import InputErrorText from '../../InputErrorText';
 import { EmptyMultiOptObj } from '../../../shared-constants/shared-constants';
 import { getMultiOptList } from '../../../utils/MultiOptionsUtils';
 import { THREE_HALF_HOURS, THREE_HOURS } from '../../../config/TimeUnits';
+import ScrollToTop from '../../ScrollToTop';
 import Subtitle from '../../Subtitle';
 import ReadOnlyInput from '../../ReadOnlyInput';
 import ClassAContext from '../../../views/Seedlot/ContextContainerClassA/context';
@@ -343,10 +344,17 @@ const OrchardStep = ({
 
   return (
     <FlexGrid className="seedlot-orchard-step-form">
-      <Row className="seedlot-orchard-title-row">
-        <Column sm={4} md={8} lg={16}>
+      <ScrollToTop enabled={!isReview} />
+      <Row className={`seedlot-orchard-title-row ${isReview ? 'remove-bottom-margin' : ''}`}>
+        <Column className="section-title" sm={4} md={8} lg={16}>
           <h2>{orchardStepText.orchardSection.title}</h2>
-          <Subtitle text={orchardStepText.orchardSection.subtitle} />
+          {
+            !isReview
+              ? (
+                <Subtitle text={orchardStepText.orchardSection.subtitle} />
+              )
+              : null
+          }
         </Column>
       </Row>
       {
@@ -356,9 +364,15 @@ const OrchardStep = ({
         renderOrchardButtons()
       }
       <Row className="seedlot-orchard-title-row">
-        <Column sm={4} md={8} lg={16}>
+        <Column className="section-title" sm={4} md={8} lg={16}>
           <h2>{orchardStepText.gameteSection.title}</h2>
-          <Subtitle text={orchardStepText.gameteSection.subtitle} />
+          {
+            !isReview
+              ? (
+                <Subtitle text={orchardStepText.gameteSection.subtitle} />
+              )
+              : null
+          }
         </Column>
       </Row>
       <Row className="orchard-row">
@@ -475,9 +489,15 @@ const OrchardStep = ({
         </Column>
       </Row>
       <Row className="seedlot-orchard-title-row">
-        <Column sm={4} md={8} lg={16}>
+        <Column className="section-title" sm={4} md={8} lg={16}>
           <h2>{orchardStepText.pollenSection.title}</h2>
-          <Subtitle text={orchardStepText.pollenSection.subtitle} />
+          {
+            !isReview
+              ? (
+                <Subtitle text={orchardStepText.pollenSection.subtitle} />
+              )
+              : null
+          }
         </Column>
       </Row>
       <Row>

diff --git a/frontend/src/components/SeedlotRegistrationSteps/OrchardStep/styles.scss b/frontend/src/components/SeedlotRegistrationSteps/OrchardStep/styles.scss
@@ -47,4 +47,8 @@
       padding-bottom: 2.5rem;
     }
   }
+
+  .remove-bottom-margin {
+    margin-bottom: 0;
+  }
 }
diff --git a/frontend/src/components/SeedlotRegistrationSteps/OwnershipStep/constants.ts b/frontend/src/components/SeedlotRegistrationSteps/OwnershipStep/constants.ts
@@ -13,7 +13,7 @@ export const agencyFieldsProps: AgencyTextPropsType = {
     labelText: 'Use applicant agency as owner agency'
   },
   agencyInput: {
-    titleText: 'Owner agency',
+    titleText: 'Owner agency acronym',
     invalidText: 'Please choose a valid owner agency, filter with agency number, name or acronym'
   },
   locationCode: {

diff --git a/frontend/src/components/SeedlotRegistrationSteps/OwnershipStep/index.tsx b/frontend/src/components/SeedlotRegistrationSteps/OwnershipStep/index.tsx
@@ -17,6 +17,7 @@ import { THREE_HALF_HOURS, THREE_HOURS } from '../../../config/TimeUnits';
 import { getMultiOptList } from '../../../utils/MultiOptionsUtils';
 import getFundingSources from '../../../api-service/fundingSourcesAPI';
 import TitleAccordion from '../../TitleAccordion';
+import ScrollToTop from '../../ScrollToTop';
 import SingleOwnerInfo from './SingleOwnerInfo';
 
 import {
@@ -123,6 +124,7 @@ const OwnershipStep = ({ isReview }: OwnershipStepProps) => {
 
   return (
     <div>
+      <ScrollToTop enabled={!isReview} />
       <div className="ownership-header">
         <div className="ownership-step-title-box">
           {

diff --git a/frontend/src/components/SeedlotRegistrationSteps/ParentTreeStep/index.tsx b/frontend/src/components/SeedlotRegistrationSteps/ParentTreeStep/index.tsx
@@ -27,6 +27,7 @@ import Subtitle from '../../Subtitle';
 import EmptySection from '../../EmptySection';
 import DetailSection from '../../DetailSection';
 import DescriptionBox from '../../DescriptionBox';
+import ScrollToTop from '../../ScrollToTop';
 
 import InputErrorNotification from './InputErrorNotification';
 import UploadWarnNotification from './UploadWarnNotification';
@@ -517,6 +518,7 @@ const ParentTreeStep = ({ isReviewDisplay, isReviewRead }: ParentTreeStepProps)
 
   return (
     <FlexGrid className="parent-tree-step-container">
+      <ScrollToTop enabled={!isReviewDisplay} />
       {
         !isReviewDisplay
           ? (
@@ -715,7 +717,10 @@ const ParentTreeStep = ({ isReviewDisplay, isReviewRead }: ParentTreeStepProps)
                               <TableRow>
                                 {
                                   headerConfig.map((header) => (
-                                    (header.availableInTabs.includes(currentTab) && header.enabled)
+                                    (
+                                      header.availableInTabs.includes(currentTab)
+                                      && header.enabled
+                                    )
                                       ? (
                                         <TableHeader id={header.id} key={header.id}>
                                           <DefinitionTooltip

diff --git a/frontend/src/components/SeedlotReviewSteps/ApplicantAndSeedlot/Read/index.tsx b/frontend/src/components/SeedlotReviewSteps/ApplicantAndSeedlot/Read/index.tsx
@@ -22,8 +22,8 @@ const ApplicantAndSeedlotRead = () => {
         <Column className="info-col" sm={4} md={4} lg={4}>
           <ReadOnlyInput
             id="applicant-and-seedlot-agency-name"
-            label="Applicant agency acronym"
-            value={defaultAgencyObj.label}
+            label="Applicant agency"
+            value={defaultAgencyObj.description}
             showSkeleton={isFetchingData}
           />
         </Column>

diff --git a/frontend/src/components/SeedlotReviewSteps/Collection/Read/index.tsx b/frontend/src/components/SeedlotReviewSteps/Collection/Read/index.tsx
@@ -47,7 +47,7 @@ const CollectionReviewRead = () => {
         <Column className="info-col" sm={4} md={4} lg={4}>
           <ReadOnlyInput
             id="collection-agency-name"
-            label="Cone collector agency name"
+            label="Cone collector agency"
             value={agencyQuery.data ? getForestClientLabel(agencyQuery.data) : ''}
             showSkeleton={isFetchingData || agencyQuery.isFetching}
           />

diff --git a/frontend/src/components/SeedlotReviewSteps/ExtractionStorage/Read/index.tsx b/frontend/src/components/SeedlotReviewSteps/ExtractionStorage/Read/index.tsx
@@ -23,8 +23,8 @@ const ExtractionStorageReviewRead = () => {
         <Column className="info-col" sm={4} md={4} lg={4}>
           <ReadOnlyInput
             id="extraction-agency-name"
-            label="Extractory agency acronym"
-            value={state.extraction.agency.value.label}
+            label="Extractory agency"
+            value={state.extraction.agency.value.description}
             showSkeleton={isFetchingData}
           />
         </Column>
@@ -77,8 +77,8 @@ const ExtractionStorageReviewRead = () => {
         <Column className="info-col" sm={4} md={4} lg={4}>
           <ReadOnlyInput
             id="storage-agency-name"
-            label="Seed storage agency acronym"
-            value={state.seedStorage.agency.value.label}
+            label="Seed storage agency"
+            value={state.seedStorage.agency.value.description}
             showSkeleton={isFetchingData}
           />
         </Column>

diff --git a/frontend/src/components/SeedlotReviewSteps/Interim/Read/index.tsx b/frontend/src/components/SeedlotReviewSteps/Interim/Read/index.tsx
@@ -10,6 +10,7 @@ import { getForestClientByNumberOrAcronym } from '../../../../api-service/forest
 import getFacilityTypes from '../../../../api-service/facilityTypesAPI';
 import { MONTH_DAY_YEAR } from '../../../../config/DateFormat';
 import { THREE_HALF_HOURS, THREE_HOURS } from '../../../../config/TimeUnits';
+import { getForestClientLabel } from '../../../../utils/ForestClientUtils';
 
 const InterimReviewRead = () => {
   const {
@@ -54,7 +55,7 @@ const InterimReviewRead = () => {
           <ReadOnlyInput
             id="interim-agency-name"
             label="Interim agency acronym"
-            value={agencyQuery.data ? agencyQuery.data.acronym : ''}
+            value={agencyQuery.data ? getForestClientLabel(agencyQuery.data) : ''}
             showSkeleton={isFetchingData || agencyQuery.isFetching}
           />
         </Column>

diff --git a/frontend/src/components/SeedlotReviewSteps/Orchard/Read/index.tsx b/frontend/src/components/SeedlotReviewSteps/Orchard/Read/index.tsx
@@ -125,7 +125,7 @@ const OrchardReviewRead = () => {
                 <Column className="info-col" sm={4} md={8} lg={8}>
                   <ReadOnlyInput
                     id="orchard-pollen-percentage"
-                    label="Contaminant pollen breeding percentage"
+                    label="Contaminant pollen breeding value"
                     value={state.breedingPercentage.value}
                     showSkeleton={isFetchingData}
                   />

diff --git a/frontend/src/components/SeedlotReviewSteps/Ownership/Read/index.tsx b/frontend/src/components/SeedlotReviewSteps/Ownership/Read/index.tsx
@@ -28,8 +28,8 @@ const OwnershipReviewRead = () => {
               <Column className="info-col" sm={4} md={4} lg={4}>
                 <ReadOnlyInput
                   id={`owner-${curOwner.id}-agency`}
-                  label="Owner agency acronym"
-                  value={curOwner.ownerAgency.value.label}
+                  label="Owner agency"
+                  value={curOwner.ownerAgency.value.description}
                   showSkeleton={isFetchingData}
                 />
               </Column>