Skip to content

Commit

Permalink
Add text translate util (#771)
Browse files Browse the repository at this point in the history
  • Loading branch information
@bangbay-bluetiger
bangbay-bluetiger committed Sep 27, 2024
1 parent 68c1f9d commit fb8646b
Show file tree
Hide file tree
Showing 16 changed files with 202 additions and 46 deletions.
8 changes: 8 additions & 0 deletions services/app-api/forms/sar.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -182,6 +182,7 @@
"intro": {
"section": "Recruitment, Enrollment, and Transitions",
"subsection": "Number of people who signed an MFP informed consent form in the reporting period",
"subsectionTitle": "Number of people who signed an MFP informed consent form in the {{reportingPeriod}}",
"info": [
{
"type": "text",
Expand Down Expand Up @@ -220,6 +221,7 @@
"intro": {
"section": "Recruitment, Enrollment, and Transitions",
"subsection": "Number of MFP transitions in the reporting period",
"subsectionTitle": "Number of MFP transitions in the {{reportingPeriod}}",
"info": [
{
"type": "text",
Expand Down Expand Up @@ -283,6 +285,7 @@
"intro": {
"section": "Recruitment, Enrollment, and Transitions",
"subsection": "Number of MFP transitions from qualified institutions in the reporting period",
"subsectionTitle": "Number of MFP transitions from qualified institutions in the {{reportingPeriod}}",
"info": [
{
"type": "text",
Expand Down Expand Up @@ -400,6 +403,7 @@
"intro": {
"section": "Recruitment, Enrollment, and Transitions",
"subsection": "Number of MFP transitions to qualified residences in the reporting period",
"subsectionTitle": "Number of MFP transitions to qualified residences in the {{reportingPeriod}}",
"info": [
{
"type": "text",
Expand Down Expand Up @@ -499,6 +503,7 @@
"intro": {
"section": "Recruitment, Enrollment, and Transitions",
"subsection": "Total number of active MFP participants in the reporting period",
"subsectionTitle": "Total number of active MFP participants in the {{reportingPeriod}}",
"info": [
{
"type": "text",
Expand Down Expand Up @@ -537,6 +542,7 @@
"intro": {
"section": "Recruitment, Enrollment, and Transitions",
"subsection": "Number of MFP participants completing the program in the reporting period",
"subsectionTitle": "Number of MFP participants completing the program in the {{reportingPeriod}}",
"info": [
{
"type": "text",
Expand Down Expand Up @@ -575,6 +581,7 @@
"intro": {
"section": "Recruitment, Enrollment, and Transitions",
"subsection": "Number of people re-enrolled in MFP during the reporting period",
"subsectionTitle": "Number of people re-enrolled in MFP during the {{reportingPeriod}}",
"info": [
{
"type": "text",
Expand Down Expand Up @@ -613,6 +620,7 @@
"intro": {
"section": "Recruitment, Enrollment, and Transitions",
"subsection": "Number of MFP participants disenrolled from the program during the reporting period",
"subsectionTitle": "Number of MFP participants disenrolled from the program during the {{reportingPeriod}}",
"info": [
{
"type": "text",
Expand Down
3 changes: 0 additions & 3 deletions services/ui-src/src/components/app/AppRoutes.test.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,6 @@ import { AppRoutes } from "components";
import { useStore, UserProvider } from "utils";
import {
mockStateUserStore,
mockLDFlags,
mockBannerStore,
mockReportStore,
} from "utils/testing/setupJest";
Expand All @@ -20,8 +19,6 @@ mockedUseStore.mockReturnValue({
...mockReportStore,
});

mockLDFlags.setDefault({ wpReport: true, sarReport: true });

global.structuredClone = jest.fn((val) => {
return val ? JSON.parse(JSON.stringify(val)) : val;
});
Expand Down
2 changes: 2 additions & 0 deletions services/ui-src/src/components/export/ExportedReportBanner.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,6 +23,8 @@ export const ExportedReportBanner = () => {

const verbiage = verbiageMap[reportType];
const { reportBanner } = verbiage;

// LaunchDarkly
const printExperience = useFlags()?.printExperience;

const onClickHandler = () => {
Expand Down
2 changes: 1 addition & 1 deletion services/ui-src/src/components/modals/CreateWorkPlanModal.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -58,7 +58,7 @@ export const CreateWorkPlanModal = ({
const [showAlert, setShowAlert] = useState<boolean>(false);
const [submitting, setSubmitting] = useState<boolean>(false);

// temporary flag for testing copyover
// LaunchDarkly - temporary flag for testing copyover
const isCopyOverTest = useFlags()?.isCopyOverTest;

const form: FormJson = !previousReport
Expand Down
79 changes: 74 additions & 5 deletions services/ui-src/src/components/pages/Export/ExportedReportPage.test.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,7 @@ import {
import {
mockEmptyReportStore,
mockForm,
mockLDFlags,
mockReportJson,
mockReportPeriod,
mockReportStore,
Expand All @@ -39,6 +40,8 @@ const mockedUseStore = useStore as jest.MockedFunction<typeof useStore>;

const mockReport = mockUseStore.report;

mockLDFlags.setDefault({ translateReport: false });

const createRoutes = (routes: string[], withChildren: boolean) =>
routes.map((name, index) => ({
name,
Expand All @@ -51,6 +54,7 @@ const createRoutes = (routes: string[], withChildren: boolean) =>
info: `${name} - Info`,
section: name,
subsection: name,
subsectionTitle: `${name} - Translate`,
},
dashboardSubtitle: `${name} - Dashboard Subtitle`,
},
Expand All @@ -64,6 +68,7 @@ const createRoutes = (routes: string[], withChildren: boolean) =>
intro: {
section: "",
subsection: `${name} - Child Subsection Intro`,
subsectionTitle: `${name} - Child Subsection Intro Translate`,
},
},
},
Expand Down Expand Up @@ -117,7 +122,11 @@ describe("<ExportedReportPage />", () => {
level: 2,
name: WP_SAR_STATE_TERRITORY_INITIATIVES,
});
const childHeading = page.getByRole("heading", {
const childHeading1 = page.getByRole("heading", {
level: 3,
name: `${WP_SAR_GENERAL_INFORMATION} - Child Subsection Intro`,
});
const childHeading2 = page.getByRole("heading", {
level: 3,
name: `${WP_SAR_STATE_TERRITORY_INITIATIVES} - Child Subsection Intro`,
});
Expand All @@ -126,10 +135,30 @@ describe("<ExportedReportPage />", () => {
`${mockStateName} MFP Work Plan for ${mockReportYear} - Period ${mockReportPeriod}`
);
expect(sectionHeading).not.toBeInTheDocument();
expect(childHeading1).toBeVisible();
expect(childHeading2).toBeVisible();
});

test("loads WP with children with translate()", async () => {
mockLDFlags.set({ translateReport: true });

mockWpReportContext.report.formTemplate.routes = createRoutes(
wpRoutes,
true
);

const page = render(exportedReportPage(mockReportJson));
const childHeading = page.getByRole("heading", {
level: 3,
name: `${WP_SAR_GENERAL_INFORMATION} - Child Subsection Intro Translate`,
});

expect(childHeading).toBeVisible();
});

test("loads WP initiatives with correct heading level", async () => {
mockLDFlags.set({ translateReport: false });

const initiativeRoute = {
name: "WP",
path: "/mock/mock-route",
Expand Down Expand Up @@ -251,18 +280,44 @@ describe("<ExportedReportPage />", () => {
const reportType = ReportType.WP;
const reportPage = { heading: "MFP Work Plan for" };
const report: ReportShape = mockReport!;
const result = reportTitle(reportType, reportPage, report);
const result = reportTitle(reportType, report, reportPage);

expect(result).toBe(
`${mockStateName} MFP Work Plan for ${mockReportYear} - Period ${mockReportPeriod}`
);
});

test("generates the correct title for WP report type using translate()", () => {
mockLDFlags.set({ translateReport: true });

const reportType = ReportType.WP;
const report: ReportShape = mockReport!;
const result = reportTitle(reportType, report);

expect(result).toBe(
`${mockStateName} MFP Work Plan for ${mockReportYear} - Period ${mockReportPeriod}`
);
});

test("generates the correct title for SAR report type", () => {
mockLDFlags.set({ translateReport: false });

const reportType = ReportType.SAR;
const reportPage = { heading: "Semi-Annual Progress Report (SAR) for" };
const report: ReportShape = mockReport!;
const result = reportTitle(reportType, reportPage, report);
const result = reportTitle(reportType, report, reportPage);

expect(result).toBe(
`${mockStateName} Semi-Annual Progress Report (SAR) for ${mockReportYear} - Period ${mockReportPeriod}`
);
});

test("generates the correct title for SAR report type using translate()", () => {
mockLDFlags.set({ translateReport: true });

const reportType = ReportType.SAR;
const report: ReportShape = mockReport!;
const result = reportTitle(reportType, report);

expect(result).toBe(
`${mockStateName} Semi-Annual Progress Report (SAR) for ${mockReportYear} - Period ${mockReportPeriod}`
Expand All @@ -273,17 +328,31 @@ describe("<ExportedReportPage />", () => {
const reportType: any = "unknown report type";
const report: ReportShape = mockReport!;

expect(() => reportTitle(reportType, undefined, report)).toThrowError(
expect(() => reportTitle(reportType, report, undefined)).toThrowError(
`The title for report type ${reportType} has not been implemented.`
);
});
});

describe("formatSectionHeader()", () => {
test("generates the correct header", () => {
mockLDFlags.set({ translateReport: false });

const header = "Test reporting period";
const report: ReportShape = mockReport!;
const result = formatSectionHeader(report, header);
const result = formatSectionHeader(report, header, false);

expect(result).toBe(
`Test January 1 to June 30, ${mockReportYear} reporting period`
);
});

test("generates the correct header with translate()", () => {
mockLDFlags.set({ translateReport: true });

const header = "Test {{reportingPeriod}}";
const report: ReportShape = mockReport!;
const result = formatSectionHeader(report, header, true);

expect(result).toBe(
`Test January 1 to June 30, ${mockReportYear} reporting period`
Expand Down
69 changes: 58 additions & 11 deletions services/ui-src/src/components/pages/Export/ExportedReportPage.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,6 +22,8 @@ import {
// verbiage
import wpVerbiage from "verbiage/pages/wp/wp-export";
import sarVerbiage from "verbiage/pages/sar/sar-export";
import { useFlags } from "launchdarkly-react-client-sdk";
import { translate } from "utils/text/translate";

export const SAR_RET = "Recruitment, Enrollment, and Transitions";
export const WP_SAR_STATE_TERRITORY_INITIATIVES =
Expand Down Expand Up @@ -52,14 +54,14 @@ export const ExportedReportPage = () => {
<Box sx={sx.innerContainer}>
{/* pdf metadata */}
<Helmet>
<title>{reportTitle(reportType, reportPage, report)}</title>
<title>{reportTitle(reportType, report, reportPage)}</title>
<meta name="author" content={metadata.author} />
<meta name="subject" content={metadata.subject} />
<meta name="language" content={metadata.language} />
</Helmet>
{/* report heading */}
<Heading as="h1" sx={sx.heading}>
{reportTitle(reportType, reportPage, report)}
{reportTitle(reportType, report, reportPage)}
</Heading>
{/* report metadata tables */}
<ExportedReportMetadataTable
Expand All @@ -80,13 +82,37 @@ export const ExportedReportPage = () => {

export const reportTitle = (
reportType: ReportType,
reportPage: any,
report: ReportShape
report: ReportShape,
reportPage?: any
): string => {
// LaunchDarkly
const translateReport = useFlags()?.translateReport;

const { fieldData, reportYear, reportPeriod } = report;
const { stateName } = fieldData;
switch (reportType) {
case ReportType.WP:
case ReportType.SAR:
return `${report.fieldData.stateName} ${reportPage.heading} ${report.reportYear} - Period ${report.reportPeriod}`;
case ReportType.WP: {
if (translateReport) {
return translate(wpVerbiage.reportPage.reportTitle, {
stateName,
reportYear,
reportPeriod,
});
}

return `${stateName} ${reportPage.heading} ${reportYear} - Period ${reportPeriod}`;
}
case ReportType.SAR: {
if (translateReport) {
return translate(sarVerbiage.reportPage.reportTitle, {
stateName,
reportYear,
reportPeriod,
});
}

return `${stateName} ${reportPage.heading} ${reportYear} - Period ${reportPeriod}`;
}
default:
assertExhaustive(reportType);
throw new Error(
Expand All @@ -95,12 +121,21 @@ export const reportTitle = (
}
};

export const formatSectionHeader = (report: ReportShape, header: string) => {
export const formatSectionHeader = (
report: ReportShape,
header: string,
translateReport: boolean
) => {
const newPeriod = `${displayLongformPeriod(
report.reportPeriod,
report.reportYear
)}`;
const newHeader = header.replace(" reporting period", newPeriod);

if (translateReport) {
return translate(header, { reportingPeriod: newPeriod });
}

const newHeader = header.replace("reporting period", newPeriod);
return newHeader;
};

Expand All @@ -123,13 +158,25 @@ export const renderReportSections = (
reportRoutes: ReportRoute[],
report: ReportShape
) => {
// LaunchDarkly
let translateReport = useFlags()?.translateReport;

const { reportType } = report;
// recursively render sections
const renderSection = (section: ReportRoute, headingLevel: HeadingLevel) => {
//because R,E & T section needs numbers added, switch from shallow copy to deep copy
const childSections = structuredClone(section.children) || [];
const heading = section.verbiage?.intro.subsection
? formatSectionHeader(report, section.verbiage.intro.subsection)
let subsection;

if (translateReport && section.verbiage?.intro.subsectionTitle) {
subsection = section.verbiage.intro.subsectionTitle;
} else {
subsection = section.verbiage?.intro.subsection;
translateReport = false;
}

const heading = subsection
? formatSectionHeader(report, subsection, translateReport)
: section.name;
const sectionHeading =
section.verbiage?.intro.exportSectionHeader || heading;
Expand Down
4 changes: 1 addition & 3 deletions services/ui-src/src/components/pages/Home/HomePage.test.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@ import { render, screen } from "@testing-library/react";
// components
import { HomePage } from "components";
// utils
import { mockLDFlags, RouterWrappedComponent } from "utils/testing/setupJest";
import { RouterWrappedComponent } from "utils/testing/setupJest";
import { testA11y } from "utils/testing/commonTests";

const homeView = (
Expand All @@ -11,8 +11,6 @@ const homeView = (
</RouterWrappedComponent>
);

mockLDFlags.setDefault({ wpReport: true, sarReport: true });

describe("<HomePage />", () => {
test("Check that HomePage renders", () => {
render(homeView);
Expand Down
Loading

0 comments on commit fb8646b

Please sign in to comment.