Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

psp-8228 | Updated header status display #4028

Merged
merged 5 commits into from
May 18, 2024
Merged

psp-8228 | Updated header status display #4028

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
4d24f42
Added generic status component for headers
FuriousLlama May 17, 2024
bc8376f
Merge branch 'dev' into features/psp-8228
FuriousLlama May 17, 2024
76de8ff
Updated tests
FuriousLlama May 17, 2024
1eebb52
Merge branch 'dev' into features/psp-8228
FuriousLlama May 17, 2024
5049c54
Merge branch 'dev' into features/psp-8228
FuriousLlama May 17, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
14 changes: 14 additions & 0 deletions source/frontend/src/assets/scss/_variables.module.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}
26 changes: 24 additions & 2 deletions source/frontend/src/assets/scss/colors.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,23 +1,45 @@
@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;
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I'm hesitant to introduce our own greys when grey 10 to 100 exists in the bcgov standard spec already:
https://github.com/bcgov/design-system/blob/main/packages/design-tokens/dist/css/variables.css

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

That is reasonable. I added it like that because the figma spec used the code instead of a color name. The rest is the same as the response above.


$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;
$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;
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

some of the names here don't seem to match up with their usage in the app which I don't understand.

I think the idea behind these mappings are as follows:

  1. in the upper section, define a list of colours that are not already in the bcgov spec
  2. map those colors to subjective names within the pims app that give developers a clue where that colour is being used. ie. if pims has a "silly" button, perhaps we create a color called "silly-button-color" and map one of our non-gov colours to it. That way if we want to tweak the color of all silly buttons in the app we can do so in one place. (as a result, we may map the same colour to multiple concepts within pims).

Anyways, these colour subjective names seem to have been introduced specifically for these new status labels, and the status labels only, but these names don't seem to reflect that.

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I dont like the color names at all either. However, that's what they are called on figma, so I went for that for now.

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

If ana went with that as a color name, it would likely be because she misunderstood the documentation I sent her during the color palette rework. She asked me for a list of old colors and new colors, and maybe got confused as to which was which (perhaps thinking that the list with more colors was newer, which is actually not the case).

This is actually very unfortunate, because she may have chosen a number of colors from the list that we both (Ana and myself) agreed to remove from the application in favour of colors already in the bcgov spec.

We can go with this for now, and I'll log another tech debt item to clean up the colors again with Ana.

$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;
11 changes: 7 additions & 4 deletions source/frontend/src/components/common/HeaderField/AuditSection.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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<IAuditSectionProps> = ({ baseAudit, lastUpdatedBy }) => {
Expand All @@ -30,10 +30,13 @@ export const AuditSection: React.FC<IAuditSectionProps> = ({ baseAudit, lastUpda
<Col className="text-right">
<StyledSmallText>
<strong>Updated: </strong>
{prettyFormatUTCDate(lastUpdatedBy?.appLastUpdateTimestamp)} by{' '}
{prettyFormatUTCDate(
lastUpdatedBy?.appLastUpdateTimestamp ?? baseAudit?.appLastUpdateTimestamp,
)}{' '}
by{' '}
<UserNameTooltip
userName={lastUpdatedBy?.appLastUpdateUserid}
userGuid={lastUpdatedBy?.appLastUpdateUserGuid}
userName={lastUpdatedBy?.appLastUpdateUserid ?? baseAudit?.appLastUpdateUserid}
userGuid={lastUpdatedBy?.appLastUpdateUserGuid ?? baseAudit?.appLastUpdateUserGuid}
/>
</StyledSmallText>
</Col>
Expand Down
138 changes: 138 additions & 0 deletions source/frontend/src/components/common/HeaderField/StatusField.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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<string>;
}

interface StatusStyle {
icon: IconType;
colorVariant: string;
}

const statusDictionary: Dictionary<StatusStyle> = {
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<React.PropsWithChildren<IStatusFieldProps>> = ({
statusCodeType,
}) => {
const translateStatusCode = (statusCodeType: ApiGen_Base_CodeType<string>) => {
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 (
<StyledBottomRow className="no-gutters justify-content-end align-items-end">
<Col />
<Col xs="auto" className="align-self-end">
<RetiredWarning $variant={statusFound.colorVariant}>
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

a prop with a name starting with a dollar sign seems new, what does that naming indicate?

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I set it like to differentiate it from a react component (that one is a style). I dont feel strongly about it so will change if it helps

<statusFound.icon size={16} />
{statusCodeType?.description.toUpperCase()}
</RetiredWarning>
</Col>
</StyledBottomRow>
);
};

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};
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I'm confused about the naming choices here. It seems like you could have named these colors whatever you wanted, but ended up going with some of the previously used colors that have since been removed.

For example, why call the blue slideOutBlue? I recognize that as a color that we used to have, but if this is the only incidence of this color, why not name this something closer to the usage. Ie. 'completedStatusColor' or similar.

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

tbh I had a hard time with the colors and the documentation on figma so I decided to name it exactly like the figma ones . I will chat with ana when she is back to get those names aligned.

`;
} 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;
`;
16 changes: 16 additions & 0 deletions source/frontend/src/components/common/HeaderField/styles.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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;
`;
Loading
Loading