-
Notifications
You must be signed in to change notification settings - Fork 3
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.
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
feat(details): Add additional fields to SEATool transform; Display in UI #266
Conversation
}, | ||
{ | ||
label: "Status Date", | ||
value: data.statusDate |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
wooooo
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
LGTM
@@ -0,0 +1,114 @@ | |||
import { removeUnderscoresAndCapitalize } from "@/utils"; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
While I do like the templating approach, I foresee a scenario where each Detail Item may require its own custom view/styles.
So, Im of the opinion that these should be centralized components instead of templates. And later, when these views become clearer defined, we can hammer down the nail with templating.
Also, we can simplify the business logic of auth-cms by consolidating it here, instead of managing it in different places.
export const DetailItemsGrid = (props: { label: string; value: ReactNode }) => {
return (
<div key={props.label}>
<h3 className="text-sm">{props.label}</h3>
{props.value}
</div>
);
};
export const SpaDetails = (data: OsMainSourceItem) => {
const { data: user } = useGetUser();
return (
<>
<div className="grid grid-cols-2 gap-4">
<DetailItemsGrid label="Submission ID" value={data.id} />
<DetailItemsGrid label="State" value={data.state} />
<DetailItemsGrid
label="Type"
value={removeUnderscoresAndCapitalize(data.planType)}
/>
<DetailItemsGrid
label="Action Type"
value={
data.actionType
? LABELS[data.actionType as keyof typeof LABELS] ||
data.actionType
: BLANK_VALUE
}
/>
<DetailItemsGrid
label="Initial Submission Date"
value={
data.submissionDate
? format(new Date(data.submissionDate), "MM/dd/yyyy h:mm:ss a")
: BLANK_VALUE
}
/>
<DetailItemsGrid
label="Proposed Effective Date"
value={
data.proposedDate
? format(new Date(data.proposedDate), "MM/dd/yyyy")
: BLANK_VALUE
}
/>
<DetailItemsGrid
label="Approved Effective Date"
value={
data.approvedEffectiveDate
? format(
new Date(data.approvedEffectiveDate),
"MM/dd/yyyy h:mm:ss a"
)
: BLANK_VALUE
}
/>
{user?.isCms && (
<DetailItemsGrid
label="Status Date"
value={
data.statusDate
? format(new Date(data.statusDate), "MM/dd/yyyy h:mm:ss a")
: BLANK_VALUE
}
/>
)}
<DetailItemsGrid
label="Final Disposition Date"
value={
data.finalDispositionDate
? format(
new Date(data.finalDispositionDate),
"MM/dd/yyyy h:mm:ss a"
)
: BLANK_VALUE
}
/>
</div>
<hr className="my-4" />
</>
);
};
export const SubmissionDetails = (data: OsMainSourceItem) => {
const { data: user } = useGetUser();
return (
<>
<div className="grid grid-cols-2 gap-4">
<DetailItemsGrid
label="Submitted By"
value={
<p className="text-lg">{data?.submitterName || BLANK_VALUE}</p>
}
/>
<DetailItemsGrid
label="Submission Source"
value={
<p className="text-lg">
{data?.origin?.toLowerCase() === "onemac"
? "OneMAC"
: BLANK_VALUE}
</p>
}
/>
{user?.isCms && (
<DetailItemsGrid
label="Subject"
value={<p>{data?.subject || BLANK_VALUE}</p>}
/>
)}
{user?.isCms && (
<DetailItemsGrid
label="Description"
value={<p>{data?.description || BLANK_VALUE}</p>}
/>
)}
<DetailItemsGrid
label="CPOC"
value={
<p className="text-lg">{data?.leadAnalystName || BLANK_VALUE}</p>
}
/>
{user?.isCms && (
<DetailItemsGrid
label="Review Team (SRT)"
value={<ReviewTeamList team={data.reviewTeam} />}
/>
)}
</div>
<hr className="my-4" />
</>
);
};
<SpaDetails {...data._source} />
<SubmissionDetails {...data._source} />
But, I'll leave it to you. It's your call.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
This is honestly just a clean-up job for the pattern already used -- there was a good bit of duplicated code to remove -- but we should definitely do a full consideration refactor of it at some point with a larger establishment of patterns/norms.
🎉 This PR is included in version 1.5.0-val.1 🎉 The release is available on GitHub release Your semantic-release bot 📦🚀 |
Purpose
This PR adds the following fields from the SEATool data object into our sink object:
(This is CPOC, was present already)leadAnalystName
reviewTeam
(SRT)subject
description
finalDispositionDate
statusDate
Linked Issues to Close
https://qmacbis.atlassian.net/browse/OY2-26202
Approach
Sink updates
First, the
transformSeaToolData
function return was updated to add the new fields. This required an update to ourseatoolSchema
Zod object, as well. The return type changing here handled updating our types as we infer them using Zod'sz.infer
utility.Then, the UI needed the fields added. There was opportunity to refactor our detail items grid. The grids are rendered by
DetailItemsGrid
, which handles reading the list of items to show, and displaying if they meet thecanView
condition (which can be a function accepting theOneMacUser
as a parameter). The list of items are rendered by the array builders insetup/spa.ts
. The idea is we will likely have a different set of titles/fields for Waivers, so we can re-use the rest of the details display code and just set up new array builders.Assorted Notes/Considerations/Learning
N/A