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.

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

Merged
merged 18 commits into from
Dec 19, 2023

Conversation

hannasage
Copy link

Purpose

This PR adds the following fields from the SEATool data object into our sink object:

  • leadAnalystName (This is CPOC, was present already)
  • 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 our seatoolSchema Zod object, as well. The return type changing here handled updating our types as we infer them using Zod's z.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 the canView condition (which can be a function accepting the OneMacUser as a parameter). The list of items are rendered by the array builders in setup/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

@hannasage hannasage self-assigned this Dec 15, 2023
@hannasage hannasage marked this pull request as ready for review December 15, 2023 19:14
},
{
label: "Status Date",
value: data.statusDate
Copy link
Contributor

Choose a reason for hiding this comment

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

wooooo

Copy link
Contributor

@mdial89f mdial89f left a 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";
Copy link
Contributor

@pkim-gswell pkim-gswell Dec 19, 2023

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.

Copy link
Author

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.

@hannasage hannasage merged commit 147b66e into master Dec 19, 2023
16 checks passed
@hannasage hannasage deleted the oy2-26202 branch December 19, 2023 20:24
Copy link
Contributor

🎉 This PR is included in version 1.5.0-val.1 🎉

The release is available on GitHub release

Your semantic-release bot 📦🚀

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants