fix: ui issues and improvements pt. 2

backend/src/main/java/ca/bc/gov/backendstartapi/endpoint/TscAdminEndpoint.java

@@ -27,6 +27,7 @@
 import org.springframework.http.HttpStatus;
 import org.springframework.http.ResponseEntity;
 import org.springframework.util.MimeTypeUtils;
+import org.springframework.web.bind.annotation.CrossOrigin;
 import org.springframework.web.bind.annotation.GetMapping;
 import org.springframework.web.bind.annotation.PathVariable;
 import org.springframework.web.bind.annotation.PostMapping;
@@ -70,6 +71,7 @@ public class TscAdminEndpoint {
             description = "Access token is missing or invalid",
             content = @Content(schema = @Schema(implementation = Void.class)))
       })
+  @CrossOrigin(exposedHeaders = "X-TOTAL-COUNT")
   @RoleAccessConfig({"SPAR_TSC_ADMIN"})
   public ResponseEntity<List<Seedlot>> getSeedlotsForReviewing(
       @RequestParam(value = "page", required = false, defaultValue = "0") Integer page,

frontend/src/components/BCHeader/index.tsx

@@ -186,7 +186,7 @@ const BCHeader = () => {
                           key={navItem.name}
                           className={navItem.disabled ? 'disabled-side-nav-option' : ''}
                           renderIcon={Icons[navItem.icon]}
-                          isActive={window.location.pathname === navItem.link}
+                          isActive={window.location.pathname.includes(navItem.link)}
                           onClick={navItem.disabled ? null : () => navigate(navItem.link)}
                         >
                           {navItem.name}

frontend/src/components/ClientAndCodeInput/ClientSearchModal/ClientSearchFields.tsx

@@ -5,9 +5,10 @@ import {
   TextInput, Dropdown, Button
 } from '@carbon/react';
 import { Search } from '@carbon/icons-react';
-import { Link } from 'react-router-dom';
 
 import ComboBoxEvent from '../../../types/ComboBoxEvent';
+import useWindowSize from '../../../hooks/UseWindowSize';
+import { MEDIUM_SCREEN_WIDTH } from '../../../shared-constants/shared-constants';
 
 import { clientSearchOptions } from './constants';
 import { ClientSearchFieldsProps } from './definitions';
@@ -18,66 +19,75 @@ const ClientSearchFields = ({
   searchOption,
   setSearchOption,
   mutationFn
-}: ClientSearchFieldsProps) => (
-  <FlexGrid className="client-search-grid">
-    <Row>
-      <Column sm={4} md={4} lg={16} xlg={16}>
-        <p className="client-modal-description">
-          Search for a specific client or agency, you can search by name, acronym or number.
-          To view more information about the client, you can
-          {' '}
-          <Link to="">
-            go to client search screen.
-          </Link>
-        </p>
-      </Column>
-    </Row>
-    <Row className="client-search-row">
-      <Column sm={4} md={4} lg={10} xlg={10}>
-        <TextInput
-          id="client-search-input"
-          labelText=""
-          aria-label="Client Search Input"
-          placeholder="Search for client or agency"
-          defaultValue={searchWord}
-          onBlur={(e: React.ChangeEvent<HTMLInputElement>) => {
-            setSearchWord(e.target.value);
-          }}
-          disabled={mutationFn.isLoading}
-        />
-      </Column>
-      <Column sm={4} md={4} lg={4} xlg={4}>
-        <Dropdown
-          id="client-search-dropdown"
-          label=""
-          aria-label="Client Search Field Select Dropdown"
-          titleText=""
-          items={clientSearchOptions}
-          initialSelectedItem={clientSearchOptions[0]}
-          selectedItem={searchOption}
-          disabled={mutationFn.isLoading}
-          onChange={(e: ComboBoxEvent) => {
-            setSearchOption(e.selectedItem);
-          }}
-        />
-      </Column>
-      <Column sm={4} md={4} lg={2} xlg={2}>
-        <Button
-          size="md"
-          renderIcon={Search}
-          className="client-search-button"
-          disabled={mutationFn.isLoading}
-          onClick={
-            searchWord.length
-              ? () => mutationFn.mutate()
-              : null
-          }
-        >
-          Search
-        </Button>
-      </Column>
-    </Row>
-  </FlexGrid>
-);
+}: ClientSearchFieldsProps) => {
+  const windowSize = useWindowSize();
+
+  return (
+    <FlexGrid className="client-search-grid">
+      <Row>
+        <Column sm={4} md={4} lg={16} xlg={16}>
+          <p className="client-modal-description">
+            Search for a specific client or agency, you can search by name, acronym or number.
+            {/* Commenting this until search screen is created */}
+            {/* To view more information about the client, you can
+            {' '}
+            <Link to="">
+              go to client search screen.
+            </Link> */}
+          </p>
+        </Column>
+      </Row>
+      <Row className="client-search-row">
+        <Column sm={2} md={3} lg={10} xlg={10}>
+          <TextInput
+            id="client-search-input"
+            labelText=""
+            aria-label="Client Search Input"
+            placeholder="Search for client or agency"
+            defaultValue={searchWord}
+            onBlur={(e: React.ChangeEvent<HTMLInputElement>) => {
+              setSearchWord(e.target.value);
+            }}
+            disabled={mutationFn.isLoading}
+          />
+        </Column>
+        <Column sm={1} md={3} lg={3} xlg={3}>
+          <Dropdown
+            id="client-search-dropdown"
+            label=""
+            aria-label="Client Search Field Select Dropdown"
+            titleText=""
+            items={clientSearchOptions}
+            initialSelectedItem={clientSearchOptions[0]}
+            selectedItem={searchOption}
+            disabled={mutationFn.isLoading}
+            onChange={(e: ComboBoxEvent) => {
+              setSearchOption(e.selectedItem);
+            }}
+          />
+        </Column>
+        <Column sm={1} md={2} lg={3} xlg={3}>
+          <Button
+            size="md"
+            renderIcon={
+              windowSize.innerWidth > MEDIUM_SCREEN_WIDTH
+                ? Search
+                : null
+            }
+            className="client-search-button"
+            disabled={mutationFn.isLoading}
+            onClick={
+              searchWord.length
+                ? () => mutationFn.mutate()
+                : null
+            }
+          >
+            Search
+          </Button>
+        </Column>
+      </Row>
+    </FlexGrid>
+  );
+};
 
 export default ClientSearchFields;

frontend/src/components/ClientAndCodeInput/ClientSearchModal/styles.scss

@@ -1,4 +1,5 @@
 @use '@bcgov-nr/nr-theme/design-tokens/variables.scss' as vars;
+@use '@bcgov-nr/nr-theme/design-tokens/colors.scss' as colors;
 @use '@carbon/type';
 
 .client-search-modal {
@@ -14,6 +15,14 @@
     box-shadow: none;
   }
 
+  .client-results-table {
+    background-color: #{colors.$white};
+  }
+
+  #client-search-input {
+    box-shadow: inset 0.3rem -1px 0 62.5rem #{colors.$white};
+  }
+
   .client-search-grid {
     padding-inline: 0;
 

frontend/src/components/ClientSearchTable/index.tsx

@@ -12,6 +12,7 @@ import {
   DataTableSkeleton
 } from '@carbon/react';
 
+import prefix from '../../styles/classPrefix';
 import { ForestClientSearchType } from '../../types/ForestClientTypes/ForestClientSearchType';
 import PaginationChangeType from '../../types/PaginationChangeType';
 import { getForestClientFullName } from '../../utils/ForestClientUtils';
@@ -151,13 +152,14 @@ const ClientSearchTable = (
             }
           </TableRow>
         </TableHead>
-        <TableBody>
+        <TableBody className="client-results-table">
           {
             processedData.length
               ? processedData.map((client) => (
                 <TableRow
                   id={`client-table-row-${client.clientNumber}-${client.locationCode}`}
                   key={`${client.clientNumber}-${client.locationCode}`}
+                  className={client === currentSelected ? `${prefix}--data-table--selected` : ''}
                 >
                   {
                     typeof selectClientFn === 'function'
@@ -166,7 +168,7 @@ const ClientSearchTable = (
                           radio
                           ariaLabel={`Select client ${client.clientName} with location code ${client.locationCode}`}
                           id={`client-radio-${client.clientNumber}-${client.locationCode}`}
-                          name="client-radio"
+                          name={`client-radio-${client.clientNumber}-${client.locationCode}`}
                           checked={client === currentSelected}
                           onSelect={() => {
                             selectClientFn(client);

frontend/src/components/SeedlotRegistrationSteps/ExtractionAndStorageStep/constants.ts

@@ -32,16 +32,16 @@ export const storageTextConfig: ClientAndCodeInputTextType = {
   }
 };
 
-export const inputText = {
+export const inputText = (isReview?: boolean) => ({
   extractionTitle: {
     titleText: 'Extraction information',
     subtitleText: 'Enter the extractory agency information and extraction\'s start and end dates for this seedlot'
   },
   date: {
     extraction: {
       labelText: {
-        start: 'Extraction start date (optional)',
-        end: 'Extraction end date (optional)'
+        start: `Extraction start date${!isReview ? ' (optional' : ''}`,
+        end: `Extraction end date${!isReview ? ' (optional' : ''}`
       },
       notification: {
         title: 'Extraction start and end dates',
@@ -50,8 +50,8 @@ export const inputText = {
     },
     storage: {
       labelText: {
-        start: 'Storage start date (optional)',
-        end: 'Storage end date (optional)'
+        start: `Storage start date${!isReview ? ' (optional' : ''}`,
+        end: `Storage end date${!isReview ? ' (optional' : ''}`
       },
       notification: {
         title: 'Storage start and end dates',
@@ -66,4 +66,4 @@ export const inputText = {
     titleText: 'Temporary seed storage',
     subtitleText: 'Enter the seed storage agency information and storage\'s start and end dates for this seedlot'
   }
-};
+});

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

@@ -43,6 +43,8 @@ const ExtractionAndStorage = (
   const [isExtractorHintOpen, setIsExtractorHintOpen] = useState<boolean>(true);
   const [isStorageHintOpen, setIsStorageHintOpen] = useState<boolean>(true);
 
+  const inputTextObj = inputText(isReview);
+
   const setClientAndCode = (
     agency: StringInputType,
     locationCode: StringInputType,
@@ -95,11 +97,11 @@ const ExtractionAndStorage = (
       <ScrollToTop enabled={!isReview} />
       <Row className="extraction-information-title">
         <Column className="section-title" sm={4} md={8} lg={16}>
-          <h2>{inputText.extractionTitle.titleText}</h2>
+          <h2>{inputTextObj.extractionTitle.titleText}</h2>
           {
             !isReview
               ? (
-                <Subtitle text={inputText.extractionTitle.subtitleText} />
+                <Subtitle text={inputTextObj.extractionTitle.subtitleText} />
               )
               : null
           }
@@ -136,12 +138,12 @@ const ExtractionAndStorage = (
           >
             <DatePickerInput
               id={state.extraction.startDate.id}
-              labelText={inputText.date.extraction.labelText.start}
-              helperText={inputText.date.helperText}
-              placeholder={inputText.date.placeholder}
+              labelText={inputTextObj.date.extraction.labelText.start}
+              helperText={inputTextObj.date.helperText}
+              placeholder={inputTextObj.date.placeholder}
               invalid={state.extraction.startDate.isInvalid}
-              invalidText={inputText.date.invalidText}
-              disabled={state.extraction.useTSC.value}
+              invalidText={inputTextObj.date.invalidText}
+              disabled={state.extraction.useTSC.value && !isReview}
               autoComplete="off"
             />
           </DatePicker>
@@ -159,12 +161,12 @@ const ExtractionAndStorage = (
           >
             <DatePickerInput
               id={state.extraction.endDate.id}
-              labelText={inputText.date.extraction.labelText.end}
-              helperText={inputText.date.helperText}
-              placeholder={inputText.date.placeholder}
+              labelText={inputTextObj.date.extraction.labelText.end}
+              helperText={inputTextObj.date.helperText}
+              placeholder={inputTextObj.date.placeholder}
               invalid={state.extraction.endDate.isInvalid}
-              invalidText={inputText.date.invalidText}
-              disabled={state.extraction.useTSC.value}
+              invalidText={inputTextObj.date.invalidText}
+              disabled={state.extraction.useTSC.value && !isReview}
               autoComplete="off"
             />
           </DatePicker>
@@ -174,20 +176,20 @@ const ExtractionAndStorage = (
             <InlineNotification
               lowContrast
               kind="info"
-              title={inputText.date.extraction.notification.title}
-              subtitle={inputText.date.extraction.notification.subtitle}
+              title={inputTextObj.date.extraction.notification.title}
+              subtitle={inputTextObj.date.extraction.notification.subtitle}
               onCloseButtonClick={() => { setIsExtractorHintOpen(false); }}
             />
           )}
         </Column>
       </Row>
       <Row className="temporary-seed-storage-title">
         <Column className="section-title" sm={4} md={8} lg={16}>
-          <h2>{inputText.storageTitle.titleText}</h2>
+          <h2>{inputTextObj.storageTitle.titleText}</h2>
           {
             !isReview
               ? (
-                <Subtitle text={inputText.storageTitle.subtitleText} />
+                <Subtitle text={inputTextObj.storageTitle.subtitleText} />
               )
               : null
           }
@@ -224,12 +226,12 @@ const ExtractionAndStorage = (
           >
             <DatePickerInput
               id={state.seedStorage.startDate.id}
-              labelText={inputText.date.storage.labelText.start}
-              helperText={inputText.date.helperText}
-              placeholder={inputText.date.placeholder}
+              labelText={inputTextObj.date.storage.labelText.start}
+              helperText={inputTextObj.date.helperText}
+              placeholder={inputTextObj.date.placeholder}
               invalid={state.seedStorage.startDate.isInvalid}
-              invalidText={inputText.date.invalidText}
-              disabled={state.seedStorage.useTSC.value}
+              invalidText={inputTextObj.date.invalidText}
+              disabled={state.seedStorage.useTSC.value && !isReview}
               autoComplete="off"
             />
           </DatePicker>
@@ -247,12 +249,12 @@ const ExtractionAndStorage = (
           >
             <DatePickerInput
               id={state.seedStorage.endDate.id}
-              labelText={inputText.date.storage.labelText.end}
-              helperText={inputText.date.helperText}
-              placeholder={inputText.date.placeholder}
+              labelText={inputTextObj.date.storage.labelText.end}
+              helperText={inputTextObj.date.helperText}
+              placeholder={inputTextObj.date.placeholder}
               invalid={state.seedStorage.endDate.isInvalid}
-              invalidText={inputText.date.invalidText}
-              disabled={state.seedStorage.useTSC.value}
+              invalidText={inputTextObj.date.invalidText}
+              disabled={state.seedStorage.useTSC.value && !isReview}
               autoComplete="off"
             />
           </DatePicker>
@@ -262,8 +264,8 @@ const ExtractionAndStorage = (
             <InlineNotification
               lowContrast
               kind="info"
-              title={inputText.date.storage.notification.title}
-              subtitle={inputText.date.storage.notification.subtitle}
+              title={inputTextObj.date.storage.notification.title}
+              subtitle={inputTextObj.date.storage.notification.subtitle}
               onCloseButtonClick={() => { setIsStorageHintOpen(false); }}
             />
           )}