Feat/Parent tree step foundation (#182)

* fix: add prevent duplicate logic to orcahrd step

* fix: remove prevent duplicate orchard id logic

* fix: modularize things

* fix: add root to dockerfile dev

* feat: add DescriptionBox component

* feat: adjust description box styling

* fix: update carbon version

* fix: test link in notification box

* fix: remove !import for grid and refactor related code

* feat: add padding to page bottom

* fix: change where padding bottom is added

* feat: add btn text and icon customization feat to submit modal

* fix: update snapshot

* fix: add end of file lines

* fix: fix collection start date col size

* feat: add proper style to tab list

* feat: complete notification box

* feat: add placeholder component for other 2 tabs

* feat: dynamically switching description & notification

* feat: add merge orchards logic

* feat: add error notification table

* feat: fetch data for parent tree genetic quality

* feat: adding constants

* feat: add dynamic table header

* feat: implement table row rendering

* fix: update data storing logic

* feat: link state to parent component

* fix: update css

* feat: clean table when orchard changes

* feat: add tooltip and input to tables

* feat: add table col toggling

* fix: lint update

* fix: update node package

* Revert "fix: update node package"

This reverts commit 0191a61.

* fix: change h1 to h2 for description box

* fix: upgrade webpack and ts-checked-plugin

* fix: specify text type for description-box

* fix: fix typo renderTableCell

* fix: get rid of silly text

---------

Co-authored-by: Derek Roberts <derek.roberts@gmail.com>
Co-authored-by: Ricardo Campos <ricardo.campos@encora.com>

frontend/src/api-service/ApiConfig.ts

@@ -33,14 +33,18 @@ const ApiConfig = {
 
   paymentMethod: `${serverHost}/api/payment-methods`,
 
+  orchardSeedPlan: `${serverHost}/api/orchards`,
+
   /**
    * ORACLE API
    */
   vegetationCode: `${oracleServerHost}/api/vegetation-codes?page=0&perPage=500`,
 
   fundingSource: `${oracleServerHost}/api/funding-sources`,
 
-  orchard: `${oracleServerHost}/api/orchards`
+  orchard: `${oracleServerHost}/api/orchards`,
+
+  parentTreeGeneticQuality: `${oracleServerHost}/api/orchards/parent-tree-genetic-quality`
 };
 
 export default ApiConfig;

frontend/src/api-service/orchardAPI.ts

@@ -1,9 +1,17 @@
 import ApiConfig from './ApiConfig';
 import api from './api';
 
-const getOrchardByID = (orchardID: string) => {
+export const getOrchardByID = (orchardID: string) => {
   const url = `${ApiConfig.orchard}/${orchardID}`;
   return api.get(url).then((res) => res.data);
 };
 
-export default getOrchardByID;
+export const getSeedPlanUnits = (orchardID: string) => {
+  const url = `${ApiConfig.orchardSeedPlan}/${orchardID}/seed-plan-units?active=true`;
+  return api.get(url).then((res) => res.data);
+};
+
+export const getParentTreeGeneQuali = (orchardID: string, spu: string) => {
+  const url = `${ApiConfig.parentTreeGeneticQuality}/${orchardID}/${spu}`;
+  return api.get(url).then((res) => res.data);
+};

frontend/src/components/DescriptionBox/index.tsx

@@ -1,5 +1,4 @@
 import React from 'react';
-import { Column } from '@carbon/react';
 import './styles.scss';
 
 type DescriptionBoxProps = {
@@ -13,10 +12,10 @@ const DescriptionBox = (
     description
   }: DescriptionBoxProps
 ) => (
-  <Column className="description-box-container" sm={4} md={8} lg={8} xlg={8}>
-    <h1 className="description-box-header">{header}</h1>
+  <div className="description-box-container">
+    <h3 className="description-box-header">{header}</h3>
     <div className="description-box-description">{description}</div>
-  </Column>
+  </div>
 );
 
 export default DescriptionBox;

frontend/src/components/DescriptionBox/styles.scss

@@ -1,15 +1,17 @@
+@use '@carbon/type';
 @use '../../theme/variables.scss' as vars;
 
 .description-box-container{
+  width: 100%;
 
   .description-box-header{
+    @include type.type-style('heading-03');
     color: var(--#{vars.$bcgov-prefix}-text-primary);
-    font-size: 1.25rem;
   }
 
   .description-box-description{
+    @include type.type-style('body-01');
     color: var(--#{vars.$bcgov-prefix}-text-secondary);
-    font-size: 0.875rem;
     margin-top: 0.5rem;
 
     a{

frontend/src/components/FormReview/index.tsx

@@ -148,7 +148,10 @@ const FormReview = () => {
     orchardStep: orchardMock,
     collectionStep: collectionMock,
     extractionStorageStep: extractionMock,
-    parentTreeStep: {}
+    parentTreeStep: {
+      tableRowData: {},
+      notifCtrl: {}
+    }
   });
 
   return (
@@ -267,6 +270,7 @@ const FormReview = () => {
                       state={allStepData.orchardStep}
                       setStepData={() => { }}
                       readOnly
+                      cleanParentTables={() => { }}
                     />
                     <Button
                       kind="tertiary"

frontend/src/components/SeedlotRegistrationSteps/OrchardStep/index.tsx

@@ -22,7 +22,7 @@ import Subtitle from '../../Subtitle';
 import { OrchardForm, OrchardObj } from './definitions';
 import { MAX_ORCHARDS } from './constants';
 
-import getOrchardByID from '../../../api-service/orchardAPI';
+import { getOrchardByID } from '../../../api-service/orchardAPI';
 import { filterInput, FilterObj } from '../../../utils/filterUtils';
 
 import FemaleGameticOptions from './data';
@@ -40,12 +40,13 @@ type NumStepperVal = {
 interface OrchardStepProps {
   seedlotSpecies: DropDownObj
   state: OrchardForm
-  setStepData: Function
+  setStepData: Function,
+  cleanParentTables: Function,
   readOnly?: boolean
 }
 
 const OrchardStep = ({
-  seedlotSpecies, state, setStepData, readOnly
+  seedlotSpecies, state, setStepData, cleanParentTables, readOnly
 }: OrchardStepProps) => {
   const queryClient = useQueryClient();
   const [isPLISpecies] = useState<boolean>(seedlotSpecies.code === 'PLI');
@@ -86,10 +87,10 @@ const OrchardStep = ({
   // Set orchard name by input id, if data is not present then clear orcahrd name
   const setOrchardName = (inputId: number, data?: OrchardDataType) => {
     const newOrchards = [...state.orchards];
-    /*
-      * It is safe to replace item in array by index here
-      * since the array is not mutable at this stage
-    */
+    /**
+     * It is safe to replace item in array by index here
+     * since the array is not mutable at this stage
+     */
     const replaceIndex = newOrchards.findIndex((orchard) => orchard.inputId === inputId);
     if (data?.name && data.vegetationCode && data.stageCode) {
       newOrchards[replaceIndex].orchardLabel = `${data.name} - ${data.vegetationCode} - ${data.stageCode}`;
@@ -117,6 +118,7 @@ const OrchardStep = ({
   });
 
   const fetchOrchardInfo = (orchardId: string, inputId: number) => {
+    cleanParentTables();
     // Copy orchards from state
     const newOrchards = [...state.orchards];
     // Replace input value with id

frontend/src/components/SeedlotRegistrationSteps/ParentTreeStep/UploadFileModal/constants.ts

@@ -0,0 +1,21 @@
+const textConfig = {
+  title: 'Upload from file',
+  label: 'Seedlot registration',
+  description: 'Select the spreadsheet file for the cone and pollen count table with the data you want to import. The supported file format is .csv.',
+  uploadFile: 'Click to upload or drag and drop the file here',
+  uploadedFileErrorSize: 'File size exceeds limit',
+  uploadedFileErrorType: 'Incorrect file format',
+  uploadedFileErrorMessageSize: '500kb max file size. Select a new file and try again.',
+  uploadedFileErrorMessageType: 'Only CSV files are supported. Select a new file and try again.',
+  uploadedFileIconDesc: 'Delete file',
+  notification: {
+    title: 'Note:',
+    description: 'When uploading a file all previously filled data within the table will be replaced'
+  },
+  buttons: {
+    cancel: 'Cancel',
+    confirm: 'Import file and continue'
+  }
+};
+
+export default textConfig;

frontend/src/components/SeedlotRegistrationSteps/ParentTreeStep/UploadFileModal/index.tsx

@@ -6,7 +6,7 @@ import {
   FileUploaderItem
 } from '@carbon/react';
 
-import { pageTexts } from '../constants';
+import textConfig from './constants';
 
 import './styles.scss';
 
@@ -36,10 +36,10 @@ const UploadFileModal = ({ open, setOpen, onSubmit }: UploadFileModalProps) => {
   return (
     <Modal
       className="upload-file-modal"
-      modalLabel={pageTexts.sharedTabTexts.modal.label}
-      modalHeading={pageTexts.sharedTabTexts.modal.title}
-      primaryButtonText={pageTexts.sharedTabTexts.modal.buttons.confirm}
-      secondaryButtonText={pageTexts.sharedTabTexts.modal.buttons.cancel}
+      modalLabel={textConfig.label}
+      modalHeading={textConfig.title}
+      primaryButtonText={textConfig.buttons.confirm}
+      secondaryButtonText={textConfig.buttons.cancel}
       open={open}
       onRequestClose={() => {
         setOpen(false);
@@ -54,11 +54,11 @@ const UploadFileModal = ({ open, setOpen, onSubmit }: UploadFileModalProps) => {
       size="sm"
     >
       <p className="upload-modal-description">
-        {pageTexts.sharedTabTexts.modal.description}
+        {textConfig.description}
       </p>
       <FileUploaderDropContainer
         className="upload-file-component"
-        labelText={pageTexts.sharedTabTexts.modal.uploadFile}
+        labelText={textConfig.uploadFile}
         accept={['.csv']}
         onAddFiles={
           (e: React.ChangeEvent<HTMLInputElement>, { addedFiles }: any) => {
@@ -67,11 +67,11 @@ const UploadFileModal = ({ open, setOpen, onSubmit }: UploadFileModalProps) => {
             setFileAdded(true);
             setFileName(fileToUpload.name);
             if (fileToUpload.type !== 'text/csv') {
-              setErrorSub(pageTexts.sharedTabTexts.modal.uploadedFileErrorType);
-              setErrorMessage(pageTexts.sharedTabTexts.modal.uploadedFileErrorMessageType);
+              setErrorSub(textConfig.uploadedFileErrorType);
+              setErrorMessage(textConfig.uploadedFileErrorMessageType);
             } else if (fileToUpload.filesize > 512000) {
-              setErrorSub(pageTexts.sharedTabTexts.modal.uploadedFileErrorSize);
-              setErrorMessage(pageTexts.sharedTabTexts.modal.uploadedFileErrorMessageSize);
+              setErrorSub(textConfig.uploadedFileErrorSize);
+              setErrorMessage(textConfig.uploadedFileErrorMessageSize);
             } else {
               setInvalidFile(false);
               setFile(fileToUpload);
@@ -86,7 +86,7 @@ const UploadFileModal = ({ open, setOpen, onSubmit }: UploadFileModalProps) => {
           errorSubject={errorSub}
           errorBody={errorMessage}
           invalid={invalidFile}
-          iconDescription={pageTexts.sharedTabTexts.modal.uploadedFileIconDesc}
+          iconDescription={textConfig.uploadedFileIconDesc}
           status={uploaderStatus}
           onDelete={() => resetUploadStatus()}
         />
@@ -96,8 +96,8 @@ const UploadFileModal = ({ open, setOpen, onSubmit }: UploadFileModalProps) => {
         hideCloseButton
         lowContrast
         kind="info"
-        title={pageTexts.sharedTabTexts.modal.notification.title}
-        subtitle={pageTexts.sharedTabTexts.modal.notification.description}
+        title={textConfig.notification.title}
+        subtitle={textConfig.notification.description}
       />
     </Modal>
   );