PSP-8412 | Updated lease header files and initial work on other file headers

source/frontend/src/components/common/HeaderField/AuditSection.tsx

@@ -0,0 +1,50 @@
+import { Col, Row } from 'react-bootstrap';
+import styled from 'styled-components';
+
+import { UserNameTooltip } from '@/components/common/UserNameTooltip';
+import { Api_LastUpdatedBy } from '@/models/api/File';
+import { ApiGen_Base_BaseAudit } from '@/models/api/generated/ApiGen_Base_BaseAudit';
+import { prettyFormatUTCDate } from '@/utils';
+
+export interface IAuditSectionProps {
+  baseAudit: ApiGen_Base_BaseAudit;
+  lastUpdatedBy: Api_LastUpdatedBy;
+}
+
+export const AuditSection: React.FC<IAuditSectionProps> = ({ baseAudit, lastUpdatedBy }) => {
+  return (
+    <>
+      <Row className="no-gutters">
+        <Col className="text-right">
+          <StyledSmallText>
+            <strong>Created: </strong>
+            {prettyFormatUTCDate(baseAudit?.appCreateTimestamp)} by{' '}
+            <UserNameTooltip
+              userName={baseAudit?.appCreateUserid}
+              userGuid={baseAudit?.appCreateUserGuid}
+            />
+          </StyledSmallText>
+        </Col>
+      </Row>
+      <Row className="no-gutters">
+        <Col className="text-right">
+          <StyledSmallText>
+            <strong>Updated: </strong>
+            {prettyFormatUTCDate(lastUpdatedBy?.appLastUpdateTimestamp)} by{' '}
+            <UserNameTooltip
+              userName={lastUpdatedBy?.appLastUpdateUserid}
+              userGuid={lastUpdatedBy?.appLastUpdateUserGuid}
+            />
+          </StyledSmallText>
+        </Col>
+      </Row>
+    </>
+  );
+};
+
+export default AuditSection;
+
+const StyledSmallText = styled.span`
+  font-size: 0.87em;
+  line-height: 1.9;
+`;

source/frontend/src/components/common/HeaderField/HeaderField.tsx

@@ -29,7 +29,9 @@ export const HeaderField: React.FC<React.PropsWithChildren<IHeaderFieldProps>> =
 
 export const HeaderLabelCol: React.FC<IHeaderLabelColProps> = props => (
   <Col xs={props.labelWidth ?? 'auto'} className="pr-0 text-left">
-    <label>{props.label}</label>
+    <strong>
+      <label>{props.label}</label>
+    </strong>
   </Col>
 );
 
@@ -42,7 +44,7 @@ export const HeaderContentCol: React.FC<
       className="pl-1 text-left"
       data-testid={props.valueTestId}
     >
-      <strong>{props.children}</strong>
+      {props.children}
     </Col>
   );
 };

source/frontend/src/components/common/UserNameTooltip.tsx

@@ -44,6 +44,6 @@ export const UserNameTooltip: FunctionComponent<IUserNameTooltipProps> = ({
       innerClassName={'userNameTooltip'}
       toolTip={userNameInfo}
       customToolTipIcon={<strong>{userName ?? 'USER'}</strong>}
-    ></TooltipIcon>
+    />
   );
 };

source/frontend/src/components/common/styles.ts

@@ -36,7 +36,7 @@ export const Breadcrumb = styled(BsBreadcrumb)`
 
 export const SelectedText = styled.p`
   font-size: 1.4rem;
-  color: ${props => props.theme.bcTokens.iconColorSuccess};
+  color: ${props => props.theme.bcTokens.iconsColorSuccess};
 `;
 
 /**
@@ -132,7 +132,7 @@ export const FilterBoxForm = styled(Form)`
 export const StyledAddButton = styled(Button)`
   &.btn.btn-primary,
   &.btn.btn-primary:active {
-    background-color: ${props => props.theme.bcTokens.iconColorSuccess};
+    background-color: ${props => props.theme.bcTokens.iconsColorSuccess};
   }
 `;
 

source/frontend/src/components/measurements/styles.tsx

@@ -4,7 +4,7 @@ export const StyledGreenCol = styled.div`
   max-width: 25rem;
   padding: 1rem;
   background-color: ${props => props.theme.css.highlightBackgroundColor};
-  border: 1px solid ${props => props.theme.bcTokens.iconColorSuccess};
+  border: 1px solid ${props => props.theme.bcTokens.iconsColorSuccess};
   border-radius: 0.5rem;
 `;
 

source/frontend/src/features/acquisition/list/AcquisitionListView.tsx

@@ -140,7 +140,7 @@ export const AcquisitionListView: React.FunctionComponent<
 
 const StyledAddButton = styled(Button)`
   &.btn.btn-primary {
-    background-color: ${props => props.theme.bcTokens.iconColorSuccess};
+    background-color: ${props => props.theme.bcTokens.iconsColorSuccess};
   }
 `;
 

source/frontend/src/features/admin/financial-codes/list/FinancialCodeListView.tsx

@@ -125,7 +125,7 @@ export const FinancialCodeListView: React.FC = () => {
 
 const StyledAddButton = styled(Button)`
   &.btn.btn-primary {
-    background-color: ${props => props.theme.bcTokens.iconColorSuccess};
+    background-color: ${props => props.theme.bcTokens.iconsColorSuccess};
   }
 `;
 

source/frontend/src/features/contacts/styles.ts

@@ -25,8 +25,8 @@ export const StatusIndicators = styled.div`
   padding: 0.2rem 1rem;
   color: ${props => props.theme.css.borderOutlineColor};
   &.active {
-    color: ${props => props.theme.bcTokens.iconColorSuccess};
-    border: 1px solid ${props => props.theme.bcTokens.iconColorSuccess};
+    color: ${props => props.theme.bcTokens.iconsColorSuccess};
+    border: 1px solid ${props => props.theme.bcTokens.iconsColorSuccess};
   }
 `;
 

source/frontend/src/features/leases/detail/LeasePages/payment/styles.tsx

@@ -171,7 +171,7 @@ export const WarningTextBox = styled(InlineFlexDiv)`
 
 export const AddActualButton = styled(Button)`
   &&& {
-    background-color: ${props => props.theme.bcTokens.iconColorSuccess};
+    background-color: ${props => props.theme.bcTokens.iconsColorSuccess};
     color: white;
     &:hover {
       background-color: #3aba53;

source/frontend/src/features/leases/detail/LeaseStatusSummary.tsx

@@ -46,9 +46,9 @@ const StyledLeaseStatusSummary = styled.div`
     }
   }
   &.active {
-    border: 1px solid ${props => props.theme.bcTokens.iconColorSuccess};
+    border: 1px solid ${props => props.theme.bcTokens.iconsColorSuccess};
     b:first-child {
-      color: ${props => props.theme.bcTokens.iconColorSuccess};
+      color: ${props => props.theme.bcTokens.iconsColorSuccess};
     }
   }
   &.terminated {

source/frontend/src/features/leases/list/LeaseListView.tsx

@@ -128,7 +128,7 @@ export const LeaseListView: React.FunctionComponent<React.PropsWithChildren<unkn
 const StyledAddButton = styled(Button)`
   &.btn.btn-primary,
   &.btn.btn-primary:active {
-    background-color: ${props => props.theme.bcTokens.iconColorSuccess};
+    background-color: ${props => props.theme.bcTokens.iconsColorSuccess};
   }
 `;
 

source/frontend/src/features/mapSideBar/acquisition/AcquisitionView.test.tsx

@@ -170,9 +170,11 @@ describe('AcquisitionView component', () => {
     expect(getByText('Acquisition File')).toBeVisible();
 
     expect(getByText('1-12345-01 - Test ACQ File')).toBeVisible();
-    expect(getByText(prettyFormatUTCDate(testAcquisitionFile.appCreateTimestamp))).toBeVisible();
     expect(
-      getByText(prettyFormatUTCDate(mockLastUpdatedBy(1).appLastUpdateTimestamp)),
+      getByText(new RegExp(prettyFormatUTCDate(testAcquisitionFile.appCreateTimestamp))),
+    ).toBeVisible();
+    expect(
+      getByText(new RegExp(prettyFormatUTCDate(mockLastUpdatedBy(1).appLastUpdateTimestamp))),
     ).toBeVisible();
   });
 

source/frontend/src/features/mapSideBar/acquisition/__snapshots__/AcquisitionView.test.tsx.snap

@@ -89,6 +89,11 @@ exports[`AcquisitionView component > renders as expected 1`] = `
   position: relative;
 }
 
+.c2 {
+  font-size: 0.87em;
+  line-height: 1.9;
+}
+
 .c1 {
   margin-top: 0.5rem;
   margin-bottom: 1.5rem;
@@ -97,11 +102,6 @@ exports[`AcquisitionView component > renders as expected 1`] = `
   border-bottom-width: 0.1rem;
 }
 
-.c2 {
-  font-size: 0.87em;
-  line-height: 1.9;
-}
-
 <div
     class="c0"
   >
@@ -123,16 +123,16 @@ exports[`AcquisitionView component > renders as expected 1`] = `
               <div
                 class="pr-0 text-left col-3"
               >
-                <label>
-                  File:
-                </label>
+                <strong>
+                  <label>
+                    File:
+                  </label>
+                </strong>
               </div>
               <div
                 class="pl-1 text-left col-9"
               >
-                <strong>
-                  1-12345-01 - Test ACQ File
-                </strong>
+                1-12345-01 - Test ACQ File
               </div>
             </div>
           </div>
@@ -149,16 +149,16 @@ exports[`AcquisitionView component > renders as expected 1`] = `
               <div
                 class="pr-0 text-left col-3"
               >
-                <label>
-                  Ministry project:
-                </label>
+                <strong>
+                  <label>
+                    Ministry project:
+                  </label>
+                </strong>
               </div>
               <div
                 class="pl-1 text-left col-9"
               >
-                <strong>
-                  001 - Hwy 14 Expansion - Vancouver Island but it's really long so it can wrap around if it has to
-                </strong>
+                001 - Hwy 14 Expansion - Vancouver Island but it's really long so it can wrap around if it has to
               </div>
             </div>
           </div>
@@ -175,17 +175,17 @@ exports[`AcquisitionView component > renders as expected 1`] = `
               <div
                 class="pr-0 text-left col-3"
               >
-                <label>
-                  Ministry product:
-                </label>
+                <strong>
+                  <label>
+                    Ministry product:
+                  </label>
+                </strong>
               </div>
               <div
                 class="pl-1 text-left col-9"
                 data-testid="acq-header-product-val"
               >
-                <strong>
-                  00048 - MISCELLANEOUS CLAIMS
-                </strong>
+                00048 - MISCELLANEOUS CLAIMS
               </div>
             </div>
           </div>
@@ -196,14 +196,16 @@ exports[`AcquisitionView component > renders as expected 1`] = `
           <div
             class="pr-0 text-left col-3"
           >
-            <label>
-              Historical File #:
-            </label>
+            <strong>
+              <label>
+                Historical File #:
+              </label>
+            </strong>
           </div>
           <div
             class="pl-1 text-left col-9"
           >
-            <strong />
+            <div />
           </div>
         </div>
       </div>
@@ -219,11 +221,10 @@ exports[`AcquisitionView component > renders as expected 1`] = `
             <span
               class="c2"
             >
-              Created: 
               <strong>
-                May 27, 2022
+                Created: 
               </strong>
-               by 
+              May 27, 2022 by 
               <span
                 class="tooltip-icon"
                 data-testid="tooltip-icon-userNameTooltip"
@@ -245,11 +246,10 @@ exports[`AcquisitionView component > renders as expected 1`] = `
             <span
               class="c2"
             >
-              Last updated: 
               <strong>
-                Oct 6, 2023
+                Updated: 
               </strong>
-               by 
+              Oct 6, 2023 by 
               <span
                 class="tooltip-icon"
                 data-testid="tooltip-icon-userNameTooltip"
@@ -274,16 +274,16 @@ exports[`AcquisitionView component > renders as expected 1`] = `
               <div
                 class="pr-0 text-left col-auto"
               >
-                <label>
-                  Status:
-                </label>
+                <strong>
+                  <label>
+                    Status:
+                  </label>
+                </strong>
               </div>
               <div
                 class="pl-1 text-left col-auto"
               >
-                <strong>
-                  Active
-                </strong>
+                Active
               </div>
             </div>
           </div>

source/frontend/src/features/mapSideBar/acquisition/common/AcquisitionHeader.test.tsx

@@ -54,9 +54,11 @@ describe('AcquisitionHeader component', () => {
     await act(async () => {});
 
     expect(getByText('1-12345-01 - Test ACQ File')).toBeVisible();
-    expect(getByText(prettyFormatUTCDate(testAcquisitionFile.appCreateTimestamp))).toBeVisible();
     expect(
-      getByText(prettyFormatUTCDate(testAcquisitionFile.appLastUpdateTimestamp)),
+      getByText(new RegExp(prettyFormatUTCDate(testAcquisitionFile.appCreateTimestamp))),
+    ).toBeVisible();
+    expect(
+      getByText(new RegExp(prettyFormatUTCDate(testAcquisitionFile.appLastUpdateTimestamp))),
     ).toBeVisible();
   });
 
@@ -124,7 +126,9 @@ describe('AcquisitionHeader component', () => {
     await act(async () => {});
 
     expect(getByText('1-12345-01 - Test ACQ File')).toBeVisible();
-    expect(getByText(prettyFormatUTCDate(testAcquisitionFile.appCreateTimestamp))).toBeVisible();
-    expect(getByText(prettyFormatUTCDate(testDate))).toBeVisible();
+    expect(
+      getByText(new RegExp(prettyFormatUTCDate(testAcquisitionFile.appCreateTimestamp))),
+    ).toBeVisible();
+    expect(getByText(new RegExp(prettyFormatUTCDate(testDate)))).toBeVisible();
   });
 });