From 0651db9d16c54269365d6a7047c23205fe98cf09 Mon Sep 17 00:00:00 2001 From: Manuel Rodriguez Date: Fri, 17 May 2024 17:07:32 -0700 Subject: [PATCH] psp-8228 | Updated header status display (#4028) * Added generic status component for headers * Updated tests --- .../src/assets/scss/_variables.module.scss | 14 + source/frontend/src/assets/scss/colors.scss | 26 +- .../common/HeaderField/AuditSection.tsx | 11 +- .../common/HeaderField/StatusField.tsx | 138 ++++++ .../components/common/HeaderField/styles.tsx | 16 + .../AcquisitionView.test.tsx.snap | 252 +++++----- .../acquisition/common/AcquisitionHeader.tsx | 84 ++-- .../AcquisitionHeader.test.tsx.snap | 189 +++----- .../DispositionView.test.tsx.snap | 186 +++++--- .../common/DispositionHeader.test.tsx | 1 - .../disposition/common/DispositionHeader.tsx | 42 +- .../DispositionHeader.test.tsx.snap | 133 +++--- .../mapSideBar/lease/common/LeaseHeader.tsx | 20 +- .../__snapshots__/LeaseHeader.test.tsx.snap | 99 ++-- .../ProjectContainerView.test.tsx.snap | 222 +++++---- .../project/common/ProjectHeader.test.tsx | 6 +- .../project/common/ProjectHeader.tsx | 80 +--- .../__snapshots__/ProjectHeader.test.tsx.snap | 222 +++++---- .../ResearchContainer.test.tsx.snap | 450 ++++++++++-------- .../research/common/ResearchHeader.tsx | 72 +-- .../ResearchHeader.test.tsx.snap | 217 ++++----- source/frontend/src/index.tsx | 2 - 22 files changed, 1335 insertions(+), 1147 deletions(-) create mode 100644 source/frontend/src/components/common/HeaderField/StatusField.tsx create mode 100644 source/frontend/src/components/common/HeaderField/styles.tsx diff --git a/source/frontend/src/assets/scss/_variables.module.scss b/source/frontend/src/assets/scss/_variables.module.scss index 706761d1a1..cf87286e17 100644 --- a/source/frontend/src/assets/scss/_variables.module.scss +++ b/source/frontend/src/assets/scss/_variables.module.scss @@ -22,4 +22,18 @@ activeActionColor: $active-action-color; headerTextColor: $header-text-color; headerBorderColor: $header-border-color; + + disabledColor: $disabled-color; + disabledFieldBackgroundColor: $disabled-field-background-color; + + slideOutBlue: $slide-out-blue; + filterBoxColor: $filter-box-color; + + + filterBoxColor: $filter-box-color; + + completedColor: $completed-color; + selectedColor: $selected-color; + + fontDangerColor: $font-danger-color; } diff --git a/source/frontend/src/assets/scss/colors.scss b/source/frontend/src/assets/scss/colors.scss index 008d557a04..d0aba20bb1 100644 --- a/source/frontend/src/assets/scss/colors.scss +++ b/source/frontend/src/assets/scss/colors.scss @@ -1,19 +1,31 @@ @import '@/../node_modules/@bcgov/design-tokens/css/variables.css'; +$pims-blue-20: #d9eaf7; +$pims-blue-80: #1a5496; + $pims-blue-50: #428bca; -$pims-grey-80: #606060; + $pims-yellow-10: #fef1d8; $pims-yellow-30: #fcba19; $pims-red-10: #f2dede; +$pims-red-80: #a12622; $pims-white: #f2f2f2; -$pims-blue-20: #d9eaf7; $pims-yellow-100: #6c4a00; +$pims-grey-10: #e8ecef; + +$pims-grey-20: #959da5; +$pims-grey-80: #606060; + +$pims-green-20: #dff0d8; +$pims-green-80: #2e8540; + $active-action-color: $pims-blue-50; $border-outline-color: $pims-grey-80; $warning-background-color: $pims-yellow-10; $number-background-color: $pims-yellow-30; $danger-background-color: $pims-red-10; +$light-danger-color: $pims-red-10; $highlight-background-color: $pims-white; $filter-box-color: $pims-blue-20; $text-warning-color: $pims-yellow-100; @@ -21,3 +33,13 @@ $header-text-color: #{'var(--theme-blue-100)'}; $header-border-color: #{'var(--theme-blue-90)'}; $link-color: #{'var(--surface-color-primary-button-default)'}; $link-hover-color: #{'var(--surface-color-primary-button-hover)'}; + +$completed-color: $pims-green-80; +$selected-color: $pims-green-20; + +$disabled-color: $pims-grey-20; +$disabled-field-background-color: $pims-grey-10; + +$slide-out-blue: $pims-blue-80; + +$font-danger-color: $pims-red-80; diff --git a/source/frontend/src/components/common/HeaderField/AuditSection.tsx b/source/frontend/src/components/common/HeaderField/AuditSection.tsx index cc23984989..85fcfc7be1 100644 --- a/source/frontend/src/components/common/HeaderField/AuditSection.tsx +++ b/source/frontend/src/components/common/HeaderField/AuditSection.tsx @@ -8,7 +8,7 @@ import { prettyFormatUTCDate } from '@/utils'; export interface IAuditSectionProps { baseAudit: ApiGen_Base_BaseAudit; - lastUpdatedBy: Api_LastUpdatedBy; + lastUpdatedBy?: Api_LastUpdatedBy; } export const AuditSection: React.FC = ({ baseAudit, lastUpdatedBy }) => { @@ -30,10 +30,13 @@ export const AuditSection: React.FC = ({ baseAudit, lastUpda Updated: - {prettyFormatUTCDate(lastUpdatedBy?.appLastUpdateTimestamp)} by{' '} + {prettyFormatUTCDate( + lastUpdatedBy?.appLastUpdateTimestamp ?? baseAudit?.appLastUpdateTimestamp, + )}{' '} + by{' '} diff --git a/source/frontend/src/components/common/HeaderField/StatusField.tsx b/source/frontend/src/components/common/HeaderField/StatusField.tsx new file mode 100644 index 0000000000..4b37922988 --- /dev/null +++ b/source/frontend/src/components/common/HeaderField/StatusField.tsx @@ -0,0 +1,138 @@ +import { Col, Row } from 'react-bootstrap'; +import { IconType } from 'react-icons'; +import { BiDuplicate } from 'react-icons/bi'; +import { FaCheck, FaPauseCircle, FaStopCircle } from 'react-icons/fa'; +import { MdArchive, MdCancel, MdCircle, MdEdit } from 'react-icons/md'; +import styled from 'styled-components'; + +import { Dictionary } from '@/interfaces/Dictionary'; +import { ApiGen_Base_CodeType } from '@/models/api/generated/ApiGen_Base_CodeType'; + +import { InlineFlexDiv } from '../styles'; + +interface IStatusFieldProps { + statusCodeType: ApiGen_Base_CodeType; +} + +interface StatusStyle { + icon: IconType; + colorVariant: string; +} + +const statusDictionary: Dictionary = { + active: { icon: MdCircle, colorVariant: 'green' }, + archived: { icon: MdArchive, colorVariant: 'grey' }, + completed: { icon: FaCheck, colorVariant: 'blue' }, + hold: { icon: FaPauseCircle, colorVariant: 'yellow' }, + cancelled: { icon: MdCancel, colorVariant: 'red' }, + draft: { icon: MdEdit, colorVariant: 'yellow' }, + terminated: { icon: FaStopCircle, colorVariant: 'red' }, + duplicate: { icon: BiDuplicate, colorVariant: 'blue' }, +}; + +const StatusField: React.FunctionComponent> = ({ + statusCodeType, +}) => { + const translateStatusCode = (statusCodeType: ApiGen_Base_CodeType) => { + switch (statusCodeType.id.toLowerCase()) { + case 'active': + case 'ac': + return statusDictionary['active']; + case 'archived': + case 'cncn': + case 'archiv': + return statusDictionary['archived']; + case 'cancelled': + case 'ca': + case 'cancel': + case 'discard': + return statusDictionary['cancelled']; + case 'complete': + case 'closed': + case 'co': + case 'complt': + return statusDictionary['completed']; + case 'draft': + case 'pl': + return statusDictionary['draft']; + case 'duplicate': + return statusDictionary['duplicate']; + case 'hold': + case 'inactive': + case 'ho': + return statusDictionary['hold']; + case 'terminated': + return statusDictionary['terminated']; + default: + break; + } + return statusDictionary['cancelled']; + }; + + const statusFound = translateStatusCode(statusCodeType); + return ( + + + + + + {statusCodeType?.description.toUpperCase()} + + + + ); +}; + +export default StatusField; + +const RetiredWarning = styled(InlineFlexDiv)<{ $variant: string }>` + //font-weight: bold; TODO: Bold should be enough, but atm the bcsans-bold is different + font-family: 'BCSans-Bold'; + font-size: 1.4rem; + + border-radius: 0.4rem; + + letter-spacing: 0.1rem; + align-items: center; + + padding: 0.2rem 0.5rem; + + gap: 0.5rem; + + ${props => { + if (props.$variant === 'green') { + return ` + color: ${props.theme.css.completedColor}; + background-color: ${props.theme.css.selectedColor}; + `; + } else if (props.$variant === 'grey') { + return ` + color: ${props.theme.css.disabledColor}; + background-color: ${props.theme.css.disabledFieldBackgroundColor}; + `; + } else if (props.$variant === 'blue') { + return ` + color: ${props.theme.css.slideOutBlue}; + background-color: ${props.theme.css.filterBoxColor}; + `; + } else if (props.$variant === 'yellow') { + return ` + color: ${props.theme.css.textWarningColor}; + background-color: ${props.theme.css.warningBackgroundColor}; + `; + } else if (props.$variant === 'red') { + return ` + color: ${props.theme.css.fontDangerColor}; + background-color: ${props.theme.css.dangerBackgroundColor}; + `; + } else { + return `color: red`; + } + }} +`; + +const StyledBottomRow = styled(Row)` + margin-top: auto; + padding-top: 1rem; + padding-bottom: 1rem; +`; diff --git a/source/frontend/src/components/common/HeaderField/styles.tsx b/source/frontend/src/components/common/HeaderField/styles.tsx new file mode 100644 index 0000000000..bcb109dda0 --- /dev/null +++ b/source/frontend/src/components/common/HeaderField/styles.tsx @@ -0,0 +1,16 @@ +import { Row } from 'react-bootstrap'; +import styled from 'styled-components'; + +export const StyledRow = styled(Row)` + margin-top: 0.5rem; + margin-bottom: 1.5rem; + border-bottom-style: solid; + border-bottom-color: grey; + border-bottom-width: 0.1rem; +`; + +export const StyledFiller = styled.div` + height: 100%; + display: flex; + flex-direction: column; +`; diff --git a/source/frontend/src/features/mapSideBar/acquisition/__snapshots__/AcquisitionView.test.tsx.snap b/source/frontend/src/features/mapSideBar/acquisition/__snapshots__/AcquisitionView.test.tsx.snap index 884e4040a6..ae46bfab69 100644 --- a/source/frontend/src/features/mapSideBar/acquisition/__snapshots__/AcquisitionView.test.tsx.snap +++ b/source/frontend/src/features/mapSideBar/acquisition/__snapshots__/AcquisitionView.test.tsx.snap @@ -85,15 +85,49 @@ exports[`AcquisitionView component > renders as expected 1`] = ` class="c2" /> - .c0 { + .c5 { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-flex-wrap: nowrap; + -ms-flex-wrap: nowrap; + flex-wrap: nowrap; +} + +.c0 { position: relative; } -.c2 { +.c3 { font-size: 0.87em; line-height: 1.9; } +.c6 { + font-family: 'BCSans-Bold'; + font-size: 1.4rem; + border-radius: 0.4rem; + -webkit-letter-spacing: 0.1rem; + -moz-letter-spacing: 0.1rem; + -ms-letter-spacing: 0.1rem; + letter-spacing: 0.1rem; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + padding: 0.2rem 0.5rem; + gap: 0.5rem; + color: undefined; + background-color: undefined; +} + +.c4 { + margin-top: auto; + padding-top: 1rem; + padding-bottom: 1rem; +} + .c1 { margin-top: 0.5rem; margin-bottom: 1.5rem; @@ -102,6 +136,17 @@ exports[`AcquisitionView component > renders as expected 1`] = ` border-bottom-width: 0.1rem; } +.c2 { + height: 100%; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-flex-direction: column; + -ms-flex-direction: column; + flex-direction: column; +} +
@@ -112,82 +157,58 @@ exports[`AcquisitionView component > renders as expected 1`] = ` class="col-8" >
-
-
- - - -
-
- 1-12345-01 - Test ACQ File -
-
+ + + +
+
+ 1-12345-01 - Test ACQ File
-
-
- - - -
-
- 001 - Hwy 14 Expansion - Vancouver Island but it's really long so it can wrap around if it has to -
-
+ + + +
+
+ 001 - Hwy 14 Expansion - Vancouver Island but it's really long so it can wrap around if it has to
-
-
- - - -
-
- 00048 - MISCELLANEOUS CLAIMS -
-
+ + + +
+
+ 00048 - MISCELLANEOUS CLAIMS
renders as expected 1`] = `
- - - Created: - - May 27, 2022 by - admin + Created: + May 27, 2022 by + + + admin + + - +
-
-
- - - Updated: - - Oct 6, 2023 by - MARODRIG + Updated: + Oct 6, 2023 by + + + MARODRIG + + - +
- -
+
- - - -
-
- Active + + + + + ACTIVE
diff --git a/source/frontend/src/features/mapSideBar/acquisition/common/AcquisitionHeader.tsx b/source/frontend/src/features/mapSideBar/acquisition/common/AcquisitionHeader.tsx index d14a4515bb..8436842a59 100644 --- a/source/frontend/src/features/mapSideBar/acquisition/common/AcquisitionHeader.tsx +++ b/source/frontend/src/features/mapSideBar/acquisition/common/AcquisitionHeader.tsx @@ -1,11 +1,13 @@ import React from 'react'; -import { Col, Row } from 'react-bootstrap'; -import styled from 'styled-components'; +import { Col } from 'react-bootstrap'; import AuditSection from '@/components/common/HeaderField/AuditSection'; import { HeaderField } from '@/components/common/HeaderField/HeaderField'; +import StatusField from '@/components/common/HeaderField/StatusField'; +import { StyledFiller, StyledRow } from '@/components/common/HeaderField/styles'; import { Api_LastUpdatedBy } from '@/models/api/File'; import { ApiGen_Concepts_AcquisitionFile } from '@/models/api/generated/ApiGen_Concepts_AcquisitionFile'; +import { exists } from '@/utils'; import { formatMinistryProject } from '@/utils/formUtils'; import HistoricalNumbersContainer from '../../shared/header/HistoricalNumberContainer'; @@ -26,61 +28,39 @@ export const AcquisitionHeader: React.FunctionComponent< return ( - - - - {acquisitionFile?.fileNumber} - {acquisitionFile?.fileName} - - - - - - - {formatMinistryProject( - acquisitionFile?.project?.code, - acquisitionFile?.project?.description, - )} - - - - - - - {acquisitionFile?.product && ( - <> - {acquisitionFile.product.code} - {acquisitionFile.product.description} - - )} - - - + + {acquisitionFile?.fileNumber} - {acquisitionFile?.fileName} + + + {formatMinistryProject( + acquisitionFile?.project?.code, + acquisitionFile?.project?.description, + )} + + + {acquisitionFile?.product && ( + <> + {acquisitionFile.product.code} - {acquisitionFile.product.description} + + )} + - - - - - - {acquisitionFile?.fileStatusTypeCode?.description} - - - + + + + {exists(acquisitionFile?.fileStatusTypeCode) && ( + + )} + ); }; export default AcquisitionHeader; - -const StyledRow = styled(Row)` - margin-top: 0.5rem; - margin-bottom: 1.5rem; - border-bottom-style: solid; - border-bottom-color: grey; - border-bottom-width: 0.1rem; -`; diff --git a/source/frontend/src/features/mapSideBar/acquisition/common/__snapshots__/AcquisitionHeader.test.tsx.snap b/source/frontend/src/features/mapSideBar/acquisition/common/__snapshots__/AcquisitionHeader.test.tsx.snap index ac3c01e81f..46e9fecfbc 100644 --- a/source/frontend/src/features/mapSideBar/acquisition/common/__snapshots__/AcquisitionHeader.test.tsx.snap +++ b/source/frontend/src/features/mapSideBar/acquisition/common/__snapshots__/AcquisitionHeader.test.tsx.snap @@ -6,7 +6,7 @@ exports[`AcquisitionHeader component > renders as expected when no data is provi class="Toastify" />
- .c1 { + .c2 { font-size: 0.87em; line-height: 1.9; } @@ -19,6 +19,17 @@ exports[`AcquisitionHeader component > renders as expected when no data is provi border-bottom-width: 0.1rem; } +.c1 { + height: 100%; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-flex-direction: column; + -ms-flex-direction: column; + flex-direction: column; +} +
@@ -26,79 +37,55 @@ exports[`AcquisitionHeader component > renders as expected when no data is provi class="col-8" >
-
-
- - - -
-
- - -
-
+ + + +
+
+ -
-
-
- - - -
-
-
+ + +
+
-
-
- - - -
-
-
+ + +
+
renders as expected when no data is provi
- - - Created: - - by - USER + Created: + by + + + USER + + - +
-
-
- - - Updated: - - by - USER + Updated: + by + + + USER + + - -
-
-
-
-
-
- - - -
-
diff --git a/source/frontend/src/features/mapSideBar/disposition/__snapshots__/DispositionView.test.tsx.snap b/source/frontend/src/features/mapSideBar/disposition/__snapshots__/DispositionView.test.tsx.snap index 961b85a574..a65e732f53 100644 --- a/source/frontend/src/features/mapSideBar/disposition/__snapshots__/DispositionView.test.tsx.snap +++ b/source/frontend/src/features/mapSideBar/disposition/__snapshots__/DispositionView.test.tsx.snap @@ -85,15 +85,49 @@ exports[`DispositionView component > renders as expected 1`] = ` class="c2" />
- .c0 { + .c5 { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-flex-wrap: nowrap; + -ms-flex-wrap: nowrap; + flex-wrap: nowrap; +} + +.c0 { position: relative; } -.c2 { +.c3 { font-size: 0.87em; line-height: 1.9; } +.c6 { + font-family: 'BCSans-Bold'; + font-size: 1.4rem; + border-radius: 0.4rem; + -webkit-letter-spacing: 0.1rem; + -moz-letter-spacing: 0.1rem; + -ms-letter-spacing: 0.1rem; + letter-spacing: 0.1rem; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + padding: 0.2rem 0.5rem; + gap: 0.5rem; + color: undefined; + background-color: undefined; +} + +.c4 { + margin-top: auto; + padding-top: 1rem; + padding-bottom: 1rem; +} + .c1 { margin-top: 0.5rem; margin-bottom: 1.5rem; @@ -102,6 +136,17 @@ exports[`DispositionView component > renders as expected 1`] = ` border-bottom-width: 0.1rem; } +.c2 { + height: 100%; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-flex-direction: column; + -ms-flex-direction: column; + flex-direction: column; +} +
@@ -112,29 +157,21 @@ exports[`DispositionView component > renders as expected 1`] = ` class="col-7" >
-
-
- - - -
-
- D-FILE_NUMBER 3A8F46B -
-
+ + + +
+
+ D-FILE_NUMBER 3A8F46B
renders as expected 1`] = ` class="col-5" >
-
+ + Created: + + Nov 25, 2023 by - Created: + FOUGSTER - Nov 25, 2023 by - - - FOUGSTER - - -
+
+
+
-
+ + Updated: + + Nov 24, 2023 by - Updated: + FOUGSTER - by - - - USER - - -
+
-
-
+
- - - -
-
- Draft + + + + + DRAFT
diff --git a/source/frontend/src/features/mapSideBar/disposition/common/DispositionHeader.test.tsx b/source/frontend/src/features/mapSideBar/disposition/common/DispositionHeader.test.tsx index 075ffdf67c..8b856ecc41 100644 --- a/source/frontend/src/features/mapSideBar/disposition/common/DispositionHeader.test.tsx +++ b/source/frontend/src/features/mapSideBar/disposition/common/DispositionHeader.test.tsx @@ -127,7 +127,6 @@ describe('DispositionHeader component', () => { lastUpdatedBy: null, }); - expect(getByText('Status:')).toBeVisible(); expect(getByText(/mock file status/i)).toBeVisible(); }); }); diff --git a/source/frontend/src/features/mapSideBar/disposition/common/DispositionHeader.tsx b/source/frontend/src/features/mapSideBar/disposition/common/DispositionHeader.tsx index e8fc8e7de5..e95d60cae8 100644 --- a/source/frontend/src/features/mapSideBar/disposition/common/DispositionHeader.tsx +++ b/source/frontend/src/features/mapSideBar/disposition/common/DispositionHeader.tsx @@ -1,11 +1,13 @@ import React from 'react'; -import { Col, Row } from 'react-bootstrap'; -import styled from 'styled-components'; +import { Col } from 'react-bootstrap'; import AuditSection from '@/components/common/HeaderField/AuditSection'; import { HeaderField } from '@/components/common/HeaderField/HeaderField'; +import StatusField from '@/components/common/HeaderField/StatusField'; +import { StyledFiller, StyledRow } from '@/components/common/HeaderField/styles'; import { Api_LastUpdatedBy } from '@/models/api/File'; import { ApiGen_Concepts_DispositionFile } from '@/models/api/generated/ApiGen_Concepts_DispositionFile'; +import { exists } from '@/utils'; import HistoricalNumbersContainer from '../../shared/header/HistoricalNumberContainer'; import HistoricalNumberFieldView from '../../shared/header/HistoricalNumberSectionView'; @@ -27,39 +29,21 @@ export const DispositionHeader: React.FunctionComponent< return ( - - - - D-{dispositionFile?.fileNumber} - - - + + D-{dispositionFile?.fileNumber} + - - - - - - - - - {dispositionFile?.fileStatusTypeCode?.description} - - - + + + {exists(dispositionFile?.fileStatusTypeCode) && ( + + )} + ); }; export default DispositionHeader; - -const StyledRow = styled(Row)` - margin-top: 0.5rem; - margin-bottom: 1.5rem; - border-bottom-style: solid; - border-bottom-color: grey; - border-bottom-width: 0.1rem; -`; diff --git a/source/frontend/src/features/mapSideBar/disposition/common/__snapshots__/DispositionHeader.test.tsx.snap b/source/frontend/src/features/mapSideBar/disposition/common/__snapshots__/DispositionHeader.test.tsx.snap index 19b7af0ba0..b480b4e6d8 100644 --- a/source/frontend/src/features/mapSideBar/disposition/common/__snapshots__/DispositionHeader.test.tsx.snap +++ b/source/frontend/src/features/mapSideBar/disposition/common/__snapshots__/DispositionHeader.test.tsx.snap @@ -6,7 +6,7 @@ exports[`DispositionHeader component > renders as expected when no data is provi class="Toastify" />
- .c1 { + .c2 { font-size: 0.87em; line-height: 1.9; } @@ -19,6 +19,17 @@ exports[`DispositionHeader component > renders as expected when no data is provi border-bottom-width: 0.1rem; } +.c1 { + height: 100%; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-flex-direction: column; + -ms-flex-direction: column; + flex-direction: column; +} +
@@ -26,29 +37,21 @@ exports[`DispositionHeader component > renders as expected when no data is provi class="col-7" >
-
-
- - - -
-
- D- -
-
+ + + +
+
+ D-
renders as expected when no data is provi class="col-5" >
-
- - - Created: - - by - - - USER - - - -
-
-
-
+ + Created: + + by - Updated: + USER - by - - - USER - - -
+
-
-
-
- + Updated: -
-
+ by + + + USER + + +
diff --git a/source/frontend/src/features/mapSideBar/lease/common/LeaseHeader.tsx b/source/frontend/src/features/mapSideBar/lease/common/LeaseHeader.tsx index c637f7425e..1b1f0e7ae0 100644 --- a/source/frontend/src/features/mapSideBar/lease/common/LeaseHeader.tsx +++ b/source/frontend/src/features/mapSideBar/lease/common/LeaseHeader.tsx @@ -10,11 +10,13 @@ import { HeaderField, HeaderLabelCol, } from '@/components/common/HeaderField/HeaderField'; +import StatusField from '@/components/common/HeaderField/StatusField'; +import { StyledFiller } from '@/components/common/HeaderField/styles'; import { InlineFlexDiv } from '@/components/common/styles'; import { LeaseHeaderAddresses } from '@/features/leases/detail/LeaseHeaderAddresses'; import { Api_LastUpdatedBy } from '@/models/api/File'; import { ApiGen_Concepts_Lease } from '@/models/api/generated/ApiGen_Concepts_Lease'; -import { prettyFormatDate } from '@/utils'; +import { exists, prettyFormatDate } from '@/utils'; import HistoricalNumbersContainer from '../../shared/header/HistoricalNumberContainer'; import HistoricalNumberFieldView from '../../shared/header/HistoricalNumberSectionView'; @@ -73,15 +75,13 @@ export const LeaseHeader: React.FC = ({ lease, lastUpdatedBy - - - - - - {lease?.fileStatusTypeCode?.description} - - - + + + + {exists(lease?.fileStatusTypeCode) && ( + + )} + diff --git a/source/frontend/src/features/mapSideBar/lease/common/__snapshots__/LeaseHeader.test.tsx.snap b/source/frontend/src/features/mapSideBar/lease/common/__snapshots__/LeaseHeader.test.tsx.snap index 8c5efcaa1a..c5d3cf9870 100644 --- a/source/frontend/src/features/mapSideBar/lease/common/__snapshots__/LeaseHeader.test.tsx.snap +++ b/source/frontend/src/features/mapSideBar/lease/common/__snapshots__/LeaseHeader.test.tsx.snap @@ -141,11 +141,22 @@ exports[`LeaseHeader component > renders as expected when no data is provided 1` margin-right: 0; } -.c3 { +.c4 { font-size: 0.87em; line-height: 1.9; } +.c3 { + height: 100%; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-flex-direction: column; + -ms-flex-direction: column; + flex-direction: column; +} + .c0 { margin-top: 0.5rem; margin-bottom: 1.5rem; @@ -299,79 +310,59 @@ exports[`LeaseHeader component > renders as expected when no data is provided 1`
- - - Created: - - Dec 31, 2021 by - USER_B + Created: + Dec 31, 2021 by + + + USER_B + + - +
-
-
- - - Updated: - - by - USER + Updated: + Dec 31, 2021 by + + + USER_A + + - -
-
-
-
-
-
- - - -
-
diff --git a/source/frontend/src/features/mapSideBar/project/__snapshots__/ProjectContainerView.test.tsx.snap b/source/frontend/src/features/mapSideBar/project/__snapshots__/ProjectContainerView.test.tsx.snap index de17b8c118..a1f34e964c 100644 --- a/source/frontend/src/features/mapSideBar/project/__snapshots__/ProjectContainerView.test.tsx.snap +++ b/source/frontend/src/features/mapSideBar/project/__snapshots__/ProjectContainerView.test.tsx.snap @@ -80,10 +80,49 @@ exports[`ProjectSummaryView component > matches snapshot 1`] = ` class="c2" />
- .c0 { + .c5 { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-flex-wrap: nowrap; + -ms-flex-wrap: nowrap; + flex-wrap: nowrap; +} + +.c0 { position: relative; } +.c3 { + font-size: 0.87em; + line-height: 1.9; +} + +.c6 { + font-family: 'BCSans-Bold'; + font-size: 1.4rem; + border-radius: 0.4rem; + -webkit-letter-spacing: 0.1rem; + -moz-letter-spacing: 0.1rem; + -ms-letter-spacing: 0.1rem; + letter-spacing: 0.1rem; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + padding: 0.2rem 0.5rem; + gap: 0.5rem; + color: undefined; + background-color: undefined; +} + +.c4 { + margin-top: auto; + padding-top: 1rem; + padding-bottom: 1rem; +} + .c1 { margin-top: 0.5rem; margin-bottom: 1.5rem; @@ -93,8 +132,14 @@ exports[`ProjectSummaryView component > matches snapshot 1`] = ` } .c2 { - font-size: 0.87em; - line-height: 1.9; + height: 100%; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-flex-direction: column; + -ms-flex-direction: column; + flex-direction: column; }
matches snapshot 1`] = ` class="col-7" >
-
-
- - - -
-
- 771 Project Cool A -
-
+ + + +
+
+ 771 Project Cool A
-
-
- - - -
-
- South Coast Region -
-
+ + + +
+
+ South Coast Region
- - Created: - - Jan 31, 2023 - - by - USER_B + Created: + Jan 31, 2023 by + + + USER_B + + - +
-
-
- - Last updated: - - Feb 1, 2023 - - by - USER_A + Updated: + Feb 1, 2023 by + + + USER_A + + - +
-
-
+
- - - -
-
- Active (AC) + + + + + ACTIVE (AC)
diff --git a/source/frontend/src/features/mapSideBar/project/common/ProjectHeader.test.tsx b/source/frontend/src/features/mapSideBar/project/common/ProjectHeader.test.tsx index 2cf06abbe5..da3d7c0f7c 100644 --- a/source/frontend/src/features/mapSideBar/project/common/ProjectHeader.test.tsx +++ b/source/frontend/src/features/mapSideBar/project/common/ProjectHeader.test.tsx @@ -44,9 +44,9 @@ describe('ProjectHeader component', () => { expect(getByText('771 Project Cool A')).toBeVisible(); expect(getByText('USER_A')).toBeVisible(); - expect(getByText(createDateString)).toBeVisible(); + expect(getByText(new RegExp(createDateString))).toBeVisible(); expect(getByText('USER_B')).toBeVisible(); - expect(getByText(updateDateString)).toBeVisible(); - expect(getByText('Active (AC)')).toBeVisible(); + expect(getByText(new RegExp(updateDateString))).toBeVisible(); + expect(getByText('ACTIVE (AC)')).toBeVisible(); }); }); diff --git a/source/frontend/src/features/mapSideBar/project/common/ProjectHeader.tsx b/source/frontend/src/features/mapSideBar/project/common/ProjectHeader.tsx index 612beeb8ab..994be0ffc5 100644 --- a/source/frontend/src/features/mapSideBar/project/common/ProjectHeader.tsx +++ b/source/frontend/src/features/mapSideBar/project/common/ProjectHeader.tsx @@ -1,10 +1,11 @@ -import { Col, Row } from 'react-bootstrap'; -import styled from 'styled-components'; +import { Col } from 'react-bootstrap'; +import AuditSection from '@/components/common/HeaderField/AuditSection'; import { HeaderField } from '@/components/common/HeaderField/HeaderField'; -import { UserNameTooltip } from '@/components/common/UserNameTooltip'; +import StatusField from '@/components/common/HeaderField/StatusField'; +import { StyledFiller, StyledRow } from '@/components/common/HeaderField/styles'; import { ApiGen_Concepts_Project } from '@/models/api/generated/ApiGen_Concepts_Project'; -import { prettyFormatUTCDate } from '@/utils'; +import { exists } from '@/utils'; export interface IProjectHeaderProps { project?: ApiGen_Concepts_Project; @@ -16,68 +17,23 @@ const ProjectHeader: React.FunctionComponent - - - - {project?.code} {project?.description} - - - - - - - {project?.regionCode?.description} - - - + + {project?.code} {project?.description} + + + {project?.regionCode?.description} + - - - - - Created: {prettyFormatUTCDate(project?.appCreateTimestamp)} by{' '} - - - - - - - - Last updated: {prettyFormatUTCDate(project?.appLastUpdateTimestamp)}{' '} - by{' '} - - - - - - - - {project?.projectStatusTypeCode?.description} - - - + + + + {exists(project.projectStatusTypeCode) && ( + + )} + ); }; export default ProjectHeader; - -const StyledRow = styled(Row)` - margin-top: 0.5rem; - margin-bottom: 1.5rem; - border-bottom-style: solid; - border-bottom-color: grey; - border-bottom-width: 0.1rem; -`; - -const StyleSmallText = styled.span` - font-size: 0.87em; - line-height: 1.9; -`; diff --git a/source/frontend/src/features/mapSideBar/project/common/__snapshots__/ProjectHeader.test.tsx.snap b/source/frontend/src/features/mapSideBar/project/common/__snapshots__/ProjectHeader.test.tsx.snap index afd5a67a80..35e0d59d06 100644 --- a/source/frontend/src/features/mapSideBar/project/common/__snapshots__/ProjectHeader.test.tsx.snap +++ b/source/frontend/src/features/mapSideBar/project/common/__snapshots__/ProjectHeader.test.tsx.snap @@ -6,7 +6,46 @@ exports[`ProjectHeader component > renders as expected 1`] = ` class="Toastify" />
- .c0 { + .c2 { + font-size: 0.87em; + line-height: 1.9; +} + +.c4 { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-flex-wrap: nowrap; + -ms-flex-wrap: nowrap; + flex-wrap: nowrap; +} + +.c5 { + font-family: 'BCSans-Bold'; + font-size: 1.4rem; + border-radius: 0.4rem; + -webkit-letter-spacing: 0.1rem; + -moz-letter-spacing: 0.1rem; + -ms-letter-spacing: 0.1rem; + letter-spacing: 0.1rem; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + padding: 0.2rem 0.5rem; + gap: 0.5rem; + color: undefined; + background-color: undefined; +} + +.c3 { + margin-top: auto; + padding-top: 1rem; + padding-bottom: 1rem; +} + +.c0 { margin-top: 0.5rem; margin-bottom: 1.5rem; border-bottom-style: solid; @@ -15,8 +54,14 @@ exports[`ProjectHeader component > renders as expected 1`] = ` } .c1 { - font-size: 0.87em; - line-height: 1.9; + height: 100%; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-flex-direction: column; + -ms-flex-direction: column; + flex-direction: column; }
renders as expected 1`] = ` class="col-7" >
-
-
- - - -
-
- 771 Project Cool A -
-
+ + + +
+
+ 771 Project Cool A
-
-
- - - -
-
- South Coast Region -
-
+ + + +
+
+ South Coast Region
- - Created: - - Jan 31, 2023 - - by - USER_B + Created: + Jan 31, 2023 by + + + USER_B + + - +
-
-
- - Last updated: - - Feb 1, 2023 - - by - USER_A + Updated: + Feb 1, 2023 by + + + USER_A + + - +
-
-
+
- - - -
-
- Active (AC) + + + + + ACTIVE (AC)
diff --git a/source/frontend/src/features/mapSideBar/research/__snapshots__/ResearchContainer.test.tsx.snap b/source/frontend/src/features/mapSideBar/research/__snapshots__/ResearchContainer.test.tsx.snap index 9b000d1a1b..945248f048 100644 --- a/source/frontend/src/features/mapSideBar/research/__snapshots__/ResearchContainer.test.tsx.snap +++ b/source/frontend/src/features/mapSideBar/research/__snapshots__/ResearchContainer.test.tsx.snap @@ -1,28 +1,38 @@ // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html exports[`ResearchContainer component > renders as expected 1`] = ` -.c18 { +.c8 { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-flex-wrap: nowrap; + -ms-flex-wrap: nowrap; + flex-wrap: nowrap; +} + +.c22 { background-color: white; font-size: 1.4rem; border-color: transparent; } -.c18 .nav-tabs { +.c22 .nav-tabs { height: auto; } -.c18 .nav-item { +.c22 .nav-item { min-width: 5rem; padding: 0.1rem 0.6rem; } -.c18 .nav-item:hover { +.c22 .nav-item:hover { border-color: transparent; -webkit-text-decoration: underline; text-decoration: underline; } -.c18 .nav-item.active { +.c22 .nav-item.active { font-family: 'BCSans-Bold'; border-color: transparent; } @@ -36,23 +46,23 @@ exports[`ResearchContainer component > renders as expected 1`] = ` margin-bottom: 2rem; } -.c8 { +.c12 { height: 100%; } -.c9 { +.c13 { overflow: auto; height: 100%; width: 100%; } -.c15 { +.c19 { overflow: auto; height: 100%; width: 100%; } -.c6 { +.c10 { width: 100%; position: relative; overflow: auto; @@ -61,7 +71,7 @@ exports[`ResearchContainer component > renders as expected 1`] = ` flex: 1; } -.c7 { +.c11 { height: 100%; width: 100%; } @@ -80,35 +90,35 @@ exports[`ResearchContainer component > renders as expected 1`] = ` cursor: pointer; } -.c17 { +.c21 { height: 100%; } -.c17 .tab-content { +.c21 .tab-content { border-radius: 0 0.4rem 0.4rem 0.4rem; height: calc(100% - 2.5rem); overflow-y: auto; } -.c17 .tab-content .tab-pane { +.c21 .tab-content .tab-pane { position: relative; } -.c19 { +.c23 { padding-top: 1rem; } -.c20 { +.c24 { text-align: right; } -.c22 { +.c26 { font-weight: bold; border-bottom: 0.2rem solid; margin-bottom: 2rem; } -.c21 { +.c25 { margin: 1.5rem; padding: 1.5rem; background-color: white; @@ -116,22 +126,46 @@ exports[`ResearchContainer component > renders as expected 1`] = ` border-radius: 0.5rem; } -.c24.required::before { +.c28.required::before { content: '*'; position: absolute; top: 0.75rem; left: 0rem; } -.c23 { +.c27 { font-weight: bold; } -.c5 { +.c6 { font-size: 0.87em; line-height: 1.9; } +.c9 { + font-family: 'BCSans-Bold'; + font-size: 1.4rem; + border-radius: 0.4rem; + -webkit-letter-spacing: 0.1rem; + -moz-letter-spacing: 0.1rem; + -ms-letter-spacing: 0.1rem; + letter-spacing: 0.1rem; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + padding: 0.2rem 0.5rem; + gap: 0.5rem; + color: undefined; + background-color: undefined; +} + +.c7 { + margin-top: auto; + padding-top: 1rem; + padding-bottom: 1rem; +} + .c4 { margin-top: 0.5rem; margin-bottom: 1.5rem; @@ -140,25 +174,36 @@ exports[`ResearchContainer component > renders as expected 1`] = ` border-bottom-width: 0.1rem; } -.c10 { +.c5 { + height: 100%; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-flex-direction: column; + -ms-flex-direction: column; + flex-direction: column; +} + +.c14 { text-align: left; padding: 0px; margin: 0px; width: 100%; } -.c11 { +.c15 { font-weight: normal; cursor: pointer; padding-bottom: 0.5rem; } -.c11.selected { +.c15.selected { font-weight: bold; cursor: default; } -.c14 { +.c18 { font-size: 1.5rem; border-radius: 50%; opacity: 0.8; @@ -179,7 +224,7 @@ exports[`ResearchContainer component > renders as expected 1`] = ` align-items: center; } -.c12 { +.c16 { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; @@ -196,12 +241,12 @@ exports[`ResearchContainer component > renders as expected 1`] = ` border-bottom: 1px solid; } -.c13 { +.c17 { font-size: 1.4rem; line-height: 2.2rem; } -.c16 { +.c20 { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; @@ -298,104 +343,72 @@ exports[`ResearchContainer component > renders as expected 1`] = ` class="col-7" >
-
-
- - - -
-
- R-109 -
-
+ + + +
+
+ R-109
-
-
- - - -
-
- fsdgsdf -
-
+ + + +
+
+ fsdgsdf
-
-
- - - -
-
-
+ + +
+
-
-
- - - -
-
-
+ + +
+
renders as expected 1`] = `
- - - Created: - - Sep 2, 2022 - by - - admin + Created: + Sep 2, 2022 + by + + + + admin + + - +
-
-
- - - Updated: - - by - - USER + Updated: + Sep 2, 2022 + + by + + + + admin + + - +
-
-
+ + + +
+
+ Active +
+
+
+
+
- - - -
-
- Active + + + + + ACTIVE
@@ -502,22 +546,22 @@ exports[`ResearchContainer component > renders as expected 1`] = `
renders as expected 1`] = ` File Summary
Properties
renders as expected 1`] = ` class="pr-2 col-auto" >
1
@@ -577,16 +621,16 @@ exports[`ResearchContainer component > renders as expected 1`] = `

renders as expected 1`] = ` class="pr-0 text-left col-4" >
Mar 30, 2022
@@ -873,24 +917,24 @@ exports[`ResearchContainer component > renders as expected 1`] = ` class="pr-0 text-left col-4" >

A research result

renders as expected 1`] = ` class="pr-0 text-left col-4" >
No
@@ -931,14 +975,14 @@ exports[`ResearchContainer component > renders as expected 1`] = ` class="pr-0 text-left col-4" >

An expropriation note diff --git a/source/frontend/src/features/mapSideBar/research/common/ResearchHeader.tsx b/source/frontend/src/features/mapSideBar/research/common/ResearchHeader.tsx index b7856f578a..bbfedf82e6 100644 --- a/source/frontend/src/features/mapSideBar/research/common/ResearchHeader.tsx +++ b/source/frontend/src/features/mapSideBar/research/common/ResearchHeader.tsx @@ -1,8 +1,9 @@ -import { Col, Row } from 'react-bootstrap'; -import styled from 'styled-components'; +import { Col } from 'react-bootstrap'; import AuditSection from '@/components/common/HeaderField/AuditSection'; import { HeaderField } from '@/components/common/HeaderField/HeaderField'; +import StatusField from '@/components/common/HeaderField/StatusField'; +import { StyledFiller, StyledRow } from '@/components/common/HeaderField/styles'; import { Api_LastUpdatedBy } from '@/models/api/File'; import { ApiGen_Base_CodeType } from '@/models/api/generated/ApiGen_Base_CodeType'; import { ApiGen_Concepts_ResearchFile } from '@/models/api/generated/ApiGen_Concepts_ResearchFile'; @@ -51,56 +52,33 @@ const ResearchHeader: React.FunctionComponent< return ( - - - - {researchFile?.fileNumber} - - - - - - - {researchFile?.fileName} - - - - - - - {regions} - - - - - - - {districts} - - - + + {researchFile?.fileNumber} + + + {researchFile?.fileName} + + + {regions} + + + {districts} + - - - - - - {researchFile?.fileStatusTypeCode?.description} - - - + + + + + {researchFile?.fileStatusTypeCode?.description} + + {exists(researchFile?.fileStatusTypeCode) && ( + + )} + ); }; export default ResearchHeader; - -const StyledRow = styled(Row)` - margin-top: 0.5rem; - margin-bottom: 1.5rem; - border-bottom-style: solid; - border-bottom-color: grey; - border-bottom-width: 0.1rem; -`; diff --git a/source/frontend/src/features/mapSideBar/research/common/__snapshots__/ResearchHeader.test.tsx.snap b/source/frontend/src/features/mapSideBar/research/common/__snapshots__/ResearchHeader.test.tsx.snap index d3429e22ca..4778a97adc 100644 --- a/source/frontend/src/features/mapSideBar/research/common/__snapshots__/ResearchHeader.test.tsx.snap +++ b/source/frontend/src/features/mapSideBar/research/common/__snapshots__/ResearchHeader.test.tsx.snap @@ -6,7 +6,7 @@ exports[`ResearchHeader component > renders as expected when provided no researc class="Toastify" />
- .c1 { + .c2 { font-size: 0.87em; line-height: 1.9; } @@ -19,6 +19,17 @@ exports[`ResearchHeader component > renders as expected when provided no researc border-bottom-width: 0.1rem; } +.c1 { + height: 100%; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-flex-direction: column; + -ms-flex-direction: column; + flex-direction: column; +} +
@@ -26,100 +37,68 @@ exports[`ResearchHeader component > renders as expected when provided no researc class="col-7" >
-
-
- - - -
-
-
+ + +
+
-
-
- - - -
-
-
+ + +
+
-
-
- - - -
-
-
+ + +
+
-
-
- - - -
-
-
+ + +
+
renders as expected when provided no researc
- - - Created: - - by - USER + Created: + by + + + USER + + - +
-
-
- - - Updated: - - by - USER + Updated: + by + + + USER + + - +
-
-
-
- - - -
-
+ + +
+
diff --git a/source/frontend/src/index.tsx b/source/frontend/src/index.tsx index a87d128c82..d63df2420a 100644 --- a/source/frontend/src/index.tsx +++ b/source/frontend/src/index.tsx @@ -50,8 +50,6 @@ const Index = () => { ); }; -console.log(bcTokens); - const InnerComponent = ({ tenant }: { tenant: ITenantConfig2 }) => { const refresh = useRefreshSiteminder(); return (